16 281
правка
Node-RED Dashboards: различия между версиями
→Привязка элементов
| Строка 103: | Строка 103: | ||
}; | }; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
# Соедините выход ноды get с входом ноды function, а выход последней с входом ноды out, в которой выбран топик buzzer/enabled. | |||
Теперь перейдите на страницу с панелью и кликните по серому кругу, зуммер должен включиться, а при повторном клике — выключиться. Если это так, то всё настроено верно. | |||
Сделаем так, чтобы при включённом зуммере круг окрашивался в жёлтый, а при выключенном — в серый. | |||
Для этого нам надо будет: | |||
* Настроить привязку сообщения к свойству элемента. | |||
* Получить статус зуммера. | |||
* Сформировать сообщение на изменения цвета. | |||
Настроим привязку: | |||
# Откройте настройки ноды SVG graphics и перейдите на вкладку Binding: | |||
#* Binding Source — сообщение, которое будет содержать новый цвет: payload.buzzer.color | |||
#* Selector — элемент, который будет окрашиваться: #buzzer-status | |||
#* Binding Destination — свойство, которое будете менять: Style | |||
#* в последнем поле укажите какое именно свойства стиля будем менять: fill. | |||
# Сохраните нажатием на клавишу Done. | |||
Статус зуммера мы возьмём из ноды in, с топиком buzzer/enabled, которая связана с нодой switch. | |||
Сообщение мы сформируем с помощью ноды function, добавьте её в рабочую область и впишите код: | |||
<syntaxhighlight lang="js"> | |||
return { | |||
"payload": { | |||
"buzzer": { | |||
"color": (msg.payload == '1')? 'yellow': 'gray' | |||
} | |||
}, | |||
"topic": "databind" | |||
}; | |||
</syntaxhighlight> | |||
Выход функции соедините с входом ноды SVG graphics. | |||