Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant

Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 1

Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 2

Спеціалізована панель керування розумним домом робить Home Assistant зручнішим у використанні. Ви можете торкнутися екрана, щоб керувати освітленням, перевірити погоду або налаштувати термостат, не тягнучись до телефону. Проблема в тому, що виділені смарт-дисплеї можуть коштувати значно дорожче за апаратне забезпечення, яке міститься всередині.

Недорогі сенсорні дисплеї на базі ESP32 пропонують доступний спосіб створення панелі керування Home Assistant, але створення власного інтерфейсу може вимагати певного програмування. vESP Cloud спрощує цей процес завдяки безкоштовному візуальному редактору з відкритим кодом, який дозволяє створювати панель керування в браузері та генерувати прошивку без необхідності вручну писати весь інтерфейс.

Створюйте панелі керування у візуальному редакторі

Перетягуйте віджети замість того, щоб боротися з координатами

Апаратна основа проєкту – це Guition ESP32-S3-4848S040, модуль сенсорного дисплея з екраном 480 × 480 RGB, драйвером дисплея ST7701S та контролером дотику GT911. Він доступний на онлайн-майданчиках, таких як AliExpress, де подібні пропозиції можуть зробити невелику панель керування розумним домом недорогим проєктом. Однак головна особливість vESP Cloud – це редактор на базі браузера. Замість того, щоб визначати положення та зовнішній вигляд кожного елемента через конфігураційні файли, ви можете перетягувати віджети на полотно, що представляє фізичний дисплей, і налаштовувати їхні властивості в браузері.

Кожен проєкт починається зі сторінки «Головна» та полотна розміром 480 × 480. Ви можете додавати більше сторінок панелі керування, змінювати їх порядок та створювати окремі детальні перегляди для елементів керування, які не обов’язково повинні бути постійно видимими. Наприклад, головний екран може відображати температуру та стан освітлення у вашій кімнаті, а окремий екран міститиме більш детальні налаштування клімату.

Редактор підтримує кілька типів віджетів, зокрема текст, цифрові годинники, кнопки, піктограми, прямокутники, освітлення, елементи керування HVAC, прогнози погоди, календарі, зображення та списки справ. Віджети можна змінювати за розміром і розташовувати відповідно до вашого макета. Ви також можете організовувати контент за допомогою вкладок і умовних областей. Вкладки дозволяють розміщувати кілька груп віджетів в одному просторі, тоді як умовні області відображають різний контент залежно від станів Home Assistant, часу або налаштованих умов.

  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 3
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 4
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 5
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 6
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 7
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 8
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 9
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 10
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 11
  • Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 12

Це дозволяє створити інтерфейс, який реагує на те, що відбувається у вашому домі. Наприклад, область керування медіа може відображати кнопки відтворення, коли плеєр активний, і показувати ярлики для запуску плейлиста, коли він неактивний. Редактор включає теми «Ретро» та «Сучасна». «Ретро» використовує чорний фон із яскравими блакитними та пурпуровими акцентами, тоді як «Сучасна» використовує темніші сірі тони з синіми, фіолетовими та зеленими акцентами. Це незначна деталь, але можливість вибрати вигляд краща, ніж бути обмеженим тим, якими б інтерфейс не вирішив постачати розробник прошивки.

Цей проєкт на ESP32 перетворив мій офіс на «кільце настрою», яке реагує на події календаря, погоду та інше

Одне кільце, щоб побачити їх усіх.

Підключіть панель керування до Home Assistant

Розмістіть свої реальні пристрої розумного будинку на екрані

Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 13

Додавання пристроїв до редактора вимагає певної настройки. Проєкт містить окрему інтеграцію під назвою HA Metadata Exporter, яка експортує сутності Home Assistant та їхні деталі до файлу JSON. Імпортуйте цей файл у vESP Cloud, і ви зможете шукати свої пристрої замість того, щоб пробиратися через ідентифікатори сутностей і вводити їх вручну. Однак є один невеликий недолік. Експорт не оновлюється автоматично, тому вам доведеться генерувати новий файл, коли ваші сутності змінюються.

Після підключення всього ви можете створити панель керування на основі того, що ви реально робите вдома. Розмістіть освітлення та термостат на головному екрані, додайте інформацію про погоду для швидкого огляду або тримайте календар та список справ там, де ви їх бачитимете. Кнопки також можуть запускати служби Home Assistant із запитами на підтвердження для дій, які ви не хочете активувати випадково. Якщо ви хочете, щоб важливі сповіщення привертали вашу увагу, опціональне накладання сповіщень може відображати повідомлення поверх поточного екрана.

USB-A має 30 років, але він досі робить ці 6 речей краще за USB-C

Я не думаю, що USB-A зникне найближчим часом.

Генеруйте та встановлюйте прошивку

Перенесіть панель керування на фізичний дисплей

Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 14

Коли ваш макет буде готовий, ви зможете згенерувати прошивку та встановити її на підтримуваний дисплей. Початкове встановлення вимагає кабелю даних USB-C та сумісного браузера. Якщо дисплей не було налаштовано для вашої домашньої мережі, він може створити тимчасову мережу Wi-Fi. Підключіться до неї, відкрийте сторінку налаштувань і введіть облікові дані Wi-Fi. vESP Cloud зберігає цей процес окремо від редактора. Ваш пароль Wi-Fi вводиться безпосередньо між вашим браузером і дисплеєм, а не надсилається на сервери vESP Cloud.

Потім вам потрібно буде інтегрувати пристрій ESPHome з Home Assistant та переконатися, що він має дозволи, необхідні для роботи його віджетів. Майбутні оновлення прошивки можна встановлювати через Home Assistant. Ви можете вносити зміни в редакторі, створювати оновлену прошивку та встановлювати оновлення з Home Assistant, не підключаючи дисплей до комп’ютера щоразу. Це дуже корисно, коли ви все ще допрацьовуєте макет. Ви можете налаштувати розташування, змінити налаштування віджетів і оновити прошивку в міру розвитку вашої панелі керування.

Редактор безкоштовний, але хмарні збірки коштують грошей

Вибирайте між самостійною компіляцією та оплатою за зручність

Web-редактор перетворює бюджетний дисплей на панель керування Home Assistant 15

Ви можете безкоштовно використовувати візуальний редактор vESP Cloud та генерувати конфігураційні файли. Він експортує конфігурацію ESPHome, включно з файлами YAML та C++, які ви можете скомпілювати за допомогою власної установки ESPHome. Цей варіант має сенс, якщо ви вже знайомі з ESPHome і віддаєте перевагу тримати весь процес під своїм контролем. Ви можете переглянути згенеровану конфігурацію та внести подальші зміни, не сплачуючи за хостингову компіляцію.

Якщо ви віддаєте перевагу, щоб хтось інший виконував процес збірки, vESP Cloud пропонує систему кредитів з оплатою за кожну збірку. Ви купуєте кредити та використовуєте їх для компіляції прошивки через хмарний сервіс, замість того, щоб зобов’язуватися на регулярну підписку. Платний варіант – це в основному зручність. Якщо вас влаштовує компіляція прошивки локально, немає особливих причин платити лише за використання редактора.

7 функцій Home Assistant, які я бажав би почати використовувати раніше

Давно, але не сцена.

Чи варто спробувати vESP Cloud?

vESP Cloud вирішує одну з найскладніших частин створення саморобної панелі керування Home Assistant, а саме перетворення недорогого сенсорного екрана на щось корисне без ручного кодування всього інтерфейсу. Його візуальний редактор, бібліотека віджетів, інтеграція сутностей та генерація прошивки надають вам більш доступний спосіб створення спеціалізованої панелі керування.

Існує кілька проблем, таких як обмежена підтримка апаратного забезпечення лише Guition ESP32-S3-4848S040 та необхідність оновлення метаданих сутностей при зміні вашої конфігурації. Але якщо ви вже використовуєте Home Assistant і хочете сенсорний екран для повсякденного керування, vESP Cloud варто розглянути, перш ніж витрачати більше на спеціалізований смарт-дисплей.

Оригінал статті: www.howtogeek.com

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *