Ping Pong Scoreboard
¿Podemos contar los puntos del ping pong y subirlo a nuestro sitio web?
Una de las cosas que sorprende a la gente de Aerolab es que no sólo tenemos un playroom con PlayStation, Arcade y Ping Pong, sino que encima lo usamos activamente (a costa de nuestra productividad).
Lo que tiene de raro jugar Ping Pong es que recordar los puntajes de cada uno requiere de una cantidad sorprendente de concentración, así que solemos olvidarnos de quién gana, quién saca, o de aplicar los cambios de reglas correctos al final del partido.
Todo el mundo resuelve este problema con un mini ábaco para contar puntos, pero esas porquerías sin WiFi no están permitidas en Aerolab. Teníamos que hacer algo que no sólo requiriera internet, sino que también pudiéramos publicar en nuestra web y en tiempo real :D
Dispositivo
Originalmente pensamos hacer varios componentes, usando displays de 8 segmentos para mostrar puntajes y botones separados para cada lado de la mesa. Pero mientras estábamos viendo que el pinout de los displays es bastante rebuscado para un Spark, descubrimos la magia del Internet Button:
Uno de los desafíos más curiosos del proyecto fue diseñar una buena experiencia de usuario en torno a un device muy limitado (4 pulsadores y 11 leds RGB) y que tiene que poder entenderse con facilidad a una distancia de 2–3 metros. Estas restricciones nos obligaron a diseñar una interfaz fácil de leer y muy poco ambigua.
Diseño
Estamos tan acostumbrados a trabajar con Sketch y tener un control casi absoluto de la UI que tener que reducirnos a usar un puñado de LEDs para la interfaz. Es casi como volver a hacer sitios en Flash *shudder*.
Inicialmente marcamos qué lado saca con un LED en el lado correspondiente. No sólo da poca información sino que resultaba confuso. ¿Cómo marcamos un empate? ¿Quién viene ganando?
Después empezamos a jugar más con colores y empezamos a usar Azul y Rojo para cada lado (ambos colores amigables para nuestros amigos daltónicos). También dimos feedback de quién va ganando y si hay un empate. Francamente tampoco nos gustaba y había poca información.
Tras jugar media hora con distintas combinaciones, llegamos a un diseño muy simple: El LED de abajo muestra qué equipo saca (Azul o Rojo, siendo el único indicador por color) y los LEDs laterales van “creciendo” para mostrar qué equipo lleva la ventaja y por cuántos puntos. De esta forma tenemos visibilidad concreta del estado del juego, y como el display se cuelga en la pared, es evidente a qué lado corresponde cada indicador.
Al apretar sobre el lado de cada equipo se cuenta un punto para el equipo correspondiente (iluminando el lado de su color) y se generan avisos tanto para cambios de saque como cuando se gana la partida, tornando todo el display del color del ganador hasta que se inicie un nuevo match.
Fun Fact: De obsesivos que somos, estuvimos 20 minutos calibrando los LEDs para que el blanco sea blanco neutro (no el blanco azulado que emiten los LEDs por defecto). Incluso al prender el device, el mismo se prende del mismo Naranja Aerolab que nuestro logo ❤
App
Nada de esto estaría completo sin una API, así que la otra mitad del team se encargó de integrar con la API de Particle para obtener los puntajes y de crear una Web App que actualizara los puntajes de la mesa de ping pong en tiempo real.
El dashboard tiene la particularidad de que puede ser corrido en cualquier browser, por lo que podemos verlo via Chromecast en cualquiera de las TVs de Aerolab, o bien en cualquier mobile o tablet que tengamos a mano.
¿Cómo seguimos?
Como detalle propio del equipo, nos gustaría mejorar ciertos detalles (animaciones y comportamientos), pero claramente el siguiente paso es hacerlo open source, publicando el código y las instrucciones de armado.
No obstante, encontramos un componente RFID (quemamos uno aprendiendo a usar el soldador, pero ya conseguimos varios más), así que queremos conectar el device a las llaves de la oficina que cada uno tiene y tener los partidos jugados por cada uno sincronizados en la web. De más está decir, esto queda para el siguiente sprint :D
Equipo:
Roberto González, Sergio Behrends, Gonzalo Martínez, Alejandro Paniagua
PD: ¡Hay más proyectos de la Hackaton! Podés leer sobre la hackatón y los demás proyectos en Aerolab Stories :D
