Wir reisen häufig mit öffentlichen Verkehrsmitteln. Da es in unserer Umgebung zwei Haltestellen gibt (Bus und Zug), mussten wir die Verbindungen häufig mit einer oder mehreren Apps nachschauen. Neben den Verbindungen ist auch das aktuelle Wetter, sowie das Wetter in naher Zukunft sehr wichtig. Dafür brauchten wir eine weitere App. Des Weiteren haben wir an zwei Tagen pro Woche Waschtag und wir vergassen sporadisch, die Wäsche aus der gemeinsamen Waschküche wieder abzunehmen.
Um diese Informationsbeschaffung zu vereinfachen, baute ich aus einem
günstigen E-Book Reader, dem Tolino Shine 2 HD, ein Dashboard, das seit 2019 an der Wand in unserem Wohnzimmer in ständigem Einsatz ist.
Für die Anzeige des Dashboards habe ich eine kleine
Xamarin Android Applikation erstellt, welche auf dem gesamten Bildschirm eine WebView mit der Webseite anzeigt. Die URL vom Dashboard ist fix im Programm definiert.
Die Android App enthält in der Definition der MainActivity, dass sie als “Launcher” verwendet werden kann MainLauncher = true. Diese Einstellung steuert, dass die App beim drücken der “Home” Taste auf dem E-Reader und beim Start des E-Readers gestartet wird. Somit ersetzt sie effektiv die Tolino E-Reader App auf diesem Gerät.
Wird die Android Klasse WebView direkt in der App verwendet, wird ganz oben immer die Adressleiste angezeigt, wie bei einer normalen Browser-App. Lösung: Wird eine eigene Klasse, die bei mir HybridWebViewClient heisst, verwendet wird, wird nur noch die Webseite angezeigt.
Tolino verwendet in ihren E-Book Readern noch immer ein sehr altes Android (4.4). Dieses System unterstützt seit Anfangs 2021
Let’s Encrypt Zertifikaten
nicht mehr korrekt. Lösung: In der HybridWebViewClient Klasse überschreibe ich die Funktion OnReceiveSslError, damit eventuell auftretende SSL-Fehlermeldungen ignoriert werden und die Webseite trotzdem angezeigt wird.
Anzeige der “Zoom” Schaltflächen in der WebView. Lösung: in OnCreate werden die Einstellungen BuiltInZoomControls, sowie DisplayZoomControls auf false gesetzt.
Bei langem “drücken” auf den Bildschirm wird die Textmarkierung gestartet und ein Kontextmenü mit “Kopieren”, “Alles Auswählen” usw. wird angezeigt. Dies ist auf dieser Anzeige nicht gewünscht. Lösung: im Quellcode der Webseite wird für alle relevanten Klassen per CSS die Eigenschaft user-select: none; definiert. Dies verhindert das Markieren von Text.
Zuerst muss der E-Book Reader mit dem heimischen WLAN verbunden werden. Hierfür verwendete ich die Tolino App.
Danach musste ich den
Root Zugriff auf den E-Book Reader aktivieren. Dieser Zugriff ermöglicht es, in die Einstellungen von Android zu kommen und eigene Android Apps auf dem Gerät zu installieren.
Danach habe ich in den Entwickler-Optionen vom E-Book Reader das USB-Debugging, sowie das dauerhafte Entsperren während der E-Reader per USB angeschlossen ist aktiviert.
So konnte ich meine Android App per
Visual Studio einfach auf den E-Book Reader installieren und das Tablet zeigt dauerhaft die Webseite vom Dashboard an. Das funktioniert sogar mit der kostenlosen “Community Edition” von Visual Studio.
Alle paar Monate prüfe ich, ob eine neue
Tolino Software verfügbar ist. Die Updates kann ich jeweils herunterladen und direkt installieren. Meine App hat bisher alle Updates ohne weiteres zutun überlebt.
Das Dashboard habe ich als Webseite mit Javascript,
Vue und einem
PHP Backend realisiert.
Ich habe mit einer statischen Webseite angefangen, danach zuerst mit JQuery direkt Seiteninhalte per PHP geladen und angezeigt.
Mittlerweile bin ich von dieser Methode weggekommen, die Daten werden nun vom Backend im JSON-Format übermittelt und in der Webseite mittels Vue angezeigt.
Aufgrund des von Tolino verwendeten uralten Android (4.4), und dem damit verbundenen uralten WebView - Chrome (vermutlich Version 36, ich konnte die genaue Version jedoch nicht herausfinden…), werden verschiedene moderne JavaScript Frameworks und Befehle/Funktionen nicht unterstützt.
Ich muss für das Dashboard noch
Vue 1.0.28 einsetzen und kann in JavaScript nur mit dem Schlüsselwort var Variablen deklarieren. Der Browser kennt die “modernen” Schlüsselwörter let und const (diese wurden in 2016 eingeführt) nicht, er kann auch nicht mit “Pfeil”-Funktionsdeklarationen () => {} umgehen.
Im Frontend werden Informationen, welche keine Daten vom Webserver (Backend) benötigen direkt berechnet und angezeigt. Dazu gehören die Uhr und die Anzeige des Waschtags. Andere Bereiche werden periodisch (z.B. Wetter: alle 4 Stunden, Abfahrtstabelle: immer nachdem ein Zug/Bus abgefahren ist) vom Backend geladen.
Das Backend holt Daten von den Quell-Webseiten (z.B.
timetable.search.ch für Abfahrtsdaten,
met.no für Wetterdaten),
regioterre.sg fürs Gemüseabo und bereitet sie fürs Frontend auf. Die aufbereiteten Daten werden im Json-Format ans Fontend übertragen und in der Webseite angezeigt.
Damit das Backend nicht ständig mit Anfragen beschäftigt ist, ohne dass sich die Daten ändern, werden die Transportdaten nur angezeigt, wenn das Zug/Bus Bild im Frontend von jemandem angetippt wird. Die Verbindungsdaten werden dann während 10 Minuten geladen und immer nach der Abfahrt von einem Zug/Bus aktualisiert.
Die Wetterdaten werden nur alle 4 Stunden aktualisiert, die Daten werden zusätzlich im Backend zwischengespeichert (Cache).
Die Daten vom Gemüseabo werden nur Montags und Dienstags alle 4 Stunden geladen, auch diese Daten werden im Backend zwischengespeichert damit die Originale Webseite nicht zu viele Anfragen verarbeiten muss.
Sichtbare Artifakte bei langer Verwendung: Bei häufigem Wechsel von kleineren Bereichen des Bildschirms entstehen in der Anzeige Artifakte.
Sichtbare Artifakte nach einigen StundenLösung: Beim Blättern im E-Book blinkt der Bildschirm alle paar Seiten Schwarz/Weiss auf, um die Artifakte zu verhindern. - Dasselbe Prinzip habe ich in die Webseite eingebaut: Alle 30 Minuten wird der Bildschirm per JavaScript für ganz kurze Zeit komplett Schwarz und komplett Weiss angezeigt, danach wird die Seite wieder normal angezeigt.
Wenn der E-Book Reader die Verbindung mit dem WiFi verliert, “hängt” die Anzeige der Daten. Lösung: Das direkt auf dem E-Book Reader ausgeführte JavaScript der Webseite fängt Fehler beim Abrufen der Daten vom Backend ab und zeigt eine entsprechende Meldung an. Ausserdem erkennt der Browser selber, wenn das Gerät “offline” ist. Diesen Status fragt die Webseite auch ab und zeigt den “neu laden” Knopf schwarz statt weiss an.
Die Webseite selber wird beim Starten vom E-Book Reader einmal geladen, danach werden nur noch die Inhalte vom Backend nachgeladen. Wenn ich weitere Funktionen in die Webseite einbaue oder ein unerwarteter Fehler auftritt, gibt es in der App keine Möglichkeit die ganze Seite neu zu laden. Lösung: Oben rechts in der Webseite wird ein “Neu laden” Knopf angezeigt, welcher die gesamte Webseite vom Server neu lädt und die Anzeige aktualisiert.
Wir sind seit einigen Jahren Mitglied in einem Gemüseabo-Verein. Jede Woche gibt es eine Tasche mit regionalem und saisonalem Gemüse. Die Webseite
regioterre.sg zeigt jede Woche das Gemüse an, das diese Woche in der Tasche sein wird. Diese Informationen hole ich im Backend per RSS-Feed ab und versuche sie in die einzelnen Gemüse aufzuteilen. Leider halten sich die Autoren nicht immer an das gleiche Format. Lösung: Die Aufteilung geschieht per
Regulärem Ausdruck (Regex), der Regex-Ausdruck wurde mit der Zeit immer komplexer,
funktioniert aber seit ca. 3 Jahren sehr gut.
Ich wollte die Termine unserer privaten Kalender, welche wir in
Nextcloud selber hosten, auch im Dashboard anzeigen.
Leider ist das “caldav” Protokoll, sowie eine sinnvolle Anzeige von Kalenderdaten sehr komplex und ich musste diesen Bereich nach einigen Fehlversuchen abbrechen.
Ich verwende zur Ortung meines Handys die App
PhoneTrack. Der aktuelle Ort des Handys kann über eine API ermittelt werden und könnte dazu verwendet werden, im Dashboard anzuzeigen, wo sich die Mitglieder der Familie aktuell gerade aufhalten.
Da dies aber ein massiver Eingriff in die Privatsphäre bedeuten würde, habe ich diesen Bereich aktuell auf Eis gelegt.
Falls in Zukunft noch weitere Bereiche angezeigt werden sollen, wäre es praktisch, die Anzeige ims Querformat zu drehen. Leider fehlt dem aktuellen E-Book Reader der entsprechende Sensor für die automatische Drehung des Bildschirms.
Als Versuch habe ich in der oberen rechten Ecke einen Knopf zum Drehen der Anzeige per CSS (welche auch in diesem Browser funktioniert) eingebunden, sie wird allerdings bei uns nicht eingesetzt.
Das Dashboard könnte den Gast WiFi Zugang als QR-Code anzeigen.
Das Dashboard könnte zur Anzeige eines allgemeinen Wochenplans mit wichtigen wiederkehrenden Terminen, sowie “normale” Tagesabläufe verwendet werden. Da unser Sohn jedoch noch im Vorschulalter ist, eilt dieser Bereich nicht.
