ioBroker - Визуализация

3 нояб. 2018 г.

Всем привет!

Сегодня попробуем разобраться с такой темой как визуализация, тема очень обширная и одной статьёй её не охватить, но мы попытаемся хотя-бы познакомится с общим видом и набросать небольшой пример. Поехали!


Первым делом установим сам драйвер визуализации, в ioBroker он называется vis. Как мы уже делали раньше в поле поиска впишем фразу vis отбросив всё лишнее. Попутно рекомендую поставить ещё несколько вспомогательных драйверов с кнопками, часиками, погодой (я пометил их на скрине).

После того как установится VIS появится окно настроек драйвера. Здесь нам предложат ввести лицензионный ключ. Для частного пользования лицензия совершенно бесплатно, бонусом прилагается бесплатный VPN-сервер для доступа к ioBroker из внешней сети интернет, за это отвечает драйвер Cloud. Зарегистрироваться можно пройдя по линку

Переходим по линку на iobroker.net
Я не знаю на каком языке у вас будет сайт, поэтому на всякий случай переведу с немецкого и пройду весь процесс регистрации вместе с вами дабы избежать путаницы.
Жмём на зарегистрироваться.

От нас потребуется вписать адрес электронной почты и придумать пароль нажать на создать аккаунт. На почту придёт сообщение с просьбой подтвердить адрес электронной почты

После подтверждения кликнем на создать апп ключь. Появится длинный ключ, он пригодится когда мы установим драйвер Cloud, пока пропустим этот момент, но если вдруг вы уже поставили драйвер Cloud (Облако) то вы знаете где найти этот ключ доступа к вашей системе.

Нам-же надо перейти на вкладку лицензионный ключ и кликнуть на приобрести за 0€

Появится окно с подтверждением, ставим галочку и жмём на ОК. Снова переходим на вкладку лицензионного ключа, видим что появилось дополнительное поле, в нём жмём на показать ключ. Его необходимо скопировать.

Переходим в админку ioBroker, вставляем ключ, жмём на проверить, должно появится ОК, жмём на сохранить и выйти.

После того как мы установили драйвер VIS, автоматически должен был установиться и драйвер WEB (это веб-сервер для нашей визуализации), если вдруг у кого-то он не установился то устанавливаем. Должен получиться набор драйверов как скрине ниже. Кликаем на значок перехода и попадаем в редактор. (порт редактора IP_сервера:8082)

Система нас предупредит что у нас нет ещё визуализаций, подтверждаем два раза, теперь должно появится окно предлагающие создать для нас новый проект main и демонстрационную страничку, соглашаемся и попадаем в сам редактор визуализаций.

Кликнем на вкладку страницы затем на плюсик для создания новой страницы. В появившемся окне дадим название нашей новой странички и подтвердим нажав на галочку справа от окна.
Так-же обратите внимание на адрес в браузере

Выберем фон странички который вам нравится.

В левой колонке кликнув на снежинку обнаружим там установленные нами из админки вспомогательные пакеты для визуализации.
Выберем из списка к примеру виджет даты, с правой стороны обнаружим свойства виджета. Пройдитесь по отдельным пунктам, к примеру во вкладке Общие найдёте формат даты, чуть ниже активировав чек бокс «CSS шрифт и текст» можем изменить размер, стиль шрифта.

Накидаю ещё несколько виджетов в рабочее, к примеру время и погодный виджет. В погодном виджете вписываем нужный город (латинскими буквами) и сразу получаем погоду, меняем сколько хотим видеть прогноз дней, циклы обновлений и т.д.
Выбрав одновременно все три объекта мы можем их выровнять на пример по центру
Добавим кнопку перехода по линку, она нам может понадобиться вернуться назад в редактор если мы из него вышли. Даём название и вставляем ссылку, саму ссылку возьмём в строке браузера.
Попробуем выйти из редактора нажав на крестик в правом верхнем углу и снова в него войти через нашу кнопку «Редактор»
Во вкладке инструменты можем выбрать разрешения экрана из списка предлагаемых устройств или задать самостоятельно.
Так-же там можно задать какая страничка у нас главная и должна запускаться по умолчанию. Добавить в редактор сетку растера, там-же найдём ID браузера (оно будет нам нужно если нам надо будет выводить голосовое сообщение на определённом устройстве, а не на сразу на всех), ограничение доступа.
Перетащим в поле редактора блок картинки.
В правой колонке в свойствах картинки выберем адрес.
Здесь у нас есть возможность загрузить картинку с компьютера просто перетащив её в поле дропбокса
Я подготовил одну картинку и закинул в загрузку
Хотел бы обратить ваше внимание на то что в поле адреса можно вставлять на пример адрес стрима веб камеры, чуть ниже настраивается интервал обновления картинки
Во вкладке «CSS Основные» свойств картинки (либо любых других элементов) есть очень важный инструмент z-index, он определяет порядок наложения элементов. К примеру если я хочу наложить на слой с картинкой кнопку, то мне надо иметь z-index кнопки выше чем z-index картинки. Поэтому для фоновой картинки я выставлю z-index на 0.
Элемент можно зафиксировать нажав на нём правой кнопкой и выбрав закрытый замок, открытый замок соответственно снова даёт возможность передвигать элемент  по полю редактора.
Элемент можно дублировать сразу или в другую страницу, так-же есть возможность экспорта элементов на подобие блоков в блоки. (странички так-же имеют эту возможность)
Рассмотрим взаимодействие вис и объектов из админки. Выберем виджет кнопки и перетащим в редактор.
В свойствах выберем ID Объекта, на пример ту-же виртуальную лампу что мы с вами создали на прошлом уроке
Выйдем из редактора и попробуем ею пощёлкать, в объектах должно манятся состояния объекта Lampa.
Таким способом на пример текстовые виджеты могут отображать состояние объекта, на пример температуру или влажность.
Наверное надо закругляться, надеюсь пример поможет вам начать работать с визуализацией, а на следующем уроке займёмся уведомлениями.

Все новости мира умных домов - t.me/SprutAI_News

Остались вопросы? Мы в Telegram - t.me/soprut

  1. (Asdfghjkl)
    (Asdfghjkl) 6 месяцев назад

    Ждём продолжения

  2. Магомед Сападиев (Sapadiev)
    Магомед Сападиев (Sapadiev) отредактировано 6 месяцев назад

    супер! визуализация шикарная! 

  3. Роман Эсмедляев (Mr_REM_Esq)
    Роман Эсмедляев (Mr_REM_Esq) 6 месяцев назад

    А есть какой-нибудь способ взаимодействовать с ioBroker не через визуализацию, а через какое-либо приложение? Для визуализации нужен постоянно запущенный браузер, что в случае с телефоном превращается в тот еще квест, т.к. браузер не работает в фоне (не получает уведомления). Да и ходить с постоянно запущенным браузером тоже как-то странно.

    • F. Alexander (Alex1808)
      F. Alexander (Alex1808) отредактировано 6 месяцев назад

      Следущая статья будет собственно об этом. в продолжение этой статье.

    • Вадим Смолянинов (salambelgorod)
      Вадим Смолянинов (salambelgorod) отредактировано 6 месяцев назад

      Есть приложение для андроида, есть еще драйвер PAW по MQTT работает, ну и телеграм бот ..

      • Роман Эсмедляев (Mr_REM_Esq)
        Роман Эсмедляев (Mr_REM_Esq) отредактировано 6 месяцев назад

        Нету у меня андроида. VIS Viewer для iOS - фигня полная. По сути это тот же браузер, только запускаемый из приложения.
        Может быть есть какой-то вариант прикрутить, например, приложение от другой системы автоматизации в режиме эмуляции? Ну, что-то вроде HAM. Например, есть драйвер OpenHAB. Можно сделать так, чтобы родное приложение OpenHAB к нему коннектилось?

  4. (LovelySunshine)
    (LovelySunshine) 6 месяцев назад

    Ждём еще статей с нетерпением! А на хабре публикуешься?

    • F. Alexander (Alex1808)
      F. Alexander (Alex1808) 6 месяцев назад

      нет. хабр немного другой уровень. да и геморно там публиковать :)

  5. (lopezzz)
    (lopezzz) отредактировано 6 месяцев назад
    Комментарий был удален
  6. (novikov.semyon)
    (novikov.semyon) 3 месяца назад

    Делал как написано. Установил, запустил, добавил виджет погоды (yahooweather), ввел название города,... но вместо погоды белая область виджета ???. iobroker запустил на orangepipc2 (armbian deb) и пробовал установить на стационарном пк c Ubuntu, та же проблема. Виджеты часов и кнопок отображаются нормально.  возможно проблема с api 

    • F. Alexander (Alex1808)
      F. Alexander (Alex1808) отредактировано 3 месяца назад

      Да, есть такое дело. Погодный сервис на котором работал этот виджет изменил API.

  7. (Zavhoz2015)
    (Zavhoz2015) 2 месяца назад

    а какже тогда быть?

К списку статей

Похожие статьи

6 нояб. 2018 г.
ioBroker - уведомления через Телеграм и вывод звука через окно браузера
2 нояб. 2018 г.
установка ioBroker на ОС Linux
7 нояб. 2018 г.
ioBroker - управление через бота телеграм, меню кнопок для телеграм. Короткий обзор алтернативных методов.
8 нояб. 2018 г.
IoBroker. Inline меню для Telegram бота
26 июн. 2018 г.
У многих, кто интересуется домашней автоматизацией (“Умный дом”), на слуху известные открытые системы автоматизации, на которых можно построить управление: OpenHab, MajorDoMo, Home Assistant, Domoticz, HomeBridge. Но если немного расширить диапазон наблюдения, то можно обнаружить множество программных систем, которые могут предложить схожий функционал, а местами даже больший. Сегодня, расскажу об одной из них — ioBroker. Расскажу обзорно, без погружения в подробности реализации, т.к. каждый элемент потребует отдельной статьи (если потребуется — будет статья).
8 нояб. 2018 г.
ioBroker - ham - HomeKit использование плагинов для homebridge в ioBroker
2 нояб. 2018 г.
обзор админки ioBroker
31 окт. 2018 г.
Вводная статья о возможностях IoBroker. Как установить. Как завести в Apple Homekit. Как собрать в едино совершенно разные системы и протоколы.
3 нояб. 2018 г.
ioBroker - устанавливаем первый драйвер на примере яваскрипт + поробуем создать примитивную логику работы скрипта