16 281
правка
Node-RED Dashboards: различия между версиями
Нет описания правки
| (не показано 9 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
{{DISPLAYTITLE: Создание панелей (Dashboards) в Node-RED }} | {{DISPLAYTITLE: Создание панелей (Dashboards) в Node-RED }} | ||
[[Image: nr-svg-dash-demo-cast.gif |300px|thumb|right| Пример SVG-панели Node-RED ]] | [[Image: nr-svg-dash-demo-cast.gif |300px|thumb|right| Пример SVG-панели Node-RED ]] | ||
| Строка 68: | Строка 67: | ||
#* Group 1 → Buzzer | #* Group 1 → Buzzer | ||
#* slider → Volume | #* slider → Volume | ||
#* switch → | #* switch → State | ||
# Добавьте новую вкладку '''Tab 2''' и группу '''SVG'''. | # Добавьте новую вкладку '''Tab 2''' и группу '''SVG'''. | ||
# В настройках группы укажите ширину 9. | # В настройках группы укажите ширину 9. | ||
| Строка 84: | Строка 83: | ||
# Добавьте серый круг, выберите его и откройте панель с параметрами объекта, меню '''Object''' → '''Object Properties'''. Справа откроется дополнительная панель. | # Добавьте серый круг, выберите его и откройте панель с параметрами объекта, меню '''Object''' → '''Object Properties'''. Справа откроется дополнительная панель. | ||
# В панели '''Object Properties''' в поле '''ID''' напишите имя элемента: buzzer-status. Это имя мы будем использовать при фильтрации событий и обращении к его свойствам. | # В панели '''Object Properties''' в поле '''ID''' напишите имя элемента: buzzer-status. Это имя мы будем использовать при фильтрации событий и обращении к его свойствам. | ||
# Аналогичным образом добавьте другие элементы, например, текст и квадрат. | |||
# Сохраните файл в формате SVG. | # Сохраните файл в формате SVG. | ||
| Строка 92: | Строка 92: | ||
=== Импорт изображения === | === Импорт изображения === | ||
Функции импорта в ноде ''SVG graphics'' нет, поэтому мы просто скопируем содержимое нашего svg-файла и вставим его в специальное поле ноды: | |||
# Откройте созданный выше svg-файл в текстовом редакторе и скопируйте содержимое вместе с тегами <code><svg></code>. | |||
# Перейдите в настройки ноды '''SVG graphics''' и откройте вкладку '''SVG'''. | # Перейдите в настройки ноды '''SVG graphics''' и откройте вкладку '''SVG'''. | ||
# Удалите весь текст и вставьте скопированное раньше содержимое svg-файла. | # Удалите весь текст и вставьте скопированное раньше содержимое svg-файла. | ||
| Строка 98: | Строка 99: | ||
Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. | Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. | ||
<gallery mode="packed" heights="200px"> | |||
<gallery mode="packed" heights=" | |||
Image: node-red-svg-dash-text-editor.png | SVG-изображение в текстовом редакторе | Image: node-red-svg-dash-text-editor.png | SVG-изображение в текстовом редакторе | ||
Image: node-red-svg-dash-import.png | Импорт в ноду ''SVG graphics'' | Image: node-red-svg-dash-import.png | Импорт в ноду ''SVG graphics'' | ||
Image: node-red-svg-dash-tab2.png | Меню с вкладками | |||
</gallery> | </gallery> | ||
| Строка 108: | Строка 109: | ||
[[Image: nr-svg-dash-demo-svg-dash.png |300px|thumb|right|Пример SVG-панели ]] | [[Image: nr-svg-dash-demo-svg-dash.png |300px|thumb|right|Пример SVG-панели ]] | ||
Пример флоу можно скачать на GitHub [https://github.com/wirenboard/wb-community/tree/main/node-red-demo-svg-dashboard node-red-demo-svg-dashboard]. | Пример флоу и svg-файл файл можно скачать на GitHub [https://github.com/wirenboard/wb-community/tree/main/third-party-soft-demo/node-red-demo-svg-dashboard node-red-demo-svg-dashboard]. В примере используются только системные устройства, поэтому он должен работать на всех контроллерах Wiren Board без доработок. | ||
Панель в примере состоит из двух вкладок: | Панель в примере состоит из двух вкладок: | ||
| Строка 115: | Строка 116: | ||
#* Volume — ползунок, который показывает и изменяет громкость зуммера. | #* Volume — ползунок, который показывает и изменяет громкость зуммера. | ||
#* SVG Dash — кнопка, которая открывает вкладку '''Tab 2'''. | #* SVG Dash — кнопка, которая открывает вкладку '''Tab 2'''. | ||
# '''Tab 2''' — вкладка с svg-изображением, которое хранится в ноде '''SVG graphics'''. | # '''Tab 2''' — вкладка с svg-изображением, которое хранится в ноде '''SVG graphics'''. Элементы изображения: | ||
#* Серый круг ''#buzzer-state'' — кнопка, которая отображает и переключает состояние зуммера. | |||
#* Текстовое поле ''#temperature'' — отображает температуру процессора. Чтобы изменять текст, надо обратиться к селектору ''#temperature > tspan''. | |||
#* Голубой квардрат ''#buzzer-control'' — кнопка, которая открывает вкладку '''Tab 1'''. | |||
Нода '''ui control''' переключает вкладки панели и принимает на вход имя вкладки, которую нужно открыть. | Нода '''ui control''' переключает вкладки панели и принимает на вход имя вкладки, которую нужно открыть. | ||
В ноде '''SVG graphics''' на вкладке '''Event''' описаны события, которые будут генерировать элементы | В ноде '''SVG graphics''' на вкладке '''Event''' описаны события, которые будут генерировать элементы ''#buzzer-state'' и ''#buzzer-control''. В обоих случаях на выход ноды '''SVG graphics''' будет отправлено сообщение с информацией о событии и элементе, вызвавшим его. Сообщения с описанием событий обрабатываются нодой '''switch-events'''. | ||
На вкладке '''Binding''' ноды '''SVG graphics''' описаны свойства, которые можно менять с помощью соответствующих сообщений: у элемента | На вкладке '''Binding''' ноды '''SVG graphics''' описаны свойства, которые можно менять с помощью соответствующих сообщений: у элемента ''#buzzer-state'' будет меняться свойство '''fill''', а в элементе ''#temperature > tspan'' будет изменяться текст. Сообщения для изменения свойств генерируются нодами '''set-color''' и '''set-temperature''', которые содержат примерно такой код: | ||
:<syntaxhighlight lang="js"> | :<syntaxhighlight lang="js"> | ||
return { | return { | ||
| Строка 134: | Строка 138: | ||
Нода '''invert-state''' инвертирует состояние зуммера. | Нода '''invert-state''' инвертирует состояние зуммера. | ||
Нода '''change-tab''' генерирует событие при переключении вкладок панели и обновляет значение температуры процессора в текстовом поле svg-панели. | |||
<gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | <gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | ||
| Строка 176: | Строка 182: | ||
== Полезные ссылки == | == Полезные ссылки == | ||
* [[Node-RED]] | * [[Node-RED]] | ||
* [https://github.com/wirenboard/wb-community/tree/main/node-red-demo-svg-dashboard Пример флоу с SVG-дашбордом] | * [https://github.com/wirenboard/wb-community/tree/main/third-party-soft-demo/node-red-demo-svg-dashboard Пример флоу с SVG-дашбордом] | ||