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

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

Версия 17:42, 17 апреля 2024

22 903 байта добавлено ,  1 месяц назад
→‎Вращение элементов
 
(не показано 117 промежуточных версий 4 участников)
Строка 1: Строка 1:
<languages/>
<translate>
{{DISPLAYTITLE: SVG-панели (Dashboards)}}
{{DISPLAYTITLE: SVG-панели (Dashboards)}}
[[Image: SVG-Dashboard Example.png|800px|thumb|right| Пример SVG-панели]]
[[Image: Outputting data on svg-dashboard.gif |450px|thumb|right| Вывод текстовой информации, статусов и взаимодействие с элементом]]
== Введение == <!--T:1-->
[[Image: WebUI SVG-Dash-demo-electroseti.jpg |300px|thumb|right| На устройствах в режиме HMI. <br>[https://youtu.be/Ziya_4QKU5I Смотреть видео] ]]


== Введение ==
<!--T:2-->
В [[Wiren Board Web Interface | веб-интерфейсе]] контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью можно создавать виртуальные пульты и мнемосхемы управления технологическим процессом.
В [[Wiren Board Web Interface | веб-интерфейсе]] контроллера Wiren Board можно создавать интерактивные графические панели. С их помощью удобно визуализировать схемы управления автоматикой.


<!--T:3-->
Возможности:
Возможности:
* вывод текстовой или логической информации;
* вывод текстовой или логической информации;
Строка 9: Строка 16:
* воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств.
* воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств.


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


== Подготовка ==
== Полноэкранный и HMI режимы == <!--T:5-->
{{Anchor|hmi}}
В ряде задач нужно скрыть от пользователя элементы управления браузером и панели веб-интерфейса контроллера, для этого есть [[Wiren_Board_Web_Interface#fullscreen-and-hmi|Полноэкранный и HMi режимы]].
 
<!--T:6-->
Полноэкранный режим позволяет переключаться между панелями через боковое меню, а в режиме HMI переключение надо реализовывать самим: добавлять в SVG-изображение кнопку (объект) с URL на нужную панель.
 
<!--T:7-->
<gallery mode="packed" heights="150px" caption="Режимы панелей">
Image: WebUI SVG.png | Стандартный вид
Image: WebUI SVG fullscreen.png | Полноэкранный
Image: WebUI SVG HMI mode.png | HMI
</gallery>
 
== Подготовка == <!--T:8-->
=== Смена уровня доступа к веб-интерфейсу ===
=== Смена уровня доступа к веб-интерфейсу ===
{{Wbincludes:WebUI Change Access Level}}
{{Wbincludes:WebUI Change Access Level}}


=== Требования к изображению ===
=== Требования к изображению === <!--T:9-->
Для создания SVG-панели нужно svg-изображение, которое станет основой. Если готового изображения нет, то его можно нарисовать в любом векторном редакторе, например, в свободном [https://inkscape.org/ru/ Inkscape].
Основой для SVG-панели служит svg-изображение, которое мы рекомендуем создавать в [https://inkscape.org/ru/ Inkscape] — он полностью без отклонений поддерживает стандарт SVG.
 
<!--T:10-->
Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми фигурами и текстом.
 
Все панели хранятся в файле <code>/etc/wb-webui.conf</code>, который загружается на компьютер пользователя в хранилище браузера LocalStorage. Это хранилище, в зависимости от браузера, имеет ограниченный размер до 4 Мбайт. При превышении размера вы получите ошибку загрузки панели в редактор. Поэтому важно следить за суммарным размером SVG-рисунков. В реальной жизни, если рисовать панели в Inkscape и не размещать в них растровую графику и сложные градиенты, то рисунки получаются компактные — десятки или сотни килобайт, поэтому большинство пользователей с такой проблемой не столкнутся.
 
==== Релиз wb-2307 и новее ==== <!--T:11-->
{{SupportedSinceRelease
| release = wb-2307
|content=
 
<!--T:12-->
Внутри svg-файла тег ''content'' не должен содержать другие теги. Если вы загрузили файл на контроллер, сделали привязку, скачали этот файл на компьютер и он не открылся в редакторе, окройте svg-файл текстовым редактором и удалите содержимое тега ''content''. После этого вы сможете редактировать файл в svg-редакторе.


Вы можете выводить информацию в любые текстовые элементы и настраивать взаимодействия с любыми сложными фигурами, кругом и текстом.  
<!--T:13-->
Изображение может быть любой ширины и высоты, а также с любым количеством элементов.


<!--T:14-->
}}
==== Релиз wb-2304 и старее ==== <!--T:15-->
Ограничения:
Ограничения:
* Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите).
* Нельзя взаимодействовать с прямоугольником. Если это необходимо — преобразуйте его в кривые (оконтурите).
* Редактор SVG-панели игнорирует группировку. Поэтому, если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру.
* Редактор SVG-панели игнорирует группировку. Поэтому если нужно настроить взаимодействие с составным элементом, то преобразуйте его в одну фигуру, состоящую из контуров.
* Внутри svg-файла тег ''content'' не должен содержать другие теги. Если вы загрузили файл на контроллер, сделали привязку, скачали этот файл на компьютер и он не открылся в редакторе, окройте svg-файл текстовым редактором и удалите содержимое тега ''content''. После этого вы сможете редактировать файл в svg-редакторе.


Изображение может быть любого размера и с любым количеством элементов.
<!--T:16-->
Изображение может быть любой ширины и высоты, а также с любым количеством элементов.


== Создание SVG-панели ==
== Создание SVG-панели == <!--T:17-->
{{YouTube
|link=https://youtu.be/xWksClOYGbA
|text=Пример создания панели
}}
 
<!--T:18-->
Создайте новую SVG-панель:
Создайте новую SVG-панель:
* Перейдите в раздел '''Dashboards''' → '''List'''.
# Перейдите в раздел '''Панели''' → '''Список'''.
* В разделе '''SVG Dashboards''' нажмите кнопку '''Add''', откроется страница '''New SVG Dashboard'''.
# В разделе '''SVG панели''' нажмите кнопку '''Добавить''', откроется редактор привязок.
* Выберите файл с svg-изображением и нажмите кнопку '''Upload'''.
# Нажмите кнопку '''Загрузить SVG''' и выберите файл с SVG-изображением..
 
<!--T:19-->
После загрузки изображение отобразится на открытой странице:
# Укажите связи и поведение svg-элементов с помощью [[#Редактор связей| редактора связей]].
# Сохраните изменения и посмотрите результат, для этого нажмите на кнопку '''Демонстрация'''.
 
<!--T:20-->
Не забудьте указать в полях '''Идентификатор''' и '''Название''' уникальный ID новой панели для машины и имя для людей.


После загрузки изображение отобразится на открытой странице.
<!--T:21-->
Опция '''Растягивать во весь экран''' впишет панель в свободное пространство.


Не забудьте указать в полях '''ID''' и '''Name''' уникальный ID новой панели и имя.
Статья по теме: [https://habr.com/ru/companies/wirenboard/articles/765232/| Делаем HMI-панель из планшета для системы автоматизации на контроллере Wiren Board].


Опция '''Full width''' растянет изображение по всю ширину панели.
== Синтаксис == <!--T:22-->
В полях '''Value''' [[#Редактор связей | Редактора связей]] можно составлять простые выражение, которые содержат условия и простые арифметические операции.  


== Редактор связей ==
=== Значение MQTT-топика === <!--T:23-->
Чтобы связать svg-элемент изображения со значениями или событиями, выберите его мышкой. После этого рядом с изображением отобразятся поля настройки поведения элемента.
Значение из MQTT-топика, который указан в поле '''Канал'''  помещается в переменную '''val'''.


=== Read ===
=== Условные выражения === <!--T:24-->
Доступные операции:
* <code>></code> — больше
* <code>>=</code> — больше или равно
* <code><</code> — меньше
* <code><=</code> — меньше или равно
* <code>==</code> — равно
* <code>!=</code> — не равно
 
<!--T:25-->
Синтаксис:
<syntaxhighlight lang="javascript">
(УСЛОВИЕ) ? 'ЗНАЧЕНИЕ1' : 'ЗНАЧЕНИЕ2'
</syntaxhighlight>
 
<!--T:26-->
Например, если значение MQTT-топика будет равно <code>1</code>, то вывести значение <code>ВКЛ</code>, иначе — <code>ОТКЛ</code>:
<syntaxhighlight lang="javascript">
(val  == 1) ? 'ВКЛ' : 'ОТКЛ'
</syntaxhighlight>
 
=== Арифметические операции === <!--T:27-->
Над полученным из MQTT-топика можно совершать простые арифметические операции:
* <code>+</code> — сложение
* <code>-</code> — вычитание
* <code>*</code> — умножение
* <code>/</code> — деление
 
<!--T:28-->
Например, выведем значение <code>АВАРИЯ</code>, если значение в MQTT-топике, умноженное на 0.1 больше 20 и <code>НОРМА</code> в остальных случаях:
<syntaxhighlight lang="javascript">
(val*0.1>20) ? 'АВАРИЯ' : 'НОРМА'
</syntaxhighlight>
 
=== Округление значений === <!--T:29-->
Часто с датчиков поступают значения с несколькими знаками после запятой, если вам не нужна такая точность в svg-панели, то их можно округлить:
<syntaxhighlight lang="javascript">
val.toFixed(n) //округлить значение переменной val до n знаков после запятой
val.toFixed(2) //округлить значение переменной val до двух знаков после запятой 220.238 → 220.24
</syntaxhighlight>
 
== Редактор связей== <!--T:30-->
[[Image: SVG-Dashboard Editor.png |600px|thumb|right| Редактор SVG-панели]]
Изображение готовится во внешнем векторном редакторе, а вот назначение связей элементам делается в веб-интерфейсе контроллера.
 
<!--T:31-->
Чтобы связать svg-элемент изображения со значениями или событиями, выберите его мышкой, после этого рядом с изображением появятся поля настройки поведения элемента.
{{SupportedSinceRelease
| release = wb-2307
|content=
Кроме выделения одиночного элемента, можно выделять группу. Для этого зажмите на клавиатуре клавишу Alt и кликните по одному из элементов группы. Будет выделена группа, куда входит элемент. Повторный клик при зажатой клавише Alt выберет группу уровнем выше и так далее до самого верха иерархии.
 
<!--T:32-->
Группы удобно использовать для создания кнопок: объединили в редакторе прямоугольник и иконку и получилась кнопка.
}}
 
<!--T:33-->
После настройки всех связи нажмите кнопку '''Сохранить'''.
 
=== Чтение === <!--T:34-->
Отображение значений из источника в текстовом поле.
Отображение значений из источника в текстовом поле.


Полученное из выбранного в поле '''Channel''' источника помещается в переменную '''val''', которую нужно указать в поле '''Value'''.
<!--T:35-->
Значение из выбранного в поле '''Канал''' источника помещается в переменную '''val''', которую нужно указать в поле '''Значение'''.


<!--T:36-->
Чтобы вывести значение, просто укажите переменную:
Чтобы вывести значение, просто укажите переменную:
<pre>
<syntaxhighlight lang="javascript">
val
val
</pre>
</syntaxhighlight>


<!--T:37-->
К значению можно добавить произвольный текст, например, единицу измерения:
К значению можно добавить произвольный текст, например, единицу измерения:
<pre>
<syntaxhighlight lang="javascript">
val + ' °C'
val + ' °C'
</pre>
</syntaxhighlight>


<!--T:38-->
Также можно подменить полученное значение, например, заменить его на понятный человеку статус:
Также можно подменить полученное значение, например, заменить его на понятный человеку статус:
<pre>
<syntaxhighlight lang="javascript">
(val  == 1) ? 'ВКЛ' : 'ОТКЛ'
(val  == 1) ? 'ВКЛ' : 'ОТКЛ'
</pre>
</syntaxhighlight>
 
=== Запись в канал === <!--T:39-->
С помощью этой настройки вы можете записать значение в топик при клике пользователя по элементу.


=== Write ===
<!--T:40-->
Реакция на клик пользователя по элементу изображения. Доступно два состояния ON и OFF.
Доступно два состояния ON и OFF. При клике пользователя на элементе, значение в MQTT-топике будет меняться на противоположное.


Выберите в поле '''Channel''' MQTT топик, куда нужно записывать значения, а в полях '''Value on''' и '''Value off''' укажите какие значения нужно записывать в зависимости от состояния.
<!--T:41-->
Выберите в поле '''Канал''' MQTT топик для записи значений, а в полях '''Значение включенного состояния''' и '''Значение выключенного состояния''' укажите какие значения соответствуют состояниям.


<!--T:42-->
Например, для переключения реле нужно указать:
Например, для переключения реле нужно указать:
<pre>
<syntaxhighlight lang="javascript">
Value on = 1
Значение включенного состояния = 1
Value on = 0
Значение выключенного состояния = 0
</pre>
</syntaxhighlight>
=== Visible ===
 
Здесь можно указать при каком условии показывать элемент изображения.
=== Переход и смахивания === <!--T:43-->
{{SupportedSinceRelease
| release = wb-2307
|content=
[[Image: svg-tap.png |300px|thumb|right| Создание перехода ]]
 
<!--T:44-->
С помощью переходов можно создавать многостраничные интерфейсы:
# Нарисуйте для каждой страницы свой рисунок.
# Загрузите эти рисунки в контроллер.
# Выберите для одного из трёх событий панель, куда надо переходить.


Выберите в поле Channel MQTT-топик, на информацию из которого мы будем реагировать, в поле '''Condition''' укажите условие, а в поле '''Value''' — значение.
<!--T:45-->
Доступны события: одиночное и длинное нажатие, а также смахивание влево и вправо.  


=== Style ===
<!--T:46-->
Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи на действия, оповещения пользователя о событии т.п.
По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не можем устранить.
}}


=== Видимость === <!--T:47-->
Здесь можно указать при каком условии показывать элемент изображения. По умолчанию элемент будет скрыт и отобразится только пока выполняется условие.
<!--T:48-->
Выберите в поле '''Канал''' MQTT-топик, на информацию из которого будет реагировать элемент, в поле '''Условие''' выберите условие, а в поле '''Значение''' — значение.
=== Стиль оформления === <!--T:49-->
Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи для действий, оповещения пользователя о событии т.д.
<!--T:50-->
Доступные для стилизации свойства элемента:
Доступные для стилизации свойства элемента:
* fill — цвет заливки;
* fill — цвет заливки;
Строка 84: Строка 232:
* stroke — цвет обводки;
* stroke — цвет обводки;
* stroke-width — толщина обводки;
* stroke-width — толщина обводки;
* stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах.
* stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах;
* stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах.
* stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах;
* pointer-events:none — отключить клик.


Цвета можно задавать словами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>.
<!--T:51-->
Цвета можно задавать именами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>.


Изменим цвет элемента в зависимости от состояния реле:
<!--T:52-->
<pre>
Изменим цвет элемента в зависимости от состояния реле, если в топике значение <code>1</code>, то закрашиваем объект желтым, иначе — серым:
<syntaxhighlight lang="javascript">
(val == 1) ? ';fill: yellow' : ';fill: gray'
(val == 1) ? ';fill: yellow' : ';fill: gray'
</pre>
</syntaxhighlight>
 
<!--T:53-->
Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим по умолчанию:
<syntaxhighlight lang="javascript">
(val > 20) ? 'stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''
</syntaxhighlight>
 
Стиль для группы элементов задать не получится, но иногда это нужно, например при задании стиля для значка. В этом случае надо объединить элементы значка в одну фигуру:
# Разгруппировать все элементы: контекстное меню '''Разгруппировать'''.
# Далее '''Контур''' → '''Объединить'''.
Теперь можно задавать стиль.
 
== Редактирование == <!--T:54-->
 
=== Панель === <!--T:55-->
Чтобы внести изменения:
# Откройте SVG-панель.
# Нажмите кнопку '''Редактировать'''.
# Внесите изменения и сохраните их нажатием на кнопку '''Демонстрация'''.
 
=== SVG-изображение === <!--T:56-->
==== Релиз wb-2307 и новее ====
{{SupportedSinceRelease
| release = wb-2307
|content=
 
<!--T:57-->
В SVG-панелях используются встроенные в файл идентификаторы (тег id), поэтому для редактирования панели просто внесите изменения в рисунок и загрузите новую версию в контроллер.
 
<!--T:58-->
Важно! Если вы сделали привязку к группе элементов, то не разгруппировывайте эту группу! Если вам надо её изменить, просто войдите в группу в Inkscape и добавьте или удалите элементы.
 
<!--T:59-->
}}
 
==== Релиз wb-2304 и старее ==== <!--T:60-->
Редактор SVG-панели в момент привязки действий к элементу прописывает data-svg-param-id, поэтому для редактирования изображения нужно его загрузить с контроллера на компьютер:
 
<!--T:61-->
# Откройте SVG-панель для редактирования.
# В верхней части окна нажмите кнопку '''Download''', на компьютер загрузится svg-файл.
# Отредактируйте файл в Inkscape. В Adobe Illustrator редактировать такие файлы не рекомендуем — [https://support.wirenboard.com/t/redaktirovanie-svg-dacsboard теряются привязки], про другие редакторы информации нет.
 
<!--T:62-->
При редактировании учтите, что если на svg-элемент была назначена связь, то он содержит скрытый data-svg-param-id и при его дублировании создается новый элемент с тем же data-svg-param-id.
 
<!--T:63-->
Отредактируйте полученный svg-файл и вновь загрузите его на контроллер:
# В окне редактирования нажмите кнопку '''Выберите файл'''.
# После того, как кнопка '''Change''' станет активной, нажмите на нее.
 
== Перенос на другой контроллер == <!--T:64-->
Иногда нужно сделать резервную копию svg-панели, например, для переноса на другой контроллер. Для этого нужно сохранить преобразованный редактором svg-файл и описание его связей и загрузить их на другой контроллер.
 
<!--T:65-->
Учтите, что на имена MQTT-топиков на обоих контроллерах должны совпадать. Если это не так — svg-элементы нужно будет привязать к новым MQTT-топикам.
 
=== Сохранение === <!--T:66-->
Сохраните svg-файл и описание связей:
# Скачайте файл с контроллера на компьютер. Для этого нажмите на кнопку с изображением стрелки вниз.
# В редакторе svg-панели нажмите кнопку '''В виде JSON''', скопируйте и сохраните строки в файл.
 
=== Загрузка === <!--T:67-->
# Создайте новую SVG-панель по инструкции в разделе [[#Создание SVG-панели| Создание SVG-панели]].
# В редакторе svg-панели нажмите кнопку '''В виде JSON''', скопируйте из сохраненного файла описание связей и вставьте текст в поле
# Нажмите кнопку '''Сохранить''' внизу страницы.
 
==Анимация элементов SVG-панели== <!--T:68-->
[[Файл:animation-svg.gif|598x|thumb|right| Пример анимации элемента SVG-панели]]
Элементы SVG-панели можно анимировать с помощью CSS.
 
<!--T:69-->
Для этого нужно:
#Нарисовать SVG-панель в векторном редакторе, например, Inkscape.
#Открыть файл SVG в текстовом редакторе и добавить блок стилей, заключенный в теги <code><style></style></code>.
#В блоке стилей добавить правило '''@keyframes'''.
#Сохранить файл и загрузить его в контроллер.
#Перейти в редактор SVG-панели в веб-интерфейсе контроллера.
#Активировать параметр '''Style''' и задать в поле '''Value''' свойство '''animation'''. Также нужно задать условие при котором анимация будет срабатывать.
 
<!--T:70-->
Визуализация в CSS осуществляется с помощью свойства '''animation''' и правила '''@keyframes'''.
 
<!--T:71-->
'''@keyframes''', или ключевые кадры, содержат информацию о том как должен выглядеть элемент в каждый из моментов времени.
 
<!--T:72-->
Правило содержащее два ключевых кадра будет выглядеть так:
<syntaxhighlight lang="css">
@keyframes <имя кейфрейма> {
from: { описание начального состояния элемента }
to: { описание конечного состояния элемента }
}
</syntaxhighlight>
Здесь '''from''' и '''to''' ключевые слова обозначающие начальную и конечную точки анимации. Вместо них можно использовать 0% и 100%, а также добавить промежуточные значения.
 
<!--T:73-->
Имя кейфрейма — идентификатор, по которому правило будет вызываться из описания стилей.
 
<!--T:74-->
Чтобы анимация заработала нужно задать стилю элемента свойство '''animation'''.
 
<!--T:75-->
Свойство '''animation''' задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке '''@keyframes''' задаётся сама анимация по шагам (изменения вида и положения).
 
Покажем на примере создание анимации для изменения цвета текста с красного на зеленый и обратно. Так как в SVG текст выполняется заливкой, то потребуется изменять свойство '''fill'''.
[[Image: animation-style.png |350px|thumb|right| Свойство '''animation''' задается в поле '''Value''' параметра '''Style''' ]]
#Создадим новый SVG-документ в редакторе Inlskape и добавим в него элемент Текст.
#Сохраним файл и откроем его в текстовом редакторе.
#Добавим блок style следующего вида:
#:<syntaxhighlight lang="html">
  <style>
@keyframes changecolor {
  0% {fill:red}
  50% {fill:green}
  100% {fill:red}
  }
  </style>
</syntaxhighlight>
#Сохраним SVG-файл и загрузим его в контроллер.
#В редакторе дашбордов выберем созданным тестовый элемент и зададим ему свойство animation в следующем виде:
#:<syntaxhighlight lang="javascript">
(val > 20) ? 'animation: changecolor 3s infinite linear;' : ' '
</syntaxhighlight>
#:Так как изменение стиля элемента может происходить только по условию, в котором участвует значение из MQTT топика, то мы выбрали топик '''CPU Temperature''' и задали условие '''>20'''. Это значит, что анимация будет работать, только когда значение топика '''CPU Temperature''' больше 20.
#Сохраним дашборд и перейдем в просмотр.
 
=== Вращение элементов ===
Чтобы добавить вращение элементам SVG-панели, добавьте в поле '''Style''' следующее выражение:
 
<syntaxhighlight lang="javascript">
'transform-box: fill-box; transform-origin: 50% 50%; animation: rotate 1s infinite linear;'
</syntaxhighlight>
 
== Добавление внешних ссылок == <!--T:76-->
[[Image: svg-hyperlink.png |300px|thumb|right| Создание ссылки в Inkscape ]]
 
<!--T:77-->
Переход по внешним ссылкам задаётся на этапе создания картинки в редакторе Inkscape.


Сделаем так, чтобы при значении больше 20 обводка элемента стала красного цвета, пунктиром и толщиной 2px. При значениях меньше или равно 20 стиль элемента оставим менять не будем:
<!--T:78-->
<pre>
Создавать гиперссылки так:
(val  > 20) ? ';stroke: red; stroke-width:2px; stroke-dasharray:2,1' : ''
# Выбрать элемент, который будет служить ссылкой, далее в контекстном меню Создать ссылку (hyperlink).
</pre>
# Вставить в открывшееся поле ссылку.
# Сохранить.


== Редактирование ==
<!--T:79-->
Теперь остаётся загрузить рисунок в контроллер и проверить.


== Полезные ссылки и материалы ==
== Полезные ссылки и материалы == <!--T:80-->
* [[Media:Examples SVG-Dashboards.zip|Архив с примерами SVG-панелей]]
* [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]
* [[Wiren Board Web Interface | Описание веб-интерфейса контроллера на вики]]
* [https://inkscape.org/ru/ Свободный SVG-редактор Inkscape]
</translate>
Matveevrj
translator, wb_editors
4256

правок

Источник — https://wirenboard.com/wiki/Служебная:Сравнение_версий/49340...80440