h3n3/nspanel-lovelace-ui
1
0
Fork 0
mirror of https://github.com/joBr99/nspanel-lovelace-ui.git synced 2025-12-19 22:24:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

upd docs

Browse Source
This commit is contained in:
joBr99
2022-06-12 14:12:52 +02:00
parent 6b689a494f
commit bd8b8b580b
15 changed files with 276 additions and 767 deletions
Download Patch File Download Diff File Expand all files Collapse all files

764
README.md
View File

@@ -42,766 +42,6 @@ Some (not all) screenshots from the US Portrait Version:
![screens-us-p](doc-pics/screens-us-p.png) ![screens-us-p](doc-pics/screens-us-p.png)
## TLDR ## Documentation
1. Install Tasmota to NSPanel
2. Install Berry Driver in Tasmota and setup MQTT
3. Flash Nextion Firmware
4. Install AppDaemon, setup MQTT and install Backend Application
For more detailed Instructions see the following Sections: Visit https://docs.nspanel.pky.eu/ for installation instructions and documentation of the configuration.
- [Requirements](#requirements)
- [Installation - Home Automation Part (Home Assistant)](#installation---home-automation-part-home-assistant)
- [Installation - Home Automation Part (IoBroker)](#installation---home-automation-part-iobroker)
- [Installation - NSPanel Part (Firmware)](#installation---nspanel-part)
- [Configuration](#configuration)
- [Configuring the MQTT integration in AppDaemon](#configuring-the-mqtt-integration-in-appdaemon)
- [Configure your NSPanel in AppDaemon](#configure-your-nspanel-in-appdaemon)
- [How to update](#how-to-update)
- [FAQ](#faq---frequently-asked-questions)
## Requirements
- NSPanel
- USB to Serial TTL Adapter
- Running Instance of the Home Automation Platform of your Choise
- Running [Home Assistant Instance](https://www.home-assistant.io/installation/)
- with installed [MQTT Broker](https://www.home-assistant.io/docs/mqtt/broker)
- Running [ioBroker Instance](https://www.iobroker.net/#en/documentation)
- with installed MQTT Broker
## Installation - Home Automation Part (Home Assistant)
This section describes the Installation Steps for HomeAssistant, follow each step.
<details><summary>1. Installing HomeAssistant Add-Ons</summary>
<p>
### Installing AppDaemon
The backend application for HomeAssistant is written in a python for [AppDaemon](https://github.com/AppDaemon/appdaemon).
This means it requires a working and running installation 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.
![hass-add-on-store](doc-pics/hass-add-on-store.png)
#### Add babel package to AppDaemon Container (Optional)
For localisation (date in your local language) you need to add the python package babel to your AppDaemon Installation.
![appdaemon-babel](doc-pics/appdaemon-babel.png)
### 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.
</p>
</details>
<details><summary>2. Installing HomeAssistant Community Store</summary>
<p>
### Installing HACS
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](https://hacs.xyz/docs/setup/download).
</p>
</details>
<details><summary>3. Installing Lovelace AppDaemon Backend Application </summary>
<p>
### Installing AppDaemon Backend Application
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:
1. Click on `Configuration` on the left menu bar in Home Assistant Web UI
2. Select `Devices & Services`
3. Select `Integrations`
4. Find `HACS` and click on `Configure`
5. In the window that opens, make sure that `Enable AppDaemon apps discovery & tracking`
is checked, or check it and click `Submit`
6. 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 Lovelace UI Backend with HACS, follow these steps:
1. Click on `HACS` on the left menu bar in Home Assistant Web UI
2. Click on `Automations` in the right panel
3. Click on `Explore & download repositories` in the bottom right corner
4. Search for `NSPanel`, and click on `NSPanel Lovelace UI Backend` in the list that appears
5. In the bottom right corner of the panel that appears, click on
`Download this repository with HACS`
6. A confirmation panel will appear, click on `Download`, and wait for HACS to
proceed with the download
7. The Backend Application is now installed, and HACS will inform you when updates are available
</p>
</details>
## Installation - Home Automation Part (IoBroker)
If you are looking for an ioBroker Integration instead of HomeAssistant take a look into the [Readme](ioBroker/README.md) of the iobroker folder.
Thanks to [britzelpuf](https://github.com/britzelpuf) for this integration.
## Installation - NSPanel Part
This section describes how to free your nspanel from stock firmware and get it ready for Lovelace UI 🎉
You only need to do one **Tasmota** OR **ESPHome**
<details><summary>Installation Instructions for Tasmota (Recommended)</summary>
<p>
### Flash Tasmota to your NSPanel
You need to connect to your nspanel via serial and flash tasmtoa [tasmota32-nspanel.factory.bin](https://tasmota.github.io/install/firmware/development/tasmota32-nspanel.factory.bin) to your NSPanel. You can use the Tasmota Web Installer to do so. [Tasmota Web Installer](https://tasmota.github.io/install/)
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](https://templates.blakadder.com/sonoff_NSPanel.html).
### 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)
![tasmota-template-config](doc-pics/tasmota-template-config.png)
You can use the following template or copy the one on the [Tasmota Template Repo Site](https://templates.blakadder.com/sonoff_NSPanel.html).
`{"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](https://tasmota.github.io/docs/MQTT/) for more details.
![tasmota-mqtt-config](doc-pics/tasmota-mqtt-config.png)
### Upload Berry Driver to Tasmota
1. Download the autoexec.be from the repository: [Berry Driver](tasmota/autoexec.be)
2. Go to `Consoles` > `Manage File System` in Tasmota and upload the previously downloaded file.
3. Restart your NSPanel
### Flash Firmware to Nextion Screen
Note for ioBroker Users: Check the Release Notes, if the ioBroker Backend is not up to date with the current release there will be a note and you have to flash the latest compatible version from there.
#### Use your own Webserver
Upload the nspanel.tft from the lastest release to a Webserver (for example www folder of Home Assistant) and execute the following command in Tasmota Console. (Development Version: [tft file from HMI folder](HMI/nspanel.tft))
**Webserver must be HTTP, HTTPS is not supported, due to limitations of berry lang on tasmota**
`FlashNextion http://ip-address-of-your-homeassistant:8123/local/nspanel.tft`
#### Use my webserver
Due the limitations of Berry, it's not possible to download the tft file directly from github, so I'm also renting a small server where you can download the file via HTTP.
Use the one following commands to flash the latest release from this repository, just execute the following Command in Tasmota:
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`
</p>
</details>
<details><summary>Installation Instructions for ESPHome</summary>
<p>
Support for ESPHome is WIP, see this third-party [ESPHome component](https://github.com/sairon/esphome-nspanel-lovelace-ui) which allows using ESPHome instead of Tasmota.
</p>
</details>
## Configuration
Note this is the documentation of the current development version and might have changed since latest release, so see the documentation of the current release visit:
https://github.com/joBr99/nspanel-lovelace-ui/tree/v2.9.3
### Configuring the MQTT integration in AppDaemon
For the app to work you need a working MQTT Configuration in AppDaemon. Please add the configuration of your mqtt server, user and password to your existing `appdaemon.yaml`
NOTE: This are not the options of the AppDaemon Addon in HomeAssistant. You will find this file under: `config/appdaemon/appdeamon.yaml`
```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:
```
Please see [appdaemon.yaml](appdaemon/appdaemon.yaml) as an exmaple.
### 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. There are some more exmaples in the appdaemon folder of this repo.
```yaml
---
nspanel-1:
module: nspanel-lovelace-ui
class: NsPanelLovelaceUIManager
config:
panelRecvTopic: "tele/tasmota_your_mqtt_topic/RESULT"
panelSendTopic: "cmnd/tasmota_your_mqtt_topic/CustomSend"
updateMode: "auto-notify"
sleepTimeout: 20
#sleepBrightness: 10
sleepBrightness:
- time: "7:00:00"
value: 10
- time: "23:00:00"
value: 0
locale: "de_DE" # used for translations in translations.py and for localized date if babel python package is installed
screensaver:
entity: weather.k3ll3r
cards:
- type: cardEntities
entities:
- entity: switch.example_item
name: NameOverride
icon: mdi:lightbulb
- entity: light.example_item
- entity: cover.example_item
- entity: input_boolean.example_item
title: Example Entities 1
- type: cardEntities
entities:
- entity: switch.example_item
- entity: delete
- entity: cover.example_item
- entity: input_boolean.example_item
title: Example Entities 2
- type: cardEntities
entities:
- entity: binary_sensor.example_item
- entity: sensor.example_item
- entity: button.example_item
- entity: number.example_item
title: Example Entities 3
- type: cardEntities
entities:
- entity: scenes.example_item
- entity: script.example_item
- entity: button.example_item
- entity: input_button.example_item
title: Example Entities 4
- type: cardGrid
entities:
- entity: light.example_item
- entity: switch.example_item
- entity: delete
- entity: button.example_item
- entity: cover.example_item
- entity: delete # delete at the end is optional
title: Exmaple Gird
- type: cardThermo
entity: climate.example_item
- type: cardMedia
entity: media_player.example_item
- type: cardAlarm
entity: alarm_control_panel.alarmo
- type: cardQR
title: Guest Wifi
qrCode: "WIFI:S:test_ssid;T:WPA;P:test_pw;;"
entities:
- entity: iText.test_ssid
name: Name
icon: mdi:wifi
- entity: iText.test_pw
name: Password
icon: mdi:key
```
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
### Possible configuration values for config key
key | optional | type | default | description
-- | -- | -- | -- | --
`panelRecvTopic` | False | string | `tele/tasmota_your_mqtt_topic/RESULT` | The mqtt topic used to receive messages.
`panelSendTopic` | False | string | `cmnd/tasmota_your_mqtt_topic/CustomSend` | The mqtt topic used to send messages.
`updateMode` | True | string | `auto-notify` | Update Mode; Possible values: "auto", "auto-notify", "manual"
`model` | True | string | `eu` | Model; Possible values: "eu", "us-l" and "us-p"
`sleepTimeout` | True | integer | `20` | Timeout for the screen to enter screensaver, to disable screensaver use 0
`sleepBrightness` | True | integer/complex | `20` | Brightness for the screen on the screensaver, see example below for complex/scheduled config.
`screenBrightness` | True | integer/complex | `100` | Brightness for the screen during usage, config format is the same as sleepBrightness.
`sleepTracking` | True | string | None | Forces screensaver brightness to 0 in case entity state is not_home or off, can be a group, person or device_tracker entity.
`sleepOverride` | True | complex | None | Allows overriding of the sleepBrightness if entity state is on, true or home. Overrides sleepBrightness but sleepTracking takes precedence.
`locale` | True | string | `en_US` | Used by babel to determinante Date format on screensaver, also used for localization.
`dateFormatBabel` | True | string | `full` | formatting options on https://babel.pocoo.org/en/latest/dates.html?highlight=name%20of%20day#date-fields
`timeFormat` | True | string | `%H:%M` | Time Format on screensaver. Substring after `?` is displayed in a seperate smaller textbox. Useful for 12h time format with AM/PM <pre>`"%I:%M ?%p"`</pre>
`dateAdditonalTemplate` | True | string | `""` | Addional Text dispayed after Date, can contain a Homeassistant Template Example `" - {{ states('sun.sun') }}"`
`timeAdditonalTemplate` | True | string | `""` | Addional Text dispayed below Time, can contain a Homeassistant Template
`dateFormat` | True | string | `%A, %d. %B %Y` | date format used if babel is not installed
`cards` | False | complex | | configuration for cards that are displayed on panel
`screensaver` | True | complex | | configuration for screensaver
`hiddenCards` | True | complex | | configuration for cards that can be accessed though navigate items
<details><summary>Possible languages for locale config key</summary>
<p>
- `af_xx` - Afrikaans
- `ar_xx` - Arabic
- `bg_xx` - Bulgarian
- `ca_xx` - Catalan
- `cs_xx` - Czech
- `da_xx` - Danish
- `de_xx` - German
- `el_xx` - Greek
- `en_xx` - English
- `es_xx` - Spanish
- `et_xx` - Estonian
- `fa_xx` - Persian
- `fi_xx` - Finnish
- `fr_xx` - French
- `he_xx` - Hebrew
- `hr_xx` - Croatian
- `hu_xx` - Hungarian
- `hy_xx` - Armenian
- `id_xx` - Indonesian
- `is_xx` - Icelandic
- `it_xx` - Italian
- `lb_xx` - Luxembourgish
- `lt_xx` - Lithuanian
- `lv_xx` - Latvian
- `nb_xx` - Norwegian
- `nl_xx` - Dutch
- `nn_xx` - Norwegian
- `pl_xx` - Polish
- `pt_xx` - Portuguese
- `ro_xx` - Romanian
- `ru_xx` - Russian
- `sk_xx` - Slovak
- `sl_xx` - Slovenian
- `sv_xx` - Swedish
- `th_xx` - Thai
- `tr_xx` - Turkish
- `uk_xx` - Ukrainian
- `vi_xx` - Vietnamese
</p>
</details>
#### Possible configuration values for a card in card config</summary>
key | optional | type | default | description
-- | -- | -- | -- | --
`type` | False | string | `None` | Used by navigate items
`entities` | False | complex | `None` | contains entities of the card, only valid on cardEntities and cardGrid and cardQR
`title` | True | string | `None` | Title of the Page
`entity` | False | string | `None` | contains the entity of the current card, valid for cardThermo, cardAlarm and cardMedia
`key` | True | string | `None` | Used by navigate items
`mediaControl` | True | string | `None` | Only valid on cardMedia, contains the action executed on pressing the top left media icon. (useful to navigate to a hidden card or start a script)
`alarmControl` | True | complex | `None` | Only valid on cardAlarm, contains the action executed on pressing the left bottom icon, by default this button is used to show a list of open sensors on a failed attempt to arm.
#### Possible configuration values for entities key
key | optional | type | default | description
-- | -- | -- | -- | --
`entity` | False | string | `None` | name of ha entity
`name` | True | string | `None` | Used to override names
`icon` | True | string | `None` | Used to override icons
`color` | True | array | `None` | Overwrite color of entity `color: [255, 0, 0]`
`state` | True | string | `None` | Only displayed if Entity state is equal to this value
`state_not` | True | string | `None` | Only displayed if Entity state is unequal to this value
`status` | True | string | `None` | Only valid for navigate items, adds a entity to track state for the icon
##### Override Icons or Names
To overwrite Icons or Names of entities you can configure an icon and/or name in your configuration, please see the following example.
Only the icons listed in the [Icon Cheatsheet](https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html) are useable.
```yaml
entities:
- entity: light.test_item
name: NameOverride
icon: mdi:lightbulb
```
It is also possible to configure different icon overwrites per state:
```yaml
icon:
"on": mdi:lightbulb
"off": mdi:lightbulb
```
#### Possible configuration values for screensaver config
key | optional | type | default | description
-- | -- | -- | -- | --
`entity` | True | string | `weather.example` | weather entity from homeassistant
`weatherUnit` | True | string | `celsius` | unit for temperature, valid values are `celsius` or `fahrenheit`
`weatherOverrideForecast1` | True | complex | `None` | sensor entity from home assistant here to overwrite the first weather forecast item on the screensaver
`weatherOverrideForecast2` | True | complex | `None` | sensor entity from home assistant here to overwrite the second weather forecast item on the screensaver
`weatherOverrideForecast3` | True | complex | `None` | sensor entity from home assistant here to overwrite the third weather forecast item on the screensaver
`weatherOverrideForecast4` | True | complex | `None` | sensor entity from home assistant here to overwrite the forth weather forecast item on the screensaver
`statusIcon1` | True | complex | `None` | status icon left to the date string, config similar to weatherOverride
`statusIcon2` | True | complex | `None` | status icon right to the date string, config similar to weatherOverride
`doubleTapToUnlock` | True | boolean | `False` | requires to tap screensaver two times
`alternativeLayout` | True | boolean | `False` | alternative layout with humidity
`theme` | True | complex | | configuration for theme
`defaultCard` | True | string | `None` | default page after exiting screensaver; only works with top level cards defined in cards; needs to be a navigation item, see subpages (navigate.type_key) This config option will also be evaluated as a HomeAssistant Template.
`key` | True | string | `None` | Used by navigate items
Example for the weatherOverride config options:
```yaml
weatherOverrideForecast4:
entity: sensor.example_item
name: name
icon: mdi:lightbulb
```
#### Possible configuration values for screensaver theme config
key | option | type | default | description
-- | -- | -- | -- | --
`background` | True | list | Black | `[R, G, B]`
`time` | True | list | White | `[R, G, B]`
`timeAMPM` | True | list | White | `[R, G, B]`
`date` | True | list | White | `[R, G, B]`
`tMainIcon` | True | list | White | `[R, G, B]`
`tMainText` | True | list | White | `[R, G, B]`
`tForecast1` | True | list | White | `[R, G, B]`
`tForecast2` | True | list | White | `[R, G, B]`
`tForecast3` | True | list | White | `[R, G, B]`
`tForecast4` | True | list | White | `[R, G, B]`
`tF1Icon` | True | list | White | `[R, G, B]`
`tF2Icon` | True | list | White | `[R, G, B]`
`tF3Icon` | True | list | White | `[R, G, B]`
`tF4Icon` | True | list | White | `[R, G, B]`
`tForecast1Val` | True | list | White | `[R, G, B]`
`tForecast2Val` | True | list | White | `[R, G, B]`
`tForecast3Val` | True | list | White | `[R, G, B]`
`tForecast4Val` | True | list | White | `[R, G, B]`
`bar` | True | list | White | `[R, G, B]`
`tMainIconAlt` | True | list | White | `[R, G, B]`
`tMainTextAlt` | True | list | White | `[R, G, B]`
`tMRIcon` | True | list | White | `[R, G, B]`
`tMR` | True | list | White | `[R, G, B]`
`autoWeather` | True | boolean | false | Set to `true` to enable weather icons to change depending on state e.g. blue for rainy. Any custom colors in `tMainIcon` `tF1Icon` `tF2Icon` `tF3Icon` `tF4Icon` take precedence.
If `autoWeather: true` is set. You may also overwrite the default color mapping for any valid weather state provided by homeassistant e.g. `rainy: [50, 50, 255]` or `sunny: [255, 255, 0]`
Specify colours as red green and blue values from 0-255 e.g. `[255, 0, 0]` for red or `[0, 0, 255]` for blue. These are translated internally to RGB565 (note that this has lower color depth so the colours may not appear the same). Also note that the screen has a low contrast ratio, so colors look sigificantly different at full display brightness and lowest brightness.
Example for the theme config:
```yaml
screensaver:
theme:
autoWeather: true
```
For complex setups where you want to reuse the theme over multiple panels see the config exmaples in the appdaemon folder.
#### Schedule sleep brightness
It is possible to schedule a brightness change for the screen at specific times.
```yaml
sleepBrightness:
- time: "7:00:00"
value: 10
- time: "23:00:00"
value: 0
```
```yaml
sleepBrightness:
- time: "sunrise"
value: 10
- time: "sunset + 1:00:00"
value: 0
```
`sleepTracking` overrides this setting and sets the brightness to 0 if the state of the configured Home Assistant entity is `off` or `not_home`. You may also use a [Home Assistant group](https://www.home-assistant.io/integrations/group) to track multiple entities.
`sleepOverride` overrides sleepBrightness but does not take precedence over sleepTracking. This is useful if, for example, you want your NSPanel to be brighter than usual if your light is on or if you want to override a panel dimming if you are in the room.
The following example configuration does nothing during the day but at night, if the bedroom light is on the NSPanel brightness will be 20 instead of 0.
```yaml
sleepBrightness:
- time: "sunrise"
value: 20
- time: "sunset"
value: 0
sleepOverride:
entity: light.bedroomlight
brightness: 20
```
Also it is possible to configure a text or a character by using "text:" as a prefix instead of an icon. `icon: text:X`
#### Fahrenheit on cardThermo
```yaml
- type: cardThermo
entity: climate.example_item
temperatureUnit: fahrenheit
```
#### Subpages
You can configure entities with with the prefix `navigate`, that are navigating to cards, in case it's hidden card, the navigation items will change and the arrow is bringing you back to the privious page.
```yaml
- entity: navigate.cardGrid_testKey
```
will allow you to navigate to a cardGrid page with the configured key testKey
```yaml
hiddenCards:
- type: cardGrid
title: Exmaple Grid
entities:
- entity: light.test_item
key: testKey
```
#### Change behaviour of hardware buttons
##### Tasmota Rules
You can configure the buttons to mimic an UI element on the screen by configuring tasmota rules.
The following rule will change the behaviour of the two buttons to do page navigation.
```
Rule2 on Button1#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bPrev"} endon on Button2#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bNext"} endon
Rule2 1
```
##### Decouple buttons from controlling power outputs
If you do not want your NSPanel physical buttons to trigger the relays and prefer to have them as software configurable buttons, open the Tasmota console of your NSPanel and enter the following:
`SetOption73 1`
Your relays will now appear as switches in HomeAssistant and you can control your buttons by using automations:
![image](https://user-images.githubusercontent.com/57167030/169677954-5b811d12-dab8-4415-89aa-e4196732765e.png)
You may reverse this change by entering the following in the Tasmota console of your NSPanel:
`SetOption73 0`
Please note: Doing this will mean that if HomeAssistant is not working for any reason your buttons will not function correctly.
#### Sending Notifications to the Panel
There are two notification types, that can be triggered by sending a command over mqtt to the panel here are examples for homeassistant scripts:
<details>
<summary>Seperate Page</summary>
<br>
This is the notification used by the backend for updates, opening it requires to the following commands to the CustomSend Topic:
`pageType popupNotify`
`entityUpdateDetail~internalName~heading~headingColor~button1text~button1color~button2text~tB2Color~notificationText~textColor~sleepTimeout`
It is possible to exit from the page by sending `exitPopup`
Send Message to the Panel combined with a buzzer sound:
```yaml
nspanel_popup_notification:
alias: Popup Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend pageType~popupNotify; CustomSend entityUpdateDetail~id~{{
title }}~65535~~~~~{{ message }}~65535~{{ timeout }}; Buzzer 2,2,2
mode: single
icon: mdi:message-badge
```
Send Message to the Panel:
```yaml
nspanel_popup_notification:
alias: Popup Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend pageType~popupNotify; CustomSend entityUpdateDetail~id~{{
title }}~65535~~~~~{{ message }}~65535~{{ timeout }}
mode: single
icon: mdi:message-badge
```
</details>
<details>
<summary>Notification on screensaver</summary>
<br>
The screensaver can display Notifications by sending this command to the CustomSend topic: `notify~heading~text`
Send Message to the Screensaver combined with a buzzer sound:
```yaml
nspanel_screensaver_notification:
alias: Screensaver Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend notify~{{ heading }}~{{ message }}; Buzzer 2,2,2
mode: single
icon: mdi:message-badge
```
Send Message to the Screensaver:
```yaml
nspanel_screensaver_notification:
alias: Screensaver Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend notify~{{ heading }}~{{ message }}
mode: single
icon: mdi:message-badge
```
</details>
## How to update
Updating involves mainly already descriped steps from installation, so this is a short summary.
This project has three main parts, on a new release you usally need to update at least two of them, the AppDaemon Backend and the firmware of the display.
Sometimes there are also changes to the berry driver script on tasmota.
*Note the commands in the following section will update to the current development version of this repository, use the command from release page if you want to use a release version*
### Update AppDaemon Script
HACS will show you that there is an update avalible and ask you to update.
### Update Display Firmware
Use the following command to update or use your own webserver.
If you are using a recent release you also should be able to update directly with a notification on the screen.
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`
### Update Tasmota Berry Driver
Since release 1.1 you can update the berry driver directly from the Tasmota Console with the following command.
`UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be`
## FAQ - Frequently Asked Questions
### Waiting for content - This is taking longer than usual on the screen
Please check your MQTT Topics in your apps.yaml and your mqtt configuration on tasmota.
### How to upgrade from a release to the current development version
1. Update App in HACS to main
Click redownload in the menu of the app in HACS.
Select main version.
**!!! Wait for it to load, dropdown needs to be selectable again, otherwise it will download the latest release !!!**
![hacs-main](doc-pics/hacs-main.png)
**!!! Wait for it to load, dropdown needs to be selectable again, otherwise it will download the latest release !!!**
Click download.
2. Restart AppDaemon
3. Flash current Development Firmware in Tasmota Console. DO NOT USE THIS URL (only if you are on main/dev)
`FlashNextion http://nspanel.pky.eu/lui.tft` DO NOT USE THIS URL (only if you are on main/dev)
Development happens in the EU version, so it is possible that the US Version isn't up to date with the current development version of the EU firmware, the lastet US versions are still downloadable with the following links:
`FlashNextion http://nspanel.pky.eu/lui-us-l.tft` DO NOT USE THIS URL (only if you are on main/dev)
`FlashNextion http://nspanel.pky.eu/lui-us-p.tft` DO NOT USE THIS URL (only if you are on main/dev)

BIN
doc-pics/card-alarm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
doc-pics/card-media.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

20
docs/card-alarm.md
View File

@@ -0,0 +1,20 @@
# Alarm Card
![card-alarm](img/card-alarm.png)
```yaml
cards:
- type: cardAlarm
title: Alarm Test 1
entity: alarm_control_panel.alarmo
```
List of supported config keys of this card:
key | optional | type | default | description
-- | -- | -- | -- | --
`type` | False | string | `None` | Used by navigate items
`title` | True | string | `None` | Title of the Page
`entity` | False | string | `None` | contains the entity of the current card
`key` | True | string | `None` | Used by navigate items
`alarmControl` | True | complex | `None` | overwrites the action executed on pressing the left bottom icon, by default this button is used to show a list of open sensors on a failed attempt to arm.

24
docs/card-climate.md
View File

@@ -1,2 +1,26 @@
# Climate/Thermo Card # Climate/Thermo Card
![card-thermo](img/card-thermo.png)
```yaml
cards:
- type: cardThermo
title: HeatPump
entity: climate.heatpump
- type: cardThermo
title: HvaC
entity: climate.hvac
- type: cardThermo
title: ecobee
entity: climate.ecobee
```
List of supported config keys of this card:
key | optional | type | default | description
-- | -- | -- | -- | --
`type` | False | string | `None` | Type of the card
`entities` | False | complex | `None` | contains a list of entities of this card
`title` | True | string | `None` | Title of the Page
`temperatureUnit` | True | string | `celsius` | set this to fahrenheit to change the temperatureUnit on the page
`key` | True | string | `None` | Used by navigate items in combination with the type (cardEntities_key)

5
docs/card-entities.md
View File

@@ -2,7 +2,7 @@
![card-entities](img/card-entities.png) ![card-entities](img/card-entities.png)
``` ```yaml
cards: cards:
- type: cardEntities - type: cardEntities
title: Test Entities Card title: Test Entities Card
@@ -38,4 +38,5 @@ List of supported entitiy types for this page:
- input_text (read-only) - input_text (read-only)
- lock - lock
- fan - fan
- automation - automation
- iText

6
docs/card-grid.md
View File

@@ -2,8 +2,7 @@
![card-grid](img/card-grid.png) ![card-grid](img/card-grid.png)
```yaml
```
cards: cards:
- type: cardGrid - type: cardGrid
title: Test Grid Card title: Test Grid Card
@@ -44,4 +43,5 @@ List of supported entitiy types for this page:
- light - light
- input_text (read-only) - input_text (read-only)
- lock - lock
- automation - automation
- iText

19
docs/card-media.md
View File

@@ -0,0 +1,19 @@
# Alarm Card
![card-media](img/card-media.png)
```yaml
cards:
- type: cardMedia
entity: media_player.spotify
```
List of supported config keys of this card:
key | optional | type | default | description
-- | -- | -- | -- | --
`type` | False | string | `None` | Used by navigate items
`title` | True | string | `None` | Title of the Page
`entity` | False | string | `None` | contains the entity of the current card
`key` | True | string | `None` | Used by navigate items
`alarmControl` | True | complex | `None` | overwrites the action executed on pressing the left bottom icon, by default this button is used to show a list of open sensors on a failed attempt to arm.

46
docs/card-qr.md
View File

@@ -0,0 +1,46 @@
# WiFi / QR Card
![card-qr](img/card-qr.png)
```yaml
cards:
- type: cardQR
title: Guest Wifi
qrCode: "WIFI:S:test_ssid;T:WPA;P:test_pw;;"
entities:
- entity: iText.test_ssid
name: Name
icon: mdi:wifi
- entity: iText.test_pw
name: Password
icon: mdi:key
```
List of supported config keys of this card:
key | optional | type | default | description
-- | -- | -- | -- | --
`type` | False | string | `None` | Used by navigate items
`entities` | False | complex | `None` | contains entities of the card, only valid on cardEntities and cardGrid and cardQR
`title` | True | string | `None` | Title of the Page
`key` | True | string | `None` | Used by navigate items
`qrCode` | False | string | `None` | Value of the qrCode
List of supported entitiy types for this page:
- switch
- input_boolean
- binary_sensor
- sensor
- button
- scenes
- script
- input_button
- light
- input_text (read-only)
- lock
- automation
The qrCode value is evaluated as a homeassistant Template, so it is possible to get values from HomeAssistant within the qrCode.
`"WIFI:S:{{states('input_text.test_ssid')}};T:WPA;P:{{states('input_text.test_pw')}};;"`

25
docs/faq.md
View File

@@ -4,6 +4,31 @@
Please check your MQTT Topics in your apps.yaml and your mqtt configuration on tasmota. Please check your MQTT Topics in your apps.yaml and your mqtt configuration on tasmota.
## How to update
### Update AppDaemon Script
HACS will show you that there is an update avalible and ask you to update. It is important to restart the AppDaemon Container afterwards.
### Update Display Firmware
You should get an notification on the screen, asking you to update the firmware. In case you want to update manually you can use the following commands.
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`
### Update Tasmota Berry Driver
You should get an notification on the screen, asking you to update the driver, if an update is needed.
You can update the berry driver directly from the Tasmota Console with the following command.
`UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be`
## How to upgrade from a release to the current development version ## How to upgrade from a release to the current development version
1. Update App in HACS to main 1. Update App in HACS to main

BIN
docs/img/card-thermo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

85
docs/notifications.md Normal file
View File

@@ -0,0 +1,85 @@
# Sending Notifications to the Panel
There are two notification types, that can be triggered by sending a command over mqtt to the panel here are examples for homeassistant scripts:
<details>
<summary>Seperate Page</summary>
<br>
This is the notification used by the backend for updates, opening it requires to the following commands to the CustomSend Topic:
`pageType popupNotify`
`entityUpdateDetail~internalName~heading~headingColor~button1text~button1color~button2text~tB2Color~notificationText~textColor~sleepTimeout`
It is possible to exit from the page by sending `exitPopup`
Send Message to the Panel combined with a buzzer sound:
```yaml
nspanel_popup_notification:
alias: Popup Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend pageType~popupNotify; CustomSend entityUpdateDetail~id~{{
title }}~65535~~~~~{{ message }}~65535~{{ timeout }}; Buzzer 2,2,2
mode: single
icon: mdi:message-badge
```
Send Message to the Panel:
```yaml
nspanel_popup_notification:
alias: Popup Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend pageType~popupNotify; CustomSend entityUpdateDetail~id~{{
title }}~65535~~~~~{{ message }}~65535~{{ timeout }}
mode: single
icon: mdi:message-badge
```
</details>
<details>
<summary>Notification on screensaver</summary>
<br>
The screensaver can display Notifications by sending this command to the CustomSend topic: `notify~heading~text`
Send Message to the Screensaver combined with a buzzer sound:
```yaml
nspanel_screensaver_notification:
alias: Screensaver Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend notify~{{ heading }}~{{ message }}; Buzzer 2,2,2
mode: single
icon: mdi:message-badge
```
Send Message to the Screensaver:
```yaml
nspanel_screensaver_notification:
alias: Screensaver Notification
sequence:
- service: mqtt.publish
data:
topic: cmnd/tasmota_NsPanelTerrasse/Backlog
payload: CustomSend notify~{{ heading }}~{{ message }}
mode: single
icon: mdi:message-badge
```
</details>

29
docs/phys-btn.md
View File

@@ -0,0 +1,29 @@
# Change behaviour of hardware buttons
## Tasmota Rules
You can configure the buttons to mimic an UI element on the screen by configuring tasmota rules.
The following rule will change the behaviour of the two buttons to do page navigation.
```
Rule2 on Button1#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bPrev"} endon on Button2#state do Publish tele/%topic%/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bNext"} endon
Rule2 1
```
## Decouple buttons from controlling power outputs
If you do not want your NSPanel physical buttons to trigger the relays and prefer to have them as software configurable buttons, open the Tasmota console of your NSPanel and enter the following:
`SetOption73 1`
Your relays will now appear as switches in HomeAssistant and you can control your buttons by using automations:
![image](https://user-images.githubusercontent.com/57167030/169677954-5b811d12-dab8-4415-89aa-e4196732765e.png)
You may reverse this change by entering the following in the Tasmota console of your NSPanel:
`SetOption73 0`
Please note: Doing this will mean that if HomeAssistant is not working for any reason your buttons will not function correctly.

18
docs/subpages.md Normal file
View File

@@ -0,0 +1,18 @@
# Subpages
You can configure entities with with the prefix `navigate`, that are navigating to cards, in case it's hidden card, the navigation items will change and the arrow is bringing you back to the privious page.
```yaml
- entity: navigate.cardGrid_testKey
```
will allow you to navigate to a cardGrid page with the configured key testKey
```yaml
hiddenCards:
- type: cardGrid
title: Exmaple Grid
entities:
- entity: light.test_item
key: testKey
```

2
mkdocs.yml
View File

@@ -77,6 +77,8 @@ nav:
- "Alarm Card": card-alarm.md - "Alarm Card": card-alarm.md
- "Wifi/QR Card": card-qr.md - "Wifi/QR Card": card-qr.md
- "Special Settings for Entities": entities.md - "Special Settings for Entities": entities.md
- "Subpages": subpages.md
- "Notifications": notifications.md
- "Physical Buttons": phys-btn.md - "Physical Buttons": phys-btn.md