Jak Zamienić Stary Telewizor w Zabytkową Tablicę Lotniskową z Przekładanymi Tabliczkami

Prawdziwe mechaniczne tablice z przekładanymi tabliczkami, które kiedyś wisiały na dworcach kolejowych i w halach lotniskowych, kosztują fortunę. Jeśli chcesz kupić jedną do domu lub biura, komercyjni producenci zażądają od trzech do pięciu tysięcy dolarów. Repozytorium flipoff rozwiązuje ten problem za pomocą całkowicie cyfrowego rozwiązania.

Projekt zamienia każdy ekran, tablet lub telewizor z przeglądarką w klasyczną tablicę informacyjną z klaskającymi tabliczkami i losową animacją znaków przy zmianie tekstu.

Bez Bundlerów i Zewnętrznych Bibliotek

Repozytorium nie zawiera package.json, Node.js ani React. Autor napisał cały projekt w czystym HTML, CSS i zwykłym JavaScript.

Aby uruchomić tablicę, wystarczy sklonować repozytorium i otworzyć index.html lokalnie przez dwuklik lub uruchomić prosty serwer HTTP:

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

Po otwarciu strony przeglądarka czeka na pierwsze kliknięcie w dowolnym miejscu, aby odblokować odtwarzanie dźwięku przez Web Audio API. Naciśnięcie klawisza F rozszerza tablicę na pełny ekran, ukrywając dodatkowe elementy interfejsu.

Jak Działają Animacja i Dźwięk

Zamiast złożonego renderowania Canvas, projekt wykorzystuje siatkę elementów DOM. Każdy segment tablicy ma swój własny stan i logikę aktualizacji.

Gdy wiadomość się zmienia, skrypt nie aktualizuje całej siatki naraz, lecz tylko te kafelki, których znaki faktycznie się zmieniły. Tak jak w prawdziwym mechanizmie. Przed zablokowaniem ostatecznej litery lub cyfry, kafelek przechodzi przez sekwencję mieszania, szybko przewijając losowe znaki i zmieniając kolory tła.

Dźwięk klikania został nagrany z prawdziwej mechanicznej tablicy. Aby projekt działał całkowicie offline bez ładowania zewnętrznych zasobów, autor zakodował plik audio w Base64 bezpośrednio w skrypcie JS flapAudio.js. Ścieżka dźwiękowa uruchamia się synchronicznie z początkiem obracania kafelka.

Możesz kontrolować tablicę za pomocą klawiatury:

• Enter lub Space przełącza na następny tekst
• Strzałki w lewo i w prawo przewijają wiadomości wstecz i do przodu
• F włącza tryb pełnoekranowy
• M wycisza dźwięk

Dostosowywanie do Własnych Potrzeb

Wszystkie podstawowe parametry zostały wyodrębnione do osobnego pliku js/constants.js. Tam możesz edytować:

• Lista wiadomości i cytatów
• Wymiary siatki (zmienne GRID_COLS i GRID_ROWS)
• Prędkość animacji i opóźnienie przekładania
• Paletę kolorów dla tła

Jeśli potrzebujesz wyświetlać dane na żywo zamiast zakodowanych cytatów — jak statusy buildów CI, pogodę lub kursy walut — możesz przepisać MessageRotator.js, aby pobierać dane przez zwykłe fetch() z lokalnego API.

Gdzie Można To Wykorzystać

Wyglądają świetnie jako tablica informacyjna na telewizorze w poczekalni, w biurze lub na starym iPadzie kurzącym się na półce. Projekt nie wymaga internetu, nie obciąża procesora złożonymi obliczeniami i skaluje się poprawnie do każdej rozdzielczości ekranu, aż do 4K.

Kod jest napisany przejrzyście i podzielony na małe izolowane klasy (Tile.js, Board.js, SoundEngine.js), więc zrozumienie mechaniki lub dostosowanie projektu do własnych potrzeb powinno zająć dosłownie pół godziny.