Hoe je een Oude TV Verandert in een Vintage Luchthaven Omklapbord

Echte mechanische omklapborden die vroeger in treinstations en luchthaventerminals hingen, kosten een fortuin. Als je er een voor thuis of kantoor wilt kopen, vragen commerciële fabrikanten drie tot vijfduizend dollar. De flipoff repository lost dit probleem op met een puur digitale oplossing.

Het project verandert elk scherm, tablet of TV met een browser in een klassiek informatiebord met klikkende flappen en willekeurige tekenanimaties wanneer tekst verandert.

Geen Bundlers of Bibliotheken van Derden

De repository heeft geen package.json, Node.js of React. De auteur schreef het hele project in pure HTML, CSS en vanilla JavaScript.

Om het bord te starten, clone je gewoon de repository en open je index.html lokaal door erop te dubbelklikken, of start een eenvoudige HTTP-server:

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

Na het openen van de pagina wacht de browser op de eerste klik ergens om audioweergave te ontgrendelen via de Web Audio API. Door op de F-toets te drukken wordt het bord uitgebreid naar volledig scherm, waardoor extra interface-elementen worden verborgen.

Hoe Animatie en Geluid Werken

In plaats van complexe Canvas-rendering gebruikt het project een raster van DOM-elementen. Elk bordsegment heeft zijn eigen status en updatelogica.

Wanneer een bericht verandert, werkt het script niet het hele raster tegelijk bij, maar alleen die tegels waarvan de tekens daadwerkelijk veranderden. Net als een echt mechanisme. Voordat de definitieve letter of het cijfer wordt vergrendeld, doorloopt de tegel een scramble-volgorde, waarbij snel willekeurige tekens worden doorlopen en achtergrondkleuren veranderen.

Het klikgeluid werd opgenomen van een echt mechanisch bord. Om het project volledig offline te laten werken zonder het laden van externe assets, codeerde de auteur het audiobestand in Base64 direct in het JS-script flapAudio.js. Het geluidsspoor start synchroon met het begin van het omklappen van de tegel.

Je kunt het bord met je toetsenbord bedienen:

• Enter of Space schakelt naar de volgende tekst
• Pijl-links en pijl-rechts scrollen berichten terug en vooruit
• F schakelt volledig scherm in
• M dempt geluid

Aanpassen voor Je Behoeften

Alle basisparameters zijn uitge splitst in een apart bestand js/constants.js. Daar kun je bewerken:

• Lijst met berichten en citaten
• Rasterafmetingen (variabelen GRID_COLS en GRID_ROWS)
• Animatiesnelheid en omklapvertraging
• Kleurenpalet voor achtergronden

Als je live data moet weergeven in plaats van hardcoded citaten—zoals CI-buildstatussen, het weer of wisselkoersen—kun je MessageRotator.js herschrijven om data op te halen via reguliere fetch() van een lokale API.

Waar Je Het Kunt Gebruiken

Deze zien er geweldig uit als dashboard op een TV in een lounge, op kantoor of op een oude iPad die stof verzamelt op een plank. Het project vereist geen internet, belast de CPU niet met complexe berekeningen en schaalt correct naar elke schermresolutie, tot 4K.

De code is transparant geschreven en opgedeeld in kleine geïsoleerde klassen (Tile.js, Board.js, SoundEngine.js), dus het begrijpen van de mechanica of het aanpassen van het project aan je behoeften zou letterlijk een half uur moeten duren.