16 281
правка
Node-RED Dashboards: различия между версиями
Нет описания правки
| (не показано 5 промежуточных версий этого же участника) | |||
| Строка 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. | ||
| Строка 109: | Строка 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]. В примере используются только системные устройства, поэтому он должен работать на всех контроллерах Wiren Board без доработок. | Пример флоу и 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 без доработок. | ||
Панель в примере состоит из двух вкладок: | Панель в примере состоит из двух вкладок: | ||
| Строка 138: | Строка 138: | ||
Нода '''invert-state''' инвертирует состояние зуммера. | Нода '''invert-state''' инвертирует состояние зуммера. | ||
Нода '''change-tab''' генерирует событие при переключении вкладок панели и обновляет значение температуры процессора в текстовом поле svg-панели. | |||
<gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | <gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | ||
| Строка 180: | Строка 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-дашбордом] | ||