вис-2

vis-2 — это инструмент визуализации для ioBroker: пользовательский интерфейс, который можно собрать из отдельных блоков без программирования. Это преемник vis и правильный выбор для любого нового проекта.

Что отличает его от других интерфейсов: vis-2 ничего не создает автоматически. Адаптер Devices и Lovelace генерируют свои страницы на основе устройств и категорий; здесь же вы определяете каждый элемент интерфейса самостоятельно. Это занимает время, и это единственный способ гарантировать, что интерфейс будет выглядеть именно так, как вы себе представляете.

Готовые примеры доступны по адресу https://iobroker.click .

Лицензия

vis-2 — единственная часть ioBroker, требующая лицензии. Исходный код распространяется под лицензией CC BY-NC, что необходимо подтвердить во время установки, и адаптер также требует лицензии. Доступны три версии:

Проверка лицензии сообщества выполняется в режиме онлайн при запуске адаптера . В этот момент устройство должно быть подключено к интернету. Те, кто не хочет или не может этого сделать, должны использовать офлайн-лицензию, которая не требует проверки. Подробную информацию и цены можно найти в разделе «Лицензии адаптера» и в обзоре продукта .

установка

Адаптер называетсяvis-2 Для его работы требуется веб-адаптер , и он функционирует как синглтон : может существовать только один экземпляр.

После этого остаются два адреса:

Вы можете перейти на определенную страницу с помощьюindex.html#Seitenname Оба адреса также указаны в качестве ссылок на вкладке «Экземпляры» .

Редактор

Редакторская работа разделена на четыре направления:

Палитру и атрибуты можно сузить или полностью закрыть, если рабочему пространству требуется больше места.

В Vis-2 представление называется «страницей». В Vis-1 то же самое называлось «представлением», и многие онлайн-уроки до сих пор используют этот термин. Все они означают одно и то же: экран, заполненный виджетами.

страницы

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

• CSS в целом , CSS для фона , а также CSS для шрифтов и текста для оформления.
• Варианты поведения,
• Панель навигации и панель приложений для меню.
• Адаптивные настройки поведения для узких экранов.

навигация

Вместо того чтобы вручную связывать каждую страницу, вы можете включить их в навигацию . vis-2 затем создаст боковую панель с заголовком и порядком страниц, при желании с панелью приложений вверху. Это самый быстрый способ создать интерфейс, который можно использовать на телефоне.

Какая сторона появляется первой?

Каждой странице можно присвоить разрешение , а также установить флажок по умолчанию .index.html Если страница открывается без имени, vis-2 открывает страницу, которая лучше всего подходит для экрана. Это позволяет создать две страницы, одну в портретной, а другую в альбомной ориентации, между которыми происходит переключение при повороте телефона. Если выбрана только одна страница, она будет открываться всегда.

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

Виджет " Основные → Разрешение экрана" отображает фактический размер экрана и соответствующую страницу по умолчанию. Он очень полезен во время настройки; после этого его можно удалить со страницы.

Виджеты

Виджет перетаскивается с палитры на страницу, и его точки данных назначаются в разделе «Атрибуты» → «Виджет» . Доступные наборы виджетов зависят от того, какие наборы виджетов установлены. vis-2 включает пять таких наборов; все остальные являются пользовательскими адаптерами (см. «Наборы виджетов» ).

Классические предложения из раздела 1 также можно использовать. Однако там они выглядят так же, как и в разделе 1, и не соответствуют тематике раздела 2.

Положение: фиксированное или подвижное

По умолчанию виджет располагается в фиксированных координатах. Установка его положения в относительные координаты приводит к автоматическому расположению виджетов в столбцы и вертикальному размещению на узком экране. Для интерфейса, предназначенного для работы как на планшетах, так и на телефонах, это более простой подход, чем использование двух отдельных страниц с фиксированными координатами.

Облигации

Практически у каждого виджета есть поле для идентификатора объекта. Кроме того, каждый атрибут может быть привязан к точке данных: всё просто.{objekt.id} например, написать в поле{hm-rpc.0.OEQ1880105.4.ACTUAL_TEMPERATURE} .

При наличии множества значений и формулы возможности становятся еще шире:

{h:javascript.0.myCustom.height;w:javascript.0.myCustom.width;h*w}

Имя, под которым значение отображается в формуле, ставится перед двоеточием. Последний раздел — это сама формула, которая позволяет использовать любые функции JavaScript в браузере.

Все значения поступают в виде строки. Любой, кто выполняет вычисления, затем помещает их в...parseFloat() В противном случае vis-2 объединяет числа, а не складывает их.

Два нюанса: двоеточие в формуле называется:: Так написано, потому что простой символ разделяет имена. И правило CSS, например:{style: value} Это будет воспринято как ссылка; следовательно, это следует заключить в двойные скобки.{{style: value}} .

Помимо точек данных, существуют встроенные имена:

фильтр

У каждого виджета есть поле фильтра . Если вы введете туда, например, какой-либо термин...licht Страницу можно настроить с помощью виджета.filter - dropdown Ограничьте выборку этой группой. Таким образом, на одной странице поместится множество виджетов, и все они не будут видны одновременно.

Эти записи содержат CSS-класс.vis-filter-item дополнительно активныйvis-filter-item-active Важно знать две вещи: цвет, заданный внутри самого виджета, является встроенным стилем и не может быть переопределен CSS проекта; если вы хотите изменить цвет с помощью CSS, оставьте это поле пустым. И пункты выпадающего меню отображаются вне виджета, то есть к ним можно обращаться только в общем виде, а не по идентификатору отдельного виджета.

Внешний контроль

vis-2 создает три точки данных, позволяющие дистанционно управлять работающим дисплеем:

Команды:changeView (При желании можно перейти на другую страницу)projekt/seite ),refresh илиreload ,alert (Meldung;Titel;Symbol ),dialog иdialogClose ,popup (открывает адрес в новом окне) иplaySound .

Это можно сделать более лаконично, в формате JSON, за одну операцию записи:

setState('vis-2.0.control.command', { instance: '*', command: 'refresh', data: '' });

Напротив, vis-2 сообщает об изменении страницы:control.command затем встаетchangedView иcontrol.data наprojekt/seite , каждый сack=true Эту проблему можно решить с помощью скрипта.

?>playSound Это работает только после того, как пользователь хотя бы раз коснется страницы. Это правило браузера, а не ошибка в vis-2. Поэтому на настенном планшете, отображающем только информацию, звук воспроизводиться не будет.

верно

Для каждого пользователя ioBroker права на чтение и запись могут быть назначены отдельно на трех уровнях:

• Проект : Чтение означает, что пользователю разрешено открыть окно; Письмо означает, что ему разрешено использовать редактор.
• Страница : то же самое относится и к отдельным страницам.
• Виджет : Без разрешения на чтение виджет не будет отображаться на экране; без разрешения на запись он не будет отображаться в редакторе.

Это разрешение предоставляется в диалоговом окне проекта. Вновь созданный пользователь обладает обоими правами. Если какое-либо право отсутствует на уровне проекта, его установка на странице не поможет. Любой, кто попытается получить доступ к странице без необходимых прав, будет перенаправлен на экран выбора проекта.

Настройки для работы

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

• Перезагрузка после длительного сна : как долго может быть прервано соединение до полной перезагрузки страницы. Установка значения «никогда» означает, что страница никогда не будет перезагружаться.
• Интервал переподключения : как часто предпринимается новая попытка подключения.
• Затемненный экран функции «Переподключение» : чтобы планшет в спальне внезапно не загорался ярко ночью.

Все три относятся только к повторному подключению, а не к первоначальной настройке.

Местоположение проекта

Проект представляет собой отдельный файл в файловом хранилище ioBroker:vis-2.0/<Projekt>/vis-views.json Кроме того, доступны загруженные изображения и пользовательская таблица стилей. Проекты можно создавать, переименовывать, экспортировать в ZIP-файл и повторно импортировать через меню «Проекты» . Экспорт — это самый простой способ перенести пользовательский интерфейс в другую систему.

Экспорт данных должен осуществляться через резервную копию. Хотя резервная копия ioBroker включает в себя и хранилище файлов, восстановление отдельного проекта из неё более трудоёмко, чем импорт ZIP-файла.

Переключиться с vis 1

Оба адаптера можно использовать параллельно, не мешая друг другу. Это также наиболее удобный подход: оставьте старый проект в Vis, начните новый в Vis-2 рядом с ним и переключайтесь между ними только после завершения работы над новым интерфейсом.

В Vis-2 доступны классические наборы виджетов, так что недостатка в знакомых строительных блоках нет. Экспортированный проект можно импортировать в диалоговом окне проекта; объем фактически импортируемого контента зависит от используемых виджетов. Поэтому сначала попробуйте это на копии проекта, а не на работающем проекте.