|
|
(не показано 9 промежуточных версий 2 участников) |
Строка 1: |
Строка 1: |
| {{DISPLAYTITLE: Интеграция Wiren Board с панелью CrowPanel7.0 от Elecrow}}
| | =Исходные данные= |
| == Описание ==
| |
| {{Wbincludes:Community}}
| |
| | |
| == Исходные данные ==
| |
| Имеется: | | Имеется: |
| # Контроллер [https://wirenboard.com/ru/product/wiren-board-7/ Wiren Board 7] с различными датчикам, модулями реле и диммерами
| | - Контроллер Wiren Board с различными датчикам, модулями реле и диммерами |
| # [https://www.elecrow.com/esp32-display-7-inch-hmi-display-rgb-tft-lcd-touch-screen-support-lvgl.html HMI-панель CrowPanel 7.0 от Elecrow] (на базе [https://www.espressif.com/en/products/socs/esp32-s3 ESP32 S3])
| | - HMI-панель CrowPanel 7.0 от Elecrow (на базе ESP32 S3) |
| # [https://www.home-assistant.io/ Home Assistant v7], подключенный к Wiren Board с помощью [https://github.com/4mr/wb-engine WB Engine]
| |
| | |
| Хочется научиться создавать интерфейс для управления некоторыми функциями умного дома - просмотр показаний с датчиков температуры, управлять каналами реле (освещение) и диммировать подсветку в нише штор.
| |
| | |
| == Выбор технологий ==
| |
| С учётом того что esp32 имеет большое комьюнити в Интернет, решить задачу можно разными способами, я для себя выделил несколько потенциальных:
| |
| # написание кода непосредственно на [https://ru.wikipedia.org/wiki/C%2B%2B C++] с использованием библиотеки [https://lvgl.io/ LVGL]
| |
| # использовать [https://esphome.io/ ESPHome]
| |
| # использовать [https://www.openhasp.com/0.7.0/ OpenHASP]
| |
| | |
| Писать код на плюсах очень не хотелось, но всё равно поглядел на библиотеку [https://lvgl.io/ LVGL] для [https://platformio.org/ PlatformIO], после часа изучения я решил бросить это дело, это будет долго и мучительно, а мне нужен относительно быстрое и расширяемое решение.
| |
| | |
| Следом за этим я стал изучать ESPHome, т.к. уже есть много разных "железок" дома, а также на столе живёт маленький дисплейчик, который показывает мне показания датчиков температуры и CO2.
| |
| | |
| Промучавшись сутки я так и не получил желаемый результат, дисплей так и не завёлся, несмотря на то что есть [https://community.home-assistant.io/t/esphome-and-elecrow-crowpanel-7-0/747698 вот такая ветка] с community-ресурса от Home Assistant, может быть это связано с тем, что у меня версия платы v3.0 и существуют какие-то отличия от v2.1, рассмотренной по указанной ссылке.
| |
| | |
| Я стал изучать другие возможные решения и наткнулся на OpenHASP, не смотря на то, что пока ещё нет стабильной прошивки, нашёл релиз-кандидат [https://nightly.openhasp.com/ на nightly.openhasp.com], а конкретно [https://nightly.openhasp.com/firmware/elecrow-s3-8048c070_full_4MB_v0.7.0-rc12_cd34d89.bin вот ссылка] (скорее всего через какое-то время протухнет).
| |
| | |
| После заливки прошивки с помощью Type-C кабель и ресурса [https://web.esphome.io/ web.esphome.io] дисплей заработал, появилась стартовая страничка, я решил погружаться в этот продукт.
| |
| | |
| == Установка прошивки ==
| |
| Здесь не хочу останавливаться надолго, в двух словах процесс прошивки выглядит так:
| |
| # скачиваем bin-файл
| |
| # открываем [https://web.esphome.io/ web.esphome.io]
| |
| # подключаем дисплей с помощью Type-C кабеля (важно чтобы это был дата-кабель со всеми пинами, а не просто для зарядки)
| |
| # сверху будет ссылка INSTALL
| |
| # выбираем наш bin-файл и шьём его в дисплей
| |
| # в результате на дисплее отобразится интерфейс с возможностью подключиться к Wi-Fi
| |
| # после подключения к Wi-Fi отобразится адрес, полученный по DHCP
| |
| # можно заходить на веб-интерфейс дисплея и начинать верстать интерфейс
| |
| [[Файл:Снимок экрана 2024-07-23 213248.jpg]]
| |
| | |
| == Вёрстка интерфейса ==
| |
| Интерфейс верстается с помощью [https://www.json.org/json-en.html JSON] в разделе File Editor, прилагаю [https://www.openhasp.com/0.7.0/design/file-editor/ ссылку на документацию]
| |
| | |
| Наша задача открыть файл pages.jsonl, все правки необходимо делать в нём.
| |
| | |
| Я стремился к такому внешнему виду:
| |
| [[Файл:Screenshot elecrow7.0.jpg]]
| |
| | |
| Вот как выглядит вёрстка под такой дизайн
| |
| <syntaxhighlight lang="json">
| |
| { "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}
| |
| | |
| </syntaxhighlight>
| |
| | |
| == Реактивность интерфейса ==
| |
| Нам остаётся "оживить" наш интерфейс. Для этого нам понадобится установленный [https://hacs.xyz/ HACS] в нашем Home Assistant.
| |
| | |
| Процесс установки рассмотрен [https://www.openhasp.com/0.6.3/integrations/home-assistant/howto/ вот здесь].
| |
| | |
| После установки нужно полностью перезагрузить Home Assistant.
| |
| | |
| Далее идём в настройки [https://mqtt.org/ MQTT] нашего дисплея:
| |
| [[Файл:Снимок экрана 2024-07-23 214359.jpg]]
| |
| | |
| После настройки можно убедиться что в брокере появились соответствующие топики, я использую для этого [https://mqtt-explorer.com/ MQTT Explorer]
| |
| [[Файл:Снимок экрана 2024-07-23 214622.jpg]]
| |
| | |
| Далее идём в раздел Home Assistant "Устройства и службы" и у вас должен отобразиться дисплей, добавляем его в объекты.
| |
| | |
| Теперь нам нужно править файл configuration.yaml от Home Assistant, рассказывать как это сделать не буду - есть разные конфигурации Home Assistant и разные способы правки этого файла.
| |
| | |
| Добавляем там секцию openhasp:
| |
| <syntaxhighlight lang="yaml>
| |
| 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) }}"
| |
| </syntaxhighlight>
| |
| | |
| Теперь немного разберём, что тут происходит:
| |
| # для добавления реактивности нам нужно знать уникальный id соответствующих устройств в Home Assistant
| |
| # в нашей вёрстке предусмотрена одна страница (p1) и каждому элементу задан уникальный id на этой странице (b1, b2 и так далее)
| |
| # указываем реактивность каждому элементу по порядку, с учётом его свойств (у каких-то есть text, у каких-то есть val и т.д.)
| |
| # в конце есть ползунок для регулировки яркость LED-подсветки в нише штор
| |
| # в mqtt-топиках wiren board яркость имеет значение от 0 до 255, поэтому делаем поправку на это с округлением до целого числа
| |
| | |
| После правок файла configuration.yaml обязательно делаем лёгкий рестарт Home Assistant (лично у меня простой релоад yaml-конфигурации ни к чему не приводит в случае данной технологии)
| |
| | |
| [[Файл:Снимок экрана 2024-07-23 215834.jpg]]
| |
| | |
| == Результат ==
| |
| В итоге имеем 7" панельку с питанием от Type-C, которую можно использовать для управления функциями умного дома, с возможность выводить показания датчиков, управления реле и диммерами, также можно добавить термостаты отопления и теплых полов, кондиционеры, есть возможность многостраничной вёрстки, в общем инструмент очень достойный.
| |
| | |
| [[Файл:Crowpanel7.0.new.mp4]]
| |