Infoscreen

Hier gehts um einen Bildschirm der Informationen anzeigt.
Überraschend, ich weiß.

Wie sieht es aus?

Ich habe ein paar Dinge unkenntlich gemacht, um meine persönlichen Daten zu schützen.

Wie es begann

Eines Tages habe ich mir einen coolen neuen und viel besseren Monitor für meinen PC gekauft. Aber was macht man mit dem alten, wenn man keinen Platz für einen dritten hat?

Die Idee war simpel: Einfach einen Raspberry Pi anschließen und nützliche Informationen anzeigen lassen. Wetter, Nachrichten, Kalender und so weiter. Und um immer gut informiert zu sein, wurde der Bildschirm in der Küche platziert.

Geschichte

Die erste Iteration

Am Anfang war es einfach eine Webseite in Vanilla JS und natürlich dem üblichen HTML und CSS. Ich hatte zu dem Zeitpunkt nicht viel Erfahrung in JS, aber ich versuchte “gute” Software-Entwicklungspraktiken zu verwenden, wie Klassenvererbung und ES-Module.

Warum Web Technologien nutzen, wenn ich davon wenig Ahnung habe? Weil ich noch weniger Ahnung von anderen GUI-Technologien hatte. Außerdem nutzen viele Quellen, die ich benutzen wollte, REST-Schnittstellen und JSON, was einfach in JavaScript super einfach zu handhaben ist.

Das ganze wurde lokal mit dem Standard-PHP HTTP-Server gehostet und Chromium-Browser im Kiosk-Modus geöffnet.

Wen der Code wirklich interessiert, der kann hier den Repository der zweiten Version finden, die den Großteil des Codes der ersten Version nutzt.

Die zweite Iteration

Beim zweiten Mal war die Idee, statt einen Chromium-Browser zu öffnen, eine Electron App zu schreiben. Klingt erstmal nicht so viel anders, aber ich dachte, dass es vielleicht performanter sein könnte, da zumindest etwas Bloat fehlt.

Naja, es war nicht performanter. Der Code dafür ist trotzdem noch hier zu finden.

Die dritte Iteration

Einige Zeit später habe ich angefangen, mich mehr mit React zu beschäftigen. Irgendwie kam mir der Gedanke, dass was ich damals mit Vanilla JS versucht habe, in React viel einfacher und sauberer umzusetzen wäre. Also habe ich angefangen, den Code zu portieren.

Ich habe auch schon von Frameworks für React gehört, die statische Seiten generieren können, wie Next.JS und Gatsby. Gatsby schien mir eine gute Wahl zu sein, also habe ich mich dafür entschieden.

Diesmal wurde es in einem Docker-Container auf meinem eigenen Heimserver gehostet und der Pi öffnet wieder einen Chromium-Browser.

Damit endet die Entwicklungsgeschichte.

Das Ende der Geschichte

Und nun?
Die brennensten Fragen mal geklärt:

Wird der Bildschirm genutzt?

Nein. Er war eine ganze Weile in Betrieb, aber mittlerweile bin ich umgezogen und habe keinen schönen Platz mehr. Zudem muss ich sagen, dass man über die Zeit immer weniger drauf schaut…

Was gab es für coole Erweiterungen?

Das war eigentlich eine der coolsten Sachen an dem Projekt. Denn um Nachts nicht geblendet zu werden, gab es einen Nachtmodus. Dieser bestand aus einem dunklen Hintergrund, dunkleren Farben und des Deaktivieren der großen Wetterkarte.
Außerdem gab es einen Bewegungsmelder. Nach 10 Minuten ohne Bewegung wurde der Bildschirm dunkel geschaltet. Sobald jemand den Raum betrat, wurde der Bildschirm wieder aktiviert.
Zuletzt hab ich unseren librespot Server noch selbst dazu gebracht, den aktuell laufenden Song dem Infoscreen mitzuteilen.

Was war denn nun auf dem Bildschirm?

Folgende Infos wurden zuletzt angezeigt:

• Zeit
• Wetter und Wetterkarte
• zwei RSS News Feeds
• ein Google Kalender
• Abfahrten der nächsten Straßenbahnstation
• derzeit laufendes Spotify oder (falls nichts läuft) Infos von meinen Pflanzensensoren

Außerdem wird der Hintergrund durch ca. 20 Bilder rotiert.

Wenn es spät wird, wird ein Nachtmodus aktiviert und die Wetterkarte durch ein süßes GIF von einem schlafenden Pikachu ersetzt.

Wetter

Für das Wetter nutze ich zuerst die DarkSky API. Als Apple den Dienst gekauft und den kostenlosen Zugang beschränkt hat, war klar, dass ich eine Alternative brauche.

Meine Wahl fiel auf Pirate Weather. Doch der Dienst war oft nicht zuverlässig. Wahrscheinlich sollte man eher einen anderen Dienst nutzen.

RSS News

Hier hab ich mir einen Spaß erlaubt: Dem Feed der Tagesschau wurden einige wenige Artikel des Postillons zugefügt. Manchmal musste man aber echt raten…

Google Calendar

Hier wurde einfach die Google Calendar API genutzt und das Ergebnis in einer Liste nach Tagen gruppiert angezeigt.

Haltestellenauskunft

Die lokalen Verkehrsbetriebe haben eine API bereitgestellt, um die nächsten Abfahrten an einer Haltestelle abzufragen. Dokumentiert oder offiziell ist sie nicht so recht und ich habe gehört, dass sie seitdem auch stärker limitiert ist. Auf jeden Fall wurden einfach die nächsten beiden Haltestellen abgefragt und die Ankuftszeiten inkl. Verspätungen angezeigt.

Spotify

Wie das funktioniert hat, ist gar nicht so simpel. Vielleicht sollte ich mal einen eigenen Blogpost dazu schreiben.

Falls nichts lief, wurden stattdessen Infos von meinen Pflanzensensoren angezeigt.

Pflanzensensoren

Hier wurden einfach einige Daten aus meinem Home Assistant zu den Pflanzen in der Küche angezeigt.