Интеграция Wiren Board с панелью CrowPanel 7.0 от Elecrow
Исходные данные
Имеется:
- Контроллер Wiren Board 7 с различными датчикам, модулями реле и диммерами
- HMI-панель CrowPanel 7.0 от Elecrow (на базе ESP32 S3)
- Home Assistant v7, подключенный к Wiren Board с помощью WB Engine
Хочется научиться создавать интерфейс для управления некоторыми функциями умного дома - просмотр показаний с датчиков температуры, управлять каналами реле (освещение) и диммировать подсветку в нише штор.
Выбор технологий
С учётом того что esp32 имеет большое комьюнити в Интернет, решить задачу можно разными способами, я для себя выделил несколько потенциальных:
- написание кода непосредственно на C++ с использованием библиотеки LVGL
- использовать ESPHome
- использовать OpenHASP
Писать код на плюсах очень не хотелось, но всё равно поглядел на библиотеку LVGL для PlatformIO, после часа изучения я решил бросить это дело, это будет долго и мучительно, а мне нужен относительно быстрое и расширяемое решение.
Следом за этим я стал изучать ESPHome, т.к. уже есть много разных "железок" дома, а также на столе живёт маленький дисплейчик, который показывает мне показания датчиков температуры и CO2.
Промучавшись сутки я так и не получил желаемый результат, дисплей так и не завёлся, несмотря на то что есть вот такая ветка с community-ресурса от Home Assistant, может быть это связано с тем, что у меня версия платы v3.0 и существуют какие-то отличия от v2.1, рассмотренной по указанной ссылке.
Я стал изучать другие возможные решения и наткнулся на OpenHASP, не смотря на то, что пока ещё нет стабильной прошивки, нашёл релиз-кандидат на nightly.openhasp.com, а конкретно вот ссылка (скорее всего через какое-то время протухнет).
После заливки прошивки с помощью Type-C кабель и ресурса web.esphome.io дисплей заработал, появилась стартовая страничка, я решил погружаться в этот продукт.
Установка прошивки
Здесь не хочу останавливаться надолго, в двух словах процесс прошивки выглядит так:
- скачиваем bin-файл
- открываем web.esphome.io
- подключаем дисплей с помощью Type-C кабеля (важно чтобы это был дата-кабель со всеми пинами, а не просто для зарядки)
- сверху будет ссылка INSTALL
- выбираем наш bin-файл и шьём его в дисплей
- в результате на дисплее отобразится интерфейс с возможностью подключиться к Wi-Fi
- после подключения к Wi-Fi отобразится адрес, полученный по DHCP
- можно заходить на веб-интерфейс дисплея и начинать верстать интерфейс
Вёрстка интерфейса
Интерфейс верстается с помощью JSON в разделе File Editor, прилагаю ссылку на документацию
Наша задача открыть файл pages.jsonl, все правки необходимо делать в нём.
Я стремился к такому внешнему виду:
Вот как выглядит вёрстка под такой дизайн
{ "page": 1, "id": 10, "x": 50, "y": 60, "w": 700, "h": "100", "obj": "label", "text": "Балкон, t°"}
{ "page": 1, "id": 1, "x": 60, "y": 120, "w": 140, "h": 100, "max": 40, "border_side": 0, "type": 0, "rotation": 0, "start_angle": 180, "end_angle": 0, "start_angle10": 180, "value_font": 24, "bg_opa": 0, "obj":"arc", "value_ofs_x":-19,"value_ofs_y":-4}
{ "page": 1, "id": 20, "x": 250, "y": 60, "w": 700, "h": 100, "obj": "label", "text": "Яндекс, t°"}
{ "page": 1, "id": 2, "x": 260, "y": 120, "w": 140, "h": 100, "max": 40, "border_side": 0, "type": 0, "rotation": 0, "start_angle": 180, "end_angle": 0, "start_angle10": 180, "value_font": 24, "bg_opa": 0, "obj":"arc", "value_ofs_x":-19,"value_ofs_y":-4}
{ "page": 1, "id": 30, "x": 50, "y": 260, "w": 700, "h": 100, "obj": "label", "text": "Спальня, t°"}
{ "page": 1, "id": 3, "x": 60, "y": 320, "w": 140, "h": 100, "max": 40, "border_side": 0, "type": 0, "rotation": 0, "start_angle": 180, "end_angle": 0, "start_angle10": 180, "value_font": 24, "bg_opa": 0, "obj":"arc", "value_ofs_x":-19,"value_ofs_y":-4}
{ "page": 1, "id": 40, "x": 250, "y": 260, "w": 700, "h": 100, "obj": "label", "text": "Спальня, h%"}
{ "page": 1, "id": 4, "x": 260, "y": 320, "w": 140, "h": 100, "max": 100, "border_side": 0, "type": 0, "rotation": 0, "start_angle": 180, "end_angle": 0, "start_angle10": 180, "value_font": 24, "bg_opa": 0, "obj":"arc", "value_ofs_x":-19,"value_ofs_y":-4}
{ "page": 1, "id": 50, "x": 450, "y": 40, "w": 300, "h": 80, "obj": "btn", "toggle": true, "text":"Споты \uE335", "text_font": 48}
{ "page": 1, "id": 60, "x": 450, "y": 150, "w": 300, "h": 80, "obj": "btn", "toggle": true, "text":"Бра \uE335", "text_font": 48}
{ "page": 1, "id": 70, "x": 450, "y": 260, "w": 300, "h": 80, "obj": "btn", "toggle": true, "text":"Шторы \uE335", "text_font": 48}
{ "page": 1, "id": 80, "x": 450, "y": 360, "w": 300, "h": 40, "obj": "slider", "min": 0, "max": 100}
Реактивность интерфейса
Нам остаётся "оживить" наш интерфейс. Для этого нам понадобится установленный HACS в нашем Home Assistant.
Процесс установки рассмотрен вот здесь.
После установки нужно полностью перезагрузить Home Assistant.
Далее идём в настройки MQTT нашего дисплея:
После настройки можно убедиться что в брокере появились соответствующие топики, я использую для этого MQTT Explorer
Далее идём в раздел Home Assistant "Устройства и службы" и у вас должен отобразиться дисплей, добавляем его в объекты.
Теперь нам нужно править файл configuration.yaml от Home Assistant, рассказывать как это сделать не буду - есть разные конфигурации Home Assistant и разные способы правки этого файла.
Добавляем там секцию openhasp:
openhasp:
crowpanel1:
objects:
- obj: "p1b1"
properties:
"val": '{{ states("sensor.esp_balkon_balkon_temperature") }}'
"value_str": '{{ states("sensor.esp_balkon_balkon_temperature") }}°C'
- obj: "p1b2"
properties:
"val": '{{ states("sensor.yandexweather_temp") }}'
"value_str": '{{ states("sensor.yandexweather_temp") }}°C'
- obj: "p1b3"
properties:
"val": '{{ states("sensor.bedroom_msw_temp") }}'
"value_str": '{{ states("sensor.bedroom_msw_temp") }}°C'
- obj: "p1b4"
properties:
"val": '{{ states("sensor.bedroom_msw_humidity") }}'
"value_str": '{{ states("sensor.bedroom_msw_humidity") }}%'
- obj: "p1b50"
properties:
"val": '{{ 1 if is_state("switch.bedroom_spot", "on") else 0 }}'
"text": '{{ "Споты \uE6E8" if is_state("switch.bedroom_spot", "on") else "Споты \uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.bedroom_spot"
- obj: "p1b60"
properties:
"val": '{{ 1 if is_state("switch.bedroom_bra", "on") else 0 }}'
"text": '{{ "Бра \uE6E8" if is_state("switch.bedroom_bra", "on") else "Бра \uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "switch.bedroom_bra"
- obj: "p1b70"
properties:
"val": '{{ 1 if is_state("light.bedroom_shtora", "on") else 0 }}'
"text": '{{ "Шторы \uE6E8" if is_state("light.bedroom_shtora", "on") else "Шторы \uE335" | e }}'
event:
"down":
- service: homeassistant.toggle
entity_id: "light.bedroom_shtora"
- obj: "p1b80"
properties:
"val": "{{ int(state_attr('light.bedroom_shtora', 'brightness')/2.55) if state_attr('light.bedroom_shtora', 'brightness') != None else 0 }}"
"value_str": "{{ int(state_attr('light.bedroom_shtora', 'brightness')/2.55) if state_attr('light.bedroom_shtora', 'brightness') != None else 0 }}%"
event:
"changed":
- service: light.turn_on
data:
entity_id: light.bedroom_shtora
brightness: "{{ int(val*2.55) }}"
"up":
- service: light.turn_on
data:
entity_id: light.bedroom_shtora
brightness: "{{ int(val*2.55) }}"
Теперь немного разберём, что тут происходит:
- для добавления реактивности нам нужно знать уникальный id соответствующих устройств в Home Assistant
- в нашей вёрстке предусмотрена одна страница (p1) и каждому элементу задан уникальный id на этой странице (b1, b2 и так далее)
- указываем реактивность каждому элементу по порядку, с учётом его свойств (у каких-то есть text, у каких-то есть val и т.д.)
- в конце есть ползунок для регулировки яркость LED-подсветки в нише штор
- в mqtt-топиках wiren board яркость имеет значение от 0 до 255, поэтому делаем поправку на это с округлением до целого числа
После правок файла configuration.yaml обязательно делаем лёгкий рестарт Home Assistant (лично у меня простой релоад yaml-конфигурации ни к чему не приводит в случае данной технологии)
Результат
В итоге имеем 7" панельку с питанием от Type-C, которую можно использовать для управления функциями умного дома, с возможность выводить показания датчиков, управления реле и диммерами, также можно добавить термостаты отопления и теплых полов, кондиционеры, есть возможность многостраничной вёрстки, в общем инструмент очень достойный.