Marcador de baloncesto
Un plugin de WordPress para marcador de baloncesto en tiempo real — panel del operador, overlay de retransmisión en vivo y lectura del marcador asistida por OCR desde una cámara. Construido para funcionar en un pabellón sin garantías de red.
Resumen
Lo construí para el baloncesto. KK Jesenice necesitaba un overlay de marcador que un operador pudiera manejar desde el panel de administración de WordPress y proyectar en directo sobre la pared del pabellón o enviar a un setup de streaming. La restricción era real: un pabellón de baloncesto no es una sala de servidores. Tienes un portátil, un proyector y un router Wi-Fi que puede o no aguantar el partido.
El plugin tiene dos superficies. El panel del operador vive en la administración de WordPress — muestra cuarto, reloj de partido, reloj de posesión, marcadores, faltas, logos de los equipos y nombre de la liga. Cada campo se actualiza cada 500 milisegundos por AJAX, pero solo cuando algo ha cambiado de verdad; la guarda por diff mantiene el enlace silencioso en una red de pabellón congestionada. La página del overlay consulta el mismo endpoint y repinta el DOM. Ambos corren sobre el mismo código; el script detecta la clase wp-admin del body para decidir en qué dirección ejecutarse.
El reloj de posesión no es solo una pantalla — cuenta atrás en el navegador a 1 Hz, con presets de 14 s y 24 s asignados a botones únicos para las reglas FIBA y NBA. El reloj de partido funciona igual. Las faltas se rastrean por equipo como cinco puntos de color: naranja hasta cuatro, rojo en la quinta. A la resolución y la distancia de una pantalla de pabellón, el color se lee más rápido que un número.
También hay un modo OCR. Si el club ya tiene un marcador físico, un operador puede apuntar una cámara hacia él (o subir una foto), dibujar rectángulos delimitadores alrededor de las secciones de marcador, reloj y cuarto, y dejar que Tesseract.js extraiga los valores. Cada región tiene preprocesado independiente — umbral, contraste, conmutador de escala de grises, eliminación de ruido — porque un segmento LED rojo y un dígito LCD blanco necesitan tratamientos completamente distintos. Konva.js gestiona la interacción con regiones sobre el canvas.
Arquitectura
Cómo leer el diagrama: Dos rutas de entrada (panel manual y cámara OCR) escriben sobre una capa de estado compartida — WordPress transients servidos por AJAX con un poll de 500 ms y una guarda por diff para que los partidos en reposo no parloteen. La página del overlay en /overlay/[slug] consume ese endpoint y repinta solo cuando hay cambios; funciona como OBS browser source para streaming. Los relojes en el navegador (reloj de partido y relojes de posesión por equipo) corren en el cliente a 1 Hz, así un parón de red no congela la pantalla.
Pantalla del marcador
Disposición del overlay: cuarto y reloj de partido a la izquierda, nombres de equipo con puntos de faltas y cifras grandes del marcador. Los puntos de faltas están codificados por color — naranja hasta cuatro, rojo en la quinta — legibles a distancia de proyector sin tener que forzar la vista sobre los dígitos.
La restricción no era el código — era el entorno. Un pabellón tiene un proyector, un portátil y un Wi-Fi que quizá funcione. El sistema tenía que ser lo bastante sólido como para que nada de eso importase.
Seis cosas entregadas,
tres difíciles resueltas.
Contribuciones clave
- Construí el plugin de WordPress completo desde cero — custom post type, UI de administración para el operador, capa de estado por AJAX y renderizador público del overlay.
- Implementé dos modos de entrada: un panel manual del marcador con botones ±1 / ±2 / ±3 y una ruta OCR en vivo mediante cámara o imagen subida.
- El pipeline OCR usa Tesseract.js sobre una región escalada 2× en Canvas con controles de umbral, contraste y preprocesado en escala de grises por región.
- El estado se persiste mediante WordPress transients y se consulta cada 500 ms — la escritura solo ocurre cuando los datos cambian de verdad, manteniendo la red tranquila.
- El reloj de partido cuenta atrás en el navegador; el reloj de posesión soporta presets de 14 s y 24 s acordes a las reglas FIBA/NBA.
- Los puntos de faltas se dibujan en naranja hasta 4 y pasan a rojo en la 5ª — visibles a distancia de retransmisión sin leer cifras.
- El overlay se expone en
/overlay/[slug]mediante rewrite rules personalizadas; integrable como shortcode para OBS browser source.
Desafíos resueltos
- El Wi-Fi del pabellón es poco fiable — el polling AJAX con una guarda por hash de cambios mantiene el overlay reactivo sin saturar el servidor en un enlace lento.
- El marcador se ve a distancia de cámara; el conteo de faltas tiene que leerse como color, no como dígitos — diseñé el sistema de cinco puntos en consecuencia.
- El OCR desde una cámara apuntando al marcador físico necesita preprocesado por región (distintas zonas de brillo, dígitos LED vs. LCD) — sliders ajustables por región marcada en vez de un único umbral global.
Cliente
La comunicación fue rápida y profesional. Todo lo que acordamos se entregó a tiempo, y las propuestas de diseño llegaron con verdadero buen gusto. Numen será nuestra primera opción para proyectos futuros.
Qué hay bajo el capó.
Trabajos relacionados
¿Listo para arreglar, construir
o escalar?
30 minutos, conmigo personalmente. Leo tu sistema como un archivo de logs y te digo qué haría primero. Sin presentaciones, sin embudo de ventas.
— Davor Majc, fundador, Numen