|
|
| Строка 83: |
Строка 83: |
|
| |
|
| Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. | | Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. |
|
| |
| === Привязка элементов ===
| |
| Теперь сделаем так, чтобы при клике на сером круге зуммер то включался, то выключался:
| |
| # Откройте настройки ноды SVG graphics и перейдите на вкладку Events.
| |
| # Добавьте новое действие:
| |
| #* Selector — идентификатор нужного нам элемента: #buzzer-status.
| |
| #* Action — Click.
| |
| #* msg.payload — сообщение, которое описывает событие: click.
| |
| #* msg.topic — топик, который позволит узнать, кто был инициатором события: buzzer-status.
| |
| # Сохраните настройки нажатием на кнопку Done.
| |
|
| |
| Теперь при клике на сером круге в svg-картинке на выход ноды SVG graphics будет отправлено сообщение с событием, обработаем его.
| |
|
| |
| Нам нужно в момент клика получить последнее состояние зуммера, инвертировать его и отправить в MQTT:
| |
| # В панели слева в группе Wiren Board найдите ноду get и добавьте её в рабочую область.
| |
| # В настройках ноды get выберите топик buzzer/enabled и соедините её вход с выходом ноды SVG graphics.
| |
| # Добавьте ноду function и в настройках пропишите код:
| |
| #: <syntaxhighlight lang="js">
| |
| return {
| |
| "payload": (msg.payload == '1')? '0':'1'
| |
| };
| |
| </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.
| |
