|
|
(не показаны 122 промежуточные версии 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-->
| |
| Возможности: | | Возможности: |
| * вывод текстовой или логической информации; | | * вывод текстовой или логической информации; |
Строка 16: |
Строка 9: |
| * воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств. | | * воздействие на исполнительные механизмы: включать и выключать нагрузку, менять режимы работы устройств. |
|
| |
|
| <!--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-панели нужно svg-изображение, которое станет основой. Если готового изображения нет, то его можно нарисовать в любом векторном редакторе, например, в свободном [https://inkscape.org/ru/ Inkscape]. |
|
| |
|
| <!--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-панели == <!--T:17-->
| |
| {{YouTube
| |
| |link=https://youtu.be/xWksClOYGbA
| |
| |text=Пример создания панели
| |
| }}
| |
| | |
| <!--T:18-->
| |
| Создайте новую SVG-панель:
| |
| # Перейдите в раздел '''Панели''' → '''Список'''.
| |
| # В разделе '''SVG панели''' нажмите кнопку '''Добавить''', откроется редактор привязок.
| |
| # Нажмите кнопку '''Загрузить SVG''' и выберите файл с SVG-изображением..
| |
| | |
| <!--T:19-->
| |
| После загрузки изображение отобразится на открытой странице:
| |
| # Укажите связи и поведение svg-элементов с помощью [[#Редактор связей| редактора связей]].
| |
| # Сохраните изменения и посмотрите результат, для этого нажмите на кнопку '''Демонстрация'''.
| |
| | |
| <!--T:20-->
| |
| Не забудьте указать в полях '''Идентификатор''' и '''Название''' уникальный ID новой панели для машины и имя для людей.
| |
| | |
| <!--T:21-->
| |
| Опция '''Растягивать во весь экран''' впишет панель в свободное пространство.
| |
| | |
| Статья по теме: [https://habr.com/ru/companies/wirenboard/articles/765232/| Делаем HMI-панель из планшета для системы автоматизации на контроллере Wiren Board].
| |
| | |
| == Синтаксис == <!--T:22-->
| |
| В полях '''Value''' [[#Редактор связей | Редактора связей]] можно составлять простые выражение, которые содержат условия и простые арифметические операции.
| |
| | |
| === Значение MQTT-топика === <!--T:23-->
| |
| Значение из MQTT-топика, который указан в поле '''Канал''' помещается в переменную '''val'''.
| |
| | |
| === Условные выражения === <!--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-->
| |
| Отображение значений из источника в текстовом поле.
| |
| | |
| <!--T:35-->
| |
| Значение из выбранного в поле '''Канал''' источника помещается в переменную '''val''', которую нужно указать в поле '''Значение'''.
| |
| | |
| <!--T:36-->
| |
| Чтобы вывести значение, просто укажите переменную:
| |
| <syntaxhighlight lang="javascript">
| |
| val
| |
| </syntaxhighlight>
| |
| | |
| <!--T:37-->
| |
| К значению можно добавить произвольный текст, например, единицу измерения:
| |
| <syntaxhighlight lang="javascript">
| |
| val + ' °C'
| |
| </syntaxhighlight>
| |
| | |
| <!--T:38-->
| |
| Также можно подменить полученное значение, например, заменить его на понятный человеку статус:
| |
| <syntaxhighlight lang="javascript">
| |
| (val == 1) ? 'ВКЛ' : 'ОТКЛ'
| |
| </syntaxhighlight>
| |
| | |
| === Запись в канал === <!--T:39-->
| |
| С помощью этой настройки вы можете записать значение в топик при клике пользователя по элементу.
| |
| | |
| <!--T:40-->
| |
| Доступно два состояния ON и OFF. При клике пользователя на элементе, значение в MQTT-топике будет меняться на противоположное.
| |
| | |
| <!--T:41-->
| |
| Выберите в поле '''Канал''' MQTT топик для записи значений, а в полях '''Значение включенного состояния''' и '''Значение выключенного состояния''' укажите какие значения соответствуют состояниям.
| |
| | |
| <!--T:42-->
| |
| Например, для переключения реле нужно указать:
| |
| <syntaxhighlight lang="javascript">
| |
| Значение включенного состояния = 1
| |
| Значение выключенного состояния = 0
| |
| </syntaxhighlight>
| |
| | |
| === Переход и смахивания === <!--T:43-->
| |
| {{SupportedSinceRelease
| |
| | release = wb-2307
| |
| |content=
| |
| [[Image: svg-tap.png |300px|thumb|right| Создание перехода ]]
| |
| | |
| <!--T:44-->
| |
| С помощью переходов можно создавать многостраничные интерфейсы:
| |
| # Нарисуйте для каждой страницы свой рисунок.
| |
| # Загрузите эти рисунки в контроллер.
| |
| # Выберите для одного из трёх событий панель, куда надо переходить.
| |
| | |
| <!--T:45-->
| |
| Доступны события: одиночное и длинное нажатие, а также смахивание влево и вправо.
| |
| | |
| <!--T:46-->
| |
| По одиночному и длинному нажатию доступен переход на SVG и текстовые панели, а по смахиванию — только SVG. Это архитектурное ограничение, которое мы пока не можем устранить.
| |
| }}
| |
| | |
| === Видимость === <!--T:47-->
| |
| Здесь можно указать при каком условии показывать элемент изображения. По умолчанию элемент будет скрыт и отобразится только пока выполняется условие.
| |
| | |
| <!--T:48-->
| |
| Выберите в поле '''Канал''' MQTT-топик, на информацию из которого будет реагировать элемент, в поле '''Условие''' выберите условие, а в поле '''Значение''' — значение.
| |
| | |
| === Стиль оформления === <!--T:49-->
| |
| Позволяет изменять стиль элементов изображения. Можно использовать для создания обратной связи для действий, оповещения пользователя о событии т.д.
| |
| | |
| <!--T:50-->
| |
| Доступные для стилизации свойства элемента:
| |
| * fill — цвет заливки;
| |
| * fill-opacity — непрозрачность заливки, значения от 0.0 до 1.0 или в процентах;
| |
| * stroke — цвет обводки;
| |
| * stroke-width — толщина обводки;
| |
| * stroke-dasharray — вид пунктирной обводки, задается в единицах длины или процентах;
| |
| * stroke-opacity — непрозрачность обводки, значения от 0.0 до 1.0 или в процентах;
| |
| * pointer-events:none — отключить клик.
| |
| | |
| <!--T:51-->
| |
| Цвета можно задавать именами <code>black, red, yellow и т.п.</code> или шестнадцатеричными значениями <code>#ffe680ff, #4f4f4dff и т.п.</code>.
| |
| | |
| <!--T:52-->
| |
| Изменим цвет элемента в зависимости от состояния реле, если в топике значение <code>1</code>, то закрашиваем объект желтым, иначе — серым:
| |
| <syntaxhighlight lang="javascript">
| |
| (val == 1) ? ';fill: yellow' : ';fill: gray'
| |
| </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.
| |
|
| |
|
| <!--T:78-->
| | === Привязка элементов === |
| Создавать гиперссылки так:
| |
| # Выбрать элемент, который будет служить ссылкой, далее в контекстном меню Создать ссылку (hyperlink).
| |
| # Вставить в открывшееся поле ссылку.
| |
| # Сохранить.
| |
|
| |
|
| <!--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>
| |