Erklärung; die Lage kommt aus .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" => [ "Sehen, wie viel Strom die Sonne gerade liefert und wohin er fließt.", "Bedienen: Rollos, Licht, Heizung und das Laden des Autos.", "Automatiken 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 Passkey an – das ist dein Fingerabdruck oder dein Gesicht am Handy, kein Passwort.", "bild" => "menue.jpg", "form" => "handy", "marken" => [ 4 => "Das Menü öffnest du mit den drei Strichen oben links.", 1 => "Solar: Strom, Speicher, Heizung und Auto im Überblick.", 2 => "Home: dein Grundriss – hier bedienst du die Räume. Darunter die Etagen.", 3 => "Einstellungen: für die, die das System pflegen (Teil 2).", ]], ["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Die Startseite: dein Grundriss", "text" => "Unter Home 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 Kreise links wechseln die Etage.", 2 => "Eine Kachel zeigt groß die Raumtemperatur, klein darüber die gewünschte, darunter die Luftfeuchte. Eine kleine Flamme heißt: die Heizung läuft.", 3 => "Tippe auf eine Kachel, 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 Reiter: Beschattung, Heizung, Licht – je nachdem, was im Raum hängt.", 2 => "Hoch, Stopp, Runter: fährt ganz auf oder zu.", 3 => "Mit den Reglern 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 Heizung stellst du ein, wie warm es werden soll.", "bild" => "raum_heizung.jpg", "form" => "handy", "marken" => [ 1 => "Den Regler ziehen – beim Loslassen geht die neue Solltemperatur an das Thermostat.", 2 => "Darunter die gemessene Temperatur und Luftfeuchte im Raum.", ]], ["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Licht", "text" => "Lampen schaltest du im Reiter Licht 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: Schalter, Farbe, Helligkeit und Effekt.", ]], ["teil" => 1, "kapitel" => "Automatiken", "titel" => "Der Tag auf einen Blick", "text" => "Unter dem Grundriss stehen die Automatismen. 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 Pfeilen schaust du dir andere Tage an – etwa, was am Wochenende passiert.", 2 => "Etagen ein- und ausblenden.", 3 => "Hier steht, dass alle Automatiken angezeigt werden – keine geht verloren.", 4 => "Die gelbe Linie ist jetzt.", 5 => "Ein Haken heißt: heute schon gelaufen, mit Uhrzeit.", ], "punkte" => [ "Punkt: passiert zu einer festen Uhrzeit.", "Balken: darf in diesem Zeitraum passieren, sobald eine Bedingung erfüllt ist – zum Beispiel starke Sonne.", "Gestrichelte Linie: die untere Automatik startet nach der oberen.", "Kalender-Symbol: 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 Stand von heute – gelaufen, kommt noch, oder warum nicht.", 2 => "Bearbeiten öffnet alle Einstellungen (Teil 2).", 3 => "Pausieren hält die Automatik an, bis du sie wieder fortsetzt. Pausierte stehen ganz unten.", 4 => "Löschen 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 Solar 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 => "Sonne: was die Solaranlage gerade liefert.", 2 => "Stromnetz: minus heißt, wir speisen ein; plus heißt, wir kaufen zu.", 3 => "Hausbatterie: lädt oder entlädt, darunter der Ladestand.", 4 => "Wechselrichter: Autarkie sagt, wie viel des Stroms gerade selbst erzeugt ist.", 5 => "Verbrauch im ganzen Haus.", 6 => "Heizstab im Wasserspeicher – nutzt Sonnenstrom zum Heizen.", 7 => "Wallbox EG mit Ladestand des Autos.", 8 => "Wallbox OG.", 9 => "Verbrauch Obergeschoss.", 10 => "Verbrauch Erdgeschoss.", 11 => "Verbrauch Untergeschoss.", 12 => "Wasser: 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 Wallbox.", "bild" => "wallbox.jpg", "form" => "handy", "punkte" => [ "Laden starten bzw. stoppen.", "Immer laden: lädt sofort, notfalls mit Strom aus dem Netz.", "Überschuss: lädt nur mit Sonnenstrom, der sonst eingespeist würde.", "Ladeplanung: sag, wie viel Prozent bis wann nötig sind – das System verteilt die Ladung möglichst in die Sonnenstunden.", "Max. Ladestrom 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" => [ "Heizstab: Automatik heißt, er heizt mit Überschuss; von Hand lässt sich eine Leistung vorgeben.", "Bewässerung: 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 Statistik zusammen, was die Anlage bisher gebracht hat.", "bild" => "solar_statistik.jpg", "form" => "handy", "punkte" => [ "Ertrag der Anlage: gesparte Stromkosten plus Einspeisevergütung.", "Netzkosten: was trotzdem an Strom gekauft wurde.", "Autarkie: 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: Verbrauch und Erzeugung.", "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 Historie 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 Jahresvergleich: dieselben Kennzahlen Jahr neben Jahr.", ]], ["teil" => 1, "kapitel" => "Energie", "titel" => "Jahre vergleichen", "text" => "Der Jahresvergleich stellt Ertrag, Netzkosten und Autarkie der Jahre nebeneinander.", "bild" => "jahresvergleich.jpg", "form" => "handy", "punkte" => [ "Gleicher Zeitraum vergleicht bis zum heutigen Datum – fair, auch mitten im Jahr.", "Ganze Jahre vergleicht abgeschlossene Jahre.", "Mit Monatsverlauf zeigen siehst du kleine Kurven je Monat.", ]], ["teil" => 1, "kapitel" => "Haus und Wetter", "titel" => "Heizung und Warmwasser", "text" => "Die Seite Heizung 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 Wasserverbrauch.", ]], ["teil" => 1, "kapitel" => "Haus und Wetter", "titel" => "Wetter", "text" => "Die Seite Wetter 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 Škoda zeigt den Zustand des Autos: Ladestand, Reichweite, ob es verriegelt und angesteckt ist.", "bild" => "skoda.jpg", "form" => "handy", "punkte" => [ "Tippe auf den Ladeanschluss, um das Laden zu starten oder zu stoppen.", "Tippe auf den Innenraum, 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 Ladungen 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" => [ "Striche statt Zahlen: Die Werte kommen gleich – kurz warten oder die Seite neu laden. Bleibt es so, meldet das Gerät gerade nichts.", "Rollo reagiert nicht: Einmal Stopp drücken und erneut versuchen. Bei Frost fahren Jalousien absichtlich nicht.", "Automatik lief nicht: Eintrag antippen – der Stand sagt, ob sie heute dran war oder auf eine Bedingung wartet.", "Etwas ist ganz falsch eingestellt: 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 Einstellungen.", "bild" => "einst_preise.jpg", "form" => "breit", "marken" => [ 1 => "Die Reiter: Preise, Grundriss, Home-Kacheln, Geräte, Fahrzeug.", 2 => "Preise: trage bei einem neuen Stromvertrag einen neuen Zeitraum ein – die alten bleiben für die Statistik stehen.", 3 => "Speichern nicht vergessen.", ]], ["teil" => 2, "kapitel" => "Grundriss", "titel" => "Etagen und Räume", "text" => "Im Reiter Grundriss 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 => "Etage wählen oder mit „+ Etage“ eine neue anlegen.", 2 => "Kacheln ziehen, um sie zu verschieben. Ein Tipp wählt den Raum.", 3 => "Ein Grundrissbild hochladen – ein Foto oder eine Zeichnung der Etage.", 4 => "Neuen Raum 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 Home-Kacheln wählst du bis zu drei Werte je Kachel.", "bild" => "einst_kacheln.jpg", "form" => "breit", "marken" => [ 1 => "Eine Kachel aufklappen.", 2 => "Für jeden Wert: Gerät und Messwert wählen, dazu Einheit, Symbol und ob er groß stehen soll.", 3 => "Wert hinzufügen – höchstens drei.", 4 => "Speichern. „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 Geräte fest – danach erscheinen sie im Raum.", "bild" => "einst_geraete.jpg", "form" => "breit", "marken" => [ 1 => "Suchen nach Name, Art oder Raum.", 2 => "Den Raum wählen – gespeichert wird sofort.", 3 => "Ein abgebautes Gerät entfernen. 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 + bei den Automatismen an, eine vorhandene mit „Bearbeiten“. Sie besteht aus drei Teilen: Wenn, Wann, Dann.", "bild" => "editor_wenn.jpg", "form" => "breit", "marken" => [ 1 => "Ein Name, an dem du sie wiedererkennst.", 2 => "Wenn: die Bedingungen. Alle in einem Kasten müssen zutreffen – eine Uhrzeit, ein Sonnenstand, ein Messwert wie Helligkeit oder Temperatur.", 3 => "Hier siehst du, wie viele gerade zutreffen; neben jeder Bedingung steht der aktuelle Wert.", 4 => "Oder stattdessen: 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" => "Wann legt fest, an welchen Tagen und zu welchen Zeiten die Automatik überhaupt aktiv ist.", "bild" => "editor_wann.jpg", "form" => "breit", "marken" => [ 1 => "Vorlagen: täglich, werktags (ohne Feiertage), Wochenende (mit Feiertagen).", 2 => "Oder die Wochentage einzeln wählen.", 3 => "Ferien und Feiertage: nie, egal oder immer.", 4 => "Am Vorabend: die Tage gelten für morgen – „Kinderrollos zu, wenn morgen Schule ist“.", 5 => "Dieser Satz fasst zusammen, was dabei herauskommt.", ], "punkte" => [ "Nur einmal am Tag: danach ist bis Mitternacht Ruhe – gut für Rollos, die du danach von Hand verstellst.", "Sperre: Mindestabstand zwischen zwei Auslösungen, gegen Hin und Her bei wechselnder Sonne.", ]], ["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 3. Dann", "text" => "Dann sagt, was passieren soll.", "bild" => "editor_dann.jpg", "form" => "breit", "marken" => [ 1 => "Je Zeile ein Gerät und ein Befehl, etwa „Wohnzimmer Fensterfront: Auf“ oder eine Position mit Neigung.", 2 => "Und noch etwas tun: weitere Geräte in derselben Automatik.", 3 => "Speichern – 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 Wenn das Gerät „Automatiken“ und darin die auslösende.", "punkte" => [ "Beispiel: Wecker um 05:50 → 10 Minuten danach, wenn es hell ist, gehen die Rollos auf.", "In der Zeitleiste verbindet eine gestrichelte Linie 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 MyŠkoda-App abgefragt. Sie laufen nach einiger Zeit ab und müssen dann erneuert werden – im Reiter Fahrzeug.", "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 Protokolle stehen die Aufzeichnungen der Hintergrundprogramme – hilfreich, wenn etwas nicht so läuft wie erwartet.", "bild" => "protokolle.jpg", "form" => "breit", "punkte" => [ "Links das Programm wählen, zum Beispiel den Automatik-Runner.", "Oben nach Text oder nur nach Warnungen filtern.", "Gelb und rot markierte Zeilen sind Warnungen und Fehler.", ]], ["teil" => 2, "kapitel" => "Geschafft", "titel" => "Das Wichtigste in Kürze", "punkte" => [ "Home → Kachel antippen → Raum bedienen.", "Automatismen: Eintrag antippen → pausieren, fortsetzen, bearbeiten.", "Solar: Stromfluss sehen, Auto, Heizstab und Wasser über ihre Symbole steuern.", "Einstellungen: 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; ?>

Einführung

$name): ?>
$f): $mitBild = !empty($f["bild"]); ?>
" data-nr="" data-teil="" hidden aria-roledescription="Folie">
?v=" alt="" loading=""> $p): if (!$p) continue; ?>
Teil ·

    $text): ?>