adminandClaude Opus 5
865dd61535
Neue Seite "Einfuehrung" im Menue: 31 Folien in zwei Teilen - Bedienen im Alltag (Grundriss, Raum, Rollos, Heizung, Licht, Zeitleiste, Solar, Auto, Heizstab und Wasser, Statistik, Historie, Heizung, Wetter, Fahrzeug, Hilfe) und Einrichten und Verwalten (Preise, Grundriss, Kacheln, Geraete, Automatik anlegen in Wenn/Wann/Dann, Ketten, Fahrzeugschluessel, Protokolle). - Bilder sind echte Aufnahmen der Oberflaeche mit Livewerten, Handy- und Desktopgroesse. tools/einfuehrung/aufnehmen.ps1 steuert Edge ohne Fenster ueber das DevTools-Protokoll nach plan.json und schreibt zu jedem Bild die Lage der markierten Elemente; daraus sitzen die nummerierten Punkte. Wetterort und Schluesselendungen werden vor der Aufnahme abgedeckt. - Blaettern per Knopf, Pfeiltaste oder Wischen; Kapitelsprung; die Folie steht in der Adresse (#folie-7). Erklaerung und Punkt heben sich gegenseitig hervor. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
453 lines
27 KiB
PHP
453 lines
27 KiB
PHP
<?php
|
||
/**
|
||
* Einführung: der Smart Controller für Einsteiger, als Folien.
|
||
*
|
||
* Zwei Teile - "Bedienen im Alltag" für alle im Haus, "Einrichten und
|
||
* Verwalten" für die, die Räume, Geräte und Automatiken pflegen.
|
||
*
|
||
* Die Bilder sind echte Aufnahmen dieser Oberfläche und liegen unter
|
||
* assets/img/einfuehrung. Neu erzeugt werden sie mit
|
||
* tools/einfuehrung/aufnehmen.ps1 (Edge ohne Fenster, Plan in plan.json).
|
||
* Zu jedem Bild schreibt das Skript eine .json mit der Lage der markierten
|
||
* Elemente; daraus sitzen die nummerierten Punkte hier. Ändert sich die
|
||
* Oberfläche, genügt ein neuer Lauf - die Nummern wandern mit.
|
||
*
|
||
* Eine Folie:
|
||
* teil, kapitel Gliederung für Kopfzeile und Sprungliste
|
||
* titel, text Überschrift und Einleitung (HTML erlaubt)
|
||
* bild, form Datei in assets/img/einfuehrung, "handy" oder "breit"
|
||
* marken Nummer => Erklärung; die Lage kommt aus <bild>.json
|
||
* lage Nummer => [x, y] in Prozent, wo die .json nichts taugt
|
||
* punkte Aufzählung ohne Bildbezug
|
||
* tipp ein Satz zum Mitnehmen
|
||
*/
|
||
|
||
function einfuehrungFolien()
|
||
{
|
||
return [
|
||
// ================================================= Teil 1: Bedienen
|
||
["teil" => 1, "kapitel" => "Willkommen", "titel" => "Dein Haus auf einen Blick",
|
||
"text" => "Der Smart Controller zeigt, was im Haus passiert, und lässt dich vieles davon bedienen – vom Handy, Tablet oder Computer.",
|
||
"punkte" => [
|
||
"<b>Sehen</b>, wie viel Strom die Sonne gerade liefert und wohin er fließt.",
|
||
"<b>Bedienen</b>: Rollos, Licht, Heizung und das Laden des Autos.",
|
||
"<b>Automatiken</b> erledigen Wiederkehrendes von selbst – Rollos am Morgen, Hitzeschutz, Bewässerung.",
|
||
],
|
||
"tipp" => "Mit den Pfeilen unten oder durch Wischen blätterst du weiter. Oben kannst du direkt zu einem Kapitel springen."],
|
||
|
||
["teil" => 1, "kapitel" => "Erste Schritte", "titel" => "So findest du dich zurecht",
|
||
"text" => "Zu Hause im WLAN öffnet sich die Seite ohne Anmeldung. Von unterwegs meldest du dich mit einem <b>Passkey</b> an – das ist dein Fingerabdruck oder dein Gesicht am Handy, kein Passwort.",
|
||
"bild" => "menue.jpg", "form" => "handy",
|
||
"marken" => [
|
||
4 => "Das <b>Menü</b> öffnest du mit den drei Strichen oben links.",
|
||
1 => "<b>Solar</b>: Strom, Speicher, Heizung und Auto im Überblick.",
|
||
2 => "<b>Home</b>: dein Grundriss – hier bedienst du die Räume. Darunter die Etagen.",
|
||
3 => "<b>Einstellungen</b>: für die, die das System pflegen (Teil 2).",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Die Startseite: dein Grundriss",
|
||
"text" => "Unter <b>Home</b> siehst du jede Etage als Bild. Die kleinen Kacheln stehen in den Räumen und zeigen, was dort gerade los ist.",
|
||
"bild" => "home.jpg", "form" => "handy",
|
||
"marken" => [
|
||
1 => "Die <b>Kreise links</b> wechseln die Etage.",
|
||
2 => "Eine <b>Kachel</b> zeigt groß die Raumtemperatur, klein darüber die gewünschte, darunter die Luftfeuchte. Eine kleine Flamme heißt: die Heizung läuft.",
|
||
3 => "<b>Tippe auf eine Kachel</b>, um den Raum zu öffnen.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Rollos und Jalousien",
|
||
"text" => "Im geöffneten Raum liegt alles, was dort bedienbar ist – nach Art sortiert in Reitern.",
|
||
"bild" => "raum_beschattung.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "Die <b>Reiter</b>: Beschattung, Heizung, Licht – je nachdem, was im Raum hängt.",
|
||
2 => "<b>Hoch, Stopp, Runter</b>: fährt ganz auf oder zu.",
|
||
3 => "Mit den <b>Reglern</b> stellst du eine Höhe ein, bei Jalousien auch die Neigung der Lamellen. Losgelassen fährt sie hin.",
|
||
],
|
||
"tipp" => "Das Bild neben den Knöpfen zeigt, wie die Jalousie gerade steht – während der Fahrt bewegt es sich mit."],
|
||
|
||
["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Die Heizung eines Raums",
|
||
"text" => "Im Reiter <b>Heizung</b> stellst du ein, wie warm es werden soll.",
|
||
"bild" => "raum_heizung.jpg", "form" => "handy",
|
||
"marken" => [
|
||
1 => "Den <b>Regler</b> ziehen – beim Loslassen geht die neue Solltemperatur an das Thermostat.",
|
||
2 => "Darunter die <b>gemessene Temperatur</b> und Luftfeuchte im Raum.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Licht",
|
||
"text" => "Lampen schaltest du im Reiter <b>Licht</b> ein und aus. Dimmbare Lampen haben einen Helligkeitsregler, farbige zusätzlich Farbe und Effekt.",
|
||
"bild" => "raum_licht.jpg", "form" => "handy",
|
||
"marken" => [
|
||
1 => "Jede Lampe hat ihre eigene Karte: <b>Schalter</b>, <b>Farbe</b>, <b>Helligkeit</b> und <b>Effekt</b>.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Automatiken", "titel" => "Der Tag auf einen Blick",
|
||
"text" => "Unter dem Grundriss stehen die <b>Automatismen</b>. Jede Zeile ist eine Art Gerät – Licht, Beschattung, Bewässerung – und von links nach rechts läuft der Tag.",
|
||
"bild" => "zeitleiste.jpg", "form" => "handy",
|
||
"marken" => [
|
||
1 => "Mit den <b>Pfeilen</b> schaust du dir andere Tage an – etwa, was am Wochenende passiert.",
|
||
2 => "<b>Etagen</b> ein- und ausblenden.",
|
||
3 => "Hier steht, dass <b>alle</b> Automatiken angezeigt werden – keine geht verloren.",
|
||
4 => "Die gelbe Linie ist <b>jetzt</b>.",
|
||
5 => "Ein <b>Haken</b> heißt: heute schon gelaufen, mit Uhrzeit.",
|
||
],
|
||
"punkte" => [
|
||
"<b>Punkt</b>: passiert zu einer festen Uhrzeit.",
|
||
"<b>Balken</b>: darf in diesem Zeitraum passieren, sobald eine Bedingung erfüllt ist – zum Beispiel starke Sonne.",
|
||
"<b>Gestrichelte Linie</b>: die untere Automatik startet nach der oberen.",
|
||
"<b>Kalender-Symbol</b>: an diesem Tag nicht dran, etwa am Wochenende.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Automatiken", "titel" => "Eine Automatik antippen",
|
||
"text" => "Ein Tipp auf einen Eintrag öffnet eine kleine Karte: was die Automatik tut, wann, und wie sie heute steht.",
|
||
"bild" => "zeitleiste_karte.jpg", "form" => "handy",
|
||
"marken" => [
|
||
1 => "Der <b>Stand</b> von heute – gelaufen, kommt noch, oder warum nicht.",
|
||
2 => "<b>Bearbeiten</b> öffnet alle Einstellungen (Teil 2).",
|
||
3 => "<b>Pausieren</b> hält die Automatik an, bis du sie wieder <b>fortsetzt</b>. Pausierte stehen ganz unten.",
|
||
4 => "<b>Löschen</b> fragt vorher nach.",
|
||
],
|
||
"tipp" => "Pausieren ist fast immer besser als Löschen – zum Beispiel für den Urlaub."],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Wohin fließt der Strom?",
|
||
"text" => "Die Seite <b>Solar</b> zeigt den Strom im Haus als Bild. Die Linien zwischen den Kreisen werden dicker, je mehr Strom fließt.",
|
||
"bild" => "solar_fluss.jpg", "form" => "breit",
|
||
"lage" => [1 => [31.6, 32.3], 2 => [27.7, 52.2], 3 => [31.4, 72.1], 4 => [43.9, 52.2], 5 => [59.9, 52.2],
|
||
6 => [76.9, 52.2], 7 => [81.6, 75], 8 => [81.6, 27.6], 9 => [67.1, 27.2], 10 => [67.3, 75],
|
||
11 => [51.7, 75], 12 => [48.8, 27.6]],
|
||
"marken" => [
|
||
1 => "<b>Sonne</b>: was die Solaranlage gerade liefert.",
|
||
2 => "<b>Stromnetz</b>: minus heißt, wir speisen ein; plus heißt, wir kaufen zu.",
|
||
3 => "<b>Hausbatterie</b>: lädt oder entlädt, darunter der Ladestand.",
|
||
4 => "<b>Wechselrichter</b>: Autarkie sagt, wie viel des Stroms gerade selbst erzeugt ist.",
|
||
5 => "<b>Verbrauch</b> im ganzen Haus.",
|
||
6 => "<b>Heizstab</b> im Wasserspeicher – nutzt Sonnenstrom zum Heizen.",
|
||
7 => "<b>Wallbox EG</b> mit Ladestand des Autos.",
|
||
8 => "<b>Wallbox OG</b>.",
|
||
9 => "Verbrauch <b>Obergeschoss</b>.",
|
||
10 => "Verbrauch <b>Erdgeschoss</b>.",
|
||
11 => "Verbrauch <b>Untergeschoss</b>.",
|
||
12 => "<b>Wasser</b>: Zisterne und Gartenbewässerung.",
|
||
],
|
||
"tipp" => "Auf die Symbole von Auto, Heizstab und Wasser kannst du tippen – dann öffnet sich ihre Steuerung."],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Das Auto laden",
|
||
"text" => "Ein Tipp auf das Auto-Symbol öffnet die <b>Wallbox</b>.",
|
||
"bild" => "wallbox.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"<b>Laden starten</b> bzw. stoppen.",
|
||
"<b>Immer laden</b>: lädt sofort, notfalls mit Strom aus dem Netz.",
|
||
"<b>Überschuss</b>: lädt nur mit Sonnenstrom, der sonst eingespeist würde.",
|
||
"<b>Ladeplanung</b>: sag, wie viel Prozent bis wann nötig sind – das System verteilt die Ladung möglichst in die Sonnenstunden.",
|
||
"<b>Max. Ladestrom</b> begrenzt, wie schnell geladen wird.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Heizstab und Gartenwasser",
|
||
"text" => "Auch Heizstab und Wasser haben eigene Steuerungen, erreichbar über ihre Symbole auf der Solarseite.",
|
||
"bild" => "bewaesserung.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"<b>Heizstab</b>: Automatik heißt, er heizt mit Überschuss; von Hand lässt sich eine Leistung vorgeben.",
|
||
"<b>Bewässerung</b>: jede Zone mit Minuten und einem Knopf zum Starten. Darunter steht, wann zuletzt gegossen wurde.",
|
||
"Die Bewässerung am Morgen läuft ohnehin automatisch – sie lässt aus, wenn es geregnet hat.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Ertrag und Kosten dieses Jahr",
|
||
"text" => "Weiter unten auf der Solarseite rechnet die <b>Statistik</b> zusammen, was die Anlage bisher gebracht hat.",
|
||
"bild" => "solar_statistik.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"<b>Ertrag der Anlage</b>: gesparte Stromkosten plus Einspeisevergütung.",
|
||
"<b>Netzkosten</b>: was trotzdem an Strom gekauft wurde.",
|
||
"<b>Autarkie</b>: wie viel des Verbrauchs selbst erzeugt war.",
|
||
"Die kleinen Pfeile vergleichen mit demselben Zeitraum im Vorjahr.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Der Tagesverlauf",
|
||
"text" => "Ganz unten auf der Solarseite zeigen zwei Diagramme den heutigen Tag: <b>Verbrauch</b> und <b>Erzeugung</b>.",
|
||
"bild" => "solar_verlauf.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"Die Farben stehen für die einzelnen Verbraucher bzw. Quellen – die Legende steht darunter.",
|
||
"Mit den Knöpfen oben am Diagramm blätterst du zu anderen Tagen.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Historie: Monate und Jahre",
|
||
"text" => "Die Seite <b>Historie</b> zeigt Verbrauch und Erzeugung über längere Zeiträume – den letzten Monat, die letzten 13 Monate, mehrere Jahre.",
|
||
"bild" => "historie.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"Mit der Lupe vergrößerst du einen Ausschnitt.",
|
||
"Weiter unten steht der <b>Jahresvergleich</b>: dieselben Kennzahlen Jahr neben Jahr.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Energie", "titel" => "Jahre vergleichen",
|
||
"text" => "Der <b>Jahresvergleich</b> stellt Ertrag, Netzkosten und Autarkie der Jahre nebeneinander.",
|
||
"bild" => "jahresvergleich.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"<b>Gleicher Zeitraum</b> vergleicht bis zum heutigen Datum – fair, auch mitten im Jahr.",
|
||
"<b>Ganze Jahre</b> vergleicht abgeschlossene Jahre.",
|
||
"Mit <b>Monatsverlauf zeigen</b> siehst du kleine Kurven je Monat.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Haus und Wetter", "titel" => "Heizung und Warmwasser",
|
||
"text" => "Die Seite <b>Heizung</b> zeigt den Wasserspeicher mit seinen Temperaturen oben, in der Mitte und unten, darunter den Verlauf.",
|
||
"bild" => "heizung.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"Oben heiß, unten kühler – das ist normal und gewollt.",
|
||
"Weiter unten steht auch der <b>Wasserverbrauch</b>.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Haus und Wetter", "titel" => "Wetter",
|
||
"text" => "Die Seite <b>Wetter</b> zeigt die Werte der eigenen Wetterstation und die Vorhersage für die nächsten Tage.",
|
||
"bild" => "wetter.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"Oben: Temperatur, Feuchte, Wind, Böen und Luftdruck – gemessen direkt am Haus.",
|
||
"Darunter die Vorhersage mit Temperatur, Regen und Wind.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Das Auto", "titel" => "Das Auto",
|
||
"text" => "Die Seite <b>Škoda</b> zeigt den Zustand des Autos: Ladestand, Reichweite, ob es verriegelt und angesteckt ist.",
|
||
"bild" => "skoda.jpg", "form" => "handy",
|
||
"punkte" => [
|
||
"Tippe auf den <b>Ladeanschluss</b>, um das Laden zu starten oder zu stoppen.",
|
||
"Tippe auf den <b>Innenraum</b>, um die Klimatisierung zu starten.",
|
||
"Der Stand oben sagt, wie aktuell die Werte sind – das Auto meldet sich nicht ständig.",
|
||
]],
|
||
|
||
["teil" => 1, "kapitel" => "Das Auto", "titel" => "Ladungen und Akku",
|
||
"text" => "Weiter unten stehen die letzten <b>Ladungen</b> mit Menge und Ladestand vorher und nachher, und wie gesund der Akku ist.",
|
||
"bild" => "skoda_ladungen.jpg", "form" => "handy"],
|
||
|
||
["teil" => 1, "kapitel" => "Hilfe", "titel" => "Wenn etwas nicht klappt",
|
||
"punkte" => [
|
||
"<b>Striche statt Zahlen</b>: Die Werte kommen gleich – kurz warten oder die Seite neu laden. Bleibt es so, meldet das Gerät gerade nichts.",
|
||
"<b>Rollo reagiert nicht</b>: Einmal Stopp drücken und erneut versuchen. Bei Frost fahren Jalousien absichtlich nicht.",
|
||
"<b>Automatik lief nicht</b>: Eintrag antippen – der Stand sagt, ob sie heute dran war oder auf eine Bedingung wartet.",
|
||
"<b>Etwas ist ganz falsch eingestellt</b>: Automatik lieber pausieren als löschen und Bescheid geben.",
|
||
],
|
||
"tipp" => "Du kannst nichts kaputtmachen: jede Automatik lässt sich pausieren, jedes Gerät auch von Hand bedienen."],
|
||
|
||
// ============================================== Teil 2: Einrichten
|
||
["teil" => 2, "kapitel" => "Einstellungen", "titel" => "Einrichten und Verwalten",
|
||
"text" => "Dieser Teil ist für die, die das System pflegen: Preise, Grundriss, Kacheln, Geräte und Automatiken. Alles davon geht ohne Programmieren, unter <b>Einstellungen</b>.",
|
||
"bild" => "einst_preise.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "Die <b>Reiter</b>: Preise, Grundriss, Home-Kacheln, Geräte, Fahrzeug.",
|
||
2 => "<b>Preise</b>: trage bei einem neuen Stromvertrag einen neuen Zeitraum ein – die alten bleiben für die Statistik stehen.",
|
||
3 => "<b>Speichern</b> nicht vergessen.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Grundriss", "titel" => "Etagen und Räume",
|
||
"text" => "Im Reiter <b>Grundriss</b> legst du fest, welche Etagen es gibt, welches Bild sie zeigen und wo die Kacheln der Räume sitzen.",
|
||
"bild" => "einst_grundriss.jpg", "form" => "breit",
|
||
"lage" => [3 => [91, 42.5]],
|
||
"marken" => [
|
||
1 => "<b>Etage wählen</b> oder mit „+ Etage“ eine neue anlegen.",
|
||
2 => "<b>Kacheln ziehen</b>, um sie zu verschieben. Ein Tipp wählt den Raum.",
|
||
3 => "Ein <b>Grundrissbild</b> hochladen – ein Foto oder eine Zeichnung der Etage.",
|
||
4 => "<b>Neuen Raum</b> anlegen. Einem Raum ohne Kachel gibst du mit „Platzieren“ und einem Klick auf den Plan einen Platz.",
|
||
],
|
||
"tipp" => "Den Thermostat-Zweig eines Raums schlägt die Liste vor – er sorgt für Heizsymbol und Temperaturregler."],
|
||
|
||
["teil" => 2, "kapitel" => "Grundriss", "titel" => "Was auf einer Kachel steht",
|
||
"text" => "Im Reiter <b>Home-Kacheln</b> wählst du bis zu drei Werte je Kachel.",
|
||
"bild" => "einst_kacheln.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "Eine <b>Kachel aufklappen</b>.",
|
||
2 => "Für jeden Wert: <b>Gerät und Messwert</b> wählen, dazu Einheit, Symbol und ob er groß stehen soll.",
|
||
3 => "<b>Wert hinzufügen</b> – höchstens drei.",
|
||
4 => "<b>Speichern</b>. „Standard“ nimmt deine Auswahl wieder zurück.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Geräte", "titel" => "Geräte den Räumen zuordnen",
|
||
"text" => "Neue Geräte findet der Suchlauf von selbst. In welchem Raum sie hängen, legst du im Reiter <b>Geräte</b> fest – danach erscheinen sie im Raum.",
|
||
"bild" => "einst_geraete.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "<b>Suchen</b> nach Name, Art oder Raum.",
|
||
2 => "Den <b>Raum</b> wählen – gespeichert wird sofort.",
|
||
3 => "Ein abgebautes Gerät <b>entfernen</b>. Steckt es noch in einer Automatik, geht das nicht.",
|
||
],
|
||
"tipp" => "Thermostate verraten ihren Raum selbst – oben erscheint dann „Vorschläge übernehmen“."],
|
||
|
||
["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 1. Wenn",
|
||
"text" => "Eine neue Automatik legst du mit dem grünen <b>+</b> bei den Automatismen an, eine vorhandene mit „Bearbeiten“. Sie besteht aus drei Teilen: <b>Wenn</b>, <b>Wann</b>, <b>Dann</b>.",
|
||
"bild" => "editor_wenn.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "Ein <b>Name</b>, an dem du sie wiedererkennst.",
|
||
2 => "<b>Wenn</b>: die Bedingungen. Alle in einem Kasten müssen zutreffen – eine Uhrzeit, ein Sonnenstand, ein Messwert wie Helligkeit oder Temperatur.",
|
||
3 => "Hier siehst du, <b>wie viele gerade zutreffen</b>; neben jeder Bedingung steht der aktuelle Wert.",
|
||
4 => "<b>Oder stattdessen</b>: ein zweiter Kasten, der ebenfalls auslöst.",
|
||
],
|
||
"tipp" => "Ausgelöst wird in dem Moment, in dem die Bedingung erfüllt wird – nicht immer wieder, solange sie erfüllt bleibt."],
|
||
|
||
["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 2. Wann",
|
||
"text" => "<b>Wann</b> legt fest, an welchen Tagen und zu welchen Zeiten die Automatik überhaupt aktiv ist.",
|
||
"bild" => "editor_wann.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "<b>Vorlagen</b>: täglich, werktags (ohne Feiertage), Wochenende (mit Feiertagen).",
|
||
2 => "Oder die <b>Wochentage</b> einzeln wählen.",
|
||
3 => "<b>Ferien und Feiertage</b>: nie, egal oder immer.",
|
||
4 => "<b>Am Vorabend</b>: die Tage gelten für morgen – „Kinderrollos zu, wenn morgen Schule ist“.",
|
||
5 => "Dieser <b>Satz</b> fasst zusammen, was dabei herauskommt.",
|
||
],
|
||
"punkte" => [
|
||
"<b>Nur einmal am Tag</b>: danach ist bis Mitternacht Ruhe – gut für Rollos, die du danach von Hand verstellst.",
|
||
"<b>Sperre</b>: Mindestabstand zwischen zwei Auslösungen, gegen Hin und Her bei wechselnder Sonne.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 3. Dann",
|
||
"text" => "<b>Dann</b> sagt, was passieren soll.",
|
||
"bild" => "editor_dann.jpg", "form" => "breit",
|
||
"marken" => [
|
||
1 => "Je Zeile ein <b>Gerät und ein Befehl</b>, etwa „Wohnzimmer Fensterfront: Auf“ oder eine Position mit Neigung.",
|
||
2 => "<b>Und noch etwas tun</b>: weitere Geräte in derselben Automatik.",
|
||
3 => "<b>Speichern</b> – danach steht die Automatik in der Zeitleiste.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Automatiken hintereinander",
|
||
"text" => "Eine Automatik kann eine andere starten. Wähle dazu im <b>Wenn</b> das Gerät <b>„Automatiken“</b> und darin die auslösende.",
|
||
"punkte" => [
|
||
"Beispiel: <b>Wecker</b> um 05:50 → <b>10 Minuten danach</b>, wenn es hell ist, gehen die Rollos auf.",
|
||
"In der Zeitleiste verbindet eine <b>gestrichelte Linie</b> die beiden.",
|
||
"Wird die erste pausiert, bleibt auch die zweite still.",
|
||
"Beim Löschen der ersten wirst du gefragt, was mit der zweiten geschehen soll.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Fahrzeug und Protokolle", "titel" => "Zugang zum Auto",
|
||
"text" => "Das Auto wird über Schlüssel aus der <b>MyŠkoda-App</b> abgefragt. Sie laufen nach einiger Zeit ab und müssen dann erneuert werden – im Reiter <b>Fahrzeug</b>.",
|
||
"bild" => "einst_fahrzeug.jpg", "form" => "breit",
|
||
"punkte" => [
|
||
"Den neuen Schlüssel in der App erzeugen, hier einfügen, speichern – er wird sofort ausprobiert.",
|
||
"Aus Sicherheitsgründen zeigt die Seite nie einen ganzen Schlüssel.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Fahrzeug und Protokolle", "titel" => "Protokolle",
|
||
"text" => "Unter <b>Protokolle</b> stehen die Aufzeichnungen der Hintergrundprogramme – hilfreich, wenn etwas nicht so läuft wie erwartet.",
|
||
"bild" => "protokolle.jpg", "form" => "breit",
|
||
"punkte" => [
|
||
"Links das <b>Programm</b> wählen, zum Beispiel den Automatik-Runner.",
|
||
"Oben nach <b>Text</b> oder nur nach <b>Warnungen</b> filtern.",
|
||
"Gelb und rot markierte Zeilen sind Warnungen und Fehler.",
|
||
]],
|
||
|
||
["teil" => 2, "kapitel" => "Geschafft", "titel" => "Das Wichtigste in Kürze",
|
||
"punkte" => [
|
||
"<b>Home</b> → Kachel antippen → Raum bedienen.",
|
||
"<b>Automatismen</b>: Eintrag antippen → pausieren, fortsetzen, bearbeiten.",
|
||
"<b>Solar</b>: Stromfluss sehen, Auto, Heizstab und Wasser über ihre Symbole steuern.",
|
||
"<b>Einstellungen</b>: Grundriss, Kacheln, Geräte, Preise und Fahrzeug pflegen.",
|
||
],
|
||
"tipp" => "Diese Einführung findest du jederzeit im Menü unter „Einführung“."],
|
||
];
|
||
}
|
||
|
||
$folien = einfuehrungFolien();
|
||
$bildOrdner = __DIR__ . "/../assets/img/einfuehrung/";
|
||
foreach ($folien as $i => $f) {
|
||
if (empty($f["bild"]) || empty($f["marken"])) {
|
||
continue;
|
||
}
|
||
$lage = [];
|
||
$json = @file_get_contents($bildOrdner . pathinfo($f["bild"], PATHINFO_FILENAME) . ".json");
|
||
$gemessen = $json ? json_decode(ltrim($json, "\xEF\xBB\xBF"), true) : [];
|
||
foreach ($f["marken"] as $nr => $text) {
|
||
$p = $f["lage"][$nr] ?? null;
|
||
if (!$p && isset($gemessen[$nr]) && is_array($gemessen[$nr])) {
|
||
$x = $gemessen[$nr]["x"];
|
||
$y = $gemessen[$nr]["y"];
|
||
// Unsichtbare (0/0) oder ausserhalb des Bildes liegende Elemente
|
||
// bekommen keinen Punkt - die Erklärung steht trotzdem daneben.
|
||
if (($x > 0 || $y > 0) && $y >= 0 && $y <= 100 && $x >= 0 && $x <= 100) {
|
||
$p = [$x, $y];
|
||
}
|
||
}
|
||
$lage[$nr] = $p;
|
||
}
|
||
$folien[$i]["lage"] = $lage;
|
||
}
|
||
$kapitel = [];
|
||
foreach ($folien as $i => $f) {
|
||
if (!isset($kapitel[$f["teil"] . "|" . $f["kapitel"]])) {
|
||
$kapitel[$f["teil"] . "|" . $f["kapitel"]] = ["teil" => $f["teil"], "name" => $f["kapitel"], "folie" => $i];
|
||
}
|
||
}
|
||
$teile = [1 => "Bedienen im Alltag", 2 => "Einrichten und Verwalten"];
|
||
$version = @filemtime($bildOrdner . "home.jpg") ?: 1;
|
||
?>
|
||
<main class="app-main">
|
||
<div class="app-content-header">
|
||
<div class="container-fluid">
|
||
<h3 class="mb-0">Einführung</h3>
|
||
</div>
|
||
</div>
|
||
<div class="app-content">
|
||
<div class="container-fluid">
|
||
<div class="ef" id="einfuehrung" tabindex="-1">
|
||
<div class="ef-kopf">
|
||
<div class="ef-teile" role="tablist">
|
||
<?php foreach ($teile as $nr => $name): ?>
|
||
<button type="button" class="ef-teil" data-teil="<?= $nr ?>">
|
||
<span class="ef-teil-nr"><?= $nr ?></span><?= htmlspecialchars($name) ?></button>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<select class="form-select form-select-sm ef-kapitel" aria-label="Kapitel">
|
||
<?php foreach ($teile as $nr => $name): ?>
|
||
<optgroup label="Teil <?= $nr ?> · <?= htmlspecialchars($name) ?>">
|
||
<?php foreach ($kapitel as $k): if ($k["teil"] !== $nr) continue; ?>
|
||
<option value="<?= $k["folie"] ?>"><?= htmlspecialchars($k["name"]) ?></option>
|
||
<?php endforeach; ?>
|
||
</optgroup>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
<span class="ef-zaehler"></span>
|
||
</div>
|
||
<div class="ef-fortschritt"><span></span></div>
|
||
|
||
<div class="ef-buehne">
|
||
<?php foreach ($folien as $i => $f): $mitBild = !empty($f["bild"]); ?>
|
||
<section class="ef-folie<?= $mitBild ? " mit-bild form-" . htmlspecialchars($f["form"] ?? "breit") : " ohne-bild" ?>"
|
||
data-nr="<?= $i ?>" data-teil="<?= $f["teil"] ?>" hidden aria-roledescription="Folie">
|
||
<?php if ($mitBild): ?>
|
||
<figure class="ef-bild">
|
||
<div class="ef-rahmen">
|
||
<img src="assets/img/einfuehrung/<?= htmlspecialchars($f["bild"]) ?>?v=<?= $version ?>"
|
||
alt="<?= htmlspecialchars(strip_tags($f["titel"])) ?>" loading="<?= $i < 2 ? "eager" : "lazy" ?>">
|
||
<?php foreach ($f["lage"] ?? [] as $nr => $p): if (!$p) continue; ?>
|
||
<span class="ef-marke" data-marke="<?= $nr ?>" style="left:<?= $p[0] ?>%;top:<?= $p[1] ?>%"><?= $nr ?></span>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</figure>
|
||
<?php endif; ?>
|
||
<div class="ef-text">
|
||
<div class="ef-kapitelname">Teil <?= $f["teil"] ?> · <?= htmlspecialchars($f["kapitel"]) ?></div>
|
||
<h2 class="ef-titel"><?= htmlspecialchars($f["titel"]) ?></h2>
|
||
<?php if (!empty($f["text"])): ?>
|
||
<p class="ef-einleitung"><?= $f["text"] ?></p>
|
||
<?php endif; ?>
|
||
<?php if (!empty($f["marken"])): ?>
|
||
<ol class="ef-marken">
|
||
<?php foreach ($f["marken"] as $nr => $text): ?>
|
||
<li data-marke="<?= $nr ?>"><span class="ef-marke-nr"><?= $nr ?></span><span><?= $text ?></span></li>
|
||
<?php endforeach; ?>
|
||
</ol>
|
||
<?php endif; ?>
|
||
<?php if (!empty($f["punkte"])): ?>
|
||
<ul class="ef-punkte">
|
||
<?php foreach ($f["punkte"] as $p): ?>
|
||
<li><?= $p ?></li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
<?php endif; ?>
|
||
<?php if (!empty($f["tipp"])): ?>
|
||
<p class="ef-tipp"><i class="bi bi-lightbulb"></i><span><?= $f["tipp"] ?></span></p>
|
||
<?php endif; ?>
|
||
</div>
|
||
</section>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<div class="ef-fuss">
|
||
<button type="button" class="btn btn-outline-secondary ef-zurueck"><i class="bi bi-arrow-left me-1"></i>Zurück</button>
|
||
<div class="ef-punkte-nav" aria-hidden="true"></div>
|
||
<button type="button" class="btn btn-primary ef-weiter">Weiter<i class="bi bi-arrow-right ms-1"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|