16 281
правка
Node-RED Dashboards: различия между версиями
Нет описания правки
| (не показано 16 промежуточных версий этого же участника) | |||
| Строка 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 ]] | ||
| Строка 29: | Строка 28: | ||
== Создание панели с виджетами == | == Создание панели с виджетами == | ||
[[Image: bode-red-dashboard-widjets.png |300px|thumb|right| Панель | [[Image: bode-red-dashboard-widjets.png |300px|thumb|right| Панель с виджетами]] | ||
Панель с типовыми виджетами — это быстрый способ получить несложный интерфейс, который закроет большинство потребностей. Притом, интерфейс получается адаптивный, то есть при нехватке места по горизонтали, группы располагаются друг под другом. | Панель с типовыми виджетами — это быстрый способ получить несложный интерфейс, который закроет большинство потребностей. Притом, интерфейс получается адаптивный, то есть при нехватке места по горизонтали, группы располагаются друг под другом. | ||
Создадим панель, на которую поместим элементы управления зуммером контроллера: | Создадим панель, на которую поместим элементы управления зуммером контроллера: | ||
# Перейдите в веб-интерфейс Node-RED. | # Перейдите в веб-интерфейс Node-RED. | ||
# В правом верхнем углу нажмите на треугольничек и выберите '''Dashboard'''. | # В правом верхнем углу нажмите на треугольничек и выберите инструмент '''Dashboard'''. | ||
# | # В '''Layout''' добавьте новую вкладку, а в ней — группу. | ||
# В левой панели в группе '''dashboard''' найдите ноды '''switch''' и '''slider''' и перетащите их в рабочую область. | # В левой панели в группе '''dashboard''' найдите ноды '''switch''' и '''slider''' и перетащите их в рабочую область. | ||
# По очереди дважды кликните на добавленных нодах, проверьте, что выбрана верная группа ''Group 1'': | # По очереди дважды кликните на добавленных нодах, проверьте, что выбрана верная группа ''Group 1'': | ||
| Строка 43: | Строка 42: | ||
#* В полях '''On Payload''' — a/z: '''1''', '''Off Payload''' — a/z: '''0'''. | #* В полях '''On Payload''' — a/z: '''1''', '''Off Payload''' — a/z: '''0'''. | ||
# В настройках ноды '''slider''': | # В настройках ноды '''slider''': | ||
#* снимите флажок Pass through msg if payload matches valid state; | #* снимите флажок '''Pass through msg if payload matches valid state'''; | ||
#* в поле '''Range''' установите значение '''max = 100'''; | #* в поле '''Range''' установите значение '''max = 100'''; | ||
#* в поле '''Output''' выберите '''only release'''. | #* в поле '''Output''' выберите '''only release'''. | ||
| Строка 53: | Строка 52: | ||
Теперь в инструменте '''dashboard''' → '''Layout''' нажмите на кнопку со стрелочкой, откроется новая страница с нашей панелью. | Теперь в инструменте '''dashboard''' → '''Layout''' нажмите на кнопку со стрелочкой, откроется новая страница с нашей панелью. | ||
<gallery mode="packed" heights="150px" caption="Создание панели с виджетами"> | |||
Image: node-red-widjets-dash-1.png | Инструмент dashboard | |||
Image: node-red-widjets-dash-2.png | Нода switch | |||
Image: node-red-widjets-dash-3.png | Нода slider | |||
Image: node-red-widjets-dash-4.png | Запуск демонстрации | |||
</gallery> | |||
== Создание svg-панели == | == Создание svg-панели == | ||
| Строка 61: | Строка 67: | ||
#* Group 1 → Buzzer | #* Group 1 → Buzzer | ||
#* slider → Volume | #* slider → Volume | ||
#* switch → | #* switch → State | ||
# Добавьте новую вкладку '''Tab 2''' и группу '''SVG'''. | # Добавьте новую вкладку '''Tab 2''' и группу '''SVG'''. | ||
# В настройках группы укажите ширину 9. | # В настройках группы укажите ширину 9. | ||
| Строка 70: | Строка 76: | ||
=== Создание изображения === | === Создание изображения === | ||
В ноде ''SVG graphics'' есть демо-версия встроенного svg-редактора, но мы будем использовать популярный ''Inkscape''. | |||
Создадим изображение в Inkscape: | Создадим изображение в Inkscape: | ||
# Откройте редактор и меню '''File''' → '''Document Properties'''. | # Откройте редактор и меню '''File''' → '''Document Properties'''. | ||
| Строка 75: | Строка 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-файла. | ||
| Строка 84: | Строка 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> | |||
=== Описание флоу === | === Описание флоу === | ||
[[Image: nr-svg-dash-demo-flow.png |300px|thumb|right|Пример флоу SVG-панели ]] | [[Image: nr-svg-dash-demo-flow.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 без доработок. | ||
Панель в примере состоит из двух вкладок: | Панель в примере состоит из двух вкладок: | ||
| Строка 95: | Строка 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 { | ||
| Строка 113: | Строка 137: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Нода '''invert-state''' | Нода '''invert-state''' инвертирует состояние зуммера. | ||
Нода '''change-tab''' генерирует событие при переключении вкладок панели и обновляет значение температуры процессора в текстовом поле svg-панели. | |||
<gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | <gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | ||
| Строка 156: | Строка 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-дашбордом] | ||