ioBroker Grndlagen Seitenconfig

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.
Mehr dazu im Detailwissen zu den Spezialseiten.

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.

Weitere Seitentypen und ihre Spezifikationen findet ihr hier.

Seiten-Konfiguration:

Basisseite

Der Rahmen einer Seite besteht aus einem Frame wie folgend:

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

let NameDerSeite: -> Das Wort NameDerSeite 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).
'type': -> Der Typ der Seite hängt vom CardType. Folglich haben wir hier 'cardEntities' oder 'cardGrid', etc.
'heading': -> Die Überschrift wird auf der Seite oben in der Mitte dargestellt. Sie 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 Page/Card Type festgelegt, der Seite einen Namen und eine Überschrift definiert ist, kann der erste Test durchgeführt werden.
Als Zwischen-Test kann man den definierten NameDerSeite im Skript unter pages hinzufügen,

export const config: Config = {
    // Seiteneinteilung / Page division
    // Hauptseiten / Mainpages
    pages: [
      NameDerSeite, // hinter dem Doppelslash kannst Du noch eine interne Info eintragen
      NSPanel_Service, //Auto-Alias Service Page
    ],
    // Unterseiten / Subpages
    subPages: [
// hier findet ihr die Serviceseiten wieder
    ]

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. Die Seite muss dann / nur im Bereich subPages eingetragen werden.
'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.

let NameDerSeite: PageType =
{
    'type': 'cardType',
    'heading': 'Seiten Überschrift',
    'useColor': true,
    'subpage': true,
    'parent': NameDerHauptseite,
    'hiddenByTrigger': true,
    'items': []
};

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 mit {}, declariert. Innerhalb der geschweiften Klammern folgt die weitere Konfiguration:

Mindestangaben:

id : Pfad zum Alias, der verwendet wird, in Hochkomma eingefasst. Es wird immer nur der Pfad zum Channel angegeben. Die Datenpunkte ermittelt das Script an Hand der Channel Rolle selber. Mehr dazu in den ALIAS Beschreibungen.
name : Text der als Label auf dem Display zu einem PageItem dargestellt wird, in Hochkomma eingefasst.

Um das erste Symbol auf der seite zu sehen, muss erst ein Alias dafür erstellt werden. Dieses Thema wird im Kapitel Aliase erstellen ausführlich erklärt.

Damit haben wir die Grundlagen der Seiten gestalltung beendet. Alle weiteren Details wie Alias - Erstellung, Spezailseiten und Parameter für pageItems, sowie die Navigation durch die Seiten findet ihr im Detailwissen.

Important