16 281
правка
Node-RED Dashboards: различия между версиями
→Описание флоу
| Строка 85: | Строка 85: | ||
=== Описание флоу === | === Описание флоу === | ||
[[Image: nr-svg-dash-demo-flow.png |300px|thumb|right|Пример флоу SVG-панели ]] | |||
Пример панели состоит из двух вкладок: | |||
# '''Tab 1''' вкладка с виджетами: | |||
#* State — переключатель, который отображает состояние зуммера и управляет им. | |||
#* Volume — ползунок, который показывает и изменяет громкость зуммера. | |||
#* SVG Dash — кнопка, которая открывает вкладку '''Tab 2'''. | |||
# '''Tab 2''' — вкладка с svg-изображением, которое хранится в ноде '''SVG grahpics'''. | |||
Нода '''ui control''' переключает вкладки панели и принимает на вход имя вкладки, которую нужно открыть. | |||
В ноде '''SVG grahpics''' на вкладке '''Event''' описаны события, которые будут генерировать элементы <code>#buzzer-state</code> и <code>#buzzer-control</code>. В обоих случая на выход ноды '''SVG grahpics''' будет отправлено сообщение с информацией о событии и элементе, вызвавшим его. Сообщения с описанием событий обрабатываются нодой '''switch-events'''. | |||
На вкладке '''Binding''' ноды '''SVG grahpics''' описаны свойства, которые можно менять с помощью соответствующих сообщений: у элемента <code>#buzzer-state</code> будет меняться свойство '''fill''', а в элементе <code>#temperature > tspan</code> будет изменяться текст. Сообщения для изменения свойств генерируются нодами '''set-color''' и '''set-temperature''', которые содержат примерно такой код: | |||
:<syntaxhighlight lang="js"> | |||
return { | |||
"payload": { | |||
"buzzer": { | |||
"color": (msg.payload == '1')? 'yellow': 'gray' | |||
} | |||
}, | |||
"topic": "databind" | |||
}; | |||
</syntaxhighlight> | |||
Нода '''invert-state''' просто инвертирует состояние зуммера. | |||
<gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG grahpics''"> | |||
Image: nr-svg-dash-demo-events.png | События | |||
Image: nr-svg-dash-demo-bindings.png | Привязки | |||
Image: nr-svg-dash-demo-svg.png | Код SVG | |||
</gallery> | |||
<gallery mode="packed" heights="250px" caption="SVG-панель"> | |||
Image: nr-svg-dash-demo-tab1.png | Вкладка с виджетами | |||
Image: nr-svg-dash-demo-tab1+menu.png | Меню вкладок | |||
Image: nr-svg-dash-demo-tab2.png | Вкладка с SVG-изображением | |||
</gallery> | |||