Home AssistantНалаштуванняРеле/Вимикачі

Налаштовуємо інтерфейс 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

upload_firmware
upload firmware esphome

Якщо ж у вас ще оригінальна прошивка «з заводу», прийдеться розібрати 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"}

tasmota_template_config

Не забудьте залишити чекбокс «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

Flash_Nextion_command_run

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

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

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

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

hass_addon_store

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

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

appdaemon_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.

tasmota_mqtt_settings

Будь ласка, заповніть поле «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:

mqtt-config-sucess

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

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

файл /config/appdaemon/apps/apps.yaml:
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  мені більш звичніше.

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

  • Works brilliant, however, I do get the ‘Setup Successful’ screen keep popping up. Any way to supress that?

    Відповідь
  • i bought 10 ns-panels and i want to remove normal wall switch and put ns-panel but after installing second tasmota-ns-panel i don’t get it how to configure each of them and is it necessary to up more appdeamon instances or which will handle whom ? i’m lost for now how to configure each NS-panel for his zone/room independently (my firstly installed ns-panel work, but I’m lost with multi-instance..)

    Відповідь
    • I don’t have 2nd ns-panel, but I think you need to do
      1) set diferent IP addreses for each ns-panel
      2) set diferent MQTT topics for each ns-panel (inside esphome or tasmota )
      3) set appdeamon app yaml file with your MQTT topics for each ns-panel
      I think it must be like:

      
      nspanel-1:
        module: nspanel-lovelace-ui
        class: NsPanelLovelaceUIManager
        config:
          panelRecvTopic: "tele/nspanel1/RESULT"
          panelSendTopic: "cmnd/nspanel1/CustomSend"
      ...
      
      nspanel-2:
        module: nspanel-lovelace-ui
        class: NsPanelLovelaceUIManager
        config:
          panelRecvTopic: "tele/nspanel2/RESULT"
          panelSendTopic: "cmnd/nspanel2/CustomSend"
      
      ...
      
      
      Відповідь
  • This was a really good article and I got pretty far along in the process but had to make some changes. I have Home Assistant (Core?) running in a docker container on a debian server. I configured appdaemon in a separate container (in the same docker-compose) and connected it to HA and that seems to work.

    I can’t for the life of me figure out how or where to install nspanel-lovelace-ui, any ideas?

    Відповідь
    • Just create .bin file (in esphome add-on dashboard)
      download bit to your PC
      Then open the tasmota interface in your browser and upload .bin file.
      You have to flash the screen with a .tft file inside the tasmota. Run FlashNextion {path to .tft} and press Enter

      Відповідь
      • so i have to flash the tft before the bin?
        where can i get a tft already done to flash it?
        thks

        Відповідь
        • Yes, flash the tft before the bin (in tasmota)
          You can find link to your tft in this article. Chose right version (EU or US)

          Відповідь
            • Its ok. Now you need setup own config/appdaemon/apps/apps.yaml, if you set mqtt and AppDaemon settings earlier.

              Відповідь
  • Ave you ditched esp home for tasmata ?
    Any chance you can show an English version ?
    Cheers

    Відповідь
    • Hello! The English translation will follow in a few days.
      At first, I burned the device to esphome with the standard UI and used it for one month. Then decided to switch to Tasmota with Lovelace UI. Burning of the device from stock to any other requires disassembly of nspanel. Burning from esphome to tasmota and from tasmota to esphome can be over the air.

      Відповідь

Залишити коментар до Bruno Jesus Скасувати коментар

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