Comment transformer une ancienne télévision en tableau d'aéroport vintage à volets

Les vrais panneaux mécaniques à volets qui étaient autrefois suspendus dans les gares et les terminaux d'aéroport coûtent une fortune. Si vous voulez en acheter un pour votre maison ou votre bureau, les fabricants commerciaux demanderont entre trois et cinq mille dollars. Le dépôt flipoff résout ce problème avec une solution purement numérique.

Le projet transforme n'importe quel écran, tablette ou télévision avec un navigateur en un tableau d'information classique avec des volets qui cliquettent et une animation de caractères aléatoires lorsque le texte change.

Sans bundleurs ni bibliothèques tierces

Le dépôt n'a pas de package.json, Node.js, ou React. L'auteur a écrit l'ensemble du projet en HTML, CSS et JavaScript pur.

Pour lancer le tableau, il suffit de cloner le dépôt et d'ouvrir index.html localement en double-cliquant, ou de lancer un serveur HTTP simple :

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

Après avoir ouvert la page, le navigateur attend le premier clic n'importe où pour débloquer la lecture audio via l'API Web Audio. Appuyer sur la touche F agrandit le tableau en plein écran, masquant les éléments d'interface supplémentaires.

Comment fonctionnent l'animation et le son

Au lieu d'un rendu Canvas complexe, le projet utilise une grille d'éléments DOM. Chaque segment du tableau a son propre état et sa propre logique de mise à jour.

Lorsqu'un message change, le script ne met pas à jour toute la grille d'un coup, mais seulement les tuiles dont les caractères ont réellement changé. Exactement comme un vrai mécanisme. Avant de verrouiller la lettre ou le chiffre final, la tuile traverse une séquence de mélange, parcourant rapidement des caractères aléatoires et changeant les couleurs de fond.

Le son de cliquetis a été enregistré à partir d'un vrai panneau mécanique. Pour que le projet fonctionne entièrement hors ligne sans charger de ressources externes, l'auteur a encodé le fichier audio en Base64 directement dans le script JS flapAudio.js. La piste audio démarre de manière synchrone avec le début du retournement de la tuile.

Vous pouvez contrôler le tableau avec votre clavier :

• Enter ou Space passe au texte suivant
• Les flèches gauche et droite font défiler les messages vers l'arrière et vers l'avant
• F active le mode plein écran
• M coupe le son

Personnalisation pour vos besoins

Tous les paramètres de base sont extraits dans un fichier séparé js/constants.js. Vous pouvez y modifier :

• Liste des messages et citations
• Dimensions de la grille (variables GRID_COLS et GRID_ROWS)
• Vitesse d'animation et délai de retournement
• Palette de couleurs pour les fonds

Si vous devez afficher des données en direct au lieu de citations codées en dur—comme l'état des builds CI, la météo ou les taux de change—vous pouvez réécrire MessageRotator.js pour récupérer les données via fetch() classique depuis une API locale.

Où vous pouvez l'utiliser

Cela a fière allure comme tableau de bord sur une télévision dans un espace lounge, dans un bureau, ou sur un ancien iPad qui prend la poussière sur une étagère. Le projet ne nécessite pas d'internet, ne sollicite pas le processeur avec des calculs complexes, et s'adapte correctement à n'importe quelle résolution d'écran, jusqu'en 4K.

Le code est écrit de manière transparente et décomposé en petites classes isolées (Tile.js, Board.js, SoundEngine.js), donc comprendre les mécanismes ou adapter le projet à vos besoins devrait prendre littéralement une demi-heure.