Zum Hauptinhalt springen
  1. Projekte/

E-Book Reader Dashboard

Projekte Php Android Xamarin E-Book Tolino Vue Javascript
Inhaltsverzeichnis

Einleitung
#

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.

Projektbeschrieb
#

Das Projekt besteht aus zwei Teilen: Der E-Book Reader und die Webseite, welche auf dessen Display angezeigt wird.

Anzeige Dashboard im Tolino
#

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.

Herausforderungen der App
#

  1. 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.
  2. 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.
  3. Anzeige der “Zoom” Schaltflächen in der WebView.
    Lösung: in OnCreate werden die Einstellungen BuiltInZoomControls, sowie DisplayZoomControls auf false gesetzt.
  4. 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.

Vorbereitung Tolino
#

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.

Dashboard
#

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.

Webseite (Frontend)
#

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.

Webserver (Backend)
#

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.

Herausforderungen vom Dashboard
#

  1. Sichtbare Artifakte bei langer Verwendung: Bei häufigem Wechsel von kleineren Bereichen des Bildschirms entstehen in der Anzeige Artifakte.
    Artifakte auf ePaper Display
    Sichtbare Artifakte nach einigen Stunden
    Lö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.
  2. 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.
  3. 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.
  4. 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.

Nicht realisierte Bereiche
#

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.

Ideen zur Erweiterung
#

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.

Video der Funktionen
#

Links#

Rückmeldungen
#

Ich bin um Meldungen von Fehlern oder allgemeine Rückmeldungen sehr froh. Nutze dafür den “Kontakt” Link oben (@-Symbol).

Verwandte Artikel

Sicheres Passwort generieren
Projekte Php React Next.js
Zertifikatstest für SSL-Zertifikate
Projekte Php React Next.js
Arduino Projekte
Projekte Mikrokontroller Arduino Leds
Selbstportraits
Fotos