16 879
правок
(не показано 13 промежуточных версий этого же участника) | |||
Строка 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. | ||
Строка 77: | Строка 76: | ||
=== Создание изображения === | === Создание изображения === | ||
В ноде ''SVG graphics'' есть демо-версия встроенного svg-редактора, но мы будем использовать популярный ''Inkscape''. | |||
Создадим изображение в Inkscape: | Создадим изображение в Inkscape: | ||
# Откройте редактор и меню '''File''' → '''Document Properties'''. | # Откройте редактор и меню '''File''' → '''Document Properties'''. | ||
Строка 82: | Строка 83: | ||
# Добавьте серый круг, выберите его и откройте панель с параметрами объекта, меню '''Object''' → '''Object Properties'''. Справа откроется дополнительная панель. | # Добавьте серый круг, выберите его и откройте панель с параметрами объекта, меню '''Object''' → '''Object Properties'''. Справа откроется дополнительная панель. | ||
# В панели '''Object Properties''' в поле '''ID''' напишите имя элемента: buzzer-status. Это имя мы будем использовать при фильтрации событий и обращении к его свойствам. | # В панели '''Object Properties''' в поле '''ID''' напишите имя элемента: buzzer-status. Это имя мы будем использовать при фильтрации событий и обращении к его свойствам. | ||
# Сохраните файл | # Аналогичным образом добавьте другие элементы, например, текст и квадрат. | ||
# Сохраните файл в формате SVG. | |||
<gallery mode="packed" heights="250px"> | |||
Image: inkscape-page-settings.png | Настройки документа | |||
Image: inkscape-image.png | ID элемента | |||
</gallery> | |||
=== Импорт изображения === | === Импорт изображения === | ||
Функции импорта в ноде ''SVG graphics'' нет, поэтому мы просто скопируем содержимое нашего svg-файла и вставим его в специальное поле ноды: | |||
# Откройте созданный выше svg-файл в текстовом редакторе и скопируйте содержимое вместе с тегами <code><svg></code>. | |||
# Перейдите в настройки ноды '''SVG graphics''' и откройте вкладку '''SVG'''. | # Перейдите в настройки ноды '''SVG graphics''' и откройте вкладку '''SVG'''. | ||
# Удалите весь текст и вставьте скопированное раньше содержимое svg-файла. | # Удалите весь текст и вставьте скопированное раньше содержимое svg-файла. | ||
Строка 91: | Строка 99: | ||
Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. | Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. | ||
<gallery mode="packed" heights="200px"> | |||
Image: node-red-svg-dash-text-editor.png | SVG-изображение в текстовом редакторе | |||
Image: node-red-svg-dash-import.png | Импорт в ноду ''SVG graphics'' | |||
Image: node-red-svg-dash-tab2.png | Меню с вкладками | |||
</gallery> | |||
=== Описание флоу === | === Описание флоу === | ||
Строка 96: | Строка 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 без доработок. | ||
Панель в примере состоит из двух вкладок: | Панель в примере состоит из двух вкладок: | ||
Строка 103: | Строка 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 { | ||
Строка 122: | Строка 138: | ||
Нода '''invert-state''' инвертирует состояние зуммера. | Нода '''invert-state''' инвертирует состояние зуммера. | ||
Нода '''change-tab''' генерирует событие при переключении вкладок панели и обновляет значение температуры процессора в текстовом поле svg-панели. | |||
<gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | <gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | ||
Строка 164: | Строка 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-дашбордом] |