Налаштовуємо інтерфейс Lovelace UI на NSPanel

В одній з моїх минулих статей я познайомив вас зі способом прошивки NSPanel для більшої сумісності з Home Assistant. Тоді за основу ми брали ESPhome, яка керувала контролером ESP32. Але мікропрограму екрану девайсу ми лишили без змін, це дало змогу не міняти зовнішній вигляд інтерфейсу. В свою чергу екран з мікроконтролером «спілкувалися» між собою за допомогою NSPanel Protocol.

Припускаю, що комусь може не подобатися стандартний інтерфейс NSPanel. Можливо, вас навіть не влаштує обмеження в кількості екранів. Нагадаю, ви можете перемикати екрани інтерфейсу за допомогою свайпів, і цих екранів лише три.

Саме тому сьогодні я вам пропоную спосіб змінити інтерфейс NSPanel на альтернативний, який має назву NSPanel Lovelace UI.

Підготовка та прошивка NSPanel

За основну прошивку в NSPanel Lovelace UI вибрано Tasmota. Хоча існує можливість також додати спеціальний ESPHome component, з ESPHome у мене нічого не вийшло, і я вирішив налаштовувати Tasmota. Саме тому я розкажу вам саме про цю мікропрограму.

Отже, почнемо з прошивки Tasmota на контролер ESP32 в NSPanel. Якщо у вас, як і у мене, вже була раніше встановлена ESPHome на цьому девайсі, простіше всього буде «оновитися» по повітрю (OTA). Зайдіть в веб інтерфейс NSPanel, в нижній частині сторінки оберіть раніше завантажений файл прошивки з вашого комп’ютера і натисніть «Update». Приблизно через хвилину девайс перезавантажиться з вже новою прошивкою Tasmota

Якщо ж у вас ще оригінальна прошивка «з заводу», прийдеться розібрати NSPanel, і завантажити мікропрограму Tasmota за допомогою USB девайсу, що іноді називають TTL-converter. Як це зробити я вже розказував в цій статті

Після прошивки та перезавантаження девайсу мікроконтролер не під’єднається до вашої Wi-Fi мережі, адже він про неї ще нічого не знає. Він створить свою відкриту Wi-Fi точку доступу зі словом Tasmota в назві. Під’єднайтеся до нової мережі за допомогою, наприклад, смартфону, та введіть в браузері адресу 192.168.4.1, це тимчасова адреса нашої NSPanel. Тут ви можете обрати вашу основну Wi-Fi мережу і зберегти пароль. Збережіть налаштування, а вже після перезавантаження NSPanel під‘єднається до вашої Wi-Fi. Дуже рекомендую в налаштуваннях роутера вказати статичну адресу для нашого девайса.

Налаштування NSPanel з прошивкою Tasmota

Перше, що потрібно зробити, це вказати шаблон пристрою для Tasmota. Для цього перейдіть в браузері за IP адресою девайсу. В Configuration натисніть Configure Other і вставте наступний код шаблона:

{"NAME":"NSPanel","GPIO":[0,0,0,0,3872,0,0,0,0,0,32,0,0,0,0,225,0,480,224,1,0,0,0,33,0,0,0,0,0,0,0,0,0,0,4736,0],"FLAG":0,"BASE":1,"CMND":"ADCParam 2,11200,10000,3950 | Sleep 0 | BuzzerPWM 1"}

Не забудьте залишити чекбокс «Activate»

Завантажте Berry Driver в Tasmota

1. Завантажте файл autoexec.be з репозиторію Berry Driver
2. В Tasmota перейдіть в Consoles > Manage File System і завантажте раніше вказаний файл.
3. Перезавантажте свою NSPanel.

Оновлюємо мікропрограму екрану Nextion на NSPanel

Тепер оновимо прошивку екрана. Для цього в Tasmota перейдіть в Consoles > Console і в залежності від версії використайте одну з наступних команд:

EU Version: FlashNextion http://nspanel.pky.eu/lui-release.tft
US Version Portrait: FlashNextion http://nspanel.pky.eu/lui-us-p-release.tft
US Version Landscape: FlashNextion http://nspanel.pky.eu/lui-us-l-release.tft

Натисніть «Enter» після чого розпочнеться завантаження мікропрограми та прошивка екрану. В залежності від швидкості доступу до мережі, процес може тривати трохи більше п’яти хвилин. Дочекайтеся закінчення завантаження і перезавантажте пристрій.

Налаштовуємо Home Assistant

Встановлюємо плагін AppDaemon

Найпростіший спосіб інсталювати AppDaemon через Home Assistant Supervisor Add-on Store, тоді його буде автоматично підключено до вашого екземпляра Home Assistant.

Додаємо пакет babel до AppDaemon (необов’язково)

Для локалізації інтерфейсу (дата вашою мовою) вам потрібно додати пакет babel до вашого AppDaemon. У вкладці налаштувань AppDaemon в полі python packages введіть текст «babel» та збережіть налаштування.

Інсталюємо Studio Code Server та HomeAssistant Community Store

Для налаштування інтерфейсу NSPanel Lovelace UI необхідно буде редагувати файл apps.yaml. Редагування yaml файлів буде більш зручніше саме в інтерфейсі Studio Code Server.

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

Встановлюємо Lovelace AppDaemon Backend Application

1. Натисніть у веб-інтерфейсі Home Assistant на панелі меню ліворуч на HACS
2. Натисніть «Automations» на правій панелі
3. У нижньому правому куті натисніть “Explore & download repositories”
4. Введіть NSPanel і натисніть NSPanel Lovelace UI Backend у списку, що з’явиться
5. У нижньому правому куті панелі, натисніть «Download this repository with HACS».
6. Тепер з’явиться панель підтвердження, натисніть «Download» та зачекайте завантаження.
7. Backend Application тепер установлено, і HACS буде повідомляти вас, коли будуть доступні оновлення.

Налаштуйте MQTT на Tasmota і в конфігурації AppDaemon

Спочатку налаштовуємо з’єднання з вашим MQTT сервером у Tasmota.

Будь ласка, заповніть поле «Topic» таким, як він буде в конфігурації. Змініть «Topic» на щось унікальне саме для вашого девайсу, він знадобиться вам пізніше в налаштуваннях appdaemon/apps.yaml

Тепер налаштуйте з’єднання з MQTT в файлі конфігурації AppDaemon. Будь ласка, додайте конфігурацію вашого сервера mqtt, користувача та пароль до appdaemon.yaml. Потім перезавантажте контейнер AppDaemon після додавання конфігурації MQTT. Ви знайдете цей файл тут: config/appdaemon/appdeamon.yaml
secrets: /config/secrets.yaml

appdaemon:
  latitude: 52.0
  longitude: 4.0
  elevation: 2
  time_zone: Europe/Berlin
  plugins:
    HASS:
      type: hass
    MQTT:
      type: mqtt
      namespace: mqtt
      client_id: "appdaemon"
      client_host: 192.168.75.30
      client_port: 1883
      client_user: "mqttuser"
      client_password: "mqttpassword"
      client_topics: NONE
http:
  url: http://127.0.0.1:5050
admin:
api:
hadashboard:

Налаштування NsPanel в AppDaemon

Додайте наступну мінімальну конфігурацію до файлу apps.yaml, який знаходиться в config/appdaemon/apps/apps.yaml

nspanel-1:
  module: nspanel-lovelace-ui
  class: NsPanelLovelaceUIManager
  config:
    panelRecvTopic: "tele/tasmota_your_mqtt_topic/RESULT"
    panelSendTopic: "cmnd/tasmota_your_mqtt_topic/CustomSend"

Вкажіть tasmota_your_mqtt_topic відповідно до топіка, що використовується в конфігурації Tasmota MQTT.

Якщо ваші налаштування і конфігурація правильні, ви повинні побачити такі екрани на NsPanel:

Знайомство з прикладом повної конфігурації NSPanel Lovelace UI

Нижче, під спойлером ви знайдете повний текст з файлу конфігурації моєї NSPanel. Також подивіться на зображення декількох екранів інтерфейсу саме мого варіанту конфігурації. Екран скрінсейвера з погодою можна побачити в шапці цієї статті.

nspanel-1:
  module: nspanel-lovelace-ui
  class: NsPanelLovelaceUIManager
  config:
    panelRecvTopic: "tele/tasmota/RESULT"
    panelSendTopic: "cmnd/tasmota/CustomSend"
    sleepTimeout: 20
    sleepBrightness:
      - time: "7:00:00"
        value: 30
      - time: "23:00:00"
        value: 5
    locale: "uk_UA"
    screensaver:
      statusIcon1:
        entity: switch.tasmota # Entity ID з інтеграції tasmota в HomeAssistant
      statusIcon2:
        entity: switch.tasmota_4417937dfc18_switch_relay_1 # Entity ID з інтеграції tasmota в HomeAssistant

      entity: weather.home
      theme:
        time: [255, 255, 255]
        date: [255, 175, 0]
        tMainIcon: [57, 169, 255]
        bar: [57, 169, 0]
        autoWeather: true
        # Нижче задаємо колір піктограмам погоди (лише тоді, коли - autoWeather: true)
        clear-night: [150, 150, 100]
        cloudy: [75, 75, 75]
        exceptional: [255, 50, 50]
        fog: [150, 150, 150]
        hail: [200, 200, 200]
        lightning: [200, 200, 0]
        lightning-rainy: [200, 200, 150]
        partlycloudy: [150, 150, 150]
        pouring: [50, 50, 255]
        rainy: [100, 100, 255]
        snowy: [150, 150, 150]
        snowy-rainy: [150, 150, 255]
        sunny: [255, 255, 0]
        windy: [150, 150, 150]
        windy-variant: [255, 125, 125]
    cards:
      - type: cardAlarm
        entity: alarm_control_panel.ring_alarm
        supportedModes:
          - arm_home
          - arm_away
      - type: cardThermo
        title: Thermostat
        entity: climate.living_room
      - type: cardMedia
        entity: media_player.living_room_speaker
      - type: cardGrid
        title: Livingroom
        entities:
          - entity: fan.xiaomi_miio_device
            icon:
              "on": mdi:fan # піктограма в залежності від стану
              "off": mdi:fan-off
            color:
              "on": [20, 60, 255] # Колір піктогрми в залежності від стану
              "off": [126, 126, 126]
          - entity: light.livingroom_lights
            icon:
              "on": mdi:lightbulb-group
              "off": mdi:lightbulb-group-off
            color:
              "on": [225, 226, 20]
              "off": [126, 126, 126]
          - entity: light.gyver_lamp_esp_74e9c8
            icon: mdi:lava-lamp
            color:
              "on": [225, 226, 20]
              "off": [126, 126, 126]
          - entity: light.livingroom_table_background
            icon:
              "on": mdi:led-strip-variant
              "off": mdi:led-strip-variant-off
            color:
              "on": [225, 226, 20]
              "off": [126, 126, 126]
      - type: cardEntities
        title: Doors & Windows 1/2
        entities:
          - entity: binary_sensor.main_corridor_door_sensor_contact
            icon: mdi:door-open
          - entity: binary_sensor.terrace_door_sensor_contact
            icon: mdi:door-open
          - entity: binary_sensor.hallway_contact_sensor_ring
            icon: mdi:door-open
          - entity: binary_sensor.kitchen_window_sensor_contact
            icon: mdi:window-open
            name: Kitchen Window
      - type: cardEntities
        title: Doors & Windows 2/2
        entities:
          - entity: binary_sensor.livingroom_window_sensor_contact
            icon: mdi:window-open
          - entity: binary_sensor.kidsroom_window_sensor_contact
            icon: mdi:window-open
          - entity: binary_sensor.main_corridor_window_sensor_contact
            icon: mdi:window-open
          - entity: binary_sensor.toilet_window_sensor_contact
            icon: mdi:window-open
      - type: cardQR
        title: Guest Wifi Network
        qrCode: "WIFI:S:SmartHome Guests;T:WPA;P:1qaz2wsx;;" # SSID та ПАРОЛЬ в QR
        entities: # Вкажіть SSID та ПАРОЛЬ якщо немає змоги сканувати QR
          - entity: iText.SmartHome Guests
            name: Name
            icon: mdi:wifi
          - entity: iText. 1qaz2wsx
            name: Password
            icon: mdi:key

PS

На мою думку, після натискання кнопки-вимикача час відгуку реле девайса з прошивкою Tasmota став трошки більшим, ніж був з ESPhome. Можливо причина в тому, що NSPanel чекає команду на вмикання реле від Home Assistant. В той же час, в ESPhome вся “магія” відбуваеться лише в девайсі, тобто без очікування відповіді від Home Assistant.

Я вирішив відмовитися від Tasmota на борту NSPanel і, в решті решт, встановив ESPhome з компонентом Lovelace UI. Знайти файл конфігурації ESPhome ви можете в моєму Github репозиторії за ось цим посиланням. Тепер вимикачі працюють досить жваво, і, чесно-кажучи, налаштовувати ESPhome  мені більш звичніше.