веб-интерфейс

webui — это полностью независимая система визуализации, разработанная jogibear9988 в сообществе ioBroker. Она использует иной подход, чем vis: то, что вы собираете в редакторе, — это настоящий HTML из Web Components , и редактор является инструментом для рисования HTML, а не набором готовых строительных блоков.

Это делает веб-интерфейс мощным и одновременно более требовательным, чем другие интерфейсы. Те, кто знаком с HTML и CSS, смогут добиться больших успехов. Тем, кто не хочет их изучать, лучше подойдут vis-2 или адаптер Devices .

Что оно может сделать

  • Привязки к объектам ioBroker, опционально с преобразованием или промежуточным выражением JavaScript.
  • Перетащите объект из дерева в область рисования, и связь будет создана автоматически. То же самое работает и для отдельного свойства.
  • Вставляйте изображения из буфера обмена или перетаскивайте их извне.
  • Разделенный экран: область для рисования слева, HTML-код справа, и то, и другое одновременно.
  • Настраиваемые многоразовые строительные блоки со своими собственными свойствами, внешним видом и JavaScript.
  • Экраны внутри экранов, глобальная таблица стилей, npm-пакеты с веб-компонентами, коллекции символов ioBroker и графики от ioBroker.
  • Простой скриптовый язык для управления процессами внутри страницы.

Меблировать

Для работы WebUI необходим веб- адаптер; без него он не будет функционировать. У адаптера нет собственной страницы конфигурации; все настройки выполняются в редакторе.

  1. адаптерwebui Установите адаптер на вкладке «Адаптер» и создайте экземпляр.
  2. Откройте редактор:http://<adresse>:8082/webui/ .
  3. Создайте экран и используйте его.start Назовем это так. Это первый экран, который отображает готовый интерфейс.
  4. Завершенная поверхность находится подhttp://<adresse>:8082/webui/runtime.html .

Доступ к другому экрану можно получить по следующему адресу:runtime.html?screenName=zweiterbildschirm .

Что нужно знать перед началом работы

Всё, что вы рисуете, находится в теневом дереве веб-компонента. Это приводит к двум правилам, на которых в конечном итоге застревают все остальные:

  • <body>и<html> Их нельзя изменить в таблице стилей. Для внешнего оформления используется селектор.:host .
  • События не регистрируются с помощьюonclick связанный, но с@click . Theon… Здесь обозначение "-" не работает.

Пользовательский строительный блок может иметь свою функцию.init(instance) для этой цели предоставляется то, что вызывается во время создания.connected() иdisconnected() .

Что будет дальше?

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

В основе всего этого лежит web-component-designer — самостоятельный проект от того же разработчика.

Дополнительная информация

  • Обзор : другие способы добраться до поверхности
  • vis-2 и наборы виджетов : подход с использованием готовых строительных блоков.