NSPanel Page ‐ Typen_How 2_Beispiele

Stand: 02.01.2023 / v1.1

Einleitung:

In diesem Kapitel geht es um die Seite, die sogenannte Page des NSPanels.
Wir wollen uns hier
--> den Aufbau der Page ansehen
--> welche Page Typen gibt es
--> Wie man eine Page aufbaut und welche Dinge man beachten aber auch mindestens einfügen muss
--> und welche Beispiele gibt es zu den einzelnen Page Typen die beim eigenen bauen hilfreich sein können

Page Aufbau

Eine Page, also eine Seite des NSPanels hat einen bestimmten Aufbau.
Es gibt Teile, die sind bei jeder Seite gleich, es gibt Teile, die immer da sein müssen, es gibt Teile, die sind optional und je nach Typ der Seite variiert der Aufbau ein wenig.
Zum ersten besseren Verständnis schauen wir uns nachfolgend die Page Typen an.

Page Typ

Beginnen wir damit, dass man sich, bevor man eine Seite "zusammenstellt" / programmiert darüber Gedanken machen muss, wie die Seite aussehen soll. In den allermeisten Fällen wird es auf eine Seite vom Typ PageEntities oder PageGrid(2) hinauslaufen.
Gegenwärtig haben wir folgende Page Typen zur Auswahl:

PageEntities:

Auf dieser Seite hat man bis zu 4 Zeilen für vertikal angeordnete Steuerelemente zur Verfügung.
Links kann man ein Icon platzieren, in der Mitte folgt ein Text/Beschreibung und rechts folgt ein Switch, ein Wert, ein Regler oder ein Button (PRESS).
Je nach Alias (Rolle), kann man über den Touch/Klick auf den Eintrag zu einer Unterseite, einem sogenannten Popup gelangen.

PageGrid(2):

Beim PageGrid steht das Icon im Vordergrund. Man hat hier ein Raster mit zwei Zeilen und entweder 3 Spalten (bei der CardGrid) oder 4 Spalten (bei der CardGrid2).
In jedem Feld kann man ein Icon platzieren mit einer Beschriftung (also ein Steuerelement). Diese Beschriftung kann ein Text sein, aber auch ein Wert eines Datenpunktes.

PageMedia:

PageMedia ist letztlich eine Bedienoberfläche eines Players, der es ermöglicht Streams auf spezifischen Geräten abzuspielen. Der Umfang ist hier stark vom Adapter abhängig, welcher im ioBroker installiert ist. (Sono, Alexa, ...)
Auf der pageMedia lassen sich an bestimmten Stellen das sogenannte InSelPopup integrieren, um beispielsweise Abspielgeräte, Playlists oder Senderlisten, etc. aufzulisten.

PageThermo:

Egal ob Thermostate, Klimaanlagen, Wärmepumpen, Smarte Ventilatoren, etc. - mit der CardThermo lässt sich vieles Steuern was eine Temperaturregelung hat. Je nach Alias-Einstellungen können die Unterschiedlichsten MODE und Informationen abgebildet werden.

PageAlarm:

Die Alarmanlage über das NSPanel steuern?
Mit der PageAlarm kann man sie zumindest ein- und ausschalten und unterschiedliche Level schalten.

PageUnlock:

Man möchte den Zugriff auf das NSPanel kontrollieren / limitieren?
Kein Problem, mit der PageUnlock bestimmen sie, wer das smarte Zuahause steuern darf ;-)

PageChart:

Für alle die Diagramme und Statistiken lieben und auch auf diese nicht auf dem 4" großen Display verzichten möchten, gibt es die CardChart und CardLChart zur Darstellung von Säulen- und Linien-Diagramm.

PagePower:

Sie haben eine PV-Anlage und/oder mehrere Verbraucher mit Messwerten und möchten den Stromfluss darstellen? Dafür haben wir die PagePower.

PageQR:

Gäste sollen einfach und easy ins Gäste-WLAN rein kommen? Am besten mit dem Scann eines QR-Codes? Voila, dafür haben wir die PageQR.

How 2 Page:

Basisseite

Der Rahmen einer Seite besteht aus einem Frame wie folgend:

let name: PageType =
{
    'type': 'cardType',
    'heading': 'Seiten Überschrift',
    'useColor': true,
    'items': []
};

let name: -> Das Wort name ist hier ein Platzhalter. Man gibt der Seite hier einen eindeutigen Namen, allerdings bitte ohne Leerzeichen bei mehreren Worten und vermeide Sonderzeichen. Dieser Name muss im weiteren Verlauf des Skriptes noch einmal aufgeführt werden (Wichtig für die Darstellung und Navigation).
PageType = -> Der Seitentyp wird durch die Types im Script automatisch gesetzt
'type': -> Der Typ der Seite, wie zuvor schon beschrieben. PageType und type haben immer den gleichen Postfix. Bei type ist es aber CardType statt PageType. Folglich haben wir hier in Hochkomma eingefasst 'cardEntities' oder 'cardGrid', etc.
'heading': -> Der Seitenname oder auch Überschrift, der auf der Seite auf dem NSPanel oben in der Mitte dargestellt wird. Er ist in Hochkommas zu fassen.
'useColor': -> Wird in der Regel mit true angegeben, sofern "useColor" durch in der gewünschten Seite unterstützt wird.
'items': -> Hier wird der eigentliche Inhalt der Seite eingetragen. Pro dazustellendem Element erfasst man hier ein sogenanntes PageItem welches dann die darzustellenden Parameter erhält.

Bis hier her haben wir eine leere Seite erstellt. Wenn ich meinen Page/Card Type festgelegt habe, der Seite einen Namen gegeben, eine Überschrift definiert habe, kann ich mich nun daran machen den Inhalt der Seite aufzubauen.
Als Zwischen-Test kann man den definierten name im Skript unter pages hinzufügen, das Skript neu starten und dann auf dem NSPanel schauen, ob die neue Seite (ohne Inhalt) schon angezeigt wird.

Optionale Parameter

Bevor wir aber zur Erstellung der PageItem kommen, noch optionale Parameter, die man hier setzen kann:

'subPage': -> Wird, sofern man mit Unterseite arbeiten möchte, auf true gesetzt.
'parent': -> Wird 'subPage': true definiert, dann kann man mit parent den Namen der höher gelegenen Seite definieren. Dies hat Auswirkung auf die Steuerung und die Blätterpfeile oben auf der Seite.
'hiddenByTrigger': -> Wird optional definiert um Top-Level-Seiten (Level 0) mit Hilfe des boolschen Datenpunktes (true/false) 0_userdata.0.NSPanel.X.Config.hiddenCards zur Laufzeit auszublenden. Bei subPage-Seiten (Level 1-n) wird die Subpage zur Laufzeit nicht ausgeblendet, jedoch der Menüpunkt zum nächsthöheren Level deaktiviert.

Es gibt noch weitere optionale Parameter, jedoch gehören Die alle zum Thema Navigation. Hierzu gibt es hier in der Wiki eine Beschreibung, so dass wir an dieser Stelle nicht noch einmal darauf eingehen möchten.

Seiteninhalt - PageItem - definieren

Das PageItem - wenn man es mal frei übersetzt , das Seiten-Gegenstand definiert einen auf der Seite sichtbaren Wert / Schalter. Was ein PageItem relativ immer mit sich bringt, ist eine ID, ein Name und eine Farbdefinition.

{ id: 'alias.0.NSPanel_1.Luftreiniger', name: 'Luftreiniger', icon: 'power', icon2: 'power',offColor: MSRed, onColor: MSGreen},

Das <PageItem> wird gefolgt von {},. Innerhalb der geschweiften Klammern folgt die weitere Konfiguration:

Mindestangaben:

id : Pfad zum Alias, der verwendet wird, in Hochkomma eingefasst
name : Text der als Label auf dem Display zu einem PageItem dargestellt wird, in Hochkomma eingefasst

Important

name ist kein muss, wenn der Alias richtig konfiguriert ist. Dann wird der Name aus dem common.name.de gezogen.
Wie man Aliase definiert und welche Möglichkeiten es gibt, dafür haben wir hier in der Wiki seperate Kapitel, schaut da einfach mal rein

Optionale / spezifische Angaben:

Angaben für icon-Farbe:

offColor : Farbe für ausgeschaltet
onColor : Farbe für eingeschaltet
useColor : wird mit true oder false angegeben und verwendet bei true die definierten Config-Parameter defaultOnColor und defaultOffColor, sofern keine onColor oder offColor im <PageItem> als Parameter definiert sind
colorScale : Colorscale ist ein Farbverlauf von Rot über Gelb nach Grün mit einem Bereich von 0 bis 10.
- val_min -> Rot
- val_max -> Grün
- in Verbindung mit val_best, ist val_best Grün und val_min und val_max Rot

Important

Sofern keine icon-Farbe definiert wird, gibt es eine Default Farbkombination. Kann unter defaultColor (defaultOnColor & defaultOffColor) in der Konfiguration festgelegt werden.

Angaben für Label:

prefixName : Erweiterung für name. Setzt einen Text als Prefix vor name
suffixName : Erweiterung für name. Setzt einen Text als Postfix nach name
buttonText : ersetzt den Standard Text “PRESS” auf der cardEntities
fontSize : Auf der cardGrid(2) kann man mit diesem Attribut die Schriftgröße auf einen Wert zw. 0 und 5 gesetzt werden. Wird begleitet vom Attribut useValue mit dem Wert true:
- Font 0 - Default - Size 24 (No Icons, Support for various special chars from different langs)
- Font 1 - Size 32 (Icons and limited chars)
- Font 2 - Size 32 (No Icons, Support for various special chars from different langs)
- Font 3 - Size 48 (Icons and limited chars)
- Font 4 - Size 80 (Icons and limited chars)
- Font 5 - Size 128 (ascii only)

Definition Icons:

icon : Ein Icon für den An-Status
icon2 : Ein Icon für den Aus-Status. icon2 wird nicht bei allen Alias unterstützt

Note

Die Icon-Namen müssen aus der Icondatei stammen. icon bzw. icon2 übersteuern ein Icon welches per Default vom Alias kommt. Bei vielen Alias ist es nicht notwendig ein icon(2) zu definieren. Die Option steht einem aber jederzeit zur Verfügung.

Einheiten - Werte - Diverses:

unit : in Hochkomma gesetzte Einheit (z.B. °C) gilt nicht für alle Alias Rollen
useValue : muss auf true, wenn fontSize genutzt wird
minValue : legt den Startwert für den Slider fest
maxValue : legt den Endwert für den Slider fest
modeList : Ermöglicht ein InSelPopup für die Auswahl weiterer Werte. Wird in [``, ``, ``] gefasst und enthält eine kommaseparierte Liste an Werten
inSel_ChoiceState : definiert, ob ein ausgewählter Wert auf einem InSelPopup einen Fokus erhält. Wird mit true oder falseangegeben
monobutton : wenn als Schalter ein echter Hardware-Taster verbaut ist, wird immer true/false für einen Umschaltvorgang gesendet. In dem Fall wird ein Taster emuliert und es ist true zu setzen. Andernfalls wird ein Schalter emuliert nud es ist false zu setzen.

Angaben für Licht:

interpolateColor : wird mit true oder false angegeben und errechnet bei true die aktuelle Farbe des Leuchtmittels
colormode : wird bei ALIAS RBG verwendet, um XY-Farbwerte zu errechnen und zu benutzen. Wert ist per default “rgb” und bei Verwendung von XY Farbübersetzungen: “xy”

Angaben für PopupLight
- minValueBrightness : legt den Startwert für den Slider Helligkeit fest
- maxValueBrightness : legt den Endwert für den Slider Helligkeit fest
- minValueColorTemp : legt den Startwert für den Slider Farbtemperatur fest
- maxValueColorTemp : legt den Endwert für den Slider Farbtemperatur fest

Angabe für Rolladen (PopupShutter)

secondRow : gehört zur popupPage Shutter (Text für die zweite Zeile)
minValueLevel : definiert die kleinste Position (Down)
maxValueLevel : definiert die größte Position (Up)
minValueTilt : definiert die - kleinste Lamellenposition-Stellung
maxValueTilt : definiert die - größte Lamellenposition-Stellung

Angaben für Navigation und Subpages:

navigate : Ersetzt id und wird mit true gesetzt und benötigt den Parameter targetPage. Öffnet eine Subpage
targetPage : Zielseite die geöffnet wird, wenn man eine in navigate definierte SubPage öffnen will

CardChart spezifische Angabe:

yAxis : name der y-Achse
yAxisTicks : Werte-Skala der yAchse Wird in [``, ``, ``] gefasst und enthält eine kommaseparierte Liste an Werten
onColor : Farbe der Balken

CardAlarm spezifische Angabe:

autoCreateALias : NSPanel-Script erstellt die Datenpunkte unter 0_userdata.0 und alias.0 automatisch, wenn Wert = true

CardUnlock spezifische Angabe:

autoCreateALias : NSPanel-Script erstellt die Datenpunkte unter 0_userdata.0 und alias.0 automatisch, wenn Wert = true

CardQR spezifische Angabe:

hidePassword : versteckt das WLAN Passwort auf der PageQR
autoCreateALias : NSPanel-Script erstellt die Datenpunkte unter 0_userdata.0 und alias.0 automatisch, wenn Wert = true

CardMedia spezifische Konfiguration:

adapterPlayerInstance : legt die Adapter-Instanz für die Adapter alexa2, spotify-premium, sonos, squeezeboxrpc, chromecast oder volumio fest
mediaDevice : bei alexa2 die Seriennummer des Echos, bei sonos die IP, bei squeezeboxrpc der erstellte Devicename
speakerList : bei alexa2 schaltbare Device-Namen, bei spotify-premium auswählbare Device-Namen
playList : nur für alexa2 und spotify-premium
equalizerList : kann verwendet werden, wenn Das Device (z.B. Amazon Echo oder Sonos HTTP API) und der Adapter des Devices eine Equalizer-Funktionalität bereit stellt
repeatList : ['off','context','track'] bei spotify-premium Instanz
colorMediaIcon : Farbe für Player-Icon
colorMediaArtist : Farbe für Song-Interpreten
colorMediaTitle : Farbe für Song-Titel (Track)
crossfade : Ersetzt die Seek-Funktion im Logo des Sonos-Players
alwaysOnDisplay : Lässt den Media-Player geöffnet, bis eine weitere Seite navigiert wird
autoCreateALias : NSPanel-Script erstellt den Alias automatisch unter alias.0 , wenn Wert = true

CardThermo spezifische Konfiguration:

stepValue : Schrittweite für die Veränderung der Solltemperatur. Wird mit zusätzlich minValue und maxValue konfiguriert
iconArray : Wenn die Standard Icon im unteren Teil der PageThermo ersetzt werden sollen. Schreibweise wie bei modeList

Angaben für PopupThermo
- popupThermoMode1 : Popup, falls definiert, wird mit Hilfe der 3 Punkte unter der Setpoint-Temperaturein Popup (oberste Zeile) eingeblendet, welches Werte zur Steuerung von zusätzlichen Zuständen annehmen kann
- popupThermoMode2 : Popup, falls definiert, wird mit Hilfe der 3 Punkte unter der Setpoint-Temperaturein Popup (mittlere Zeile) eingeblendet, welches Werte zur Steuerung von zusätzlichen Zuständen annehmen kann
- popupThermoMode3 : Popup, falls definiert, wird mit Hilfe der 3 Punkte unter der Setpoint-Temperaturein Popup (unterste Zeile) eingeblendet, welches Werte zur Steuerung von zusätzlichen Zuständen annehmen kann
- popUpThermoName : Überschriften-Liste (Array) der in dem cardThermo
- setThermoAlias : ALIAS Liste (Array) welches die gewählten Zustände zurückgibt (numerisch)
icon : definiert das Icon des Popup-Fensters
setThermoDestTemp2 : mit einem zusätzlichen ALIAS-Datenpunkt (ACTUAL2) kann eine 2. Setpoint-Temperatur visualisiert werden.

Basisseite mit PageItem

Wenn man nun ein oder je nach gewähltem Page Type mehrere <PageItems> aufgebaut hat und diese dem Punkte items : [] hinzugefügt hat, erhält man eine Seite mit - nennen wir es etwas sichtbares.

let name: PageType =  
{
    'type': 'cardType',
    'heading': 'Seiten Überschrift',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.Luftreiniger', name: 'Luftreiniger', icon: 'power', icon2: 'power',offColor: MSRed, onColor: MSGreen},
    ]
};

Wir haben weiter oben ja den Test mit der Basisseite gemacht, welche uns eine leere Seite auf dem NSPanel dargestellt hat. Nun, mit einem <PageItem> erhält man eine Anzeige.

Testet Eure <PageItem> Eintrag für Eintrag. Dies macht es bei der eventuellen Fehlersuche einfacher.

Bedient Euch gerne an den nachfolgend aufgelisteten Beispielen aus unserer Entwicklung. Mit den vorgefertigten <PageItem> aus den Beispielen habt Ihr es mit unter einfacher eure eigenen Seiten zu bauen. Mit der Zeit wird es dann immer mehr an eigenem, was man den Pages des NSPanels hinzufügt.

Page Beispiele

Übersicht der Beispiele

PageEntities:
- cardEntities: Color Aliase 1
- cardEntities: Color Aliase 2
- cardEntities: Sonstige Aliase
- cardEntities: Büro
- cardEntities: Fenster und Türen
- cardEntities: Button Aliase
- cardEntities: Test Subpages
- cardEntities: Abfallkalender
- cardEntities: Büro
PageGrid2:
- cardGrid2: Büro 2
PageGrid:
- cardGrid: Radiosender
- cardGrid: WLED Stripes WZ
- cardGrid: Sensor Werte
- cardGrid: Radio
PageMedia:
- cardMedia: Alexa
- cardMedia: Sonos
- cardMedia: Spotify-Premium
- cardMedia: SqueezeboxRPC
PageThermo:
- cardThermo: Test Thermostat
- cardThermo: Test Klimaanlage
- cardThermo: Pool Wärmepumpe
PageAlarm:
- cardAlarm: Alarmanlage
PageUnlock:
- cardUnlock: Service Pages
PageChart:
- cardChart: Stromzähler L1+L2+L3
- cardLChart: Büro Temperatur
PagePower:
- cardPower: cardPower Emulator
PageQR:
- cardQR: Gäste WLAN

PageEntities

CardEntities

let Buero_Seite_1: PageType =
{
    'type': 'cardEntities',
    'heading': 'Büro',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.Schreibtischlampe', interpolateColor: true},
        { id: 'alias.0.NSPanel_1.Deckenbeleuchtung', interpolateColor: true},
        { id: 'alias.0.NSPanel_1.ShellyDuoTest', name: 'Shelly Duo GU10', minValueBrightness: 0, maxValueBrightness: 100, minValueColorTemp: 6465, maxValueColorTemp: 3000, interpolateColor: true, modeList: ['Color','White'], inSel_ChoiceState: true},
        { id: 'alias.0.NSPanel_1.Luftreiniger', icon: 'power', icon2: 'power',offColor: MSRed, onColor: MSGreen}
    ]
};

CardEntities - Color Aliase 1

let Test_Licht1: PageType =
{
    'type': 'cardEntities',
    'heading': 'Color Aliase 1',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.TestRGBLichteinzeln', name: 'RGB-Licht Hex-Color', interpolateColor: true},
        { id: 'alias.0.NSPanel_1.TestRGBLicht', name: 'RGB-Licht', minValueBrightness: 0, maxValueBrightness: 100, interpolateColor: true},
        { id: 'alias.0.NSPanel_1.TestCTmitHUE', name: 'HUE-Licht-CT', minValueBrightness: 0, maxValueBrightness: 70, minValueColorTemp: 500, maxValueColorTemp: 6500, interpolateColor: true},
        { id: 'alias.0.NSPanel_1.TestHUELicht', name: 'HUE-Licht-Color', minValueColorTemp: 500, maxValueColorTemp: 6500, interpolateColor: true}
    ]
};

CardEntities - Color Aliase 2

let Test_Licht2: PageType =
{
    'type': 'cardEntities',
    'heading': 'Color Aliase 2',
    'useColor': true,
    'items': [
        //Beispiel für RGB Light mit neuem PageItem-Parameter colormode: "xy" alternativ colormode: "rgb" oder weglassen
        //Steuert im z.B. DeConz Adapter unter Lampen die Farben per CIE (XY)
        { id: "alias.0.NSPanel_2.WZ_E14_Fenster_rechts", name: 'Fensterbank rechts', minValueBrightness: 0, maxValueBrightness: 100, minValueColorTemp: 500, maxValueColorTemp: 150, interpolateColor: true, colormode: 'xy'},
        { id: "alias.0.NSPanel_1.TestFarbtemperatur", name: 'Farbtemperatur', interpolateColor: true},
        { id: "alias.0.NSPanel_1.TestFarbtemperatur", prefixName: 'Büro: ', name: "getState('0_userdata.0.Test.Wiki_Router').val", suffixName: '%', interpolateColor: true},
    ]
};

CardEntities - Sonstige Aliase

let Test_Funktionen: PageType =
{
    'type': 'cardEntities',
    'heading': 'Sonstige Aliase',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.TestLautstärke', offColor: MSRed, onColor: MSGreen, name: 'Echo Spot Büro', minValue: 0, maxValue: 100 },
        <PageItem>{ id: 'alias.0.NSPanel_1.TestTemperatur',name: 'Temperatur außen', icon: 'thermometer', onColor: White , colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 20} },
        { id: 'alias.0.NSPanel_1.TestFeuchtigkeit', name: 'Luftfeuchte außen', icon: 'water-percent', unit: '%H', onColor: White, colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 65} },
        //{ 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 },
        { id: 'alias.0.NSPanel_1.Ventilator.Fan_1',name: 'Ventilator', icon: 'fan', onColor: On, offColor: HMIOff, modeList: ['Low', 'Medium', 'High', 'Move', 'Sleep', 'Auto', 'Manual']},
    ]
};

CardEntities - Diverses

let Buero_Seite_1: PageType =
{
    'type': 'cardEntities',
    'heading': 'Büro',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.Schreibtischlampe', interpolateColor: true},
        { id: 'alias.0.NSPanel_1.Deckenbeleuchtung', interpolateColor: true},
        { id: 'alias.0.NSPanel_1.ShellyDuoTest', name: 'Shelly Duo GU10', minValueBrightness: 0, maxValueBrightness: 100, minValueColorTemp: 6465, maxValueColorTemp: 3000, interpolateColor: true, modeList: ['Color','White'], inSel_ChoiceState: true},
        { id: 'alias.0.NSPanel_1.Luftreiniger', icon: 'power', icon2: 'power',offColor: MSRed, onColor: MSGreen}
    ]
};

CardEntities - Fenster und Türen

let Fenster_1: PageType =
{
    'type': 'cardEntities',
    'heading': 'Fenster und Türen',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.TestFenster', offColor: MSRed, onColor: MSGreen, name: 'Büro Fenster'},
        { id: 'alias.0.NSPanel_1.Haustuer', offColor: MSRed, onColor: MSGreen, name: 'Haustür'},
        { id: 'alias.0.NSPanel_1.TestBlind', icon: "blinds-horizontal", offColor: White, onColor: Yellow, name: 'Büro', secondRow: 'Hier Text für 2. Zeile'},
        { id: 'alias.0.NSPanel_1.TestDoorlock', offColor: MSRed, onColor: MSGreen, name: 'Türschloss'},
    ]
};

CardEntities - Button Aliase

let Button_1: PageType =
{
    'type': 'cardEntities',
    'heading': 'Button Aliase',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.TestTastensensor', name: 'Tastensensor (FFN)'},
        { id: 'alias.0.NSPanel_1.Radio.NDR2', icon: 'radio', name: 'Taste (NDR2)', onColor: colorRadio, buttonText: 'starten'},
        { id: 'alias.0.NSPanel_1.Radio.NDR2', icon: 'alarm-light', name: 'Alert mit Zielseite', offColor: MSGreen, onColor: MSRed, targetPage: 'Abfall', buttonText: 'Popup'},
    ]
};

CardEntities - Navigate für Subpages

let Subpages_1: PageType =
{
    'type': 'cardEntities',
    'heading': 'Test Subpages',
    'useColor': true,
    'items': [
        { navigate: true, id: 'alias.0.NSPanel_1.Abfall.event1', targetPage: 'Abfall', name: 'Abfallkalender'},
        { navigate: true, id: null, targetPage: 'WLAN', onColor: White, name: 'Gäste WLAN'},
    ]
};

CardEntities - Abfallkalender

let Abfall: PageType =
{
	'type': 'cardEntities',
	'heading': 'Abfallkalender',
	'useColor': true,
	'subPage': true,
	'parent': Subpages_1,
	'items': [
		{ id: 'alias.0.NSPanel_1.Abfall.event1',icon: 'trash-can'},
		{ id: 'alias.0.NSPanel_1.Abfall.event2',icon: 'trash-can'},
		{ id: 'alias.0.NSPanel_1.Abfall.event3',icon: 'trash-can'},
		{ id: 'alias.0.NSPanel_1.Abfall.event4',icon: 'trash-can'}
	]
};

PageGrid(2)

CardGrid für Sensorwerte

let SensorGrid: PageType = {
    'type': 'cardGrid',
    'heading': 'Sensor Werte',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.TestTemperatur', name: 'Außentemp. °C', offColor: MSRed, onColor: MSGreen, useValue: true, colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 20} },
        { id: 'alias.0.NSPanel_1.TestFeuchtigkeit', name: 'Luftfeuchte %', offColor: MSYellow, onColor: MSYellow , useValue: true, colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 65} },
        { id: 'alias.0.NSPanel_1.Taupunkt', name: 'Taupunkt °C', offColor: MSRed, onColor: MSGreen, useValue: true, colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 20} },
        { id: 'alias.0.NSPanel_1.UV_Index', name: 'UV Index', offColor: White , onColor: White, useValue: true, colorScale: {'val_min': 0, 'val_max': 12} },
        { id: 'alias.0.NSPanel_1.Windstaerke', name: 'Windstärke bft', offColor: White , onColor: White, useValue: true, colorScale: {'val_min': 0, 'val_max': 9} },
        { id: 'alias.0.NSPanel_1.Luftdruck', name: 'Luftdruck hPa', offColor: White , onColor: White, useValue: true, colorScale: {'val_min': 950, 'val_max': 1050, 'val_best': 1013} },
    ]};

CardGrid - 6 PageItems

Popup für Shutter

let Buero_Seite_2: PageType =
{
    'type': 'cardGrid',
    'heading': 'Büro 2',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.Schreibtischlampe', name: 'Schreibtisch'},
        { id: 'alias.0.NSPanel_1.Deckenbeleuchtung', name: 'Deckenlampe'},
        { id: 'alias.0.NSPanel_1.TestFenster', offColor: MSRed, onColor: MSGreen, name: 'Büro Fenster'},
        { id: 'alias.0.NSPanel_1.Luftreiniger', icon: 'power', offColor: MSRed, onColor: MSGreen},
        { id: 'alias.0.NSPanel_1.TestBlind', icon: 'projector-screen', onColor: White, name: 'Beamer', secondRow: 'auch Text'},
        { id: 'alias.0.NSPanel_1.Kippfenster', useValue: true }
    ]
};

CardGrid2 - 8 statt 6 PageItems

let Sensor_FontSize: PageType =
{
    'type': 'cardGrid2',
    'heading': 'Sensorwerte und FontSize',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.TestTemperatur', name: 'Außentemp. °C', offColor: MSRed, onColor: MSGreen, useValue: true, fontSize: 0, colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 20} },
        { id: 'alias.0.NSPanel_1.TestFeuchtigkeit', name: 'Luftfeuchte %', offColor: MSYellow, onColor: MSYellow , useValue: true, fontSize: 1, colorScale: {'val_min': 0, 'val_max': 100, 'val_best': 65} },
        { id: 'alias.0.NSPanel_1.Taupunkt', name: 'Taupunkt °C', offColor: MSRed, onColor: MSGreen, useValue: true, fontSize: 2, colorScale: {'val_min': -20, 'val_max': 40, 'val_best': 20} },
        { id: 'alias.0.NSPanel_1.UV_Index', name: 'UV Index', offColor: White , onColor: White, useValue: true, fontSize: 3,colorScale: {'val_min': 0, 'val_max': 12} },
        { id: 'alias.0.NSPanel_1.Windstaerke', name: 'Windstärke bft', offColor: White , onColor: White, useValue: true, fontSize: 4, colorScale: {'val_min': 0, 'val_max': 9} },
        { id: 'alias.0.NSPanel_1.Luftdruck', name: 'Luftdruck hPa', offColor: White , onColor: White, useValue: true, colorScale: {'val_min': 950, 'val_max': 1050, 'val_best': 1013} },
    ]
};

CardGrid - Radiosender / Timer

popupTimer
Nextion_Editor_DyyGoz044r

let Radiosender: PageType =
{
    'type': 'cardGrid',
    'heading': 'Büro 2',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.Radio.Bob', icon: 'radio', name: 'Radio BOB', onColor: colorRadio},
        { id: 'alias.0.NSPanel_1.Countdown', icon: 'timer-outline', name: 'Timer', onColor: White}
    ]
};

CardGrid - WLED

let WLED: PageType =
{
    'type': 'cardGrid',
    'heading': 'WLED Stripes WZ',
    'useColor': true,
    'items': [
        { id: 'alias.0.NSPanel_1.WLED.Example.On', name: 'Power', icon: 'power', onColor: HMIOn, offColor: HMIOff},
        { id: 'alias.0.NSPanel_1.WLED.Example.Sync', name: 'Sync', icon: 'sync', onColor: HMIOn, offColor: White},
        { id: 'alias.0.NSPanel_1.WLED.Example.Presets', icon: 'heart-outline', name: 'Presets', onColor: White, modeList: ['Preset 0', 'Add Preset']},
        { id: 'alias.0.NSPanel_1.WLED.Example.Colors', icon: 'palette', name: 'Colors', onColor: White, 
                    modeList: ['Default', '* Color 1', '* Color Gradient', '* Colors 1&2', '* Colors Only', '* Random Cycle', 'Analogus','April Night', 'Aqua Flash', 'Atlantica', 'Aurora', 
                               'Beach', 'Beech', 'Blink Red', 'Breeze', 'C9', 'C9 New', 'Candy', 'Candy2', 'Cloud', 
                               'Cyane', 'Departure', 'Drywet', 'Fairy Reaf', 'Fire', 'Forest', 'etc'
                              ]},
        { id: 'alias.0.NSPanel_1.WLED.Example.Effects', icon: 'emoticon-outline', name: 'Effects', onColor: White, 
                    modeList: ['Solid', 'Android', 'Aurora', 'Blends', 'Blink', 'Blink Rainbow', 'Bouncing Balls','Bpm', 'Breathe', 'Candle', 'Candle Multi', 
                               'Candy Cane', 'Chase', 'Chase 1', 'Chase 2', 'Chase 3', 'Chase Flash', 'Chase Flash Rnd', 'Chase Rainbow', 'Chase Random', 
                               'Chunchun', 'Colorful', 'Colorloop', 'Colortwinkles', 'Colorwaves', 'Dancing Shadows', 'etc'
                              ]},
        { id: 'alias.0.NSPanel_1.WLED.Example.Segments', icon: 'layers', name: 'Segments', onColor: White, modeList: ['Segment 0', 'Add Segment']},
    ]
};

PageMedia

CardMedia - Alexa

Button-Menü:

SpeakerList:

PlayList:

Equalizer:

let Alexa: PageType = 
{
    'type': 'cardMedia',
    'heading': 'Alexa',
    'items': [{   
                id: AliasPath + 'Media.PlayerAlexa', 
                adapterPlayerInstance: 'alexa2.0.',
                mediaDevice: 'G0XXXXXXXXXXXXXX', 
                speakerList: ['Überall','Gartenhaus','Esszimmer','Heimkino','Echo Dot Küche','Echo Spot Buero'],
                //analog alexa2 Music-Provider
                playList: ['Spotify-Playlist.PartyPlaylist',
                           '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
             }]
};

CardMedia - Sonos

Nextion_Editor_OU5vhqrVgr

Der komplette Leitfaden für den Sonos-Player ist hier: https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-%E2%80%90-cardMedia-%E2%80%90-Der-SONOS-Player

let Sonos: PageType =
{
    'type': 'cardMedia',
    'heading': 'Sonos Player',
    'items': [{   
                id: AliasPath + 'Media.PlayerSonos', 
                adapterPlayerInstance: 'sonos.0.',
                mediaDevice: '192_168_1_212',
                speakerList: ['Terrasse'],
                colorMediaIcon: colorSpotify,
                colorMediaArtist: Yellow,
                colorMediaTitle: Yellow,
                //crossfade: true,             /* Ersetzt die Seek Funktion durch Crossfade 
                                                  im Logo wenn "//" entfernt wird */
                alwaysOnDisplay: true,
                autoCreateALias: true
             }]
};

CardMedia - Spotify-Premium

Button-Menü

SpeakerList

PlayList

TrackList

Equalizer

let SpotifyPremium: PageType =
{
    'type': 'cardMedia',
    'heading': 'Spotify-Premium',
    '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'],
                playList: ['PartyPlaylist','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
             }]
};

CardMedia - SqueezeboxRPC

let SqueezeboxRPC: PageType =
{
    'type': 'cardMedia',
    'heading': 'SqueezeboxRPC',
    'items': [{ 
                id: AliasPath + 'Media.PlayerSqueezeboxRPC', 
                adapterPlayerInstance: 'squeezeboxrpc.0.',
                speakerList: ['SqueezePlay'],
                mediaDevice: 'SqueezePlay',
                playList: ['Playlist'],
                colorMediaIcon: Green,
                colorMediaArtist: Yellow,
                colorMediaTitle: Yellow,
                alwaysOnDisplay: true,
                autoCreateALias : true
             }]
};

CardMedia - Volumio

let Volumio: PageType = 
{
    'type': 'cardMedia',
    'heading': 'Volumio-Player',
    'items': [{   
                id: AliasPath + 'Media.PlayerVolumio', 
                adapterPlayerInstance: 'volumio.0.',
                speakerList: ['Volumio'], /* this must, no function */
                playList: [],    /* empty for dynamic reading */
                colorMediaIcon: colorVolumio,
                colorMediaTitle: Yellow,
                colorMediaArtist: Yellow,
                alwaysOnDisplay: true,
                autoCreateALias: true
             }]
};

PageThermo

CardThermo - Thermostat

let Buero_Themostat: PageType =
{
    'type': 'cardThermo',
    'heading': 'Test Thermostat',
    'items': [{ 
                id: 'alias.0.NSPanel_1.Thermostat_Buero', 
                minValue: 50, 
                maxValue: 300,
                stepValue: 5
             }]
};

CardThermo - Klimaanlage

oder

popupThermo:

let Buero_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: ['MODE1','MODE2','MODE3'],
                //setThermoDestTemp2: 'ACTUAL2'
             }]
};

CardThermo - Wärmepumpe

let Pool_Waermepumpe: PageType =
{
    'type': 'cardThermo',
    'heading': 'Pool Wärmepumpe',
    'items': [{   
                id: 'alias.0.NSPanel_1.Pool_Waermepumpe', 
                minValue: 100, 
                maxValue: 300,
                stepValue: 5,
                iconArray: ['power-standby','alpha-a-circle-outline','snowflake','fire'],
                //iconArray: ['power-standby','air-conditioner','snowflake','fire','alpha-e-circle-outline','fan','water-percent','swap-vertical-bold'],
             }]
};

PageAlarm & PageUnlock

CardAlarm

let Buero_Alarm: PageType =
{
    'type': 'cardAlarm',
    'heading': 'Alarmanlage',
    'items': [{ id: 'alias.0.Alarm' }]
};

CardUnlock

ab Version 4.3.3.2 fester Bestandteil des Service-Menüs (Alias wird automatisch erstellt).

/* 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)
*/ 

//Level 0 (if service pages are used with cardUnlock)
let Unlock_Service: PageType =
{
    'type': 'cardUnlock',
    'heading': 'Service Pages',
    'items': [{ id: 'alias.0.NSPanel.Unlock',
                targetPage: 'NSPanel_Service_SubPage',
                autoCreateALias: true }
    ]
};

//Level_0 (if service pages are used with cardUnlock)
let NSPanel_Service_SubPage: PageType =
{
    'type': 'cardEntities',
    'heading': 'NSPanel Service',
    'useColor': true,
    'subPage': true,
    'parent': Unlock_Service,
    'home': 'Unlock_Service', 
    'items': [
        { navigate: true, id: 'NSPanel_Infos', icon: 'information-outline', offColor: Menu, onColor: Menu, name: 'Infos', buttonText: 'mehr...'},
        { navigate: true, id: 'NSPanel_Einstellungen', icon: 'monitor-edit', offColor: Menu, onColor: Menu, name: 'Einstellungen', buttonText: 'mehr...'},
        { navigate: true, id: 'NSPanel_Firmware', icon: 'update', offColor: Menu, onColor: Menu, name: 'Firmware', buttonText: 'mehr...'},
        { id: AliasPath + 'Config.rebootNSPanel', name: 'Reboot NSPanel' ,icon: 'refresh', offColor: MSRed, onColor: MSGreen, buttonText: 'Start'},
    ]
};

Analog der page Unlock_Service können bei Bedarf weitere Unlock-Seiten: Unlock_PageXYZ erstellt werden.

Die Standard PIN wird durch das TS-Script angelegt und lautet "0000". Sie kann unter 0_userdata.0. geändert werden:

siehe auch: https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardunlock-ab-v433

PageChart & Power

CardChart

let CardChartExample: PageType =
{
    'type': 'cardChart',
    'heading': 'Stromzähler L1+L2+L3',
    'items': [{ 
                id: 'alias.0.NSPanel_1.cardChart', 
                yAxis: 'Leistung [kW]', 
                yAxisTicks: [2,4,6,8,10,2,4,6,8,20,2], 
                onColor: Yellow
             }]
};

CardLChart

let CardLChartExample: PageType =
{
    'type': 'cardLChart',
    'heading': 'Büro Temperatur',
    'items': [{ 
                id: 'alias.0.Haus.Erdgeschoss.Buero.Charts.Temperatur',
                yAxis: 'Temperatur [°C]',
                yAxisTicks: [-250, -200, -150, -100,-50, 0, 50, 100, 150, 200, 250, 300],
                onColor: Yellow
             }]
};

CardPower

Nextion_Editor_9AYbpowjZS

Seiten-Variable für die cardPower:

let CardPower: PageType =
{
    'type': 'cardPower',
    'heading': 'Energiefluss',
    'items': [
        { id: 'alias.0.NSPanel.cardPower',
          alwaysOnDisplay: true }
     ]
};

cardPower im Demomodus

let CardPowerExample: PageType =
{
    'type': 'cardPower',
    'heading': 'cardPower Emulator',
    'items': [
         {  } 
     ]
};

PageQR

CardQR

let WLAN: PageType =
{
     'type': 'cardQR',
     'heading': 'Gäste WLAN',
     'items': [{ id: 'alias.0.NSPanel_1.Guest_Wifi', 
                           hidePassword: false, 
                           autoCreateALias: true }]
};