Интеграция Wiren Board с панелью CrowPanel 7.0 от Elecrow

Описание

Статья создана членом сообщества и может не совпадать с позицией компании Wiren Board. Используйте приведённые инструкции на свой страх и риск.

Исходные данные

Имеется:

1. Контроллер Wiren Board 7 с различными датчикам, модулями реле и диммерами
2. HMI-панель CrowPanel 7.0 от Elecrow (на базе ESP32 S3)
3. Home Assistant v7, подключенный к Wiren Board с помощью WB Engine

Хочется научиться создавать интерфейс для управления некоторыми функциями умного дома - просмотр показаний с датчиков температуры, управлять каналами реле (освещение) и диммировать подсветку в нише штор.

Выбор технологий

С учётом того что esp32 имеет большое комьюнити в Интернет, решить задачу можно разными способами, я для себя выделил несколько потенциальных:

1. написание кода непосредственно на C++ с использованием библиотеки LVGL
2. использовать ESPHome
3. использовать OpenHASP

Писать код на плюсах очень не хотелось, но всё равно поглядел на библиотеку LVGL для PlatformIO, после часа изучения я решил бросить это дело, это будет долго и мучительно, а мне нужен относительно быстрое и расширяемое решение.

Следом за этим я стал изучать ESPHome, т.к. уже есть много разных "железок" дома, а также на столе живёт маленький дисплейчик, который показывает мне показания датчиков температуры и CO2.

Промучавшись сутки я так и не получил желаемый результат, дисплей так и не завёлся, несмотря на то что есть вот такая ветка с community-ресурса от Home Assistant, может быть это связано с тем, что у меня версия платы v3.0 и существуют какие-то отличия от v2.1, рассмотренной по указанной ссылке.

Я стал изучать другие возможные решения и наткнулся на OpenHASP, не смотря на то, что пока ещё нет стабильной прошивки, нашёл релиз-кандидат на nightly.openhasp.com, а конкретно вот ссылка (скорее всего через какое-то время протухнет).

После заливки прошивки с помощью Type-C кабель и ресурса web.esphome.io дисплей заработал, появилась стартовая страничка, я решил погружаться в этот продукт.

Установка прошивки

Здесь не хочу останавливаться надолго, в двух словах процесс прошивки выглядит так:

1. скачиваем bin-файл
2. открываем web.esphome.io
3. подключаем дисплей с помощью Type-C кабеля (важно чтобы это был дата-кабель со всеми пинами, а не просто для зарядки)
4. сверху будет ссылка INSTALL
5. выбираем наш bin-файл и шьём его в дисплей
6. в результате на дисплее отобразится интерфейс с возможностью подключиться к Wi-Fi
7. после подключения к Wi-Fi отобразится адрес, полученный по DHCP
8. можно заходить на веб-интерфейс дисплея и начинать верстать интерфейс

Вёрстка интерфейса

Интерфейс верстается с помощью 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) }}"

Теперь немного разберём, что тут происходит:

1. для добавления реактивности нам нужно знать уникальный id соответствующих устройств в Home Assistant
2. в нашей вёрстке предусмотрена одна страница (p1) и каждому элементу задан уникальный id на этой странице (b1, b2 и так далее)
3. указываем реактивность каждому элементу по порядку, с учётом его свойств (у каких-то есть text, у каких-то есть val и т.д.)
4. в конце есть ползунок для регулировки яркость LED-подсветки в нише штор
5. в mqtt-топиках wiren board яркость имеет значение от 0 до 255, поэтому делаем поправку на это с округлением до целого числа

После правок файла configuration.yaml обязательно делаем лёгкий рестарт Home Assistant (лично у меня простой релоад yaml-конфигурации ни к чему не приводит в случае данной технологии)

Результат

В итоге имеем 7" панельку с питанием от Type-C, которую можно использовать для управления функциями умного дома, с возможность выводить показания датчиков, управления реле и диммерами, также можно добавить термостаты отопления и теплых полов, кондиционеры, есть возможность многостраничной вёрстки, в общем инструмент очень достойный.