PixelWall: 7 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42

¿Conoces el proyecto Pixel-Table? Tuve la idea de realizar tal cosa de píxeles, pero no como una mesa, sino para ponerlo en la pared.

Para poder acostarme en el sofá y jugar algunos juegos mientras me relajo.:)

Los juegos implementados son:

• Tetris
• Invasores espaciales
• Serpiente
• Dibujo de píxeles

las funciones adicionales son:

• Mostrar hora actual
• Mostrar animaciones de color

PixelWall tiene un ESP8266 para que pueda conectarse a mi WLAN doméstica. Pero también es posible utilizar PixelWall como punto de acceso y conectarse directamente a él.

Para facilitar el uso de mi PixelWall, el muro ofrece un sitio web para controlarlo después de conectarse. Todas las aplicaciones se pueden controlar / reproducir a través de la página web. Por lo tanto, no es necesario instalar ningún software para su uso.

Además, hay un controlador NES que facilita la reproducción de los juegos.

Fuente abierta

Todo el software y los dibujos mecánicos que puse en github: https://github.com/C3MA/PixelWall Siéntase libre de usarlo para su propio proyecto.

Paso 1: Comenzando con lo Electrónico

De otro proyecto hay una placa de circuito impreso existente con LED WS2812. El PCB tiene 3 filas con 12 LED cada fila.

Decidí usar este PCB 6 veces. Entonces obtengo una matriz LED de 12x18.

El primer paso fue soldar todos los 216 LED, alrededor de 100 condensadores y un ESP8266.

La soldadura manual necesitó unas 10 horas.

Después de una primera prueba rápida, se dio cuenta: todo está funcionando.

Entonces podemos pasar a la parte mecánica.

Paso 2: creación del mecánico

En primer lugar, necesitamos un separador para cada píxel. La idea es unir la banda horizontal y vertical a través de un corte en V.

Cada banda tiene un grosor de 3 mm y una altura de 17 mm. Se cortan de una placa HDF mediante un cortador láser.

Todos los scetches para el cortador láser se dibujan en FreeCad (llamado "Leiste" en la carpeta mecánica del proyecto github)

La cuadrícula viene dada por el diseño de la PCB. Tiene un ancho de columna de 28 mm y una altura de fila de 31 mm.

La siguiente pregunta es: ¿Cómo arreglar las bandas en la PCB? Pegar no es una buena idea, porque debería ser posible desmontarlo si algo está defectuoso. Así que decidí arruinarlo. Pero un tornillo dividirá la banda delgada de 3 mm. Así que imprimí con una impresora 3D un bolsillo para la banda (esta es la parte llamada "Halter" en el proyecto github). Esto funcionó bastante bien para arreglarlos en la PCB.

El siguiente paso es conseguir un marco para ello. Hay algunas tiendas en línea que ofrecen cortar marcos de fotos individuales. Así que pedí un marco con un tamaño de 343 mm x 565 mm.

El marco tiene un orificio adicional en la parte inferior para la fuente de alimentación.

La placa frontal de plexiglás también la pedí en línea. Es un ópalo WN770 Milchglasoptik LD45% tamaño: 567x344x2mm

Tiene una translucidez del 45%.

Poniendo todas las partes juntas en el marco.

Al final se atornillarán unas tiras en la parte trasera, para que todo quede fijo y no se caiga.

Para tener una opción para la operatividad del pixelWall sin ninguna comunicación WLAN, creé un panel de control enchufable que se puede insertar opcionalmente en el lado derecho del marco (llamado "Bedieneinheit" en el proyecto github).

Paso 3: Software - Conceptos básicos

Uno de los casos de uso es jugar juegos en PixelWall.

Pero escribir un juego de píxeles siempre necesitará un entorno de depuración útil. No conozco ninguna forma de depurar el controlador ESP8266 de una manera adecuada. Entonces decidí simular todo el código en mi PC. El código ESP está escrito en Arduino C ++, así que utilicé el lenguaje Visual Studio C ++ / CLI para la simulación en PC. Existen algunas diferencias entre el lenguaje C ++ estándar y el lenguaje C ++ / CLI. Por ejemplo, en C ++ / CLI no puede crear un objeto de tipo String, debido a la recolección de basura no se permite crear un objeto o referencia / puntero a dicho objeto. En C ++ / CLI tienes que usar identificadores: String ^. Pero tales identificadores no existen en el estándar C ++. Así que tuve que ser creativo para unir ambos mundos. Resolví esto creando un archivo Arduino.h propio para la simulación. Este archivo simplemente anula en la simulación todas las cadenas a través de una definición "#define String String ^". Esta no es una forma común, pero funciona:) Excepto por algunos pequeños cambios de compilación, todo el código ESP es compilable en Visual Studio C ++ / CLI.

Matriz de LED

La primera clase que escribí es la clase LED-Matrix. Esta clase maneja el control y mapeo de los LED WS2812.

Esta clase se escribió dos veces: una para el controlador ESP8266 (LEDMatrixArduino.cpp) y otra que controlará las formas en la GUI de formulario en la simulación (LEDMatrixGUI.cpp).

Esta clase proporciona algunos métodos básicos para configurar y borrar un LED individual por su columna y fila.

Además, proporciona una función setBrightness. Este valor se considerará si se configura un LED. Por lo tanto, todos los comandos del conjunto de LED se pueden realizar con brillo total. Por ejemplo: si el brillo se establece en 50% y se llama a la función setLed () con RGBColor (255, 255, 255), establecerá el LED en 127, 127, 127.

Panel LED

Además de la clase de matriz LED, puse una clase de panel LED. Esta clase proporciona algunas funcionalidades útiles para cualquier aplicación. Proporciona dos capas independientes. Esto puede resultar útil para la aplicación. Por ejemplo, en el juego de tetris: layer0 es para las piedras fijas en la parte inferior y layer1 es para mostrar la piedra que cae. Entonces, en cada ciclo, la piedra cae un píxel al fondo, la aplicación simplemente puede borrar la capa1 y dibujar la piedra en su nueva posición. No es necesario volver a dibujar todas las piedras fijas en la parte inferior.

Además, el panel proporciona

printImage - para imprimir algunos iconos como emoticonos o símbolo WLANprintDigit - para imprimir un dígito en una posición específica printFormatedNumber - para imprimir un número con prefijos zerosprintNumber - para imprimir un número enteroprintLineH - línea horizontal con longitud específicaprintLineV - línea horizontal con longitud específica

Paso 4: Software - Concepto de aplicación

El concepto general del Pixel Wall es:

• Cada aplicación tiene su propio nombre
• Una aplicación se inicia llamando a la URL pixelWall que incluye el nombre de la aplicación (por ejemplo: 192.168.4.1/tetris)
• La URL también puede tener parámetros GET que se reenviarán a la aplicación.
• Cada aplicación debe ofrecer un sitio web que se muestra en el navegador.
• Opcionalmente, este sitio web puede abrir una conexión websocket a la aplicación para interacciones rápidas
• La aplicación puede utilizar esta conexión websocket para comunicarse con la interfaz web.
• Además de la interfaz web, la aplicación recibe, además, eventos de botón pulsador desde el panel de control y el controlador NES.

Interfaz de aplicación

Para facilitar el desarrollo de nuevas aplicaciones para PixelWall, creé una interfaz para aplicaciones llamada "IPixelApp.h". Esta interfaz contiene 8 definiciones:

• inicio vacío virtual () = 0;
• final de vacío virtual () = 0;
• bucle vacío virtual () = 0;
• virtual void newWebsocketData (uint8_t * carga útil, tamaño_t longitud) = 0;
• Virtual WebsiteResponse_t getWebsiteResponse (parámetro de cadena) = 0;
• buttonEvent de vacío virtual () = 0;
• timerTick de vacío virtual () = 0;
• virtual String getName () = 0;

inicio / fin: esta función se llama si la aplicación se inicia / finaliza porque se inicia otra aplicación

bucle: esta función se llama desde el bucle principal del programa principal. Esta llamada es irregular y está fuera de una interrupción.

newWebsocketData: esta función se llama si la interfaz web envió datos.

getWebsiteResponse: el programa principal lo utiliza para obtener la página web que debe responder a la solicitud.

buttonEvent: se llama si se presiona o suelta cualquier botón del panel de control.

timerTick: esta función se llama cada 10ms, desencadenada por una interrupción del temporizador. Se puede utilizar como base de tiempo, pero no debe contener elementos que requieran mucho tiempo, porque es un contexto de interrupción.

getName: debe devolver el nombre de la aplicación para la URL

Paso 5: Software - Aplicaciones

Las siguientes 7 aplicaciones están implementadas en la versión actual:

Aplicación predeterminada

Esta es una aplicación especial que muestra el estado actual de WLAN de PixelWall. Si la pared puede conectarse a una WLAN actual, mostrará la dirección IP que obtuvo de la red.

Si no fue posible (no tiene ssid configurado o la WLAN no está presente o la contraseña es incorrecta) se abrirá un punto de acceso. En este caso, puede conectarse a PixelWall a través de la IP de punto de acceso predeterminada de ESP8266: 192.168.4.1

En la interfaz web, esta aplicación presenta 6 botones. Pulsando el botón puede iniciar la aplicación correspondiente.

Aplicación de configuración

Esta aplicación para configurar el SSID y la contraseña de WLAN. Simplemente inserte las credenciales de su WLAN y en el próximo inicio de PixelWill intentará conectarse a esta WLAN.

Juegos

Hay tres juegos clásicos programados en PixelWall:

• Tetris
• Serpiente
• Invasores espaciales

Todos los juegos se pueden jugar a través de la interfaz web o con el controlador NES.

Aplicación de imagen

Esta es una aplicación que muestra colores en PixelWall. Puede elegir si debe ser un arco iris en movimiento, difuminarse en diferentes colores, mostrar colores estáticos o simplemente mostrar píxeles de colores aleatorios.

Pixel It

Con esta aplicación, puede configurar cada píxel por separado tocando con el dedo en la interfaz web. Para que puedas hacer algunos dibujos divertidos:)

Paso 6: Control a través de la extensión de Twitch

Hay una extensión en Twitch llamada GetInTouch. Esta extensión permite integrar proyectos de Arduino en su transmisión en vivo, para que los espectadores puedan controlar su arduino durante la transmisión.

La biblioteca Arduino para esto está escrita para Arduinos. Pero resultó que probablemente también se ejecuta en ESP8266.

Para usarlo en el Stream son necesarios los siguientes pasos:

• Integre la biblioteca GetInTouch en el código (vea el tutorial)
• Conecte el pixelWall con su PC a través del convertidor USB / RS232 (que también se usa para flashear el ESP)
• Instalar la aplicación GetInTouch desde el sitio web
• Instale GetInTouch Extension en su canal de Twitch (vea el tutorial)

Paso 7: Control mediante el mando de Nintendo NES

Después de usarlo por un tiempo, resulta que jugar en un teléfono móvil táctil no es tan fácil. De vez en cuando, se pierden los botones porque no hay retroalimentación en su dedo, ya sea que esté sobre el botón o no. Además, a veces, la comunicación de Websocket puede filtrarse por un corto tiempo.

Por eso decidí comprar un viejo mando de Nintendo NES. Este controlador tiene una interfaz muy simple. Es solo un registro de desplazamiento 4021 que se ejecuta con 3, 3V. Por lo que se puede conectar directamente al ESP8266.

Todos los eventos de botón en el controlador se reenviaron a la aplicación en ejecución a través de la función buttonEvent ().