SVG-Dashboards: различия между версиями

{{DISPLAYTITLE: SVG-панели (Dashboards)}}

== Введение ==

[[Image: WebUI SVG-Dash-demo-electroseti.jpg |300px|thumb|right| На устройствах в режиме HMI. <br>[https://youtu.be/Ziya_4QKU5I Смотреть видео] ]]

Возможности:

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

== Полноэкранный и HMI режимы ==

{{Anchor|hmi}}

Полноэкранный режим позволяет переключаться между панелями через боковое меню, а в режиме HMI переключение надо реализовывать самим: добавлять в SVG-изображение кнопку (объект) с URL на нужную панель.

Image: WebUI SVG HMI mode.png | HMI

</gallery>

== Подготовка ==

=== Смена уровня доступа к веб-интерфейсу ===

{{Wbincludes:WebUI Change Access Level}}

=== Требования к изображению ===

Основой для SVG-панели служит svg-изображение, которое мы рекомендуем создавать в [https://inkscape.org/ru/ Inkscape] — он полностью без отклонений поддерживает стандарт SVG.

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

==== Релиз wb-2307 и новее ====

{{SupportedSinceRelease

| release = wb-2307

}}

==== Релиз wb-2304 и старее ====

Ограничения:

* Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите).

Изображение может быть любой ширины и высоты, а также с любым количеством элементов.

== Создание SVG-панели ==

{{YouTube

|link=https://youtu.be/xWksClOYGbA

|text=Пример создания панели

}}

Создайте новую SVG-панель:

После загрузки изображение отобразится на открытой странице:

# Сохраните изменения и посмотрите результат, для этого нажмите на кнопку '''Демонстрация'''.

Опция '''Растягивать во весь экран''' впишет панель в свободное пространство.

== Синтаксис ==

=== Значение MQTT-топика ===

Значение из MQTT-топика, который указан в поле '''Канал'''  помещается в переменную '''val'''.

=== Условные выражения ===

Доступные операции:

* <code>></code> — больше

(val  == 1) ? 'ВКЛ' : 'ОТКЛ'

</syntaxhighlight>

=== Арифметические операции ===

Над полученным из MQTT-топика можно совершать простые арифметические операции:

* <code>+</code> — сложение

(val*0.1>20) ? 'АВАРИЯ' : 'НОРМА'

</syntaxhighlight>

=== Округление значений ===

Часто с датчиков поступают значения с несколькими знаками после запятой, если вам не нужна такая точность в svg-панели, то их можно округлить:

<syntaxhighlight lang="javascript">

</syntaxhighlight>

== Редактор связей==

Изображение готовится во внешнем векторном редакторе, а вот назначение связей элементам делается в веб-интерфейсе контроллера.

Чтобы связать svg-элемент изображения со значениями или событиями, выберите его мышкой, после этого рядом с изображением появятся поля настройки поведения элемента.

{{SupportedSinceRelease

| release = wb-2307

Группы удобно использовать для создания кнопок: объединили в редакторе прямоугольник и иконку и получилась кнопка.

}}

После настройки всех связи нажмите кнопку '''Сохранить'''.

=== Чтение ===

Отображение значений из источника в текстовом поле.

(val  == 1) ? 'ВКЛ' : 'ОТКЛ'

</syntaxhighlight>

=== Запись в канал ===

С помощью этой настройки вы можете записать значение в топик при клике пользователя по элементу.

Значение выключенного состояния = 0

</syntaxhighlight>

=== Переход и смахивания ===

{{SupportedSinceRelease

| release = wb-2307

|content=

С помощью переходов можно создавать многостраничные интерфейсы:

По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не модем устранить.

}}

=== Видимость ===

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

Выберите в поле '''Канал''' MQTT-топик, на информацию из которого будет реагировать элемент, в поле '''Условие''' выберите условие, а в поле '''Значение''' — значение.

=== Стиль оформления ===

Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи для действий, оповещения пользователя о событии т.д.

(val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''

</syntaxhighlight>

== Редактирование ==

=== Панель ===

Чтобы внести изменения:

# Откройте SVG-панель.

# Нажмите кнопку '''Редактировать'''.

# Внесите изменения и сохраните их нажатием на кнопку '''Демонстрация'''.

=== SVG-изображение ===

==== Релиз wb-2307 и новее ====

{{SupportedSinceRelease

| release = wb-2307

}}

==== Релиз wb-2304 и старее ====

Редактор SVG-панели в момент привязки действий к элементу прописывает data-svg-param-id, поэтому для редактирования изображения нужно его загрузить с контроллера на компьютер:

# В окне редактирования нажмите кнопку '''Выберите файл'''.

# После того, как кнопка '''Change''' станет активной, нажмите на нее.

== Перенос на другой контроллер ==

Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер.

Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — svg-элементы нужно будет привязать к новым MQTT-топикам.

=== Сохранение ===

Сохраните svg-файл и описание связей:

# Скачайте файл с контроллера на компьютер. Для этого нажмите на кнопку с изображением стрелки вниз.

# В редакторе svg-панели нажмите кнопку '''В виде JSON''', скопируйте и сохраните строки в файл.

=== Загрузка ===

# В редакторе svg-панели нажмите кнопку '''В виде JSON''', скопируйте из сохраненного файла описание связей и вставьте текст в поле

# Нажмите кнопку '''Сохранить''' внизу страницы.

==Анимация элементов SVG-панели==

Элементы SVG-панели можно анимировать с помощью CSS.

Покажем на примере создание анимации для изменения цвета текста с красного на зеленый и обратно. Так как в SVG текст выполняется заливкой, то потребуется изменять свойство '''fill'''.

#Создадим новый SVG-документ в редакторе Inlskape и добавим в него элемент Текст.  

#Сохраним файл и откроем его в текстовом редакторе.

#:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20.  

#Сохраним дашборд и перейдем в просмотр.

== Добавление внешних ссылок ==

Переход по внешним ссылкам задаётся на этапе создания картинки в редакторе Inkscape.

Теперь остаётся загрузить рисунок в контроллер и проверить.

== Полезные ссылки и материалы ==

* [https://github.com/wirenboard/wb-dashboards-demo Примеры панелей в репозитории wb-dashboards-demo]

* [https://support.wirenboard.com/t/vyvod-dannyh-v-vide-grafika-v-realnom-vremeni/13623/5 Как добавить в SVG-панель ссылку на график или другую страницу]

* [https://wirenboard.com/ru/pages/wb-software/ Статья о веб-интерфейсе контроллера Wiren Board]

* [https://inkscape.org/ru/ Свободный SVG-редактор Inkscape]