From 0340160839dba66b6cf0c3f04537661debf437f5 Mon Sep 17 00:00:00 2001
From: tt-tom17 <tgb@kabelmail.de>
Date: Sun, 5 Jan 2025 22:19:55 +0100
Subject: [PATCH] new site ioBroker-Grndlagen-Seitenconfig.md

---
 ioBroker-Grndlagen-Seitenconfig.md | 75 ++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 ioBroker-Grndlagen-Seitenconfig.md

diff --git a/ioBroker-Grndlagen-Seitenconfig.md b/ioBroker-Grndlagen-Seitenconfig.md
new file mode 100644
index 0000000..0a5bad5
--- /dev/null
+++ b/ioBroker-Grndlagen-Seitenconfig.md
@@ -0,0 +1,75 @@
+# 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:  
+```typescript  
+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,
+```typescript
+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.  
+  
+## 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**.  
+```typescript  
+{ 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.  
+  
+das Script speichern und neu starten, jetzt sollte auf der Seite das erste Symbol / pageItem zu sehen sein. 
+  
+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]  
+> * `name` ist kein muss, wenn der Alias richtig konfiguriert ist. Dann wird der Name aus dem `common.name.de` gezogen.  
\ No newline at end of file