Cómo: Wall Graffiti en red

¿Se pregunta qué hicimos con nuestro servidor web en un trabajo de tarjeta de visita desde la semana pasada? Está alimentando una pared de graffiti LED gigante. Las animaciones pueden ser enviadas por el usuario utilizando el diseñador de Internet. Puedes ver un feed en línea de animaciones individuales también. La interfaz de Internet se ejecuta en el motor de la aplicación de Google para una escalabilidad máxima, así como la resiliencia.

En la forma de hoy, cubrimos todo el INS, así como las outs de construcción de su propia pared de graffiti en red.

Descripción general del concepto

Las secuencias de graffiti están diseñadas en Internet con el diseñador de animación JavaScript. Las secuencias completadas se validan, así como se mantienen en una base de datos; Hicimos baños de la base de datos para PHP / MYSQL, así como las aplicaciones de Google (Python). Las secuencias están sindicadas a partir de una simple API de DataFeed. Nuestro Mini servidor web recupera las secuencias de animación de la alimentación, así como los almacenan en caché en una tarjeta SD. Finalmente, las secuencias se muestran en una matriz LED gigante.

Pantallas grandes y de baja resolución
Nuestra pantalla de graffiti es un cuadrado de 1 metro, 5 × 5 matriz de LEDs. Está influenciado por la mesa de café Daft Punk ofrecida por Hábitat hace unos años. La mesa punk Daft se engendró muchas réplicas de bricolaje, incluida esta excelente instructable para construir una mesa punk Daft. Con el tiempo, el patrón se transformó en una serie de permutaciones, como nuestra “mesa de punk Daft”, colgando de la pared. Proporcionó la variedad de muebles grandes y parpadeantes, buscamos un término mucho mejor que “Daft Punk Table”. Llegamos con “pantalla grande, de baja resolución” o LLRD para corta (pronunciada ‘manteca’).

La mesa punk Daft original se encendió al azar, o en tiempo a la música. [Mathieu Roncheau] La tabla de réplicas mantuvo las secuencias de animación en una EEPROM. Nuestro primer estilo llevó esto un paso más allá al almacenar los datos de animación en una tarjeta SD formateada por la grasa. Ahora, hemos colocado al diseñador en Internet para asegurarse de que podamos recuperar las secuencias de animación enviadas por el usuario a través de Internet.

Interfaz en línea
Las animaciones de graffiti para la LLRD se producen con un simple fabricante de secuencias de JavaScript. Mire un feed en línea de las animaciones enviadas por el usuario, o inténtelo usted mismo. El diseñador de secuencias de graffiti, así como los billetes de datos escritos, para PHP / MySQL, así como el motor de la aplicación de Google, se incluyen en el archivo de trabajo.

El diseñador de secuencias de graffiti de JavaScript es fácil de usar:

Haga clic en las casillas para alternar los LED que se muestran en cada marco de su animación.

Use los botones de flecha para navegar entre marcos.

La copia de seguridad, así como las herramientas de vuelta, proporcionan un método simple para guardar su secuencia localmente en un archivo de texto.

“Agregar cuadros de texto” Inserta los marcos de caracteres que utilizan una fuente de bits. Si no le gusta la fuente predeterminada, solo produce una nueva:

Haga clic en el botón ‘Editar fuente’ para tonelada la fuente existente.

Haz tus modificaciones.

Haga clic en ‘Actualizar fuente’ para reemplazar el estilo de fuente predeterminado con los nuevos cuadros.

La matriz de estilo de fuente es una tabla de búsqueda de mapas de bits para los caracteres ASCII entre área, así como Z (caracteres ASCII 32 a 90, “!” # $% & ‘() * +, -. / 0123456789:; <=>? @ABCDEFGHIJKLMNOPQRSTU VWXYZ”). Para agregar un nuevo estilo de fuente de forma permanente, simplemente pegue el conjunto de fuentes actualizado en el código Javascript que cumpla con la ‘Font =’ variable. La opción “Formato de fuente” en la caja de respaldo producirá mapas de bits formateadas variables que se preparan para pegar sobre la fuente existente.

Cuando haya completado una animación, ingrese su nombre en la casilla de autor, así como en el envío. El código de secuencia se producirá, así como se envió al servidor.

El diseñador de graffiti basado en Internet JavaScript está influenciado por una versión sin conexión por [Mathieu Roncheau]. [Mathieu] El código fuente de Delphi, así como el ejecutable, se archivan aquí. Nuestro diseñador con sede en JavaScript tiene algunas funciones adicionales, se basa en el navegador, así como no necesita que ejecute un archivo .exe desconocido. A pesar de que está destinado a ejecutarse en la web, el diseñador también funcionará desde una copia regional en su computadora.

El script funcionará para cualquier tipo de matriz arbitraria, simplemente modifique los DPTROWS, así como las variables DPTCOLS a las dimensiones de su LLRD.

El Visor en línea utiliza solicitudes asíncronas HTTP (AJAX-ISH) para mostrar una fuente de transmisión de animaciones de graffiti presentadas por el usuario. Intentará establecer una cookie para asegurarse de que pueda comenzar con secuencias nuevas cada vez que se cargue la página. Si no habilitas la cookie, simplemente comenzará a 0 en su próxima visita.

Formato de mapa de bits de secuencia
El constructor de secuencias emite cada columna como un mapa de bits formateado ASCII. El mapa de bits para cada columna está separado por un espacio, así como cada marco completo se termina con una línea de alimentación de línea (NR). Este estilo fue definido por el programa de secuenciador PC [Mathieu Roncheau], lo mantuvimos preservando la compatibilidad hacia atrás.

Los datos de mapa de bits se reducen a cero en la esquina superior izquierda del marco. Las células superiores de cada columna son bit 0, así como las células inferiores son bit 4. Parece más racional para cumplir con la notación matemática básica, así como la utilización de la celda inferior izquierda como el origen, sin embargo, no estamos de acuerdo con la especificación. .

El valor foR Se descubre cada columna tratando los LED iluminados como 1 en un número binario, así como convertir a decimal. Por ejemplo, la primera columna anterior es 10000 binario, o 1 decimal. La última columna es 11111 binario o decimal 31. Puede confirmar nuestras conversiones utilizando una calculadora binaria-decimal en Internet.

Tenga en cuenta que los mapas de bits de la columna están representados por equivalentes ASCII de los valores decimales reales. Los dígitos numéricos se codifican de acuerdo con la norma ASCII, que es el valor real más 0x30h. Además, los números de varios dígitos se mantienen como caracteres privados; 24 En el ejemplo se mantiene como 0x32h, 0x34h.

Lado del servidor
El backend es una simple pieza de aplicación de software que acepta secuencias de animación, hace alguna validación, así como las ahorra en una base de datos. Las secuencias mantenidas son accesibles desde la API de DataFeed.

Backend
Componemos dos versiones del backend; Ambos están en el archivo de trabajo. El primero es un simple backled PHP / MySQL para un volumen bajo en Internet LLRDS, la otra es una versión de Google App Motor / Python que debería poder manejar un montón de hackear a los lectores de un día.

Es realmente simple componer un backend para su plataforma preferida. Modificación de la acción de tipo de envío del diseñador de graffiti para apuntar a su backend; Ambas versiones publican actualmente en backend.php. Ahora, atrape a la ‘Autor’, así como las variables ‘SEQ’ en su servidor y guárdelas en una base de datos.

Nuestro backend realiza un poco de validación para evitar ataques en el sistema. Implementamos cheques en fases para que no desperdicien también muchos recursos. Primero, el tamaño general de la presentación se inspecciona para asegurarse de que está dentro de la razón. A continuación, la secuencia se divide en marcos privados, así como cada uno se inspecciona de forma. Si pasa la validación, se guarda en la base de datos.

Alimentar la API
Las secuencias son accesibles con una simple API de DataFeed. La API tiene dos variables:

Max: el número máximo de secuencias para enviar.

Último: la última secuencia de lectura, solo se envían datos más nuevos.

El DataFeed comienza cada secuencia de animación con el carácter ‘#’, cumplido por un número de identificación, así como la alimentación de línea. ‘#’ Es un valor de mapa de bits no válido que alerta a los clientes al comienzo de una nueva secuencia. Los clientes pueden utilizar el número de identificación con la última variable de la API para obtener secuencias frescas en cada tirón.

Hardware
Mini servidor web

Utilizamos nuestro servidor web PIC24F Mini como cliente habilitado para TCP para este proyecto. Verifique nuestros artículos anteriores para descubrir exactamente cómo desarrollar el servidor web.

Mesa punk Daft
[Mrgalleta] tiene un fantástico tutorial de construcción para la parte real de la tabla de una réplica de mesa punk Daft. Sin embargo, un LLRD puede tomar muchas formas, como nuestro colgante de pared.

La mayoría de los estilos de réplica de mesa de punk Daft Punk se administran por un expansor de salida 74HCT595 (PDF), así como la matriz de transistores ULN2803A (PDF). La placa del conductor de esta instructiva se combina tanto en un PCB de Agujero fácil de grabar, a través del hoyo. Cada tabla de controladores tiene dos 74HTC595s, o 16 salidas; Necesitábamos dos tablas de controladores para nuestros 25 LLRD de Cell.

El 74HCT595 es un expansor de salida en serie que está gestionado por una interfaz similar a SPI. Se inicia una actualización eliminando la línea de pestillo. La especificación de cada LED (ON o OFF) se coloca en la línea de datos, cumplida por un pulso del reloj. Los bits se colocan en los pasadores de salida cuando la señal del pestillo vuelve a alto. Cascadas de datos del PIN de salida de datos de uno 595, a la entrada de datos de la siguiente. Marque este tutorial 74xx595 para un vistazo detallado para interconectar este dispositivo.

Es importante tener en cuenta que utilizamos el 74HCT595, así como el 74HC595. La parte “HCT” funciona a través de una amplia variedad de voltajes, incluido el voltaje de operación del Mini servidor web: 3.3Volts.

Las fuentes 74HCT595 actuales, lo que significa que probablemente podamos ejecutar un solo LED directamente de cada salida a 3.3Volts. Dado que la mayoría de los LLRD tienen 2-8 LEDs por celda, que opera entre 5, así como 24 veces, utilizamos una matriz de transistor ULN2803A para cambiar la carga más grande. El ULN2803A se hunde corriente, en lugar de abastecerlo; Cambia la conexión a tierra de los LED, en lugar de la potencia.

Nuestro LLRD tiene dos LED por celda, que se ejecuta a 20 mA con un suministro de 5 voltios, así como una resistencia de 56Ohm. Soldamos los LED alrededor de un pedazo de cartón, en lugar de grabar 25 placas de circuito pequeño.

Conexiones

Una conexión de cable de 5 entre el mini servidor web, así como las juntas de controladores, controlan el LLRD.

Servidor
Llrd
Descripción

V +
Vsys
3.3Volt suministro para los 595s.

Gnd
Gnd
Conexión a tierra compartida.

Ra0
Datos en
Señal de datos.

RA1
Reloj
Señal de reloj.

Rb15
Pestillo
Señal de pestillo.


Vid
Fuente de alimentación LED.

Firmware
Nuestro firmware está escrito en C Utilizando MPLAB, así como el compilador de demostración de Microchip C30. Descubra más sobre la programación, así como trabajar con el PIC24F en nuestro tutorial de introducción. Se incluyen dos versiones de firmware en el archivo de trabajo. El primero solo lee todos los datos de secuencia * .SEQ de la tarjeta SD, la segunda versión agrega la pila de Microchip TCP / IP para conectividad web. diScover Más información sobre la tarjeta SD de Microchip, así como bibliotecas TCP / IP en nuestro mini tutorial del servidor web.

Todas las funciones gráficas, incluido el cliente TCP, se pueden descubrir en GraffitigFX.C. El cliente TCP se basa en el ejemplo genérico del cliente TCP que está incluido con la pila TCP / IP. Cumplimos con el enfoque de la multitarea cooperativa de Microchip, así como también rompimos nuestro código en pequeños segmentos que comparten el tiempo de CPU con el resto de la pila TCP / IP.

El cliente se enlaza regularmente con la fuente de datos, así como solicita nuevas secuencias. Las nuevas secuencias se analizan para los números de identificación, así como se adjuntan a los datos temporales en la tarjeta SD. La última identificación detectada se escribe en el extremo extremadamente final del archivo de datos temporales, así como se adjunta a la última variable de la URL en las solicitudes de datos posteriores. Registramos la identificación al final de los datos para evitar las compuestas repetidas al mismo sector en la tarjeta SD. Idealmente, el desgaste de la nivelación dentro de una tarjeta SD de 1 GB es adecuada para evitar problemas para las primeras décadas de uso. Si no hay conexión de red disponible, el gadget reproduce cualquier tipo de datos * .SEQ en el directorio raíz de la tarjeta SD.

Una función de analizador decodifica marcos, así como los envía a la LLRD. El analizador es relativamente robusto a los errores. Los datos deficientes que lo hacen más allá de la rutina de validación del backend se rechazará en el nivel de gadget sin efecto enfermo. Si algunos marcos corruptos manejan para mostrar, apenas se notarán entre los otros patrones abstractos que se reproducen en la pared.

1
2
3
#define gfx_use_tcp_client // incluye el cliente TCP
#define gfx_tcp_only // solo haga TCP, así como el archivo TEMP, no revise otros datos en la tarjeta SD.
#DEFINE GFX_CLEAR_TEMP_ON_RESET // Eliminar opcionalmente los datos TEMP en RESET. Ideal para el motor de la aplicación de Google …

Tres define al principio de Graffitigfx.c Administrar qué características se incluyen en el tiempo de compilación. Gfx_use_tcp_client compila el firmware con el cliente TCP habilitado, comenta este significado para una versión de una tarjeta SD solo del firmware. GFX_TCP_ONLY ignora cualquier tipo de datos .SEQ en la tarjeta SD, así como solo reproduce secuencias descargadas desde la web. La opción GFX_CLEAR_TEMP_ON_REESET eliminará los datos de secuencia temporal en cada reinicio; Esto es útil para las bases de datos que tienen ID de registro no secuenciales, como el DataStore de Google. En el futuro, estas definiciones podrían modificarse a las variables establecidas por un Datos de configuración en la tarjeta SD.

Tomándolo más
Nuestro firmware simple es un punto de partida constante para una pared de graffiti en Internet. Mientras estábamos trabajando en este trabajo, nos encontramos con una tonelada de características adicionales que no lo convirtieron en el prototipo.

Mostrar la dirección IP en el inicio.

Un DATOS DE CONFIGURACIÓN en la tarjeta SD que establece la URL de DataFeed, actualizar la frecuencia, así como otras variables.

Un telnet o interfaz web para la configuración remota.

Un servidor TCP para acceder directo a la ganancia a la pantalla; Empuje los marcos de animación desde una PC remota.

Un cliente de correo que reporta errores, así como la información de la condición.

Mensajes de progreso durante la puesta en marcha, así como las descargas de secuencia. Tarjeta SD no presente / errores completos.

Desplazamiento de las alimentaciones de Twitter.

¿Tus pensamientos?

No se acaba de revisar sobre este proyecto, contribuya con algunos marcos a la pared de graffiti.

La próxima vez, presentaremos nuestro proyecto Final Pic24F, una mochila Ethernet para el pequeño toque de LCD Nokia de $ 20 de $ 20 de SparkFun Electronics.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post