Cómo convertir un viejo televisor en un tablero de aeropuerto vintage

Los verdaderos displays mecánicos de persiana que solían hang in train stations and airport terminals costaban una fortuna. Si quieres comprar uno para tu hogar u oficina, los fabricantes comerciales cobrarán entre tres y cinco mil dólares. El repositorio flipoff resuelve este problema con una solución puramente digital.

El proyecto convierte cualquier pantalla, tablet o TV con navegador en un tablero de información clásico con persianas que hacen clic y animación de caracteres aleatorios cuando cambia el texto.

Sin Bundlers ni Librerías de Terceros

El repositorio no tiene package.json, Node.js ni React. El autor escribió todo el proyecto en HTML puro, CSS y JavaScript vanilla.

Para iniciar el tablero, simplemente clona el repositorio y abre index.html localmente haciendo doble clic, o levanta un servidor HTTP simple:

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

Después de abrir la página, el navegador espera el primer clic en cualquier lugar para desbloquear la reproducción de audio a través de la Web Audio API. Al presionar la tecla F se expande el tablero a pantalla completa, ocultando los elementos extra de la interfaz.

Cómo Funcionan la Animación y el Sonido

En lugar de renderizado complejo con Canvas, el proyecto utiliza una cuadrícula de elementos DOM. Cada segmento del tablero tiene su propio estado y lógica de actualización.

Cuando cambia un mensaje, el script actualiza no toda la cuadrícula de una vez, sino solo las baldosas cuyos caracteres realmente cambiaron. Justo como un mecanismo real. Antes de fijar la letra o dígito final, la baldosa pasa por una secuencia de mezcla, cambiando rápidamente por caracteres aleatorios y cambiando los colores de fondo.

El sonido de clic fue grabado de un tablero mecánico real. Para que el proyecto funcione completamente sin conexión sin cargar recursos externos, el autor codificó el archivo de audio en Base64 directamente dentro del script JS flapAudio.js. La pista de sonido comienza sincrónicamente con el inicio del volteo de la baldosa.

Puedes controlar el tablero con tu teclado:

• Enter o Space cambia al siguiente texto
• Las flechas izquierda y derecha desplazan los mensajes hacia atrás y adelante
• F activa el modo pantalla completa
• M silencia el sonido

Personalizar para Tus Necesidades

Todos los parámetros básicos están extraídos en un archivo separado js/constants.js. Ahí puedes editar:

• Lista de mensajes y citas
• Dimensiones de la cuadrícula (variables GRID_COLS y GRID_ROWS)
• Velocidad de animación y retraso del volteo
• Paleta de colores para los fondos

Si necesitas mostrar datos en vivo en lugar de citas codificadas—como estados de builds de CI, clima o tipos de cambio—puedes reescribir MessageRotator.js para obtener datos a través de fetch() regular desde una API local.

Dónde Puedes Usarlo

Estos se ven geniales como panel en un TV en un área de descanso, en una oficina, o en un iPad viejo acumulando polvo en un estante. El proyecto no requiere internet, no carga la CPU con cálculos complejos, y escala correctamente a cualquier resolución de pantalla, hasta 4K.

El código está escrito de forma transparente y dividido en clases pequeñas e isoladas (Tile.js, Board.js, SoundEngine.js), así que entender la mecánica o adaptar el proyecto a tus necesidades debería tomar literalmente media hora.