Construye tu pizarra de leds colaborativa

En este tutorial te mostraremos cómo hemos montado en Interzonas una pizarra de leds para que cualquiera desde Internet pueda pintar en ella en tiempo real.

La idea

Cuando en Interzonas empezamos a okupar un pedazo de oficina de Biko se nos planteó un reto, de hecho un gran reto. Biko es una empresa que abraza la metodología desde el desarrollo ágil y su sistema organizativo se basa en equipos autogestionados. Y cada equipo tiene su propio nombre y logotipo que cuelga del techo.

¿Qué podíamos hacer para que el cartel de Interzonas fuera especial? Después de darle unas vueltas lo vimos claro: una pantalla de leds que pudiéramos pintar a nuestro antojo, y claro todo controlado por una web, en tiempo real y colaborativo. Y nos pusimos a ello.

El resultado final:

Como se puede ver en el vídeo, hemos conectado un Arduino a una pantalla de leds y a su vez este Arduino a una Raspberry. La Raspberry está conectada a internet con un usb wifi, y mediante la Raspberry nos comunicamos con el arduino que manda la información para encender y apagar los leds.

La idea desde el principio era usar una Raspberry para poder instalar node.js y que hiciera de demonio (de oreja que dice Aitor) . Después de unas pruebas vimos interesante usar el proyecto Firebase para la persistencia de datos y el tiempo real, ya que nos evitaba tener que mantener una base de datos propia.

Nos interesaba tener un interfaz web/humano/máquina, un sistema de donde "cosas" escuchan en internet y actúan en consecuencia, y no al revés, intentar conectarnos a las cosas desde internet, que siempre da problemas.

Componentes de la pizarra leds

Estas son las piezas que hemos usado para montar la pizarra.

• Fuente de alimentación 5v mínimo 2 Amperios
• Cable Mini usb
• Jumpers Hembra
• Raspberry Pi
• Arduino
• Tornillo largos y tuercas
• Placa de metacrilato
• Pantalla leds 16x32 Adafruit (Se puede hacer con otros sistemas)

Montaje

El montaje y los componentes son parte del experimento que realizamos, el mismo resultado se podría obtener de formas diferentes pero este fue el que mejor resultado nos dió.

Estas son las diferentes partes del proyecto:

• Caja: Queríamos poder contener todos los elementos en la propia pantalla.
• Fuente de alimentación: La fuente tiene que alimentar a la raspberry, al arduino y a la pantalla.
• Cableado botonera: Montaje y cableado de la botonera.
• Conexiones: Las conexiones entre arduino y la pantalla.

Caja

Como queríamos poder colgar la pantalla desde el techo y que sólo tuviésemos el cable de alimentación, se nos ocurrió que podíamos usar la trasera de la pantalla como "contenedor" de los componentes. En esta serie de fotos podemos ver el proceso.

Fuente de alimentación

Para la fuente de alimentación se necesita que dé una tensión de 5V y mínimo 2 amperios, ya que para los colores vivos, sobre todo el blanco requiere de mucha potencia. El cableado es un simple conector microusb para la Raspberry Pi e hicimos un empalme con el conector de la pantalla.

Para la conexión de Arduino lo simplificamos mucho. Conectamos el usb de arduino al usb de la Raspberry Pi, de esta manera alimentamos el arduino y a su vez trasmitimos los datos de internet a la pantalla.

Raspberry Pi

Intentamos pintar en la pantalla con la Raspberry pero vimos que el controlador de la misma funcionaba mucho mejor en arduino. Pero teníamos claro que para la conectividad era obligado usar Raspberry, porque con arduino se puede pero los shield de conexión son caros y tediosos. Así que hicimos una instalación básica con la distribución Raspian y una configuración también básica.

Para conectar la Raspberry usamos un usb wifi. Aquí un buen tutorial de cómo hacerlo.

Y configuramos un demonio (es la forma de llamar a un programa que está a la escucha) con el sistema de arranque de ubuntu upstart para que la webapp en node.js se comunique con el puerto serie. Aquí el fichero serialmatrix.conf que va a /etc/init

Node.js

Una vez instalada la distribución en la tarjeta SD, tenemos que instalar node.js. Se puede compilar, pero es más largo que el paseo de frodo a mordor. En este tutorial explican cómo hacerlo con apt, no es un node.js con todos los sacramentos, pero se pueden hacer muchas cosas.

Nosotros necesitamos dos cosas de node.js:

• Hablar con el puerto serie
• Hablar con Firebase

Para la parte del puerto serie hacemos uso del módulo serialport, que lo instalamos con npm install serialport. Este módulo nos permite comunicarnos con el puerto serie ya sea recibiendo información del mismo o enviándola. Aquí la definición básica

Luego explicaremos con más detalle qué es firebase, ya que nosotros sólo usamos el envío de lo recibido desde el servicio firebase al arduino (mediante el puerto serie). Pero en el código siguiente tenemos la forma en la que enviamos los datos recibidos de firebase a arduino por el puerto serie.

Este código es parte central del sistema. pixelDataRef es nuestra referencia de firebase y con sus sistemas de evento pixelDataRef.on (child-added, child-changed, child-removed) y somos notificados cuando alguien ha añadido, borrado o cambiado algún registro de firebase. Desde node.js estamos atentos a esos cambios y vamos a pasar por la misma función var drawPixel lo que recibimos de firebase y con myPort.write mandaremos los datos por el puerto serie a arduino.

Si aún no sabes qué es node.js aquí os dejamos una presentación que hicimos hace tiempo

Arduino/pantalla

Como hemos comentado hacemos uso de arduino para poder controlar la pantalla. La información técnica de la pantalla está en este enlace de Adafruit (¡Qué sería de nuestras vidas sin este ada!)

En este otro enlace explican como hacer las conexiones entre arduino y el conector de la pantalla, y en el código de abajo se ve la relación de conectores (como lo indican en el post).

Una vez conectado el arduino a la pantalla usamos la función: matrix.drawPixel(x, y, matrix.Color333(r, g, b));que nos permite pintar en la coordenada x, y con el color especificado.

El parseo de lo recibido desde nodejs en arduino es muy pobre en próximas versiones lo mejoraremos, pero ahora hace su función.

Firebase

Firebase Como dicen ellos es una poderosa api de almacenamiento y sincronización en tiempo real. Es la caña, toda una navaja suiza, un proyecto que recientemente lo ha adquirido google y que demuestra que está para quedarse.

En definitiva, lo que hace firebase es simple pero brutal, permite la persistencia de datos tipo clave/valor, pero aporta un sistema de sincronización y notificación en tiempo real, osea que cuando alguien guarda algo el resto de clientes que están conectados a esta tabla (ya sea desde un móvil o web) son notificados de ese cambio.

Código

Parte del código ya lo hemos ido comentando, pero tenemos que hacer una mención especial al desarrollo realizado en AngularJS que lo usamos para poder pintar. Y el esquema de funcionamiento que sigue es similar al ya comentado en varias ocasiones, lo único que le hemos añadido ha sido una serie de funcionalidades para que emule una pizarra en la que pintar.

La webapp también permite guardar y recuperar dibujos creados previamente como vemos en esta imagen:

Todo el código del proyecto es accesible desde este repositorio.

En el repositorio está el código de:

• Arduino
• Demonio nodejs
• Angularjs

Esto es un experimento y como tal lo tratamos en interzonas, faltan muchas piezas por mejorar pero tienes la posibilidad de comentarnos lo que encuentres raro tanto aquí como en el repositorio (haciendo pull-request) o usar nuestro formulario de contacto de interzonas.

Con el experimento queríamos poder trabajar con nuevos soportes y este desarrollo nos permite abrir esas posibilidades. En esta ocasión lo hacemos con una pantalla de leds de 16x32 pero en otras ocasiones, quien sabe, ¿con una fachada de leds...?

También te puedes poner en contacto con nosotros si quieres que organicemos un taller o se te ocurre alguna idea donde te podríamos ayudar, por muy loca que sea.