139
правок
м |
|||
Строка 18: | Строка 18: | ||
Промучавшись сутки я так и не получил желаемый результат, дисплей так и не завёлся, несмотря на то что есть [https://community.home-assistant.io/t/esphome-and-elecrow-crowpanel-7-0/747698 вот такая ветка] с community-ресурса от Home Assistant, может быть это связано с тем, что у меня версия платы v3.0 и существуют какие-то отличия от v2.1, рассмотренной по указанной ссылке. | Промучавшись сутки я так и не получил желаемый результат, дисплей так и не завёлся, несмотря на то что есть [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, которую можно использовать для управления функциями умного дома, с возможность выводить показания датчиков, управления реле и диммерами, также можно добавить термостаты отопления и теплых полов, кондиционеры, есть возможность многостраничной вёрстки, в общем инструмент очень достойный. |
правок