So verwandeln Sie einen alten Fernseher in eine Vintage-Flughafen-Wecselfolientafel

Echte mechanische Wecselfolientafeln, die früher in Bahnhöfen und Flughafenterminals hingen, kosten ein Vermögen. Wenn Sie eine für Ihr Zuhause oder Büro kaufen möchten, verlangen kommerzielle Hersteller drei- bis fünftausend Dollar. Das flipoff-Repository löst dieses Problem mit einer rein digitalen Lösung.

Das Projekt verwandelt jeden Bildschirm, jedes Tablet oder jeden Fernseher mit einem Browser in eine klassische Informationstafel mit Klickgeräuschen und Zufallszeichen-Animationen bei Textänderungen.

Keine Bundler oder Drittanbieter-Bibliotheken

Das Repository enthält keinen package.json, Node.js oder React. Der Autor schrieb das gesamte Projekt in reinem HTML, CSS und Vanilla-JavaScript.

Um die Tafel zu starten, klonen Sie einfach das Repository und öffnen Sie index.html lokal per Doppelklick, oder starten Sie einen einfachen HTTP-Server:

git clone https://github.com/magnum6actual/flipoff.git
cd flipoff
python3 -m http.server 8080

Nach dem Öffnen der Seite wartet der Browser auf den ersten Klick irgendwo, um die Audiowiedergabe über die Web Audio API freizuschalten. Das Drücken der F-Taste erweitert die Tafel auf Vollbild und blendet zusätzliche Interface-Elemente aus.

Wie Animation und Sound funktionieren

Anstatt komplexes Canvas-Rendering zu verwenden, nutzt das Projekt ein Raster aus DOM-Elementen. Jedes Tafel-Segment hat seinen eigenen Zustand und seine eigene Update-Logik.

Wenn sich eine Nachricht ändert, aktualisiert das Skript nicht das gesamte Raster auf einmal, sondern nur die Kacheln, deren Zeichen sich tatsächlich geändert haben. Genauso wie bei einem echten Mechanismus. Bevor der endgültige Buchstabe oder die Ziffer arretiert wird, durchläuft die Kachel eine Verwürfelungssequenz, bei der schnell zufällige Zeichen durchlaufen und sich die Hintergrundfarben ändern.

Das Klickgeräusch wurde von einer echten mechanischen Tafel aufgenommen. Um das Projekt vollständig offline funktionieren zu lassen, ohne externe Assets zu laden, kodierte der Autor die Audiodatei in Base64 direkt im JS-Skript flapAudio.js. Der Soundtrack startet synchron mit dem Beginn des Kachel-Umschlags.

Sie können die Tafel mit Ihrer Tastatur steuern:

• Enter oder Space wechselt zum nächsten Text
• Pfeiltasten links und rechts blättern Nachrichten vorwärts und rückwärts
• F aktiviert den Vollbildmodus
• M schaltet den Ton stumm

Anpassung an Ihre Bedürfnisse

Alle grundlegenden Parameter sind in eine separate Datei js/constants.js ausgegliedert. Dort können Sie bearbeiten:

• Liste der Nachrichten und Zitate
• Rasterabmessungen (Variablen GRID_COLS und GRID_ROWS)
• Animationsgeschwindigkeit und Flip-Verzögerung
• Farbpalette für Hintergründe

Wenn Sie statt fest codierter Zitate Live-Daten anzeigen müssen – wie CI-Build-Status, Wetter oder Wechselkurse – können Sie MessageRotator.js umschreiben, um Daten über reguläres fetch() von einer lokalen API abzurufen.

Wo Sie es einsetzen können

Diese sehen großartig aus als Dashboard auf einem Fernseher in einem Lounge-Bereich, in einem Büro oder auf einem alten iPad, das Staub auf einem Regal sammelt. Das Projekt benötigt kein Internet, belastet die CPU nicht mit komplexen Berechnungen und skaliert korrekt auf jede Bildschirmauflösung bis zu 4K.

Der Code ist transparent geschrieben und in kleine isolierte Klassen aufgeteilt (Tile.js, Board.js, SoundEngine.js), sodass das Verstehen der Mechanik oder das Anpassen des Projekts an Ihre Bedürfnisse buchstäblich eine halbe Stunde dauern sollte.