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

SVG-Dashboards (просмотреть исходный код)

Версия 11:19, 6 июля 2023

1495 байт убрано ,  10 месяцев назад
→‎Как сделать многостраничную HMI панель
Строка 273: Строка 273:
#:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20.  
#:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20.  
#Сохраним дашборд и перейдем в просмотр.
#Сохраним дашборд и перейдем в просмотр.
== Как сделать многостраничную HMI панель ==
== Добавление внешних ссылок ==
{{Anchor|pages}}
[[Image: svg-hyperlink.png |300px|thumb|right| Создание ссылки в Inkscape ]]
=== Релиз wb-2307 и новее ===
{{SupportedSinceRelease
| release = wb-2307
|content=
[[Image: svg-tap.png |300px|thumb|right| Создание перехода ]]


Чтобы сделать многостраничную панель, надо:
Переход по внешним ссылкам задаётся на этапе создания картинки в редакторе Inkscape.
# Нарисовать для каждой страницы свой рисунок.
# Загрузить эти рисунки в контроллер.
# Выбрать для одного из трёх событий панель, куда надо переходить.
 
Доступны события: одиночное и длинное нажатие, а также смахивание влево и вправо.
}}
 
=== Релиз wb-2304 и старее ===
[[Image: svg-hyperlink.png |300px|thumb|right| Создание ссылки в Inkscape ]]
Надо нарисовать каждую страницу отдельно и связать их между собой гиперссылками.


Создавать гиперссылки так:
Создавать гиперссылки так:
# Открыть панель, на которую надо сослаться в веб-интерфейсе контроллера.
# Скопировать URL из адресной строки браузера.
# Выгрузить панель, откуда надо сослаться и открыть её в Inkscape.
# Выбрать элемент, который будет служить ссылкой, далее в контекстном меню Создать ссылку (hyperlink).
# Выбрать элемент, который будет служить ссылкой, далее в контекстном меню Создать ссылку (hyperlink).
# Вставить в открывшееся поле ссылку, которую копировали на втором шаге.
# Вставить в открывшееся поле ссылку.
# Сохранить рисунок и загрузить его обратно в контроллер.
# Сохранить.
 
Чтобы панель работала при любых адресах контроллера, используйте относительные ссылки, например:
<syntaxhighlight lang="bash">
# вместо
http://192.168.2.108/#!/dashboards/svg/view/house-4in-main


# используйте
Теперь остаётся загрузить рисунок в контроллер и проверить.
/#!/dashboards/svg/view/house-4in-main
</syntaxhighlight>


== Полезные ссылки и материалы ==
== Полезные ссылки и материалы ==
Источник — https://wirenboard.com/wiki/Служебная:Сравнение_версий/74604