NSpanel Lovelace UI for Home Assistant
About 10 months ago Sonoff send us the NSpanel and thereafter we published our first impressions. The product was not entirely new and innovative, as there where Nextion Touch displays and 2-gang wall switches readily available, but the NSpanel combines both in a nice package thus creating a new and promising product.
As with all more complex display solutions, the succes of the product mostly depends on the available software or (open-source) community adoption. A Nextion display is not the most user-friendly display for use in a Home Automation environment. We have been closely watching the evolution of the original software and the emerging open-source community software.
We have been trying tasmota and esphome implementations, we did try the original software as well, but none of those solutions where particularly user-friendly or versatile. But then about 4 months ago, we stumbled upon the “NsPanel Lovelace UI” project by joBr99 (Johannes) which combines Tasmota or ESPHome with a Home Assistant appdeamon add-on. It allows for easy configuration in yaml, from within Home Assistant.
We haven been experimenting with this add-on for a while now and we love it! It works quit fast, reliable and it’s easy to maintain. Below you’ll find some instructions to get you going with this addon.
In order to install the NSpanel Lovelace UI “app”, you need the following installed and ready:
- Home Assistant
- HACS (Home Assistant Community Store)
- appdeamon (available in the add-on store)
- Studio Code Server (available in the add-on store)
- MQTT addon (available in the add-on store)
After you have installed all of the above, it’s time to install ESPHome on the NSpanel. If you prefer Tasmota, instructions can be found here.
To install any kind of third party firmware on the NSpanel, you may follow instructions from our NSpanel First Impressions article.
Instructions for esphome: sairon/esphome-nspanel-lovelace-ui: ESPHome component for NSPanel Lovelace UI (github.com)
Use the example .yaml config to get you going.
Install NSpanel Lovelace UI
Installing the NSpanel Lovelace UI AppDaemon Backend Application is reasonably straight forward. The instructions can be found here.
Configure the app
Configuration for the app is done via 2 files. Use Studio Code Server to edit these files.
Here is my config to get you going:
--- secrets: /config/secrets.yaml appdaemon: latitude: 51.2 longitude: 5.5 elevation: 2 time_zone: Europe/Amsterdam plugins: HASS: type: hass MQTT: type: mqtt namespace: mqtt client_id: "appdaemon" client_host: 192.168.100.101 client_port: 1883 client_user: "appdaemon" client_password: "password" client_topics: NONE http: url: http://127.0.0.1:5050 admin: api: hadashboard:
nspanel_1: module: nspanel-lovelace-ui class: NsPanelLovelaceUIManager config: panelRecvTopic: "tele/nspanel_1/RESULT" panelSendTopic: "cmnd/nspanel_1/CustomSend" locale: "en_EN" model: "eu" sleepTimeout: 40 sleepBrightness: - time: "6:00:00" value: 8 - time: "23:00:00" value: 2 screensaver: entity: weather.dark_sky cards: - type: cardGrid title: Bathroom key: cardgrid1 entities: - entity: light.shower_led name: Shower light - entity: light.bath_led name: Bath light - entity: light.vanity_led name: Vanity light - entity: switch.floor_heating name: Floor heating - entity: sensor.temperature_sensor_bathroom name: Temperature - entity: sensor.humidity_sensor_bathroom name: Humidity - type: cardMedia title: Bathroom entity: media_player.bathroom - type: cardThermo title: Bathroom entity: climate.bathroom - type: cardEntities title: Test Entities Card entities: - entity: light.bath_test
As soon as you have configured both, restart the NSpanel and your display should show:
Any changes you make to the apps.yaml, will now be instant.
The NSpanel is and remains a niche product. Using the factory firmware it’s not a very potent device, but using the NSpanel Lovelace UI app, makes it a very useful gadget for specific applications. Installing it all can be a bit challenging, but once installed it’s a breeze to configure, straight from the yaml in Home Assistant.