16 281
правка
Node-RED Dashboards: различия между версиями
Нет описания правки
| Строка 95: | Строка 95: | ||
#* Volume — ползунок, который показывает и изменяет громкость зуммера. | #* Volume — ползунок, который показывает и изменяет громкость зуммера. | ||
#* SVG Dash — кнопка, которая открывает вкладку '''Tab 2'''. | #* SVG Dash — кнопка, которая открывает вкладку '''Tab 2'''. | ||
# '''Tab 2''' — вкладка с svg-изображением, которое хранится в ноде '''SVG | # '''Tab 2''' — вкладка с svg-изображением, которое хранится в ноде '''SVG graphics'''. | ||
Нода '''ui control''' переключает вкладки панели и принимает на вход имя вкладки, которую нужно открыть. | Нода '''ui control''' переключает вкладки панели и принимает на вход имя вкладки, которую нужно открыть. | ||
В ноде '''SVG | В ноде '''SVG graphics''' на вкладке '''Event''' описаны события, которые будут генерировать элементы <code>#buzzer-state</code> и <code>#buzzer-control</code>. В обоих случаях на выход ноды '''SVG graphics''' будет отправлено сообщение с информацией о событии и элементе, вызвавшим его. Сообщения с описанием событий обрабатываются нодой '''switch-events'''. | ||
На вкладке '''Binding''' ноды '''SVG | На вкладке '''Binding''' ноды '''SVG graphics''' описаны свойства, которые можно менять с помощью соответствующих сообщений: у элемента <code>#buzzer-state</code> будет меняться свойство '''fill''', а в элементе <code>#temperature > tspan</code> будет изменяться текст. Сообщения для изменения свойств генерируются нодами '''set-color''' и '''set-temperature''', которые содержат примерно такой код: | ||
:<syntaxhighlight lang="js"> | :<syntaxhighlight lang="js"> | ||
return { | return { | ||
| Строка 115: | Строка 115: | ||
Нода '''invert-state''' просто инвертирует состояние зуммера. | Нода '''invert-state''' просто инвертирует состояние зуммера. | ||
<gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG | <gallery mode="packed" heights="200px" caption="Настройки ноды ''SVG graphics''"> | ||
Image: nr-svg-dash-demo-events.png | События | Image: nr-svg-dash-demo-events.png | События | ||
Image: nr-svg-dash-demo-bindings.png | Привязки | Image: nr-svg-dash-demo-bindings.png | Привязки | ||
| Строка 128: | Строка 128: | ||
Скрыть заголовок группы можно в настройках, параметр '''Display group name'''. | Скрыть заголовок группы можно в настройках, параметр '''Display group name'''. | ||
Чтобы скрыть однопиксельную рамку вокруг svg-панели, добавьте на вкладку '''SVG''' ноды '''SVG | Чтобы скрыть однопиксельную рамку вокруг svg-панели, добавьте на вкладку '''SVG''' ноды '''SVG graphics''' перед тегом <code><svg></code> код: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<style> | <style> | ||