in old gesichert

cards seperat gefasst
tt-tom17
2025-01-07 04:16:25 +01:00
parent dcf839351e
commit cb522d5cb5
43 changed files with 12148 additions and 761 deletions

667
new/Changelog.md Normal file

@@ -0,0 +1,667 @@
**ioBroker Changelog (TypeScript)**
# v4.4.0.11
![v44011](https://github.com/user-attachments/assets/d20662c0-238d-4c68-bbc4-dee348af3548)
[Forum Link](https://forum.iobroker.net/post/1222270)
****
# v4.4.0.5
![v4405](https://github.com/user-attachments/assets/d91b155d-35c5-4cfb-866e-221a5ca44c82)
[Forum Link](https://forum.iobroker.net/post/1202535)
****
# v4.4.0.4
![v4404](https://github.com/user-attachments/assets/1c2e7e5d-277e-4a14-9a66-e6059fc5e824)
[Forum Link](https://forum.iobroker.net/post/1201018)
****
# v4.4.0
Wechsel auf TFT 4.4.0 und Tasmota 14.0.0
****
# v4.3.3.43
![v43343](https://github.com/user-attachments/assets/9d0a3a13-9e2a-44f3-9967-39ca4c857614)
[Forum Link](https://forum.iobroker.net/post/1127919)
****
# v4.3.3.40
![v43340](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/963a0dfd-7ab8-4880-8206-c3ddca395656)
[Forum Link](https://forum.iobroker.net/post/1124745)
****
# v4.3.3.39
<img width="484" alt="v4.3.3.39" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/557ca471-edab-418b-90e2-144ce3e4274e">
[Forum Link](https://forum.iobroker.net/post/1121353)
****
# v4.3.3.38
![v43338](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/216aa36c-c2f5-4371-b272-fea8ac0c02c7)
[Forum Link](https://forum.iobroker.net/post/1116411)
****
# v4.3.3.36
![v43336](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f5bdf96f-6c14-40bc-ae96-0373851504b9)
[Forum Link](https://forum.iobroker.net/post/1112980)
****
# v4.3.3.33
![v43333](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/0941467c-47ae-4fa7-bf25-d19f48c0694f)
[Forum Link](https://forum.iobroker.net/post/1107313)
****
# v4.3.3.31
![v43331](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/da283111-150c-4ae0-a9c1-81b9f6fb0431)
[Forum Link](https://forum.iobroker.net/post/1106161)
****
# v4.3.3.30
![v43330](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/b5baeaf3-f804-4844-92da-0f07e8eb4614)
[Forum Link](https://forum.iobroker.net/post/1105617)
****
# v4.3.3.28
![v43328](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/626fc5ad-cfbf-46b4-8b32-fc263911ee93)
[Forum Link](https://forum.iobroker.net/post/1104167)
****
# v4.3.3.27
![v43327](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/b662a622-f1c1-4212-8c9b-a27a97784071)
[Forum Link](https://forum.iobroker.net/post/1102353)
****
# v4.3.3.25
![v43325](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/326a2a6e-5a8d-4b8c-ab06-1fa16381bf48)
[Forum Link](https://forum.iobroker.net/post/1098754)
****
# v4.3.3.24 (Hotfix)
![v43324](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/6d126909-a2ef-4683-8b4a-c850cd2a3335)
[Forum Link](https://forum.iobroker.net/post/1096707)
****
# v4.3.3.23
![v43323](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/2ee4cd33-4814-4212-b344-44d3c153ed48)
[Forum Link](https://forum.iobroker.net/post/1096164)
****
# v4.3.3.22
![v43322](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/5d272138-4d4c-4c44-b118-adf7ff32cceb)
[Forum Link](https://forum.iobroker.net/post/1095383)
****
# v4.3.3.21
![v43321](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/db60fa68-9d52-4fa7-aeed-3f7e44a3bdc2)
****
# v4.3.3.20
![v43320](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/88c7fd60-df6e-44c2-a0ab-9c27c0b48aaf)
[Forum Link](https://forum.iobroker.net/post/1092494)
****
# v4.3.3.19
![v43319](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f1530777-33c7-4d7b-b514-f91be08ddb82)
[Forum Link](https://forum.iobroker.net/post/1091873)
****
# v4.3.3.18
![v43318](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/c0e5191c-fa6e-467c-985f-744201f1bf16)
[Forum Link](https://forum.iobroker.net/post/1091438)
****
# v4.3.3.17
![v43317](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/99f3fe78-8425-42ca-b658-93c0b04ff184)
![NSPanel](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/15bb9318-5097-4f81-a7b5-6b2431b85f27)
[Wiki Link](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-%E2%80%90-cardMedia-%E2%80%90-Der-SONOS-Player)
[Forum Link](https://forum.iobroker.net/post/1090546)
****
# v4.3.3.16
![v43316](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/dffd837a-59ed-4c0f-a199-e8a088f44b23)
[Forum Link](https://forum.iobroker.net/post/1089353)
****
# v4.3.3.15
![v43315](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/991e3ef0-e6f8-44b2-882c-ea11eb33c06e)
[Forum Link](https://forum.iobroker.net/post/1088675)
****
# v4.3.3.14
![v43314](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/255eea39-411f-426b-917a-5d9e551e9a73)
[Forum Link](https://forum.iobroker.net/post/1087343)
****
# v4.3.3.13
![V43313](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/89251a3d-e53c-44f2-8c9d-266e0818c976)
[Forum Link](https://forum.iobroker.net/post/1086744)
****
# v4.3.3.12
![V43312](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/8712797e-f437-4e6b-a221-8bde555a9167)
[Forum Link](https://forum.iobroker.net/post/1086380)
****
# v4.3.3.11
![V43311](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/7b330c91-b629-4480-aaac-3f2e8c60452e)
[Forum Link](https://forum.iobroker.net/post/1086380)
****
# v4.3.3.10
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/c60b36af-a39f-4f38-911b-80b4225206cd)
[Forum Link](https://forum.iobroker.net/post/1085163)
### Achtung Breaking Changes.
> Konstanten aus dem oberen Teil sind doppelt, wenn ausschließlich nur der untere Teil ausgetauscht wird!
**Bitte unbedingt nach der Update-Anleitung vorgehen:**
https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade
****
# v4.3.3.9
  | - 18.11.2023 - v4.3.3.6 Add autoCreateALias to PageAlarm
  | - 20.11.2023 - v4.3.3.6 Add actionStringArray to PageAlarm
  | - 20.11.2023 - v4.3.3.6 Add Multilingualism to cardAlarm (39 languages)
  | - 20.11.2023 - v4.3.3.7 Add Multilingualism to cardMedia (39 languages)
  | - 20.11.2023 - v4.3.3.8 Add Method dayjs (Multilingualism)
  | - 20.11.2023 - v4.3.3.9 Add ScreensaverEntityOnColor, ...OffColor, ...OnText, ...OffText
[Forum Link](https://forum.iobroker.net/post/1083729)
****
# v4.3.3.5
![1700223821684-0fe40ec2-e9e4-4505-855f-6684703d9885-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/65c4b641-3775-4f7c-a591-d1bd16dfe316)
[Forum Link](https://forum.iobroker.net/post/1081945)
****
# v4.3.3.3
![1699866147196-24b160ce-2408-490d-abb3-13bf895fdbf9-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/c1f6bc9c-0dfd-4cd7-9ea2-994f949dfa04)
* v4.3.3.2 Add autoCreateALias to cardUnlock
* v4.3.3.2 Change NodeJS to at least v18.X.X
* v4.3.3.3 if setOption = false, do not create autoAlias (Functional/Servicemenu) and Datapoints
[Forum Link](https://forum.iobroker.net/post/1079701)
****
# v4.3.3.1
<img width="616" alt="Bildschirmfoto 2023-11-12 um 15 49 46" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/d55a044c-5661-4c78-a9c1-63d308f72021">
[Forum Link](https://forum.iobroker.net/post/1079227)
****
# v4.3.2.1
![1698692791078-91fe4d4d-e8d5-46ee-a241-52e7a95c5d11-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f5cc3702-0984-4e28-bdc8-3f9ce762bbed)
[Forum Link](https://forum.iobroker.net/post/1070661)
****
# v4.3.1.6
![1697706281650-fe09ab24-9edc-4164-9123-95b87b4f1ab0-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/e88005ca-1f6c-4158-8469-4c7f3311d3bd)
[Forum Link](https://forum.iobroker.net/post/1063274)
****
# v4.3.1.5
<img width="763" alt="Bildschirmfoto 2023-10-13 um 12 06 32" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/459c0e8c-2a56-4c61-b68d-97bd90216c68">
[Forum Link](https://forum.iobroker.net/post/1059690)
****
# v4.3.1.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f7db2ef3-3fe7-4ed6-af54-8a70c5bf7569)
***
# v4.3.1.2/v4.3.1.3
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/09dcf039-fbd1-494d-9c90-93d682ba2a31)
[Forum Link](https://forum.iobroker.net/post/1049432)
***
# v4.3.1.1
![1694951180030-bce68a5b-3f4f-451c-a64c-351743ed1645-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/d47e165a-60fc-4623-aac3-b4f320728b51)
[Forum Link](https://forum.iobroker.net/post/1045086)
***
# v4.2.1.6
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/37ec01be-060d-4d0b-b86c-71cb7098faf2)
***
# v4.2.1.5
<img width="920" alt="image" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/0cecfad4-5478-4765-8e1a-848759f95e5e">
[Forum Link](https://forum.iobroker.net/post/1039117)
***
# v4.2.1.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/24d81ccf-60eb-40c3-93e6-2cecd8e3f69c)
[Forum Link](https://forum.iobroker.net/post/1038290)
***
# v4.2.1.3
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/67f9935a-801d-4dd4-9fbf-c2eaa058fe1f)
[Forum Link](https://forum.iobroker.net/post/1035344)
***
# v4.2.1.2
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/ef1ef63d-b1a6-48ae-a053-5b5e063011e7)
[Forum Link](https://forum.iobroker.net/post/1034341)
***
# v4.2.1.1
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/937d19f2-b0cc-4d4d-95d3-6a2d476d443a)
[Forum Link](https://forum.iobroker.net/post/1033818)
***
# v4.2.0.2
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/2b915899-d1da-4dc8-aaba-d8683079dcfb)
[Forum Link](https://forum.iobroker.net/post/1033498)
***
# v4.2.0.1
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/decce552-f2cd-4e1a-bd22-fb8c2fb3e7b1)
[Forum Link](https://forum.iobroker.net/post/1033227)
***
# v4.2.0
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/124a9d8f-0f49-4bfe-9fe5-bb94be5242d3)
[Forum Link](https://forum.iobroker.net/post/1033017)
***
# v4.1.4.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/48c51925-565c-4ddd-9388-1623e250bb4a)
[Forum Link](https://forum.iobroker.net/post/1029669)
***
# v4.1.4.2
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/bbdd17b3-16a2-4dad-ba28-b303a0a9540d)
[Forum Link](https://forum.iobroker.net/post/1028914)
***
# v4.1.4.1
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/ab396fcc-7c74-45be-ab46-4198265f81fc)
[Forum Link](https://forum.iobroker.net/post/1028713)
***
# v4.1.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/d46d49e5-748a-4708-a971-581effb86bf1)
# v4.0.5.5
Die Funktion CreateEntity wurde erweitert um die Rolle "timeTable", damit besteht die Möglichkeit Daten vom [Adapter "Fahrplan"](https://github.com/gaudes/ioBroker.fahrplan) zu visualisieren. Zusätzlich wird dieses [externe Script](https://github.com/tt-tom17/MyScripts/tree/main/Sonoff_NSPanel) benötigt. Weitere Infos [hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#22-fahrplananzeiger).
# v4.0.5.1
![228012141-a440d45b-d9ab-422d-8c61-68a4c8826914](https://user-images.githubusercontent.com/101348966/228247263-426bcd08-f65a-48f1-aac9-2a87c6f5f308.png)
[Erweiterte Konfigurationsmöglichkeiten der Hardwaretasten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#anleitungen) - von bembelstemmer
Fix iconColor by 100% Brightness
Fix Funktion GeneratePowerPage inkl. DemoModus [Powercard](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341) (einfach leeres pageItem übergeben)
Fix colorTempSlider Arbeitsweise(seitenverkehrt) korrigiert
Debug - Error - Log - Meldungen angepasst
Eine Licht von Typ **rgbSingle** benötigt nicht mehr den Datenpunkt **.TEMPERATURE** im Alias.
Upgrade TFT 50 / 4.0.5
Die [Status Icon](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#erweiterung-der-relaystatus-icons-ab-v390) über den Hardware
# v4.0.3
![1677525629878-9b7597a5-3d3d-43d5-b0c7-a4d42d8eac7f-image](https://user-images.githubusercontent.com/101348966/224631987-e3808582-0de8-4baf-a548-5d595dd47b5f.png)
Änderungen in der Config
aus
`export const config: Config = {`
wird
`export const config = <Config> {`
und die **firstScreensaverEntity - fourthScreensaverentity** existieren nicht mehr. Erstatz dafür ist das Array **bottomScreensaverEntity**. Die ersten 4 bottomScreensaverEntity werden auch im Standard-Screensaver genutzt.
Des weiteren ist der Erweiterte Screensaver enthalten:
![1677526152660-837094a5-44e0-4c7c-9251-9e02dc80346c-image](https://user-images.githubusercontent.com/101348966/224631169-f4bb07c2-3d8a-4341-8f0d-8e5e5394abd7.png)
Zur Konfiguration des Screensavers bitte die Wiki berücksichtigen:
[Screensaver Wiki](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#entity-status-icons-ab-v400)
Für alle User mit kleinen Hackern zuhause gibt es jetzt die cardUnlock:
![1677526345821-df037f8b-91cd-418e-aeac-6a54e4e16915-image](https://user-images.githubusercontent.com/101348966/224632179-f73b2526-df53-4f52-b71b-be155b874bf8.png)
Siehe auch: [CradUnlock Wiki](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardunlock-ab-v400)
Ansonsen gab es diverse Erweiterungen und Minor-Bugfixes:
* Eine überarbeitete und erweiterte **Squeezebox** und diverse Optimierungen von [@bembelstemmer](https://forum.iobroker.net/uid/55112)
* Ein Mode - Fix für die cardThermo und dynamische Icons im Advanced Screensaver von [@Gargano](https://forum.iobroker.net/uid/2916)
**Kurze Upgrade Empfehlung:**
* TypeScript anlegen und die Version https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs_without_Examples.ts hinein kopieren
* altes Script deaktivieren (Fallback)
* Konfiguration anhand der Variablen aus dem anderen Script übernehmen (Achtung Config hat einen veränderten Aufbau und kann nicht 1:1 übernommen werden, siehe oben!)
* Erweiterungen für Advanced Screensaver aus Wiki oder NSPanel.ts (Script mit Beispielen) migrieren
* FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v4.0.3.tft in der Tasmota Console ausführen
**Hinweis**
Es erforderlich sein kann, die vom TS-Script automatisch angelegten 0_userdata.0.NSPanel.X Verzeichnisse und Auto-Aliase zu löschen und neu anlegen zu lassen.
# v3.9.0
![image](https://user-images.githubusercontent.com/102996011/215470528-f4a9581a-9973-49a9-b472-3153d91f2c89.png)
**Achtung Breaking Changes:**
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.9.0.tft
```
Im oberen Konfigurationsbereich sind diverse Änderungen entstanden. Die einfachste Methode für ein Upgrade ist auf ein TS-Script ohne Beispiele aufzusetzten: https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs_without_Examples.ts .
Das vorhandene bereits TS-Script sollte deaktiviert werden, dienst als Fallbacklösung und zum kopieren der Migrationsanteile (vorhandene Seitendefinitionen, etc.):
* Benutzer- /Panelspezifische Anpassungen vornehmen
* Zeile 213: NEU: bevorzugte Tasmota-Version auswählen
* Zeile 217: NSPanel- Pfad anpassen
* Zeile 618: MQTT-Pfad anpassen
* Zeile 619: MQTT-Pfad anpassen
* Zeile 658: MQTT-Pfad anpassen
* Zeile 666: MQTT-Pfad anpassen
* TS-Script aktivieren und starten (Neue Datenpunkte und Aliase werden erstellt)
* Wenn keine Fehler vorhanden sein sollten, dann danach die vorhandenen Seiten-Variablen und benutzerspezifische Farbkonstanten nachziehen.
* Zum Schluss Anpassungen in den neuen Parametern der Screensaver-Entities im Config-Teil vornehmen.
***
# v3.8.3
![image](https://user-images.githubusercontent.com/102996011/212193107-c2e88e5d-43d0-4727-bacf-38d13d9e2dcd.png)
**Achtung Breaking Changes:**
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.8.3.tft
```
**Diese Release beinhaltet:**
* neue Funktionen des Volumio-Media-Players
* die Vorbereitung für die carLCharts (Linien Diagramme siehe Vorschau unten)
* Funktionen für den "echten Taster" (Mono-Button)
* Hotfix für die farbigen Licht-Typen (Funktion Off)
* Das €-Zeichen in Strings
* Individuelle Navigations-Icons bei parent/prev/next/home
**Update-Anleitung (von v3.8.1 ausgehend):**
* Unteren Teil (ab hier keine Änderungen...) komplett ersetzen.
* In den Variablen muss eine Änderung vorgenommen werden
* die 1 Zeile der Variable jeder Seite muss von:
```
let Test_Licht1: PageEntities =
```
in
```
let Test_Licht1 = <PageEntities>
```
geändert werden.
also:
let `Variablenname` = <`Seitentyp`>
**Dadurch ergeben sich folgende Vorteile:**
Es müssen nicht mehr alle Seitenparameter angegeben werden, wie z.B.:
```
let CardPowerExample = <PagePower>
{
'type': 'cardPower',
'heading': 'cardPower Emulator',
'items': [
<PageItem>{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
]
};
```
d.h. alle optionalen Seitenparameter mit `undefined` oder `false` können entfallen.
Zusätzlich können weitere Typen verwendet werden:
```
let CardPowerExample = <PagePower>
{
'type': 'cardPower',
'heading': 'cardPower Emulator',
'useColor': true oder false
'subPage': true oder false
'parent': undefined oder Page
'parentIcon': undefined oder Icon als String, z.B. 'alert'
'prev': undefined oder 'Page'
'prevIcon': undefined oder Icon als String
'next': undefined oder 'Page'
'nextIcon': undefined oder Icon als String
'home': undefined oder 'Page'
'homeIcon': undefined oder Icon als String
'items': [
<PageItem>{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
]
};
```
Das TS-Script findet ihr hier:
https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts
Mit v3.9.0 kommt demnächst die carLChart hinzu (aktuell noch nicht in der stable TFT):
![image](https://user-images.githubusercontent.com/102996011/212189531-103e384a-d403-4ed1-a99f-fa3d29c72523.png)
***
# v3.8.1
![image](https://user-images.githubusercontent.com/102996011/212193039-2a5503b6-cb25-4110-af76-90d9e2b1d8f3.png)
**Achtung Breaking Changes:**
Um die Menüstruktur derart zu flexibilisieren, mussten in die Seitendeklaration weitere Parameter eingeführt werden. Es ist daher zwingend erforderlich, folgende Erweiterung je Seite vorzunehmen ( **prev**, **next**, **home** ) :
```
let Test_Licht1: PageEntities =
{
'type': 'cardEntities',
'heading': 'Color Aliase 1',
'useColor': true,
'subPage': false,
'parent': undefined,
'prev': undefined, //Neu - bitte in jede Seite einfügen
'next': undefined, //Neu - bitte in jede Seite einfügen
'home': undefined, //Neu - bitte in jede Seite einfügen
'items': [
<PageItem>{ ... }
]
};
```
Was kann man mit der neuen Navigation anstellen? :
@TT-Tom hat eine **ausführliche Anleitung** geschrieben :+1: . Ihr findet Sie in der gestern noch erweiterten Wiki:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation
![image](https://user-images.githubusercontent.com/102996011/212190944-abfe4a8f-d31c-4dde-aa25-5c49718277dc.png)
Im oberen Teil des Skriptes sind zwei Konstanten enthalten.
```
const tasmota_web_admin_user: string = 'admin'; // ändern, falls der User im Tasmota vor dem Kompilieren umbenannt wurde (Standard Tasmota: admin)
const tasmota_web_admin_password: string = ''; // setzten, falls "Web Admin Password" in Tasmote vergeben
```
Bitte nicht vergessen, diese bei der Erweiterung zu berücksichtigen. Wer möchte, kann im Tasmota dann ein Kennwort für den Web Admin vergeben.
![image](https://user-images.githubusercontent.com/102996011/212191091-cd3cff39-1e81-45e0-aac8-84d72ac7a6fb.png)
Darüber hinaus hat @egal den **Volumio-Player** implementiert :+1:
Dieser ist ebenfalls in der Wiki enthalten.
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardmedia-v20-ab-release-v370
** Ansonsten wie immer den unteren Teil komplett ersetzten. **
Um die neuen Funktionen nutzen zu können, muss ein:
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.8.1.tft
```
durchgeführt werden.
Sollte der BerryDriver noch nicht auf Version 8 sein, dann vorher:
```
Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
```
durchführen...
***
# v3.7.3.1
![image](https://user-images.githubusercontent.com/102996011/212192718-d7f8ca7b-5bc5-4fc4-ba1f-a81028da1f50.png)
**Hotfix**
Unteren Teil ersetzen:
https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts
Das TS-Script legt 2 neue Datenpunkte an:
![image](https://user-images.githubusercontent.com/102996011/212191694-4f80f1e8-f6b6-4fe4-aad1-efb71afb0182.png)
In Weekday oder Month short eintragen. Dann sollte es ein kurzes Datumsformat geben.
EDIT: Funktioniert natürlich auch mit der eu Version. Nur da ist es nicht wirklich erforderlich...
***
# v3.7.3.0
![image](https://user-images.githubusercontent.com/102996011/212191982-f4ad562f-3451-4427-bd6d-01c10bfe70b4.png)
***
# v3.7.0
![image](https://user-images.githubusercontent.com/102996011/212192231-a9052edf-3d16-44a5-be10-6a01a6639b12.png)
Es gibt ein paar Änderungen im oberen Teil des Scriptes (Bitte entsprechend einfügen):
Neue Konstanten:
```
const weatherAdapterInstance: string = 'accuweather.0.'; //Möglich 'accuweather.0.' oder 'daswetter.0.'
const weatherScreensaverTempMinMax: string = 'MinMax'; // Mögliche Werte: 'Min', 'Max' oder 'MinMax'
...
const HMIOn: RGB = { red: 3, green: 169, blue: 244 }; // Blau-On
```
Bitte folgende Parameter (Zeilen) aus der Config löschen:
```
dimmode: 20,
active: 100, //Standard-Brightness TFT
...
timeFormat: '%H:%M', // currently not used
dateFormat: '%A, %d. %B %Y', // currently not used
```
Die Aliase für die cardMedia haben jetzt Repeat und Shuffle als zusätzliche Datenpunkte. Den alten bei alexa2, spotify-premium oder sonos einfach löschen. Das Script wird die wieder neu anlegen.
Version mit Beispielen:
https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts
Version ohne Beispiele:
https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs_without_Examples.ts
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.7.0.tft
```

21
new/Home.md Normal file

@@ -0,0 +1,21 @@
# SONOFF NSPanel Wiki für den ioBroker (Lovelace UI)
## Herzlich willkommen!
![image](https://user-images.githubusercontent.com/102996011/215601019-1e10bacd-8f7f-49a0-8bbf-ab7a38b58743.png)
Hier findest Du die Dokumentation des lovelace-ui für das Sonoff NSPanel, wenn Du als Hausautomatisierungssystem den ioBroker verwendest.
Die Wiki ist untergliedert in verschiedene Bereiche und sie erfüllt nicht den Anspruch der Vollständigkeit.
Ergänzungen sind jederzeit willkommen.
The main documentation for NSPanel Lovelace UI (only Home Assistant) is here: https://docs.nspanel.pky.eu/
LG
Die Crew
![image](https://user-images.githubusercontent.com/102996011/191578765-fca188e1-6b16-4a8f-8e10-63224d2145c2.png)
![image](https://user-images.githubusercontent.com/102996011/194638928-726efb42-5a21-4a98-826d-aede7b726836.png)

@@ -1,657 +0,0 @@
# Einleitung
Hier werden alle Spezialseiten beschrieben mit ihren Parametern, Scripten und Hinweisen.
## Verszeichnis
## Alarm Page
* **Voraussetzung**:
Konfigurationsskript **NsPanelTs.ts** mindestens in der Version: _Version 4.3.3.9_
* **Im IoBroker**
Im IoBroker wird unter **0_userdata.0.NSPanel.Alarm** die Datenpunkte **AlarmPin**, **AlarmState**, **AlarmType**, **PANEL** und **PIN_Failed** benötigt. Diese werden i.d.R. generisch erzeugt, wenn im PageItem der Parameter `autoCreateALias: true` gesetzt ist. Sobald der Code der Alarm Page das erste Mal geladen wird, werden die Datenpunkte angelegt.
![Bildschirmfoto 2023-04-25 um 10 11 30](https://user-images.githubusercontent.com/101348966/234215552-92739704-bf84-4792-bccb-f130ec111fd4.png)
Bei Aktivierung oder Deaktivierung der Alarmanlage wechselt der Status in **arming** oder **pending**. Im Falle einer PIN Falscheingabe gibt es nun auch **triggered**. Da die Verarbeitung der Alarmlogik außerhalb des Skriptes stattfindet, müssen die Datenpunkte auch entsprechend durch das externe Skript weiter getaktet werden
* **Aliase**:
Die vier Datenpunkte **AlarmPin**, **AlarmState**, **AlarmType** und **Pin_Failed** werden in einem Alias vom Typ Feueralarm im Gerätemanager oder Alias Adapter angelegt und dieser Alias wird dann im Konfigurationsskript auf der Alarm-Page verwendet.
Diese werden, mit dem Parameter `autoCreateALias: true` auch automatisch angelegt.
![image](https://user-images.githubusercontent.com/99131208/188514578-43f08178-b8f0-4d09-8e76-02cbe55d5557.png)
Alias-Typ Feueralarm:
ACTUAL = 0_userdata.0.NSXXXX.Alarm.AlarmState
PIN = 0_userdata.0.NSXXXX.Alarm.PIN
TYPE = 0_userdata.0.NSXXXX.Alarm.AlarmType
PANEL = 0_userdata.0.NSXXXX.Alarm.PANEL
PIN_Failed = 0_userdata.0.NSXXXX.Alarm.PIN_Failed
Falls ein Wert im Alias nicht vorhanden ist, dann separat hinzufügen
* **Konfigurationsskript**
**Allgemeine Einstellung**:
Es gibt eine Konstante, die den Pfad definiert, in dem der Ordner Alarm angelgt wird. Default ist **0_userdata.0.NSPanel.**
```typescript
const NSPanel_Alarm_Path = '0_userdata.0.NSPanel.';
//Neuer Pfad für gemeinsame Nutzung durch mehrere Panels
```
**Page Type**: Die Alarmfunktion kann nur auf einer **PageAlarm** verwendet werden
**Beispiel**:
```typescript
let Alarmseite: PageType =
{
"type": "cardAlarm",
"heading": "Alarm",
"subPage": false,
"items": [
{ id: 'alias.0.NSPanel.Alarm',
actionStringArray: ['Vollschutz','Zuhause','Nacht','Besuch','Ausschalten'],
autoCreateALias: true }
]
}
```
**Parameter:**
* id -> Pfad zum Alias Datenpunkt
* actionStringArray -> Möglichkeit eigene Texte zu definieren für die Schutzzustände A1 bis A4 und Text für Deaktivierung
Wenn das Array nicht definiert wird, ziehen die Standardtexte in der eingestellten Sprache.
* autoCreateALias -> bei True werden alle Datenpunkte durch das Script angelegt
**Blockly Testskript**
Nachfolgend ein kurzes Emulationsskript für die Weiterverarbeitung. Diese Logik sollte auch in dein eigenes externes Alarm-Skript übernommen werden.
![image](https://user-images.githubusercontent.com/99131208/188735860-880e0a81-407e-454e-b7d2-05cf8f57acfb.png)
[Zum Blocky](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/Alarm_Page_Testskript.xml)
(Bild & Blockly by @Armilar)
Test-Blockly starten:
Alarm-Code in die cardAlarm eingeben --> Schutz auswählen --> aktiviert
Alarm-Code in die cardAlarm eingeben --> Deaktivieren --> deaktiviert
**Ablauf**:
1. Ablauf Alarm Aktivierung:
PIN eingeben und dann Alarm-Modus (Vollschutz, Zuhause, Nacht oder Besuch) auswählen. Im Datenpunkt AlarmType wird das als A1, A2, A3 oder A4 interpretiert und kann extern weiterverarbeitet werden.
![image](https://user-images.githubusercontent.com/99131208/188736479-e56f574b-5ab3-442b-90d1-384672779ec9.png)
Das Panel wechselt in den Status (AlarmState) "arming" (Icon = gelbes blinkendes Schild/Keine Tastatur)
![image](https://user-images.githubusercontent.com/99131208/188736544-3a3e7e12-b28d-476a-bb97-3b2e9a1cc1e0.png)
Wenn durch das externe Skript (oder Emulator) der Status "armed" in den Datenpunkt AlarmState eingetragen wird (vorausgesetzt das externe Skript findet z.B, keine offenen Fenster) wird das Icon rot:
![image](https://user-images.githubusercontent.com/99131208/188736580-0a8c8a8d-5c6c-40d5-ab64-a305a05da70e.png)
Der AlarmType ist jetzt D1, die Tastatur ist wieder eingeblendet und die card Alarm bereit für die Deaktivierung.
2. Ablauf Alarm Deaktivierung:
PIN-Eingabe zur Deaktivierung und Bestätigung durch den Button "Deaktivieren".
![image](https://user-images.githubusercontent.com/99131208/188736732-324c0cb7-f638-4bf7-80cb-b5b631bc1360.png)
Das Panel vergleicht jetzt den Aktivierungs-PIN mit dem Deaktivierungs-PIN. Stimmen die PIN's überein, dann wird der AlarmState auf "pending" gesetzt.
![image](https://user-images.githubusercontent.com/99131208/188736794-73d106c4-263a-4e4b-9b41-cb53ca1e457f.png)
Das externe Alarm-Skript macht seine restlichen Aufgaben und setzt dann den Status auf "disarmed"
![image](https://user-images.githubusercontent.com/99131208/188736826-ba9c0373-248e-4762-8b11-c5c66d540d8a.png)
Sollte der Pin nicht übereinstimmen, so setzt das Panel den AlarmState "triggered" (Icon blinkt)
![image](https://user-images.githubusercontent.com/99131208/188736871-5d91b8b3-83bf-435b-9346-07c419aee21c.png)
**Neues**:
Neu ist in diesem Zusammenhang der Alias "PIN_Failed" (state/number)
Das TS-Skript zählt die missglückten Anmeldeversuche und trägt sie hier ein. Könnte man also auch für einen Trigger mit Meldung an Telegram nutzen. Außerdem wird bei Fehlerhaften PIN-Eingaben der Datenpunkt AlarmState auf "triggered" gesetzt. Im Panel sieht das dann so aus (das Icon blinkt):
![image](https://user-images.githubusercontent.com/99131208/188736871-5d91b8b3-83bf-435b-9346-07c419aee21c.png)
Status "triggered":
Durch das externe Skript (alternativ der Alarm-Emulator) kann ein Status "triggered" gesetzt werden.
Zum Beispiel wenn der Alarm ausgelöst wurde, Die Deaktivierung der cardAlarm funktioniert somit auch bei dem Status "triggered".
**Erweitertes Blockly mit popupNotify Page**:
Voraussetzung: Ein neuer Datepunkt mit einer vodefinierten PIN.
Definieren der Basiseinstellungen in der gleichnamigen Funktion:
![image](https://user-images.githubusercontent.com/99131208/188738657-6e322211-b5d8-4528-9623-747813c5780f.png)
Es gibt fünf Basiseinstellungen:
* Datenpunkt AlarmPIN: Hier muss der Pfad zu dem Datenpunkt konfiguriert werden, der die original PIN enthält. Gegen diese wird bei der Eingabe vom Skript verglichen. **Wichtig**: Dieser Datenpunkt muss manuell im ioBroker erzeugt werden. Es handelt sich **nicht** um den Datenpunkt **0_userdata.0.NSPanel.Alarm.AlarmPin** **!!!**
* Anzahl_NSPanles: Die Anzahl der NSPanels, die mit dem ioBroker verbunden sind
* Notifay_OnOff: Soll es eine Information mit der **popupNotify Page** geben? wahr=an und falsch=aus.
* Notify_Interaktion: An einem Panel wird eine Eigabe gemacht, manipulation versucht o.ä. Wer soll eine **popupNotify Page** erhalten? jeweils=nur das Panel an dem gerade eine Eingabe erfolgt oder global=alle angeschlossenen Panels
* Notify_Event: Ein Alarm wird ausgelöst, wer soll mit einer **popupNotify Page** informiert werden? jeweils=nur das Panel an dem gerade eine Eingabe erfolgt oder global=alle angeschlossenen Panels
**Hinweis**: Wenn Ihr eine Anpassung am Skript oder an einem Datenpunkt vornehmet, startet bitte das Skript einmal neu.
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/Alarm_Page_Erweitertes_Skript_mit_PopupNotifyPage.xml)
**Hinweis Verknüpfung mit Alarm - Adapter**:
es gibt im Forum ein [Post](https://forum.iobroker.net/post/987357) @danny_v1, wo ein Blockly vorgestellt wird, welches eine Verbindung zum Alarm-Adapter herstellt.
***
# cardUnlock (ab v4.3.3)
Die cardUnlock dient der Absicherung spezieller Seiten, die vor unbefugtem Zugriff (ggfs. Service Pages) geschützt werden sollen:
![image](https://user-images.githubusercontent.com/102996011/221621287-55987efd-143b-4ad0-b7bb-d35d58436b12.png)
> Bei Benutzung der cardUnlock wird die Zielseite aus dem Page-Array herausgenommen. Die Target-Page sollte nicht als Top-Level-Page, sondern als Subpage definiert sein.
im Datenpunkt **0_userdata.0.NSPanel.Unlock.UnlockPin** kann eine PIN vergeben werden. Default wird diese PIN als **0000** definiert.
Erstellung des Alias:
Die cardUnlock wird ab Version `4.3.3.3` mit einem Alias vom Gerätetyp `Feueralarm` automatisch erstellt. Die Erstellung des Alias und der zugehörigen Datenpunkte erfolgt, `sobald die cardUnlock erstmals eingebunden und aufgerufen` wird.
Unter 0_userdata.0... werden folgende Datenpunkte automatisch angelegt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/46f63c7c-154e-4c47-8caa-41bed30bcf70)
Die angelegte PIN-Nummer lässt sich unter "Wert" von "0000" in (siehe Beispiel) z.B. "1234" ändern.
Unter alias.0... wird folgender Alias automatisch angelegt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/39313dbb-3561-4f73-8352-63995ae7b8be)
**Beispiel der Seitenerstellung:** (im Service-Menü enthalten)
```typescript
//Level 0 (if service pages are used with cardUnlock)
let Unlock_Service: PageType =
{
'type': 'cardUnlock',
'heading': 'Service Pages',
'useColor': true,
'items': [{ id: 'alias.0.NSPanel.Unlock',
targetPage: 'NSPanel_Service_SubPage',
autoCreateALias: true }
]
};
```
siehe auch:
* https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC
Da die cardUnlock innerhalb eines "Smart Home" nur einmal erforderlich sein sollte, teilt sie die Datenpunkte mit allen weiteren NSPanels im Haus. Es ist darüber hinaus jedoch auch möglich, `weitere Seiten` über die `cardUnlock` nach dem gleichen Schema vor unbefugten Zugriffen mit dem vergebenen `PIN` zu schützen.
Hierzu muss lediglich eine weitere `Page` vom Typ `cardUnlock` definiert werden und das Ziel `targetPage` auf eine `vorhandene subPage` zeigen:
```typescript
let UnlockPage: PageType =
{
'type': 'cardUnlock',
'heading': 'Titel der Page',
'useColor': true,
'items': [{ id: 'alias.0.NSPanel.Unlock',
targetPage: 'Eine_weitere_Subpage',
autoCreateALias: true }
]
};
```
***
# cardQR
![image](https://user-images.githubusercontent.com/102996011/190121115-436dc34d-3a89-4809-a3c6-2c6132938fd1.png)
Ab Version v4.3.3.11 können die Datenpunkte in 0_userdata.0. und alias.0. automatisch vom Script erstellt werden. Dazu muss dem PageItem zusätzlich der Parameter **autoCreateALias: true** mitgegeben werden. Dann wird beim ersten Aufruf die Datenpunkte erstellt und ihr müsst nur noch die Daten vom WLAN unter 0_userdata.0.... anpassen.
Ihr könnt den Weg auch selber gehen und macht hier einfach weiter.
* **ioBroker:**
Legt Euch unter **0_userdata.0.** einen neuen Datenpunkt vom Typ String an. Dieser Datenpunkt erhält die Daten aus dem sich der QR Code erstellt. Außerdem werden SSID und das Passwort separat auf der Page angezeigt.
Bsp.: WIFI:**T**:WPA;**S**:Test-Guest-SSID;**P**:guest-accecess;**H**:;
T = Verschlüsselung
S = SSID
P = Password
H = Hidden (nur erforderlich wenn euer Wlan versteckt ist)
```typescript
let Seitenname: PageType =
{
"type": "cardQR",
"heading": "Deine Überschrift",
"useColor": true,
"items": [{ id: "alias.0.NSPanel.Guest_Wifi" }] // Beispiel
};
```
**zusätzliche Parameter:**
```typescript
hidePassword: true,
autoCreateALias: true
```
* **Zusatzfunktion**
Es gibt die Möglichkeit auf der QR-Page anstelle des Password ein Schalter einzublenden, mit diesem könnte man das WLAN ein/ausschalten.
Dazu muss unter dem Alias noch ein Datenpunkt (SWITCH) angelegt werden vom Typ boolean. Diesen könnt ihr dann mit eurem WLAN-Schalter verknüpfen.
<img width="1177" alt="image" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/ae50383f-6a43-4798-ba30-c338d31e66d0">
so sieht die QR-Page mit Schalter aus.
![1703254338815-qrmitaus](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/fdd51064-ca5b-4cf0-bc16-f5a391720929)
![1703254356774-qrmitein](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/9253e6a7-c747-473c-9452-54b474e1c202)
* **Bekannte Probleme**
Der QR Code funktioniert auf manchen Android Geräten nicht.
***
# cardThermo
(Erstellung der Alias und "PageItem" siehe [hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#Thermostat-cardThermo-channel-thermostat)
> Für Thermostat und Klimaanlage (Unterschied im zu erstellenden Alias)
![image](https://user-images.githubusercontent.com/102996011/204626750-bbeffe48-c9cd-44bf-8dfd-b90c6c3b7422.png)
![image](https://user-images.githubusercontent.com/102996011/204623942-ca5a1e74-23f7-4b10-a65a-d2397ab67c72.png)
![image](https://user-images.githubusercontent.com/102996011/204626323-a5df2e57-378f-4939-8a45-1a83277e23a2.png)
![image](https://user-images.githubusercontent.com/102996011/204627014-03173d87-22ba-44fb-b07c-40b7be6366ac.png)
***
# cardPower (ab TS-Script v.3.4.1)
![Nextion_Editor_9AYbpowjZS](https://user-images.githubusercontent.com/102996011/194641145-660e1218-f559-4f25-83ca-984cc677e0d8.gif)
Beispiel: Erstellung des "PageItem" und Alias vom Typ "Info"
ohne `alwaysOnDisplay` Parameter (Nach dem Öffnen wird der Screensaver nach eingestellter Zeit aufgeschaltet):
```typescript
let CardPower: PageType =
{
'type': 'cardPower',
'heading': 'Energiefluss',
'items': [
{ id: 'alias.0.NSPanel.cardPower' }
]
};
```
mit `alwaysOnDisplay` Parameter (Die Seite fällt nicht in den Screensaver-Mode, bis auf eine andere Seite navigiert wird)
```typescript
let CardPower: PageType =
{
'type': 'cardPower',
'heading': 'Energiefluss',
'items': [
{ id: 'alias.0.NSPanel.cardPower',
alwaysOnDisplay: true }
]
};
```
Oder im Demo-Modus ohne Alias
```typescript
let CardPowerExample: PageType =
{
'type': 'cardPower',
'heading': 'Energiefluss',
'items': [
{ }
]
};
```
**Parameter:**
Es gibt nur einen einzigen externen Datenpunkt (anzulegen in **0_userdata.0.**), auf den ein Alias vom Typ "**Info**" zugreift. Dieser muss mit einem JSON-Objekt in nachfolgender Struktur befüllt werden. Der Alias-Datenpunkt "**ACTUAL**" sollte hierbei auf diesen neuen Datenpunkt in "**0_userdata.0.**) gebunden sein.
```json
[
{
"id": 0,
"value": 13,
"unit": "kW",
"icon": "emoticon-happy-outline",
"iconColor": 0
},
{
"id": 1,
"value": 3,
"unit": "kW",
"icon": "battery-charging-60",
"iconColor": 10,
"speed": 30
},
{
"id": 2,
"value": 4.7,
"unit": "kW",
"icon": "solar-power-variant",
"iconColor": 3,
"speed": -20
},
{
"id": 3,
"value": 4.3,
"unit": "kW",
"icon": "wind-turbine",
"iconColor": 1,
"speed": -30
},
{
"id": 4,
"value": 3.4,
"unit": "kW",
"icon": "shape",
"iconColor": 10,
"speed": 30
},
{
"id": 5,
"value": 0.1,
"unit": "kW",
"icon": "transmission-tower",
"iconColor": 0,
"speed": 20
},
{
"id": 6,
"value": 2.5,
"unit": "kW",
"icon": "car",
"iconColor": 5,
"speed": 20
}
]
```
_iconColor_ kann einen Wert von 0-10 annehmen und entspricht der ColorScale Grün -> Gelb -> Rot
_speed_ kann positive und negative Werte annehmen, wobei positive Werte den Punkt vom Haus weggehen lassen und negative Werte zum Haus
**cardPower Emulator (Blockly)**
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardPower_Emulator_Skript.xml)
**Kurze Anleitung:**
Der Code dient nur der Orientierung und stellt keine Lösung für die eigene Visualisierung dar. Somit soll z.B. der Aufbau des JSON-Objektes verdeutlicht werden.
Für dieses Beispiel sind in 0_userdata für die 6 Werte in der cardPower entsprechende Datenpunkte (number) manuell angelegt worden:
![image](https://user-images.githubusercontent.com/102996011/194373014-3dfc240c-ce7a-42ca-8d95-925b0a01b19f.png)
Im oberen Teil des Blocklys wird lediglich eine Emulation auf 4 von 6 Datenpunkten je Minute erzeugt. Bei Produktivnutzung sollte dieses Codeobjekt gelöscht (deaktiviert) werden.
![image](https://user-images.githubusercontent.com/102996011/194373795-e3d5e889-10fd-48e6-8a51-cc56c9eadc35.png)
**Produktivnutzung:**
Die Datenpunkte zu den entsprechenden Piktogrammen (id's) sollten mit den jeweiligen eigenen Adapter-Datenpunkten ersetzt werden. Im Beispiel werden folgende Datenpunkte zugewiesen:
1 - Batteriespeicher (Einspeisung/Bezug)
2 - Photovoltaik Ertrag
3 - Windenergieanlage Ertrag
4 - Sämtliche aktiven Verbraucher des Hauses
5 - Energielieferant (Netz-Einspeisung/Netz-Bezug)
6 - Ladestation Verbrauch (E-Car)
Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn eine Entität nicht visualisiert werden soll, so sollte in allen Werten zur id ein leerer String **""** übergeben werden. Beispiel:
```json
{
"id": 3,
"value": "",
"unit": "",
"icon": "",
"iconColor": "",
"speed": ""
},
```
> Das Skript stellt nur eine exemplarische Möglichkeit der Befüllung dar. Es kann frei definiert und auf eigene Bedürfnisse angepasst werden, soll aber keine finale Lösung für jede Smart Home Situation abbilden!
> Ebenso kann die Erstellung des JSON natürlich auch über JavaScript oder TypeScript erfolgen.
Ein kleines einfaches Javascript von @l4rs, für die erzeugung des JSON-String.
```typescript
/**
* generate an JSON for display Power-Card on NSPanel
* Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
* Version: 0.1 - L4rs
*/
schedule("* * * * *", function () {
// Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
var powerCardJson = "0_userdata.0.NSPanel.Energie.PowerCard",
pwr1 = "", // Batterie
pwr2 = Math.round(getState("mqtt.0.SmartHome.Energie.PV.openDTU.114180710360.0.power").val), // Solar
pwr3 = "", // Wind
pwr4 = "", // Verbraucher
pwr5 = Math.round(getState("hm-rpc.0.MEQ0706303.1.POWER").val), // Stromnetz
pwr6 = 0, // Auto
pwrHome = Math.round(pwr5 - pwr2); // Berechnung des Energiefluss anstelle eines Datenpunktes
// Definition der Keys im JSON
var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
// Definition der "Kacheln", inkl. StandardIcon. Es können alle Icon aus dem Iconmapping genutzt werden.
// Kacheln die nicht genutzt werden sollen, müssen wie z.b. item1 formatiert sein
var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0]; // Icon home
var item1 = [1, pwr1, "", "", 0, ""]; // Icon battery-charging-60
var item2 = [2, pwr2, "W", "solar-power-variant-outline", 3, pwr2 > 0 ? -2 : 0]; // Icon solar-power-variant
var item3 = [3, pwr3, "", "", 0, ""]; // Icon wind-turbine
var item4 = [4, pwr4, "", "", 0, ""]; // Icon shape
var item5 = [5, pwr5, "W", "transmission-tower", 10, 10]; // Icon transmission-tower
var item6 = [6, pwr6, "kW", "car-electric-outline", 5, 0]; // Icon car
```
[Zum Script CardPower.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardPower.js)
**Hinweis:** Aktuell erfolgt die Animation gleicher Speed Werte bei der US-P Firmware durch die geänderte Orientierung in umgekehrter Reihenfolge.
***
# cardChart (ab TS-Script v.3.7.0)
> ab Release v3.7.0
![image](https://user-images.githubusercontent.com/102996011/204631969-dfd8b8e9-09d0-45c2-a243-5e047f09ab05.png)
> Für das unten abgebildete Blockly-Script wurden die Werte eines Datenpunktes "sonoff.0.DZG_DWSB20_2H.DZG_Leistung_Aktuell" in einer Influx 2.0 Datenbank gespeichert.
Es wird für das Skript ein Datenpunkt (hier im Beispiel "0_userdata.0.Test.cardChart.txt") benötigt, um das Chart für die cardChart aufzubereiten.
**Alias-Erstellung:**
Es wird lediglich ein Alias vom Gerätetyp "Info" benötigt:
![image](https://user-images.githubusercontent.com/102996011/209008594-36da27fb-cde2-4964-bcd8-3b406f4656cb.png)
**PageItem Beispiel:**
```typescript
let CardChartExample: PageType =
{
"type": "cardChart",
"heading": "Stromzähler L1+L2+L3",
"useColor": true,
"items": [{
id: 'alias.0.NSPanel_1.cardChart',
yAxis: 'Leistung [kW]',
yAxisTicks: [2,4,6,8,10,2,4,6,8,20,2], // leave empty for automatic calculation of the y-axis
onColor: Yellow
}]
};
```
![image](https://user-images.githubusercontent.com/102996011/209009144-1b82e7df-1a58-412a-a304-14a5cf987a4c.png)
## **Blockly für Influx 2.0**
![image](https://user-images.githubusercontent.com/102996011/209006326-c8036709-2235-4ef8-aa14-00798e09fce7.png)
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart.xml)
## **Javascript für History Adapter**
```typescript
var sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
var targetDP = '0_userdata.0.Test.chartTest';
var rangeHours = 24;
var maxXAchsisTicks = 6;
var historyInstance = 'history.0';
on({id: sourceDP, change: "any"}, async function (obj) {
sendTo(historyInstance, 'getHistory', {
id: sourceDP,
options: {
start: Date.now() - (60 * 60 * 1000 * rangeHours),
end: Date.now(),
count: rangeHours,
limit: rangeHours,
aggregate: 'average'
}
}, function (result) {
...
```
[Link zum Script CardChart_History.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart_History.js)
***
# cardLChart (Line Charts ab TS-Script v.3.9.0)
> ab TS-Script Release v3.9.0
![image](https://user-images.githubusercontent.com/102996011/212094993-b78f6a38-aab7-43fd-a6c7-fa4add274b75.png)
**Seitendefinition**
> Der Alias unter der PageItem.id ist ein Alias vom Gerätetyp: **Info**
* type: Für Liniendiagramme muss der Seiten-Typ "cardLChart" sein.
* id: Es wird ein Alias vom Gerätetyp "Info" erstellt, der auf den erzeugenden Datenpunkt des unten aufgeführten Beispiel-Scriptes zeigt.
* yAxis: Bezeichner der Y-Achse
* onColor: Farbe des Graphen
```typescript
let CardLChartExample: PageType =
{
"type": "cardLChart",
"heading": "Büro Temperatur",
"useColor": true,
'items': [{
id: 'alias.0.Haus.Erdgeschoss.Buero.Charts.Temperatur',
yAxis: 'Temperatur [°C]',
onColor: Yellow
}]
};
```
Erklärung zum nachfolgenden Beispiel-TS-Script:
> **Wichtiger Hinweis und Voraussetzungen:**
>Für das Beispiel muss der InfluxDB Adapter installiert sein. Ebenfalls sollte über einen Zeitraum X bereits Sensordaten an eine Infux 2.X DB übertragen worden sein, welche jetzt zum Abruf bereit stehen!
Zu definieren ist der Pfad für den Datenpunkt (im Beispiel 0.userdata.0.NSPanel.Influx2NSPanel.buero_temperature) in den das u.a. TS-Script die aufbereiteten Daten für das NSPanel schreiben kann. Für das Beispiel wurde ein Datenpunkt (deconz.0.Sensors.65.temperature) aus dem DeConz-Adapter mit einem Zigbee-Temperatursensor gewählt.
**Bei Bedarf kann das Query angepasst werden:**
Es ist darauf zu achten, die Anzahl an Werten aus der Datenbank möglichst gering zu halten. Im nachfolgenden Beispiel wurden diese nochmals aggregiert. Die Summe an Zeichen für das Payload an die HMI des NSPanels ist begrenzt. Falls zu viele Werte verarbeitet werden, wird der Payload von der HMI gekürzt und die folge wäre eine schwarze Seite resultierend aus einem Fehlerzustand.
## **TypeScript für Influx2**
```typescript
const Debug = false;
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
const InfluxInstance = 'influxdb.1';
const influxDbBucket = 'iobroker';
const numberOfHoursAgo = 24;
const xAxisTicksEveryM = 60;
const xAxisLabelEveryM = 240;
// this records holds all sensors and their corresponding states which act as the data source for the charts
// add all sensors which are to be displayed in this script, there is no need to use multiple scripts
const sensors : Record<string, string> = {};
/* ↓ Id of the sensor ↓ Id of the data source for the charts */
sensors['deconz.0.Sensors.65.temperature'] = Path + 'buero_temperature';
sensors['deconz.0.Sensors.65.humidity'] = Path + 'buero_luftfeuchte';
// create data source for NsPanel on script startup
Object.keys(sensors).forEach(async x => {
await generateDateAsync(x, sensors[x]);
});
// then listen to the sensors and update the data source states accordingly
on({ id: Object.keys(sensors), change: 'any' }, async function (obj) {
if (!obj.id) {
return;
}
await generateDateAsync(obj.id, sensors[obj.id]);
});
async function generateDateAsync(sensorId: string, dataPointId: string) {
const query =[
'from(bucket: "' + influxDbBucket + '")',
'|> range(start: -' + numberOfHoursAgo + 'h)',
'|> filter(fn: (r) => r["_measurement"] == "' + sensorId + '")',
'|> filter(fn: (r) => r["_field"] == "value")',
'|> drop(columns: ["from", "ack", "q"])',
'|> aggregateWindow(every: 1h, fn: last, createEmpty: false)',
'|> map(fn: (r) => ({ r with _rtime: int(v: r._time) - int(v: r._start)}))',
'|> yield(name: "_result")'].join('');
if (Debug) console.log('Query: ' + query);
const result : any = await sendToAsync(InfluxInstance, 'query', query);
if (result.error) {
console.error(result.error);
return;
}
...
```
[Link zum Script CardLChart_Influx2.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CradLChart_Influx2.js)
## **Javascript für History adapter**
```javascript
const sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
const targetDP = '0_userdata.0.Test.chartTest';
const numberOfHoursAgo = 24; // Period of time in hours which shall be visualized
const xAxisTicksEveryM = 60; // Time after x axis gets a tick in minutes
const xAxisLabelEveryM = 240; // Time after x axis is labeled in minutes
const historyInstance = 'history.0';
const Debug = false;
const maxX = 1420;
const limitMeasurements = 35;
createState(targetDP, "", {
name: 'SensorGrid',
desc: 'Sensor Values [~<time>:<value>]*',
type: 'string',
role: 'value',
});
on({id: sourceDP, change: "any"}, async function (obj) {
sendTo(historyInstance, 'getHistory', {
id: sourceDP,
options: {
start: Date.now() - (numberOfHoursAgo * 60 * 60 * 1000 ), //Time in ms: hours * 60m * 60s * 1000ms
end: Date.now(),
count: limitMeasurements,
limit: limitMeasurements,
aggregate: 'average'
}
}, function (result) {
...
```
[Link zum Script CardLChart_History.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardLChart_History.js)
***

1
new/_Footer.md Normal file

@@ -0,0 +1 @@
<h3 align="center"><img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5e739006-57ba-43fc-bf63-9e4e3d1a949e" width="24" height="24"><a href="#top">&nbsp;&nbsp;Nach oben&nbsp;&nbsp;</a><img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5e739006-57ba-43fc-bf63-9e4e3d1a949e" width="24" height="24"></h3>

@@ -33,9 +33,9 @@
</summary>
<ul>
<li><a href="ioBroker---Basisinstallation#step-f%C3%BCr-step---anleitung">Anleitung für die Installation => Step by Step</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Grundlagen-Seitenconfig">Seiten erstellen</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Grundlagen-Seitenconfig">Grundlagen zur Seitenerstellung</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation">Navigation durch die Seiten</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#waiting-for-content---es-geht-nicht-weiter">FAQ für die Starthilfe</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ">FAQ für die Starthilfe</a></li>
</ul>
</details>
<details open>
@@ -51,25 +51,28 @@
<ul>
<li>Aliase</li>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Table">Aliase Tabelle</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen">Aliase erstellen</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen">Wie werden Aliase erstellt</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Table">Aliase Tabelle</a></li>
</ul>
<li>Cards</li>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#page-beispiele">Card Beispiele</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#page-aufbau">Card Aufbau</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#how-2-page">How to Card bauen</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)">Cards und Variablen</a></li>
</ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver">Screensaver</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC">Service Men&uuml;</a></li>
<li><a href="NSPanel--cardMedia--Der-komplette-Leitfaden">Die cardMedia - kompletter Leitfaden</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardalarm">CardAlarm</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardpower">CardPower</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardqr">CardQR</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardthermo">CardThermo</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardklima">CardKlima</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardchart">CardChart</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardlchart">CardLChart</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/cardunlock">CardUnlock</a></li>
<li><a href="NSPanel--cardMedia--Der-komplette-Leitfaden">Die cardMedia - kompletter Leitfaden</a></li>
<ul>
<li><a href="NSPanel--cardMedia--Der-SONOS-Player">Der SONOS Player</a></li>
<li><a href="NSPanel--cardMedia--Der-Amazon-Alexa-Player">Der Amazon Alexa Player</a></li>
<li><a href="NSPanel--cardMedia--Der-SpotifyPremium-Player">Der Spotify-Premium Player</a></li>
<li><a href="NSPanel--cardMedia--Der-Bose-Soundtouch-Player">Der Bose Soundtouch Player</a></li>
</ul>
</ul></ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver">Screensaver</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC">Service Men&uuml;</a></li>
<li><a href="https://docs.nspanel.pky.eu/icon-cheatsheet.html">Material Design Icons</a></li>
</ul>
</details>

143
new/cardalarm.md Normal file

@@ -0,0 +1,143 @@
# Alarm Page
* **Voraussetzung**:
Konfigurationsskript **NsPanelTs.ts** mindestens in der Version: _Version 4.3.3.9_
* **Im IoBroker**
Im IoBroker wird unter **0_userdata.0.NSPanel.Alarm** die Datenpunkte **AlarmPin**, **AlarmState**, **AlarmType**, **PANEL** und **PIN_Failed** benötigt. Diese werden i.d.R. generisch erzeugt, wenn im PageItem der Parameter `autoCreateALias: true` gesetzt ist. Sobald der Code der Alarm Page das erste Mal geladen wird, werden die Datenpunkte angelegt.
![Bildschirmfoto 2023-04-25 um 10 11 30](https://user-images.githubusercontent.com/101348966/234215552-92739704-bf84-4792-bccb-f130ec111fd4.png)
Bei Aktivierung oder Deaktivierung der Alarmanlage wechselt der Status in **arming** oder **pending**. Im Falle einer PIN Falscheingabe gibt es nun auch **triggered**. Da die Verarbeitung der Alarmlogik außerhalb des Skriptes stattfindet, müssen die Datenpunkte auch entsprechend durch das externe Skript weiter getaktet werden
* **Aliase**:
Die vier Datenpunkte **AlarmPin**, **AlarmState**, **AlarmType** und **Pin_Failed** werden in einem Alias vom Typ Feueralarm im Gerätemanager oder Alias Adapter angelegt und dieser Alias wird dann im Konfigurationsskript auf der Alarm-Page verwendet.
Diese werden, mit dem Parameter `autoCreateALias: true` auch automatisch angelegt.
![image](https://user-images.githubusercontent.com/99131208/188514578-43f08178-b8f0-4d09-8e76-02cbe55d5557.png)
Alias-Typ Feueralarm:
ACTUAL = 0_userdata.0.NSXXXX.Alarm.AlarmState
PIN = 0_userdata.0.NSXXXX.Alarm.PIN
TYPE = 0_userdata.0.NSXXXX.Alarm.AlarmType
PANEL = 0_userdata.0.NSXXXX.Alarm.PANEL
PIN_Failed = 0_userdata.0.NSXXXX.Alarm.PIN_Failed
Falls ein Wert im Alias nicht vorhanden ist, dann separat hinzufügen
* **Konfigurationsskript**
**Allgemeine Einstellung**:
Es gibt eine Konstante, die den Pfad definiert, in dem der Ordner Alarm angelgt wird. Default ist **0_userdata.0.NSPanel.**
```typescript
const NSPanel_Alarm_Path = '0_userdata.0.NSPanel.';
//Neuer Pfad für gemeinsame Nutzung durch mehrere Panels
```
**Page Type**: Die Alarmfunktion kann nur auf einer **PageAlarm** verwendet werden
**Beispiel**:
```typescript
let Alarmseite: PageType =
{
"type": "cardAlarm",
"heading": "Alarm",
"subPage": false,
"items": [
{ id: 'alias.0.NSPanel.Alarm',
actionStringArray: ['Vollschutz','Zuhause','Nacht','Besuch','Ausschalten'],
autoCreateALias: true }
]
}
```
**Parameter:**
* id -> Pfad zum Alias Datenpunkt
* actionStringArray -> Möglichkeit eigene Texte zu definieren für die Schutzzustände A1 bis A4 und Text für Deaktivierung
Wenn das Array nicht definiert wird, ziehen die Standardtexte in der eingestellten Sprache.
* autoCreateALias -> bei True werden alle Datenpunkte durch das Script angelegt
**Blockly Testskript**
Nachfolgend ein kurzes Emulationsskript für die Weiterverarbeitung. Diese Logik sollte auch in dein eigenes externes Alarm-Skript übernommen werden.
![image](https://user-images.githubusercontent.com/99131208/188735860-880e0a81-407e-454e-b7d2-05cf8f57acfb.png)
[Zum Blocky](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/Alarm_Page_Testskript.xml)
(Bild & Blockly by @Armilar)
Test-Blockly starten:
Alarm-Code in die cardAlarm eingeben --> Schutz auswählen --> aktiviert
Alarm-Code in die cardAlarm eingeben --> Deaktivieren --> deaktiviert
**Ablauf**:
1. Ablauf Alarm Aktivierung:
PIN eingeben und dann Alarm-Modus (Vollschutz, Zuhause, Nacht oder Besuch) auswählen. Im Datenpunkt AlarmType wird das als A1, A2, A3 oder A4 interpretiert und kann extern weiterverarbeitet werden.
![image](https://user-images.githubusercontent.com/99131208/188736479-e56f574b-5ab3-442b-90d1-384672779ec9.png)
Das Panel wechselt in den Status (AlarmState) "arming" (Icon = gelbes blinkendes Schild/Keine Tastatur)
![image](https://user-images.githubusercontent.com/99131208/188736544-3a3e7e12-b28d-476a-bb97-3b2e9a1cc1e0.png)
Wenn durch das externe Skript (oder Emulator) der Status "armed" in den Datenpunkt AlarmState eingetragen wird (vorausgesetzt das externe Skript findet z.B, keine offenen Fenster) wird das Icon rot:
![image](https://user-images.githubusercontent.com/99131208/188736580-0a8c8a8d-5c6c-40d5-ab64-a305a05da70e.png)
Der AlarmType ist jetzt D1, die Tastatur ist wieder eingeblendet und die card Alarm bereit für die Deaktivierung.
2. Ablauf Alarm Deaktivierung:
PIN-Eingabe zur Deaktivierung und Bestätigung durch den Button "Deaktivieren".
![image](https://user-images.githubusercontent.com/99131208/188736732-324c0cb7-f638-4bf7-80cb-b5b631bc1360.png)
Das Panel vergleicht jetzt den Aktivierungs-PIN mit dem Deaktivierungs-PIN. Stimmen die PIN's überein, dann wird der AlarmState auf "pending" gesetzt.
![image](https://user-images.githubusercontent.com/99131208/188736794-73d106c4-263a-4e4b-9b41-cb53ca1e457f.png)
Das externe Alarm-Skript macht seine restlichen Aufgaben und setzt dann den Status auf "disarmed"
![image](https://user-images.githubusercontent.com/99131208/188736826-ba9c0373-248e-4762-8b11-c5c66d540d8a.png)
Sollte der Pin nicht übereinstimmen, so setzt das Panel den AlarmState "triggered" (Icon blinkt)
![image](https://user-images.githubusercontent.com/99131208/188736871-5d91b8b3-83bf-435b-9346-07c419aee21c.png)
**Neues**:
Neu ist in diesem Zusammenhang der Alias "PIN_Failed" (state/number)
Das TS-Skript zählt die missglückten Anmeldeversuche und trägt sie hier ein. Könnte man also auch für einen Trigger mit Meldung an Telegram nutzen. Außerdem wird bei Fehlerhaften PIN-Eingaben der Datenpunkt AlarmState auf "triggered" gesetzt. Im Panel sieht das dann so aus (das Icon blinkt):
![image](https://user-images.githubusercontent.com/99131208/188736871-5d91b8b3-83bf-435b-9346-07c419aee21c.png)
Status "triggered":
Durch das externe Skript (alternativ der Alarm-Emulator) kann ein Status "triggered" gesetzt werden.
Zum Beispiel wenn der Alarm ausgelöst wurde, Die Deaktivierung der cardAlarm funktioniert somit auch bei dem Status "triggered".
**Erweitertes Blockly mit popupNotify Page**:
Voraussetzung: Ein neuer Datepunkt mit einer vodefinierten PIN.
Definieren der Basiseinstellungen in der gleichnamigen Funktion:
![image](https://user-images.githubusercontent.com/99131208/188738657-6e322211-b5d8-4528-9623-747813c5780f.png)
Es gibt fünf Basiseinstellungen:
* Datenpunkt AlarmPIN: Hier muss der Pfad zu dem Datenpunkt konfiguriert werden, der die original PIN enthält. Gegen diese wird bei der Eingabe vom Skript verglichen. **Wichtig**: Dieser Datenpunkt muss manuell im ioBroker erzeugt werden. Es handelt sich **nicht** um den Datenpunkt **0_userdata.0.NSPanel.Alarm.AlarmPin** **!!!**
* Anzahl_NSPanles: Die Anzahl der NSPanels, die mit dem ioBroker verbunden sind
* Notifay_OnOff: Soll es eine Information mit der **popupNotify Page** geben? wahr=an und falsch=aus.
* Notify_Interaktion: An einem Panel wird eine Eigabe gemacht, manipulation versucht o.ä. Wer soll eine **popupNotify Page** erhalten? jeweils=nur das Panel an dem gerade eine Eingabe erfolgt oder global=alle angeschlossenen Panels
* Notify_Event: Ein Alarm wird ausgelöst, wer soll mit einer **popupNotify Page** informiert werden? jeweils=nur das Panel an dem gerade eine Eingabe erfolgt oder global=alle angeschlossenen Panels
**Hinweis**: Wenn Ihr eine Anpassung am Skript oder an einem Datenpunkt vornehmet, startet bitte das Skript einmal neu.
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/Alarm_Page_Erweitertes_Skript_mit_PopupNotifyPage.xml)
**Hinweis Verknüpfung mit Alarm - Adapter**:
es gibt im Forum ein [Post](https://forum.iobroker.net/post/987357) @danny_v1, wo ein Blockly vorgestellt wird, welches eine Verbindung zum Alarm-Adapter herstellt.
***

63
new/cardchart.md Normal file

@@ -0,0 +1,63 @@
# cardChart (ab TS-Script v.3.7.0)
> ab Release v3.7.0
![image](https://user-images.githubusercontent.com/102996011/204631969-dfd8b8e9-09d0-45c2-a243-5e047f09ab05.png)
> Für das unten abgebildete Blockly-Script wurden die Werte eines Datenpunktes "sonoff.0.DZG_DWSB20_2H.DZG_Leistung_Aktuell" in einer Influx 2.0 Datenbank gespeichert.
Es wird für das Skript ein Datenpunkt (hier im Beispiel "0_userdata.0.Test.cardChart.txt") benötigt, um das Chart für die cardChart aufzubereiten.
**Alias-Erstellung:**
Es wird lediglich ein Alias vom Gerätetyp "Info" benötigt:
![image](https://user-images.githubusercontent.com/102996011/209008594-36da27fb-cde2-4964-bcd8-3b406f4656cb.png)
**PageItem Beispiel:**
```typescript
let CardChartExample: PageType =
{
"type": "cardChart",
"heading": "Stromzähler L1+L2+L3",
"useColor": true,
"subPage": false,
"parent": undefined,
"items": [{
id: 'alias.0.NSPanel_1.cardChart',
yAxis: 'Leistung [kW]',
yAxisTicks: [2,4,6,8,10,2,4,6,8,20,2], // leave empty for automatic calculation of the y-axis
onColor: Yellow
}]
};
```
![image](https://user-images.githubusercontent.com/102996011/209009144-1b82e7df-1a58-412a-a304-14a5cf987a4c.png)
## **Blockly für Influx 2.0**
![image](https://user-images.githubusercontent.com/102996011/209006326-c8036709-2235-4ef8-aa14-00798e09fce7.png)
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart.xml)
## **Javascript für History Adapter**
```typescript
var sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
var targetDP = '0_userdata.0.Test.chartTest';
var rangeHours = 24;
var maxXAchsisTicks = 6;
var historyInstance = 'history.0';
on({id: sourceDP, change: "any"}, async function (obj) {
sendTo(historyInstance, 'getHistory', {
id: sourceDP,
options: {
start: Date.now() - (60 * 60 * 1000 * rangeHours),
end: Date.now(),
count: rangeHours,
limit: rangeHours,
aggregate: 'average'
}
}, function (result) {
...
```
[Link zum Script CardChart_History.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardChart_History.js)

51
new/cardgrid-entity.md Normal file

@@ -0,0 +1,51 @@
# cardEntities
![image](https://user-images.githubusercontent.com/102996011/190120141-13da0024-261d-4cd9-a104-13416c224004.png)
4 vertikal angeordnete Steuerelemente (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
```typescript
let Seitenname: PageType =
{
"type": "cardEntities",
"heading": "Deine Überschrift",
"useColor": true,
"subPage": false,
"parent": undefined,
"items": [
{ id: "Dein_Erstellter_Alias_1", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_2", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_3", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_4", Weitere Parameter siehe Alias Definition }
]
};
```
# cardGrid
![image](https://user-images.githubusercontent.com/102996011/216006497-24b09a3c-28a9-41f0-b822-2b8e56491703.png)
![image](https://user-images.githubusercontent.com/102996011/216006611-32155c9c-84ba-48eb-8b07-2485d80eb99b.png)
6 horizontal angeordnete Steuerelemente (in 2 Reihen je 3 Steuerelemente) (Erstellung der "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
```typescript
let Seitenname: PageType =
{
"type": "cardGrid",
"heading": "Deine Überschrift",
"useColor": true,
"subPage": false,
"parent": undefined,
"items": [
{ id: "Dein_Erstellter_Alias_1", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_2", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_3", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_4", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_5", Weitere Parameter siehe Alias Definition },
{ id: "Dein_Erstellter_Alias_6", Weitere Parameter siehe Alias Definition }
]
};
```
***

199
new/cardklima.md Normal file

@@ -0,0 +1,199 @@
Die Dokumentation erfolgt auf Basis von Test-Datenpunkten unter 0_userdata.0. , da kein physisches Testgerät via Adapter zur Verfügung stand.
## cardThermo als "Klimaanlage" im Live-Betrieb
![Nextion_Editor_y0GuTvMgd0](https://github.com/user-attachments/assets/32cb3891-1d9b-43a6-b88f-37194149a4bc)
## Test-Datenpunkte unter 0_userdata.0...
Diese Dokumentation der Klimaanlage bezieht sich auf den vollen Funktionsumfang der cardThermo im Zusammenspiel mit einem Alias-Channel vom Typ Klimaanlage. In der Realität sind wahrscheinlich nicht alle Datenpunkte erforderlich, da das physische Klima-Gerät ggfs. nicht alle Funktionalitäten bereitstellt. Im Alias werden somit die Original-Datenpunkte des jeweiligen Klima-Adapters zugeordnet.
![image](https://github.com/user-attachments/assets/f42cdc70-5d5d-4d4a-b7f3-2065fd52cd61)
## Alias vom Channel Typ "Klimaanlage"
![image](https://github.com/user-attachments/assets/0fea258e-de90-456b-a9c9-1e0c87f738ef)
* ACTUAL ist die aktuelle IST-Raumtemperatur und kann auf den internen Temperatur-Sensor-Datenpunkt des NSPanels, oder auf einen externen Temperatur-Sensor Datenpunkt zeigen.
![image](https://github.com/user-attachments/assets/d127f8a0-2142-470b-a00f-715ccd895845)
* SET ist die SOLL-Temperatur
![image](https://github.com/user-attachments/assets/2a5c6b45-fe54-4c19-be6e-9f3e3c532a62)
* ACTUAL2 (Definition weiter unten beschrieben) ist ein optionaler 2. Setpoint
![image](https://github.com/user-attachments/assets/04c8b379-44cd-423a-b632-ea0ce87507b8)
Wenn ACTUAL2 in der Variable definiert wurde, dann wird der 2. Setpoint ebenfalls in der cardThermo angezeigt
Die "numerischen" Datenpunkte für das Popup können über das "+" Symbol im Gerätemanager erzeugt werden:
![image](https://github.com/user-attachments/assets/e47d9e35-ddae-47cf-bf62-5c3592e66780)
Beim Klick auf einen Wert wird der Wert des Array,s 0, 1, 2, 3, 4, etc. an den Datenpunkt übergeben
Außerdem kann bei Bedarf eine weitere Setpoint-Temperatur definiert werden. Hierzu ist dann ebenfalls ein optionaler Datenpunkt mit dem "+" Symbol anzulegen. Dieser muss als **ACTUAL2** benannt werden.
## Funktionalität der Icon-Leiste
![image](https://github.com/user-attachments/assets/4c1216d0-e31a-45e4-a640-61d33989a5c7)
Im Gerätemanager wird im Alias der Datenpunkt "MODE" über das Stift-Symbol definiert.
![image](https://github.com/user-attachments/assets/ca924b1b-5882-4b31-8d71-a0845dd0de3a)
Sollte der Adapter des Klimagerätes über einen "Mode"-Datenpunkt verfügen, so kann dieser hier mit den verfügbaren Funktionen synchronisiert werden.
![image](https://github.com/user-attachments/assets/77eccb8c-4499-4e40-9d12-0b2db6f70cf2)
Auch wenn der Adapter keinen Mode-Datenpunkt bereitstellt, so kann ein manuell angelegter Datenpunkt unter 0_userdata.0... genutzt werden und mit einem separaten Blockly/Javascript entsprechende Datenpunkte des Adapters steuern.
> [!IMPORTANT]
> Es sind nur die Bezeichner **OFF**, **AUTO**, **COOL**, **HEAT**, **ECO**, **FAN_ONLY** und **DRY** erlaubt!
>
> Icons können entsprechend verschoben und nicht vorhandene Funktionen entfernt werden. Eine Umbenennung von z.B. **COOL** in **COLD **wird keine Funktionaltät für das Icon haben.
### Beispiel:
![image](https://github.com/user-attachments/assets/e7f6e28b-e947-498d-989f-8d21046f8e56)
wäre somit:
![image](https://github.com/user-attachments/assets/21392765-54f9-40b9-b8da-e6bf62ce0817)
Der Datenpunkt erhält den numerischen Wert der Aufzählung, Daher ist der korrekte Name wie **COLD** nicht relevant. Das Script benötigt jedoch den Namen **COOL** zur Darstellung des Icons.
## Die cardThermo Definition im NSPanel-Script
**Minimale Definition**
```typescript
let Test_Klimaanlage: PageType =
{
'type': 'cardThermo',
'heading': 'Test Klimaanlage',
'items': [{
id: 'alias.0.NSPanel_1.TestKlimaanlage',
minValue: 50,
maxValue: 250,
stepValue: 5,
}]
};
```
**Maximale Definition**
```typescript
let Test_Klimaanlage: PageType =
{
'type': 'cardThermo',
'heading': 'Test Klimaanlage',
'items': [{
id: 'alias.0.NSPanel_1.TestKlimaanlage',
minValue: 50,
maxValue: 250,
stepValue: 5,
iconArray: ['power-standby','air-conditioner','snowflake','fire','alpha-e-circle-outline','fan','water-percent','swap-vertical-bold'],
popupThermoMode1: ['Auto','0','1','2','3'],
popupThermoMode2: ['Auto','0','1','2','3','4','5'],
popupThermoMode3: ['Auto','Manual','Boost',],
popUpThermoName: ['Schwenk-Modus', 'Speed', 'Temperatur'],
icon: 'fan',
setThermoAlias: ['popupKlima_Mode_1','popupKlima_Mode_2','popupKlima_Mode_3'],
//setThermoDestTemp2: 'ACTUAL2'
}]
};
```
type: muss 'cardThermo' sein
heading: frei definierbare Überschrift
items
Standard-Items:
* id: der im Gerätemenager erstellt Alias vom Channel-Typ "Klimaanlage"
* minValue: die minimal zu schaltende Soll-Temperatur der Klimatisierung (multipliziert mit 10 --> 5°C = 50)
* maxValue: die maximal zu schaltende Soll-Temperatur der Klimatisierung (multipliziert mit 10 --> 25°C = 250)
* stepValue: die Schrittfolge in der die Soll-Temperatur gesteuert wird (multipliziert mit 10 --> 0,5°C = 5)
* iconArray: (optional) in diesem Array können abweichende Icons definiert werden
![image](https://github.com/user-attachments/assets/761cc8a4-f6cc-441f-9f40-7677e7017062)
Popup:
![image](https://github.com/user-attachments/assets/361bd3c0-e539-44ca-9bca-4eb4649d7c65)
* popupThermoMode1: (optional) falls verwendet, werden unter der Solltemperatur 3 Punkte visualisiert über die ein Popup aufgeschaltet wird. Innerhalb dieses Arrays werden die möglichen Zustände definiert.
* popupThermoMode2: (optional) falls verwendet, werden unter der Solltemperatur 3 Punkte visualisiert über die ein Popup aufgeschaltet wird. Innerhalb dieses Arrays werden die möglichen Zustände definiert.
* popupThermoMode3: (optional) falls verwendet, werden unter der Solltemperatur 3 Punkte visualisiert über die ein Popup aufgeschaltet wird. Innerhalb dieses Arrays werden die möglichen Zustände definiert.
* popUpThermoName: Überschriften der 3 möglichen Zeilen im Popup der cardThermo
* icon: Das icon, welches im Popup erscheint
* setThermoAlias: Die "numerischen" Datenpunkte, welche im Alias optional definiert wurden
Optionaler Setpoint
* setThermoDestTemp2: (optional) falls definiert, werden 2 Soll-Temperaturen visualisiert
## Separates Script zum Steuern spezieller Datenpunkte
Beispiel Blockly:
![image](https://github.com/user-attachments/assets/765c3c5f-e5e3-467c-844d-1da3dcb94bf3)
Beispiel JS:
```typescript
// Z.B. für die Mode's aus der Iconleiste
on({ id: [].concat(['0_userdata.0.Test.Klimaanlage.Mode']), change: 'ne' }, async (obj) => {
switch ((obj.state ? obj.state.val : '')) {
case 0:
// mache etwas wenn das 1. Icon gedrückt wurde
// setze z.B. DatenpunktXY auf true oder schreibe eine abweichende Zahl in einen Datenpunkt...
break;
case 1:
// mache etwas wenn das 2. Icon gedrückt wurde
break;
case 2:
// mache etwas wenn das 3. Icon gedrückt wurde
// schreibe z.B. "cold" in einen Datenpunkt
break;
case 3:
// usw.
break;
}
});
```
oder in Kombination mit dem Popup:
Blockly:
![image](https://github.com/user-attachments/assets/9d599e43-6f5e-4ef9-84bf-e3413945bd4d)
JS:
```typescript
// Z.B. für die Mode's aus der Iconleiste
on({ id: [].concat(['0_userdata.0.Test.Klimaanlage.Mode']), change: 'ne' }, async (obj) => {
switch ((obj.state ? obj.state.val : '')) {
case 0:
// mache etwas wenn das 1. Icon gedrückt wurde
break;
case 1:
// mache etwas wenn das 2. Icon gedrückt wurde
break;
case 2:
// mache etwas wenn das 3. Icon gedrückt wurde
break;
case 3:
// usw.
break;
}
});
// Auswerten des ersten Popup Wertes in der obersten
// Popup-Zeile
on({ id: [].concat(['0_userdata.0.Test.Klimaanlage.popupKlima_Mode_1']), change: 'ne' }, async (obj) => {
switch ((obj.state ? obj.state.val : '')) {
case 0:
// mache etwas wenn der 1. Wert gewählt wurde
break;
case 1:
// mache etwas wenn der 2. Wert gewählt wurde
break;
case 2:
// mache etwas wenn der 3. Wert gewählt wurde
break;
case 3:
// usw.
break;
}
});
```

132
new/cardlchart.md Normal file

@@ -0,0 +1,132 @@
# cardLChart (Line Charts ab TS-Script v.3.9.0)
> ab TS-Script Release v3.9.0
![image](https://user-images.githubusercontent.com/102996011/212094993-b78f6a38-aab7-43fd-a6c7-fa4add274b75.png)
**Seitendefinition**
> Der Alias unter der PageItem.id ist ein Alias vom Gerätetyp: **Info**
* type: Für Liniendiagramme muss der Seiten-Typ "cardLChart" sein.
* id: Es wird ein Alias vom Gerätetyp "Info" erstellt, der auf den erzeugenden Datenpunkt des unten aufgeführten Beispiel-Scriptes zeigt.
* yAxis: Bezeichner der Y-Achse
* onColor: Farbe des Graphen
```typescript
let CardLChartExample: PageType =
{
"type": "cardLChart",
"heading": "Büro Temperatur",
"useColor": true,
'items': [{
id: 'alias.0.Haus.Erdgeschoss.Buero.Charts.Temperatur',
yAxis: 'Temperatur [°C]',
onColor: Yellow
}]
};
```
Erklärung zum nachfolgenden Beispiel-TS-Script:
> **Wichtiger Hinweis und Voraussetzungen:**
>Für das Beispiel muss der InfluxDB Adapter installiert sein. Ebenfalls sollte über einen Zeitraum X bereits Sensordaten an eine Infux 2.X DB übertragen worden sein, welche jetzt zum Abruf bereit stehen!
Zu definieren ist der Pfad für den Datenpunkt (im Beispiel 0.userdata.0.NSPanel.Influx2NSPanel.buero_temperature) in den das u.a. TS-Script die aufbereiteten Daten für das NSPanel schreiben kann. Für das Beispiel wurde ein Datenpunkt (deconz.0.Sensors.65.temperature) aus dem DeConz-Adapter mit einem Zigbee-Temperatursensor gewählt.
**Bei Bedarf kann das Query angepasst werden:**
Es ist darauf zu achten, die Anzahl an Werten aus der Datenbank möglichst gering zu halten. Im nachfolgenden Beispiel wurden diese nochmals aggregiert. Die Summe an Zeichen für das Payload an die HMI des NSPanels ist begrenzt. Falls zu viele Werte verarbeitet werden, wird der Payload von der HMI gekürzt und die folge wäre eine schwarze Seite resultierend aus einem Fehlerzustand.
## **TypeScript für Influx2**
```typescript
const Debug = false;
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
const InfluxInstance = 'influxdb.1';
const influxDbBucket = 'iobroker';
const numberOfHoursAgo = 24;
const xAxisTicksEveryM = 60;
const xAxisLabelEveryM = 240;
// this records holds all sensors and their corresponding states which act as the data source for the charts
// add all sensors which are to be displayed in this script, there is no need to use multiple scripts
const sensors : Record<string, string> = {};
/* ↓ Id of the sensor ↓ Id of the data source for the charts */
sensors['deconz.0.Sensors.65.temperature'] = Path + 'buero_temperature';
sensors['deconz.0.Sensors.65.humidity'] = Path + 'buero_luftfeuchte';
// create data source for NsPanel on script startup
Object.keys(sensors).forEach(async x => {
await generateDateAsync(x, sensors[x]);
});
// then listen to the sensors and update the data source states accordingly
on({ id: Object.keys(sensors), change: 'any' }, async function (obj) {
if (!obj.id) {
return;
}
await generateDateAsync(obj.id, sensors[obj.id]);
});
async function generateDateAsync(sensorId: string, dataPointId: string) {
const query =[
'from(bucket: "' + influxDbBucket + '")',
'|> range(start: -' + numberOfHoursAgo + 'h)',
'|> filter(fn: (r) => r["_measurement"] == "' + sensorId + '")',
'|> filter(fn: (r) => r["_field"] == "value")',
'|> drop(columns: ["from", "ack", "q"])',
'|> aggregateWindow(every: 1h, fn: last, createEmpty: false)',
'|> map(fn: (r) => ({ r with _rtime: int(v: r._time) - int(v: r._start)}))',
'|> yield(name: "_result")'].join('');
if (Debug) console.log('Query: ' + query);
const result : any = await sendToAsync(InfluxInstance, 'query', query);
if (result.error) {
console.error(result.error);
return;
}
...
```
[Link zum Script CardLChart_Influx2.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CradLChart_Influx2.js)
## **Javascript für History adapter**
```javascript
const sourceDP = 'alias.0.Wohnzimmer.Heizung.ACTUAL';
const targetDP = '0_userdata.0.Test.chartTest';
const numberOfHoursAgo = 24; // Period of time in hours which shall be visualized
const xAxisTicksEveryM = 60; // Time after x axis gets a tick in minutes
const xAxisLabelEveryM = 240; // Time after x axis is labeled in minutes
const historyInstance = 'history.0';
const Debug = false;
const maxX = 1420;
const limitMeasurements = 35;
createState(targetDP, "", {
name: 'SensorGrid',
desc: 'Sensor Values [~<time>:<value>]*',
type: 'string',
role: 'value',
});
on({id: sourceDP, change: "any"}, async function (obj) {
sendTo(historyInstance, 'getHistory', {
id: sourceDP,
options: {
start: Date.now() - (numberOfHoursAgo * 60 * 60 * 1000 ), //Time in ms: hours * 60m * 60s * 1000ms
end: Date.now(),
count: limitMeasurements,
limit: limitMeasurements,
aggregate: 'average'
}
}, function (result) {
...
```
[Link zum Script CardLChart_History.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardLChart_History.js)

172
new/cardpower.md Normal file

@@ -0,0 +1,172 @@
# cardPower (ab TS-Script v.3.4.1)
![Nextion_Editor_9AYbpowjZS](https://user-images.githubusercontent.com/102996011/194641145-660e1218-f559-4f25-83ca-984cc677e0d8.gif)
Es gibt nur einen einzigen externen Datenpunkt (anzulegen in **0_userdata.0.**), auf den ein Alias vom Typ "**Info**" zugreift. Dieser muss mit einem JSON-Objekt in nachfolgender Struktur befüllt werden. Der Alias-Datenpunkt "**ACTUAL**" sollte hierbei auf diesen neuen Datenpunkt in "**0_userdata.0.**) gebunden sein.
```json
[
{
"id": 0,
"value": 13,
"unit": "kW",
"icon": "emoticon-happy-outline",
"iconColor": 0
},
{
"id": 1,
"value": 3,
"unit": "kW",
"icon": "battery-charging-60",
"iconColor": 10,
"speed": 30
},
{
"id": 2,
"value": 4.7,
"unit": "kW",
"icon": "solar-power-variant",
"iconColor": 3,
"speed": -20
},
{
"id": 3,
"value": 4.3,
"unit": "kW",
"icon": "wind-turbine",
"iconColor": 1,
"speed": -30
},
{
"id": 4,
"value": 3.4,
"unit": "kW",
"icon": "shape",
"iconColor": 10,
"speed": 30
},
{
"id": 5,
"value": 0.1,
"unit": "kW",
"icon": "transmission-tower",
"iconColor": 0,
"speed": 20
},
{
"id": 6,
"value": 2.5,
"unit": "kW",
"icon": "car",
"iconColor": 5,
"speed": 20
}
]
```
_iconColor_ kann einen Wert von 0-10 annehmen und entspricht der ColorScale Grün -> Gelb -> Rot
_speed_ kann positive und negative Werte annehmen, wobei positive Werte den Punkt vom Haus weggehen lassen und negative Werte zum Haus
Mit dem Zusatzparameter `alwaysOnDisplay` fällt die Seite nicht in den Screensaver-Mode zurück. Erst wenn auf eine andere Seite navigiert wird, wird der Screensaver wieder aktiv.
```typescript
let CardPower: PageType =
{
'type': 'cardPower',
'heading': 'Energiefluss',
'items': [
{ id: 'alias.0.NSPanel.cardPower',
alwaysOnDisplay: true }
]
};
```
Wenn ihr das pageItem leer lässt, startet die Seite mit einem Demomodus.
```typescript
let CardPowerExample: PageType =
{
'type': 'cardPower',
'heading': 'Energiefluss',
'items': [
{ }
]
};
```
**cardPower Emulator (Blockly)**
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardPower_Emulator_Skript.xml)
**Kurze Anleitung:**
Der Code dient nur der Orientierung und stellt keine Lösung für die eigene Visualisierung dar. Somit soll z.B. der Aufbau des JSON-Objektes verdeutlicht werden.
Für dieses Beispiel sind in 0_userdata für die 6 Werte in der cardPower entsprechende Datenpunkte (number) manuell angelegt worden:
![image](https://user-images.githubusercontent.com/102996011/194373014-3dfc240c-ce7a-42ca-8d95-925b0a01b19f.png)
Im oberen Teil des Blocklys wird lediglich eine Emulation auf 4 von 6 Datenpunkten je Minute erzeugt. Bei Produktivnutzung sollte dieses Codeobjekt gelöscht (deaktiviert) werden.
![image](https://user-images.githubusercontent.com/102996011/194373795-e3d5e889-10fd-48e6-8a51-cc56c9eadc35.png)
**Produktivnutzung:**
Die Datenpunkte zu den entsprechenden Piktogrammen (id's) sollten mit den jeweiligen eigenen Adapter-Datenpunkten ersetzt werden. Im Beispiel werden folgende Datenpunkte zugewiesen:
1 - Batteriespeicher (Einspeisung/Bezug)
2 - Photovoltaik Ertrag
3 - Windenergieanlage Ertrag
4 - Sämtliche aktiven Verbraucher des Hauses
5 - Energielieferant (Netz-Einspeisung/Netz-Bezug)
6 - Ladestation Verbrauch (E-Car)
Für eine abweichende Darstellung ist das JSON entsprechend zu befüllen. Wenn eine Entität nicht visualisiert werden soll, so sollte in allen Werten zur id ein leerer String **""** übergeben werden. Beispiel:
```json
{
"id": 3,
"value": "",
"unit": "",
"icon": "",
"iconColor": "",
"speed": ""
},
```
> Das Skript stellt nur eine exemplarische Möglichkeit der Befüllung dar. Es kann frei definiert und auf eigene Bedürfnisse angepasst werden, soll aber keine finale Lösung für jede Smart Home Situation abbilden!
> Ebenso kann die Erstellung des JSON natürlich auch über JavaScript oder TypeScript erfolgen.
Ein kleines einfaches Javascript von @l4rs, für die erzeugung des JSON-String.
```typescript
/**
* generate an JSON for display Power-Card on NSPanel
* Source: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341
* Version: 0.1 - L4rs
*/
schedule("* * * * *", function () {
// Definition der Datenpunkte für das JSON der POWER-Card und der anzuzeigenden Leistungswerte
var powerCardJson = "0_userdata.0.NSPanel.Energie.PowerCard",
pwr1 = "", // Batterie
pwr2 = Math.round(getState("mqtt.0.SmartHome.Energie.PV.openDTU.114180710360.0.power").val), // Solar
pwr3 = "", // Wind
pwr4 = "", // Verbraucher
pwr5 = Math.round(getState("hm-rpc.0.MEQ0706303.1.POWER").val), // Stromnetz
pwr6 = 0, // Auto
pwrHome = Math.round(pwr5 - pwr2); // Berechnung des Energiefluss anstelle eines Datenpunktes
// Definition der Keys im JSON
var keys = ["id", "value", "unit", "icon", "iconColor", "speed"];
// Definition der "Kacheln", inkl. StandardIcon. Es können alle Icon aus dem Iconmapping genutzt werden.
// Kacheln die nicht genutzt werden sollen, müssen wie z.b. item1 formatiert sein
var home = [0, pwrHome, "W", "home-lightning-bolt-outline", 0]; // Icon home
var item1 = [1, pwr1, "", "", 0, ""]; // Icon battery-charging-60
var item2 = [2, pwr2, "W", "solar-power-variant-outline", 3, pwr2 > 0 ? -2 : 0]; // Icon solar-power-variant
var item3 = [3, pwr3, "", "", 0, ""]; // Icon wind-turbine
var item4 = [4, pwr4, "", "", 0, ""]; // Icon shape
var item5 = [5, pwr5, "W", "transmission-tower", 10, 10]; // Icon transmission-tower
var item6 = [6, pwr6, "kW", "car-electric-outline", 5, 0]; // Icon car
```
[Zum Script CardPower.js](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardPower.js)

47
new/cardqr.md Normal file

@@ -0,0 +1,47 @@
# cardQR
![image](https://user-images.githubusercontent.com/102996011/190121115-436dc34d-3a89-4809-a3c6-2c6132938fd1.png)
Ab Version v4.3.3.11 können die Datenpunkte in 0_userdata.0. und alias.0. automatisch vom Script erstellt werden. Dazu muss dem PageItem zusätzlich der Parameter **autoCreateALias: true** mitgegeben werden. Dann wird beim ersten Aufruf die Datenpunkte erstellt und ihr müsst nur noch die Daten vom WLAN unter 0_userdata.0.xxxxx.Daten anpassen.
Ihr könnt den Weg auch selber gehen und macht hier einfach weiter.
* **ioBroker:**
Legt Euch unter **0_userdata.0.** einen neuen Datenpunkt vom Typ String an. Dieser Datenpunkt erhält die Daten aus dem sich der QR Code erstellt. Außerdem werden SSID und das Passwort separat auf der Page angezeigt.
Bsp.: WIFI:**T**:WPA;**S**:Test-Guest-SSID;**P**:guest-accecess;**H**:;
T = Verschlüsselung
S = SSID
P = Password
H = Hidden (nur erforderlich wenn euer Wlan versteckt ist)
```typescript
let Seitenname: PageType =
{
"type": "cardQR",
"heading": "Deine Überschrift",
"useColor": true,
"items": [{ id: "alias.0.NSPanel.Guest_Wifi" }] // Beispiel
};
```
**zusätzliche Parameter:**
```typescript
hidePassword: true,
autoCreateALias: true
```
* **Zusatzfunktion**
Es gibt die Möglichkeit auf der QR-Page anstelle des Password ein Schalter einzublenden, mit diesem könnte man das WLAN ein/ausschalten.
Dazu muss unter dem Alias noch ein Datenpunkt (SWITCH) angelegt werden vom Typ boolean. Diesen könnt ihr dann mit eurem WLAN-Schalter verknüpfen. Wenn `autoCreateALias`genutz wird, wird SWITCH auch automatisch erstellt. Ihr müsst den Alias im Anschluss nur mit dem richtigen Datenpunkt verbinden oder nutzt den automatisch erstellten Datenpunkt unter 0_userdata.0.xxxxx.switch für ein Script.
<img width="1177" alt="image" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/ae50383f-6a43-4798-ba30-c338d31e66d0">
so sieht die QR-Page mit Schalter aus.
![1703254338815-qrmitaus](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/fdd51064-ca5b-4cf0-bc16-f5a391720929)
![1703254356774-qrmitein](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/9253e6a7-c747-473c-9452-54b474e1c202)
* **Bekannte Probleme**
Der QR Code funktioniert auf manchen Android Geräten nicht.
***

73
new/cardthermo.md Normal file

@@ -0,0 +1,73 @@
### Thermostat cardThermo (channel thermostat)
![image](https://user-images.githubusercontent.com/102996011/191052850-06276337-1000-4eb6-b010-5f6d49fd0e24.png)
## Alias erzeugen - Schritt 1 - Tab "Allgemein"
Der erste Schritt in der Alias Erstellung mit dem "Geräte verwalten"-Adapter ist fast immer der gleiche.
Es wird über die "+" Schaltfläche folgender Dialog aufgeschaltet:
![image](https://user-images.githubusercontent.com/102996011/189480182-02d50b01-53ba-4c83-baa6-9bd5f10bc671.png)
Jetzt gibst vergibst du einen "sprechenden Namen" für den Alias in der Zeile "Gerätename" und wählst **Thermostat** unter Gerätetyp aus. (Auswahlliste wird aufgeschaltet und beinhaltet auch noch weitere Typen als im Bild gezeigt (Momentaufnahme)):
![image](https://user-images.githubusercontent.com/102996011/189480322-0441c5b7-fc7e-4fd4-9920-72915753a802.png)
Die Zeilen Funktion und Raum können ebenfalls ausgewählt werden, haben jedoch keinen Einfluss auf die Funktionalität des NSPAnel's.
Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191053643-75545e7e-995e-4a28-88c3-87268dcbb44d.png)
Im unteren Teil können ebenfalls Indikatoren eingeblendet werden:
![image](https://user-images.githubusercontent.com/102996011/191338688-e5cf4b91-2385-4f09-8523-e52ed797b9be.png)
z.B.
![image](https://user-images.githubusercontent.com/102996011/191054046-4d3279f1-6dc8-484d-b70f-9dd65ae9929b.png)
oder
![image](https://user-images.githubusercontent.com/102996011/191054242-dc679425-592e-490a-9383-73030a9e20e5.png)
etc.
Wenn der Thermostat über Mode verfügt und dieser auch genutzt werden soll:
![image](https://user-images.githubusercontent.com/102996011/191054557-89060dca-825a-4d38-b756-c67eb2fbe7ea.png)
Mode wird über externe Datenpunkte gesteuert. Hierzu legst du dir unter 0_userdate.0. einen Ordner deiner Wahl an. In diesem Ordner können jetzt bis zu 5 Datenpunkte (Alle vom Typ boolean (true/false)) angelegt werden:
* AUTOMATIC
* MANUAL
* PARTY
* VACATION
* BOOST
Im Alias können "BOOST" und "PARTY" (sofern gewünscht) bereits den neu erstellten Datenpunkten zugewiesen werden:
![image](https://user-images.githubusercontent.com/102996011/191055917-bf05d8a1-fc3f-4c4e-a4a8-da5aafcf1317.png)
Die Datenpunkte AUTOMATIC, MANUAL und VACATION können nicht sofort zugewiesen werden, da die ALIAS-Definition diese Objekte nicht vorsieht. In diesem Fall kannst du diese selbst hinzufügen und im Anschluss deine erstellten Datenpunkten zuordnen:
![image](https://user-images.githubusercontent.com/102996011/191056534-c33656e6-178c-4f95-a47a-4c609f5236f1.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191056980-98c196cf-7991-4d33-978b-b19b31403477.png)
> Es müssen nicht alle 5 Modi vorhanden sein. Das Skript liest die vorhandenen Modi ein und verarbeitet auch nur diese
> Insgesamt stehen Icons im unteren Bereich zur Verfügung. Somit ist es nicht möglich 5 Modi-Icons und 7 Indikatoren-Icons gleichzeitig zu visualisieren. Die Modi (falls im Alias definiert) werden zuerst visualisiert (vorne) und dann, falls verfügbar mit Indikatoren (sofern im Alias definiert) auf insgesamt 8 Icons aufgefüllt.
Das zugehörige PageItem im TypeScript:
```typescript
let Bad_Thermostat: PageType =
{
'type': 'cardThermo',
'heading': 'Bad',
'subPage': true,
'parent': Startseite,
'items': [/*PageItem*/{
id: 'alias.0.NSPanel.Thermostat',
minValue: 100,
maxValue: 300,
stepValue: 5
}]
};
```
**Parameter:**
name: Vom Alias abweichender Name
minValue: Minimaltemperatur Beispiel 5°C = 50
maxValue: Minimaltemperatur Beispiel 30°C = 300
stepValue: Schrittweite Beispiel 0,5°C = 5
***

53
new/cardunlock.md Normal file

@@ -0,0 +1,53 @@
# cardUnlock (ab v4.3.3)
Die cardUnlock dient der Absicherung spezieller Seiten, die vor unbefugtem Zugriff (ggfs. Service Pages) geschützt werden sollen:
![image](https://user-images.githubusercontent.com/102996011/221621287-55987efd-143b-4ad0-b7bb-d35d58436b12.png)
> Bei Benutzung der cardUnlock wird die Zielseite aus dem Page-Array herausgenommen. Die Target-Page sollte nicht als Top-Level-Page, sondern als Subpage definiert sein.
im Datenpunkt **0_userdata.0.NSPanel.Unlock.UnlockPin** kann eine PIN vergeben werden. Default wird diese PIN als **0000** definiert.
Erstellung des Alias:
Die cardUnlock wird ab Version `4.3.3.3` mit einem Alias vom Gerätetyp `Feueralarm` automatisch erstellt. Die Erstellung des Alias und der zugehörigen Datenpunkte erfolgt, `sobald die cardUnlock erstmals eingebunden und aufgerufen` wird.
Unter 0_userdata.0... werden folgende Datenpunkte automatisch angelegt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/46f63c7c-154e-4c47-8caa-41bed30bcf70)
Die angelegte PIN-Nummer lässt sich unter "Wert" von "0000" in (siehe Beispiel) z.B. "1234" ändern.
Unter alias.0... wird folgender Alias automatisch angelegt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/39313dbb-3561-4f73-8352-63995ae7b8be)
**Beispiel der Seitenerstellung:** (im Service-Menü enthalten)
```typescript
//Level 0 (if service pages are used with cardUnlock)
let Unlock_Service: PageType =
{
'type': 'cardUnlock',
'heading': 'Service Pages',
'useColor': true,
'items': [{ id: 'alias.0.NSPanel.Unlock',
targetPage: 'NSPanel_Service_SubPage',
autoCreateALias: true }
]
};
```
siehe auch:
* https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC
Da die cardUnlock innerhalb eines "Smart Home" nur einmal erforderlich sein sollte, teilt sie die Datenpunkte mit allen weiteren NSPanels im Haus. Es ist darüber hinaus jedoch auch möglich, `weitere Seiten` über die `cardUnlock` nach dem gleichen Schema vor unbefugten Zugriffen mit dem vergebenen `PIN` zu schützen.
Hierzu muss lediglich eine weitere `Page` vom Typ `cardUnlock` definiert werden und das Ziel `targetPage` auf eine `vorhandene subPage` zeigen:
```typescript
let UnlockPage: PageType =
{
'type': 'cardUnlock',
'heading': 'Titel der Page',
'useColor': true,
'items': [{ id: 'alias.0.NSPanel.Unlock',
targetPage: 'Eine_weitere_Subpage',
autoCreateALias: true }
]
};
```
***

@@ -30,15 +30,15 @@ Am Ende dieses Leitfaden sollte auf eurem Panel der Bildschirmschoner zu sehen s
Für den Betrieb wird „kein“ ioBroker-lovelace-Adapter benötigt. Die komplette lovelace-Integration erfolgt über die TFT-Firmware und die nachfolgenden ioBroker-Adapter.
* ### MQTT - Adapter
![MQTT Server / Client Adapter](picture/basisinstallation/mqtt-server-client-adapter.png)
![MQTT Server / Client Adapter](../picture/basisinstallation/mqtt-server-client-adapter.png)
Die Kommunikation zwischen dem NSPanel und ioBroker erfolgt mittels MQTT über Tasmota. Es besteht auch die Möglichkeit einen externen MQTT-Server zu nutzen. Dazu mehr im Punkt MQTT Config.
* ### Javascript-Adapter
Es werden zwei Type-Skripte (TS = das etwas mächtigere Javascript) benötigt. Zum Einen ein Icon-Skript, da alle verwendeten Icons nicht als „echte Grafiken“ im Panel hinterlegt sind, sondern als Schriftzeichen-Symbole. Des Weiteren ein TS-Skript mit dem eigentlichen Laufzeit-Code, welches für jedes eingesetzte NSPanel vorhanden und konfiguriert sein muss.
* ### Geräte verwalten (Device) - Adapter
![Device Adpter](picture/basisinstallation/device-adapter.png)
![Device Adpter](../picture/basisinstallation/device-adapter.png)
Über diesen Adapter sollen die Aliase später (mit Ausnahme des Media-Alias für Alexa & Co.) erstellt werden. Mehr infos dazu dann im Abschnitt Alias erstellen
* ### Accu-Weather-Adapter
![ACCUWEATHER Adapter](picture/basisinstallation/accuweather-adapter.png)
![ACCUWEATHER Adapter](../picture/basisinstallation/accuweather-adapter.png)
Spielt in erster Linie eine Rolle beim Screensaver-Wetter, da zum Ersten die Icons und die Temperatur-Informationen für den Forecast ausgelesen werden und zum Zweiten das aktuelle Wettericon für den Screensaver benötigt wird.
als Alternative kann auch der `DAS WETTER` Adapter genutzt werden. In dem Fall muss im Script unter Punkt 3 die Konfiguration angepasst werden.
@@ -68,10 +68,10 @@ a) Unter „Sonstige Einstellungen“ trägst du im Feld Vorlage
{"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}
```
ein, hakst Aktivieren "an" und klickst auf Speichern. Du kannst natürlich auch noch Device und Friendly Name vergeben
![TASMOTA Sonstige Einstellungen](<picture/basisinstallation/tasmota-sonstige- einstellungen-vorlage.png>)
![TASMOTA Sonstige Einstellungen](../picture/basisinstallation/tasmota-sonstige-einstellungen-vorlage.png)
b) Unter Logging fügst du die IP von deinem ioBroker unter Sys-Log Host () ein und klickst auf Speichern.
<img src="picture/basisinstallation/tasmota-logging-einstellungen.png" alt="TASMOTA Logging" width="350"/>
<img src="../picture/basisinstallation/tasmota-logging-einstellungen.png" alt="TASMOTA Logging" width="350"/>
c) **Hinweis**: Unter Umständen macht es Sinn, die NSPanel Temperatursensoren noch zu konfiguirieren / kalibrieren. Wir haben dies in der [Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ#2-sensoren) erklärt.
@@ -81,13 +81,13 @@ c) **Hinweis**: Unter Umständen macht es Sinn, die NSPanel Temperatursensoren n
Im Tasmota findest du unter Konsolen den Button Verwalte Dateisystem. Wenn du diesen anklickst, siehst du einen weiteren Button Datei erstellen und bearbeiten. Du änderst den Dateinamen neue-datei.txt in autoexec.be und fügst den Inhalt aus dem folgenden Link ein:
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be**
<img src="picture/basisinstallation/tasmota-autoexec.png" alt="Tasmota Dateisystem" width="700"/>
<img src="../picture/basisinstallation/tasmota-autoexec.png" alt="Tasmota Dateisystem" width="700"/>
Danach klickst du auf Speichern und dann solltest du Tasmota rebooten.
Wenn das Panel bereits unter einer anderen Variante installiert war, dann bitte alle Dateien (insbesondere autoexec.be und autoexec.bec) vorher über das Flammensymbol hinter dem Dateinamen löschen. Und von vorne mit dem Punkt 3 beginnen.
<img src="picture/basisinstallation/tasmota-dateisystem.png" alt="Tasmota Dateisystem" width="500"/>
<img src="../picture/basisinstallation/tasmota-dateisystem.png" alt="Tasmota Dateisystem" width="500"/>
***
@@ -104,7 +104,7 @@ Im Tasmota unter „Einstellungen/MQTT konfigurieren“:
Speichern klicken und Einstellungen verlassen
<img src="picture/basisinstallation/tasmota-mqtt.png" alt="Tasmota MQTT Einstellungen" width="350"/>
<img src="../picture/basisinstallation/tasmota-mqtt.png" alt="Tasmota MQTT Einstellungen" width="350"/>
***
@@ -132,7 +132,7 @@ Zum Flashen müsst Ihr dann die Tasmota Konsole öffnen und in die Kommandozeile
`FlashNextion <Hier den Link aus dem NsPanelTS.ts-Skript einfügen>` (siehe oben)
eingeben und mit Enter bestätigen. Das Panel installiert jetzt die TFT-Firmware (Kann beim ersten Mal ein paar Minuten dauern Fortschritt beobachten am Ende erfolgt ein Reboot und das Panel wechselt in einen Screen „Waiting for Content“
<img src="picture/basisinstallation/panel-waiting-for-content.png" alt="Waiting fpor Content" width="500"/>
<img src="../picture/basisinstallation/panel-waiting-for-content.png" alt="Waiting fpor Content" width="500"/>
***
@@ -152,15 +152,15 @@ b) Zugriff von allen IPs zulassen auswählen
c) Port 1886 (analog Port aus Tasmota/MQTT)
d) Benutzer (analog Benutzer aus Tasmota/MQTT)
e) Kennwort + Kennwort wiederholen (analog Passwort aus Tasmota/MQTT)
<img width="1186" alt="MQTT Server Verbindung" src="picture/basisinstallation/mqtt-server-verbindung.png">
<img width="1186" alt="MQTT Server Verbindung" src="../picture/basisinstallation/mqtt-server-verbindung.png">
Einstellungen im Reiter Server-Einstellungen
f) States bei subscribe publizieren (angehakt)
g) Leere Session erzwingen: Client-Einstellungen verwenden
<img width="1186" alt="MQTT Server Settings" src="picture/basisinstallation/mqtt-server-settings.png">
<img width="1186" alt="MQTT Server Settings" src="../picture/basisinstallation/mqtt-server-settings.png">
Einstellungen im Reiter MQTT-Einstellungen
h) Maske zum Bekanntgeben eigener States: **mqtt.0.*** (Bei zusätzlicher Instanz entsprechend höher (mqtt.1.* etc.)
i) Eigene States beim Verbinden publizieren (angehakt)
<img width="1186" alt="MQTT Server MQTT Einstellungen" src="picture/basisinstallation/mqtt-server-mqtt-einstellungen.png">
<img width="1186" alt="MQTT Server MQTT Einstellungen" src="../picture/basisinstallation/mqtt-server-mqtt-einstellungen.png">
> **!!! ACHTUNG: !!!**
> Der haken bei "**Nur bei Änderungen publizieren**" darf nicht aktiv sein, da es sonst zu Problemen in der Navigation kommen kann!
@@ -170,17 +170,17 @@ ______
### 6b) Abweichende Variante **mit** extern betriebenem Mosquitto MQTT-Broker --> mit MQTT-Client Adapter
![MQTT Client Adapter](picture/basisinstallation/mqtt-client-adapter.png)
![MQTT Client Adapter](../picture/basisinstallation/mqtt-client-adapter.png)
> [!NOTE]
> Nur befolgen, wenn ein **externer MQTT-Broker** "außerhalb der ioBroker-Umgebung" betriebsbereit installiert wurde!
**Wichtig** ist bei `Zusätzliche subscriptions` das Topic einzutragen.
![MQTT Client Einstellungen](picture/basisinstallation/mqtt-client-einstellungen.png)
![MQTT Client Einstellungen](../picture/basisinstallation/mqtt-client-einstellungen.png)
Einstellungen für die Datenpunkte, hier am Beispiel von .../cmnd/CustomSend
![Einstellungen am Datenpunkt](picture/basisinstallation/mqtt-client-dp-einstellungen.png)
![Einstellungen am Datenpunkt](../picture/basisinstallation/mqtt-client-dp-einstellungen.png)
Kurzanleitung mit dem MQTT-Client Adapter unter:
https://forum.iobroker.net/post/1204391
@@ -208,7 +208,7 @@ Alternativ kann auch der MQTT-Explorer (http://mqtt-explorer.com/) genutzt werde
im Feld Topic wird er koplette Topic eingetragen.
`SmartHome/NSPanel_1/cmnd/CustomSend`
den Punkt `raw` auswählen und als Wert `time~12:00` eintragen. Zum Schluß den Button `PUBLISH` drücken.
![MQTT Explorer CustomSend](picture/basisinstallation/mqtt-explorer-customsend.png)
![MQTT Explorer CustomSend](../picture/basisinstallation/mqtt-explorer-customsend.png)
Danach sollte im MQTT-Adapter unter Objekte ein Datenpunkt: „SmartHome/NSPanel_1/cmnd/CustomSend“ erscheinen. Falls nicht, solange wiederholen bis dieser Datenpunkt abonniert wurde, oder ggfs. Nochmals die MQTT-Einstellungen überprüfen.
@@ -224,7 +224,7 @@ Für den erfolgreichen Start des NSPanelTs.ts (siehe Punkt 10) TypeScript sind n
* Aktivierung der Option `Kommando "setObject" erlauben`
* Aktivierung der Option `Kommando "exec" erlauben`
![JS-Adapter Einstellungen](picture/basisinstallation/js-adapter-einstellungen.png)
![JS-Adapter Einstellungen](../picture/basisinstallation/js-adapter-einstellungen.png)
***
@@ -289,7 +289,7 @@ Beim ersten Start des Scripts erzeugt das Skript unter 0_userdata diverse Datenp
Der Pfad kann im Skript unter „NSPanel_Path“ angepasst werden.
> **Achtung!**
> Ab TS-Script-Version 3.5.0.5 und mit installiertem JavaScript-Adapter ab Version v6.1.3 können auch weitere Alias automatisch erzeugt werden, wenn die Konstante **autoCreateAlias** auf **true** steht.
> Ab TS-Script-Version 3.5.0.5 und mit installiertem JavaScript-Adapter ab Version v6.1.3 können auch weitere Alias automatisch erzeugt werden, wenn die Konstante **autoCreateALias** auf **true** steht.
***
@@ -304,64 +304,8 @@ Eine genaue Beschreibung für die diversen Alias-Typen findest du [hier.](https:
## **13.) Seitengestaltung**
Die Seitengestaltung ist nun in einen eigenen Bereich hier in der Wiki gewandert.
Die unten aufgeführten Beispiele sind **nicht** mehr im Skript enthalten.
[Bitte hier klicken](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele)
***
**Der Folgende bereich stammt aus einer früheren Version der Wiki, bitte den Link oben beachten!**
Am Besten benutzt ihr die Beispiele im Skript und legt entsprechende Aliase hierzu an, die auch in diesem ioBroker-Community-Topic innerhalb der letzten Wochen beschrieben wurden.
cardEntities mit Alias Lampe/Dimmer/Switch
![image](https://user-images.githubusercontent.com/102996011/189372243-fceb8f9d-d020-4640-a064-3f8134fef24b.png)
cardEntities mit RGB und HUE Aliasen (Color)
![image](https://user-images.githubusercontent.com/102996011/189372280-67b05750-2e2d-4093-b708-542363d8e56f.png)
popupLight mit Farbtemperatur und Brightness
![image](https://user-images.githubusercontent.com/102996011/189372471-f0abcade-8c00-46fc-9aa3-f445ea4764b1.png)
popupLight mit ColorWheel
![image](https://user-images.githubusercontent.com/102996011/189372558-cf411bba-5143-4c1f-b27c-4b64f22ca834.png)
cardGrid mit Radiosendern/Playlists (Alias Taste)
![image](https://user-images.githubusercontent.com/102996011/189372592-de0962ee-9015-4ce8-80e9-126669c61d97.png)
cardEntities mit Aliasen Lautstärke und Info
![image](https://user-images.githubusercontent.com/102996011/189372790-c6f1ea6f-1f24-4ba8-8bde-0459da1f2ab7.png)
cardEntities mit Fenster, Tür, Jalousie und Verschluss
![image](https://user-images.githubusercontent.com/102996011/189372858-3232a079-e4f1-4077-b947-6ba50fdfeb09.png)
cardEntities mit Abfallkalender
![image](https://user-images.githubusercontent.com/102996011/189372953-51ded00a-68ad-4cb8-b8c3-c85b0f8d3da5.png)
cardMedia
![image](https://user-images.githubusercontent.com/102996011/189373030-31692512-f934-418a-9c2f-e7624c8cb09f.png)
cardAlarm
![image](https://user-images.githubusercontent.com/102996011/189373105-e46f8872-3b3c-4365-8113-0a44570a03a7.png)
cardGrid
![image](https://user-images.githubusercontent.com/102996011/189373286-c5ad72d0-5e10-4c59-b691-f4bfd1ba354f.png)
cardEntities
![image](https://user-images.githubusercontent.com/102996011/189373401-42696c89-0d65-48f8-9cdf-a4c9a84073d6.png)
cardEntities als Subpage unter cardEntities (verschachtelt)
![image](https://user-images.githubusercontent.com/102996011/189373454-c6aa9236-1fad-47ef-915f-fb6356a4a613.png)
cardNotify
![image](https://user-images.githubusercontent.com/102996011/189373507-41a10711-afc0-4186-b94b-690bc1805a7f.png)
Steuerung von Klimageräten/Klimaanlagen
![image](https://user-images.githubusercontent.com/102996011/189373662-1aade2a6-3ccd-4cff-831c-c6c0a90ce999.png)
QR-Code für z.B. Gäste WLAN
![image](https://user-images.githubusercontent.com/102996011/189373730-1ceecc65-e503-47dc-8639-c29bb93b8eb1.png)
Neues Design für Thermostate
![image](https://user-images.githubusercontent.com/102996011/189373785-6d1870ef-4544-4099-8fc5-fd4b7f546d74.png)
***
***

65
new/popupnotify.md Normal file

@@ -0,0 +1,65 @@
# popUpNotify
Status: in Erstellung:
Das ganze LUI Thema ist am Wachsen. Nun gibt es von der popUpNotify Page schon zwei verschiedene Varianten.
Diese wollen wir hier beschreiben:
## popUpNotify - alte Variante
**Beschreibung**:
Die alte Variante kennt man am ehesten von Info-Popus zur Tasmota oder TFT Version.
![image](https://user-images.githubusercontent.com/102996011/189373507-41a10711-afc0-4186-b94b-690bc1805a7f.png)
**Datenpunkte**:
* popupNotifyHeading
* popupNotifyText
* popupNotifyInternalName
* popupNotifyButton1Text
* popupNotifyButton2Text
* popupNotifySleepTimeout
* popupNotifyAction
**Zuordnung Datenpunkte**:
![popupnotify_v1](https://user-images.githubusercontent.com/99131208/200187862-a31a3223-0a1b-4d53-82e8-a93467dd19ce.jpg)
**Nutzung**:
Vor der Version **v3.5.0** per Default nutzbar. Ab der Version **v3.5.0** bleibt die alte Version erstmal per Default nutzbar. Stellt man den Datenpunkt **popupNotifyLayout** auf 2 erhält man das neue popUpNotify, zur Nutzung des alten muss man dann den Wert 1 hinterlegen.
**Beispiel**:
Bei der [Anleitung der AlarmCard](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#2-alarm-page) gibt es zwei verschiedene Beispiele für die Nutzung der popUpNotify Page.
## popUpNotify - Layout 2
**Beschreibung**:
Ab Version **v3.5.0** verfügbar.
Layout 2 bringt neue Funktionen mit sich wie Schriftgröße, Schriftfarbe, ein Icon mit definierbarer Farbe, etc.
![image](https://user-images.githubusercontent.com/99131208/200184667-88d4104c-5e6c-453b-8eb5-3f27183ef85a.png)
**Neue Datenpunkte**:
Die neuen Datenpunkte werden automatisch beim Starten des Skriptes angelegt. Zur Übersicht hier die neuen Datenpunkte aufgelistet:
* popupNotifyHeadingColor
* popupNotifyTextColor
* popupNotifyButton1TextColor
* popupNotifyButton2TextColor
* popupNotifyLayout
* popupNotifyFontIdText (Schriftgröße)
* popupNotifyIcon
* popupNotifyIconColor
**Zuordnung Datenpunkte**:
![popupnotify_v2](https://user-images.githubusercontent.com/99131208/200187887-1fbffa97-9d77-4681-bb58-384e2209c365.jpg)
**Nutzung**:
Ab der Version **v3.5.0** bleibt die alte Version erstmal per Default nutzbar. Stellt man den Datenpunkt **popupNotifyLayout** auf 2 erhält man das neue popUpNotify, zur Nutzung des alten muss man dann den Wert 1 hinterlegen.
**Emulator (Layout 2)**:
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/PopupNotify_layout2_Emulator.xml)

667
old/Changelog.md Normal file

@@ -0,0 +1,667 @@
**ioBroker Changelog (TypeScript)**
# v4.4.0.11
![v44011](https://github.com/user-attachments/assets/d20662c0-238d-4c68-bbc4-dee348af3548)
[Forum Link](https://forum.iobroker.net/post/1222270)
****
# v4.4.0.5
![v4405](https://github.com/user-attachments/assets/d91b155d-35c5-4cfb-866e-221a5ca44c82)
[Forum Link](https://forum.iobroker.net/post/1202535)
****
# v4.4.0.4
![v4404](https://github.com/user-attachments/assets/1c2e7e5d-277e-4a14-9a66-e6059fc5e824)
[Forum Link](https://forum.iobroker.net/post/1201018)
****
# v4.4.0
Wechsel auf TFT 4.4.0 und Tasmota 14.0.0
****
# v4.3.3.43
![v43343](https://github.com/user-attachments/assets/9d0a3a13-9e2a-44f3-9967-39ca4c857614)
[Forum Link](https://forum.iobroker.net/post/1127919)
****
# v4.3.3.40
![v43340](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/963a0dfd-7ab8-4880-8206-c3ddca395656)
[Forum Link](https://forum.iobroker.net/post/1124745)
****
# v4.3.3.39
<img width="484" alt="v4.3.3.39" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/557ca471-edab-418b-90e2-144ce3e4274e">
[Forum Link](https://forum.iobroker.net/post/1121353)
****
# v4.3.3.38
![v43338](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/216aa36c-c2f5-4371-b272-fea8ac0c02c7)
[Forum Link](https://forum.iobroker.net/post/1116411)
****
# v4.3.3.36
![v43336](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f5bdf96f-6c14-40bc-ae96-0373851504b9)
[Forum Link](https://forum.iobroker.net/post/1112980)
****
# v4.3.3.33
![v43333](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/0941467c-47ae-4fa7-bf25-d19f48c0694f)
[Forum Link](https://forum.iobroker.net/post/1107313)
****
# v4.3.3.31
![v43331](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/da283111-150c-4ae0-a9c1-81b9f6fb0431)
[Forum Link](https://forum.iobroker.net/post/1106161)
****
# v4.3.3.30
![v43330](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/b5baeaf3-f804-4844-92da-0f07e8eb4614)
[Forum Link](https://forum.iobroker.net/post/1105617)
****
# v4.3.3.28
![v43328](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/626fc5ad-cfbf-46b4-8b32-fc263911ee93)
[Forum Link](https://forum.iobroker.net/post/1104167)
****
# v4.3.3.27
![v43327](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/b662a622-f1c1-4212-8c9b-a27a97784071)
[Forum Link](https://forum.iobroker.net/post/1102353)
****
# v4.3.3.25
![v43325](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/326a2a6e-5a8d-4b8c-ab06-1fa16381bf48)
[Forum Link](https://forum.iobroker.net/post/1098754)
****
# v4.3.3.24 (Hotfix)
![v43324](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/6d126909-a2ef-4683-8b4a-c850cd2a3335)
[Forum Link](https://forum.iobroker.net/post/1096707)
****
# v4.3.3.23
![v43323](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/2ee4cd33-4814-4212-b344-44d3c153ed48)
[Forum Link](https://forum.iobroker.net/post/1096164)
****
# v4.3.3.22
![v43322](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/5d272138-4d4c-4c44-b118-adf7ff32cceb)
[Forum Link](https://forum.iobroker.net/post/1095383)
****
# v4.3.3.21
![v43321](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/db60fa68-9d52-4fa7-aeed-3f7e44a3bdc2)
****
# v4.3.3.20
![v43320](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/88c7fd60-df6e-44c2-a0ab-9c27c0b48aaf)
[Forum Link](https://forum.iobroker.net/post/1092494)
****
# v4.3.3.19
![v43319](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f1530777-33c7-4d7b-b514-f91be08ddb82)
[Forum Link](https://forum.iobroker.net/post/1091873)
****
# v4.3.3.18
![v43318](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/c0e5191c-fa6e-467c-985f-744201f1bf16)
[Forum Link](https://forum.iobroker.net/post/1091438)
****
# v4.3.3.17
![v43317](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/99f3fe78-8425-42ca-b658-93c0b04ff184)
![NSPanel](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/15bb9318-5097-4f81-a7b5-6b2431b85f27)
[Wiki Link](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-%E2%80%90-cardMedia-%E2%80%90-Der-SONOS-Player)
[Forum Link](https://forum.iobroker.net/post/1090546)
****
# v4.3.3.16
![v43316](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/dffd837a-59ed-4c0f-a199-e8a088f44b23)
[Forum Link](https://forum.iobroker.net/post/1089353)
****
# v4.3.3.15
![v43315](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/991e3ef0-e6f8-44b2-882c-ea11eb33c06e)
[Forum Link](https://forum.iobroker.net/post/1088675)
****
# v4.3.3.14
![v43314](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/255eea39-411f-426b-917a-5d9e551e9a73)
[Forum Link](https://forum.iobroker.net/post/1087343)
****
# v4.3.3.13
![V43313](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/89251a3d-e53c-44f2-8c9d-266e0818c976)
[Forum Link](https://forum.iobroker.net/post/1086744)
****
# v4.3.3.12
![V43312](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/8712797e-f437-4e6b-a221-8bde555a9167)
[Forum Link](https://forum.iobroker.net/post/1086380)
****
# v4.3.3.11
![V43311](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/7b330c91-b629-4480-aaac-3f2e8c60452e)
[Forum Link](https://forum.iobroker.net/post/1086380)
****
# v4.3.3.10
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/c60b36af-a39f-4f38-911b-80b4225206cd)
[Forum Link](https://forum.iobroker.net/post/1085163)
### Achtung Breaking Changes.
> Konstanten aus dem oberen Teil sind doppelt, wenn ausschließlich nur der untere Teil ausgetauscht wird!
**Bitte unbedingt nach der Update-Anleitung vorgehen:**
https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade
****
# v4.3.3.9
  | - 18.11.2023 - v4.3.3.6 Add autoCreateALias to PageAlarm
  | - 20.11.2023 - v4.3.3.6 Add actionStringArray to PageAlarm
  | - 20.11.2023 - v4.3.3.6 Add Multilingualism to cardAlarm (39 languages)
  | - 20.11.2023 - v4.3.3.7 Add Multilingualism to cardMedia (39 languages)
  | - 20.11.2023 - v4.3.3.8 Add Method dayjs (Multilingualism)
  | - 20.11.2023 - v4.3.3.9 Add ScreensaverEntityOnColor, ...OffColor, ...OnText, ...OffText
[Forum Link](https://forum.iobroker.net/post/1083729)
****
# v4.3.3.5
![1700223821684-0fe40ec2-e9e4-4505-855f-6684703d9885-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/65c4b641-3775-4f7c-a591-d1bd16dfe316)
[Forum Link](https://forum.iobroker.net/post/1081945)
****
# v4.3.3.3
![1699866147196-24b160ce-2408-490d-abb3-13bf895fdbf9-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/c1f6bc9c-0dfd-4cd7-9ea2-994f949dfa04)
* v4.3.3.2 Add autoCreateALias to cardUnlock
* v4.3.3.2 Change NodeJS to at least v18.X.X
* v4.3.3.3 if setOption = false, do not create autoAlias (Functional/Servicemenu) and Datapoints
[Forum Link](https://forum.iobroker.net/post/1079701)
****
# v4.3.3.1
<img width="616" alt="Bildschirmfoto 2023-11-12 um 15 49 46" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/d55a044c-5661-4c78-a9c1-63d308f72021">
[Forum Link](https://forum.iobroker.net/post/1079227)
****
# v4.3.2.1
![1698692791078-91fe4d4d-e8d5-46ee-a241-52e7a95c5d11-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f5cc3702-0984-4e28-bdc8-3f9ce762bbed)
[Forum Link](https://forum.iobroker.net/post/1070661)
****
# v4.3.1.6
![1697706281650-fe09ab24-9edc-4164-9123-95b87b4f1ab0-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/e88005ca-1f6c-4158-8469-4c7f3311d3bd)
[Forum Link](https://forum.iobroker.net/post/1063274)
****
# v4.3.1.5
<img width="763" alt="Bildschirmfoto 2023-10-13 um 12 06 32" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/459c0e8c-2a56-4c61-b68d-97bd90216c68">
[Forum Link](https://forum.iobroker.net/post/1059690)
****
# v4.3.1.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f7db2ef3-3fe7-4ed6-af54-8a70c5bf7569)
***
# v4.3.1.2/v4.3.1.3
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/09dcf039-fbd1-494d-9c90-93d682ba2a31)
[Forum Link](https://forum.iobroker.net/post/1049432)
***
# v4.3.1.1
![1694951180030-bce68a5b-3f4f-451c-a64c-351743ed1645-image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/d47e165a-60fc-4623-aac3-b4f320728b51)
[Forum Link](https://forum.iobroker.net/post/1045086)
***
# v4.2.1.6
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/37ec01be-060d-4d0b-b86c-71cb7098faf2)
***
# v4.2.1.5
<img width="920" alt="image" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/0cecfad4-5478-4765-8e1a-848759f95e5e">
[Forum Link](https://forum.iobroker.net/post/1039117)
***
# v4.2.1.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/24d81ccf-60eb-40c3-93e6-2cecd8e3f69c)
[Forum Link](https://forum.iobroker.net/post/1038290)
***
# v4.2.1.3
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/67f9935a-801d-4dd4-9fbf-c2eaa058fe1f)
[Forum Link](https://forum.iobroker.net/post/1035344)
***
# v4.2.1.2
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/ef1ef63d-b1a6-48ae-a053-5b5e063011e7)
[Forum Link](https://forum.iobroker.net/post/1034341)
***
# v4.2.1.1
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/937d19f2-b0cc-4d4d-95d3-6a2d476d443a)
[Forum Link](https://forum.iobroker.net/post/1033818)
***
# v4.2.0.2
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/2b915899-d1da-4dc8-aaba-d8683079dcfb)
[Forum Link](https://forum.iobroker.net/post/1033498)
***
# v4.2.0.1
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/decce552-f2cd-4e1a-bd22-fb8c2fb3e7b1)
[Forum Link](https://forum.iobroker.net/post/1033227)
***
# v4.2.0
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/124a9d8f-0f49-4bfe-9fe5-bb94be5242d3)
[Forum Link](https://forum.iobroker.net/post/1033017)
***
# v4.1.4.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/48c51925-565c-4ddd-9388-1623e250bb4a)
[Forum Link](https://forum.iobroker.net/post/1029669)
***
# v4.1.4.2
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/bbdd17b3-16a2-4dad-ba28-b303a0a9540d)
[Forum Link](https://forum.iobroker.net/post/1028914)
***
# v4.1.4.1
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/ab396fcc-7c74-45be-ab46-4198265f81fc)
[Forum Link](https://forum.iobroker.net/post/1028713)
***
# v4.1.4
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/d46d49e5-748a-4708-a971-581effb86bf1)
# v4.0.5.5
Die Funktion CreateEntity wurde erweitert um die Rolle "timeTable", damit besteht die Möglichkeit Daten vom [Adapter "Fahrplan"](https://github.com/gaudes/ioBroker.fahrplan) zu visualisieren. Zusätzlich wird dieses [externe Script](https://github.com/tt-tom17/MyScripts/tree/main/Sonoff_NSPanel) benötigt. Weitere Infos [hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#22-fahrplananzeiger).
# v4.0.5.1
![228012141-a440d45b-d9ab-422d-8c61-68a4c8826914](https://user-images.githubusercontent.com/101348966/228247263-426bcd08-f65a-48f1-aac9-2a87c6f5f308.png)
[Erweiterte Konfigurationsmöglichkeiten der Hardwaretasten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#anleitungen) - von bembelstemmer
Fix iconColor by 100% Brightness
Fix Funktion GeneratePowerPage inkl. DemoModus [Powercard](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardpower-ab-ts-script-v341) (einfach leeres pageItem übergeben)
Fix colorTempSlider Arbeitsweise(seitenverkehrt) korrigiert
Debug - Error - Log - Meldungen angepasst
Eine Licht von Typ **rgbSingle** benötigt nicht mehr den Datenpunkt **.TEMPERATURE** im Alias.
Upgrade TFT 50 / 4.0.5
Die [Status Icon](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#erweiterung-der-relaystatus-icons-ab-v390) über den Hardware
# v4.0.3
![1677525629878-9b7597a5-3d3d-43d5-b0c7-a4d42d8eac7f-image](https://user-images.githubusercontent.com/101348966/224631987-e3808582-0de8-4baf-a548-5d595dd47b5f.png)
Änderungen in der Config
aus
`export const config: Config = {`
wird
`export const config = <Config> {`
und die **firstScreensaverEntity - fourthScreensaverentity** existieren nicht mehr. Erstatz dafür ist das Array **bottomScreensaverEntity**. Die ersten 4 bottomScreensaverEntity werden auch im Standard-Screensaver genutzt.
Des weiteren ist der Erweiterte Screensaver enthalten:
![1677526152660-837094a5-44e0-4c7c-9251-9e02dc80346c-image](https://user-images.githubusercontent.com/101348966/224631169-f4bb07c2-3d8a-4341-8f0d-8e5e5394abd7.png)
Zur Konfiguration des Screensavers bitte die Wiki berücksichtigen:
[Screensaver Wiki](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#entity-status-icons-ab-v400)
Für alle User mit kleinen Hackern zuhause gibt es jetzt die cardUnlock:
![1677526345821-df037f8b-91cd-418e-aeac-6a54e4e16915-image](https://user-images.githubusercontent.com/101348966/224632179-f73b2526-df53-4f52-b71b-be155b874bf8.png)
Siehe auch: [CradUnlock Wiki](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardunlock-ab-v400)
Ansonsen gab es diverse Erweiterungen und Minor-Bugfixes:
* Eine überarbeitete und erweiterte **Squeezebox** und diverse Optimierungen von [@bembelstemmer](https://forum.iobroker.net/uid/55112)
* Ein Mode - Fix für die cardThermo und dynamische Icons im Advanced Screensaver von [@Gargano](https://forum.iobroker.net/uid/2916)
**Kurze Upgrade Empfehlung:**
* TypeScript anlegen und die Version https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs_without_Examples.ts hinein kopieren
* altes Script deaktivieren (Fallback)
* Konfiguration anhand der Variablen aus dem anderen Script übernehmen (Achtung Config hat einen veränderten Aufbau und kann nicht 1:1 übernommen werden, siehe oben!)
* Erweiterungen für Advanced Screensaver aus Wiki oder NSPanel.ts (Script mit Beispielen) migrieren
* FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v4.0.3.tft in der Tasmota Console ausführen
**Hinweis**
Es erforderlich sein kann, die vom TS-Script automatisch angelegten 0_userdata.0.NSPanel.X Verzeichnisse und Auto-Aliase zu löschen und neu anlegen zu lassen.
# v3.9.0
![image](https://user-images.githubusercontent.com/102996011/215470528-f4a9581a-9973-49a9-b472-3153d91f2c89.png)
**Achtung Breaking Changes:**
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.9.0.tft
```
Im oberen Konfigurationsbereich sind diverse Änderungen entstanden. Die einfachste Methode für ein Upgrade ist auf ein TS-Script ohne Beispiele aufzusetzten: https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs_without_Examples.ts .
Das vorhandene bereits TS-Script sollte deaktiviert werden, dienst als Fallbacklösung und zum kopieren der Migrationsanteile (vorhandene Seitendefinitionen, etc.):
* Benutzer- /Panelspezifische Anpassungen vornehmen
* Zeile 213: NEU: bevorzugte Tasmota-Version auswählen
* Zeile 217: NSPanel- Pfad anpassen
* Zeile 618: MQTT-Pfad anpassen
* Zeile 619: MQTT-Pfad anpassen
* Zeile 658: MQTT-Pfad anpassen
* Zeile 666: MQTT-Pfad anpassen
* TS-Script aktivieren und starten (Neue Datenpunkte und Aliase werden erstellt)
* Wenn keine Fehler vorhanden sein sollten, dann danach die vorhandenen Seiten-Variablen und benutzerspezifische Farbkonstanten nachziehen.
* Zum Schluss Anpassungen in den neuen Parametern der Screensaver-Entities im Config-Teil vornehmen.
***
# v3.8.3
![image](https://user-images.githubusercontent.com/102996011/212193107-c2e88e5d-43d0-4727-bacf-38d13d9e2dcd.png)
**Achtung Breaking Changes:**
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.8.3.tft
```
**Diese Release beinhaltet:**
* neue Funktionen des Volumio-Media-Players
* die Vorbereitung für die carLCharts (Linien Diagramme siehe Vorschau unten)
* Funktionen für den "echten Taster" (Mono-Button)
* Hotfix für die farbigen Licht-Typen (Funktion Off)
* Das €-Zeichen in Strings
* Individuelle Navigations-Icons bei parent/prev/next/home
**Update-Anleitung (von v3.8.1 ausgehend):**
* Unteren Teil (ab hier keine Änderungen...) komplett ersetzen.
* In den Variablen muss eine Änderung vorgenommen werden
* die 1 Zeile der Variable jeder Seite muss von:
```
let Test_Licht1: PageEntities =
```
in
```
let Test_Licht1 = <PageEntities>
```
geändert werden.
also:
let `Variablenname` = <`Seitentyp`>
**Dadurch ergeben sich folgende Vorteile:**
Es müssen nicht mehr alle Seitenparameter angegeben werden, wie z.B.:
```
let CardPowerExample = <PagePower>
{
'type': 'cardPower',
'heading': 'cardPower Emulator',
'items': [
<PageItem>{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
]
};
```
d.h. alle optionalen Seitenparameter mit `undefined` oder `false` können entfallen.
Zusätzlich können weitere Typen verwendet werden:
```
let CardPowerExample = <PagePower>
{
'type': 'cardPower',
'heading': 'cardPower Emulator',
'useColor': true oder false
'subPage': true oder false
'parent': undefined oder Page
'parentIcon': undefined oder Icon als String, z.B. 'alert'
'prev': undefined oder 'Page'
'prevIcon': undefined oder Icon als String
'next': undefined oder 'Page'
'nextIcon': undefined oder Icon als String
'home': undefined oder 'Page'
'homeIcon': undefined oder Icon als String
'items': [
<PageItem>{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
]
};
```
Das TS-Script findet ihr hier:
https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts
Mit v3.9.0 kommt demnächst die carLChart hinzu (aktuell noch nicht in der stable TFT):
![image](https://user-images.githubusercontent.com/102996011/212189531-103e384a-d403-4ed1-a99f-fa3d29c72523.png)
***
# v3.8.1
![image](https://user-images.githubusercontent.com/102996011/212193039-2a5503b6-cb25-4110-af76-90d9e2b1d8f3.png)
**Achtung Breaking Changes:**
Um die Menüstruktur derart zu flexibilisieren, mussten in die Seitendeklaration weitere Parameter eingeführt werden. Es ist daher zwingend erforderlich, folgende Erweiterung je Seite vorzunehmen ( **prev**, **next**, **home** ) :
```
let Test_Licht1: PageEntities =
{
'type': 'cardEntities',
'heading': 'Color Aliase 1',
'useColor': true,
'subPage': false,
'parent': undefined,
'prev': undefined, //Neu - bitte in jede Seite einfügen
'next': undefined, //Neu - bitte in jede Seite einfügen
'home': undefined, //Neu - bitte in jede Seite einfügen
'items': [
<PageItem>{ ... }
]
};
```
Was kann man mit der neuen Navigation anstellen? :
@TT-Tom hat eine **ausführliche Anleitung** geschrieben :+1: . Ihr findet Sie in der gestern noch erweiterten Wiki:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation
![image](https://user-images.githubusercontent.com/102996011/212190944-abfe4a8f-d31c-4dde-aa25-5c49718277dc.png)
Im oberen Teil des Skriptes sind zwei Konstanten enthalten.
```
const tasmota_web_admin_user: string = 'admin'; // ändern, falls der User im Tasmota vor dem Kompilieren umbenannt wurde (Standard Tasmota: admin)
const tasmota_web_admin_password: string = ''; // setzten, falls "Web Admin Password" in Tasmote vergeben
```
Bitte nicht vergessen, diese bei der Erweiterung zu berücksichtigen. Wer möchte, kann im Tasmota dann ein Kennwort für den Web Admin vergeben.
![image](https://user-images.githubusercontent.com/102996011/212191091-cd3cff39-1e81-45e0-aac8-84d72ac7a6fb.png)
Darüber hinaus hat @egal den **Volumio-Player** implementiert :+1:
Dieser ist ebenfalls in der Wiki enthalten.
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardmedia-v20-ab-release-v370
** Ansonsten wie immer den unteren Teil komplett ersetzten. **
Um die neuen Funktionen nutzen zu können, muss ein:
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.8.1.tft
```
durchgeführt werden.
Sollte der BerryDriver noch nicht auf Version 8 sein, dann vorher:
```
Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
```
durchführen...
***
# v3.7.3.1
![image](https://user-images.githubusercontent.com/102996011/212192718-d7f8ca7b-5bc5-4fc4-ba1f-a81028da1f50.png)
**Hotfix**
Unteren Teil ersetzen:
https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts
Das TS-Script legt 2 neue Datenpunkte an:
![image](https://user-images.githubusercontent.com/102996011/212191694-4f80f1e8-f6b6-4fe4-aad1-efb71afb0182.png)
In Weekday oder Month short eintragen. Dann sollte es ein kurzes Datumsformat geben.
EDIT: Funktioniert natürlich auch mit der eu Version. Nur da ist es nicht wirklich erforderlich...
***
# v3.7.3.0
![image](https://user-images.githubusercontent.com/102996011/212191982-f4ad562f-3451-4427-bd6d-01c10bfe70b4.png)
***
# v3.7.0
![image](https://user-images.githubusercontent.com/102996011/212192231-a9052edf-3d16-44a5-be10-6a01a6639b12.png)
Es gibt ein paar Änderungen im oberen Teil des Scriptes (Bitte entsprechend einfügen):
Neue Konstanten:
```
const weatherAdapterInstance: string = 'accuweather.0.'; //Möglich 'accuweather.0.' oder 'daswetter.0.'
const weatherScreensaverTempMinMax: string = 'MinMax'; // Mögliche Werte: 'Min', 'Max' oder 'MinMax'
...
const HMIOn: RGB = { red: 3, green: 169, blue: 244 }; // Blau-On
```
Bitte folgende Parameter (Zeilen) aus der Config löschen:
```
dimmode: 20,
active: 100, //Standard-Brightness TFT
...
timeFormat: '%H:%M', // currently not used
dateFormat: '%A, %d. %B %Y', // currently not used
```
Die Aliase für die cardMedia haben jetzt Repeat und Shuffle als zusätzliche Datenpunkte. Den alten bei alexa2, spotify-premium oder sonos einfach löschen. Das Script wird die wieder neu anlegen.
Version mit Beispielen:
https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts
Version ohne Beispiele:
https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs_without_Examples.ts
```
FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v3.7.0.tft
```

21
old/Home.md Normal file

@@ -0,0 +1,21 @@
# SONOFF NSPanel Wiki für den ioBroker (Lovelace UI)
## Herzlich willkommen!
![image](https://user-images.githubusercontent.com/102996011/215601019-1e10bacd-8f7f-49a0-8bbf-ab7a38b58743.png)
Hier findest Du die Dokumentation des lovelace-ui für das Sonoff NSPanel, wenn Du als Hausautomatisierungssystem den ioBroker verwendest.
Die Wiki ist untergliedert in verschiedene Bereiche und sie erfüllt nicht den Anspruch der Vollständigkeit.
Ergänzungen sind jederzeit willkommen.
The main documentation for NSPanel Lovelace UI (only Home Assistant) is here: https://docs.nspanel.pky.eu/
LG
Die Crew
![image](https://user-images.githubusercontent.com/102996011/191578765-fca188e1-6b16-4a8f-8e10-63224d2145c2.png)
![image](https://user-images.githubusercontent.com/102996011/194638928-726efb42-5a21-4a98-826d-aede7b726836.png)

@@ -0,0 +1,234 @@
# Das ioBroker Skript auch ohne NSPanel ausprobieren
## Einleitung
Wenn man sein NSPanel schon fest verbaut hat und dann z.B. eine neue Seite konfigurieren muss, dann ist man ständig zwischen seinem Rechner und dem Panel am hin-und-her laufen um die Funktionalität zu testen. Die Bewegung als solches mag gut tun, ist aber hier der Effizienz in der Entwicklung der neuen Seite nicht zuträglich.
Auch nach einem Update des ioBroker Skripts kann man mit dieser Lösung einfach im Emulator testen, ob noch alles klappt, bevor man das Skript in seiner Live-Instanz aktualisiert.
Und Last but not least ist diese Möglichkeit auch für all diejenigen Interessant, die noch kein NSPanel haben, aber selbiges vor dem Kauf einmal testen möchten.
![image](https://user-images.githubusercontent.com/102996011/217221513-8fd9bb71-f54f-43d9-bdc1-48df30918387.png)
## Voraussetzungen
Ihr braucht:
* einen PC (ich habe es mit Windows 11 bei mir aktuell vertestet)
* einen ESP32 mit Tasmota32
* den Nextion Editor
* und eine ioBroker-Installation.
![image](https://user-images.githubusercontent.com/102996011/217230894-09253765-c5d7-47a2-9040-19fe00c6b061.png)
> Der ESP32 bleibt mit einem Datenkabel mit dem USB-Port des PC's verbunden.
## Vorbereitungen
Nachdem Euer ESP32 angekommen ist, müsst Ihr diesen via USB an den PC anschließen. Ich musste mir für meinen ESP32 noch den passenden Treiber installieren (CP210x_Universal_Windows_Driver). Nachdem ich den Treiber installiert hatte, taucht im Gerätemanager unter Anschlüsse bei mir ein _Silicon Labs CP210x USB to UART Bridge_ an _COM3_ auf.
Nun installieren wir Tasmota über den Webinstaller auf dem ESP: Dazu ruft Ihr die Seite https://tasmota.github.io/install/ im Browser auf. Lt. Dokumentation von Tasmota müsst Ihr hierfür den Browser Edge oder Chrome nehmen. Dort wählt Ihr rechts im Auswahlmenü _ESP32_ und links im Auswahlmenü _Tasmota DE_. Anschließend klickt Ihr auf _CONNECT_ und wählt den COM-Port von Eurer CP210x USB to UART Bridge aus.
Nachdem die Verbindung hergestellt wurde, installiert ihr Tasmota auf dem EPS32. War die Installation erfolgreich, könnt Ihr im nächsten Schritt Eure WLAN-Daten eintragen.
Nachdem die WLAN-Daten hinterlegt sind, gelangt Ihr mit einem weiteren Klick direkt auf die Tasmota Seite vom Gerät. War dies Erfolgreich, schließen wir die Tasmota Installation Seite und trennen kurz die USB Verbindung.
Nachdem nun der ESP wieder erreichbar ist, prüft man in den Einstellungen unter _Gerät konfigurieren_, ob RX (GPIO3) und TX (GPIO1) auf none stehen.
![image](https://user-images.githubusercontent.com/102996011/217224220-78b859d6-a4ca-4217-ba15-c1ab6b0d8f23.png)
Anschließend installiert man den Berry-Treiber und konfiguriert MQTT (nach der Anleitung hier im Wiki: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---Basisinstallation#3-berry-treiber-installieren).
## Berry-Driver für Emulation
**ACHTUNG:** Nicht den Berry Treiber hier aus dem Wiki nehmen, sondern hier aus dem nachfolgenden Code-Block
```ruby
# Nextion Serial Protocol driver by joBr99 + nextion upload protocol 1.2 (the fast one yay) implementation using http range and tcpclient
# based on;
# Sonoff NSPanel Tasmota driver v0.47 | code by blakadder and s-hadinger
class Nextion : Driver
var ser
var flash_size
var flash_mode
var flash_skip
var flash_current_byte
var tftd
var progress_percentage_last
static header = bytes('55BB')
def init()
log("NSP: Initializing Driver")
self.ser = serial(3, 1, 115200, serial.SERIAL_8N1)
self.flash_mode = 0
self.flash_skip = false
tasmota.add_driver(self)
end
def crc16(data, poly)
if !poly poly = 0xA001 end
# CRC-16 MODBUS HASHING ALGORITHM
var crc = 0xFFFF
for i:0..size(data)-1
crc = crc ^ data[i]
for j:0..7
if crc & 1
crc = (crc >> 1) ^ poly
else
crc = crc >> 1
end
end
end
return crc
end
def split_55(b)
var ret = []
var s = size(b)
var i = s-2 # start from last
while i > 0
if b[i] == 0x55 && b[i+1] == 0xBB
ret.push(b[i..s-1]) # push last msg to list
b = b[(0..i-1)] # write the rest back to b
end
i -= 1
end
ret.push(b)
return ret
end
# encode using custom protocol 55 BB [payload length] [payload] [crc] [crc]
def encode(payload)
var b = bytes()
b += self.header
b.add(size(payload), 2) # add size as 1 byte
b += bytes().fromstring(payload)
var msg_crc = self.crc16(b)
b.add(msg_crc, 2) # crc 2 bytes, little endian
return b
end
# send a nextion payload
def encodenx(payload)
var b = bytes().fromstring(payload)
b += bytes('FFFFFF')
return b
end
def sendnx(payload)
var payload_bin = self.encodenx(payload)
self.ser.write(payload_bin)
print("NSP: Sent =", payload_bin)
log("NSP: Nextion command sent = " + str(payload_bin), 3)
end
def send(payload)
var payload_bin = self.encode(payload)
if self.flash_mode==1
log("NSP: skipped command becuase still flashing", 3)
else
self.ser.write(payload_bin)
log("NSP: payload sent = " + str(payload_bin), 3)
end
end
def every_100ms()
import string
if self.ser.available() > 0
var msg = self.ser.read()
if size(msg) > 0
print("NSP: Received Raw =", msg)
if self.flash_mode==1
log("no flashing in this version")
else
# Recive messages using custom protocol 55 BB [payload length] [payload length] [payload] [crc] [crc]
if msg[0..1] == self.header
var lst = self.split_55(msg)
for i:0..size(lst)-1
msg = lst[i]
#var j = msg[2]+2
var j = size(msg) - 3
msg = msg[4..j]
if size(msg) > 2
var jm = string.format("{\"CustomRecv\":\"%s\"}",msg.asstring())
tasmota.publish_result(jm, "RESULT")
end
end
elif msg == bytes('000000FFFFFF88FFFFFF')
log("NSP: Screen Initialized")
else
var jm = string.format("{\"nextion\":\"%s\"}",str(msg[0..-4]))
tasmota.publish_result(jm, "RESULT")
end
end
end
end
end
end
var nextion = Nextion()
def get_current_version(cmd, idx, payload, payload_json)
import string
var version_of_this_script = 9
var jm = string.format("{\"nlui_driver_version\":\"%s\"}", version_of_this_script)
tasmota.publish_result(jm, "RESULT")
end
tasmota.add_cmd('GetDriverVersion', get_current_version)
def send_cmd(cmd, idx, payload, payload_json)
nextion.sendnx(payload)
tasmota.resp_cmnd_done()
end
tasmota.add_cmd('Nextion', send_cmd)
def send_cmd2(cmd, idx, payload, payload_json)
nextion.send(payload)
tasmota.resp_cmnd_done()
end
tasmota.add_cmd('CustomSend', send_cmd2)
```
Nachdem die autoexec.be erstellt wurde, den ESP32 einmal rebooten und nun MQTT einrichten. Ich habe hierbei anstelle der Nummerierung der NSPanels DEV geschrieben, also NSPanel_DEV als client und topic.
> **Den Schritt 5 der Anleitung (TFT-Flashen mit FlashNextion...) benötigt man nicht, da der ESP32 nicht mit einem Nextion-Display ausgestattet ist. Ab hier geht es dann mit Schritt 6 der normalen Anleitung weiter.**
Ich habe bei mir, um das ganze voneinander zu trennen, eine zweite JavaScript Instanz im ioBroker installiert. In diese zweite Instanz habe ich bei mir das NSPanel.TS Skript hinterlegt (Mit DEV im Dateinamen, damit man es sofort als DEV-Skript erkennt). In dem DEV-Skript müssen nun noch die folgenden Änderungen vorgenommen werden:
`const NSPanel_Path = '0_userdata.0.NSPanel.1.';` muss genändert werden. Ich habe bei mir die 1 durch DEV ersetzt. Weiterhin im Codeblock `export const config: Config` die folgenden Werte korrekt eintragen:
_panelRecvTopic_, _panelSendTopic_, _mrIcon1ScreensaverEntity_, _mrIcon2ScreensaverEntity_ (bei den beiden letzten entweder 'none' als Entity eintragen oder die POWER1 und POWER2 Endpunkte des echten NSPanels.
Das Skript nun speichern aber noch nicht ausführen.
## Installation des Nextion Editor
Zunächst braucht man noch den Nextion Editor:
> https://nextion.tech/nextion-editor/
sowie die HMI-Datei hier aus dem Repository (liegt im Verzeichnis HMI). Nachdem der Editor installiert ist, diesen Starten und die Datei nspanel.hmi im Nextion Editor öffnen. Anschließend im Editor oben auf Debug klicken. Es öffnet sich ein neues Fenster. Dort unten links von _Keyboard Input_ auf _User MCU Input_ umstellen, den COM-Port des ESP auswählen und die Baud-Rate auf 115200 stellen. Mit Start verbindet man sich nun zum ESP.
![image](https://user-images.githubusercontent.com/102996011/217225521-64546ca6-2b14-482d-b120-a9d5b5b93208.png)
Nun kann das DEV-Skript im ioBroker ausgeführt werden. Hat man alles richtig gemacht, erscheint nach kurzer Zeit die erste Seite im Nextion Editor.
Abschließend sollte man der noch den Kontrast für das DEV-Panel erhöhen:
Dazu im ioBroker den DP 0_userdata.0.NSPanel.DEV.NSPanel_Dimmode_brightnessDay auf 80 stellen (und ggf auch die brightnessNight). Ansonsten ist der Screensaver im Editor zu dunkel.
Nun hab Ihr ein vollständig klickbares, emuliertes NSPanel, in welchem Ihr eure neuen Seiten ohne Zugriff auf Euer echtes Panel bequem entwerfen und vertesten könnt. Wenn man dann mit seinen Änderungen zufrieden ist, kann man die Änderungen vom Skript nun in das Produktionsskript eintragen!
## Hinweise
**Noch ein paar Hinweise**:
* Die ESP32 Temperatur mit setOptions146 1 einschalten.
* Im Gengensatz zum "echten" NSPanel hat der Emulator-ESP32 keinen eingebauten Temperatursensor und auch keine eingebauten Buttons/Relais. Es kann somit keine Daten hierfür in die Datenpunkte transportieren. Um Fehler zu vermeiden, sollte im Datenpunkt:
`0_userdate.0.NSPanel.Dev.Sensor.ANALOG.Temperature`
ein Temperaturwert für die Raumtemperatur (z.B. 21) eingetragen werden.
* Ebenfalls sind die Werte für die Status Icons im Screensaver nicht vorhanden. Da der Emulator in der Regel ein bereits vorhandenes physisches NSPanel emuliert, können die MQTT-Pfade für die Relais-Icons auch auf das physische NSPanel verweisen.
**Viel Spaß mit dem Emulator!**

File diff suppressed because it is too large Load Diff

@@ -0,0 +1,17 @@
**UNDER CONSTRUCTIONS**
# Einleitung
Auf dieser Seite wollen wir Pages / Cards zeigen und wie sie erstellt sind. Wir werden hier als Ergänzung zu unseren Beispielen sowohl Basis-Pages wie zum Beispiel eine **CardUnlock** zeigen, als auch individuelle Pages / Cards.
Zu jedem Beispiel werden wir eine kurze Beschreibung anbieten, einen Screenshot, erforderliche Aliase beschreiben und die Card oder das `<PageItem>`. Sind zur Steuerung weitere Skripte (Blockly, JS-Skript, TS-Skript, etc.) erforderlich, bieten wir auch diese mit an.
Dieser Wiki-Eintrag soll auch von dem Leben, was aus der Community kommt.
***
# Auf geht's

@@ -0,0 +1,600 @@
# Servicemenü
> ab v3.9.0
**Das Menü ist in den Variablendefinitionen des TS-Script v3.9.0 enthalten, dient als Beispiel für eine Subpage-Gestaltung und kann beliebig angepasst werden. Die Aliase für dieses Beispiel legt das TS-Script, sofern setOption in der JavaScript-Adapter-Instanz angehakt ist, automatisch an.**
Im Zuge der weiteren Releases wird es sukzessive um künftige Funktionalitäten erweitert
## Service-Menü-Beispiel aus dem TypeScript (NSPanelTs.ts)
![Nextion_Editor_BPaGEZqrKZ](https://github.com/user-attachments/assets/3410b1af-1bbd-4aec-9982-b18c619af6ef)
## Aufbau des Service-Menüs
<img width="763" alt="Matrix Serviceseiten" src="picture/servicemenu/matrixServiceseiten.png">
## TypeScript (NSPanel.ts) Konstanten
nachfolgende Konstante ist für die Menüfarbe reserviert und kann individuell durch eigene RGB-Farbwerte angepasst werden.
```typescript
//Menu Icon Colors
const Menu: RGB = { red: 150, green: 150, blue: 100 };
```
## PageItem - Parameter
### colorScale
![picture/servicemenu/colorscale.png](picture/servicemenu/colorscale.png)
innerhalb des PageItems kann das Icon im Alias des Gerätetypen "info" ebenfalls einen Indikatorwert annehmen:
> _**Wenn colorScale im PageItem vorhanden ist, werden gesetzte `offColor` und `onColor` dabei ignoriert. Es wird dann auschließlich der Parameter colorScale ausgewertet.**_
```typescript
colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 50 }
```
> _**val_best ist hierbei Optional und stellt den Idealwert dar!**_
weiter Beispiele:
```typescript
{ id: AliasPath + 'Tasmota.Wifi.RSSI', name: 'RSSI', icon: 'signal', unit: '%', colorScale: {'val_min': 100, 'val_max': 0} },
{ id: AliasPath + 'Tasmota.Wifi.Signal', name: 'Wifi-Signal', icon: 'signal-distance-variant', unit: 'dBm', colorScale: {'val_min': 0, 'val_max': -100} },
{ id: AliasPath + 'Sensor.ANALOG.Temperature', name: 'Raum Temperatur', icon: 'home-thermometer-outline', unit: '°C', colorScale: {'val_min': 0, 'val_max': 40, 'val_best': 22 } },
{ id: AliasPath + 'Sensor.ESP32.Temperature', name: 'ESP Temperatur', icon: 'thermometer', unit: '°C', colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 50 } },
```
## TypeScript (NSPanel.ts) Variablendefinition
nachfolgend die Seiten- und Menüdefinition aus dem TS-Script ab v4.3.3
```typescript
/***********************************************************************************************
** Service Pages mit Auto-Alias (Nachfolgende Seiten werden mit Alias automatisch angelegt) **
** https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC **
***********************************************************************************************/
/* DE: German
Wenn das Service Menü abgesichert werden soll, kann eine cardUnlock vorgeschaltet werden.
Für diesen Fall ist folgende Vorgehensweise erforderlich:
- cardUnlock Seite "Unlock_Service" in der Config unter pages auskommentieren ("//" entfernen)
- Servicemenü aus pages "NSPanel_Service" unter pages kommentieren ("//" hinzufügen)
*/
/*************************************************************************************************
** Service pages with auto alias (subsequent pages are automatically created with alias) **
** https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC **
************************************************************************************************/
/* EN: English
If the service menu needs to be secured, a cardUnlock can be installed upstream.
In this case, the following procedure is required:
- comment out cardUnlock page "Unlock_Service" in the config under pages (remove "//")
- Comment service menu from pages "NSPanel_Service" under pages (add "//")
*/
//Level 0 (if service pages are used with cardUnlock)
let Unlock_Service: PageType = {
type: 'cardUnlock',
heading: findLocaleServMenu('service_pages'),
useColor: true,
items: [{ id: 'alias.0.NSPanel.Unlock', targetPage: 'NSPanel_Service_SubPage', autoCreateALias: true }],
};
//Level_0 (if service pages are used without cardUnlock)
let NSPanel_Service: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('service_menu'),
useColor: true,
items: [
{ navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', offColor: Menu, onColor: Menu, name: findLocaleServMenu('infos'), buttonText: findLocaleServMenu('more') },
{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: findLocaleServMenu('settings'), buttonText: findLocaleServMenu('more') },
{ navigate: true, id: 'NSPanel_Firmware', icon: 'update', offColor: Menu, onColor: Menu, name: findLocaleServMenu('firmware'), buttonText: findLocaleServMenu('more') },
{ id: AliasPath + 'Config.rebootNSPanel', name: findLocaleServMenu('reboot'), icon: 'refresh', offColor: MSRed, onColor: MSGreen, buttonText: findLocaleServMenu('start') },
],
};
//Level_0 (if service pages are used with cardUnlock)
let NSPanel_Service_SubPage: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('service_menu'),
useColor: true,
subPage: true,
parent: Unlock_Service,
home: 'Unlock_Service',
items: [
{ navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', offColor: Menu, onColor: Menu, name: findLocaleServMenu('infos'), buttonText: findLocaleServMenu('more') },
{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: findLocaleServMenu('settings'), buttonText: findLocaleServMenu('more') },
{ navigate: true, id: 'NSPanel_Firmware', icon: 'update', offColor: Menu, onColor: Menu, name: findLocaleServMenu('firmware'), buttonText: findLocaleServMenu('more') },
{ id: AliasPath + 'Config.rebootNSPanel', name: findLocaleServMenu('reboot'), icon: 'refresh', offColor: MSRed, onColor: MSGreen, buttonText: findLocaleServMenu('start') },
],
};
//Level_1
let NSPanel_Infos: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('nspanel_infos'),
useColor: true,
subPage: true,
parent: NSPanel_Service,
home: 'NSPanel_Service',
items: [
{ navigate: true, id: 'NSPanel_Wifi_Info_1', icon: 'wifi', offColor: Menu, onColor: Menu, name: findLocaleServMenu('wifi'), buttonText: findLocaleServMenu('more') },
{ navigate: true, id: 'NSPanel_Sensoren', icon: 'memory', offColor: Menu, onColor: Menu, name: findLocaleServMenu('sensors_hardware'), buttonText: findLocaleServMenu('more') },
{
navigate: true,
id: 'NSPanel_IoBroker',
icon: 'information-outline',
offColor: Menu,
onColor: Menu,
name: findLocaleServMenu('info_iobroker'),
buttonText: findLocaleServMenu('more'),
},
{ id: AliasPath + 'Config.Update.UpdateMessage', name: findLocaleServMenu('update_message'), icon: 'message-alert-outline', offColor: HMIOff, onColor: MSGreen },
],
};
//Level_2
let NSPanel_Wifi_Info_1: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('nspanel_wifi1'),
useColor: true,
subPage: true,
parent: NSPanel_Infos,
next: 'NSPanel_Wifi_Info_2',
items: [
{ id: AliasPath + 'ipAddress', name: findLocaleServMenu('ip_address'), icon: 'ip-network-outline', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Wifi.BSSId', name: findLocaleServMenu('mac_address'), icon: 'check-network', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Wifi.RSSI', name: findLocaleServMenu('rssi'), icon: 'signal', unit: '%', colorScale: { val_min: 100, val_max: 0 } },
{ id: AliasPath + 'Tasmota.Wifi.Signal', name: findLocaleServMenu('wifi_signal'), icon: 'signal-distance-variant', unit: 'dBm', colorScale: { val_min: 0, val_max: -100 } },
],
};
let NSPanel_Wifi_Info_2: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('nspanel_wifi2'),
useColor: true,
subPage: true,
prev: 'NSPanel_Wifi_Info_1',
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Tasmota.Wifi.SSId', name: findLocaleServMenu('ssid'), icon: 'signal-distance-variant', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Wifi.Mode', name: findLocaleServMenu('mode'), icon: 'signal-distance-variant', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Wifi.Channel', name: findLocaleServMenu('channel'), icon: 'timeline-clock-outline', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Wifi.AP', name: findLocaleServMenu('accesspoint'), icon: 'router-wireless-settings', offColor: Menu, onColor: Menu },
],
};
let NSPanel_Sensoren: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('sensors1'),
useColor: true,
subPage: true,
parent: NSPanel_Infos,
next: 'NSPanel_Hardware',
items: [
{
id: AliasPath + 'Sensor.ANALOG.Temperature',
name: findLocaleServMenu('room_temperature'),
icon: 'home-thermometer-outline',
unit: '°C',
colorScale: { val_min: 0, val_max: 40, val_best: 22 },
},
{
id: AliasPath + 'Sensor.ESP32.Temperature',
name: findLocaleServMenu('esp_temperature'),
icon: 'thermometer',
unit: '°C',
colorScale: { val_min: 0, val_max: 100, val_best: 50 },
},
{ id: AliasPath + 'Sensor.TempUnit', name: findLocaleServMenu('temperature_unit'), icon: 'temperature-celsius', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Sensor.Time', name: findLocaleServMenu('refresh'), icon: 'clock-check-outline', offColor: Menu, onColor: Menu },
],
};
let NSPanel_Hardware: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('hardware2'),
useColor: true,
subPage: true,
prev: 'NSPanel_Sensoren',
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Tasmota.Product', name: findLocaleServMenu('product'), icon: 'devices', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Hardware', name: findLocaleServMenu('esp32_hardware'), icon: 'memory', offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Display.Model', name: findLocaleServMenu('nspanel_version'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota.Uptime', name: findLocaleServMenu('operating_time'), icon: 'timeline-clock-outline', offColor: Menu, onColor: Menu },
],
};
let NSPanel_IoBroker: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('info_iobroker'),
useColor: true,
subPage: true,
parent: NSPanel_Infos,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'IoBroker.ScriptVersion', name: findLocaleServMenu('script_version_nspanelts'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'IoBroker.NodeJSVersion', name: findLocaleServMenu('nodejs_version'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'IoBroker.JavaScriptVersion', name: findLocaleServMenu('instance_javascript'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'IoBroker.ScriptName', name: findLocaleServMenu('scriptname'), offColor: Menu, onColor: Menu },
],
};
//Level_1
let NSPanel_Einstellungen: PageType = {
type: 'cardGrid',
heading: findLocaleServMenu('settings'),
useColor: true,
subPage: true,
parent: NSPanel_Service,
home: 'NSPanel_Service',
items: [
{
navigate: true,
id: 'NSPanel_Screensaver',
icon: 'monitor-dashboard',
offColor: Menu,
onColor: Menu,
name: findLocaleServMenu('screensaver'),
buttonText: findLocaleServMenu('more'),
},
{ navigate: true, id: 'NSPanel_Relays', icon: 'electric-switch', offColor: Menu, onColor: Menu, name: findLocaleServMenu('relays'), buttonText: findLocaleServMenu('more') },
{ id: AliasPath + 'Config.temperatureUnitNumber', icon: 'gesture-double-tap', name: findLocaleServMenu('temp_unit'), offColor: Menu, onColor: Menu, modeList: ['°C', '°F', 'K'] },
{
id: AliasPath + 'Config.localeNumber',
icon: 'select-place',
name: findLocaleServMenu('language'),
offColor: Menu,
onColor: Menu,
modeList: [
'en-US',
'de-DE',
'nl-NL',
'da-DK',
'es-ES',
'fr-FR',
'it-IT',
'ru-RU',
'nb-NO',
'nn-NO',
'pl-PL',
'pt-PT',
'af-ZA',
'ar-SY',
'bg-BG',
'ca-ES',
'cs-CZ',
'el-GR',
'et-EE',
'fa-IR',
'fi-FI',
'he-IL',
'hr-xx',
'hu-HU',
'hy-AM',
'id-ID',
'is-IS',
'lb-xx',
'lt-LT',
'ro-RO',
'sk-SK',
'sl-SI',
'sv-SE',
'th-TH',
'tr-TR',
'uk-UA',
'vi-VN',
'zh-CN',
'zh-TW',
],
},
{ navigate: true, id: 'NSPanel_Script', icon: 'code-json', offColor: Menu, onColor: Menu, name: findLocaleServMenu('script'), buttonText: findLocaleServMenu('more') },
],
};
//Level_2
let NSPanel_Screensaver: PageType = {
type: 'cardGrid',
heading: findLocaleServMenu('screensaver'),
useColor: true,
subPage: true,
parent: NSPanel_Einstellungen,
home: 'NSPanel_Service',
items: [
{ navigate: true, id: 'NSPanel_ScreensaverDimmode', icon: 'sun-clock', offColor: Menu, onColor: Menu, name: findLocaleServMenu('dimmode') },
{ navigate: true, id: 'NSPanel_ScreensaverBrightness', icon: 'brightness-5', offColor: Menu, onColor: Menu, name: findLocaleServMenu('brightness') },
{ navigate: true, id: 'NSPanel_ScreensaverLayout', icon: 'page-next-outline', offColor: Menu, onColor: Menu, name: findLocaleServMenu('layout') },
{ navigate: true, id: 'NSPanel_ScreensaverWeather', icon: 'weather-partly-rainy', offColor: Menu, onColor: Menu, name: findLocaleServMenu('weather') },
{ navigate: true, id: 'NSPanel_ScreensaverDateformat', icon: 'calendar-expand-horizontal', offColor: Menu, onColor: Menu, name: findLocaleServMenu('date_format') },
{ navigate: true, id: 'NSPanel_ScreensaverIndicators', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: findLocaleServMenu('indicators') },
],
};
//Level_3
let NSPanel_ScreensaverDimmode: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('dimmode'),
useColor: true,
subPage: true,
parent: NSPanel_Screensaver,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Dimmode.brightnessDay', name: findLocaleServMenu('brightness_day'), icon: 'brightness-5', offColor: Menu, onColor: Menu, minValue: 5, maxValue: 10 },
{ id: AliasPath + 'Dimmode.brightnessNight', name: findLocaleServMenu('brightness_night'), icon: 'brightness-4', offColor: Menu, onColor: Menu, minValue: 0, maxValue: 4 },
{ id: AliasPath + 'Dimmode.hourDay', name: findLocaleServMenu('hour_day'), icon: 'sun-clock', offColor: Menu, onColor: Menu, minValue: 0, maxValue: 23 },
{ id: AliasPath + 'Dimmode.hourNight', name: findLocaleServMenu('hour_night'), icon: 'sun-clock-outline', offColor: Menu, onColor: Menu, minValue: 0, maxValue: 23 },
],
};
//Level_3
let NSPanel_ScreensaverBrightness: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('brightness'),
useColor: true,
subPage: true,
parent: NSPanel_Screensaver,
home: 'NSPanel_Service',
items: [
{
id: AliasPath + 'ScreensaverInfo.activeBrightness',
name: findLocaleServMenu('brightness_activ'),
icon: 'brightness-5',
offColor: Menu,
onColor: Menu,
minValue: 20,
maxValue: 100,
},
{
id: AliasPath + 'Config.Screensaver.timeoutScreensaver',
name: findLocaleServMenu('screensaver_timeout'),
icon: 'clock-end',
offColor: Menu,
onColor: Menu,
minValue: 0,
maxValue: 60,
},
{ id: AliasPath + 'Config.Screensaver.screenSaverDoubleClick', name: findLocaleServMenu('wakeup_doublecklick'), icon: 'gesture-two-double-tap', offColor: HMIOff, onColor: HMIOn },
],
};
//Level_3
let NSPanel_ScreensaverLayout: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('layout'),
useColor: true,
subPage: true,
parent: NSPanel_Screensaver,
home: 'NSPanel_Service',
items: [
{
id: AliasPath + 'Config.Screensaver.alternativeScreensaverLayout',
name: findLocaleServMenu('alternative_layout'),
icon: 'page-previous-outline',
offColor: HMIOff,
onColor: HMIOn,
},
{ id: AliasPath + 'Config.Screensaver.ScreensaverAdvanced', name: findLocaleServMenu('advanced_layout'), icon: 'page-next-outline', offColor: HMIOff, onColor: HMIOn },
],
};
//Level_3
let NSPanel_ScreensaverWeather: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('weather_parameters'),
useColor: true,
subPage: true,
parent: NSPanel_Screensaver,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'ScreensaverInfo.weatherForecast', name: findLocaleServMenu('weather_forecast_offon'), icon: 'weather-sunny-off', offColor: HMIOff, onColor: HMIOn },
{ id: AliasPath + 'ScreensaverInfo.weatherForecastTimer', name: findLocaleServMenu('weather_forecast_change_switch'), icon: 'devices', offColor: HMIOff, onColor: HMIOn },
{
id: AliasPath + 'ScreensaverInfo.entityChangeTime',
name: findLocaleServMenu('weather_forecast_change_time'),
icon: 'cog-sync',
offColor: Menu,
onColor: Menu,
minValue: 15,
maxValue: 60,
},
{
id: AliasPath + 'Config.Screensaver.autoWeatherColorScreensaverLayout',
name: findLocaleServMenu('weather_forecast_icon_colors'),
icon: 'format-color-fill',
offColor: HMIOff,
onColor: HMIOn,
},
],
};
//Level_3
let NSPanel_ScreensaverDateformat: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('date_format'),
useColor: true,
subPage: true,
parent: NSPanel_Screensaver,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Config.Dateformat.Switch.weekday', name: findLocaleServMenu('weekday_large'), icon: 'calendar-expand-horizontal', offColor: HMIOff, onColor: HMIOn },
{ id: AliasPath + 'Config.Dateformat.Switch.month', name: findLocaleServMenu('month_large'), icon: 'calendar-expand-horizontal', offColor: HMIOff, onColor: HMIOn },
],
};
//Level_3
let NSPanel_ScreensaverIndicators: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('indicators'),
useColor: true,
subPage: true,
parent: NSPanel_Screensaver,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Config.MRIcons.alternateMRIconSize.1', name: findLocaleServMenu('mr_icon1_size'), icon: 'format-size', offColor: HMIOff, onColor: HMIOn },
{ id: AliasPath + 'Config.MRIcons.alternateMRIconSize.2', name: findLocaleServMenu('mr_icon2_size'), icon: 'format-size', offColor: HMIOff, onColor: HMIOn },
],
};
//Level_2
let NSPanel_Relays: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('relays'),
useColor: true,
subPage: true,
parent: NSPanel_Einstellungen,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Relay.1', name: findLocaleServMenu('relay1_onoff'), icon: 'power', offColor: HMIOff, onColor: HMIOn },
{ id: AliasPath + 'Relay.2', name: findLocaleServMenu('relay2_onoff'), icon: 'power', offColor: HMIOff, onColor: HMIOn },
],
};
//Level_2
let NSPanel_Script: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('script'),
useColor: true,
subPage: true,
parent: NSPanel_Einstellungen,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Config.ScripgtDebugStatus', name: findLocaleServMenu('debugmode_offon'), icon: 'code-tags-check', offColor: HMIOff, onColor: HMIOn },
{ id: AliasPath + 'Config.MQTT.portCheck', name: findLocaleServMenu('port_check_offon'), icon: 'check-network', offColor: HMIOff, onColor: HMIOn },
{ id: AliasPath + 'Config.hiddenCards', name: findLocaleServMenu('hiddencards_offon'), icon: 'check-network', offColor: HMIOff, onColor: HMIOn },
],
};
//Level_1
let NSPanel_Firmware: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('firmware'),
useColor: true,
subPage: true,
parent: NSPanel_Service,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'autoUpdate', name: findLocaleServMenu('automatically_updates'), icon: 'power', offColor: HMIOff, onColor: HMIOn },
{
navigate: true,
id: 'NSPanel_FirmwareTasmota',
icon: 'usb-flash-drive',
offColor: Menu,
onColor: Menu,
name: findLocaleServMenu('tasmota_firmware'),
buttonText: findLocaleServMenu('more'),
},
{
navigate: true,
id: 'NSPanel_FirmwareBerry',
icon: 'usb-flash-drive',
offColor: Menu,
onColor: Menu,
name: findLocaleServMenu('berry_driver'),
buttonText: findLocaleServMenu('more'),
},
{
navigate: true,
id: 'NSPanel_FirmwareNextion',
icon: 'cellphone-cog',
offColor: Menu,
onColor: Menu,
name: findLocaleServMenu('nextion_tft_firmware'),
buttonText: findLocaleServMenu('more'),
},
],
};
let NSPanel_FirmwareTasmota: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('tasmota'),
useColor: true,
subPage: true,
parent: NSPanel_Firmware,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Tasmota.Version', name: findLocaleServMenu('installed_release'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Tasmota_Firmware.onlineVersion', name: findLocaleServMenu('available_release'), offColor: Menu, onColor: Menu },
{ id: 'Divider' },
{
id: AliasPath + 'Config.Update.UpdateTasmota',
name: findLocaleServMenu('update_tasmota'),
icon: 'refresh',
offColor: HMIOff,
onColor: MSGreen,
buttonText: findLocaleServMenu('start'),
},
],
};
let NSPanel_FirmwareBerry: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('berry_driver'),
useColor: true,
subPage: true,
parent: NSPanel_Firmware,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Display.BerryDriver', name: findLocaleServMenu('installed_release'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Berry_Driver.onlineVersion', name: findLocaleServMenu('available_release'), offColor: Menu, onColor: Menu },
{ id: 'Divider' },
{
id: AliasPath + 'Config.Update.UpdateBerry',
name: findLocaleServMenu('update_berry_driver'),
icon: 'refresh',
offColor: HMIOff,
onColor: MSGreen,
buttonText: findLocaleServMenu('start'),
},
],
};
let NSPanel_FirmwareNextion: PageType = {
type: 'cardEntities',
heading: findLocaleServMenu('nextion_tft'),
useColor: true,
subPage: true,
parent: NSPanel_Firmware,
home: 'NSPanel_Service',
items: [
{ id: AliasPath + 'Display_Firmware.TFT.currentVersion', name: findLocaleServMenu('installed_release'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Display_Firmware.TFT.desiredVersion', name: findLocaleServMenu('desired_release'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Display.Model', name: findLocaleServMenu('nspanel_model'), offColor: Menu, onColor: Menu },
{ id: AliasPath + 'Config.Update.UpdateNextion', name: 'Nextion TFT Update', icon: 'refresh', offColor: HMIOff, onColor: MSGreen, buttonText: findLocaleServMenu('start') },
],
};
// End of Service Pages
```
## TypeScript (NSPanel.ts) Config
```typescript
export const config: Config = {
// Seiteneinteilung / Page division
// Hauptseiten / Mainpages
pages: [
NSPanel_Service, //Auto-Alias Service Page
//Unlock_Service, //Auto-Alias Service Page (Service Pages used with cardUnlock)
],
// Unterseiten / Subpages
subPages: [
//NSPanel_Service_SubPage, //Auto-Alias Service Page (only used with cardUnlock)
NSPanel_Infos, //Auto-Alias Service Page
NSPanel_Wifi_Info_1, //Auto-Alias Service Page
NSPanel_Wifi_Info_2, //Auto-Alias Service Page
NSPanel_Sensoren, //Auto-Alias Service Page
NSPanel_Hardware, //Auto-Alias Service Page
NSPanel_IoBroker, //Auot-Alias Service Page
NSPanel_Einstellungen, //Auto-Alias Service Page
NSPanel_Screensaver, //Auto-Alias Service Page
NSPanel_ScreensaverDimmode, //Auto-Alias Service Page
NSPanel_ScreensaverBrightness, //Auto-Alias Service Page
NSPanel_ScreensaverLayout, //Auto-Alias Service Page
NSPanel_ScreensaverWeather, //Auto-Alias Service Page
NSPanel_ScreensaverDateformat, //Auto-Alias Service Page
NSPanel_ScreensaverIndicators, //Auto-Alias Service Page
NSPanel_Relays, //Auto-Alias Service Page
NSPanel_Script, //Auto-Alias Service Page
NSPanel_Firmware, //Auto-Alias Service Page
NSPanel_FirmwareTasmota, //Auto-Alias Service Page
NSPanel_FirmwareBerry, //Auto-Alias Service Page
NSPanel_FirmwareNextion, //Auto-Alias Service Page
],
```

@@ -0,0 +1,179 @@
Starthilfe - Die häufigsten User-Fehler
# **Index**
**1.)** [Anleitung Update/Upgarde](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade)
**2.)** [Achtung!! Ändrungen bei Variablen und Konstanten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#type-änderungen)
**3.)** ["Waiting for Content" -> es geht nicht weiter](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#waiting-for-content---es-geht-nicht-weiter)
**4.)** [Berry-Driver nicht oder falsch installiert](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#berry-driver-nicht-oder-falsch-installiert)
**5.)** [MQTT Adaptereinstellungen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#mqtt-adapter-einstellungen)
**6.)** [Tasmota - MQTT Einstellungen ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#mqtt-tasmota-einstellungen)
**7.)** [der Datenpunkt "CustomSend" fehlt](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#customsend-fehlt)
## Hilfe bei Update / Upgrade
Variante für ein Update der NSPanelTS.ts
1. aktuelle Script anhalten
2. unter [diesen Link](https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts) das aktuelle Script kopieren
3. ein neues TS Script anlegen, als Name nutze ich immer NSPanel_Version z.B. NSPanel_43310
4. diese Parameter müssen als erstes angepasst werden
```typescript
/***** 1. Tasmota-Config *****/
// DE: Anpassen an die Verzeichnisse der MQTT-Adapter-Instanz
// EN: Adapt to the MQTT adapter instance directories
const NSPanelReceiveTopic: string = 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT';
const NSPanelSendTopic: string = 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend';
/***** 2. Directories in 0_userdata.0... *****/
// DE: Anpassen an das jeweilige NSPanel
// EN: Adapt to the respective NSPanel
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
```
5. jetzt starten wir zum erstenmal die neue Script Version, sie sollte ohne Fehlermeldung starten.
6. jetzt kopieren wir die eigenen Seiten aus den alten Script, vorher wird das neue Script gestoppt
Die eigenen Seiten werden zwischen diesen zwei Zeilen eingefügt.
```typescript
//-- Anfang für eigene Seiten -- z.T. selbstdefinierte Aliase erforderlich ----------------
//-- Start for your own pages -- some self-defined aliases required ----------------
//-- https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele
//-- ENDE für eigene Seiten -- z.T. selbstdefinierte Aliase erforderlich -------------------------
//-- END for your own pages -- some self-defined aliases required ------------------------
```
dann müssen die Pages auch in diesen Bereich eingefügt werden. Hauptseiten kommen zu den pages und die Unterseiten zu den subPages
```typescript
// Seiteneinteilung / Page division
// Hauptseiten / Mainpages
pages: [
NSPanel_Service //Auto-Alias Service Page
//Unlock_Service //Auto-Alias Service Page (Service Pages used with cardUnlock)
],
// Unterseiten / Subpages
subPages: [
NSPanel_Service_SubPage, //Auto-Alias Service Page (only used with cardUnlock)
NSPanel_Infos, //Auto-Alias Service Page
```
7. das Script starten und prüfen auf Fehlermeldungen, danach wird es wieder gestop.
8. jetzt kopieren wir noch die ScreensaverEntity, die Einstellungen für die Hardwarebutton und erstezen die im neuen Script
```typescript
/***********************************************************************
** **
** Screensaver Configuration **
** **
***********************************************************************/
```
### Type-Änderungen
mit der v4.3.3.30 gibt es Änderungen in der Syntax der Variablen und Konstanten im oberen Teil. Auch wenn die alte Nomenklatur nicht zu Fehlern führt, wird dennoch empfohlen nachfolgende Schritte durchzuführen:
9. Änderung der Config-Zeile
```
export const config = <Config> {
```
in
```
export const config: Config = {
```
ändern
10. Variablendeklaration im Vergleich
vorher:
```typescript
let Bad_Thermostat = <PageThermo>
{
'type': 'cardThermo',
'heading': 'Bad',
'items': [<PageItem>{
id: 'alias.0.NSPanel_1.Thermostat_Buero',
minValue: 50,
maxValue: 300,
stepValue: 5
}]
};
```
nachher:
```typescript
let Bad_Thermostat: PageType =
{
'type': 'cardThermo',
'heading': 'Bad',
'items': [{
id: 'alias.0.Haus.Erdgeschoss.Buero.Thermostate.Thermostat',
minValue: 50,
maxValue: 300,
stepValue: 5
}]
};
```
* In der oberen Zeile wird ` = <PageXYZ>` durch `: PageType =` ersetzt
* Das `<PageItem>` entfällt
****
Seht in den [Changelogs](https://github.com/joBr99/nspanel-lovelace-ui/wiki/Changelog) nach, ob es Änderungen im Config-Teil gegeben hat, ggf. müsst ihr eure Pages oder sonstigen Einstellungen anpassen. Prüft, ob das neue Script eine andere TFT-Firmware benötig bzw. einen anderen Berry-Treiber. Diese Info findet ihr in der zweiten Zeile des Scripts.
Wenn es zu diesen Änderungen kommt, weisen wir im Forum auch explizit darauf hin.
Deaktiviert das alte Script und behaltet es als Fallback.
Beim Start des neuen Script kann es eventuell zu Warnungen im Log kommen, wenn neue Datenpunkte angelegt werden. Startet das Script nochmal neu, dann sollte es ohne Warnungen starten.
## "Waiting for Content" - es geht nicht weiter
Hier liegt der Fehler sehr oft in den Einstellungen zur MQTT - Verbindung.
* Prüft als erstes die Einstellungen im MQTT - Adapter, vor allem der Port, dieser darf nicht doppelt genutzt werden, z.B. durch einen zweiten Adapter. Dazu gibt es im Script auch eine Funktion, die ein Portscan durchführt und das Ergebnis im Log ausgibt. Diesen Scan könnt ihr über das Servicemenü am Panel aktivieren (Einstellungen -> Script -> Port-Check) oder direkt im ioBroker unter 0_userdata.0.NSPanel.X.Config.MQTT.portCheck auf True setzen. Danach das Script neu starten und das Log auswerten.
* Vergleicht die Pfade im ioBroker vom MQTT - Adapter mit den Einstellungen im Script unter.
```typescript
const NSPanelReceiveTopic: string = 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT';
const NSPanelSendTopic: string = 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend';
```
Weiter unten findet ihr nochmal die Einstellung vom MQTT-Adapter und Tasmota.
## Berry-Driver nicht oder falsch installiert
## MQTT-Adapter Einstellungen
Bilder sagen meistens mehr als Worte. Wichtig ist, wenn User und Passwort vergeben worden sind, diese auch in Tasmota eingetragen werden müssen.
Hier wenn der Adapter als Server läuft
<img width="1186" alt="Bildschirmfoto 2023-09-26 um 18 08 54" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/70d8d600-d385-412d-8db2-17206509be55">
<img width="1186" alt="Bildschirmfoto 2023-09-26 um 18 09 05" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/bdc61937-2ea8-4dbf-9fad-472c893c0a77">
<img width="1186" alt="Bildschirmfoto 2023-09-26 um 18 09 22" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/f2c4e065-8c46-44d5-9aa7-a79096a3fc15">
****
Hier als Client
<img width="952" alt="Bildschirmfoto 2024-09-23 um 12 44 14" src="https://github.com/user-attachments/assets/39c29087-b56a-48e1-a8c6-608b1d375507">
<img width="952" alt="Bildschirmfoto 2024-09-23 um 12 43 49" src="https://github.com/user-attachments/assets/e8af9684-78bc-49e8-a2bb-608205887275">
***
## MQTT-Tasmota Einstellungen
* FULL TOPIC -> für eine sinnvolle Hierarchie sollte nicht die Vorgabe %prefix%/%topic% genutzt werden, sondern umgekehrt. Seht euch die beiden Bilder unten an und entscheidet selber.
[zurück zur Installtionsanleitung](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---Basisinstallation#4-mqtt-tasmota-config)
***
Hierarchie mit **Smarthome/%topic%/%prefix%**
<img width="402" alt="Bildschirmfoto 2023-09-26 um 18 38 06" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/7597c582-200f-4ace-baca-4acc5eff53cd">
Hierarchie mit **Smarthome/%prefix%/%topic%**
<img width="414" alt="Bildschirmfoto 2023-09-26 um 18 39 40" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/213d3d4a-0f72-423e-b5ff-273ed85d220a">
***
## "CustomSend" fehlt
[In der Basisinstallation gibt es drei Möglichkeiten](ioBroker---Basisinstallation.md#7-customsend-anlegen)
***

778
old/NSPanel-Tasmota-FAQ.md Normal file

@@ -0,0 +1,778 @@
## 1. Hardware-Buttons
***
### 1.1 Tasmota Rules
Tasmota verfügt über optional zu definierende Regeln (rules), die das System besonders flexibel einsetzbar machen.
https://tasmota.github.io/docs/Rules/
#### 1.1.1 Rule1 - Tasten zum navigieren nutzen
> **Bitte nicht verwenden, wenn Rule 2 mit buttonXPages belegt ist**
Wenn die Tasten zum Blättern durch die Seiten genutzt werden sollen, müssen folgende Änderungen durchgeführt werden. Mit dieser Rule kann die linke Taste eine Seite nach oben springen (Eigenschaft parent: ) und die rechte Taste zur Startseite bzw. auf die Seite die durch die Eigenschaft home: definiert wurde.
**In der Tasmota Konsole:**
```
Rule1 on Button1#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bUp"} endon on Button2#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bHome"} endon
Rule1 1
```
#### 1.1.2 Rule2 - Button universell nutzen
**Beide Hardware-Buttons als Dialog - Die internen Relais werden dabei nicht geschaltet**
```
Rule2 on Button1#state do Publish SmartHome/%topic%/tele/RESULT {"CustomRecv":"event,button1"} endon on Button2#state do Publish SmartHome/%topic%/tele/RESULT {"CustomRecv":"event,button2"} endon
```
**Linker Button Dialog - Rechter Button Schalter**
```
Rule2 on Button1#state do Publish SmartHome/%topic%/tele/RESULT {"CustomRecv":"event,button1"} endon
```
**Linker Button Schalter - Rechter Button Dialog**
```
Rule2 on Button2#state do Publish SmartHome/%topic%/tele/RESULT {"CustomRecv":"event,button2"} endon
```
Zum Anschalten der Rule
`Rule2` 1 oder `Rule2 On`
Zum Ausschalten der Rule
`Rule2` 0 oder `Rule2 Off`
**Nutzung in ioBroker:**
**Bis Version 4.0.4:**
Im Konfigurationsskript benötigt Ihr nun unter der **pages** Definition **buttonxPage**: (x=Nummer des Buttons).
Entweder gebt Ihr hier nun den var/const Name eines bestehenden Grid mit, damit kann man einen Button quasi als Home-Button nutzen, oder man legt einen eigenen Grid auf den Button, welcher dann zuvor definiert werden muss.
![image](https://user-images.githubusercontent.com/102996011/189394576-f470cba5-0fe6-4a46-97f6-0cd6c48a613b.png)
**Ab Version 4.0.4.1:**
Im Konfigurationsskript benötigt man in der **Config** Definition die Objekte **button1/button2**.
Der Button kann nun über die Eigenschaft **mode** mit drei verschiedenen Funktionen belegt werden. Der Modus **"page"** entspricht dem Verhalten in der Version 4.0.4 und früher. Der Button ruft dann die entsprechende Page oder SubPage auf welche hier angegeben wird.
Im Modus **"toggle"** muss ein Boolean Entity im Feld **"entity"** angegeben werden. Der Button wird dann automatisch den aktuellen Zustand umkehren.
Der Modus **"set"** benötigt ebenfalls eine Zielentity im Feld **"entity"**, welche dann immer beim drücken des Buttons auf den Wert aus dem Feld **"setValue"** gesetzt wird.
Bsp:
```
button1: {
mode: 'toggle', // Mögliche Werte wenn Rule2 definiert: 'page', 'toggle', 'set' - Wenn nicht definiert --> mode: null
page: null, // Zielpage - Verwendet wenn mode = page (bisher button1Page)
entity: '0_userdata.0.zielobjekt', // Zielentity - Verwendet wenn mode = set oder toggle
setValue: null // Zielwert - Verwendet wenn mode = set
}
```
#### 1.1.3 Rule3 - ESP-Buzzer
Der eingebaute Buzzer des ESP32 kann auch Geräusche zur Unterstützung der Tastenbetätigung erzeugen Hierzu muss folgende Rule angelegt und aktiviert werden:
`rule3 on CustomRecv do Buzzer 1 endon`
`rule3 1`
Alternativ gibt Tasmota noch folgende Befehle per Default mit:
`Buzzer 1`
oder
`Buzzer 1,2,3,0xF54`
> Weitere Infos:
> https://tasmota.github.io/docs/Buzzer/
#### 1.1.4 Startbildschirm bei disconnect
diese Regel blendet den Startbildschirm (drehender Kreis) ein, wenn das Panel die Verbindung zum ioBroker verloren hat.
```
rule1
ON CustomSend DO RuleTimer1 90 ENDON
ON Rules#RuleTimer=1 DO CustomSend pageType~pageStartup ENDON
rule1 1
```
***
### 1.2 Multipress Mode
Man kann die physische Hardware-Buttons auch im (Multi-Press Functions) betreiben.
`SetOption73 1`
![image](https://user-images.githubusercontent.com/102996011/189387787-664790aa-6db2-4322-98e3-6de77f4062fe.png)
Jeder Button sendet per /stat/RESULT "SINGLE", "DOUBLE", "TRIPLE", "QUAD" oder "PENTA". Somit hat man 5 mögliche Schaltzustände pro Button.
Da ein sechster Klick das WifiConfig 2 ausführt, sollte dabei ebenfalls
`SetOption1 1`
ausgeführt werden, um zu verhindern, dass der Wifi Manager ausgeführt wird.
> **(Rule2 dabei ausschalten)**
Falls du diese Funktion nutzen möchtest, kannst du das nachfolgende Blockly (siehe Spoiler) gerne verwenden:
![image](https://user-images.githubusercontent.com/102996011/189388435-a3c7177b-29ca-4808-a2a5-abde22ff4209.png)
<details>
<summary>Blockly Skript</summary>
```
<xml xmlns="https://developers.google.com/blockly/xml">
<variables>
<variable id="$%h)IyP*A]i!w|o;@^u~">PanelResult</variable>
<variable id="iG,DhTT3ntIL)6jkdBSx">Action</variable>
</variables>
<block type="on_ext" id="Z*WW:Hq=V/0/+D.7sBGj" x="88" y="63">
<mutation xmlns="http://www.w3.org/1999/xhtml" items="1"></mutation>
<field name="CONDITION">any</field>
<field name="ACK_CONDITION"></field>
<value name="OID0">
<shadow type="field_oid" id="s?5LPlVoKvrW,Gf/,d6(">
<field name="oid">default</field>
</shadow>
<block type="field_oid" id=";VZs-nq`+#GL`5jVspo^">
<field name="oid">mqtt.0.SmartHome.NSPanel_1.stat.RESULT</field>
</block>
</value>
<statement name="STATEMENT">
<block type="variables_set" id="W*-eYA4LLj$WMX1vlx9+">
<field name="VAR" id="$%h)IyP*A]i!w|o;@^u~">PanelResult</field>
<value name="VALUE">
<block type="convert_json2object" id="H}rYz*|_N_r:7lN6kRq)">
<value name="VALUE">
<block type="on_source" id="ks};I#sE9{y$Os12X3%`">
<field name="ATTR">state.val</field>
</block>
</value>
</block>
</value>
<next>
<block type="controls_if" id="|e+,CBW1}SywJvnEFroP">
<mutation elseif="1"></mutation>
<value name="IF0">
<block type="logic_compare" id="tkA^fRI!3FU^2Tiqlahc">
<field name="OP">EQ</field>
<value name="A">
<block type="text_getSubstring" id="k}-`K]@kua~8fg*?I[t#">
<mutation at1="true" at2="true"></mutation>
<field name="WHERE1">FROM_START</field>
<field name="WHERE2">FROM_START</field>
<value name="STRING">
<block type="on_source" id="qCOa@52xDIv4(R#:]Yzp">
<field name="ATTR">state.val</field>
</block>
</value>
<value name="AT1">
<block type="math_number" id="Ncm@lgRgVYVBF~^yWKRE">
<field name="NUM">3</field>
</block>
</value>
<value name="AT2">
<block type="math_number" id="Gov$3|Qrd91N~RUzWea=">
<field name="NUM">9</field>
</block>
</value>
</block>
</value>
<value name="B">
<block type="text" id="2~EGhvBs4KIPXXMcNVkx">
<field name="TEXT">Button1</field>
</block>
</value>
</block>
</value>
<statement name="DO0">
<block type="variables_set" id="G!Z=C5KTj-Nl+XFa0RU_">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
<value name="VALUE">
<block type="get_attr" id="Ed}{-}B{X+obkb^Mmk8O">
<value name="PATH">
<shadow type="text">
<field name="TEXT">Button2.Action</field>
</shadow>
<block type="text" id="-XSmbNSLD2q^JU.3)[(^">
<field name="TEXT">Button1.Action</field>
</block>
</value>
<value name="OBJECT">
<block type="variables_get" id="-%8e}:rqW1kj_iUDQyyf">
<field name="VAR" id="$%h)IyP*A]i!w|o;@^u~">PanelResult</field>
</block>
</value>
</block>
</value>
<next>
<block type="controls_if" id="729?J2a__sAP*2PmMN2%">
<mutation elseif="4"></mutation>
<value name="IF0">
<block type="logic_compare" id="u9lV/l]c1,yVRl3(21(L">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="kG0ARQ1j%HKz(I=l}`:P">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="v?m}nM1~E8zR0,Ja+if+">
<field name="TEXT">SINGLE</field>
</block>
</value>
</block>
</value>
<statement name="DO0">
<block type="comment" id="iqFwhe!^P0z9-W9D[tyh">
<field name="COMMENT">Schalte etwas: Button1 1x gedrückt</field>
<next>
<block type="debug" id="F22M/f@lJ_xQ$t2#QW[#">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="?r3.Wy5c@$3DxmvbIGr}">
<field name="TEXT">Button1 SINGLE wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF1">
<block type="logic_compare" id="[Vpq7B,RWb4k)Bhwq{nh">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="|Whz!$I5#Iym52Pg8N?p">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="~f_cI8hrs;I)wJ-S.G3r">
<field name="TEXT">DOUBLE</field>
</block>
</value>
</block>
</value>
<statement name="DO1">
<block type="comment" id="D;PPB54t87N)%F{.hQAx">
<field name="COMMENT">Schalte etwas: Button1 2x gedrückt</field>
<next>
<block type="debug" id="xoG/r3;33`8/j$QeZHW5">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="9PgW|#6f8``brbWQM9q7">
<field name="TEXT">Button1 DOUBLE wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF2">
<block type="logic_compare" id="t)8drGw=u/q0Pl+ul^43">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="-lf~?Q^H8o}J:cf@I5aN">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="Z!={5~.hF?V-NFw73|BL">
<field name="TEXT">TRIPLE</field>
</block>
</value>
</block>
</value>
<statement name="DO2">
<block type="comment" id="xjdh~X8eM8ab/a/JuIM/">
<field name="COMMENT">Schalte etwas: Button1 3x gedrückt</field>
<next>
<block type="debug" id="n$kU%^k3$wHN/L**K=jA">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="SA^R/OJX#a7JDhE7LwL[">
<field name="TEXT">Button1 TRIPLE wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF3">
<block type="logic_compare" id="ZCUeBK[Sc08KKQVMF)tC">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id=":Jlhv9(rM!D5H*eM|Gw-">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="6NH!g[HN7f=7_q%U10M!">
<field name="TEXT">QUAD</field>
</block>
</value>
</block>
</value>
<statement name="DO3">
<block type="comment" id="77*X9-*|mO]|P0$Jw=K`">
<field name="COMMENT">Schalte etwas: Button1 4x gedrückt</field>
<next>
<block type="debug" id="qE@`G.#9s!UAtrlMJ/yi">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="G:19{lKn)m`B!x(NUx5S">
<field name="TEXT">Button1 QUAD wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF4">
<block type="logic_compare" id="fz#2[~sK=iF%wd=4`hB,">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="ROFyrrPZn5KJg7?Hs),Z">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="a]-o=$vOr9JDr(T!#SmL">
<field name="TEXT">PENTA</field>
</block>
</value>
</block>
</value>
<statement name="DO4">
<block type="comment" id="fxPE82.Ci3L`ME=X3nl|">
<field name="COMMENT">Schalte etwas: Button1 5x gedrückt</field>
<next>
<block type="debug" id="7GbZ650het?k*+CCO:nr">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="*[}-a1hl?2pc^*@4E*hI">
<field name="TEXT">Button1 PENTA wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
</block>
</next>
</block>
</statement>
<value name="IF1">
<block type="logic_compare" id="8Ev:iPPfN3B?L^Q]oOIc">
<field name="OP">EQ</field>
<value name="A">
<block type="text_getSubstring" id="xx:q0nC7,q8A8~v?PC#s">
<mutation at1="true" at2="true"></mutation>
<field name="WHERE1">FROM_START</field>
<field name="WHERE2">FROM_START</field>
<value name="STRING">
<block type="on_source" id="JWC4m9/7dS^!]+xQ-I0Y">
<field name="ATTR">state.val</field>
</block>
</value>
<value name="AT1">
<block type="math_number" id="k7=j)18I6TmB%)upvAVJ">
<field name="NUM">3</field>
</block>
</value>
<value name="AT2">
<block type="math_number" id=",EKn%h/uX3}ZjCvmW1KE">
<field name="NUM">9</field>
</block>
</value>
</block>
</value>
<value name="B">
<block type="text" id="Uuj{UrX@-3nNjw{n!H/@">
<field name="TEXT">Button2</field>
</block>
</value>
</block>
</value>
<statement name="DO1">
<block type="variables_set" id="U~1k_f;62_-QkRvGZz=)">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
<value name="VALUE">
<block type="get_attr" id="izCz6K1Y;L.7M7MlHA$c">
<value name="PATH">
<shadow type="text">
<field name="TEXT">Button2.Action</field>
</shadow>
<block type="text" id="y1)^1#)QjYVVA7)mWdvM">
<field name="TEXT">Button2.Action</field>
</block>
</value>
<value name="OBJECT">
<block type="variables_get" id="TIg$Lr%^Fuk`fxDLC:,^">
<field name="VAR" id="$%h)IyP*A]i!w|o;@^u~">PanelResult</field>
</block>
</value>
</block>
</value>
<next>
<block type="controls_if" id="tC_APU:6jW5063/l=sR1">
<mutation elseif="4"></mutation>
<value name="IF0">
<block type="logic_compare" id="P9XXNXzc+3H{*^w1P_@q">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="sua/L8[qi8e:U#m}d^pi">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="E^e9/nh{n@)S6e:4q3_h">
<field name="TEXT">SINGLE</field>
</block>
</value>
</block>
</value>
<statement name="DO0">
<block type="comment" id="qoOw*}O|E06w[5[cXWLo">
<field name="COMMENT">Schalte etwas: Button2 1x gedrückt</field>
<next>
<block type="debug" id=",tE:-UWz(0Zqlc8KBLqO">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text" id="!waPZV$J9fR+dq462%h+">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="{3#KVO|*86E:3pR/!%WP">
<field name="TEXT">Button2 SINGLE wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF1">
<block type="logic_compare" id="_Z+eBL!Zj.|LQL+_s|Ld">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="15Tx7/a!(wJ;FO+x!4JW">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="}l%?@L+:Ma!=:d2Ky/%*">
<field name="TEXT">DOUBLE</field>
</block>
</value>
</block>
</value>
<statement name="DO1">
<block type="comment" id="~72fN$sZV!.O{%*0+awy">
<field name="COMMENT">Schalte etwas: Button2 2x gedrückt</field>
<next>
<block type="debug" id="-T4*$n8-_X_{@6!Ga5FQ">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="LFX2j}Pr:o,{$YxQVcp2">
<field name="TEXT">Button2 DOUBLE wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF2">
<block type="logic_compare" id="6-2Eew1,aoyC]Th*AaJ5">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="4Nl6[tYm2pL@rL7v8vLI">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="zthA#*kib2r|xv+,A{Sh">
<field name="TEXT">TRIPLE</field>
</block>
</value>
</block>
</value>
<statement name="DO2">
<block type="comment" id="?OI)q#8XL#1)x.E=*m~~">
<field name="COMMENT">Schalte etwas: Button2 3x gedrückt</field>
<next>
<block type="debug" id="%6ZLfC`!6?Z%jXlF:mFa">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="eh|tY,l}uz:WTx}4_G_E">
<field name="TEXT">Button2 TRIPLE wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF3">
<block type="logic_compare" id="*~f.cy|6d8U0s?|^%:8R">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="tiZ6%x5iuvhh:Yi*9qB9">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="I|K0m__6/:.kuBtYQE5l">
<field name="TEXT">QUAD</field>
</block>
</value>
</block>
</value>
<statement name="DO3">
<block type="comment" id="ToQ_dt~n$Ef|8-fb|__O">
<field name="COMMENT">Schalte etwas: Button2 4x gedrückt</field>
<next>
<block type="debug" id="qyb7DL~:^6|r@9~KOb+A">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="tb4wo7_n@J)Q9$FLf|rV">
<field name="TEXT">Button2 QUAD wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
<value name="IF4">
<block type="logic_compare" id="M:x`b;I}a8;jJU=g}u)[">
<field name="OP">EQ</field>
<value name="A">
<block type="variables_get" id="Yh,)fk$+WmVXS=iwbzK{">
<field name="VAR" id="iG,DhTT3ntIL)6jkdBSx">Action</field>
</block>
</value>
<value name="B">
<block type="text" id="1FMk3I`mfaAfEhMd$D#e">
<field name="TEXT">PENTA</field>
</block>
</value>
</block>
</value>
<statement name="DO4">
<block type="comment" id="5+tVGCf{MdkG(OBDmuy|">
<field name="COMMENT">Schalte etwas: Button2 5x gedrückt</field>
<next>
<block type="debug" id="}{-PVi#AL#[EGD,eb?M#">
<field name="Severity">log</field>
<value name="TEXT">
<shadow type="text">
<field name="TEXT">Button</field>
</shadow>
<block type="text" id="HuBkD3zi|o@.S3w.Qh7n">
<field name="TEXT">Button2 PENTA wurde gedrückt</field>
</block>
</value>
</block>
</next>
</block>
</statement>
</block>
</next>
</block>
</statement>
</block>
</next>
</block>
</statement>
</block>
</xml>
```
</details>
In der ersten Zeile musst du lediglich deine stat/RESULT anpassen und an den entsprechenden Kommentaren deine Aktoren einbauen.
Da das Hardware-Buttons sind werden die extern verarbeitet (nicht über das TS-Skript)
***
### 1.3 Shuttermode
Um die zwei Hardware-Buttons direkt in eine Rollladensteuerung umzuwandeln sind folgende Schritte erforderlich
In der Tasmota-Konsole folgende Konfigurationen einstellen:
> `SetOption80 1`
> `ShutterRelay1 1`
> `Interlock 1,2`
> `Interlock ON`
![image](https://user-images.githubusercontent.com/102996011/189386244-7d4fa7d3-de96-4608-975d-8c5853e2e721.png)
Für Shutter mode 1:
> `Rule2 0`
> `SetOption73 0`
> `SetOption114 0`
Wenn du einen anderen brauchst, dann entsprechend der Anleitung vorgehen:
https://tasmota.github.io/docs/Blinds-and-Shutters/
Da kann man die auch kalibrieren.
***
### 1.4 Switchmode
Die Hardware Buttons sind im Blakadder-Template als "Buttons" konfiguriert.
![image](https://user-images.githubusercontent.com/102996011/189384620-7bd59a70-d807-451b-84d3-bf40b9b0c1d8.png)
> **SwitchMode gilt, wie der Name schon sagt, NUR für GPIO, das in Tasmota als Switch<x>-Komponente konfiguriert ist. SwitchMode hat KEINEN Einfluss auf das Verhalten von GPIO, das als Button<x>-Komponenten konfiguriert ist.**
**Der GPIO14 und der GPIO27 sind "Button<x>" (x=1 und 2)**
Um die Tasmota-Switchmode-Funktion für die Hardware-Buttons zu nutzen, müssen die Button GPIO's in Tasmota zu Switch GPIO's umkonfiguriert werden:
![image](https://user-images.githubusercontent.com/102996011/189382319-3830b438-2e4c-40c8-930e-46177d48b146.png)
![image](https://user-images.githubusercontent.com/102996011/189382449-5d870f37-10b8-4f59-8ea1-8a38aa8d3a0b.png)
Für einen ganz normalen Taster (gedrückt an/loslassen aus) wären optional folgende Einstellungen notwendig
Alternativ folgendes Template aktivieren
```
{"NAME":"NSPanel_1","GPIO":[0,0,0,0,3872,0,0,0,0,0,160,0,0,0,0,225,0,480,224,1,0,0,0,161,0,0,0,0,0,0,0,0,0,0,4736,0],"FLAG":0,"BASE":1}
```
Danach in der Tasmota-Konsole
> `switchmode1 2`
> `switchmode2 2`
ausführen
***
## 2. Sensoren
Das NSPanel verfügt über interne Temperatur-Sensoren:
![image](https://user-images.githubusercontent.com/102996011/199740914-acabb5b8-1684-449a-aab3-a9a0790a5c27.png)
* Die Analog1 Temperatur ist die gemessene Raumtemperatur über den verbauten Temperatursensor an der Unterseite des NSPanel's.
* ESP32 Temperature ist die Temperatur des ESP32-Prozessor
***
### 2.1 Interner Raum-Temperatursensor
![image](https://user-images.githubusercontent.com/102996011/199742686-8d1e6575-7407-4f4f-a1bd-aa0e68882792.png)
Um den internen Temperatursensor benutzen zu können, muss dieser in der Regel zuerst kalibriert werden. Hierzu benötigst du ein Thermometer, welches dir die Referenztemperatur liefert.
Die Werte können in der Tasmota-Console mit AdcParam<x> justiert werden. Folgende Einstellungen konnten bisher brauchbare Ergebnisse liefern (ggfs. weiter anpassen):
`AdcParam 2,14600,10000,3950`
oder
`AdcParam 2,15880,10000,3950`
> siehe auch: https://tasmota.github.io/docs/ADC/
> Das größte Problem ist die Hitzeentwicklung durch das Display selbst. Wenn das Display auf volle Helligkeit eingestellt ist, ist der Sensormesswert 2-4°C höher (oder sogar noch höher). Bei einem Dimmwert von 8 relativiert sich der Temperaturunterschied.
Ansonsten bietet es sich an, für eine exaktere Raumtemperatur einen zentralen, externen Raumtemperatur-Sensor (z.B. Zigbee) zu verwenden und den Datenpunkt über einen Alias vom Gerätetyp "Info" in z.B. einer cardEntities zu visualisieren.
***
### 2.2 Interner ESP32-Temperatursensor
Der interne ESP-Temperatursensor war bis zur Tasmota Version < 12.2.0 noch per "default" angeschaltet.
Um diese Temperatur mit den Sensordaten zu übertragen ist jetzt eine zusätzliche Konfiguration über die Tasmota-Console erforderlich:
`setOption146 1`
***
## 3. Tasmota Update Probleme
### 3.1. Fehler -> Updatedatei größer als Speicherplatz
Wenn Tasmota in einer Version installiert wurde, bevor es im Tasmota "Safeboot" gab, dann haben die Devices zwei gleich große Partitionen (keine kleinere Safeboot). In diesem Fall kann die Partition mit dem Partition Wizard Tool korrigiert werden und es ist keine Neuinstallation erforderlich
> **Warum tritt dieser Fehler auf?:**
> Mit Tasmota 13.0 ist die Unterstützung für Matter nun standardmäßig enthalten, was bedeutet, dass die Tasmota-Binärdateien nun die Größe der beiden gleich großen Partitionen vor dem Safeboot-Partitionierungsschema überschreiten. Daher muss zunächst das Setup auf das Safeboot-Layout aktualisieren werden.
Vorher
![Speicher ESP32 vorher](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/47cd1923-a0a5-4795-b287-b6cd3839e2b5)
Nachher
![Speicher ESP32 danach](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/bca6254c-b240-4d01-9d0b-3b2e0fa5e58f)
Auf der [Tasmota Seite](https://tasmota.github.io/docs/Tasmota-Application/#partition-management) ist eine Kurzbeschreibung und ihr könnt dort den Wizards downloaden.
Direkt Link zum Download [Partition Wizard Tool](https://raw.githubusercontent.com/arendst/Tasmota/development/tasmota/berry/modules/Partition_Wizard.tapp)
### 3.2. Fehler bei FlashNextion -> Type-Error unsupported operand type(s)
`BRY: Exception> 'type_error' - unsupported operand type(s) for <: 'nil' and 'int'`
Tritt selten auf wenn eine feste IP vergeben wurde. Lässt sich lösen in dem die IP kurzeitig über den DHCP bezogen wird.
Danach kann die IP wieder fest vergeben werden.
* Feste (statische) IP des NSPanels merken
* Jetzt alles weitere in der Tasmota-Konsole ausführen:
`backlog savedata 1; ipaddress1 0.0.0.0; savedata 0; restart 1`
dann
`FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-vx.x.x.tft`
die TFT-Frmware sollte sich jetzt wieder flashen lassen
und dann, wenn durchgelaufen, wieder mit der gemerkten statischen IP einstellen
`ipaddress1 192.168.X.X`
### 3.3 Fehler bei FlashNextion -> TFT Firmware lässt sich mit Tasmota 14.x nicht flashen
Fehler beim flashen des Nextion Displays mit Lovelace UI, vornehmlich bei Tasmota Versionen > 14.0.0
In seltenen Fällen startet der Flashvorgang nicht mit dem Befehl
`FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-vx.x.x.tft`
Der Flashvorgang bleibt auf dem Display bei der Meldung **writing Data** stehen.
In der Konsole von Tasmota wird es so oder so ähnlich ausgegeben
```
CMD: FlashNextionAdv0 http://nspanel.pky.eu/lui.tft
RSL: RESULT = {"FlashNextionAdv":"Done"}
FLH: host: nspanel.pky.eu, port: 80, get: /lui.tft
FLH: Send (High Speed) flash start
FLS: Something has gone wrong flashing display firmware [bytes('85')].
```
Richtig wäre es wie hier ( https://www.youtube.com/watch?v=ZPLJk2ZLo_8 ) ab 11:23 min zu sehen, das der Flashvorgang auf dem Display beginnt und in der Tasmota-Konole so ausgegeben wird.
Auch kann es sein das auf dem Display die Info ausgegeben wird, `Model does not match` welches dann weiß hinterlegt ist und in der Tasmota - Konsole erscheint wie folgt:
```
CMD: FlashNextion http://nspanel.pky.eu/lui.tft
RSL: RESULT = {"FlashNextion":"Done"}
FLH: host: nspanel.pky.eu, port: 80, get: /lui.tft
FLH: Send (High Speed) flash start
RSL: RESULT = {"Flashing":{"complete": 0, "time_elapsed": 0}}.
```
Die letzten Hinweise haben ergeben, das ein donwgrade auf Tasmota 13.4.0 nötig ist, um die TFT-Firmware zu flashen.
Danke an bob den 1. für die kurze Zusammenfassung. Der Beitrag wird bei neuen Erkenntnissen durch uns aktualisiert.

@@ -0,0 +1,3 @@
!!! DIese Seite bfindet sich im Aufbau !!!
Player in Überarbeitung

@@ -0,0 +1,100 @@
**Inhalt:**
* [Aufbau des Bose Soundtouch Players](#aufbau-des-sonos-players)
* [Player im Live-Betrieb](#player-im-live-betrieb)
* [Bedienungselemente / Anzeigen](#bedienungselemente--anzeigen)
* [Erstellung der Seitenvariable für die cardMedia](#erstellung-der-seitenvariable-f%C3%BCr-die-cardmedia)
* [Standard Beispielvorlage für AlwaysOnDisplay](#standard-beispielvorlage-f%C3%BCr-alwaysondisplay)
# Aufbau des BOSE Soundtouch Players
**(vollständig ab NSPanelTs.ts - Version 4.3.3.35)**
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/1eb51685-554c-41c8-b665-f17e7cf2cb8a)
## Player im Live-Betrieb:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/40d49ed5-b6a7-49aa-b5bb-b019295e25df)
## Bedienungselemente / Anzeigen
### 1. Seitentitel
Der Seitentitel steht auf:
* der dem Parameter "heading" aus der Seitenvariable der cardMedia (z.B. Bose Soundtouch).
### 2. Navigation zur nächsten Seite
* siehe [Navigation](ioBroker-Navigation)
### 3. Track (Elapsed|Duration)
Zeigt die folgenden Datenpunkte der aktiven Bose Soundtouch Adapterinstanz:
* Titel --> bosesoundtoch.0.nowPlaying.track
* Verstrichene Zeit (Minuten/Sekunden) des aktuell abgespielten Titels --> `bosesoundtoch.0.nowPlaying.elapsed`
* Gesamtlänge (Minuten/Sekunden) des aktuell abgespielten Titels --> `bosesoundtoch.0.nowPlaying.total`
### 4. Interpret | Album
Folgende Datenpunkte der Bose Soundtouch Adapterinstanz werden berücksichtigt:
* Interpret --> `bosesoundtoch.0.nowPlaying.artist` (beim Abspielen von Radiosendern abweichende Informationen zum Sender)
* Album --> `bosesoundtoch.0.nowPlaying.album` (beim Abspielen von Radiosendern abweichende Informationen zum Sender)
### 5. Player An/Aus (Stop)
* Stop (Icon blau) --> `bosesoundtoch.0.key` mit Wert 'POWER' (beim Abspielen weiß)
### 6. Volume lauter
* Die Feinjustierung der aktuellen Lautstärke in Einerschritten (+1) --> Datenpunkt: `bosesoundtoch.0.volume`
### 7. Volume zwischen 0% und 100%
* Die Feinjustierung der aktuellen Lautstärke erfolgt stufenlos zwischen 0% und 100% --> Datenpunkt: `bosesoundtoch.0.volume`
### 8. Repeat-Funktion
* Es sind keine weiteren Einstellungen zu berücksichtigen. Der Datenpunkt `bosesoundtoch.0.key` wird genutzt und inkrementiert die Werte `REPEAT_OFF`, `REPEAT_ALL` und `REPEAT_ONE`
> [!NOTE]
> Nicht jeder Bose Soundtouch verfügt via Adapter über die Funktion Repeat
### 9. Bose Playlist (Sources + Aux)
* Die möglichen Sources werden aus dem Adapter extrahiert. Optional wird AUX_INPUT verwendet.
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/24cddef1-110b-4d6d-b9f6-70795c935fbd)
### 10. Bose Speaker Liste
* Das Array speakerList im PageItem wird genutzt. Die Wiedergabegeräte sind dort manuell einzutragen
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/3defa87f-d33b-41ad-aaab-5cbfef190669)
### 11. Nächster Track
* Sofern ein weiterer Titel in der Track Liste verfügbar ist, so wird dieser ausgewählt --> `bosesoundtoch.0.key` mit NEXT_TRACK
### 12. Play / Pause
* Umschaltung mittels des Datenpunktes ``bosesoundtoch.0.key` mit PLAY_PAUSE`
### 13. Volume leiser
* Die Feinjustierung der aktuellen Lautstärke in Einerschritten (-1) --> Datenpunkt: `bosesoundtoch.0.volume`
### 14. Shuffle
* Umschaltung zwischen den Datenpunkten `bosesoundtoch.0.key` mit SHUFFLE_ON und SHUFFLE_OFF
> [!NOTE]
> Diese Funktion ist nicht in jedem Bose Soundtouch Gerät verfügbar
### 15. Vorheriger Track
* Sofern ein weiterer Track vor dem aktuell abgespielten Titel in der Track Liste verfügbar ist, so wird dieser ausgewählt --> `bosesoundtoch.0.key` mit PREV_TRACK
### 16. Navigation zur vorherigen Seite
* siehe [Navigation](ioBroker-Navigation)
# Erstellung der Seitenvariable für die cardMedia
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/93ae8ff5-3ffa-40b4-b5ba-fb51c4aa5873)
## Standard Beispielvorlage für AlwaysOnDisplay
> [!CAUTION]
>```TypeScript
>let BoseSoundtouch: PageType =
>{
> 'type': 'cardMedia',
> 'heading': 'Bose Soundtouch',
> 'items': [{
> id: AliasPath + 'Media.PlayerBoseSoundtouch',
> adapterPlayerInstance: "bosesoundtouch.0.",
> speakerList: ['Wohnzimmer'],
> playList: [],
> colorMediaIcon: White,
> colorMediaArtist: Yellow,
> colorMediaTitle: Yellow,
> alwaysOnDisplay: true,
> autoCreateALias: true
> }]
>};
>```

@@ -0,0 +1,283 @@
**Inhalt:**
* [Aufbau des SONOS Players](#aufbau-des-sonos-players)
* [Player im Live-Betrieb](#player-im-live-betrieb)
* [Bedienungselemente / Anzeigen](#bedienungselemente--anzeigen)
* [Erstellung der Seitenvariable für die cardMedia](#erstellung-der-seitenvariable-f%C3%BCr-die-cardmedia)
* [Variablen Beispiele](#variablen-beispiele)
* [Standard Beispielvorlage für AlwaysOnDisplay](#standard-beispielvorlage-f%C3%BCr-alwaysondisplay)
* [Standard Beispielvorlage ohne AlwaysOnDisplay](#standard-beispielvorlage-ohne-alwaysondisplay)
* [Erstellung der Sonos Listen](#erstellung-der-sonos-listen)
* [Speaker Liste (Array speakerList)](#speaker-liste-array-speakerlist)
* [Favoriten Liste](#favoriten-liste)
* [Individuelle Wiedergabe Liste (Array playList)](#individuelle-wiedergabe-liste-array-playlist)
* [Der Auto-Alias](#der-auto-alias)
* [cardMedia Sonos FAQ](#cardmedia-sonos-faq)
# Aufbau des SONOS Players
**(vollständig ab NSPanelTs.ts - Version 4.3.3.17)**
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/0dfa98e2-ed5a-4dfc-97b8-016779633a9b)
## Player im Live-Betrieb:
![Nextion_Editor_OU5vhqrVgr](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/6d051f61-bcfb-40ac-84fd-abfcb34f62fe)
und mit **den beiden alternativen Einstellungen** für:
* den Equalizer und
* die Crossfade-Funktion
![Nextion_Editor_UYuOfvSHCY](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/08fb83b9-f4d3-45de-9f53-8bdd616711df)
## Bedienungselemente / Anzeigen
### 1. Seitentitel
Der Seitentitel steht auf:
* der dem Parameter "heading" aus der Seitenvariable der cardMedia (z.B. Sonos Player), wenn keine Wiedergabe erfolgt oder wenn das Wiedergabegerät über die Sonos-Adapterinstanz (z.B. sonos.0.) im Datenpunkt `sonos.0.root.<DEVICE_IP>.current_type` auf track(0) steht
* `sonos.0.root.<DEVICE_IP>.current_station` wenn ein Radiosender gewählt wurde
### 2. Navigation zur nächsten Seite
* siehe [Navigation](ioBroker-Navigation)
### 3. Track (Elapsed|Duration)
Zeigt die folgenden Datenpunkte der aktiven Sonos Adapterinstanz wenn der Wert des Datenpunktes `sonos.0.root.<DEVICE_IP>.current_type` auf track(0) steht:
* Titel --> sonos.0.root.<DEVICE_IP>.current_title
* Verstrichene Zeit (Minuten/Sekunden) des aktuell abgespielten Titels (nicht bei Radio) --> `sonos.0.root.<DEVICE_IP>.current_elapsed_s`
* Gesamtlänge (Minuten/Sekunden) des aktuell abgespielten Titels (nicht bei Radio) --> `sonos.0.root.<DEVICE_IP>.current_duration_s`
> [!IMPORTANT]
> Die Aktualisierung in Sekunden steht in Abhängigkeit zur Sonos Adapterinstanz `Aktualisierung des Lied-Timers` und steht per Default auf 2000ms.
> ![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/6770fd4c-271f-499e-a935-7e2217631ea9)
### 4. Interpret | Album
Folgende Datenpunkte der Sonos Adapterinstanz werden berücksichtigt:
* Interpret --> `sonos.0.root.<DEVICE_IP>.current_artist` (beim Abspielen von Radiosendern abweichende Informationen zum Sender)
* Album --> `sonos.0.root.<DEVICE_IP>.current_album` (beim Abspielen von Radiosendern abweichende Informationen zum Sender)
### 5. Player An/Aus (Stop)
* Stop (Icon blau) --> `sonos.0.root.<DEVICE_IP>.stop` (beim Abspielen weiß)
### 6. Volume lauter
* Die Feinjustierung der aktuellen Lautstärke in Einerschritten (+1) --> Datenpunkt: `sonos.0.root.<DEVICE_IP>.volume`
### 7. Volume zwischen 0% und 100%
* Die Feinjustierung der aktuellen Lautstärke erfolgt stufenlos zwischen 0% und 100% --> Datenpunkt: `sonos.0.root.<DEVICE_IP>.volume`
> [!NOTE]
> Volume zieht das Volumen einer Gruppe beim Einsatz einer Sonos-Box mit. Wenn das Group-Volume (`sonos.0.root.<DEVICE_IP>.group_volume`) benötigt wird, so ist der Datenpunkt nach Erstellung des Auto-Alias entsprechend zu ändern.
> ![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/27165f31-9d25-4921-98b9-1c3a7e46cf82)
> ![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/ca9c5cd2-1fa0-467e-ae01-5dc968b26e63)
### 8. Repeat-Funktion
* Es sind keine weiteren Einstellungen zu berücksichtigen. Der Datenpunkt `sonos.0.root.<DEVICE_IP>.repeat` wird genutzt und inkrementiert die Werte `none(0)`, `all(1)` und `one(2)`
### 9. SONOS Favoriten (Alternativ Equalizer)
> [!NOTE]
> Dieses Steuerelement kann unterschiedliche Eigenschaften annehmen
#### Steuerelement als SONOS Favoriten:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/2cedade5-89ca-46bf-a8d8-5e4e4c2c3573)
Das PageItem enthält keinen equalizerString --> Die Favoriten werden automatisch aus dem Datenpunkt: `sonos.0.root.<DEVICE_IP>.favorites_list_array` extrahiert:
> [!CAUTION]
> ```typescript
> let Sonos: PageType =
> {
> 'type': 'cardMedia',
> 'heading': 'Sonos',
> 'items': [{
> id: AliasPath + 'Media.PlayerSonos',
> adapterPlayerInstance: 'sonos.0.',
> mediaDevice: '192_168_1_212',
> speakerList: ['Terrasse'],
> playList: ['Hartmann','Armilars Playlist'],
> colorMediaIcon: colorSonos,
> colorMediaArtist: Yellow,
> colorMediaTitle: Yellow,
> alwaysOnDisplay: true,
> autoCreateALias: true
> }]
> };
> ```
#### Steuerelement als Equalizer:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/66ef5685-e7de-43e5-a574-84e15779799f)
* Innerhalb des `PageItem` wird der `Equalizer` und in diesem Beispiel ebenfalls der Parameter `crossfade` definiert:
> [!CAUTION]
> ```typescript
> let Sonos: PageType =
> {
> 'type': 'cardMedia',
> 'heading': 'Sonos',
> 'items': [{
> id: AliasPath + 'Media.PlayerSonos',
> adapterPlayerInstance: 'sonos.0.',
> mediaDevice: '192_168_1_212',
> speakerList: ['Terrasse'],
> playList: ['Hartmann','Armilars Playlist'],
> equalizerList: ['Bassboost','Klassik','Dance', 'Deep', 'Electronic', 'Flat', 'Hip-Hop', 'Rock',
> 'Metal', 'Jazz', 'Latin', 'Tonstärke', 'Lounge', 'Piano'],
> colorMediaIcon: colorSonos,
> colorMediaArtist: Yellow,
> colorMediaTitle: Yellow,
> crossfade: true,
> alwaysOnDisplay: true,
> autoCreateALias: true
> }]
> };
> ```
> [!IMPORTANT]
> Die Sonos Adapterinstanz verfügt nicht über Klangsteuerungs-Datenpunkte. Es kann jedoch die SONOS HTTP API https://github.com/jishi/node-sonos-http-api#usage genutzt werden.
>
> Für den Fall, dass der Equalizer zum Einsatz kommt, bitte weiteren Link befolgen: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#12-equalizer-f%C3%BCr-cardmedia
> [!Note]
> siehe auch [Erstellung der Sonos Favoriten](#favoriten-liste)
### 10. Track Liste
* Sofern der Datenpunkt `sonos.0.root.<DEVICE_IP>.queue` Daten enthält und die abspielbaren Medien eine Trackliste enthalten, so wird diese automatisch geladen.
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/44c5b0b6-7bbd-4372-ad8e-244f5e9bb729)
> [!NOTE]
> Sollten weitere Tracks vorhanden sein, so können diese über den rechtsangeordneten Pfeil erreicht werden
### 11. SONOS Playlist
* Das Array playList im PageItem wird genutzt. Die Playlists sind dort manuell einzutragen
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/7a544d32-7fe1-45f8-b9fb-50ad5a259628)
> [!NOTE]
> siehe auch [Erstellung einer Sonos Playlist](#individuelle-wiedergabe-liste-array-playlist)
### 12. SONOS Speaker Liste
* Das Array speakerList im PageItem wird genutzt. Die Wiedergabegeräte sind dort manuell einzutragen
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/da4e95e3-9091-43da-9712-744e85a30c0c)
> [!NOTE]
> siehe auch [Erstellung einer speakerList](#speaker-liste-array-speakerlist)
### 13. Nächster Track
* Sofern ein weiterer Titel in der Track Liste verfügbar ist, so wird dieser ausgewählt --> `sonos.0.root.<DEVICE_IP>.next`
### 14. Play / Pause
* Umschaltung zwischen den Datenpunkten `sonos.0.root.<DEVICE_IP>.play` und `sonos.0.root.<DEVICE_IP>.pause`
### 15. Volume leiser
* Die Feinjustierung der aktuellen Lautstärke in Einerschritten (-1) --> Datenpunkt: `sonos.0.root.<DEVICE_IP>.volume`
### 16. Shuffle
* Umschaltung zwischen den Datenpunkten `sonos.0.root.<DEVICE_IP>.shuffle` als wahr/falsch (true/false)
> [!NOTE]
> Diese Funktion ist nicht steuerbar, wenn Radiosender abgespielt werden
### 17. Vorheriger Track
* Sofern ein weiterer Track vor dem aktuell abgespielten Titel in der Track Liste verfügbar ist, so wird dieser ausgewählt --> `sonos.0.root.<DEVICE_IP>.prev`
### 18. Player Logo / Seek Funktion (Alternativ Crossfade)
Per Standard ist der Seek-Modus aktiv. Dieser wird mit Klick auf das Logo des Players aufgerufen:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/f78a8093-351f-4a5f-b58b-415f78bf4e2d)
Jetzt ist es möglich eine Position des Tracks (Titels) in 10% Schritten zu erreichen (vor- und zurückspulen).
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/ee9ce338-5c0e-465d-935c-df55adf8642c)
> [!NOTE]
> Wird im PageItem der Parameter
> `crossfade: true`
> verwendet, dann wird statt der Seek-Funktion Crossfade zur Auswahl aktiv
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/7d2387fa-b943-4540-ae7e-efbb2c98b763)
### 19. Navigation zur vorherigen Seite
* siehe [Navigation](ioBroker-Navigation)
# Erstellung der Seitenvariable für die cardMedia
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/e87fd566-af21-475e-80dd-81e6225e52e9)
## Variablen Beispiele:
### Standard Beispielvorlage für AlwaysOnDisplay
In diesem Beispiel wird der Screensaver nach eingestellter nicht aufgeschaltet. Der Player bleibt geöffnet bis zu einer Seite ohne alwaysOnDisplay navigiert wird.
```typescript
let Sonos: PageType =
{
'type': 'cardMedia',
'heading': 'Sonos Player',
'items': [{
id: AliasPath + 'Media.PlayerSonos',
adapterPlayerInstance: 'sonos.0.',
mediaDevice: '192_168_1_212',
speakerList: ['Wohnzimmer', 'Küche', Büro],
playList: ['Hartmann','Armilars Playlist'],
colorMediaIcon: colorSonos,
colorMediaArtist: Yellow,
colorMediaTitle: Yellow,
alwaysOnDisplay: true,
autoCreateALias: true
}]
};
```
### Standard Beispielvorlage ohne AlwaysOnDisplay
In diesem Beispiel wird der Screensaver nach eingestellter Zeit aufgerufen. Der Player wird geschlossen.
```typescript
let Sonos: PageType =
{
'type': 'cardMedia',
'heading': 'Sonos Player',
'items': [{
id: AliasPath + 'Media.PlayerSonos',
adapterPlayerInstance: 'sonos.0.',
mediaDevice: '192_168_1_212',
speakerList: ['Wohnzimmer', 'Küche', Büro],
playList: ['Hartmann','Armilars Playlist'],
colorMediaIcon: colorSonos,
colorMediaArtist: Yellow,
colorMediaTitle: Yellow,
autoCreateALias: true
}]
};
```
mediaDevice ist hierbei die mit '_' getrennte IP des primären Wiedergabegerätes und muss angepasst werden. Der Inhalt ist analog des Datenpunktes `sonos.0.root.<DEVICE_IP>.coordinator`
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/6de74a6c-0aed-480e-9a07-196148d01a25)
> [!CAUTION]
> Nicht zu empfehlen!!!: Der Parameter autoCreateALias kann ebenfalls entfernt werden, jedoch muss ein korrekter Media-Alias mit dem Channel "media" und den vom NSPanelTs.ts - Skript erwarteten Datenpunkten dann "per Hand" erstellt werden. Da es nahezu unmöglich ist unter ioBroker einen korrekten und vollständigen Media-Alias zu erstellen, übernimmt das Skript mit diesem Parameter diese Aufgabe.
# Erstellung der Sonos Listen
## Speaker Liste (Array speakerList)
Diese List sollte die Wiedergabegeräte des primären Sonos und ggfs. optionale Geräte aus dem Datenpunkt `sonos.0.root.<DEVICE_IP>.members` enthalten.
## Favoriten Liste
Die Einstellung erfolgt über die App des Smartphones oder über z.B. dem "Sonos Controller für PC" wie im nachfolgenden Beispiel:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/9dc179a1-acf4-4e29-b642-171c2f6407a1)
Die Favoriten können unter Sonos-Favoriten eingesehen werden:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/8564c777-f148-475f-be27-228196495183)
Sonos Favoriten hinzufügen:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/671bbcca-f42a-49ec-9774-3c2f5ffa58c6)
## Individuelle Wiedergabe Liste (Array playList)
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/10a05428-dac9-4bc9-8ab0-52af9a7fd5bb)
Dann entweder zu einer besehenden Playlist hinzufügen oder eine neue Playlist mit neuem Namen erstellen:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/607403ee-9f77-409d-895b-d9bf2a7e6a26)
Die Namen der individuellen Playlisten für diesen Player werden dann in das Array (Beispiel): `playList: ['Hartmann','Armilars Playlist'],` des PageItem eingetragen.
# Der Auto-Alias
Der nachfolgende Alias wird komplett und vollständig angelegt, wenn der Parameter `autoCreateALias: true` im PageItem definiert ist:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5f51762a-f648-4cdb-9b75-80065019a4a9)
# cardMedia Sonos FAQ
### Der Player aktualisiert nicht die Informationen?
Die Datenpunkte der Adapter-Instanz des Sonos-Adapters werden teils nur träge aktualisiert. Der Player kann nur anzeigen, was bereits in der Adapter-Instanz in den Datenpunkten vorhanden ist!
### In der Tracklist steht ab und zu "undefined"?
Der Datenpunkt "queue" ist nicht wie in anderen Player-Adaptern ein Datentyp JSON-Objekt, sondern ein Datentyp String. Beim Aufbau der Playlist wird aus dem String ein JSON-Objekt. Bei der Umwandlung kann es vorkommen, dass der String des Titels aufgrund von Sonderzeichen nicht importiert werden kann oder das eine falsche Trennung stattfindet.
### In der Favoriten-Liste steht z.B. nur "Hits"
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/a392aa37-42ae-4836-8db9-bb6ee2f3068b)
In der Sonos App umbenennen:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/21615199-bc35-4e9b-90d0-b44fbcf01998)
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/340bb96e-5860-4a76-ac58-e3c72296bd19)
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/499b0033-90f5-4b6d-b961-eee72a43f6af)

@@ -0,0 +1,142 @@
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/511c6f48-ca56-4f19-a5c2-b7997247bdb3)
**Inhalt:**
* [Aufbau des Spotify-Premium Players](#aufbau-des-spotify-premium-players)
* [Voraussetzungen für den Spotify Premium Player](#voraussetzungen-f%C3%BCr-den-spotify-premium-player)
* [Bekannte Fehler des Spotify-Premium Adapters umgehen](#bekannte-fehler-des-spotify-premium-adapters-umgehen)
* [Player im Live-Betrieb](#player-im-live-betrieb)
* [Bedienungselemente / Anzeigen](#bedienungselemente--anzeigen)
* [Erstellung der Seitenvariable für die cardMedia](#erstellung-der-seitenvariable-f%C3%BCr-die-cardmedia)
* [Variablen Beispiele](#variablen-beispiele)
* [Standard Beispielvorlage für AlwaysOnDisplay](#standard-beispielvorlage-f%C3%BCr-alwaysondisplay)
* [Standard Beispielvorlage ohne AlwaysOnDisplay](#standard-beispielvorlage-ohne-alwaysondisplay)
* [Erstellung der Spotify-Premium Listen](#erstellung-der-spotify-premium-listen)
* [Speaker Liste (Array speakerList)](#speaker-liste-array-speakerlist)
* [Favoriten Liste](#favoriten-liste)
* [Individuelle Wiedergabe Liste (Array playList)](#individuelle-wiedergabe-liste-array-playlist)
* [Der Auto-Alias](#der-auto-alias)
* [cardMedia Spotify-Premium FAQ](#cardmedia-sonos-faq)
# Aufbau des Spotify-Premium Players
**(vollständig ab NSPanelTs.ts - Version 4.3.3.42)**
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/0d725e34-6ef1-4e0e-8b70-ad1548e8f6b2)
## Voraussetzungen für den Spotify-Premium Player:
Der Player benötigt eine korrekt eingerichtete Instanz des ioBroker Spotify-Premium Community Adapters:
https://github.com/iobroker-community-adapters/ioBroker.spotify-premium
## Bekannte Fehler des Spotify-Premium Adapters umgehen:
Damit die Elapsed/Duration Anzeige nicht permanent auf 0:00 zurückspringt, ist es die Instanz-Empfehlungen zu ignorieren und folgende Einstellungen zu verwenden:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/e7566c9e-1637-46f6-9aac-6262b67addcf)
Weiter Infos zu diesem Fehler:
https://github.com/iobroker-community-adapters/ioBroker.spotify-premium/issues/167
## Player im Live-Betrieb:
![Nextion_Editor_Flp8X3uvVi](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/fe01d80f-8540-4447-a1e4-a184eef8be10)
## Bedienungselemente / Anzeigen
### 1. Seitentitel
Der dem Parameter "heading" aus der Seitenvariable der cardMedia (z.B. Spotify-Premium) wird visualisiert, wenn keine Wiedergabe erfolgt.
Wenn folgender Inhalt:
* Playlist: This Is
* Playlist:
* Album:
* Track:
* Artist:
enthalten ist, wird dieser Content-Typ bereinigt visualisiert
### 2. Navigation zur nächsten Seite
* siehe [Navigation](ioBroker-Navigation)
### 3. Track (Elapsed|Duration)
* Titel
* Verstrichene Zeit (Minuten/Sekunden) des aktuell abgespielten Titels
* Gesamtlänge (Minuten/Sekunden) des aktuell abgespielten Titels
> Die Aktualisierung in Sekunden steht in Abhängigkeit zur Spotify-Premium Adapterinstanz und steht per Default auf 10 Sekunden.
Das führt zu unschönen Ergebnissen in Verbindung mit einem bekannten Fehler des Adapters. Die Zeit sollte demnach auf 1 Sekunde reduziert werden.
### 4. Interpret | Album
Folgende Datenpunkte der Spotfiy-Premium Adapterinstanz werden berücksichtigt:
* Interpret
* Album
### 5. Player An/Aus (Stop)
* Stopp (Icon blau)
### 6. Volume lauter
* Die Feinjustierung der aktuellen Lautstärke in Einerschritten (+1)
### 7. Volume zwischen 0% und 100%
* Die Feinjustierung der aktuellen Lautstärke erfolgt stufenlos zwischen 0% und 100%
> [!NOTE]
### 8. Repeat-Funktion
* Es sind keine weiteren Einstellungen zu berücksichtigen.
### 9. Equalizer
> [!NOTE]
> Dieses Steuerelement wird nicht über die Spotify-Premium Instanz gesteuert
#### Steuerelement als Equalizer:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/66ef5685-e7de-43e5-a574-84e15779799f)
> [!IMPORTANT]
> Die Spotify-Premium Adapterinstanz verfügt nicht über Klangsteuerungs-Datenpunkte. Es kann jedoch bei SONOS die HTTP API https://github.com/jishi/node-sonos-http-api#usage genutzt werden oder alternativ bei z.B. Alexa die 3-Punkt Klangsteuerung.
>
> Für den Fall, dass der Equalizer aktiv genutzt werden soll, bitte weiteren Link befolgen: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#12-equalizer-f%C3%BCr-cardmedia
### 10. Track Liste
* Sofern eine Playlist abgespielt wird die eine Trackliste enthält, so wird diese automatisch geladen.
> Sollten weitere Tracks vorhanden sein, so können diese über den rechtsangeordneten Pfeil erreicht werden
### 11. Spotify-Premium Playlist
* Das Array playList im PageItem wird genutzt.
Wenn das Array leer ist [], dann werden die Playlisten automatisch aus dem Adapter geladen.
Andernfalls können die bevorzugten Playlists dort manuell eingetragen werden
### 12. Spotify-Premium Speaker Liste
2 Varianten
* Ist das Array leer [], dann werden die Wiedergabegeräte automatisch importiert
* Das Array speakerList im PageItem wird genutzt. Die Wiedergabegeräte sind dort manuell einzutragen
### 13. Nächster Track
* Sofern ein weiterer Titel in der Track Liste verfügbar ist, so wird dieser ausgewählt
### 14. Play / Pause
* Umschaltung zwischen Play und Pause
### 15. Volume leiser
* Die Feinjustierung der aktuellen Lautstärke in Einerschritten (-1)
### 16. Shuffle
* Umschaltung zwischen Shule an/aus, soffern das Wiedergabemedium dieses unterstützt
### 17. Vorheriger Track
* Sofern ein weiterer Track vor dem aktuell abgespielten Titel in der Track Liste verfügbar ist, so wird dieser ausgewählt
### 18. Player Logo / Seek Funktion
Per Standard ist der Seek-Modus aktiv. Dieser wird mit Klick auf das Logo des Players aufgerufen:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/a290987f-6b2e-40c1-9524-3837bbe79407)
Jetzt ist es möglich eine Position des Tracks (Titels) in 10% Schritten zu erreichen (vor- und zurückspulen).
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/09e2ce7b-15bb-4b31-afe7-8d749f824828)
### 19. Navigation zur vorherigen Seite
* siehe [Navigation](ioBroker-Navigation)
# Erstellung der Seitenvariable für die cardMedia
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/c3e5ffba-70a5-4630-8fe4-1cf09952bdeb)
> [!CAUTION]
> Nicht zu empfehlen!!!: Der Parameter autoCreateALias kann ebenfalls entfernt werden, jedoch muss ein korrekter Media-Alias mit dem Channel "media" und den vom NSPanelTs.ts - Skript erwarteten Datenpunkten dann "per Hand" erstellt werden. Da es nahezu unmöglich ist unter ioBroker einen korrekten und vollständigen Media-Alias zu erstellen, übernimmt das Skript mit diesem Parameter diese Aufgabe.

@@ -0,0 +1,19 @@
!!!Diese Seite befindet sich noch im Aufbau!!!
# Die cardMedia
**Die cardMedia ist ein Media-Player zur Steuerung unterschiedlichster Media-Adapter im ioBroker.**
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/e5424d43-3a4d-4b66-9262-bf2317164c46)
Die gängigsten Adapter wie z.B.
* [SONOS](NSPanel--cardMedia--Der-SONOS-Player)
* Alexa2
* [Spotify-Premium](NSPanel--cardMedia--Der-SpotifyPremium-Player)
* [Bose Soundtouch](NSPanel--cardMedia--Der-Bose-Soundtouch-Player)
* Squeezebox-RPC
* Volumio
werden durch automatische Anlage der Media-Aliasse unterstützt

@@ -0,0 +1,199 @@
Die Dokumentation erfolgt auf Basis von Test-Datenpunkten unter 0_userdata.0. , da kein physisches Testgerät via Adapter zur Verfügung stand.
## cardThermo als "Klimaanlage" im Live-Betrieb
![Nextion_Editor_y0GuTvMgd0](https://github.com/user-attachments/assets/32cb3891-1d9b-43a6-b88f-37194149a4bc)
## Test-Datenpunkte unter 0_userdata.0...
Diese Dokumentation der Klimaanlage bezieht sich auf den vollen Funktionsumfang der cardThermo im Zusammenspiel mit einem Alias-Channel vom Typ Klimaanlage. In der Realität sind wahrscheinlich nicht alle Datenpunkte erforderlich, da das physische Klima-Gerät ggfs. nicht alle Funktionalitäten bereitstellt. Im Alias werden somit die Original-Datenpunkte des jeweiligen Klima-Adapters zugeordnet.
![image](https://github.com/user-attachments/assets/f42cdc70-5d5d-4d4a-b7f3-2065fd52cd61)
## Alias vom Channel Typ "Klimaanlage"
![image](https://github.com/user-attachments/assets/0fea258e-de90-456b-a9c9-1e0c87f738ef)
* ACTUAL ist die aktuelle IST-Raumtemperatur und kann auf den internen Temperatur-Sensor-Datenpunkt des NSPanels, oder auf einen externen Temperatur-Sensor Datenpunkt zeigen.
![image](https://github.com/user-attachments/assets/d127f8a0-2142-470b-a00f-715ccd895845)
* SET ist die SOLL-Temperatur
![image](https://github.com/user-attachments/assets/2a5c6b45-fe54-4c19-be6e-9f3e3c532a62)
* ACTUAL2 (Definition weiter unten beschrieben) ist ein optionaler 2. Setpoint
![image](https://github.com/user-attachments/assets/04c8b379-44cd-423a-b632-ea0ce87507b8)
Wenn ACTUAL2 in der Variable definiert wurde, dann wird der 2. Setpoint ebenfalls in der cardThermo angezeigt
Die "numerischen" Datenpunkte für das Popup können über das "+" Symbol im Gerätemanager erzeugt werden:
![image](https://github.com/user-attachments/assets/e47d9e35-ddae-47cf-bf62-5c3592e66780)
Beim Klick auf einen Wert wird der Wert des Array,s 0, 1, 2, 3, 4, etc. an den Datenpunkt übergeben
Außerdem kann bei Bedarf eine weitere Setpoint-Temperatur definiert werden. Hierzu ist dann ebenfalls ein optionaler Datenpunkt mit dem "+" Symbol anzulegen. Dieser muss als **ACTUAL2** benannt werden.
## Funktionalität der Icon-Leiste
![image](https://github.com/user-attachments/assets/4c1216d0-e31a-45e4-a640-61d33989a5c7)
Im Gerätemanager wird im Alias der Datenpunkt "MODE" über das Stift-Symbol definiert.
![image](https://github.com/user-attachments/assets/ca924b1b-5882-4b31-8d71-a0845dd0de3a)
Sollte der Adapter des Klimagerätes über einen "Mode"-Datenpunkt verfügen, so kann dieser hier mit den verfügbaren Funktionen synchronisiert werden.
![image](https://github.com/user-attachments/assets/77eccb8c-4499-4e40-9d12-0b2db6f70cf2)
Auch wenn der Adapter keinen Mode-Datenpunkt bereitstellt, so kann ein manuell angelegter Datenpunkt unter 0_userdata.0... genutzt werden und mit einem separaten Blockly/Javascript entsprechende Datenpunkte des Adapters steuern.
> [!IMPORTANT]
> Es sind nur die Bezeichner **OFF**, **AUTO**, **COOL**, **HEAT**, **ECO**, **FAN_ONLY** und **DRY** erlaubt!
>
> Icons können entsprechend verschoben und nicht vorhandene Funktionen entfernt werden. Eine Umbenennung von z.B. **COOL** in **COLD **wird keine Funktionaltät für das Icon haben.
### Beispiel:
![image](https://github.com/user-attachments/assets/e7f6e28b-e947-498d-989f-8d21046f8e56)
wäre somit:
![image](https://github.com/user-attachments/assets/21392765-54f9-40b9-b8da-e6bf62ce0817)
Der Datenpunkt erhält den numerischen Wert der Aufzählung, Daher ist der korrekte Name wie **COLD** nicht relevant. Das Script benötigt jedoch den Namen **COOL** zur Darstellung des Icons.
## Die cardThermo Definition im NSPanel-Script
**Minimale Definition**
```typescript
let Test_Klimaanlage: PageType =
{
'type': 'cardThermo',
'heading': 'Test Klimaanlage',
'items': [{
id: 'alias.0.NSPanel_1.TestKlimaanlage',
minValue: 50,
maxValue: 250,
stepValue: 5,
}]
};
```
**Maximale Definition**
```typescript
let Test_Klimaanlage: PageType =
{
'type': 'cardThermo',
'heading': 'Test Klimaanlage',
'items': [{
id: 'alias.0.NSPanel_1.TestKlimaanlage',
minValue: 50,
maxValue: 250,
stepValue: 5,
iconArray: ['power-standby','air-conditioner','snowflake','fire','alpha-e-circle-outline','fan','water-percent','swap-vertical-bold'],
popupThermoMode1: ['Auto','0','1','2','3'],
popupThermoMode2: ['Auto','0','1','2','3','4','5'],
popupThermoMode3: ['Auto','Manual','Boost',],
popUpThermoName: ['Schwenk-Modus', 'Speed', 'Temperatur'],
icon: 'fan',
setThermoAlias: ['popupKlima_Mode_1','popupKlima_Mode_2','popupKlima_Mode_3'],
//setThermoDestTemp2: 'ACTUAL2'
}]
};
```
type: muss 'cardThermo' sein
heading: frei definierbare Überschrift
items
Standard-Items:
* id: der im Gerätemenager erstellt Alias vom Channel-Typ "Klimaanlage"
* minValue: die minimal zu schaltende Soll-Temperatur der Klimatisierung (multipliziert mit 10 --> 5°C = 50)
* maxValue: die maximal zu schaltende Soll-Temperatur der Klimatisierung (multipliziert mit 10 --> 25°C = 250)
* stepValue: die Schrittfolge in der die Soll-Temperatur gesteuert wird (multipliziert mit 10 --> 0,5°C = 5)
* iconArray: (optional) in diesem Array können abweichende Icons definiert werden
![image](https://github.com/user-attachments/assets/761cc8a4-f6cc-441f-9f40-7677e7017062)
Popup:
![image](https://github.com/user-attachments/assets/361bd3c0-e539-44ca-9bca-4eb4649d7c65)
* popupThermoMode1: (optional) falls verwendet, werden unter der Solltemperatur 3 Punkte visualisiert über die ein Popup aufgeschaltet wird. Innerhalb dieses Arrays werden die möglichen Zustände definiert.
* popupThermoMode2: (optional) falls verwendet, werden unter der Solltemperatur 3 Punkte visualisiert über die ein Popup aufgeschaltet wird. Innerhalb dieses Arrays werden die möglichen Zustände definiert.
* popupThermoMode3: (optional) falls verwendet, werden unter der Solltemperatur 3 Punkte visualisiert über die ein Popup aufgeschaltet wird. Innerhalb dieses Arrays werden die möglichen Zustände definiert.
* popUpThermoName: Überschriften der 3 möglichen Zeilen im Popup der cardThermo
* icon: Das icon, welches im Popup erscheint
* setThermoAlias: Die "numerischen" Datenpunkte, welche im Alias optional definiert wurden
Optionaler Setpoint
* setThermoDestTemp2: (optional) falls definiert, werden 2 Soll-Temperaturen visualisiert
## Separates Script zum Steuern spezieller Datenpunkte
Beispiel Blockly:
![image](https://github.com/user-attachments/assets/765c3c5f-e5e3-467c-844d-1da3dcb94bf3)
Beispiel JS:
```typescript
// Z.B. für die Mode's aus der Iconleiste
on({ id: [].concat(['0_userdata.0.Test.Klimaanlage.Mode']), change: 'ne' }, async (obj) => {
switch ((obj.state ? obj.state.val : '')) {
case 0:
// mache etwas wenn das 1. Icon gedrückt wurde
// setze z.B. DatenpunktXY auf true oder schreibe eine abweichende Zahl in einen Datenpunkt...
break;
case 1:
// mache etwas wenn das 2. Icon gedrückt wurde
break;
case 2:
// mache etwas wenn das 3. Icon gedrückt wurde
// schreibe z.B. "cold" in einen Datenpunkt
break;
case 3:
// usw.
break;
}
});
```
oder in Kombination mit dem Popup:
Blockly:
![image](https://github.com/user-attachments/assets/9d599e43-6f5e-4ef9-84bf-e3413945bd4d)
JS:
```typescript
// Z.B. für die Mode's aus der Iconleiste
on({ id: [].concat(['0_userdata.0.Test.Klimaanlage.Mode']), change: 'ne' }, async (obj) => {
switch ((obj.state ? obj.state.val : '')) {
case 0:
// mache etwas wenn das 1. Icon gedrückt wurde
break;
case 1:
// mache etwas wenn das 2. Icon gedrückt wurde
break;
case 2:
// mache etwas wenn das 3. Icon gedrückt wurde
break;
case 3:
// usw.
break;
}
});
// Auswerten des ersten Popup Wertes in der obersten
// Popup-Zeile
on({ id: [].concat(['0_userdata.0.Test.Klimaanlage.popupKlima_Mode_1']), change: 'ne' }, async (obj) => {
switch ((obj.state ? obj.state.val : '')) {
case 0:
// mache etwas wenn der 1. Wert gewählt wurde
break;
case 1:
// mache etwas wenn der 2. Wert gewählt wurde
break;
case 2:
// mache etwas wenn der 3. Wert gewählt wurde
break;
case 3:
// usw.
break;
}
});
```

308
old/Release-Notes.md Normal file

@@ -0,0 +1,308 @@
**Hier erfolgt eine chronologische Auflistung aller Versionen vom NSPanel Script**
- 08.05.2022 - v2.9.0 - cardQR (für Gäste WLAN)
- 08.05.2022 - v2.9.0 - cardThermo (Neues Design für Alias Thermostat und zusätzlich für Alias Klimaanlage)
- 08.05.2022 - v2.9.0 - Menüpfeile bei HardwareButtons (button1Page; button2Page) mit Navigation auf Page 0
- 08.05.2022 - v2.9.0 - Standard-Brightness über neuen Parameter active einstellbar (Test mit 2.9.3)
- 08.05.2022 - v2.9.0 - Schalter (Licht, Dimmer, Hue, etc) in cardGrid lassen sich wieder schalten
- 14.06.2022 - v2.9.0 - Aktion auf Submenüs schaltet unmittelbar auf vorheriges Mainmenu (Many thanks to Grrzzz)
- 14.06.2022 - v2.9.0 - Menü-Pfeile in Subpages (z.B. card QR, cardMedia, etc) (Many thanks to Grrzzz)
- 15.06.2022 - v3.0.0 - Date/Time im Screensaver auf Basis localString (de-DE/en-EN/nl-NL/etc.)
- 16.06.2022 - v3.0.0 - Multilingual - config.locale (en-EN, de-DE, nl-NL, da-DK, es-ES, fr-FR, it-IT, ru-RU, etc.)
- 16.06.2022 - v3.0.0 - Bugfix by Grrzzz - Subpages
- 18.06.2022 - v3.1.0 - Längere Textfelder in cardEntities
- 18.06.2022 - V3.1.0 - Detail-Page Lights/Shutter hat neuen Parameter "id"
- 19.06.2022 - v3.1.0 - Bugfix toLocalTimeString in en-EN/en-US
- 19.06.2022 - v3.1.0 - Fehler in findLocale abgefangen
- 19.06.2022 - v3.1.0 - Umstellung auf "Home Assistant" Sprachfile
- 19.06.2022 - v3.1.0 - Alias "light" und "socket" haben optionalen Parameter icon2 für negative Zustände
- 29.06.2022 - v3.1.1 - Bugfix Github #286 (Active Page) + Bugfix pageThermo, pageMedia, pageAlarm as first Page
- 25.08.2022 - v3.1.0 - Code-Verbesserungen (klein0r)
- 26.08.2022 - v3.2.0 - pageItem mit CIE (XY) Parameter für ColorWheel (Steuerung für z.B Deconz-Farben bei denen Hue nicht greift)
- 28.08.2022 - v3.2.0 - Wechsel zwischen Weather-Forecast und eigenen Datenpunkten im Screensaver (minütlich)
- 28.08.2022 - v3.2.0 - Bugfix für 3.2.0 in GenerateDetailPage: Color-Language nicht über findLocales, da nicht in Sprachfile enthalten
- 29.08.2022 - v3.3.0 - Upgrade TFT 40
- 29.08.2022 - v3.3.1 - Upgrade TFT 41
- 04.09.2022 - v3.3.1 - Überarbeitung und BugFix für cardAlarm
- 13.09.2022 - v3.3.1.3 BugFix Screensaver Toggle
- 13.09.2022 - v3.3.1.3 Überarbeitung und BugFix und Refresh Features für cardMedia (Breaking Changes)
- 13.09.2022 - v3.3.1.3 Hinzufügen von SpotifyPremium, Sonos und Chromecast (Google home) zur cardMedia-Logik
- 15.09.2022 - V3.4.0 - BugFix Dimmode
- 15.09.2022 - V3.4.0 - Colormode für Screensaver + AutoColor WeatherForecast
- 16.09.2022 - v3.4.0.1 Visualisierung der Relay Zustände (MRIcons) im Screensaver + Bugfix Screensaver MRIcon2
- 17.09.2022 - v3.4.0.2 Bugfix for screensaver icons with scaled colors
- 17.09.2022 - v3.4.0.3 Bugfix bNext / bPrev by joBr99
- 18.09.2022 - v3.4.0.4 Add On/Off Colors in config.mrIcon1ScreensaverEntity and config.mrIcon2ScreensaverEntity
- 19.09.2022 - v3.4.0.5 Add Mode to cardThermo (Alias Thermostat)
- 03.10.2022 - v3.4.0.6 Add 5 Entities in US Panel Version to cardEntities
- 03.10.2022 - v3.4.0.6 Fix screenSaverDoubleClick
- 03.10.2022 - v3.4.0.6 Add cardPower (experimental)
- 05.10.2022 - v3.4.0.6 Add sueezeboxrpc to cardMedia
- 07.10.2022 - v3.4.0.6 Time-configurable change for screensaver icons
- 07.10.2022 - v3.4.0.7 Add Backgroundcolor to Pages
- 08.10.2022 - v3.4.0.7 Add Tilt-Slider and TILT_Fucntions (Open/Stop/Close) to Blinds/Cover/Shutter popUp
- 12.10.2022 - v3.4.0.7 Add PageNavigation via Datapoint
- 25.10.2022 - v3.5.0 Add New Parameters to popUpNotify
- 07.10.2022 - v3.5.0 Upgrade TFT 43
- 07.10.2022 - v3.5.0 Add Backgroundcolor to Pages
- 08.10.2022 - v3.5.0 Add Tilt-Slider and TILT_Functions (Open/Stop/Close) to Blinds/Cover/Shutter popUp
- 12.10.2022 - v3.5.0 Add PageNavigation via Datapoint
- 25.10.2022 - v3.5.0 Add New Parameters to popUpNotify / Layout 2
- 26.10.2022 - v3.5.0.1 Fix Thermostat for tado Support (by Sternmiere)
- 27.10.2022 - v3.5.0.1 Add VirtualDevice Gate
- 27.10.2022 - v3.5.0.2 Applied Boy Scout Rule (Fixed some typos, changed var to let, fixed min/max colorTemp Bug)
- 30.10.2022 - v3.5.0.3 Fixed Media Play/Pause icon for alexa (and others) devices
- 31.10.2022 - v3.5.0.4 Reengineering Media Subscriptions
- 02.11.2022 - v3.5.0.5 Page navigation continues with page 0 from the last page
- 04.11.2022 - v3.5.0.5 Create Auto-Alias for Service Pages
- 07.11.2022 - v3.5.0.5 Create Auto-Alias for Alexa2, Spotify-Premium, Sonos
- 08.11.2022 - v3.5.0.5 Create Auto-Alias for Wheather-Forcast (Screensaver Big-Icon)
- 07.10.2022 - v3.6.0 Upgrade TFT 45
- 09.11.2022 - v3.6.0 Add new Alias-DeviceTyp cie (control colors with XY)
- 16.11.2022 - v3.6.0 Control Relay 1 + 2 via Datapoints
- 17.11.2022 - v3.6.0 Add Datapoint to Control Screensaver-Dimmode
- 17.11.2022 - v3.6.0 Change to Page after bExit
- 18.11.2022 - v3.6.0 Add cardChart by fumanchi (only on DEV)
- 24.11.2022 - v3.6.0 Add Background Color Switch via DP
- 26.11.2022 - v3.6.0 Add cardMedia Colors
- 26.11.2022 - v3.6.0 Add cardThermostat Popup
- 28.11.2022 - v3.6.0.1 Bugfix in bExit
- 29.11.2022 - v3.6.0.2 Update Berry Version 6
- 30.11.2022 - v3.6.0.3 Bugfix string/number compare current BerryDriver (DP as string)
- 05.12.2022 - v3.6.0.4 Add bHome to Navigation
- 05.12.2022 - v3.6.0.4 Add changeable Center-Icon in cardPower with Color and Value
- 08.12.2022 - v3.6.0.4 Bugfix - Use MRIcons in Screensaver with null
- 13.12.2022 - v3.6.0.4 Add Sensor-Values to cardGrid
- 13.12.2022 - v3.6.0.4 Hotfix - Update screensaver temperature without weather forecast
- 14.12.2022 - v3.7.0 Move Config "active" to DP activeBrightness and add DP activeDimmodeBrightness
- 19.12.2022 - v3.7.0 Change weather icons for exceptional (window-close)
- 19.12.2022 - v3.7.0 Add DasWetter / Add DasWetter in create AutoAlias / Const MinMax
- 19.11.2022 - v3.7.0 Add cardChart on PROD (implemented but working with v3.7.0 --> next TFT)
- 10.12.2022 - v3.7.0 Add Shuffle to Media Player
- 10.12.2022 - v3.7.0 Remove Old Speakerlist and Add 5 GridCard Control PageItems
- 10.12.2022 - v3.7.0 Add In_Sel PopUp to cardMedia
- 15.12.2022 - v3.7.0 Add alternate MRIcon Size
- 20.12.2022 - v3.7.0 Add popUpTimer / New ALIAS Type level.timer
- 21.12.2022 - v3.7.0 Add Fan / New ALIAS Type level.mode.fan
- 22.12.2022 - v3.7.0 Add InSel - InputSelector with Alias Type buttonSensor (DP .VALUE)
- 23.10.2022 - v3.7.0 Upgrade TFT 46
- 28.12.2022 - v3.7.3.0 Hotfix - bUp case
- 28.12.2022 - v3.7.3.0 Update Berry Version 8
- 29.12.2022 - v3.7.3.1 Hotfix - us-p - DateString - Use long/short Weekday and long/short Month
- 29.12.2022 - v3.7.3.2 Add pageItem.id to Submenu; New Parameter targetPage by TT-TOM / @tt-tom17
- 30.12.2022 - v3.8.0 Add New HMI-Navi
- 01.01.2023 - v3.8.0 Add Tasmota "Web Admin Password"
- 02.01.2023 - v3.8.0 Add Navigation bSubPrev and bSubNext and Subpages for bHome
- 03.01.2023 - v3.8.0 Bugfix for cardThermostat - Payload (Minor)
- 04.01.2023 - v3.8.0 Add Volumio-Player to cardMedia by @egal
- 05.01.2023 - v3.8.0 Upgrade TFT 47
- 06.01.2023 - v3.8.0 Add Volumio Tracklist by @egal
- 06.01.2023 - v3.8.1 HMI-Hotfix
- 06.01.2023 - v3.8.2 Add globalTracklist for every Volumio-Player by @egal
- 07.01.2023 - v3.8.3 Upgrade TFT 48
- 08.01.2023 - v3.8.3 Add cardLChart for Line diagrams
- 09.01.2023 - v3.8.3 Add new monobutton Functions by @ronny130286
- 10.01.2023 - v3.8.3 Add Repeat-Button and external Tracklists/Queues to Volumio Media-Player by @egal
- 11.01.2023 - v3.8.3 Add configurable navigation buttons by @ravenst0ne (v3.8.1.1)
- 11.01.2023 - v3.8.3 Add Char"€" to HMI
- 11.01.2023 - v3.8.3 Fix Switch-Off for Color Lights
- 15.01.2023 - v3.9.0 Fix bExit if externel bExit page is set in DP
- 16.01.2023 - v3.9.0 Add Values, Decimal Places to mrIcons
- 16.01.2023 - v3.9.0 Preparation of the cardPower for TFT 3.9.0 --> New Payload
- 16.01.2023 - v3.9.0 Preparation of the cardAlarm for TFT 3.9.0 --> New Payload and Add heading
- 16.01.2023 - v3.9.0 Add configurable navigation buttons for top level pages and icon colors by @ravenst0ne (v3.8.3.1)
- 18.01.2023 - v3.9.0 Add new ServicePages, Reboot and Update DP's inlc. Auto-Alias
- 19.01.2023 - v3.9.0 Add Indicator Color Scales to Info Aliases
- 20.01.2023 - v3.9.0 Move TS-Config-Parameters to 0_userdata NSPanel-Config
- 22.01.2023 - v3.9.0 Refactoring Screensaver (HMI)
- 24.01.2023 - v3.9.0 New Function "Check Config Parameters"
- 25.01.2023 - v3.9.0 Fix Tasmota- Firmware-Upgrade with Safeboot
- 27.01.2023 - v3.9.0 Add getState in PageItem.name with prefix and suffix
- 28.01.2023 - v3.9.0 Fix TFT-Version Path in function update_tft_firmware (drop ".")
- 29.01.2023 - v3.9.0 Upgrade TFT 49
- 03.02.2023 - v3.9.0.1 Hotfix - Catch exception for missing sensor values separately
- 03.02.2023 - v3.9.0.2 Hotfix - Screensaver bExit
- 06.02.2023 - v3.9.0.3 Hotfix - PR #754 - added missing 'tempUpdHighLow' ButtonEvent handling - by @fre4242
- 07.02.2023 - v3.9.0.4 Hotfix - PR #760 - Open activepage again after closing popupLight or popupShutter - by @ravenst0ne
- 01.02.2023 - v4.0.0 Add new HMI Serial-Protocol to cardPower
- 07.02.2023 - v4.0.0 Check whether setObjects is set
- 08.02.2023 - v4.0.0 Add Screensaver2 - Renew all Screensaver functions
- 09.02.2023 - v4.0.0 Fix bExit - to much notify~~ events outside of screensaver --> Black Screens
- 10.02.2023 - v4.0.0 Add Screensaver2 Parameter to Service Pages
- 12.02.2023 - v4.0.0 Add cardUnlock
- 17.02.2023 - v4.0.0 Extension of the Squeezebox player by bembelstemmer
- 19.02.2023 - v4.0.0 cardChart/cardLChart YAxisTicks from a datapoint by bembelstemmer
- 19.02.2023 - v4.0.0 Make Temperature Steps configurable by bembelstemmer
- 20.02.2023 - v4.0.0 Hotfix cardThermo Status by Gargano
- 26.02.2023 - v4.0.1 Optimize cardThermo by bembelstemmer
- 27.02.2023 - v4.0.2 Dynamic Indicator Icons in Advanced Screensaver by Gargano
- 27.02.2023 - v4.0.2 Upgrade TFT 50 / 4.0.2
- 27.02.2023 - v4.0.3 Upgrade TFT 50 / 4.0.3
- 04.03.2023 - v4.0.4 Upgrade TFT 50 / 4.0.4
- 04.03.2023 - v4.0.4 Fix bExit with popupLight, popup....
- 07.03.2023 - v4.0.4.1 Extend Configuration Options for Physical Buttons to enable direct state manipulation - by bembelstemmer
- 10.03.2023 - v4.0.4.2 Fix iconColor by 100% Brightness
- 13.03.2023 - v4.0.4.3 Fix Funktion GeneratePowerPage inkl. DemoModus
- 14.03.2023 - v4.0.4.4 Fix colorTempSlider Arbeitsweise(seitenverkehrt) korregiert
- 17.03.2023 - v4.0.4.5 Debug - Error - Log - Meldungen angepasst, rgbSingle benötigt nicht mehr DP .TEMPERATURE
- 27.03.2023 - v4.0.5 Upgrade TFT 50 / 4.0.5
- 27.03.2023 - v4.0.5 Add Strings to function HandleScreensaverStatusIcons()
- 27.03.2023 - v4.0.5.1 Add Bool with Value to function HandleScreensaverStatusIcons()
- 29.03.2023 - v4.0.5.2 Fix cardPower
- 03.04.2023 - v4.0.5.3 Fix GetScreenSaverIconColor
- 03.04.2023 - v4.0.5.4 Fix HandleScreensaverStatusIcons
- 09.04.2023 - v4.0.5.5 Add new Role "timeTable" to function CreateEntity for Adapter "Fahrplan"
- 09.04.2023 - v4.0.5.5 Fix trigger popupNotifypage
- 11.04.2023 - v4.0.5.6 Fix function InitDimmode
- 18.04.2023 - v4.0.5.7 Fix Function check_updates
- 20.04.2023 - v4.0.5.8 Fix Layout Update message for TFT, Berry-Driver and Tasmota
- 21.04.2023 - v4.0.5.9 Add Parameter pageitem id0 to ActivePages (0_userdata)
- 23.04.2023 - v4.0.5.10 Fixed error wrong icon index in GeneratePowerPage by fre4242
- 28.04.2023 - v4.0.5.11 light 'hue' and light 'rgb' have '.TEMPERATURE' optional
- 02.05.2023 - v4.0.5.12 Add new Function Debug mode from script activatable via panel
- 02.05.2023 - v4.0.5.13 Fix Problems with weather-instances-number !="0" #876
- 02.05.2023 - v4.0.5.14 Fix: Remove empty log statements #883
- 30.07.2023 - v4.0.5.15 Improved screensaverAdvanced icon handling: option to load from iobroker object #944
- 12.08.2023 - v4.1.4 Upgrade TFT 51 / 4.1.4
- 12.08.2023 - v4.1.4.1 Fix Label CANCEL for popupTimer
- 12.08.2023 - v4.1.4.1 Fix TypeScript Error (JS-Adapter > 7.1.X) by Gargano
- 12.08.2023 - v4.1.4.1 CardGRid with maxItems = 8
- 12.08.2023 - v4.1.4.2 Add onStop function() to Schedules
- 13.08.2023 - v4.1.4.3 Add InSel to popUpLight
- 13.08.2023 - v4.1.4.4 Add Parameter inSel_ChoiceState to InSel to show/hide Focus
- 21.08.2023 - v4.2.0 Upgrade TFT 52 / 4.2.0
- 21.08.2023 - v4.2.0 Add new alias state for iconcolor and buttontext for icon for subpages
- 22.08.2023 - v4.2.0.1 Add iconArray to Alias "Klimaanlage" (airCondition)
- 23.08.2023 - v4.2.0.2 Add CardGrid2 with maxItems = 8
- 23.08.2023 - v4.2.1 Upgrade TFT 52 / 4.2.1
- 23.08.2023 - v4.2.1.1 Add WINDOWOPEN to cardThermo (Thermostat)
- 25.08.2023 - v4.2.1.2 Add Parameter fontSize for v4.3.0
- 27.08.2023 - v4.2.1.3 Add MQTT-Port-Check (use with exec) --> function CheckMQTTPorts()
- 27.08.2023 - v4.2.1.3 Add MQTT-Port-Check for ServiceMenu
- 01.09.2023 - v4.2.1.4 Fix iconId2 in Alias door/window
- 02.09.2023 - v4.2.1.4 Add dynamically USERICON to Alias info
- 04.09.2023 - v4.2.1.5 Fix Debug with 0_userdata.0...
- 04.09.2023 - v4.2.1.5 Add minValue/maxValue to Blinds
- 15.09.2023 - v4.2.1.6 Fix ServicePage Dimmode 'next' -> 'home'
- 15.09.2023 - v4.2.1.6 Fix Log '.USERICON' to Debug.log
- 15.09.2023 - v4.2.1.6 Fix Link PowerIcon to Alias (Thermocard)
- 17.09.2023 - v4.3.1 Upgrade TFT 53 / 4.3.1
- 17.09.2023 - v4.3.1.1 Add Parameter fontSize (0-4) to cardGrid (with useValue)
- 23.09.2023 - v4.3.1.2 Upgrade BerryDriver v9
- 23.09.2023 - v4.3.1.3 Fix - Change ServivceMenu from Fake-SSId to real Tasmota-SSIdParam
- 03.10.2023 - v4.3.1.4 Removing the examples from the NSPanelTs.ts --> https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele
- 03.10.2023 - v4.3.1.4 Delete NsPanelTs_without_Examples.ts
- 12.10.2023 - v4.3.1.5 Fix Datapoint for Role timetable -> Attention use new script from TT-Tom https://github.com/tt-tom17/MyScripts/blob/main/Sonoff_NSPanel/Fahrplan_to_NSPanel.ts
- 19.10.2023 - v4.3.1.6 Add more Alias Device-Types to Navigation / Minor Fixes
- 22.10.2023 - v4.3.1.7 Fix CreateEntity (navigate) role 'light' and 'socket' and 'temperature'
- 30.10.2023 - v4.3.2 Upgrade TFT 53 / 4.3.2
- 30.10.2023 - v4.3.2.1 Fix formatDate/Date.parse with moment.js (Bugs in JS-Methodes)
- 07.11.2023 - v4.3.2.2 Fix Selection of screensaver layout (alternative / advanced)
- 08.11.2023 - v4.3.2.3 Fix Issues #1013 by laluz742 -> Parameter count mismatch: screensaver color
- 08.11.2023 - v4.3.3 Upgrade TFT 53 / 4.3.3
- 11.11.2023 - v4.3.3.1 Fix for Issues #1020 HandleHardwareButton buttonConfig.mode -> 'toggle' and 'set'
- 12.11.2023 - v4.3.3.2 Add autoCreateALias to cardUnlock
- 12.11.2023 - v4.3.3.2 Change NodeJS to at least v18.X.X
- 13.11.2023 - v4.3.3.3 if setOption = false, do not create autoAlias (Functional/Servicemenu) and Datapoints
- 15.11.2023 - v4.3.3.4 New Service Page -> ioBroker Info
- 16.11.2023 - v4.3.3.5 Add Multilingualism to Service Menu (39 languages)
- 17.11.2023 - v4.3.3.5 Add Multilingualism to cardQR, popupFan, popupTimer (39 languages)
- 18.11.2023 - v4.3.3.6 Add autoCreateALias to PageAlarm
- 20.11.2023 - v4.3.3.6 Add actionStringArray to PageAlarm
- 20.11.2023 - v4.3.3.6 Add Multilingualism to cardAlarm (39 languages)
- 20.11.2023 - v4.3.3.7 Add Multilingualism to cardMedia (39 languages)
- 20.11.2023 - v4.3.3.8 Add Method dayjs (Multilingualism)
- 20.11.2023 - v4.3.3.9 Add ScreensaverEntityOnColor, ...OffColor, ...OnText, ...OffText
- 21.11.2023 - v4.3.3.10 Code optimization
- 24.11.2023 - v4.3.3.11 Add autoCreateALias to PageQR
- 24.11.2023 - v4.3.3.12 Separation of page creation and page updates in cardPower
- 24.11.2023 - v4.3.3.12 Add alwaysOnDisplay to cardPower - Leave display on if the alwaysOnDisplay parameter is "true"
- 25.11.2023 - v4.3.3.13 Separation of page creation and page updates in cardMedia
- 25.11.2023 - v4.3.3.13 Add alwaysOnDisplay to cardMedia - Leave display on if the alwaysOnDisplay parameter is "true"
- 25.11.2023 - v4.3.3.13 Fix Sonos Repeat/Shuffle
- 25.11.2023 - v4.3.3.14 Refactoring Sonos-Player (with Playlist, Tracklist, Favorites, Eqalizer (if no Favorites))
- 29.11.2023 - v4.3.3.15 Fix cardMedia Volume-Slider / Add Init Release to Startup
- 30.11.2023 - v4.3.3.16 Beautification of the Sonos player Strings / Add Duration & Elapsed
- 01.12.2023 - v4.3.3.16 Fix Datapoints with Value null
- 02.12.2023 - v4.3.3.16 Request replaced by Axios
- 04.12.2023 - v4.3.3.17 Add SEEK and CROSSFADE to Sonos cardMedia
- 05.12.2023 - v4.3.3.18 Add (ELAPSED/DURATION) to v2Adapter alexa2
- 06.12.2023 - v4.3.3.18 Replace missing Type console.log --> log(message, 'serverity')
- 07.12.2023 - v4.3.3.19 Fix Trigger activeDimmodeBrightness if Dimmode = -1
- 08.12.2023 - v4.3.3.20 add Role AlarmTime for Alarm Clock
- 09.12.2023 - v4.3.3.21 Add createAutoAlias to popupTimer only for Time
- 14.12.2023 - v4.3.3.22 Add UpdateMessage => disable the update messages
- 14.12.2023 - v4.3.3.22 Fix name by static Navi Icon
- 17.12.2023 - v4.3.3.23 Optimization of the blind control (enable or disable Up/Stop/Down)
- 18.12.2023 - v4.3.3.24 Hotfix Update Message / Add Icon Colors to Entity Button
- 21.12.2023 - v4.3.3.25 Add switch of cardQR by hidePassword: true
- 26.12.2023 - v4.3.3.26 Fix Log output payload -> Json.stringify
- 28.12.2023 - v4.3.3.27 Fix Payload (pageItem.id -> placeId) by Function CreateEntity
- 28.12.2023 - v4.3.3.27 Fix Fallback PageItem.name by Function CreateEntity --> Many Bugs
- 30.12.2023 - v4.3.3.28 Fix short ID's in v4.3.3.27
- 30.12.2023 - v4.3.3.28 Fix window Icons in CreateEntity
- 30.12.2023 - v4.3.3.28 Add MQTT-Client Check
- 02.01.2024 - v4.3.3.29 Add Tasmota Buzzer for NotifyPage
- 02.02.2024 - v4.3.3.29 Fix ThermoPage -> UnSubScribsWatcher
- 02.02.2024 - v4.3.3.30 Add stronger config type checks
- 03.02.2024 - v4.3.3.31 Remove: autoCreateAlias from cardMedia
- 03.02.2024 - v4.3.3.31 Remove: adapterPlayerInstance from every card except cardMedia
- 03.02.2024 - v4.3.3.31 [dev]: optional with type - cardMedia has adapterPlayerInstance all other not
- 03.02.2024 - v4.3.3.31 [dev]: add PlayerType some more work to do
- 03.02.2024 - v4.3.3.31 changed: adapterPlayerInstance instance 0-9 allowed. Always require a '.' at the end.
- 04.01.2024 - v4.3.3.32 Hotfix Spotify
- 04.01.2024 - v4.3.3.32 [DEV] Add Types see commits
- 04.01.2024 - v4.3.3.32 Add more details to types for: leftScreensaverEntity, indicatorScreensaverEntity, PageThermo, PageMedia
- 04.01.2024 - v4.3.3.32 Remove not uses propertys from PageItem
- 05.01.2024 - v4.3.3.32 Add Body for BoseSoundtouch-Player
- 05.01.2024 - v4.3.3.33 Add BoseSoundtouch Functions
- 05.01.2024 - v4.3.3.33 Screensaver Fix max Number of indicatorScreensaverEntity
- 07.01.2024 - v4.3.3.33 Fix BoseSoundtouch Proto
- 08.01.2024 - v4.3.3.34 Fix: Disabled Icon Status while bug in updating data points in ioBroker (reason unknown)
- 08.01.2024 - v4.3.3.35 Add: relay.1/relay.2 show the confirmed status
- 09.01.2024 - v4.3.3.36 Fix: change ScreensaverTimeout and activeBrightness
- 09.01.2024 - v4.3.3.36 Fix: schedule SendTime
- 09.01.2024 - v4.3.3.36 Fix: Function _schedule SummerTime/WinterTime
- 15.01.2024 - v4.3.3.37 Change: Allow data points to be flushed for popUpNotify. Activate screensaver with one click.
- 16.01.2024 - v4.3.3.38 Fix: joBr99#1098
- 16.01.2024 - v4.3.3.38 Types: Number of PageItems defined & HandleScreensaverStatusIcons rewritten
- 16.01.2024 - v4.3.3.38 Optimate: function SendTime()
- 17.01.2024 - v4.3.3.38 Add: ScreensaverEntityIconSelect for MRIcons is like common.states for states.
- 17.01.2024 - v4.3.3.38 Add: Changing the ScreensaverEntityValue value updates the screensaver.
- 19.01.2024 - v4.3.3.38 Change: yAxisTicks parameter is not required in cardLChart PageItem
- 20.01.2024 - v4.3.3.38 Add: click on indicatorIcon navigate to Page
- 23.01.2024 - v4.3.3.39 Add: Optional setOn & setOff for HW button with mode 'set'
- 28.01.2024 - v4.3.3.39 Fix: ack for read-only state
- 03.02.2024 - v4.3.3.40 Fix: RGB maxValueColorTemp
- 05.02.2024 - v4.3.3.40 Fix SqueezeboxRPC-Media-Player and add some Functions
- 06.02.2024 - v4.3.3.41 Fix: activeBrightness -> null
- 06.02.2024 - v4.3.3.41 Fix: bHome -> corrected PageId
- 07.02.2024 - v4.3.3.42 Minor Fixes
- 09.02.2024 - v4.3.3.42 Change pageId with Alias in Communication with HMI
- 09.02.2024 - v4.3.3.42 Spotify Media-Player: Dynamic loading of the speaker list, playlist, tracklist, fix repeat, add seek, add elapsed/duration
- 10.02.2024 - v4.3.3.42 Spotify Minor Fixes; Add miValue / maxValue to Volume-Slider
- 10.02.2024 - v4.3.3.43 Fix: cardGrid2 => 9 Entities for Layout 'us-p' issue #1167
- 11.02.2024 - v4.3.3.43 Fix VolumeSlider
- 05.05.2024 - v4.3.3.44 Fix MQTT-Port-check
- 13.05.2024 - v4.4.0.0 TFT 54 / 4.4.0
- 19.05.2024 - v4.4.0.1 TFT 53 / 4.4.0
- 13.06.2024 - v4.4.0.2 Calculated energy consumption in relation to dimming mode and relay state (not the energy consumption of the outputs)
- 13.06.2024 - v4.4.0.3 Check prefix '.tele.' in config.NSPanelReceiveTopic
- 13.09.2024 - v4.4.0.4 New Feature: Hidden Carts
- 18.09.2024 - v4.4.0.5 Remove day.JS
- 19.09.2024 - v4.4.0.6 Check Ports with mqtt.X and mqtt-client.X
- 27.09.2024 - v4.4.0.6 Fix: Using MQTT adapter or MQTT-CLIENT adapter / Minor Fix by wolwin
- 09.10.2024 - v4.4.0.7 Fix: first start and initialisation with new NSPanel device - Fix by wolwin
- 25.10.2024 - v4.4.0.8 Fix: InitDimmode => timeDimMode Day / timeDimMode Night
- 25.10.2024 - v4.4.0.8 Add Always On Display (AOD) to cardTHermo
- 25.10.2024 - v4.4.0.8 Add Hide Buttons at Power Off to cardThermo (Climate Alias Channel)
- 26.10.2024 - v4.4.0.8 Add Custom Icon Object to cartdThermo (Climate Alias Channel
- 31.10.2024 - v4.4.0.9 Fix: del 'HandleMessage()' in Trigger 'activeDimmodeBrightness'
- 22.11.2024 - v4.4.0.10 Fix: Bug #1266 trigger timeoutScreensaver
- 22.11.2024 - v4.4.0.11 Add new value 'PopupNotify' to ActivePage
- 07.12.2024 - v4.4.0.12 Add JSDocs and some small fixes
Todo:
- XX.xx.202x - v5.0.0 ioBroker Adapter

627
old/ZZZ-Archiv.md Normal file

@@ -0,0 +1,627 @@
**CardEntities**
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/99131208/4071b1ba-688e-4fa0-be47-d551141b7964)
```
```
***
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PhpSpreadsheet, https://github.com/PHPOffice/PhpSpreadsheet">
<meta name="author" content="Thomas Gabriel" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="sheet0" class="sheet0 gridlines">
<col class="col0">
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
<col class="col5">
<tbody>
<tr class="row0">
<td class="column0">&nbsp;</td>
<td class="column1">&nbsp;</td>
<td class="column2">&nbsp;</td>
<td class="column3">&nbsp;</td>
<td class="column4">&nbsp;</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row1">
<td class="column0">&nbsp;</td>
<td class="column1">&nbsp;</td>
<td class="column2">&nbsp;</td>
<td class="column3 style1 s style1" colspan="2">Datenpunkte, die erstellt werden, wenn Prüfung nicht erfolgreich ist.<br />
Wenn keine Prüfung vorgesehen ist, werden sie automatisch erstellt.</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row2">
<td class="column0 style6 null"></td>
<td class="column1 style7 s">Script Funktion</td>
<td class="column2 style7 s">Prüfung</td>
<td class="column3 style7 s">Datenpunkte unter <span style="font-weight:bold; color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">NSPanel_Path</span></td>
<td class="column4 style7 s">Datenpunkte unter <span style="font-weight:bold; color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">Alias_Path</span></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row3">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">CheckDebugMode</td>
<td class="column2 style10 null"></td>
<td class="column3 style11 s">Config.ScripgtDebugStatus</td>
<td class="column4 style11 s">Config.ScripgtDebugStatus.ACTUAL <br />
Config.ScripgtDebugStatus.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row4">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">CheckMQTTPorts</td>
<td class="column2 style10 null"></td>
<td class="column3 style11 s">Config.MQTT.portCheck</td>
<td class="column4 style11 s">Config.MQTT.portCheck.ACTUAL<br />
Config.MQTT.portCheck.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row5">
<td class="column0 style3 null"></td>
<td class="column1 style13 s style15" rowspan="3">Init_Release</td>
<td class="column2 style10 s">NSPanel_Path + 'Display_Firmware.desiredVersion'</td>
<td class="column3 style11 s">Display_Firmware.desiredVersion</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row6">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'Config.Update.activ'</td>
<td class="column3 style11 s">Config.Update.activ</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row7">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'Display_Firmware.TFT.desiredVersion'</td>
<td class="column3 style11 s">Display_Firmware.TFT.desiredVersion<br />
Display_Firmware.TFT.currentVersion</td>
<td class="column4 style11 s">Display_Firmware.TFT.currentVersion.ACTUAL<br />
Display_Firmware.TFT.desiredVersion.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row8">
<td class="column0 style3 null"></td>
<td class="column1 style13 s style15" rowspan="5">InitConfigParameters</td>
<td class="column2 style10 null"></td>
<td class="column3 style11 s">Config.Screensaver.alternativeScreensaverLayout</td>
<td class="column4 style11 s">Config.Screensaver.alternativeScreensaverLayout.ACTUAL<br />
Config.Screensaver.alternativeScreensaverLayout.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row9">
<td class="column0 style3 null"></td>
<td class="column2 style10 null"></td>
<td class="column3 style11 s">Config.Screensaver.ScreensaverAdvanced</td>
<td class="column4 style10 s">Config.Screensaver.ScreensaverAdvanced.ACTUAL<br />
Config.Screensaver.ScreensaverAdvanced.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row10">
<td class="column0 style3 null"></td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Config.Screensaver.autoWeatherColorScreensaverLayout</td>
<td class="column4 style10 s">Config.Screensaver.autoWeatherColorScreensaverLayout.ACTUAL<br />
Config.Screensaver.autoWeatherColorScreensaverLayout.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row11">
<td class="column0 style3 null"></td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Config.Screensaver.timeoutScreensaver</td>
<td class="column4 style10 s">Config.Screensaver.timeoutScreensaver.ACTUAL<br />
Config.Screensaver.timeoutScreensaver.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row12">
<td class="column0 style3 null"></td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Config.Screensaver.screenSaverDoubleClick</td>
<td class="column4 style10 s">Config.Screensaver.screenSaverDoubleClick.ACTUAL<br />
Config.Screensaver.screenSaverDoubleClick.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row13">
<td class="column0 style3 null"></td>
<td class="column1 style13 s style15" rowspan="4">InitConfigParameters</td>
<td class="column2 style10 s">NSPanel_Path + 'Config.locale'</td>
<td class="column3 style10 s">Config.locale</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row14">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'Config.temperatureUnit'</td>
<td class="column3 style10 s">Config.temperatureUnit</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row15">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'Config.localeNumber'</td>
<td class="column3 style10 s">Config.localeNumber</td>
<td class="column4 style10 s">Config.localeNumber.VALUE</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row16">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'Config.temperatureUnitNumber'</td>
<td class="column3 style10 s">Config.temperatureUnitNumber</td>
<td class="column4 style10 s">Config.temperatureUnitNumber.VALUE</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row17">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">Init_ScreensaverAdvanced</td>
<td class="column2 style10 s">NSPanel_Path + 'Config.Screensaver.ScreensaverAdvanced'</td>
<td class="column3 style10 s">Config.Screensaver.ScreensaverAdvanced</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row18">
<td class="column0 style3 null"></td>
<td class="column1 style13 s style15" rowspan="3">Init_ActivePageData</td>
<td class="column2 style10 s">NSPanel_Path + 'ActivePage.heading'</td>
<td class="column3 style10 s">ActivePage.heading</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row19">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'ActivePage.type'</td>
<td class="column3 style10 s">ActivePage.type</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row20">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'ActivePage.id0'</td>
<td class="column3 style10 s">ActivePage.id0</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row21">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">Init_Screensaver_Backckground_Color_Switch</td>
<td class="column2 style10 s">NSPanel_Path + 'ScreensaverInfo.bgColorIndicator'</td>
<td class="column3 style10 s">ScreensaverInfo.bgColorIndicator</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row22">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">Init_bExit_Page_Change</td>
<td class="column2 style10 s">NSPanel_Path + 'ScreensaverInfo.bExitPage'</td>
<td class="column3 style10 s">ScreensaverInfo.bExitPage</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row23">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">Init_Dimmode_Trigger</td>
<td class="column2 style10 s">NSPanel_Path + 'ScreensaverInfo.Trigger_Dimmode'</td>
<td class="column3 style10 s">ScreensaverInfo.Trigger_Dimmode</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row24">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">InitActiveBrightness</td>
<td class="column2 style10 s">NSPanel_Path + 'ScreensaverInfo.activeBrightness' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder<br />
</span><span style="color:#000000; font-family:'Calibri (Textkörper)'; font-size:14pt">NSPanel_Path + 'ScreensaverInfo.activeDimmodeBrightness'</span></td>
<td class="column3 style10 s">ScreensaverInfo.activeBrightness<br />
ScreensaverInfo.activeDimmodeBrightness</td>
<td class="column4 style10 s">ScreensaverInfo.activeBrightness.ACTUAL<br />
ScreensaverInfo.activeBrightness.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row25">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">InitRebootPanel</td>
<td class="column2 style10 s">NSPanel_Path + 'Config.rebootNSPanel'</td>
<td class="column3 style10 s">Config.rebootNSPanel</td>
<td class="column4 style10 s">Config.rebootNSPanel.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row26">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">InitUpdateDatapoints</td>
<td class="column2 style10 s">NSPanel_Path + 'Config.Update.UpdateTasmota'</td>
<td class="column3 style10 s">Config.Update.UpdateTasmota<br />
Config.Update.UpdateBerry<br />
Config.Update.UpdateNextion</td>
<td class="column4 style10 s">Config.Update.UpdateTasmota.SET<br />
Config.Update.UpdateBerry.SET<br />
Config.Update.UpdateNextion.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row27">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">Init_Relays</td>
<td class="column2 style10 s">NSPanel_Path + 'Relay.1' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
NSPanel_Path + 'Relay.2'</span></td>
<td class="column3 style10 s">Relay.1<br />
Relay.2</td>
<td class="column4 style10 s">Relay.1.ACTUAL<br />
Relay.1.SET<br />
Relay.2.ACTUAL<br />
Relay.2.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row28">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">InitAlternateMRIconsSize</td>
<td class="column2 style10 s">NSPanel_Path + 'Config.MRIcons.alternateMRIconSize.1' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
NSPanel_Path + 'Config.MRIcons.alternateMRIconSize.2'</span></td>
<td class="column3 style10 s">Config.MRIcons.alternateMRIconSize.1<br />
Config.MRIcons.alternateMRIconSize.2</td>
<td class="column4 style10 s">Config.MRIcons.alternateMRIconSize.1.ACTUAL<br />
Config.MRIcons.alternateMRIconSize.1.SET<br />
Config.MRIcons.alternateMRIconSize.2.ACTUAL<br />
Config.MRIcons.alternateMRIconSize.2.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row29">
<td class="column0 style3 null"></td>
<td class="column1 style13 s style15" rowspan="2">InitDateformat</td>
<td class="column2 style10 s">NSPanel_Path + 'Config.Dateformat.weekday' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
NSPanel_Path + 'Config.Dateformat.month'</span></td>
<td class="column3 style10 s">Config.Dateformat.weekday<br />
Config.Dateformat.month</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row30">
<td class="column0 style3 null"></td>
<td class="column2 style10 s">NSPanel_Path + 'Config.Dateformat.Switch.weekday' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
NSPanel_Path + 'Config.Dateformat.Switch.month'</span></td>
<td class="column3 style10 s">Config.Dateformat.Switch.weekday<br />
Config.Dateformat.Switch.month</td>
<td class="column4 style10 s">Config.Dateformat.Switch.weekday.ACTUAL<br />
Config.Dateformat.Switch.weekday.SET<br />
Config.Dateformat.Switch.month.ACTUAL<br />
Config.Dateformat.Switch.month.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row31">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">CreateWeatherAlias</td>
<td class="column2 style10 s">weatherEntity + '.ICON' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">und</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
'daswetter.X.NextHours.Location_1.Day_1.current.symbol_value'</span></td>
<td class="column3 style10 null"></td>
<td class="column4 style10 s">weatherEntity + '.ICON'<br />
weatherEntity + '.TEMP'<br />
weatherEntity + '.TEMP_MIN'<br />
weatherEntity + '.TEMP_MAX'</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row32">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">CreateWeatherAlias</td>
<td class="column2 style10 s">weatherEntity + '.ICON' <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">und</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
'accuweather.X.Current.WeatherIcon'</span></td>
<td class="column3 style10 null"></td>
<td class="column4 style10 s">weatherEntity + '.ICON'<br />
weatherEntity + '.TEMP'<br />
weatherEntity + '.TEMP_MIN'<br />
weatherEntity + '.TEMP_MAX'</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row33">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">InitPageNavi</td>
<td class="column2 style10 s">NSPanel_Path + 'PageNavi'</td>
<td class="column3 style10 s">PageNavi</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row34">
<td class="column0 style3 null"></td>
<td class="column1 style9 s">InitWeatherForecast</td>
<td class="column2 style10 s">NSPanel_Path + &quot;ScreensaverInfo.weatherForecast&quot; <span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
NSPanel_Path + &quot;ScreensaverInfo.weatherForecastTimer&quot; </span><span style="color:#FF0000; font-family:'Calibri (Textkörper)'; font-size:14pt">oder</span><span style="color:#000000; font-family:'Calibri'; font-size:14pt"><br />
NSPanel_Path + &quot;ScreensaverInfo.entityChangeTime&quot;</span></td>
<td class="column3 style10 s">ScreensaverInfo.weatherForecast<br />
ScreensaverInfo.weatherForecastTimer<br />
ScreensaverInfo.entityChangeTime</td>
<td class="column4 style10 s">ScreensaverInfo.weatherForecast.ACTUAL<br />
ScreensaverInfo.weatherForecast.SET<br />
ScreensaverInfo.weatherForecastTimer.ACTUAL<br />
ScreensaverInfo.weatherForecastTimer.SET<br />
ScreensaverInfo.entityChangeTime.ACTUAL<br />
ScreensaverInfo.entityChangeTime.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row35">
<td class="column0">&nbsp;</td>
<td class="column1 style13 s style15" rowspan="4">InitDimmode</td>
<td class="column2 style10 s">NSPanel_Path + 'NSPanel_Dimmode_brightnessDay'</td>
<td class="column3 style10 s">NSPanel_Dimmode_brightnessDay</td>
<td class="column4 style10 s">Dimmode.brightnessDay.ACTUAL<br />
Dimmode.brightnessDay.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row36">
<td class="column0">&nbsp;</td>
<td class="column2 style10 s">NSPanel_Path + 'NSPanel_Dimmode_hourDay'</td>
<td class="column3 style10 s">NSPanel_Dimmode_hourDay</td>
<td class="column4 style10 s">Dimmode.hourDay.ACTUAL<br />
Dimmode.hourDay.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row37">
<td class="column0">&nbsp;</td>
<td class="column2 style10 s">NSPanel_Path + 'NSPanel_Dimmode_brightnessNight'</td>
<td class="column3 style10 s">NSPanel_Dimmode_brightnessNight</td>
<td class="column4 style10 s">Dimmode.brightnessNight.ACTUAL<br />
Dimmode.brightnessNight.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row38">
<td class="column0">&nbsp;</td>
<td class="column2 style10 s">NSPanel_Path + 'NSPanel_Dimmode_hourNight'</td>
<td class="column3 style10 s">NSPanel_Dimmode_hourNight</td>
<td class="column4 style10 s">Dimmode.hourNight.ACTUAL<br />
Dimmode.hourNight.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row39">
<td class="column0">&nbsp;</td>
<td class="column1 style13 s style15" rowspan="17">InitPopupNotify</td>
<td class="column2 style10 s">NSPanel_Path + 'ScreensaverInfo.popupNotifyHeading'</td>
<td class="column3 style10 s">ScreensaverInfo.popupNotifyHeading</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row40">
<td class="column0">&nbsp;</td>
<td class="column2 style10 s">NSPanel_Path + 'ScreensaverInfo.popupNotifyText'</td>
<td class="column3 style10 s">ScreensaverInfo.popupNotifyText</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row41">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyHeading</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row42">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyHeading</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row43">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyText</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row44">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyTextColor</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row45">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyInternalName</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row46">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyButton1TextColor</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row47">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyButton1Text</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row48">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyButton2TextColor</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row49">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyButton2Text</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row50">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifySleepTimeout</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row51">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyAction</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row52">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyLayout</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row53">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyFontIdText</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row54">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyIcon</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row55">
<td class="column0">&nbsp;</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">popupNotify.popupNotifyIconColor</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row56">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_locales</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">NSPanel_locales_json</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row57">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_panel_update_data</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">NSPanel_autoUpdate</td>
<td class="column4 style10 s">autoUpdate.ACTUAL<br />
autoUpdate.SET</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row58">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_panel_update_data</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">NSPanel_ipAddress</td>
<td class="column4 style10 s">ipAddress.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row59">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_online_tasmota_firmware_version</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Tasmota_Firmware.onlineVersion</td>
<td class="column4 style10 s">Tasmota_Firmware.onlineVersion.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row60">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_current_berry_driver_version</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Berry_Driver.currentVersion</td>
<td class="column4 style10 s">Display.BerryDriver.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row61">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_tasmota_status0</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Tasmota_Firmware.currentVersion<br />
Tasmota.Uptime<br />
Tasmota.Version<br />
Tasmota.Hardware<br />
Tasmota.Wifi.AP<br />
Tasmota.Wifi.SSId<br />
Tasmota.Wifi.BSSId<br />
Tasmota.Wifi.Channel<br />
Tasmota.Wifi.Mode<br />
Tasmota.Wifi.RSSI<br />
Tasmota.Wifi.Signal<br />
Tasmota.Product</td>
<td class="column4 style10 s">Tasmota.Uptime.ACTUAL<br />
Tasmota.Version.ACTUAL<br />
Tasmota.Hardware.ACTUAL<br />
Tasmota.Wifi.AP.ACTUAL<br />
Tasmota.Wifi.SSId.ACTUAL<br />
Tasmota.Wifi.BSSId.ACTUAL<br />
Tasmota.Wifi.Channel.ACTUAL<br />
Tasmota.Wifi.Mode.ACTUAL<br />
Tasmota.Wifi.RSSI.ACTUAL<br />
Tasmota.Wifi.Signal.ACTUAL<br />
Tasmota.Product.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row62">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">get_online_berry_driver_version</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Berry_Driver.onlineVersion</td>
<td class="column4 style10 s">Berry_Driver.onlineVersion.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row63">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">check_version_tft_firmware</td>
<td class="column2 style10 null"></td>
<td class="column3 style17 s">TFT_Firmware.onlineVersion</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row64">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">check_online_display_firmware</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Display_Firmware.onlineVersion</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row65">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">on({ id: config.panelRecvTopic }</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Display_Firmware.currentVersion<br />
NSPanel_Version</td>
<td class="column4 style10 s">Display.TFTVersion.ACTUAL<br />
Display.Model.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row66">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">update_tft_firmware</td>
<td class="column2 style10 null"></td>
<td class="column3 style17 s">TFT_Firmware.onlineVersion</td>
<td class="column4 style10 null"></td>
<td class="column5">&nbsp;</td>
</tr>
<tr class="row67">
<td class="column0">&nbsp;</td>
<td class="column1 style9 s">on({ id: config.panelRecvTopic.substring(0, config.panelRecvTopic.length - 'RESULT'.length) + 'SENSOR' }</td>
<td class="column2 style10 null"></td>
<td class="column3 style10 s">Sensor.Time<br />
Sensor.TempUnit<br />
Sensor.ANALOG.Temperature<br />
Sensor.ESP32.Temperature</td>
<td class="column4 style10 s">Sensor.Time.ACTUAL<br />
Sensor.TempUnit.ACTUAL<br />
Sensor.ANALOG.Temperature.ACTUAL<br />
Sensor.ESP32.Temperature.ACTUAL</td>
<td class="column5">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

1
old/_Footer.md Normal file

@@ -0,0 +1 @@
<h3 align="center"><img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5e739006-57ba-43fc-bf63-9e4e3d1a949e" width="24" height="24"><a href="#top">&nbsp;&nbsp;Nach oben&nbsp;&nbsp;</a><img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5e739006-57ba-43fc-bf63-9e4e3d1a949e" width="24" height="24"></h3>

189
old/_Sidebar.md Normal file

@@ -0,0 +1,189 @@
<img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/79e40616-d95e-4919-9a80-e4c1cca1bb7f" width="75%" height="75%">
<img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5cc6a801-6d9e-4f77-bb9d-413a140a361e" width="75%" height="75%">
<h1>
<a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki">Home</a>
</h1>
<h1><img src="https://img.shields.io/github/release/joBr99/nspanel-lovelace-ui.svg"></h1>
<details>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/98462fba-87d9-4573-a403-82d21c6a60a6">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/a4fd59d9-d8cb-409e-9d56-1bde3ee5316f">
</picture>
History / Changelog
</h3>
</summary>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/Changelog">Changelog</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/Release-Notes">Release Notes</a></li>
</ul>
</details>
<details open>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/a2745ac7-6bed-4acb-b52e-c34f6f65cfa8">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/691c8db6-e3b0-45e7-9c63-f3c2a3993a6a">
</picture>
<a href="ioBroker---Basisinstallation">Basisinstallation</a>
</h3>
</summary>
<ul>
<li><a href="ioBroker---Basisinstallation#step-f%C3%BCr-step---anleitung">Step für Step - Anleitung</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#waiting-for-content---es-geht-nicht-weiter">NSPanel Starthilfe FAQ</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade">NSPanelTS.ts Update</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Nextion-Editor">NSPanel Emulator</a></li>
</ul>
</details>
<details open>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/20efe14d-7c1b-4602-8b9c-3540d0c0ec87">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/06babe1d-3a18-4a09-ab65-e566814d9e69">
</picture>
Definitionen
</h3>
</summary>
<ul>
<li>Aliase</li>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Table">Aliase Tabelle</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen">Aliase erstellen</a></li>
</ul>
<li>Cards</li>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#page-beispiele">Card Beispiele</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#page-aufbau">Card Aufbau</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#how-2-page">How to Card bauen</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)">Cards und Variablen</a></li>
</ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver">Screensaver</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC">Service Men&uuml;</a></li>
<li><a href="NSPanel--cardMedia--Der-komplette-Leitfaden">Die cardMedia - kompletter Leitfaden</a></li>
<ul>
<li><a href="NSPanel--cardMedia--Der-SONOS-Player">Der SONOS Player</a></li>
<li><a href="NSPanel--cardMedia--Der-Amazon-Alexa-Player">Der Amazon Alexa Player</a></li>
<li><a href="NSPanel--cardMedia--Der-SpotifyPremium-Player">Der Spotify-Premium Player</a></li>
<li><a href="NSPanel--cardMedia--Der-Bose-Soundtouch-Player">Der Bose Soundtouch Player</a></li>
</ul>
<li><a href="https://docs.nspanel.pky.eu/icon-cheatsheet.html">Material Design Icons</a></li>
</ul>
</details>
<details open>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/0b5651a7-3fc2-4f83-8dc9-b58b57e7b940">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/6a57a176-ac5d-47e6-babf-2ec86db1c53d">
</picture>h&auml;ufig gestellte Fragen
</h3>
</summary>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation">Navigation</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen">Scripte und Anleitungen</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ">Tasmota</a></li>
<li><a href="">Feature Request</a></li>
</ul>
</details>
<details open>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/9a31b6a4-1c05-4e93-8670-c2df30dc0ed9">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/848df350-bc37-4298-9098-20980b619ba3">
</picture>
Community
</h3>
</summary>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Pages-%E2%80%90-Zeigt-her-Eure-Cards">Zeigt her eure Cards</a></li>
<li><a href="https://forum.iobroker.net/topic/69942/sonoff-nspanel-mit-lovelace-ui-zeigt-her-eure-cards">NSPanel im ioBroker Forum</a>
<ul>
<li><a href="https://forum.iobroker.net/topic/50888/sonoff-nspanel/1542" target="_blank">Support Thread No#01 (inaktiv)</a>
<li><a href="https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui/10000" target="_blank">Support Thread No#02 (aktiv)</a>
</ul>
</li>
</ul>
</details>
<!--details>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/7c40fead-cd45-4d1b-a97f-34ea61e4ba87">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/dbf2d64e-ef48-4177-ad99-f1941da1ecbb">
</picture>
Archiv</h3>
</summary>
<ul>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ZZZ-Archiv">Archiv</a></li>
</ul>
</details-->
<details>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/8020e839-36d3-45fe-87af-235088d069b1">
<img align="left" width="24" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/f8a810e3-552a-46bf-b8ef-eea0bbcfd71d">
</picture>
Youtube
</h3>
</summary>
<ul>
<li><a href="https://www.youtube.com/@haus_automation" target="_blank">haus-automatisierung.com</a></li>
<ul>
<li><a href="https://www.youtube.com/watch?v=T2Tk9uQdvO0" target="_blank">Sonoff NSPanel - Technische Details - Bestes DIY-Produkt?</a>
<li><a href="https://www.youtube.com/watch?v=uqPz08ZpFW8&t=382s" target="_blank">Sonoff NSPanel - Tasmota flashen + ioBroker-Integration</a>
<li><a href="https://www.youtube.com/watch?v=ZPLJk2ZLo_8&t=315s" target="_blank">NSPanel mit Lovelace UI - so habe ich mir das vorgestellt!</a>
</ul>
</ul>
</details>
<details open>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/3bcd710e-f126-4521-848e-c81ca29813cb">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/f5457a7b-864d-4ebb-a0a0-941e2117b791">
</picture>
<a href="https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker">Aktuelle Skript Versionen</a>
</h3>
</summary>
<ul>
<li><a href="https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts">NsPanelTs.ts</a></li>
<li><a href="https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/icon_mapping.ts">icon_mapping.ts</a></li>
<li><a href="https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be">autoexec.be</a></li>
</ul>
</details>
<details>
<summary>
<h3>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/a03ea406-d8de-4dec-bd45-b1a8997031ca">
<img align="left" alt="i" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/a03ea406-d8de-4dec-bd45-b1a8997031ca">
</picture>
Developer-Board</h3>
</summary>
<ul>
<li><a href="">Team</a></li>
<li><a href="https://github.com/joBr99/nspanel-lovelace-ui/wiki/ZZZ-Archiv">Archiv</a></li>
</ul>
</details>
<img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/ae62f7fc-9c99-4495-a078-28557bd0935d" width="98%" height="98%">
****
<h3>Finde uns unter:</h3>
<h3><a href="https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui/10000"><img align="left" alt="iobroker" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/d28ae3e3-7934-4f99-9979-68e8fe1a779e" height="98%" width="98%"></a></h3>
<h3><a href="https://discord.com/channels/1035264777288695889/1057356154457567242"><img align="left" alt="discord" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/5b2087b6-3bcb-4b28-a7a1-81a433c82362" height="98%" width="98%"></a></h3>

@@ -0,0 +1 @@
Basis

@@ -0,0 +1,367 @@
## Step für Step - Anleitung zur Installation
Anleitung zur Einrichtung eines Sonoff NSPanel mit Lovelace UI unter ioBroker
Am Ende dieses Leitfaden sollte auf eurem Panel der Bildschirmschoner zu sehen sein.
![Screensaver Standard](picture/allgemein/screensaver.png)
# **Index**
**1.)** [ioBroker Voraussetzungen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#1-ioBroker-Voraussetzungen)
**2.)** [NSPanel mit Tasmota flashen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#2-panel-mit-tasmota-flashen)
**3.)** [Berry-Treiber installieren](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#3-berry-treiber-installieren)
**4.)** [MQTT (Tasmota) Config](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#4-mqtt-tasmota-config)
**5.)** [TFT-Firmware flashen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#5-tft-firmware-flashen)
**6.)** [MQTT (ioBroker) Config](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#6-mqtt-iobroker-config)
- 6a) [Standard-Variante mit MQTT Broker/Client Adapter](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#6a-standard-variante-mit-mqtt-brokerclient-adapter)
- 6b) [Abweichende Variante **mit** extern betriebenem Mosquitto MQTT-Broker --> mit MQTT-Client Adapter](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#6b-abweichende-variante-mit-extern-betriebenem-mosquitto-mqtt-broker----mit-mqtt-client-adapter)
**7.)** [CustomSend anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#7-customsend-anlegen)
**8.)** [Einstellungen in JS-Adapter Instanz](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#8--einstellungen-in-js-adapter-instanz)
**9.)** [Icon "TypeScript" anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#8--icon-typescript-anlegen)
**10.)** [„NSPanelTs.ts“ anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#9--nspaneltsts-anlegen)
**11.)** [„NSPanelTs.ts“ konfigurieren](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#9--nspaneltsts-konfigurieren)
**12.)** [Aliase anlegen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#11--aliase-anlegen)
**13.)** [Seitengestaltung](https://github.com/joBr99/nspanel-lovelace-ui/wiki/iobroker---Basisinstallation#12--seitengestaltung)
## **1.) ioBroker Voraussetzungen**
Für den Betrieb wird „kein“ ioBroker-lovelace-Adapter benötigt. Die komplette lovelace-Integration erfolgt über die TFT-Firmware und die nachfolgenden ioBroker-Adapter.
* ### MQTT - Adapter
![MQTT Server / Client Adapter](picture/basisinstallation/mqtt-server-client-adapter.png)
Die Kommunikation zwischen dem NSPanel und ioBroker erfolgt mittels MQTT über Tasmota. Es besteht auch die Möglichkeit einen externen MQTT-Server zu nutzen. Dazu mehr im Punkt MQTT Config.
* ### Javascript-Adapter
Es werden zwei Type-Skripte (TS = das etwas mächtigere Javascript) benötigt. Zum Einen ein Icon-Skript, da alle verwendeten Icons nicht als „echte Grafiken“ im Panel hinterlegt sind, sondern als Schriftzeichen-Symbole. Des Weiteren ein TS-Skript mit dem eigentlichen Laufzeit-Code, welches für jedes eingesetzte NSPanel vorhanden und konfiguriert sein muss.
* ### Geräte verwalten (Device) - Adapter
![Device Adpter](picture/basisinstallation/device-adapter.png)
Über diesen Adapter sollen die Aliase später (mit Ausnahme des Media-Alias für Alexa & Co.) erstellt werden. Mehr infos dazu dann im Abschnitt Alias erstellen
* ### Accu-Weather-Adapter
![ACCUWEATHER Adapter](picture/basisinstallation/accuweather-adapter.png)
Spielt in erster Linie eine Rolle beim Screensaver-Wetter, da zum Ersten die Icons und die Temperatur-Informationen für den Forecast ausgelesen werden und zum Zweiten das aktuelle Wettericon für den Screensaver benötigt wird.
als Alternative kann auch der `DAS WETTER` Adapter genutzt werden. In dem Fall muss im Script unter Punkt 3 die Konfiguration angepasst werden.
***
## **2.) Panel mit Tasmota flashen**
**Sollte das NSPanel bereits vor der Bereitstellung der Tasmota v13.0.X initial geflashed worden sein, kann es zu Partitionierungs-Problemen mit einer Version >= 13.0.X kommen. In diesem Fall muss das Partitionsschema geändert werden. Ein neues NSPanel kann mit der neuesten Tasmota-Version geflashed werden.
Dazu gibt es eine Anleitung hier im Wiki unter [Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ).
Danach kann man auf Version 13.0 und höher updaten.**
Matthias Kleine hat ein neues Video zum ganzen Installationsprozzes, vom flashen bis zum Anpassen der NSPanel-Script Datei, erstellt.
**Neues Video Tutorial** von [haus-automatisierung.com](http://haus-automatisierung.com/)
https://www.youtube.com/watch?v=ZPLJk2ZLo_8 - NSPanel mit Lovelace UI - so habe ich mir das vorgestellt!
Als Alternative zu den von Matthias gezeigten Tools zum Flashen des ESP32 kann man mittlerweile auch den [Tasmota WebInstaller](https://tasmota.github.io/install/) nutzen. Die Nutzung ist relativ selbsterklärend.
Nach dem Flashen solltest du bereits die grundsätzliche Tasmota Konfiguration vornehmen:
a) Unter „Sonstige Einstellungen“ trägst du im Feld Vorlage
```json
{"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}
```
ein, hakst Aktivieren "an" und klickst auf Speichern. Du kannst natürlich auch noch Device und Friendly Name vergeben
![TASMOTA Sonstige Einstellungen](<picture/basisinstallation/tasmota-sonstige- einstellungen-vorlage.png>)
b) Unter Logging fügst du die IP von deinem ioBroker unter Sys-Log Host () ein und klickst auf Speichern.
<img src="picture/basisinstallation/tasmota-logging-einstellungen.png" alt="TASMOTA Logging" width="350"/>
c) **Hinweis**: Unter Umständen macht es Sinn, die NSPanel Temperatursensoren noch zu konfiguirieren / kalibrieren. Wir haben dies in der [Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ#2-sensoren) erklärt.
***
## **3.) Berry-Treiber installieren**
Im Tasmota findest du unter Konsolen den Button Verwalte Dateisystem. Wenn du diesen anklickst, siehst du einen weiteren Button Datei erstellen und bearbeiten. Du änderst den Dateinamen neue-datei.txt in autoexec.be und fügst den Inhalt aus dem folgenden Link ein:
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be**
<img src="picture/basisinstallation/tasmota-autoexec.png" alt="Tasmota Dateisystem" width="700"/>
Danach klickst du auf Speichern und dann solltest du Tasmota rebooten.
Wenn das Panel bereits unter einer anderen Variante installiert war, dann bitte alle Dateien (insbesondere autoexec.be und autoexec.bec) vorher über das Flammensymbol hinter dem Dateinamen löschen. Und von vorne mit dem Punkt 3 beginnen.
<img src="picture/basisinstallation/tasmota-dateisystem.png" alt="Tasmota Dateisystem" width="500"/>
***
## **4.) MQTT (Tasmota) Config**
Im Tasmota unter Einstellungen/MQTT konfigurieren:
**Host** -> die IP deines ioBrokers / MQTT-Server
**Port** deiner ioBroker-MQTT-Adapter-Instanz eingeben (für mqtt.0.). Wenn du noch keinen MQTT-Adapter installiert hast, dann verwende bitte nicht unbedingt den Standard-Port 1883. Dieser Port wird auch von anderen Pseudo-MQTT-Adaptern (Sonoff/Shelly/etc.) ebenfalls verwendet und führt im parallelen Betrieb mit anderen MQTT-Devices später unweigerlich zu Komplikationen. Verwende für die MQTT-Instanzen einen Port ab 1886 oder 1887 oder 1888 oder höher. Das Problem zeigt sich in der Regel ab dem Zeitpunkt, an dem der Topic CustomSend nicht von deiner MQTT-Instanz abonniert wird.
**Client** Name der in der Connect Meldung vom MQTT-Adapter angezeigt werden soll (mqtt.0.info.connection)
**Benutzer** und **Passwort** Wenn in der ioBroker-MQTT-Instanz vergeben wurde, hier auch eintagen
**Topic** Name für die Variable `%topic%` , diese wird für die Hierarchie im MQTT genutzt
**Full Topic** verwende in der Regel SmartHome/%topic%/%prefix%/. Eine Erklärung dazu, warum es anders sein soll als wie in der Tasmota vorgeschlagen, [findest du hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#mqtt-tasmota-einstellungen).
Speichern klicken und Einstellungen verlassen
<img src="picture/basisinstallation/tasmota-mqtt.png" alt="Tasmota MQTT Einstellungen" width="350"/>
***
## **5.) TFT-Firmware flashen**
> [!IMPORTANT]
> Es gab Probleme mit der Tasmota-Version 14.2.X beim Flashen. Daher bitte vor dem Flashen des Displays (TFT) auf die Tasmota-Version >= 14.3.0 upgraden. Ansonsten kann es zu Fehlern beim FlashNextion kommen!
> **Achtung !!!**
>Zum Flashen ist es wichtig, dass Ihr die aktuelle TFT-Firmware-Version nutzt, sonst kann es zu ungewollten Fehlern kommen und ggf. müsst Ihr den Flashvorgang dann wiederholen. Ihr findet die aktuelle Version immer im aktuellen [NsPanelTS.ts-Skript](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts) am Ende des ioBroker TypeScript Header:**
```json
Upgrades in Konsole:
Tasmota BerryDriver : Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
>> TFT EU STABLE Version : FlashNextion http://nspanel.pky.eu/lovelace-ui/github/nspanel-v4.4.0.tft <<
---------------------------------------------------------------------------------------
*/
/******************************* Begin CONFIG Parameter *******************************/
```
Zum Flashen müsst Ihr dann die Tasmota Konsole öffnen und in die Kommandozeile
`FlashNextion <Hier den Link aus dem NsPanelTS.ts-Skript einfügen>` (siehe oben)
eingeben und mit Enter bestätigen. Das Panel installiert jetzt die TFT-Firmware (Kann beim ersten Mal ein paar Minuten dauern Fortschritt beobachten am Ende erfolgt ein Reboot und das Panel wechselt in einen Screen „Waiting for Content“
<img src="picture/basisinstallation/panel-waiting-for-content.png" alt="Waiting fpor Content" width="500"/>
***
## **6.) MQTT (ioBroker) Config**
### 6a) Standard-Variante mit MQTT Broker/Client Adapter
![image](https://github.com/user-attachments/assets/387f9866-924e-4294-b7ac-cf95360c1fd7)
Wenn du bereits eine Instanz des MQTT-Adapters (z.B. mqtt.0.) nutzt, dann bitte den Port der MQTT-Adapter-Instanz auch im Tasmota-MQTT verwenden. Bitte auch hier den Hinweis aus Punkt 4b beachten und ggf. einen anderen Port für die Kommunikation eintragen.
Ansonsten wählst du im ioBroker-Menü unter „Adapter“ den mqtt-Adapter aus und erstellst wie gewohnt eine Instanz des Adapters. Du kannst dir natürlich auch eine zusätzliche Instanz (z.B. mqtt.1. oder mqtt.2. etc.) erstellen.
Einstellungen im Reiter Verbindung
a) IP = Server/Broker
b) Zugriff von allen IPs zulassen auswählen
c) Port 1886 (analog Port aus Tasmota/MQTT)
d) Benutzer (analog Benutzer aus Tasmota/MQTT)
e) Kennwort + Kennwort wiederholen (analog Passwort aus Tasmota/MQTT)
<img width="1186" alt="MQTT Server Verbindung" src="picture/basisinstallation/mqtt-server-verbindung.png">
Einstellungen im Reiter Server-Einstellungen
f) States bei subscribe publizieren (angehakt)
g) Leere Session erzwingen: Client-Einstellungen verwenden
<img width="1186" alt="MQTT Server Settings" src="picture/basisinstallation/mqtt-server-settings.png">
Einstellungen im Reiter MQTT-Einstellungen
h) Maske zum Bekanntgeben eigener States: **mqtt.0.*** (Bei zusätzlicher Instanz entsprechend höher (mqtt.1.* etc.)
i) Eigene States beim Verbinden publizieren (angehakt)
<img width="1186" alt="MQTT Server MQTT Einstellungen" src="picture/basisinstallation/mqtt-server-mqtt-einstellungen.png">
> **!!! ACHTUNG: !!!**
> Der haken bei "**Nur bei Änderungen publizieren**" darf nicht aktiv sein, da es sonst zu Problemen in der Navigation kommen kann!
> Es wird oft das Sternchen * hinter der Zahl vergessen mqtt.0.*
______
### 6b) Abweichende Variante **mit** extern betriebenem Mosquitto MQTT-Broker --> mit MQTT-Client Adapter
![MQTT Client Adapter](picture/basisinstallation/mqtt-client-adapter.png)
> [!NOTE]
> Nur befolgen, wenn ein **externer MQTT-Broker** "außerhalb der ioBroker-Umgebung" betriebsbereit installiert wurde!
**Wichtig** ist bei `Zusätzliche subscriptions` das Topic einzutragen.
![MQTT Client Einstellungen](picture/basisinstallation/mqtt-client-einstellungen.png)
Einstellungen für die Datenpunkte, hier am Beispiel von .../cmnd/CustomSend
![Einstellungen am Datenpunkt](picture/basisinstallation/mqtt-client-dp-einstellungen.png)
Kurzanleitung mit dem MQTT-Client Adapter unter:
https://forum.iobroker.net/post/1204391
***
## **7.) CustomSend anlegen**
Der MQTT Datenpunkt wird benötigt und muss vom MQTT-Adapter angelegt werden.
**Es gibt drei Varianten um diesen Datenpunkt zu erzeugen:**
Variante 1:
Gehe in das Objeckt-Verzeichnis "**mqtt.0.SmartHome.NSPanel_1.cmnd**" und legst in diesem Verzeichnis mit Hilfe des "Expertenmodus" einen Datenpunkt **CustomSend** (Achtung auf korrekte Schreibweise achten) an. Nachdem der Datenpunkt angelegt wurde, sollte der Expertenmodus wieder deaktiviert werden.
> Im Video wird die Variante 1 direkt in den Objekten des mqtt.0. gezeigt!
Variante 2:
Um den Datenpunkt zu erzeugen, öffnest du im Tasmota die Konsole und gibst
`CustomSend time~12:00`
ein.
Variante 3:
Alternativ kann auch der MQTT-Explorer (http://mqtt-explorer.com/) genutzt werden und ein payload unter .../cmnd abgesendet werden.
im Feld Topic wird er koplette Topic eingetragen.
`SmartHome/NSPanel_1/cmnd/CustomSend`
den Punkt `raw` auswählen und als Wert `time~12:00` eintragen. Zum Schluß den Button `PUBLISH` drücken.
![MQTT Explorer CustomSend](picture/basisinstallation/mqtt-explorer-customsend.png)
Danach sollte im MQTT-Adapter unter Objekte ein Datenpunkt: „SmartHome/NSPanel_1/cmnd/CustomSend“ erscheinen. Falls nicht, solange wiederholen bis dieser Datenpunkt abonniert wurde, oder ggfs. Nochmals die MQTT-Einstellungen überprüfen.
**Achtung:** Wenn man den MQTT-Client Adapter einsetzt, wird der Wert '12:00' **NICHT** im ioBroker gesetzt - dh. der MQTT-Pfad wird erzeugt, aber der Wert steht auf (null) und nicht auf '12:00'. Es muss zuerst für 'CustomSend' die Publish-Funktion aktiviert werden (Zahnrad rechte Seite) - erst jetzt kann man nochmal den Wert mit dem MQTT-Explorer publischen oder den Wert '12:00' direkt im ioBroker unter 'CustomSend' eingeben.
***
## **8.) Einstellungen in JS-Adapter Instanz**
Für den erfolgreichen Start des NSPanelTs.ts (siehe Punkt 10) TypeScript sind noch nachfolgende Einstellungen in der JavaScript-Adapter-Instanz erforderlich:
* Hinzufügen der npm Module: `moment` und `moment-parseformat`
* Aktivierung der Option `Kommando "setObject" erlauben`
* Aktivierung der Option `Kommando "exec" erlauben`
![JS-Adapter Einstellungen](picture/basisinstallation/js-adapter-einstellungen.png)
***
## **9.) Icon „TypeScript“ anlegen**
Wie bereits in der Einleitung erwähnt, werden zwei TypeScripts (TS) benötigt. Das erste ist das Icon-Skript. Das Icon-Skript dient zur Übersetzung von Schriftzeichensymbolen zwischen dem Skript und der TFT-Firmware.
Unter dem grünen Vezeichnisbaum „global“ im ioBroker-Menüpunkt Skripte erzeugst du ein Skript mit dem Namen „IconsSelector“ vom Typ: TypeScript (TS). Dort fügst du den Inhalt der Datei:
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/icon_mapping.ts**
ein und startest das Skript.
**Nur zur Info:**
Du kannst die einzelnen Icon-Symbolnamen (aktuell 6896 unterschiedliche Icon-Symbole) auf
**https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html**
einsehen und später (kommen wir bei der Alias-Erstellung noch zu) auch jedes Icon in deinem Panel an entsprechender Stelle verwenden. Für die Einbindung sind die „Namen“ der Icons wichtig.
***
## **10.) „NSPanelTs.ts“ anlegen**
Unter dem regulären Vezeichnisbaum „common“ im ioBroker-Menüpunkt Skripte erzeugst du (gerne auch in weiteren Unterverzeichnissen) ein weiteres TypeScript mit dem Inhalt:
**https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/ioBroker/NsPanelTs.ts**
Dieses Script enthält nur die Grundstruktur und ist nach der Parametereinstellung lauffähig.
Für jedes einzelne NSPanel das du konfigurieren möchtest, musst du dieses Skript anlegen und speziell für dieses jeweilige NSPanel entsprechende Einstellungen vornehmen. Für den Skriptnamen verwende in der Regel eine Kombination aus Panel und Skriptversion, wie z.B.: NSPANEL_1_3.9.0
(Es kommen in regelmäßigen Abständen weitere NSPanel-Features und Bug-Fixes in das GitHub-Skript in denen dann nur noch der untere Teil `(--- ab hier keine Konfiguration mehr ---)` ausgetauscht werden muss und die NSPanel-Parameter erhalten bleiben)
Im oberen Teil des Skripts sind die grundsätzlichen Teile der zu erstellenden Aliase, Konstanten und Variablen (auch Seiten) enthalten. An dieser Stelle ist zunächst wichtig, die Kommunikationsparameter für die MQTT-Kommunikation anzupassen, beginnend mit
```typescript
/***** 1. Tasmota-Config *****/
// DE: Anpassen an die Verzeichnisse der MQTT-Adapter-Instanz
// EN: Adapt to the MQTT adapter instance directories
const NSPanelReceiveTopic: string = 'mqtt.0.SmartHome.NSPanel_1.tele.RESULT';
const NSPanelSendTopic: string = 'mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend';
....
/***** 2. Directories in 0_userdata.0... *****/
// DE: Anpassen an das jeweilige NSPanel
// EN: Adapt to the respective NSPanel
const NSPanel_Path = '0_userdata.0.NSPanel.1.';
```
Bitte starte das Skript. Alle weiteren Parameter stellen wir später ein. Ab jetzt sollte der Startup-Screen „Waiting for Connection“ in den Sreensaver wechseln und minütlich die Uhrzeit an den Screensaver übertragen und das Datum aktualisiert werden.
***
## **11.) „NSPanelTs.ts“ konfigurieren**
Im Punkt 9 haben wir zunächst die nur Kommunikation zwischen Panel und Skript über MQTT hergestellt. Jetzt kommen wir zum Inhalt des Panels:
**a) Screensaver einstellen**
das Aussehen des Screensaver kannst du ganz nach deinen Wüschen gestallten. Dafür haben wir im Wiki ein eigenes Thema erstellt, da sich im Laufe der Zeit die Möglichkeiten immer erweitert haben. [Hier lang zu den Einstellungen](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver)
**b) Diverse Datenpunkte**
Beim ersten Start des Scripts erzeugt das Skript unter 0_userdata diverse Datenpunkte für Screensaver Dimmode, interne Sensoren, Tasmota-Statuswerte, etc.
Der Pfad kann im Skript unter „NSPanel_Path“ angepasst werden.
> **Achtung!**
> Ab TS-Script-Version 3.5.0.5 und mit installiertem JavaScript-Adapter ab Version v6.1.3 können auch weitere Alias automatisch erzeugt werden, wenn die Konstante **autoCreateAlias** auf **true** steht.
***
## **12.) Aliase Anlegen**
Jetzt kommt der eigentliche Teil der Seitengestaltung. Es werden keine Datenpunkte benötigt, sondern Aliase.
Ein Alias ist „kein“ Datenpunkt, sondern ein Objekt mit mehreren Datenpunkten.
Das Skript setzt entsprechende Trigger auf die Alias-Datenpunkte .SET, .GET, .ACTUAL usw. Deshalb werden deine Steuerelemente im Panel nicht greifen, wenn du mit einzelnen Datenpunkten aus den verschiedenen Adaptern arbeitest.
Eine genaue Beschreibung für die diversen Alias-Typen findest du [hier.](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen)
***
## **13.) Seitengestaltung**
Die Seitengestaltung ist nun in einen eigenen Bereich hier in der Wiki gewandert.
Die unten aufgeführten Beispiele sind **nicht** mehr im Skript enthalten.
[Bitte hier klicken](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele)
***
**Der Folgende bereich stammt aus einer früheren Version der Wiki, bitte den Link oben beachten!**
Am Besten benutzt ihr die Beispiele im Skript und legt entsprechende Aliase hierzu an, die auch in diesem ioBroker-Community-Topic innerhalb der letzten Wochen beschrieben wurden.
cardEntities mit Alias Lampe/Dimmer/Switch
![image](https://user-images.githubusercontent.com/102996011/189372243-fceb8f9d-d020-4640-a064-3f8134fef24b.png)
cardEntities mit RGB und HUE Aliasen (Color)
![image](https://user-images.githubusercontent.com/102996011/189372280-67b05750-2e2d-4093-b708-542363d8e56f.png)
popupLight mit Farbtemperatur und Brightness
![image](https://user-images.githubusercontent.com/102996011/189372471-f0abcade-8c00-46fc-9aa3-f445ea4764b1.png)
popupLight mit ColorWheel
![image](https://user-images.githubusercontent.com/102996011/189372558-cf411bba-5143-4c1f-b27c-4b64f22ca834.png)
cardGrid mit Radiosendern/Playlists (Alias Taste)
![image](https://user-images.githubusercontent.com/102996011/189372592-de0962ee-9015-4ce8-80e9-126669c61d97.png)
cardEntities mit Aliasen Lautstärke und Info
![image](https://user-images.githubusercontent.com/102996011/189372790-c6f1ea6f-1f24-4ba8-8bde-0459da1f2ab7.png)
cardEntities mit Fenster, Tür, Jalousie und Verschluss
![image](https://user-images.githubusercontent.com/102996011/189372858-3232a079-e4f1-4077-b947-6ba50fdfeb09.png)
cardEntities mit Abfallkalender
![image](https://user-images.githubusercontent.com/102996011/189372953-51ded00a-68ad-4cb8-b8c3-c85b0f8d3da5.png)
cardMedia
![image](https://user-images.githubusercontent.com/102996011/189373030-31692512-f934-418a-9c2f-e7624c8cb09f.png)
cardAlarm
![image](https://user-images.githubusercontent.com/102996011/189373105-e46f8872-3b3c-4365-8113-0a44570a03a7.png)
cardGrid
![image](https://user-images.githubusercontent.com/102996011/189373286-c5ad72d0-5e10-4c59-b691-f4bfd1ba354f.png)
cardEntities
![image](https://user-images.githubusercontent.com/102996011/189373401-42696c89-0d65-48f8-9cdf-a4c9a84073d6.png)
cardEntities als Subpage unter cardEntities (verschachtelt)
![image](https://user-images.githubusercontent.com/102996011/189373454-c6aa9236-1fad-47ef-915f-fb6356a4a613.png)
cardNotify
![image](https://user-images.githubusercontent.com/102996011/189373507-41a10711-afc0-4186-b94b-690bc1805a7f.png)
Steuerung von Klimageräten/Klimaanlagen
![image](https://user-images.githubusercontent.com/102996011/189373662-1aade2a6-3ccd-4cff-831c-c6c0a90ce999.png)
QR-Code für z.B. Gäste WLAN
![image](https://user-images.githubusercontent.com/102996011/189373730-1ceecc65-e503-47dc-8639-c29bb93b8eb1.png)
Neues Design für Thermostate
![image](https://user-images.githubusercontent.com/102996011/189373785-6d1870ef-4544-4099-8fc5-fd4b7f546d74.png)
***

File diff suppressed because it is too large Load Diff

@@ -0,0 +1,872 @@
> **Seite befindet sich noch im Aufbau
> Sollte aktuell ein Alias nicht vollständig beschrieben werden, dann gerne eine Frage am Ende des nachfolgenden Thread stellen:**
> https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui
# Einleitung:
## Alias-Hilfsmittel
**Welche Hilfsmittel werden zur Erstellung eines Alias benötigt?:**
Der "Geräte verwalten"-Adapter für die meisten Alias-Typen:
![image](https://user-images.githubusercontent.com/102996011/189475521-07d78146-e49d-406a-95bc-804b3302caa2.png)
Der "Alias-Manager"-Adapter für spezielle Alias-Typen, wie dem Alias "Media":
![image](https://user-images.githubusercontent.com/102996011/189475471-26f0ed04-4715-4eed-8924-cf6d7be879a9.png)
**Ich habe die zwei Adapter installiert. Wie bekomme ich die in das ioBroker-Menü:**
Über das Stift-Symbol im ioBroker-Hauptmenü lassen sich die Adapter individuell für jeden Benutzer ein- oder ausschalten.
![image](https://user-images.githubusercontent.com/102996011/189476871-85b18ead-f032-4bd0-b8a4-310742b778fc.png)
![image](https://user-images.githubusercontent.com/102996011/189476923-59ef3397-543f-43ef-9ab9-e839b9eba9cb.png)
Es sollte ein Haken bei Geräte und Alias-Manager gesetzt sein.
**Was sind Aliase:**
Aliase (Pseudonyme) sind die virtuellen Zustandsobjekte, die mit realen Zuständen (Datenpunkten) verknüpft sind.
**Warum benötige ich im TS-Skript überhaupt Aliase und keine Datenpunkte?**
Das TS-Script für das Sonoff NSPanel ist so aufgebaut, dass eigentlich jeder Adapter zur Steuerung benutzt werden kann. Hierbei haben die Entwickler von Adaptern für gleiche Funktionen unterschiedliche Namen verwendet:
Beispiel:
* Sonoff-Adapter: **.power** (aus Tasmota übertragen)
* MQTT-Adapter: **.power** (aus Tasmota übertragen)
* Shelly-Adapter: **.switch**
* KNX-Adapter: **.switch**
* Deconz-Adapter: **.on**
* etc.
Also immer der Wunsch, einen Zustand eines Aktors mit true/false zu verändern.
> Innerhalb der Licht-Adapter wird das später noch deutlicher
Der Alias benötigt also anstatt **.Power** oder **.Switch** oder **.On** immer nur ein **.SET**, damit der Zustand des Schalt-Aktor's unabhängig vom installierten Adapter geschaltet werden kann. In diesem Fall meldet der im Skript eingebundene Alias ein true oder false in den Alias-Datenpunkt .SET und reicht den Zustandswert an den zugewiesenen spezifischen Adapter-Datenpunkt (ganz egal welcher Typ erwartet wird) weiter.
# "Geräte verwalten"-Adapter
Zunächst sollt man sich überlegen, welche Aliase nur für ein bestimmtes NSPanel gelten sollen oder für mehrere NSPanels oder sogar innerhalb anderer Visualisierungsarten z.B. ioBroker VIS mitverwendet werden sollen. Dann kann man die Alias Struktur entsprechend mit Ordnern und Unterordnern verfeinern. Das Bürolicht soll z.B. nur über NSPanel_1 geschaltet werden, aber nicht über NS_Panel_2. Das Wetter hingegen ist für alle NSPanel gleich.
![image](https://user-images.githubusercontent.com/102996011/189477432-2c814d56-7c37-41c2-b371-31b06e6fe2aa.png)
## Alias erzeugen - Schritt 1 - Tab "Allgemein"
Der erste Schritt in der Alias Erstellung mit dem "Geräte verwalten"-Adapter ist fast immer der gleiche.
Es wird über die "+" Schaltfläche folgender Dialog aufgeschaltet:
![image](https://user-images.githubusercontent.com/102996011/189480182-02d50b01-53ba-4c83-baa6-9bd5f10bc671.png)
Jetzt gibst vergibst du einen "sprechenden Namen" für den Alias in der Zeile "Gerätename" und wählst einen der nachfolgenden "Alias-Typen" unter Gerätetyp aus (Auswahlliste wird aufgeschaltet und beinhaltet auch noch weitere Typen als im Bild gezeigt (Momentaufnahme)):
![image](https://user-images.githubusercontent.com/102996011/189480322-0441c5b7-fc7e-4fd4-9920-72915753a802.png)
> Achtung:
> Nicht jeder Gerätetyp (Alias-Typ) funktioniert mit dem NSPanel, sondern nur die, die entweder im weiteren Verlauf benannt sin, oder die im Header des TypeScript definiert sind.
Die Zeilen Funktion und Raum können ebenfalls ausgewählt werden, haben jedoch keinen Einfluss auf die Funktionalität des NSPAnel's
## Alias erzeugen - Schritt 2 - Tab "Zustände"
**Index**
[Dimmer (channel-dimmer)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#dimmer-channel-dimmer)
[Farbtemperatur (channel ct)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#farbtemperatur-channel-ct)
[Fenster (channel window)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#fenster-channel-window)
[Feuchtigkeit (channel humidity)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#feuchtigkeit-channel-humidity)
[HUE Licht (channel hue)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#hue-licht-channel-hue)
[Info (channel info)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#info-channel-info)
[Jalousien / Rollo / Markisen (channel blind)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#jalousien-channel-blind)
[Lautstärke (channel volume)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#lautstärke-channel-volume)
[Lautstärke Gruppe (channel volumegrouup)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#lautstärke-gruppe-channel-volumegroup)
[Licht (channel light)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#licht-channel-light)
[Licht RGB (channel rgb)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#rgb-licht-channel-rgb)
[Licht RGB seperat (channel rgbsingle) ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#rgb-licht-einzeln-channel-rgbsingle)
[Schieberegler (channel slider)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#schieberegler-channel-slider)
[Steckdose (channel socket)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#steckdose-channel-socket)
[Taster (channel buttonsensor)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#tastensensor----popupinsel-channel-buttonsensor)
[Temperatur (channel temperature)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#temperatur-channel-temperature)
[Timer (channel timer.level)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#timer---popuptimer---leveltimer)
[Tür (channel door)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#tür-channel-door)
[Ventilator (channel level.mode.fan)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#ventilator---fan---channel-levelmodefan)
[Schloss / Verschluss (channel lock)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#verschluss-channel-lock)
[Warnungen (channel warning)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#warnung-channel-warning)
[Wettervorhersage](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#wettervorhersage)
### Alarm - cardAlarm
siehe auch das Beispiel zur vollständigen Integration der cardAlarm in den ioBroker:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#2-alarm-page
![image](https://user-images.githubusercontent.com/102996011/189404542-81735372-7bbd-4c1a-8cad-73d1a62bd735.png)
***
### Dimmer (channel dimmer)
Der Alias "Dimmer" hat 2 relevante Eigenschaften.
* Schalter (an/aus) über Adapter-Datenpunkte on, switch, power, etc.
* Helligkeit (dunkel/hell) über Adapter-Datenpunkte level, brightness, bri, etc.
**Im Beispiel ist eine dimmbare Deckenbeleuchtung über den DeConz-Adapter (Zigbee)**
Der Schalter im DeConz wird über den Datenpunkt "on" (true/false), d.h Datentyp "boolean" gesteuert.
Die Helligkeit wird im Deconz-Adapter über "level" 0-100 oder "bri" 0-255 gesteuert. Für uns bietet sich also der Datenpunkt **level** an, da dieser bereits die Helligkeit in % von 0% bis 100% beinhaltet. Jedoch könnten wir auch mit dem Datentyp **bri** arbeiten und im TypeScript die Umrechnung von 255 (absolut) auf 100 (%) parametrieren.
Der Dimmer kann in einer cardEntities oder in einer cardGrid platziert werden. (Nachfolgende Abb. cardEntities):
![image](https://user-images.githubusercontent.com/102996011/189492309-e678414a-21b9-417f-b6a5-bdd769db7fc4.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ Dimmer an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des DeConz-Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/189492261-48519b87-3210-4bb9-a039-489e57bc21de.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung.
![image](https://user-images.githubusercontent.com/102996011/189492446-1c530407-cac3-4f3e-ab06-258dcd88629c.png)
Der Schaltzustand (Lampe an/aus) kann direkt aus der cardEntities oder carGrid erfolgen. Für die Regelung der Helligkeit hat der Alias-Gerätetyp "Dimmer" bereits eine Unterseite (siehe nachfolgende Abb.). Diese kann über einen Klick auf den Dimmer-Bezeichner (in diesem Fall "Deckenbeleuchtung") aufgeschaltet werden:
![image](https://user-images.githubusercontent.com/102996011/189493396-b94fdccb-61ee-4c1d-97d2-8732e7c1d9ae.png)
Das zugehörige PageItem im TypeScript:
```typescript
{id: 'alias.0.NSPanel.Licht.WZ', interpolateColor: true}
```
Mit dem Parameter "name" legen wir den Anzeigenamen fest.
Mit dem Parameter "interpolateColor" (optional), soll die abgebildete Lampe (Icon) den An/Aus und die Helligkeit emulieren.
Es können noch weitere Parameter übergeben werden:
* icon
* onColor
* offColor
* minValueBrightness (Default = 0)
* maxValueBrightness (Default = 100; im Beispiel mit dem Datenpunkt "bri" also 255)
***
### Farbtemperatur (channel ct)
Der Alias "Farbtemperatur" hat 3 relevante Eigenschaften.
* Schalter (an/aus) über Adapter-Datenpunkte on, switch, power, etc.
* Helligkeit (dunkel/hell) über Adapter-Datenpunkte level, brightness, bri, etc.
* Farbtemperatur (K = Kelvin) über Adapter-Datenpunkte ct, colortemp, etc.
Der Alias "Farbtemperatur" kann in einer cardEntities oder in einer cardGrid platziert werden. (Nachfolgende Abb. cardEntities):
![image](https://user-images.githubusercontent.com/102996011/189497667-0362a360-ef6b-4d7a-98ea-de55e6b42535.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Farbtemperatur** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/189498366-2d0d8e4c-e161-4f57-a084-c2377da001c3.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung.
![image](https://user-images.githubusercontent.com/102996011/189498497-989cc054-812a-4c58-8995-5c4ccf39f4b9.png)
Der Schaltzustand (Lampe an/aus) kann direkt aus der cardEntities oder carGrid erfolgen. Für die Regelung der Helligkeit und CT hat der Alias-Gerätetyp "Farbtemperatur" bereits eine Unterseite (siehe nachfolgende Abb.). Diese kann über einen Klick auf den Bezeichner (in diesem Fall "Farbtemperatur") aufgeschaltet werden:
![image](https://user-images.githubusercontent.com/102996011/189497755-b3bbc89a-8b36-451e-add2-ba6c12e94330.png)
Das zugehörige PageItem im TypeScript:
```typescipt
{id: 'alias.0.NSPanel.testFarbtemperatur', name: 'lampe', interpolateColor: true}
```
Mit dem Parameter "name" legen wir den Anzeigenamen fest.
Mit dem Parameter "interpolateColor" (optional), soll die abgebildete Lampe (Icon) den An/Aus und die Helligkeit emulieren.
Es können noch weitere Parameter übergeben werden:
* icon
* onColor
* offColor
* minValueBrightness (Default = 0)
* maxValueBrightness (Default = 100; im Beispiel mit dem Datenpunkt "bri" also 255)
* minValueColorTemp (z.B. 500 - in Abhängigkeit des jeweiligen Adapters)
* maxValueColorTemp: (z.B. 6500 - in Abhängigkeit des jeweiligen Adapters)
> Hinweis: Es kann auch der HUE-CT verwendet werden
***
### Fenster (channel window)
Der Alias "Fenster" hat 1 relevante Eigenschaft.
* Zustand (offen/geschlossen) über Adapter-Datenpunkte open, etc.
Darstellung in einer "cardGrid"
![image](https://user-images.githubusercontent.com/102996011/189404690-69e61c60-88f3-4ea7-b5ad-0c423094eb11.png)
Darstellung in einer "cardEntities"
![image](https://user-images.githubusercontent.com/102996011/189403796-ab118db1-fb38-49ae-bbdf-199717e77bbe.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Fenster** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt den Datenpunkt des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/189498976-965bae49-3643-4c23-820f-e1540b3b28a2.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/189499063-f0fa5d5a-4302-46ec-802c-0c99626f908a.png)
Das zugehörige PageItem im TypeScript:
```typesript
{id: 'alias.0.NSPanel.Fenster', onColor: MSGreen, offColor: MSRed, name: 'Fenster Büro'}
```
***
### Feuchtigkeit (channel humidity)
Der Alias "Feuchtigkeit" hat 1 relevante Eigenschaft.
* Zustand (Sensorwert)
![image](https://user-images.githubusercontent.com/102996011/189403392-4ba6c9b6-5d33-4bdb-abfb-36c85e99eebf.png)
**Im Beispiel ist ein Homatic IP Sensor über den hmip-Adapter (Funk).** Es kann aber auch jeder andere Sensor (z.B. Zigbee oder WLAN) oder ein Datenpunkt aus einem Wetter-Adapter verwendet werden.
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Feuchtigkeit** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/189499807-aba39d1c-5a83-4e50-ba04-8cc972f76208.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/189499784-2b3dc3c5-3196-4b8e-93d0-cf1c57452f8a.png)
Das zugehörige PageItem im TypeScript:
```typescript
{ id: "alias.0.NSPanel_1.TestFeuchtigkeit", name: "Luftfeuchte außen", icon: "water-percent", unit: "%H", onColor: White},
```
Folgende Parameter können verwendet werden:
* name: legt den Anzeigenamen fest
* icon: Symbol
* unit: Einheit der Luftfeuchte
* onColor: Farbe des Icons
> **Hinweis**
> **Alternativ kann auch der Alias-Typ "Info" verwendet werden.**
***
### HUE-Licht (channel hue)
> Der Alias Geräte-Typ **HUE-Licht** funktioniert **mit und ohne** dem Wert **"HUE"**. Wenn der Datenpunkt **.HUE** nicht vorhanden ist, wird durch das TypeScript automatisch eine CT (ColorTemperature-Steuerung emuliert)
![image](https://user-images.githubusercontent.com/102996011/189403062-a5fed1f9-8c6b-49b5-ad94-82c344603d5a.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **HUE-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/189500932-7d2f043a-f279-4525-ba98-3fe11cece1d5.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/189500907-e527fc9b-b8d2-49d0-bc89-ba729cfe65b4.png)
Der Schaltzustand (Lampe an/aus) kann direkt aus der cardEntities oder carGrid erfolgen. Für die Regelung der Helligkeit, Farbtemperatur und (wenn vorhanden) Farbe hat der Alias-Gerätetyp "HUE-Licht" bereits eine Unterseite (siehe nachfolgende Abb.). Diese kann über einen Klick auf den Bezeichner aufgeschaltet werden:
![image](https://user-images.githubusercontent.com/102996011/189402777-0937bfbf-6695-4768-9123-d61546175726.png)
![image](https://user-images.githubusercontent.com/102996011/189402911-7a9edf50-bb22-4211-9117-5b55e4ecba56.png)
Es können noch weitere Parameter übergeben werden:
* icon
* onColor
* offColor
* minValueBrightness (Default = 0)
* maxValueBrightness (Default = 100; im Beispiel mit dem Datenpunkt "bri" also 255)
* minValueColorTemp (z.B. 500 - in Abhängigkeit des jeweiligen Adapters)
* maxValueColorTemp: (z.B. 6500 - in Abhängigkeit des jeweiligen Adapters)
***
### Info (channel info)
![image](https://user-images.githubusercontent.com/102996011/189403645-a9511303-c873-469c-9e92-136809162728.png)
![image](https://user-images.githubusercontent.com/102996011/189404981-bbd544b0-1019-48d7-a5eb-8f38616bb8b4.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Info** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191102534-cd77c638-a947-46b7-a2c4-dafd4ba1380a.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191102721-3a6a5ab6-792c-4274-8ff3-227c61d4a949.png)
Beispiel für das PageItem
```
{ id: "alias.0.NSPanel_1.TestInfo", name: "Windstärke", icon: "wind-power-outline", offColor: MSRed, onColor: MSGreen, unit: "bft", minValue: 0, maxValue: 12, interpolateColor: true, useColor: true }
```
**Parameter**
* name:
* icon:
* offcolor:
* oncolor:
* unit:
* minValue:
* maxValue:
* interpolateColor:
* colorScale:
* useValue:
* useColor:
***
### Jalousien (channel blind)
![image](https://user-images.githubusercontent.com/102996011/189403904-914ff6ad-a7df-4859-a523-ff5ec02f2381.png)
Und die zugehörige Detailseite
![image](https://user-images.githubusercontent.com/102996011/194716743-81b81575-b7b6-475a-9cbf-5332561bec46.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Jalousie** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/194716982-6470580e-b8eb-4be0-8c45-c60dd9220a9c.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/194716899-3064db6c-8516-46c0-857a-1126cae78783.png)
Die Konfiguration für Rollo / Jalousie / Markise wurde um die Parameter minValueLevel, maxValueLevel, minValueTilt und maxValueTilt erweitert. Damit können jetzt die Standardwerte überschrieben werden.
Es muss immer min und max angegeben werden.
**Parameter**
* name:
* icon:
* minValueLevel: -> Postion unten -> Standard 0%
* maxValueLevel: -> Position oben -> Standard 100%
* minValueTilt: -> verdrehen der Lamellen linksrum -> Standard 0%
* maxValueTilt: ->verdrehen der Lamellen rechtsrum -> Standard 100%
* secondRow: im Detailbild die Zeile unter dem Namen
Beispiel für das PageItem:
```
{ id: 'alias.0.NSPanel.allgemein.Rollo', name: "Test Rollo", secondRow: "Hier Text für 2. Zeile", minValueLevel: 100, maxValueLevel: 0, minValueTilt: 100, maxValueTilt: 0},
```
> Wenn die Steuererung nur über die Position möglich ist, gibt es hier eine Beschreibung: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#8-rolladen--jalousie--shutter
***
### Klimaanlage - cardThermo - (channel airCondition)
![image](https://user-images.githubusercontent.com/102996011/216003949-fe66b68d-5ede-4a1a-b0d9-440cd13c45e4.png)
***
### Lautstärke (channel volume)
![image](https://user-images.githubusercontent.com/102996011/189403220-a2540eb2-4b47-4947-9258-a7687403710c.png)
> **Analog zum Alias "Lautstärkegruppe", jedoch mit dem Alias-Gerätetypen "Lautstärke**"
***
### Lautstärke-Gruppe (channel volumeGroup)
![image](https://user-images.githubusercontent.com/102996011/189403220-a2540eb2-4b47-4947-9258-a7687403710c.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **HUE-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/190144094-a13df619-fe45-4c92-a43a-e6a4e653083e.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/190144755-8b2c2ae6-c9d4-4fa2-9139-c430b8385114.png)
Das zugehörige PageItem im TypeScript:
```typescript
{id: 'alias.0.NSPanel_1.Testlautstärke', onColor: MSGreen, offColor:MSRed, minValue: 0, maxValue: 100, name: 'Echo Spot Küche'}
```
**Parameter:**
name: Vom Alias abweichender Name
offColor: wenn Muted
onColor: wenn nicht Muted
minValue: Minimale Lautstärkewert (Default 0)
maxValue: Minimale Lautstärkewert (Default 100)
***
### Licht (channel light)
![image](https://user-images.githubusercontent.com/102996011/191106464-5ce4597e-fa4b-4e48-89e0-40d1cd9653d2.png)
![image](https://user-images.githubusercontent.com/102996011/191106556-aa7dc0e8-00a5-4b09-90c5-9266e524567f.png)
**Zur Steuerung von Leuchtmitteln ohne Farbtemperatur oder Farbeffekten (Alternativ kann auch Socket verwendet werden)**.
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191105077-428ba7d0-f62f-43e4-a829-ba42f260d727.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191105279-aae89e95-cb4f-46d1-91b9-0fcd7e1385c2.png)
***
### Medien - cardMedia
Der Alias-Medien für die cardMedia lässt sich mit dem Geräte-Manager nicht erstellen. Auch mit dem Alias-Manager unter "Automatisch erstellen" aus einem Player-Pfad ist das je nach Adapter eher eine Zufallsproduktion.
> Es gibt von britzelpuf bereits einen noch offenen github-Issue: https://github.com/ioBroker/ioBroker.devices/issues/152 seit dem 17.03.2022
Der Alias gibt aktuell nur einen .ACTUAL her. Das ist jedoch für einen Media-Player definitiv zu wenig.
> **Es wird bis auf die Aliase für die Squeezebox kein manuell erstellter Alias mehr benötigt. In der Javascript Instanz muss "Kommando SetObject erlauben" aktiviert werden!**
![image](https://user-images.githubusercontent.com/102996011/189842715-75f9d554-3395-42f6-903b-b92b0828143c.png)
Obwohl das alles Aliase vom Typ Medien sind, sehen bis auf zwei alle anderen nicht korrekt aus, sind aber in der Objektstruktur korrekt und funktionieren auch mit dem NSPanel
#### Spotify-Premium-Adapter
![image](https://user-images.githubusercontent.com/102996011/215999625-4a47c059-9752-46ee-a4c5-2f4b8f94cb59.png)
> Anleitung:
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png)
#### Alexa2-Adapter
![image](https://user-images.githubusercontent.com/102996011/215999962-3f225ef8-be5a-4a83-9ac7-5d71612c7d1e.png)
> Anleitung:
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png)
#### Sonos-Adapter
> Anleitung:
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
[weitere Beschreibung hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel--cardMedia--Der-SONOS-Player)
![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png)
#### Volumio-Player
> Anleitung:
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png)
#### Chromecast-Adpter (Google home)
> Anleitung:
> * Wenn das erste mal die Seite aufgerufen wird, wird der Alias automatisch erzeugt. Die Seite ist zu diesem Zeitpunkt schwarz.
> * Sobald der Screensaver aufgeschaltet und wieder entfernt wird, ist der Player einsatzbereit.
![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png)
#### Logitech SqueezeBoxRPC-Adapter
**Skript zum Anlegen eines SqueezeBoxRPC - media-Alias (ab Version 3.4.0.6)**
![image](https://user-images.githubusercontent.com/102996011/194286414-a1635626-d33b-4cc6-b8e6-1c1749636900.png)
<details>
<summary><b>Spoiler:</b> JavaScript Code für Erstellung eines SqueezeBoxRPC -Alias</summary>
```
const aliasPath = 'alias.0.Media.LMS'; // ggfs. Anpassen
const aliasDevice = 'SqueezePlay'; // ggfs. Anpassen
//Ergibt alias.0.NSPanel_1.Media.SqueezeBoxRPC
const squeezeBoxInstanz = 'squeezeboxrpc.0.Players.'; // Anpasssen, wenn nicht Instanz 0
const squeezeBoxDevice = 'SqueezePlay'; // Anpassen an dein eigenes Device
var typeAlias, read, write, nameAlias, role, desc, min, max, unit, states, custom;
function createAlias(idDst, idName,idSrc, idRd, idType, idRole, idAliasType) {
if(existsState(idDst)) log(idDst + ' schon vorhanden !', 'warn');
else {
var obj = {};
obj.type = idType;
obj.common = getObject(idSrc).common
obj.common.alias = {};
if(idRd) {
obj.common.alias.id = {};
obj.common.alias.id.read = idRd;
obj.common.alias.id.write = idSrc;
obj.common.read = true;
} else {
obj.common.alias.id = idSrc;
}
obj.common.type = idAliasType;
if(obj.common.read !== false && read) obj.common.alias.read = read;
if(obj.common.write !== false && write) obj.common.alias.write = write;
obj.common.name = idName;
obj.common.role = idRole;
obj.common.desc = idDst;
if(min !== undefined) obj.common.min = min;
if(max !== undefined) obj.common.max = max;
if(unit) obj.common.unit = unit;
obj.common.states = states;
if(custom && obj.common.custom) obj.common.custom = custom;
obj.native = {};
setObject(idDst, obj);
}
}
createAlias(aliasPath + '.' + aliasDevice + '.ALBUM', 'ALBUM', squeezeBoxInstanz + squeezeBoxDevice + '.Album', '', 'state', 'media.album', 'string');
createAlias(aliasPath + '.' + aliasDevice + '.ARTIST', 'ARTIST', squeezeBoxInstanz + squeezeBoxDevice + '.Artist', '', 'state', 'media.artist', 'string');
createAlias(aliasPath + '.' + aliasDevice + '.TITLE', 'TITLE', squeezeBoxInstanz + squeezeBoxDevice + '.Title', '', 'state', 'media.title', 'string');
createAlias(aliasPath + '.' + aliasDevice + '.NEXT', 'NEXT', squeezeBoxInstanz + squeezeBoxDevice + '.btnForward', '', 'state', 'button.forward', 'boolean');
createAlias(aliasPath + '.' + aliasDevice + '.PREV', 'PREV', squeezeBoxInstanz + squeezeBoxDevice + '.btnRewind', '', 'state', 'button.reverse', 'boolean');
createAlias(aliasPath + '.' + aliasDevice + '.PLAY', 'PLAY', squeezeBoxInstanz + squeezeBoxDevice + '.state', '', 'state', 'media.state', 'boolean');
createAlias(aliasPath + '.' + aliasDevice + '.PAUSE', 'PAUSE', squeezeBoxInstanz + squeezeBoxDevice + '.state', '', 'state', 'media.state', 'boolean');
createAlias(aliasPath + '.' + aliasDevice + '.STOP', 'STOP', squeezeBoxInstanz + squeezeBoxDevice + '.state', '', 'state', 'media.state', 'boolean');
createAlias(aliasPath + '.' + aliasDevice + '.STATE', 'STATE', squeezeBoxInstanz + squeezeBoxDevice + '.Power', '', 'state', 'switch', 'number');
createAlias(aliasPath + '.' + aliasDevice + '.VOLUME', 'VOLUME', squeezeBoxInstanz + squeezeBoxDevice + '.Volume', '', 'state', 'level.volume', 'number');
createAlias(aliasPath + '.' + aliasDevice + '.VOLUME_ACTUAL', 'VOLUME_ACTUAL', squeezeBoxInstanz + squeezeBoxDevice + '.Volume', '', 'state', 'value.volume', 'number');
```
</details>
> Anleitung:
> * Neues Skript (JavaScript JS) anlegen
> * Code kopieren und einfügen
> * Skript aktivieren und ausführen
> * Danach wieder Deaktivieren
Jetzt kommt der spezielle Teil für diesen Adapter. Hierfür sind noch weitere Einstellungen erforderlich:
* Alias Manager öffnen, den neu erstellten Alias auswählen und unter "common.role" **media** eingeben
![image](https://user-images.githubusercontent.com/102996011/194288676-c329fa66-8a87-4d07-bc44-91367a334b5f.png)
![image](https://user-images.githubusercontent.com/102996011/194288476-38251d04-3656-44bc-b4d3-bb43f42f4ae2.png)
* unter Objekte zu den Aliasen (alias.0.) gehen:
![image](https://user-images.githubusercontent.com/102996011/194288944-f30822c7-c911-480d-a93a-8b9e8e71dbe0.png)
![image](https://user-images.githubusercontent.com/102996011/194289119-175acf67-4136-48ac-935c-984ce72e740b.png)
Bei **PAUSE **und **PLAY **mit dem Stiftsymbol am Ende der Zeile den Dialog aufschalten und 3. Tab Alias die Konvertierungsfunktionen einschalten und analog der nachfolgenden Bilder anpassen (Konverter beim Lesen):
![image](https://user-images.githubusercontent.com/102996011/194289939-8ae781cb-deb0-4205-9f7a-30f282ee1510.png)
![image](https://user-images.githubusercontent.com/102996011/194290059-fc28e452-fa49-47d3-9b4d-729ee48a66e7.png)
Jetzt sollte der spueezeboxrpc korrekt arbeiten
![image](https://user-images.githubusercontent.com/102996011/189696453-9b04a453-24c1-4ad1-9224-3dc1f214b0a5.png)
### RGB-Licht (channel rgb)
![image](https://user-images.githubusercontent.com/102996011/191094426-3c86ce5a-3d95-4e95-ba68-aefb09a6e9c3.png)
> Der Alias RGB-Licht wird verwendet, wenn als Color Datenpunkte **RED, GREEN, BLUE und WHITE** vorliegen
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **RGB-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191094851-cbd29a38-1cb7-400f-89b4-c647ca1f03eb.png)
![image](https://user-images.githubusercontent.com/102996011/191094933-317204e0-01ab-43eb-83ab-c2efce8bbb91.png)
> Für das Beispiel standen leider keine echten Adapter-Datenpunkte zur Verfügung, daher die Darstellung in 0_userdata.0...
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191095305-86bbdbdd-220d-4f9a-a85f-b74cf934f422.png)
Das zugehörige PageItem im TypeScript:
```typescript
{id:'alias.0.NSPAnel_1.TestRGBLicht', name:'RGB Licht', minValueBrightness: 0, maxValueBrightness: 100, interpolateColor: true}
```
**Parameter:**
* name: Vom Alias abweichender Name
* offColor: abweichende Farbe für aus
* onColor: abweichende Farbe für an
* minValueBrightness: Minimale Helligkeit (Default 0)
* maxValueBrightness: Minimale Maxiamale Helligkeit (Default 100)
* minValueColorTemp: Minimale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 500K)
* maxValueColorTemp: Maximale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 6500K)
* interpolateColor: Errechnet den Farbton und weist diesen dem Icon zu (Beispiel Pink)
Mit klick auf den Bezeichner wird das popUpLight aufgeschaltet:
![image](https://user-images.githubusercontent.com/102996011/191096635-91bdab6c-e88f-459a-9699-9d2e6804c86a.png)
![image](https://user-images.githubusercontent.com/102996011/191096702-a0b2c5a2-f19e-4e61-9831-09b88b589332.png)
***
### RGB-Licht-einzeln (channel rgbSingle)
![image](https://user-images.githubusercontent.com/102996011/191097789-1ffe592e-6316-4311-87cc-e0f0ed41a8ef.png)
> Der Alias RGB-Licht wird verwendet, wenn als **Color Datenpunkt (RGB) im Hexadezimal-Format (z.B. #7dff7e)** vorliegt.
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **RGB-Licht** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
Der Datenpunkt **TEMPERATURE** ist nicht mehr zwingen erforderlich ab Version 4.0.4.5
![image](https://user-images.githubusercontent.com/102996011/191098059-280232ca-5d69-432e-a32d-f85984ce68f7.png)
> Für das Beispiel standen leider keine echten Adapter-Datenpunkte zur Verfügung, daher die Darstellung in 0_userdata.0...
Alternativ kann dieser Alias auch via CIE, d.h über den XY Parameter (z.B. beim deConz-Adapter) gesteuert werden:
![image](https://user-images.githubusercontent.com/102996011/191099845-2d9364a1-52db-40c1-9e83-876a1a251e41.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191097931-113a507e-e52a-4a6f-a695-6e5eedb2d383.png)
Das zugehörige PageItem im TypeScript:
```typescript
{id. 'alias.0.NSPanel_1.TestRGBEinzeln', name:'RGB-Licht HEX-Color', interpolatecolor: true}
```
**Parameter:**
name: Vom Alias abweichender Name
offColor: abweichende Farbe für aus
onColor: abweichende Farbe für an
minValueBrightness: Minimale Helligkeit (Default 0)
maxValueBrightness: Minimale Maxiamale Helligkeit (Default 100)
minValueColorTemp: Minimale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 500K)
maxValueColorTemp: Maximale Farbtemperatur je nach Leuchtmittel/Adapter (z.B. 6500K)
interpolateColor: Errechnet den Farbton und weist diesen dem Icon zu (Beispiel Grün)
colormode: "xy" oder "rgb" (default) zur Steuerung der CIE XY Color-Datenpunkte
Mit klick auf den Bezeichner wird das popUpLight aufgeschaltet:
![image](https://user-images.githubusercontent.com/102996011/191096635-91bdab6c-e88f-459a-9699-9d2e6804c86a.png)
![image](https://user-images.githubusercontent.com/102996011/191096702-a0b2c5a2-f19e-4e61-9831-09b88b589332.png)
***
### Schieberegler (channel slider)
![image](https://user-images.githubusercontent.com/102996011/191107077-4ad6e4e8-7b59-4427-9a69-25a4ef3c755d.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Schieberegler** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191345106-68981bc1-f083-4a35-b0b9-3fc46fe459b5.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191345261-2f138190-2de3-4bef-80ba-d1c24833619b.png)
Das zugehörige PageItem im TypeScript:
```
{ id: "alias.0.NSPanel_1.Dimmode_BrightnessDay", name: "Brightness Tag", icon: "brightness-5", offColor: MSYellow, onColor: MSYellow, useColor: true, minValue: 5, maxValue: 10},
```
**Parameter:**
name: Vom Alias abweichender Name
offColor: abweichende Farbe für aus
onColor: abweichende Farbe für an
icon: zu visualisierendes Icon
minValue: Minimaler Sliderwert
maxValue: Maximaler Sliderwert
usecolor:
***
### Steckdose (channel socket)
![image](https://user-images.githubusercontent.com/102996011/191107198-298d0b94-dcc2-49f9-bcbb-92b926c7ae3a.png)
> Alternativ kann der Alias Licht verwendet werden!
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Steckdose** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191347586-e04414dd-7a87-4821-9c31-913874f9a5c3.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191347855-92667d50-93ce-46fe-9d4a-3fb26bc99db2.png)
Das zugehörige PageItem im TypeScript:
```
{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power", icon2: "power",offColor: MSRed, onColor: MSGreen},
```
**Parameter:**
name: Vom Alias abweichender Name
offColor: abweichende Farbe für aus
onColor: abweichende Farbe für an
icon: zu visualisierendes Icon für On
icon2: zu visualisierendes Icon für Off
***
### Taste (channel button)
![image](https://user-images.githubusercontent.com/102996011/189404781-7fe9c2b0-e81d-446f-9aab-50865cc39a40.png)
> Beschreibung für den Alias Taste folgt...
***
### Tastensensor --> popupInSel (channel buttonSensor)
> ab Release 3.7.0
Das **popupInSel** dient der Auswahl von Werten in einer Aufzählung (Liste/Array) und wird in einer **cardGrid** platziert
![image](https://user-images.githubusercontent.com/102996011/209156239-7978d5d4-e0c4-4507-a249-1879f9fe674b.png)
**ALIAS:**
über das '+' Icon im Gerätemanager wird ein DP ".VALUE" angelegt. Dieser verweist auf eine numerische-Aufzählung oder einen numerischen Datenpunkt zur Weiterverarbeitung. Zurückgegeben wird der Wert aus dem Parameter "modeList" beginnend mit 0 (analog Array).
![image](https://user-images.githubusercontent.com/102996011/209159430-864ab683-9a9d-4e6c-bbdf-b26091279afe.png)
**PageItem:**
```
{ id: 'alias.0.NSPanel_EMU.TestButtonSensor',
icon: 'select-color',
name: 'WLED Effekte',
onColor: White,
modeList: [ 'Solid', 'Android', 'Aurora', 'Blends', 'Blink', 'Bpm', 'Breathe',
'Candle', 'Candle Multi', 'Candy Cane', 'Chase', 'Chase 1', 'Chase 2', 'usw.']},
```
***
### Temperatur (channel temperature)
![image](https://user-images.githubusercontent.com/102996011/189403527-4a94e690-9a5d-4121-8dcb-5636951a7df6.png)
> Beschreibung für den Alias Temperatur folgt...
***
### Thermostat cardThermo (channel thermostat)
![image](https://user-images.githubusercontent.com/102996011/191052850-06276337-1000-4eb6-b010-5f6d49fd0e24.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ **Thermostat** an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![image](https://user-images.githubusercontent.com/102996011/191053643-75545e7e-995e-4a28-88c3-87268dcbb44d.png)
Im unteren Teil können ebenfalls Indikatoren eingeblendet werden:
![image](https://user-images.githubusercontent.com/102996011/191338688-e5cf4b91-2385-4f09-8523-e52ed797b9be.png)
z.B.
![image](https://user-images.githubusercontent.com/102996011/191054046-4d3279f1-6dc8-484d-b70f-9dd65ae9929b.png)
oder
![image](https://user-images.githubusercontent.com/102996011/191054242-dc679425-592e-490a-9383-73030a9e20e5.png)
etc.
Wenn der Thermostat über Mode verfügt und dieser auch genutzt werden soll:
![image](https://user-images.githubusercontent.com/102996011/191054557-89060dca-825a-4d38-b756-c67eb2fbe7ea.png)
Mode wird über externe Datenpunkte gesteuert. Hierzu legst du dir unter 0_userdate.0. einen Ordner deiner Wahl an. In diesem Ordner können jetzt bis zu 5 Datenpunkte (Alle vom Typ boolean (true/false)) angelegt werden:
* AUTOMATIC
* MANUAL
* PARTY
* VACATION
* BOOST
Im Alias können "BOOST" und "PARTY" (sofern gewünscht) bereits den neu erstellten Datenpunkten zugewiesen werden:
![image](https://user-images.githubusercontent.com/102996011/191055917-bf05d8a1-fc3f-4c4e-a4a8-da5aafcf1317.png)
Die Datenpunkte AUTOMATIC, MANUAL und VACATION können nicht sofort zugewiesen werden, da die ALIAS-Definition diese Objekte nicht vorsieht. In diesem Fall kannst du diese selbst hinzufügen und im Anschluss deine erstellten Datenpunkten zuordnen:
![image](https://user-images.githubusercontent.com/102996011/191056534-c33656e6-178c-4f95-a47a-4c609f5236f1.png)
Jetzt speicherst du den neu erstellten Alias. Unter ioBroker Objekte (Verzeichnisbaum alias.0.NSPanel.X...) siehst du jetzt folgende Darstellung:
![image](https://user-images.githubusercontent.com/102996011/191056980-98c196cf-7991-4d33-978b-b19b31403477.png)
> Es müssen nicht alle 5 Modi vorhanden sein. Das Skript liest die vorhandenen Modi ein und verarbeitet auch nur diese
> Insgesamt stehen Icons im unteren Bereich zur Verfügung. Somit ist es nicht möglich 5 Modi-Icons und 7 Indikatoren-Icons gleichzeitig zu visualisieren. Die Modi (falls im Alias definiert) werden zuerst visualisiert (vorne) und dann, falls verfügbar mit Indikatoren (sofern im Alias definiert) auf insgesamt 8 Icons aufgefüllt.
Das zugehörige PageItem im TypeScript:
```typescript
let Bad_Thermostat: PageType =
{
'type': 'cardThermo',
'heading': 'Bad',
'subPage': true,
'parent': Startseite,
'items': [/*PageItem*/{
id: 'alias.0.NSPanel.Thermostat',
minValue: 100,
maxValue: 300,
stepValue: 5
}]
};
```
**Parameter:**
name: Vom Alias abweichender Name
minValue: Minimaltemperatur Beispiel 5°C = 50
maxValue: Minimaltemperatur Beispiel 30°C = 300
stepValue: Schrittweite Beispiel 0,5°C = 5
***
### Timer - popUpTimer - (level.timer)
> Ab Release 3.7.0
![image](https://user-images.githubusercontent.com/102996011/208918067-65174b22-a7b6-4a81-a11b-cdca44c947e2.png)
![Nextion_Editor_DyyGoz044r](https://user-images.githubusercontent.com/102996011/208929333-0be6783c-aca8-453c-92fb-5d83861da21a.gif)
Für den Timer (Stopp-Uhr) gibt es weder im Geräte-Manager, noch im Alias-Manager einen vorgefertigten ALIAS Gerätetypen. Daher muss dieser eigenhändig erstellt werden.
**Objekte**
Der Timer greift auf selbsterstellte Datenpunkte zurück, welche (analog Beispiel) wie folgt angelegt werden müssen.
* 0_userdata.0.Timer.NSPanel.1Countdown.Sekunden --> number --> Nimmt die eingestellte Zeit aus dem NSPanel in Sekunden auf und wird bei Ausführung durch das externe Script dekrementiert.
* 0_userdata.0.Timer.NSPanel.1Countdown.Zustand --> string --> Erhält den Status vom Blockly und vom NSPanel
Korrekte Erstellung des ALIAS level.timer
![image](https://user-images.githubusercontent.com/102996011/208917886-2c84cb2c-dee6-456d-8222-1a76f0cb3782.png)
Direkt unter Objekte --> alias.0. mit dem "+" die gewünschte Verzeichnisstruktur erzeugen
Dann mit dem "+" in der Menüleiste den Channel erzeugen:
![image](https://user-images.githubusercontent.com/102996011/208925037-79f14c3d-d660-4ac0-b08a-3639416484d6.png)
Dann die States für ACTUAL dazu anlegen:
![image](https://user-images.githubusercontent.com/102996011/208925276-5b7bd82a-e864-4a16-a8f7-667f02ea7018.png)
![image](https://user-images.githubusercontent.com/102996011/208925413-da9c47be-5166-42f6-9f9b-a2cdea0c2d94.png)
und die States für STATE anlegen:
![image](https://user-images.githubusercontent.com/102996011/208925774-f156de0b-82b3-4603-95f9-328fe650c02d.png)
![image](https://user-images.githubusercontent.com/102996011/208925863-93b631b9-abd6-45ee-b488-d33a2291b4a1.png)
PageItem zum Beispiel:
```
{ id: "alias.0.NSPanel_1.Countdown", icon: "timer-outline", name: "Timer", onColor: White},
```
**Blockly**
Der Timer wird über dieses Script-Beispiel (separates und Blockly) gesteuert
![image](https://user-images.githubusercontent.com/102996011/208922045-9bd46a61-4c8a-490b-b999-5e12dc911854.png)
[Zum Blockly](https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/PopupTimer.xml)
***
### Tür (channel door)
![image](https://user-images.githubusercontent.com/102996011/189403985-7eed8829-ea85-4785-88f9-610edaeb9485.png)
> Analog Alias Fenster. Im "Schritt 1" wird jedoch der Alias-Gerätetyp Tür gewählt
***
### Ventilator - Fan - (channel level.mode.fan)
> ab Release 3.7.0
![image](https://user-images.githubusercontent.com/102996011/208997021-c2d73a14-0590-4992-922d-92ff14f83b94.png)
![image](https://user-images.githubusercontent.com/102996011/208997301-6b625a45-a977-4343-8689-5daab04963c1.png)
**Alias erstellen: **
Direkt im Objektverzeichnis unter alias.0. (ggfs. noch Verzeichnisse anlegen) einen Kanal anlegen ("+" in der Menüleiste):
![image](https://user-images.githubusercontent.com/102996011/208997977-3cd0f99d-81e5-414d-b2d3-de0d17cfc737.png)
und die Rolle **level.mode.fan** zuweisen:
![image](https://user-images.githubusercontent.com/102996011/208998518-13f71962-59af-43e8-bfdf-7b60e6ffeabc.png)
Danach folgende States unter dem Kanal (channel) anlegen:
* .SET --> Verweist auf An/Aus Datenpunkt des Ventilators (true/false)
* .ACTUAL --> Verweist ebenfalls auf An/Aus Datenpunkt des Ventilators (true/false)
* .SPEED --> Verweist auf Geschwindigkeit des Vetilators (Default 100%. und kann über maxValue im pageItem begrenzt werden)
* .MODE --> Falls der Ventilator über unterschiedliche Modes zur Einstellung verfügt. Ansonsten kann der auch über einen Datenpunkt unter 0_userdata erstellt werden und mittels Blockly Modes erzeugen bzw. steuern.
![image](https://user-images.githubusercontent.com/102996011/209000232-4f326a18-3b8f-4129-a9fa-4b338b32561a.png)
**Das PageItem:**
```
{ id: "alias.0.NSPanel_1.Ventilator.Fan_1",name: "Ventilator", icon: "fan", onColor: On, offColor: HMIOff, modeList: ['Low', 'Medium', 'High', 'Move', 'Sleep', 'Auto', 'Manual']},
```
modeList enthält die Werte des Datenpunktes (im Beispiel nur exemplarisch) zum Schalten der Modes.
***
### Verschluss (channel lock)
![image](https://user-images.githubusercontent.com/102996011/189404088-9a2cd3ea-5c43-4c3f-9bd9-e58eac2e6fd6.png)
Zunächst legen wir analog "[Schritt 1](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#alias-erzeugen---schritt-1---tab-allgemein)" (Tab Allgemein) einen Alias vom Typ Steckdose an. Im "Schritt 2" (Tab Zustände) weisen wir jetzt die Datenpunkte des Adapters zu:
![Bildschirmfoto 2023-08-29 um 20 37 25](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/75928732-021e-4e61-9269-8360daa251d6)
.SET steuert das Schloss auf/zu mittels true/false ggf. muss im Alias die Schreibkonvertirung genutzt werden. val ? open : close
.ACTUAL Rückmeldung des Schlosses
***
### Warnung (channel warning)
Dieser Alias dient nur der Einbindung des dynamischen Abfallkalenders. Dieser ist hier ausführlich beschrieben:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#4-abfallkalender
![image](https://user-images.githubusercontent.com/102996011/189405183-22b51c18-3b92-44e3-bd84-c23359f2783d.png)
***
### Wettervorhersage
![image](https://user-images.githubusercontent.com/102996011/189405373-8ea44dd3-a073-40e8-8379-faab8a836d12.png)
![image](https://user-images.githubusercontent.com/102996011/189480728-116bd2fb-f23a-4158-85cc-0a9bed85024c.png)
und die Temperatur (etwas tiefer). Weitere Datenpunkte, wie z.B. Min- und Max-Temperatur können ebenfalls verknüpft werden, finden jedoch im TypeScript keine Berücksichtigung.
![image](https://user-images.githubusercontent.com/102996011/189480739-3d10df44-c7dc-43d2-af0d-58e492579d32.png)
In diesem Fall wird die Temperatur aus einem Datenpunkt einer Wetterstation visualisiert. Es kann natürlich auch ein Datenpunkt mit der aktuellen Außentemperatur aus einem anderen Adapter daswetter.0.xxxxx, accuweather.0.xxxxx, openweathermap.0.xxxxx, etc. ausgewählt werden.
> **Achtung:**
> **Dieser Alias muss erstellt werden, damit die 4 kleineren Icons (Weather-Forecast und/oder 4 Sensordatenpunkte) im unteren Screensaver visualisiert werden können.**
***

1321
old/ioBroker-ALIAS-Table.md Normal file

File diff suppressed because it is too large Load Diff

@@ -52,31 +52,224 @@ let Seitenname: PageType =
Die cardUnlock dient der Absicherung spezieller Seiten, die vor unbefugtem Zugriff (ggfs. Service Pages) geschützt werden sollen:
![image](https://user-images.githubusercontent.com/102996011/221621287-55987efd-143b-4ad0-b7bb-d35d58436b12.png)
Details zur Erstellung sind hier erklärt. [Spezailseiten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-cardtypen#cardunlock-ab-v433)
> Bei Benutzung der cardUnlock wird die Zielseite aus dem Page-Array herausgenommen. Die Target-Page sollte nicht als Top-Level-Page, sondern als Subpage definiert sein.
***
im Datenpunkt **0_userdata.0.NSPanel.Unlock.UnlockPin** kann eine PIN vergeben werden. Default wird diese PIN als **0000** definiert.
Erstellung des Alias:
Die cardUnlock wird ab Version `4.3.3.3` mit einem Alias vom Gerätetyp `Feueralarm` automatisch erstellt. Die Erstellung des Alias und der zugehörigen Datenpunkte erfolgt, `sobald die cardUnlock erstmals eingebunden und aufgerufen` wird.
Unter 0_userdata.0... werden folgende Datenpunkte automatisch angelegt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/46f63c7c-154e-4c47-8caa-41bed30bcf70)
Die angelegte PIN-Nummer lässt sich unter "Wert" von "0000" in (siehe Beispiel) z.B. "1234" ändern.
Unter alias.0... wird folgender Alias automatisch angelegt:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/39313dbb-3561-4f73-8352-63995ae7b8be)
**Beispiel der Seitenerstellung:** (im Service-Menü enthalten)
```typescript
//Level 0 (if service pages are used with cardUnlock)
let Unlock_Service: PageType =
{
'type': 'cardUnlock',
'heading': 'Service Pages',
'useColor': true,
'items': [{ id: 'alias.0.NSPanel.Unlock',
targetPage: 'NSPanel_Service_SubPage',
autoCreateALias: true }
]
};
```
siehe auch:
* https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Service-Men%C3%BC und
* https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Page-%E2%80%90-Typen_How-2_Beispiele#page-beispiele
Da die cardUnlock innerhalb eines "Smart Home" nur einmal erforderlich sein sollte, teilt sie die Datenpunkte mit allen weiteren NSPanels im Haus. Es ist darüber hinaus jedoch auch möglich, `weitere Seiten` über die `cardUnlock` nach dem gleichen Schema vor unbefugten Zugriffen mit dem vergebenen `PIN` zu schützen.
Hierzu muss lediglich eine weitere `Page` vom Typ `cardUnlock` definiert werden und das Ziel `targetPage` auf eine `vorhandene subPage` zeigen:
```
let Unlock_PageXYZ: PageType =
{
'type': 'cardUnlock',
'heading': 'Titel der Page',
'useColor': true,
'items': [{ id: 'alias.0.NSPanel.Unlock',
targetPage: 'Eine_weitere_Subpage',
autoCreateALias: true }
]
};
```
# cardAlarm
![image](https://user-images.githubusercontent.com/102996011/190120272-82c6b418-c9dc-4338-a0a3-53da8bec0bac.png)
Details zur Erstellung sind hier erklärt. [Spezailseiten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-cardtypen#alarm-page)
***
(Erstellung des cardAlarm siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#2-alarm-page))
```typescript
let Alarmseite: PageType =
{
"type": "cardAlarm",
"heading": "Alarm",
"useColor": true,
"subPage": false,
"items": [
{ id: 'alias.0.NSPanel.Alarm' }
actionStringArray: ['Vollschhutz','Zuhause','Nacht','Besuch','Ausschalten'], // Optional - ansonsten aus Sprachdatei
autoCreateALias: true }
]
};
```
# cardMedia v2.0 (ab Release v3.9.0)
![image](https://user-images.githubusercontent.com/102996011/209344233-c7d700c4-eb87-4c51-9441-b51368c88096.png)
Eine umfassnende Erläuterung gibt es hier
[CardMedia der Komplette Leitfaden](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-%E2%80%90-cardMedia-%E2%80%90-Der-komplette-Leitfaden)
**Neue Elemente**
* Shuffle (nach verfügbarkeit des Adapters)
![image](https://user-images.githubusercontent.com/102996011/209348879-59575912-b9c6-452f-885c-0cbb2791f750.png)
* Neue Auswahl für Speakerauswahl/-wechsel
![image](https://user-images.githubusercontent.com/102996011/209346590-f265353e-a35a-42d4-9d1f-48426e47eb44.png)
* Playlist
![image](https://user-images.githubusercontent.com/102996011/209347004-5d20ac06-b5c2-472e-aeb8-4e9bbb0082e9.png)
* Tracklist (Bei Playlist und falls verfügbar)
![image](https://user-images.githubusercontent.com/102996011/209347405-f33dbd6d-ce7d-4dba-9744-73835f7c1c81.png)
* Equalizer-Profile
![image](https://user-images.githubusercontent.com/102996011/209347576-809eaabe-c853-476f-82f8-6536694ba404.png)
[Link: Blockly für Klangsteuerung in der cardMedia](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#12-equalizer-f%C3%BCr-cardmedia)
* Repeat (nach Verfügbarkeit des Adapters)
![image](https://user-images.githubusercontent.com/102996011/209348242-264737e4-7b31-488e-a4db-10e0f6bd6e08.png)
(Erstellung des "PageItem" siehe [ioBroker ALIAS Definition](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen))
> **Definition ab TS-Version 3.9.0** (Breaking Changes)
**alexa2-Adapter**
```typescript
let Alexa: PageType =
{
'type': 'cardMedia',
'heading': 'Alexa',
'items': [{
id: AliasPath + 'Media.PlayerAlexa',
adapterPlayerInstance: 'alexa2.0.',
mediaDevice: 'G0XXXXXXXXXXXXXX', // Eigene Seriennummer des primären Device einstellen
speakerList: ['Überall','Gartenhaus','Esszimmer','Heimkino','Echo Dot Küche','Echo Spot Buero'],
//analog alexa2 Music-Provider
//Mögliche Playlists:
playList: ['Spotify-Playlist.Party Playlist',
'Amazon-Music-Playlist.Mein Discovery Mix',
'My-Library-Playlist.2020',
'My-Library-Playlist.2021',
'TuneIn.Radio Bob Rock',
'TuneIn.NDR2',
'Spotify-Playlist.Sabaton Radio',
'Spotify-Playlist.Rock Party',
'Spotify-Playlist.This Is Nightwish',
'Spotify-Playlist.Metal Christmas'],
equalizerList: ['Bassboost','Klassik','Dance', 'Deep', 'Electronic', 'Flat', 'Hip-Hop', 'Rock',
'Metal', 'Jazz', 'Latin', 'Tonstärke', 'Lounge', 'Piano'],
colorMediaIcon: colorAlexa,
colorMediaArtist: Yellow,
colorMediaTitle: Yellow,
alwaysOnDisplay: true,
autoCreateALias: true
}]
};
```
**spotify-premium Adapter**
```typescript
let SpotifyPremium: PageType =
{
"type": "cardMedia",
"heading": "Spotify-Premium",
"subPage": false,
"parent": undefined,
"items": [{
id: AliasPath + 'Media.PlayerSpotifyPremium',
adapterPlayerInstance: "spotify-premium.0.",
speakerList: ['LENOVO-W11-01','Terrasse','Überall','Gartenhaus','Esszimmer','Heimkino','Echo Dot Küche',
'Echo Spot Buero'],
//Favoriten Playlists aus Spotify in Liste eintragen
playList: ['Party Playlist','Sabaton Radio','Rock Party','This Is Nightwish','Metal Christmas'],
repeatList: ['off','context','track'],
equalizerList: ['Bassboost','Klassik','Dance', 'Deep', 'Electronic', 'Flat', 'Hip-Hop', 'Rock',
'Metal', 'Jazz', 'Latin', 'Tonstärke', 'Lounge', 'Piano'],
colorMediaIcon: colorSpotify,
colorMediaArtist: Yellow,
colorMediaTitle: Yellow,
alwaysOnDisplay: true,
autoCreateALias: true
}]
};
```
**Volumio-Player**
***
```typescript
let VolumioBoss: PageType =
{
'type': 'cardMedia',
'heading': 'Volumio-Büro',
'subPage': false,
'parent': undefined,
'items': [{
id: 'alias.0.NSPanel.Volumio-Boss',
adapterPlayerInstance: 'volumio.0.',
speakerList: [], /* this must, no function */
playList: [], /* empty for dynamic reading */
colorMediaIcon: colorSpotify,
colorMediaTitle: colorSpotify,
colorMediaArtist: Yellow,
alwaysOnDisplay: true,
autoCreateALias: true
}]
};
```
### Parameter
**adapterPlayerInstance:** "alexa.0." oder "spotify-premium.0." oder "sonos.0." oder "chromecast.0." oder "squeezeboxrpc.0.Players.DeinPlayer.
**mediaDevice:**
* für "alexa.0.": Seriennummer oder Gruppennummer des primären Alexa-Device
* für "sonos.0.": IP-Adresse des Sonsos primären Sonos-Device (getrennt mit "_") --> Beispiel: 192_168_1_250
* für "spotify-premium.0.": Zeile kann gelöscht werden, da Spotify immer nur einen Speaker oder Gruppe steuern kann (automatische Ermittlung)
* für "chromecast.0.": Zeile kann gelöscht werden, da GoogleHome keine Funktionalitäten zum Wechseln von Lautsprechern zur Verfügung stellt
* für "squeezeboxrpc.0.": Zeile kann gelöscht werden, da squeezeboxrpc keine Funktionalitäten zum Wechseln von Lautsprechern zur Verfügung stellt
**speakerList:** (Namen und Reihenfolge der Speaker selbst bestimmen)
* für "alexa.0.": Device-Namen aus alexa2 möglich. Wenn leer [] , dann alle Devices des alexa2-Adapter
* für "sonos.0.": Zeile kann gelöscht werden, da Funktionalität zum schieben auf andere Devices im Sonos-Adapter nicht möglich
* für "spotify-premium.0.": Alle SmartDevice-Namen aus Spotify möglich (Im Gegensatz zu Alexa auch Smartphones und Rechner)
* für "chromecast.0.": Zeile kann gelöscht werden, da GoogleHome keine Funktionalitäten zum Wechseln von Lautsprechern zur Verfügung stellt
* für "squeezeboxrpc.0.": "Bekannte Player unter Players (aktuell keine Funktion)
# cardQR
![image](https://user-images.githubusercontent.com/102996011/190121115-436dc34d-3a89-4809-a3c6-2c6132938fd1.png)
Erstellung der cardQR siehe (https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker---FAQ-&-Anleitungen#5-qr-code-page) by Kuckuckmann
```typescript
let Seitenname: PageType =
{
"type": "cardQR",
"heading": "Deine Überschrift",
"useColor": true,
"subPage": false,
"parent": undefined,
"items": [{ id: "alias.0.NSPanel.Guest_Wifi" }] // Beispiel
};
```
Details zur Erstellung sind hier erklärt. [Spezailseiten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-cardtypen#cardqr)
***
**Parameter:**
```typescript
hidePassword: true,
autoCreateALias: true
```
# cardThermo
@@ -93,10 +286,35 @@ Details zur Erstellung sind hier erklärt. [Spezailseiten](https://github.com/jo
![image](https://user-images.githubusercontent.com/102996011/204627014-03173d87-22ba-44fb-b07c-40b7be6366ac.png)
Details zur Erstellung sind hier erklärt. [Spezailseiten](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-cardtypen#cardthermo)
***
```typescript
let Seitenname: PageType =
{
"type": "cardThermo",
"heading": "Test Klimaanlage",
"useColor": true,
"subPage": false,
"parent": undefined,
"items": [{
id: "alias.0.NSPanel_1.TestKlimaanlage",
minValue: 50,
maxValue: 250,
stepValue: 5,
popupThermoMode1: ['Auto','0','1','2','3'],
popupThermoMode2: ['Auto','0','1','2','3','4','5'],
popupThermoMode3: ['Auto','Manual','Boost',],
popUpThermoName: ["Schwenk-Modus", 'Speed', 'Temperatur'],
icon: 'fan',
setThermoAlias: ['MODE1','MODE2','MODE3'],
setThermoDestTemp2: 'ACTUAL2'
}]
};
```
**Parameter:**
minValue: Minimale einzustellende Temperatur (Beispiel: 17°C entspricht 170)
maxValue: Maximale einzustellende Temperatur (Beispiel: 30,5°C entspricht 305)
stepValue: Schrittgröße der Temperaturänderungen (Beispiel: 0,5°C Schritte entspricht 5)
# cardPower (ab TS-Script v.3.4.1)
![Nextion_Editor_9AYbpowjZS](https://user-images.githubusercontent.com/102996011/194641145-660e1218-f559-4f25-83ca-984cc677e0d8.gif)

@@ -0,0 +1,833 @@
# **Index**
**1.)** [Screensaver 1 Layout (Standard)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-1-Layout-(Standard))
**2.)** [Screensaver 1 Layout (Alternativ)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-1-Layout-(Alternativ))
**3.)** [Screensaver 2 Layout (Advanced)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-2-Layout-(Alternativ))
**4.)** [Screensaver Colors](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-Colors)
**5.)** [Screensaver Icons](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-Icons)
**5.2)** [Relais Status Icons](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Relais-Status-Icons)
**5.3)** [Erweiterung der Relay/Status Icons (ab v3.9.0)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Erweiterung-der-Relay/Status-Icons-(ab-v3.9.0))
**5.4)** [Entity Status Icons (ab v4.0.0)](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Entity-Status-Icons-(ab-v4.0.0))
**6.)** [Entity Status Icons und WeatherForecast](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Entity-Status-Icons-und-WeatherForecast)
**7.)** [Screensaver Dimmode](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#Screensaver-Dimmode)
**8.)** [PopupNotify im Screensaver](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Config-Screensaver#PopupNotify-im-Screensaver)
Der überarbeitete Screensaver **ab v3.4.0**
<img src="https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/ae62f7fc-9c99-4495-a078-28557bd0935d" width="60%" height="60%">
# Screensaver 1 Layout (Standard)
Ansicht Weather-Forecast:
![image](https://user-images.githubusercontent.com/102996011/215202503-b4a407a9-c44e-4c05-8bb5-e4525db48ae3.png)
Ansicht Screensaver-Entities:
![image](https://user-images.githubusercontent.com/102996011/190849281-0ef61e4f-3d92-4959-a66b-92dd292ec407.png)
# Screensaver 1 Layout (Alternativ)
Ansicht Weather-Forecast:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/bc237d53-b6c5-47eb-a1aa-120c35200aad)
Ansicht Screensaver-Entities:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/1e343608-54b9-4d0a-b915-63191dd78bea)
# Screensaver 2 Layout (Advanced)
> ab v4.0.0
![image](https://user-images.githubusercontent.com/102996011/221548005-f95c0949-2f51-4fca-8c31-08ec9083096c.png)
![image](https://user-images.githubusercontent.com/102996011/221548499-c50d1101-a6a3-468f-82e9-ae83fb870655.png)
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/7c5d28bd-08ce-44f9-aab1-55430890099f)
Das Screensaver-Layout lässt sich im Servicemenü Einstellungen -> Screensaver -> Layout aktivieren.
Es darf nur ein Layout aktiviert sein, sonst kommt es zu unerwünschten Effekten.
Wenn kein Layout aktiv ist, wird das Layout 1 Standard genutzt.
# Screensaver Colors
```typescript
//Screensaver Default Theme Colors
const scbackground: RGB = { red: 0, green: 0, blue: 0};
const sctime: RGB = { red: 255, green: 255, blue: 255};
const sctimeAMPM: RGB = { red: 255, green: 255, blue: 255};
const scdate: RGB = { red: 255, green: 255, blue: 255};
const sctMainIcon: RGB = { red: 255, green: 255, blue: 255};
const sctMainText: RGB = { red: 255, green: 255, blue: 255};
const sctForecast1: RGB = { red: 255, green: 255, blue: 255};
const sctForecast2: RGB = { red: 255, green: 255, blue: 255};
const sctForecast3: RGB = { red: 255, green: 255, blue: 255};
const sctForecast4: RGB = { red: 255, green: 255, blue: 255};
const sctF1Icon: RGB = { red: 255, green: 235, blue: 156};
const sctF2Icon: RGB = { red: 255, green: 235, blue: 156};
const sctF3Icon: RGB = { red: 255, green: 235, blue: 156};
const sctF4Icon: RGB = { red: 255, green: 235, blue: 156};
const sctForecast1Val: RGB = { red: 255, green: 255, blue: 255};
const sctForecast2Val: RGB = { red: 255, green: 255, blue: 255};
const sctForecast3Val: RGB = { red: 255, green: 255, blue: 255};
const sctForecast4Val: RGB = { red: 255, green: 255, blue: 255};
const scbar: RGB = { red: 255, green: 255, blue: 255};
const sctMainIconAlt: RGB = { red: 255, green: 255, blue: 255};
const sctMainTextAlt: RGB = { red: 255, green: 255, blue: 255};
const sctTimeAdd: RGB = { red: 255, green: 255, blue: 255};
```
# Screensaver Icons
## Großes Wetter Icon
![image](https://user-images.githubusercontent.com/102996011/189405373-8ea44dd3-a073-40e8-8379-faab8a836d12.png)
siehe https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-ALIAS-Definitionen#wettervorhersage
> **Achtung:**
> **Dieser Alias "muss" korrekt erstellt werden, damit die 4 kleineren Entity-Status-Icons (Weather-Forecast und/oder 4 Sensordatenpunkte) im unteren Screensaver visualisiert werden können.**
> Ab TS-Script-Version 3.5.0.5 und mit installiertem JavaScript-Adapter ab Version v6.1.3 kann dieser Alias u.a. automatisch erzeugt werden, wenn die Konstante **autoCreateAlias** auf **true** steht.
Die Dargestellten Wetter-Icons (groß und klein) werden im NSPanel TS-Script ermittelt. Daher ist die Installation von Accuweather zwingend erforderlich. Weitere Hinweise zur Installation des Accuweather Adapters hier: https://github.com/iobroker-community-adapters/ioBroker.accuweather
## Relais Status Icons
![image](https://user-images.githubusercontent.com/102996011/190625454-181092a5-83ea-4ac7-bff5-10274ec98ad5.png)
**Folgende 4 Einstellungs-Varianten sind möglich:**
**1. Die Icons visualisieren den Relais-Zustand der Hardware-Buttons:**
```typescript
mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1', ScreensaverEntityIcon: 'light-switch', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
mrIcon2ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER2', ScreensaverEntityIcon: 'lightbulb', ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
```
Die mqtt.0. Datenpunkte entsprechend deiner mqtt-Komfiguration anpassen
**2. Die Icons sind nicht sichtbar:**
```typescript
mrIcon1ScreensaverEntity: { ScreensaverEntity: null, ScreensaverEntityIcon: null, ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
mrIcon2ScreensaverEntity: { ScreensaverEntity: null, ScreensaverEntityIcon: null, ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
```
**3. Die Icons werden mit anderen Datenpunkten vom Typ "boolean" (true/false) belegt:**
```typescript
mrIcon1ScreensaverEntity: { ScreensaverEntity: "0_userdata.0.NSPanel.1.Buttons.MRHWBTN1", ScreensaverEntityIcon: "light-switch", ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
mrIcon2ScreensaverEntity: { ScreensaverEntity: "0_userdata.0.NSPanel.1.Buttons.MRHWBTN2", ScreensaverEntityIcon: "lightbulb", ScreensaverEntityOnColor: On, ScreensaverEntityOffColor: Off },
```
**4. Beliebig im Mix der 3 Varianten**
> ScreensaverEntityIcon kann für alle 3 Varianten frei gewählt werden: siehe https://htmlpreview.github.io/?https://github.com/jobr99/Generate-HASP-Fonts/blob/master/cheatsheet.html
---
## Erweiterung der Relay/Status Icons (ab v3.9.0)
![image](https://user-images.githubusercontent.com/102996011/215198305-3c1d7b6d-18bc-481c-86ed-c30eabb46f23.png)
Ab v3.9.0 ist es möglich auch Werte (z.B. Temoperatur-Sensor) in den Status-Icons anzuzeigen Nachfolgende Beispiele zeigen:
1. Icon (mrIcon1ScreensaverEntity) eine Einstellung zur Nutzung der Relais
2. Icon (mrIcon2ScreensaverEntity) eine Einstellung zur Nutzung individueller Datenpunkte mit Nachkommastelle und Einheit des Wertes
```typescript
// Indikator Icons im oberen Teil des Screensavers
// Mit 3.9.0 neue Parameter - Bitte anpassen - siehe auch Wiki
mrIcon1ScreensaverEntity: { ScreensaverEntity: 'mqtt.0.SmartHome.NSPanel_1.stat.POWER1',
ScreensaverEntityIconOn: 'lightbulb', //Rename
ScreensaverEntityIconOff: null,
ScreensaverEntityValue: null, //New
ScreensaverEntityValueDecimalPlace : 0, //New
ScreensaverEntityValueUnit: null, //New
ScreensaverEntityOnColor: On,
ScreensaverEntityOffColor: HMIOff },
mrIcon2ScreensaverEntity: { ScreensaverEntity: 'deconz.0.Sensors.5.open',
ScreensaverEntityIconOn: 'heat-wave',
ScreensaverEntityIconOff: null,
ScreensaverEntityValue: 'deconz.0.Sensors.65.temperature',
ScreensaverEntityValueDecimalPlace : 1,
ScreensaverEntityValueUnit: '°',
ScreensaverEntityOnColor: MSRed,
ScreensaverEntityOffColor: Yellow },
```
In Beispiel 2 wird statt des Relais, ein Fenstersensor (open = true/false) als Indikator verwendet. Der Wert kann über `ScreensaverEntityValue` eingeblendet werden. Darüber hinaus ist es möglich, die Nachkommastelle mit `ScreensaverEntityValueDecimalPlace` anzugeben und eine Einheit des Wertes mit `ScreensaverEntityValueUnit` zu visualisieren.
**Erweiterung ab Version 4.0.5**
es besteht jetzt die Möglichkeit bis zu 10 Zeichen zu visualisieren und auch die Steuerung der Visualisierung hat sich erweitert.
Die 10 Zeichen werden über `ScreensaverEntityValue` übergeben. Wenn der Datenpunkt von `ScreensaverEntity` vom Typ _**String**_ ist, dann besteht die Möglichkeit mit einem "Leerstring" den Zustand _OFF_ und mit "Text" den Zustand _ON_ zu erzeugen. Dadurch wird das entsprechende **ICON** für ON oder OFF gesetzt, wenn sie definiert sind. Zusätzlich kann man mit dem Text "ON" die Farbe der Visualisierung von `ScreensaverEntityOffColor` auf `ScreensaverEntityOnColor` wechseln.
`ScreensaverEntityValue` und `ScreensaverEntity` müssen nicht der selbe Datenpunkt sein.
Des Weiteren gibt es noch die Variante `ScreensaverEntity` vom Typ _**boolean**_ (True/False).
Es ist auch möglich `ScreensaverEntity` auf null zu setzen, dann wird nur `ScreensaverEntityValue` ausgewertet. Wenn `ScreensaverEntityOnColor` und `ScreensaverEntityIconOn` definiert sind, werden diese mit visualisiert.
## Entity Status Icons (ab v4.0.0)
### Einfacher Screensaver:
![image](https://user-images.githubusercontent.com/102996011/221557849-6caa1fce-b4a1-432f-b4e1-d862dbccb04e.png)
### Alternativ Screensaver
![alternativ](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/75f1121f-69d8-4063-b90e-869987f9b8a1)
**Beispiel:**
```typescript
export const config: Config = {
...
leftScreensaverEntity:
[],
bottomScreensaverEntity :
[
// bottomScreensaverEntity 1
{
ScreensaverEntity: 'accuweather.0.Daily.Day1.Sunrise',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityDateFormat: { hour: '2-digit', minute: '2-digit' }, // Description at Wiki-Pages
ScreensaverEntityIconOn: 'weather-sunset-up',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Sonne',
ScreensaverEntityIconColor: MSYellow
},
// bottomScreensaverEntity 2
{
ScreensaverEntity: 'accuweather.0.Current.WindSpeed',
ScreensaverEntityFactor: (1000/3600),
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'weather-windy',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: "Wind",
ScreensaverEntityUnitText: 'm/s',
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
},
// bottomScreensaverEntity 3
{
ScreensaverEntity: 'accuweather.0.Current.WindGust',
ScreensaverEntityFactor: (1000/3600),
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'weather-tornado',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Böen',
ScreensaverEntityUnitText: 'm/s',
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
},
// bottomScreensaverEntity 4
{
ScreensaverEntity: '0_userdata.0.wetter.Windrichtung',
ScreensaverEntityFactor: 0,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'windsock',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Windr.',
ScreensaverEntityUnitText: '°',
ScreensaverEntityIconColor: White
}
// bottomScreensaverEntity 5 (only Alternative and Advanced Screensaver)
{
ScreensaverEntity: 'accuweather.0.Current.RelativeHumidity',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'water-percent',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Feuchte',
ScreensaverEntityUnitText: '%',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65}
},
],
indicatorScreensaverEntity:
[],
```
**Wie kann ich das Format eines Datums oder einer Uhrzeit ändern? (ab v4.3.2)**
Es wird **ab der v4.3.2.** jetzt die toLocalString() Methode im TS-Script verwendet. **Folgende Parameter sind möglich:**
In der nachfolgenden Tabelle exemplarisch für den 04.08.2023 05:09:02 Uhr.
<table>
<thead align="center">
<tr>
<th></th>
<th>narrow</th>
<th>numeric</th>
<th>2-digit</th>
<th>short</th>
<th>long</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td align="left"><b>weekday</b></td>
<td>M</td>
<td></td>
<td></td>
<td>Mo</td>
<td>Montag</td>
</tr>
<tr>
<td align="left"><b>era</b></td>
<td>n. Chr.</td>
<td></td>
<td></td>
<td>n. Chr.</td>
<td>n. Chr.</td>
</tr>
<tr>
<td align="left"><b>year</b></td>
<td></td>
<td>2023</td>
<td>23</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left"><b>month</b></td>
<td>A</td>
<td>8</td>
<td>08</td>
<td>Aug.</td>
<td>August</td>
</tr>
<tr>
<td align="left"><b>day</b></td>
<td></td>
<td>4</td>
<td>04</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left"><b>hour</b></td>
<td></td>
<td>5</td>
<td>05</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left"><b>minute</b></td>
<td></td>
<td>9</td>
<td>09</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left"><b>second</b></td>
<td></td>
<td>2</td>
<td>02</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="left"><b>timeZoneName</b></td>
<td></td>
<td></td>
<td></td>
<td>MESZ</td>
<td>Mitteleuropäische <br>Sommerzeit</td>
</tr>
</tbody>
</table>
Beispiel 1: Uhrzeit
```typescript
ScreensaverEntityDateFormat: { hour: '2-digit', minute: '2-digit' },
```
Beispiel 2: Datum
```typescript
ScreensaverEntityDateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },
```
Beispiel 3: Datum/Uhrzeit
```typescript
ScreensaverEntityDateFormat: { weekday: 'long', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' },
```
Beispiel 4: Alle Parameter in langer Variante
```typescript
ScreensaverEntityDateFormat: { weekday: 'long', era: 'long', year: 'numeric', month: 'long', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'long' },
```
Output: `Mittwoch, 04. August 2023 n. Chr. um 05:09:02 Mitteleuropäische Sommerzeit`
### Erweiterter Screensaver:
![image](https://user-images.githubusercontent.com/102996011/221555760-4805cc37-30ae-4485-a219-bdbe75f78c05.png)
**Beispiel:**
```typescript
export const config: Config = {
...
leftScreensaverEntity:
[
// leftScreensaverEntity 1 (only Advanced Screensaver)
{
ScreensaverEntity: NSPanel_Path + 'Sensor.ANALOG.Temperature',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'thermometer',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Temperatur',
ScreensaverEntityUnitText: '°C',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 35, 'val_best': 22}
},
// leftScreensaverEntity 2 (only Advanced Screensaver)
{
ScreensaverEntity: 'sonoff.0.DZG_DWSB20_2H.DZG_Leistung_Aktuell',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'counter',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'L1-L3',
ScreensaverEntityUnitText: ' W',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 5000}
},
// leftScreensaverEntity 3 (only Advanced Screensaver)
{
ScreensaverEntity: '0_userdata.0.Abfallkalender.1.date',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'trash-can',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Abfall',
ScreensaverEntityUnitText: '',
ScreensaverEntityIconColor: '0_userdata.0.Abfallkalender.1.color'
},
],
bottomScreensaverEntity :
[
// bottomScreensaverEntity 1
{
ScreensaverEntity: 'accuweather.0.Hourly.h0.PrecipitationProbability',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'weather-pouring',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Regen',
ScreensaverEntityUnitText: '%',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100}
},
// bottomScreensaverEntity 2
{
ScreensaverEntity: 'accuweather.0.Current.WindSpeed',
ScreensaverEntityFactor: (1000/3600),
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'weather-windy',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: "Wind",
ScreensaverEntityUnitText: 'm/s',
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
},
// bottomScreensaverEntity 3
{
ScreensaverEntity: 'accuweather.0.Current.WindGust',
ScreensaverEntityFactor: (1000/3600),
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'weather-tornado',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Böen',
ScreensaverEntityUnitText: 'm/s',
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 120 }
},
// bottomScreensaverEntity 4
{
ScreensaverEntity: '0_userdata.0.wetter.Windrichtung',
ScreensaverEntityFactor: 0,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'windsock',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Windr.',
ScreensaverEntityUnitText: '°',
ScreensaverEntityIconColor: White
},
// bottomScreensaverEntity 5 (only alternative and Advanced Screensaver)
{
ScreensaverEntity: 'accuweather.0.Current.RelativeHumidity',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'water-percent',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Feuchte',
ScreensaverEntityUnitText: '%',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65}
},
// bottomScreensaverEntity 6 (only Advanced Screensaver)
{
ScreensaverEntity: 'accuweather.0.Current.UVIndex',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'solar-power',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'UV',
ScreensaverEntityUnitText: '',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 9}
}
],
indicatorScreensaverEntity:
[
// indicatorScreensaverEntity 1 (only Advanced Screensaver)
{
ScreensaverEntity: '0_userdata.0.NSPanel.Indicators.Haus',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'window-closed-variant',
ScreensaverEntityIconOff: 'window-open-variant',
ScreensaverEntityText: 'Fenster',
ScreensaverEntityUnitText: '%',
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 1 }
},
// indicatorScreensaverEntity 2 (only Advanced Screensaver)
{
ScreensaverEntity: 'alias.0.Haus.Erdgeschoss.Buero.Sensoren.Bewegung.ACTUAL',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'motion-sensor',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Bewegung',
ScreensaverEntityUnitText: '',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 1}
},
// indicatorScreensaverEntity 3 (only Advanced Screensaver)
{
ScreensaverEntity: '0_userdata.0.NSPanel.Indicators.Garage',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'garage-variant-lock',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Garage',
ScreensaverEntityUnitText: '',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 1}
},
// indicatorScreensaverEntity 4 (only Advanced Screensaver)
{
ScreensaverEntity: 'worx.0.202130267302000866BF.mower.state',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 0,
ScreensaverEntityIconOn: 'robot-mower-outline',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Mäher',
ScreensaverEntityUnitText: '%',
ScreensaverEntityIconColor: { 'val_min': 0, 'val_max': 1 }
},
// indicatorScreensaverEntity 5 (only Advanced Screensaver)
{
ScreensaverEntity: '0_userdata.0.Wasserstand.KNOCK.Wert',
ScreensaverEntityFactor: 1,
ScreensaverEntityDecimalPlaces: 1,
ScreensaverEntityIconOn: 'waves-arrow-up',
ScreensaverEntityIconOff: null,
ScreensaverEntityText: 'Feuchte',
ScreensaverEntityUnitText: '%',
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 985, 'val_best': 500}
}
],
```
Der letzte Parameter **ScreensaverEntityIconColor** der first- fourthScreensaverEntity
**Wie kann ich die Farben definieren?**
Folgende Varianten stehen zur Verfügung:
```
ScreensaverEntityIconColor: undefined
//Die Default-Farbe wird gewählt.
```
```
ScreensaverEntityIconColor: MSGreen
//Eine definierte Farbe wird gewählt.
```
```
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100}
//Berechnung einer Farbe über über Skala z.B. Regenwahrscheinlichkeit
```
```
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 9}
//Berechnung einer Farbe über über Skala z.B. UV-Skala
```
```
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 100, 'val_best': 65}
//Berechnung einer Farbe über über Skala mit Idealwert
```
z.B. für Luftfeuchte: Der Idealwert liegt zwischen 0 und 100 hier im Beispiel bei 65% (also grün). Die Abschwächung geht zu beiden Seiten (65 zu 0) und (65 zu 100) über gelb nach rot.
```
ScreensaverEntityIconColor: {'val_min': 0, 'val_max': 1, 'val_best': 1}
// bei einem Boolean Wert kann mit val_best: 1 das Icon bei 'true' au grün gesetzt werden, Standard ist 'true' rot
```
```typescript
//Dynamische Indikatoren (Abstufung grün nach gelb nach rot)
const colorScale0: RGB = { red: 99, green: 190, blue: 123 };
const colorScale1: RGB = { red: 129, green: 199, blue: 126 };
const colorScale2: RGB = { red: 161, green: 208, blue: 127 };
const colorScale3: RGB = { red: 129, green: 217, blue: 126 };
const colorScale4: RGB = { red: 222, green: 226, blue: 131 };
const colorScale5: RGB = { red: 254, green: 235, blue: 132 };
const colorScale6: RGB = { red: 255, green: 210, blue: 129 };
const colorScale7: RGB = { red: 251, green: 185, blue: 124 };
const colorScale8: RGB = { red: 251, green: 158, blue: 117 };
const colorScale9: RGB = { red: 248, green: 131, blue: 111 };
const colorScale10: RGB = { red: 248, green: 105, blue: 107 };
```
> **Im Alternativen Layout können nur 3 Entities visualisiert werden. Für die Darstellung der Luftfeuchte wird die fourthScreensaverEntity verwendet!**
## Entity Status Icons und WeatherForecast
Es lässt sich über Datenpunkte in 0_userdata.0. steuern ob:
* nur die Entity-Status-Icons visualisiert wird
* nur die Wettervorhersage visualisiert wird
* die Entity-Status-Icons und die Wettervorhersage abwechselnd visualisiert wird und in welcher Zeit der Wechsel stattfinden soll
Wenn die **Wetter Icons** sichtbar sein sollen (Timer für Wechsel deaktiviert)
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecast** den Wert **true** haben
Wenn die **Entity Icons** sichtbar sein sollen (Timer für Wechsel deaktiviert)
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecast** den Wert **false** haben
Wenn ein Wechsel stattfinden soll, dann muss:
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecastTimer** den Wert **true** haben
Wenn kein Wechsel stattfinden soll, dann muss:
**0_userdata.0.NSPanel.X.ScreensaverInfo.weatherForecastTimer** den Wert **false** haben
In wieviel **Sekunden** soll der Wechsel stattfinden
**0_userdata.0.NSPanel.Büro.ScreensaverInfo.entityChangeTime** ein Wert zwischen **15 - 60** Sekunden
Wenn die automatischen Farben der Weather-Forcast **nicht** verwendet werden sollen:
**0_userdata.0.NSPanel.1.Config.Screensaver.autoWeatherColorScreensaverLayout** den Wert **false** haben
Die Einstellungen lassen sich auch am Panel einstellen unter "Einstellungen -> Screensaver -> Wetter"
![Wetter](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/9f9b7f69-e23d-4768-b768-4293766ad84f)
### Weather-Forcast-Farben
![image](https://user-images.githubusercontent.com/102996011/190623367-70ebe988-f467-49cf-8e81-2275a8db259b.png)
```typescript
//Auto-Weather-Colors
const swClearNight: RGB = { red: 150, green: 150, blue: 100};
const swCloudy: RGB = { red: 75, green: 75, blue: 75};
const swExceptional: RGB = { red: 255, green: 50, blue: 50};
const swFog: RGB = { red: 150, green: 150, blue: 150};
const swHail: RGB = { red: 200, green: 200, blue: 200};
const swLightning: RGB = { red: 200, green: 200, blue: 0};
const swLightningRainy: RGB = { red: 200, green: 200, blue: 150};
const swPartlycloudy: RGB = { red: 150, green: 150, blue: 150};
const swPouring: RGB = { red: 50, green: 50, blue: 255};
const swRainy: RGB = { red: 100, green: 100, blue: 255};
const swSnowy: RGB = { red: 150, green: 150, blue: 150};
const swSnowyRainy: RGB = { red: 150, green: 150, blue: 255};
const swSunny: RGB = { red: 255, green: 255, blue: 0};
const swWindy: RGB = { red: 150, green: 150, blue: 150};
```
# Screensaver Dimmode
## Automatischer Dimmode:
Über die Parameter (auch im Servicemenü verfügbar), lassen sich die Helligkeit des Screensavers zur Uhrzeit einstellen.
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_brightnessDay - Die Helligkeit (0-100) in der der Screensaver tagsüber gedimmt wird (im Menü 0-10)
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_brightnessNight - Die Helligkeit (0-100) in der der Screensaver nachts gedimmt wird (im Menü 0-10)
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_hourDay - Die Stunde in der der Tag Dimm-Modus aktiv werden soll
* 0_userdata.0.NSPanel.1.NSPanel_Dimmode_hourNight - Die Stunde in der der Nacht Dimm-Modus aktiv werden soll
![Dimmode](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/192f8d01-83b1-4457-98b4-d83620a9a934)
## Manueller Dimmode:
0_userdata.0.NSPanel.1.ScreensaverInfo.activeDimmodeBrightness
* -1 = automatischer Dimmode aktiv
* 0-100 = manuelle Dimmstufe (automatischer Dimmode inaktiv)
## bestimme Seite nach den Aufwecken
unter 0_userdata.0.NSPanel.ScreensaverInfo.bExitPage könnt ihr eine Seite festlegen die nach dem tippen auf das Panel geöffnet werden soll.
Der Wert **-1** öffnet wieder die letzte offene Seite. Wenn ihr eine Bestimmte Seite öffnen wollt, müsst ihr den Index der Seite eingeben ( Beginn bei 0). Diesen bekommt ihr aus der Pageauflistung in der Config raus.
## Individuelles Datumsformat im Screensaver:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/019ef0b0-fde9-45ff-b623-f8bbf757d0a8)
Das Script legt automatisch einen Datenpunkt unter 0_userdata.0. an:
![image](https://github.com/joBr99/nspanel-lovelace-ui/assets/102996011/38dca613-f651-48f6-b0ca-0570e423d267)
Dieser Datenpunkt ist unter: `0_userdata.0.<Dein NSPanel>.Config.Dateformat.customFormat` zu finden und ist per Default **nicht** gefüllt
Es kann ein abweichendes Format (wie im Beispiel: `dddd - MM/DD/YYYY`) für das Datum im Screensaver definiert werden.
Mögliche Formatierungsoptionen (Link: [siehe auch dayjs](https://day.js.org/docs/en/display/format)):
<table>
  <thead>
  <tr>
  <th>Format</th>
  <th>Output</th>
  <th>Description</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td><code>YY</code></td>
  <td>18</td>
  <td>Two-digit year</td>
  </tr>
  <tr>
  <td><code>YYYY</code></td>
  <td>2018</td>
  <td>Four-digit year</td>
  </tr>
  <tr>
  <td><code>M</code></td>
  <td>1-12</td>
  <td>The month, beginning at 1</td>
  </tr>
  <tr>
  <td><code>MM</code></td>
  <td>01-12</td>
  <td>The month, 2-digits</td>
  </tr>
  <tr>
  <td><code>MMM</code></td>
  <td>Jan-Dec</td>
  <td>The abbreviated month name</td>
  </tr>
  <tr>
  <td><code>MMMM</code></td>
  <td>January-December</td>
  <td>The full month name</td>
  </tr>
  <tr>
  <td><code>D</code></td>
  <td>1-31</td>
  <td>The day of the month</td>
  </tr>
  <tr>
  <td><code>DD</code></td>
  <td>01-31</td>
  <td>The day of the month, 2-digits</td>
  </tr>
  <tr>
  <td><code>d</code></td>
  <td>0-6</td>
  <td>The day of the week, with Sunday as 0</td>
  </tr>
  <tr>
  <td><code>dd</code></td>
  <td>Su-Sa</td>
  <td>The min name of the day of the week</td>
  </tr>
  <tr>
  <td><code>ddd</code></td>
  <td>Sun-Sat</td>
  <td>The short name of the day of the week</td>
  </tr>
  <tr>
  <td><code>dddd</code></td>
  <td>Sunday-Saturday</td>
  <td>The name of the day of the week</td>
  </tr>
  <tr>
  <td><code>H</code></td>
  <td>0-23</td>
  <td>The hour</td>
  </tr>
  <tr>
  <td><code>HH</code></td>
  <td>00-23</td>
  <td>The hour, 2-digits</td>
  </tr>
  <tr>
  <td><code>h</code></td>
  <td>1-12</td>
  <td>The hour, 12-hour clock</td>
  </tr>
  <tr>
  <td><code>hh</code></td>
  <td>01-12</td>
  <td>The hour, 12-hour clock, 2-digits</td>
  </tr>
  <tr>
  <td><code>m</code></td>
  <td>0-59</td>
  <td>The minute</td>
  </tr>
  <tr>
  <td><code>mm</code></td>
  <td>00-59</td>
  <td>The minute, 2-digits</td>
  </tr>
  <tr>
  <td><code>s</code></td>
  <td>0-59</td>
  <td>The second</td>
  </tr>
  <tr>
  <td><code>ss</code></td>
  <td>00-59</td>
  <td>The second, 2-digits</td>
  </tr>
  <tr>
  <td><code>SSS</code></td>
  <td>000-999</td>
  <td>The millisecond, 3-digits</td>
  </tr>
  <tr>
  <td><code>Z</code></td>
  <td>+05:00</td>
  <td>The offset from UTC, ±HH:mm</td>
  </tr>
  <tr>
  <td><code>ZZ</code></td>
  <td>+0500</td>
  <td>The offset from UTC, ±HHmm</td>
  </tr>
  <tr>
  <td><code>A</code></td>
  <td>AM PM</td>
  <td></td>
  </tr>
  <tr>
  <td><code>a</code></td>
 <td>am pm</td>
 <td></td>
  </tr>
  <tr>
  <td>...</td>
  <td>...</td>
  <td>Other formats @&gt;&gt;AdvancedFormat</td>
  </tr>
</tbody>
</table>
# PopupNotify im Screensaver
![image](https://github.com/user-attachments/assets/16af4284-a0af-4f36-a5ae-27291f3868a8)
Standard
![image](https://github.com/user-attachments/assets/73983e4a-7d09-4512-97af-8d359f298b17)
Advanced
Um eine Meldung auf dem Screensaver zu erzeugen, müssen in diesen beiden Datenpunkten ein Text geschrieben werden.
`0_userdata.0.NSPanelxxxx.ScreensaverInfo.popupNotifyHeading`
`0_userdata.0.NSPanelxxxx.ScreensaverInfo.popupNotifyText`
Die Meldung kann durch tippen auf das Display bzw. durch schreiben einer Tilde `~` in einen der Datenpunkte wieder gelöscht werden.

185
old/ioBroker-Navigation.md Normal file

@@ -0,0 +1,185 @@
by TT-Tom
# Einleitung:
> **ab TS-Script v3.8.0**
**Es gibt zwei Möglichkeiten durch die Seiten des Panels zu navigieren. Zum einen gibt es die Navigation auf dem Panel mit den Symbolen Pfeil Rechts, Links und Pfeil nach oben und Haus-Symbol. Die Zweite und etwas schwierige Variante ist über die Tasten unter dem Panel, dazu aber später mehr. Zuerst sehen wir uns die Struktur der Seiten und ihre Aufteilung an.**
> ab TS-Script v4.3.3.30
**Die Definition der Seiten hat sich geändert.**
```typescript
let Variablenname: PageType =
```
Daraus ergeben sich folgende Vorteile:
Es müssen nicht mehr alle Seitenparameter angegeben werden, wie z.B
```typescript
let CardPowerExample: PageType =
{
'type': 'cardPower',
'heading': 'cardPower Emulator',
'items': [
{ id: 'alias.0.NSPanel_1.Power.PowerCard' },
]};
```
d.h. alle optionalen Seitenparameter mit undefined oder false können entfallen.
Zusätzlich können weitere Typen verwendet werden, diese werden [hier](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation#subpages) beschrieben.
```typescript
let CardExample: PageType =
  {
  'type': 'cardGrid',
  'heading': 'Testpage',
  'useColor': true oder false
  'subPage': true oder false
//Navi Parameter für Subpages
  'parent': undefined oder Page
  'parentIcon': undefined oder Icon als String, z.B. 'alert'
'parentIconColor': undefined oder Farbkonstante vom Script
  'prev': undefined oder 'Page'
  'prevIcon': undefined oder Icon als String
'prevIconColor': undefined oder Farbkonstante vom Script
  'next': undefined oder 'Page'
  'nextIcon': undefined oder Icon als String
'nextIconColor': undefined oder Farbkonstante vom Script
  'home': undefined oder 'Page'
  'homeIcon': undefined oder Icon als String
'homeIconColor': undefined oder Farbkonstante vom Script
  'items': [
  { id: 'alias.0.NSPanel_1.Power.PowerCard' },
  ]
  };
```
## Navigation mit den TFT-Icons (Pfeil rechts, -links, -oben und Haus)
![Grafik Navi](https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/cd8b0b1b-390b-482a-9f99-4dc7a86559e6)
### Vorbereitung und Gedanken zur Menüstruktur
Bevor Ihr eure Seiten definiert, sollte ihr euch Gedanken über die Menüstruktur eures Panels machen. Hier ein Beispiel wie so etwas aussehen kann. Es ist auch nützlich, seine Alias Struktur genauso anzulegen mit Ordner und Unterordnern, wie sie im Panel existiert. So behaltet ihr den Überblick welcher Alias zu welcher Page gehört.
![image](https://user-images.githubusercontent.com/102996011/210839808-5d1c9531-1db4-41f2-88f3-ced3b59a4943.png)
Es bewährt sich ebenfalls, dass Schema in einer Excel-Tabelle niederzuschreiben. Nachfolgend ein Beispiel:
![image](https://user-images.githubusercontent.com/102996011/210841168-46f76dc4-6755-4728-80f5-05f55992f21a.png)
In der ersten Ebene befinden sich die Hauptseiten / Pages, welche im Skript im Bereich „export const config: Config = { -> Pages [...]“ deklariert werden. Hier werden die Namen der Seiten eingetragen, die Ihr an Anfang des Skripts definiert habt. Dabei ist die Reihenfolge zwischen den beiden eckigen Klammern wichtig, diese spiegelt auch die Reihenfolge auf dem Panel wider. Eine Besonderheit hat der erste Eintrag, dass ist die Startseite / Page 0. Diese hat auch den Status der Homeseite und wird aufgerufen, wenn ihr auf das Haus Symbol bei den Subpages drückt, wenn die Eigenschaft **'home': undefined** ist. Die Subpages könnt ihr von den Hauptseiten / Pages öffnen, wenn ihr die Eigenschaften **navigate:true** und **targetPage: <Seitenname>** in Kombination nutzt.
Wie so etwas in den Seiten definiert wird, steht im Abschnitt: [Icon für Subpages](https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation#icons-f%C3%BCr-subpages-ab-v3732)
Um durch die Hauptseiten / Pages zu blättern, habt Ihr oben links und rechts jeweils ein Pfeil. Die Seiten sind als Endlosschleife angelegt, das heißt, wenn ihr bei der letzten Seite weiter nach rechts blättert, kommt ihr wieder zur ersten Seite und umgekehrt.
### Subpages
Subpages haben verschiedene Navigationsmöglichkeiten, diese definiert Ihr im Bereich der Page-Definition. Damit definiert ihr auch, welche der vier Navi-Symbole in den oberen Ecken angezeigt werden. Zusätzlich könnt ihr ab **Version 3.8.3** auch optional Icon definieren.
* **'subPage'**: true -> Seite wird als Unterseite definiert
* **'parent'**: (Seitenname der übergeordneten Seite) -> definiert welche Seite aufgerufen wird beim Drücken auf den Pfeil nach oben
* **'prev'**: (Seitenname der vorhergehenden Seite) -> definiert welche Seite aufgerufen wird beim Drücken auf den Pfeil nach links
* **'next'**: (Seitenname der nächsten Seite) -> definiert welche Seite aufgerufen wird beim Drücken auf den Pfeil nach rechts
* **'home'**: (Seitenname der Übersichtsseite) -> definiert welche Seite aufgerufen wird beim Drücken auf das Haus-Symbol
* **'parentIcon', 'prevIcon', 'nextIcon' und 'homeIcon'**: als Parameter gelten -> undefined oder Icon als String, z.B. 'alert'
* **'parentIconColor', 'prevIconColor', 'nextIconColor', 'homeIconColor'**: -> undefined oder Farbkonstante vom Script z.B. Yellow
> **Wichtig!**
> Wenn **'prev'** eine Seite zugewiesen wurde, wird **'parent'** nicht ausgewertet. Das gleiche gilt auch für **'next'** und **'home'**.
```typescript
let Level_2_Erdgeschoss_2: PageType =
{
'type': 'cardGrid',
'heading': 'Erdgeschoss (2)',
'useColor': true,
'subPage': true,
'parent': Level_1_Haus,
'prev': 'Level_2_Erdgeschoss_1',
'prevIcon': 'home-group-minus',
'home': 'Level_1_Haus',
'homeIcon': 'play-pause',
'items': [
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Gaeste_WC.Indikator', targetPage: 'Level_3_GaesteWC', name: 'Gäste WC' , icon: 'toilet', offColor: MSGreen, onColor: MSRed},
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Hauswirtschaftsraum.Indikator', targetPage: 'Level_3_Hauswirtschaftsraum', name: 'Hauswirtschaft' , icon: 'floor-plan', offColor: MSGreen, onColor: MSRed},
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Flur_vorne.Indikator', targetPage: 'Level_3_EG_FlurVorne', name: 'Flur vorne' , icon: 'floor-plan', offColor: MSGreen, onColor: MSRed},
{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Flur_hinten.Indikator', targetPage: 'Level_3_EG_FlurHinten', name: 'Flur hinten' , icon: 'floor-plan', offColor: MSGreen, onColor: MSRed},
]
};
```
![screenPanelNavi](https://user-images.githubusercontent.com/101348966/212483124-5c3c4f67-2a54-469a-a514-7aef78ff02d8.png)
#### Icons für Subpages (ab v3.7.3.2)
Es gibt jetzt 3 Varianten, um ein Icon für Subpages anzulegen.
##### Variante 1 (ursprüngliche Notation)
* Die ursprüngliche Variante mit festem Icon und fester Farbe:
```typescript
{ navigate: true, id: 'NSPanel_Einstellungen', icon: 'wrench-outline', onColor: White, name: 'Screensaver'}
```
Die Eigenschaft **navigate: true** macht aus einem normalen Steuerelement, ein Icon, um eine Subpage zu öffnen. Des Weiteren wird die Eigenschaft **id:** benötigt. Sie enthält den Namen der Subpage. Diese beiden Angaben **sind Pflicht**, mit **icon:** und **onColor:** kann man von dem Standardicon und Farbe abweichen und Eigene definieren.
##### Variante 2 (neue Notation)
* Die neue Variante:
```typescript
{ navigate: true, id: null, targetPage: 'WlanDaten', onColor: White, name: 'Gäste WLAN Daten'}
```
Bei der neuen Schreibweise bleibt das Verhalten zu der Alten gleich. Hier ist nur die Schreibweise für das Ziel (Subpage) angepasst. Wobei meiner Meinung nach es die richtige Schreibweise ist. Pflicht sind folgende Eigenschaften: **naigate: true, id: null**, und (neu) **tagetPage:**. Hier kommt jetzt der Name der Subpage ran, der bei der alten Schreibweise hinter **id:** stand.
> Wichtiger Hinweis:
> Ihr müsst euer Icon für die Subpage nicht umschreiben, es funktionieren beide Schreibweisen. Die User, die auch die Variante 3 (dynamische) einsetzen wollen, sollten auch die neue Schreibweise für die statischen Icon nutzen.
##### Variante 3 dynamische Icon (neue Notation)
**Was heißt dynamische Icon?**
Das Icon auf eurem Panel kann die Farbe und das Icon selbst ändern, je nach Status des Alias (ture/false).
Ich nutze es für meine Fenster- und Türkontakte, die ich in Subpages gebündelt habe. Auf der Übersichtspage habe ich Icons für die einzelnen Subpages, diese Icon ändern ihr Aussehen, wenn auf der Subpage sich ein Kontakt ändert. Somit sehe ich auf der Übersichtseite, dass alle Fenster und Türen geschlossen sind. Sollte ein Fenster offen sein, ändert sich auf der Überichtseite das Icon auf "offenes Fenster und wird Rot". Jetzt kann ich auf das Icon drücken und sehe in der Subpage welches Fenster noch offen ist.
Um dieses Verhalten zu nutzen, benötigt ihr ein Alias vom **Typ "Info"**, einen Datenpunkt unter "0_userdata.0." welcher mit dem Alias verknüpft ist und ein kleines Skript, welches eure Kontakte überwacht und den Datenpunkt unter 0_userdata.0. auf true bzw. false setzt.
* Die neue Variante mit dynamischem Icon und dynamischer Farbe:
```typescript
{ navigate: true, id: alias.0.haus.fenster, targetPage: 'Fenster', onColor: MSGreen, offColor: MSRed, name: 'Fenster'}
```
Hier ein Beispiel als Blockly, welches alle Fenster in einem Aliasordner überwacht und den Datenpunkt entsprechend setzt.
![Blockly_dynamische _Srungmarke](https://user-images.githubusercontent.com/101348966/210888849-35b34ea7-86b1-4c3f-814a-b98873d6d158.png)
Wie Ihr den Datenpunkt unter 0_userdata.0. setzen wollt, könnt ihr selbst entscheiden und ist auch ganz von der Anzahl der Kontakte abhängig. Auf einer cardGrid könnt ihr maximal 8 Icon / Kontakte darstellen. Deshalb kann es notwendig sein, noch eine Subpage dazwischen zu setzen und diese nach Stockwerken aufzuteilen.
**Erweiterung ab Version 4.2**
die Flexibilität der Icon wurde um die Farbe und dem Buttontext(CardEntities) erweitert.
Dazu müssen zwei Datenpunkte im Alias angelegt werden.
**COLORDEC** (Typ Zahl) beinhaltet die Farbzahl entsprechend DEC565.
[Hier gibt es ein Nextion-HMI-Color-Converter](https://nodtem66.github.io/nextion-hmi-color-convert/index.html)
**BUTTONTEXT** (Typ String) statt PRESS kann der Text freigewählt werden.
<img width="331" alt="Bildschirmfoto 2023-08-21 um 16 10 40" src="https://github.com/joBr99/nspanel-lovelace-ui/assets/101348966/5edbb8b0-ead3-4c69-9a9a-479eb2cb6e16">
Mindest Schreibweise, wenn DatenPunkte angelegt sind.
```typescript
{ navigate: true, id: AliasPath + 'Status_offene_Tuer', targetPage:'Tuer', name: 'Türen'},
```
Wenn einer oder beide Datenpunkte nicht vorhanden sind, wird die altbekannt Schreibweise heran gezogen, wie z.B.
```typescript
{ navigate: true, id: AliasPath + 'Status_offene_Tuer', targetPage:'Tuer', useColor:true, onColor: Green, offColor: Red, name: 'Türen', buttonText: 'hier drücken'},
```
## Navigation mit den Hardware-Buttons
Es gibt mehrere Möglichkeiten die Tasten mit Funktionen zur Steuerung des Panels zu belegen. Standardmäßig steuern diese Tasten die Relais im Panel. Durch Aktivierung einer Regel in der Tasmota Konsole können die Tasten von den Relais entkoppelt werden und softwareseitig genutzt werden. Wir haben die Einstellungen unter der Rubrik [NSPanel Tasmota FAQ](https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Tasmota-FAQ) zusammengefasst.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB