Entities Page with support for cover, switch, input_boolean, sensor, button, input_button and light
Detail Pages for Lights (Brightness and Temperature of the Light) and for Covers (Position)
Thermostat Page
Media Player Card
Screensaver Page with Time and Date

It works with Tasmota and MQTT. To control the panel and update it with content from HomeAssistant there is an AppDaemon App.

See the following picture to get an idea of the look of this firmware for NSPanel.

TLDR

Install Tasmota to NSPanel
Install Berry Driver in Tasmota and setup MQTT
Flash Nextion Firmware
Install AppDaemon, setup MQTT and install Backend Application

For more detailed Instructions see the following Sections:

How It Works
Requirements
Installation - Home Automation Part
Installation - NSPanel Part
Configuration
- Configuring the MQTT integration in AppDaemon
- Configure your NSPanel in AppDaemon

How It Works

The NSPanel has two components an esp32 which runs Tasmota in this project and the nextion display, which is controlled by the esp32 via serial. This project contains a display firmware, which can be controlled over serial/mqtt. It's controlled by an AppDaemon Application, which crafts the required commands from your HomeAssistant Instance.

For more details on how the display firmware works see the README File in the HMI Folder

Requirements

NSPanel
USB to Serial TTL Adapter
Running Home Assistant Instance
Installed MQTT Broker alongside Homeassistant

Installation - Home Automation Part

Installing Home Assistant

Installing AppDaemon

The recommended backend application for this firmware is written in a python for AppDaemon. This means it requires a working and running version of AppDaemon.

The easiest way to install it is through Home Assistant's Supervisor Add-on Store, it will be automaticly connected to your Home Assistant Instance.

Installing Studio Code Server (optional, recommended)

You will need a way to edit the apps.yaml config file in the Appdaemon folder. Install Studio Code Server from Home Assistant's Supervisor Add-on Store to easily edit configuration Files on your HomeAssistant Instance.

Installing HACS (optional, recommended)

HACS is the Home Assistant Community Store and allows for community integrations and automations to be updated cleanly and easily from the Home Assistant web user interface. It's simple to install the AppDaemon app without HACS, but keeping up to date requires manual steps that HACS will handle for you: you will be notified of updates, and they can be installed by a click on a button.

If you want to use HACS, you will have to follow their documentation on how to install HACS.

Installing AppDaemon Backend Application

With HACS (recommended)

To install Lovelace UI Backend App with HACS, you will need to make sure that you enabled AppDaemon automations in HACS, as these are not enabled by default:

Click on Configuration on the left menu bar in Home Assistant Web UI
Select Devices & Services
Select Integrations
Find HACS and click on Configure
In the window that opens, make sure that Enable AppDaemon apps discovery & tracking is checked, or check it and click Submit
If you just enabled this (or just installed HACS), you might have to wait a few minutes as all repositories are being fetched; you might hit a GitHub rate limit, which might then require you to wait a few hours for HACS to be fully configured. In this case, you won't be able to proceed to the next steps until HACS is ready.

Now, to install NSPanel Lovelance UI Backend with HACS, follow these steps:

Click on HACS on the left menu bar in Home Assistant Web UI
Click on Automations in the right panel
Click on Explore & download repositories in the bottom right corner
Search for NSPanel, and click on NSPanel Lovelance UI Backend in the list that appears
In the bottom right corner of the panel that appears, click on Download this repository with HACS
A confirmation panel will appear, click on Download, and wait for HACS to proceed with the download
The Backend Application is now installed, and HACS will inform you when updates are available

Manually

Installing the Backend Application manually can be summarized by putting the content of the apps/ directory of this repository (the nspanel-lovelance-ui/ directory) into the apps/ directory of your AppDaemon installation.

Installation - NSPanel Part

This section describes how to free your nspanel from stock firmware and get it ready for Lovelace UI 🎉

Flash Tasmota to your NSPanel

You need to connect to your nspanel via serial and flash the tasmota32-nspanel.bin to your NSPanel. Make sure to come back to this guide, before uploading the nspanel.be/autoexec.be files. For more deatils see the NSPanel Page of the Tasmota Template Repository.

Configure Tasmota Template for NSPanel

Configure the NSPanel template for Tasmota. (Go to Configuration and Configure Other and paste the template there, make sure to tick the activate checkbox)

You can use the following template or copy the one on the Tasmota Template Repo Site.

{"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"}

After a reboot of tasmota your screen will light up with the stock display firmware.

Setup your MQTT Server in Tasmota

Configure your MQTT Server in Tasmota. See Tasmota MQTT Documentation for more details.

Upload Berry Driver to Tasmota

Download the Berry Driver from this Repository.
Go to Consoles > Manage File System in Tasmota and upload the previously downloaded file.
Restart your NSPanel

Flash Firmware to Nextion Screen

Use your own Webserver

Upload the tft file from HMI folder to a Webserver (for example www folder of Home Assistant) and execute the following command in Tasmota Console. Webserver needs to support HTTP Range Header Requests, python2/3 http server doesn't work

FlashNextion http://ip-address-of-your-homeassistant:8123/local/nspanel.tft

Configuration

Configuring the MQTT integration in AppDaemon

For the app to work you need a working MQTT Configuration in AppDaemon. Please configure mqtt server, user and password in appdaemon.yaml

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

Configure your NSPanel in AppDaemon

Confiure your NSPanel as you like, you need to edit the apps.yaml inside of your Appdaemon config folder. You can have multiple nspanel sections.

nspanel-1:
  module: nspanel-lovelance-ui
  class: NsPanelLovelanceUIManager
  config:
    panelRecvTopic: "tele/tasmota_your_mqtt_topic/RESULT"
    panelSendTopic: "cmnd/tasmota_your_mqtt_topic/CustomSend"
    timeoutScreensaver: 15 #in seconds, values between 5 and 60 are allowed
    #brightnessScreensaver: 10
    brightnessScreensaver:
      - time: "7:00:00"
        value: 10
      - time: "23:00:00"
        value: 0
    locale: "de_DE"
    timeFormat: "%H:%M"
    dateFormat: "%A, %d. %B %Y"
    weatherEntity: weather.example
    pages:
      - type: cardEntities
        heading: Example Page 1
        items:
          - cover.example_cover
          - switch.example_switch
          - input_boolean.example_input_boolean
          - sensor.example_sensor
      - type: cardEntities
        heading: Example Page 2
        items:
          - button.example_button
          - input_button.example_input_button
          - light.light_example
          - delete # To make sure we don't keep buttons from previous page (read this as 'empty')
      - type: cardEntities
        heading: Example Page 3
        items:
          - scene.some_scene
          - scene.moodlights
          - delete
          - delete
      - type: cardThermo
        heading: Exmaple Thermostat
        item: climate.example_climate
      - type: cardMedia
        heading: Exampe Media
        item: media_player.spotify_user

key	optional	type	description
`module`	False	string	The module name of the app.
`class`	False	string	The name of the Class.
`config`	False	complex	Config/Mapping between Homeassistant and your NsPanel

Languages

TypeScript 60.1%

Python 23.1%

JavaScript 8.5%

PHP 7.1%

Berry 1.2%