NSPanel Lovelace UI
NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant's Lovelace UI Design.
See the following picture to get an idea of the look of this firmware for NSPanel.
It works with Tasmota over MQTT. To control the panel and update it with content from HomeAssistant there is an AppDeamon App.
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 AppDeamon 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
Installation - Home Automation Part
Installing Home Assistant
You can get to the Home Assistant documentation for installation page in order to setup Home Assistant for your needs.
Installing an MQTT Broker
You will require a working MQTT broker alongside your HomeAssistant installation. HomeAssistant provides documentation on how to install and configure an MQTT broker.
Installing AppDaemon
The recommended backend application for this firmware is written in a python for AppDeamon. This means it requires a working and running version of AppDaemon.
The easiest way to install it is through HomeAssistant's Supervisor Add-on Store, it will be automaticly connected to your HomeAssistant Instance.
Installing Studio Code Server (optional, recommended)
You will need a way a way to edit the apps.yaml config file in the appdeamon folder.
Install Studio Code Server from ome 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 appdeamon 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 AppDeamon Backend Application
With HACS (recommended)
To install Qolsys Gateway with HACS, you will need to make sure that you enabled AppDaemon automations in HACS, as these are not enabled by default:
- Click on
Configurationon the left menu bar in Home Assistant Web UI - Select
Devices & Services - Select
Integrations - Find
HACSand click onConfigure - In the window that opens, make sure that
Enable AppDaemon apps discovery & trackingis checked, or check it and clickSubmit - 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.
The Backend Application for this project is not yet in the default applications available in HACS. You will need to add Qolsys Gateway as a custom repository in HACS. In order to do so:
- Click on
HACSon the left menu bar in Home Assistant Web UI - Click on
Automationsin the right panel - Click on the three dots in the top right corner
- Select
Custom repositories - In the form that appears, write
joBr99/nspanel-lovelace-uias repository, and selectAppDaemonas category - Click on
ADD - Qolsys Gateway is now available to be installed and managed with HACS
Now, to install Qolsys Gateway with HACS, follow these steps:
- Click on
HACSon the left menu bar in Home Assistant Web UI - Click on
Automationsin the right panel - Click on
Explore & download repositoriesin the bottom right corner - Search for
nspanel-lovelace-ui, and click onNSPanel Lovelance UIin 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 qolsysgw/ 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 Systemin 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 appdeamon config folder.
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"
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 1
items:
- button.example_button
- cover.rolladenterasse_cover_1
- light.schreibtischlampe
- delete
- type: cardThermo
heading: Exmaple Thermostat
item: climate.example_climate
- type: cardMedia
heading: Exampe Media
item: media_player.spotify_user
| key | optional | type | default | 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 |
3b. Node Red Flow (Deprecated, but functional with limited Feature Set)
Import the example node-red flow from "node-red-example-flow.json" file and adjust to your needs.
Screens from UI
The following screenshots are from the custom NSPanel UI that will be displayed on NSPanel.
Custom Protocol
See Readme in HMI Folder for more details on HMI Project / Custom Protocol






