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

Что такое визуализация в системе умного дома ioBroker? Как правильно установить драйвера визуализации и настроить их? Что можно сделать с помощью этих инструментов? Сегодня мы постараемся ответить на все эти вопросы.

Установка драйвера VIS

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

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

Регистрация драйвера VIS

Зарегистрироваться можно пройдя по ссылке: iobroker.net. Здесь от нас потребуется вписать адрес электронной почты и придумать пароль нажать на создать аккаунт. На почту придёт сообщение с просьбой подтвердить адрес электронной почты. После подтверждения кликнем на создать APP KEY. Появится длинный ключ, он пригодится когда мы установим драйвер Cloud, пока пропустим этот момент, но если вдруг вы уже поставили драйвер Cloud (Облако) то вы знаете где найти этот ключ доступа к вашей системе. Нам-же надо перейти на вкладку лицензионный ключ и кликнуть на приобрести за 0€:

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

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

Создание визуализации

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

Графические элементы визуализации

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

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

В левой колонке кликнув на снежинку обнаружим там установленные нами из админки вспомогательные пакеты для визуализации:

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

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

Выбрав одновременно все три объекта, мы можем их выровнять, на пример, по центру. Затем добавим кнопку перехода по ссылке. Она нам поможет вернуться в редактор, если мы из него вышли. Даём название и вставляем ссылку. Саму ссылку возьмём в строке браузера:

Попробуем выйти из редактора нажав на крестик в правом верхнем углу и снова в него войти через нашу кнопку «Редактор».

Во вкладке «инструменты» можем выбрать разрешение экрана из списка предлагаемых устройств. Так же его можно задать самостоятельно:

Так же в этой вкладке можно задать Главную страницу, которая будет запускаться по умолчанию; можно добавить в редактор сетку растера и найти ID браузера (оно будет нам нужно если нам надо будет выводить голосовое сообщение на определённом устройстве, а не на сразу на всех); можно настроить ограничения доступа.

Далее перетащим в поле редактора блок картинки (Image) и в правой колонке в свойствах картинки выберем адрес:

Здесь у нас есть возможность загрузить картинку с компьютера просто перетащив её в поле дропбокса:

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

Далее во вкладке «CSS Основные» есть очень важный инструмент z-index. Он определяет порядок наложения элементов. К примеру, если я хочу наложить на слой с картинкой кнопку, то мне надо иметь z-index кнопки выше чем z-index картинки. Поэтому для фоновой картинки я выставлю z-index на 0:

Элемент можно зафиксировать нажав на нём правой кнопкой и выбрав закрытый замок, открытый замок соответственно снова даёт возможность передвигать элемент по полю редактора. Элемент можно дублировать в текущей сцене или можно скопировать на другую страницу. Так же есть возможность экспорта элементов на подобие блоков (странички так-же имеют эту возможность).

Интеграция объектов системы в визуализацию

Рассмотрим взаимодействие вис и объектов из админки. Выберем виджет кнопки и перетащим в редактор:

В свойствах выберем ID Объекта. На пример, ID виртуальной лампы, которую мы создали в статье Пример скрипта из Blockly в ioBroker:

Выйдем из редактора и попробуем ею пощёлкать. В объектах должно меняться состояние объекта Lampa. Таким способом, на пример, текстовые виджеты могут отображать состояние объекта: температуру, влажность и прочее.

Оцените статью
46 - столько SQL запросов к базе.
0,280557 - за столько сгенерировалась страница.