Pintor 8x8: 6 pasos

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:39

Una herramienta sencilla para crear gráficos en un módulo LED de 8x8.

Chicos, soy malo. No, muy, muy mal cuando se trata de dibujar iconos. Especialmente dibujando íconos en una cuadrícula de 8x8, como esas pequeñas pantallas de matriz WEMOS para un WEMOS D1. Además de eso, apesto contando filas y transformarlas en una representación binaria.

Así que hice trampa y creé esta pequeña cosa llamada pintor de 8x8.

Paso 1: ¿Qué es eso?

El ESP8266 aloja una página web que representa la cuadrícula de 8x8 de la pantalla matricial: haga clic en uno de estos puntos y se volverá rojo / encendido, haga clic de nuevo y se apagará / negro. Su pantalla hace lo mismo, por lo que puede ver su obra de arte en tiempo real en hardware real. Todavía apesto dibujando algo en eso, pero ahora sé muy temprano cuando apesto:)

En el lado derecho de la cuadrícula (en su pantalla) encontrará la representación binaria lista para copiar y pegar en forma de una matriz de bytes (almacenada en progmem) - simplemente agárrelo y péguelo en su código. Siéntase libre de adaptar el nombre de la matriz, y si progmem no funciona para usted: son 8 bytes, por lo que probablemente no sobrecargue su memoria;)

Paso 2: ¿Qué necesitas?

Esto está diseñado con un WEMOS D1 en mente, por lo que necesita el D1 y un protector LED de matriz LOLIN: D1:

Escudo LED de matriz:

- estos no son enlaces de afiliados - aquí es donde obtengo mis cosas. Siéntase libre de comprar en cualquier otro lugar.

Paso 3: ¿Software?

Descarga el proyecto aquí:

El proyecto viene en dos archivos: uno es el boceto y el segundo contiene la página web que enviará su ESP.

Si no se siente cómodo descargando un ZIP desconocido: aquí está el boceto principal:

… Y la página web:

Si no usa el ZIP: ambos archivos van a una carpeta. La parte de la página web debe estar en un archivo llamado "index_html.h"; el boceto se puede llamar de cualquier manera, siempre que el nombre de la carpeta sea el mismo que el del INO. Sí, Arduino …

Paso 4: ¿Bibliotecas?

Seguro. Para compilar, debe tener instaladas estas bibliotecas:

Administrador de Wifi

..y la biblioteca para la matriz de LED: https://github.com/thomasfredericks/wemos_matrix_…..wich le pedirá que instale la biblioteca Adafruit GFX.

Ambas bibliotecas (¿las tres?) Se pueden obtener a través del viejo Administrador de bibliotecas.

Paso 5: Entonces, ¿cómo hacemos que esto funcione?

Después de cargar el código, su pantalla LED hace una pequeña animación, indicándole que quiere conectarse a su Wifi. Así que tome su teléfono, abra su WLAN, busque una nueva WLAN llamada

8x8painter CONFIG

- conéctese a la nueva WLAN - su fone debería preguntar, si desea conectarse a ese WIFI (lo siento, fone alemán aquí - no estoy seguro de lo que dice el mensaje en inglés) - toque eso. Si no aparece dicho mensaje: abra un navegador (en su teléfono que esté conectado al WiFi del ESP) y diríjase a "https://1.2.3.4".

¿Pantalla blanca, grandes botones azules? Ese es el Administrador de Wifi.

Toca "Configurar Wifi", selecciona tu wifi y escribe tu contraseña. Pulse guardar: la animación debería detenerse (la matriz se vuelve negra); el ESP ahora está conectado a su wifi.

Abra un navegador de su elección y use esta dirección:

pintor 8x8

- eso es todo: ahora debería ver la interfaz principal - ¡¡feliz construcción de iconos !!

Paso 6: notas

No solo apesto dibujando íconos, aunque apesto al comentar. Normalmente opto por nombres de variables expresivos, por lo que el boceto no debería ser tan difícil de seguir.

Sí, me encantan mis funciones: la forma más fácil de leer el boceto es contraer todo y verificar las funciones por separado.

Dejé algunas declaraciones Serial.print en el código para la depuración; verificar la consola en serie mientras se ejecuta puede ser una buena idea:)

La página web está almacenada en una cadena larga, ¡el infierno y la condenación, cadenas! ¿Cómo podría? Bueno, tengo el espacio para eso, no lo cambio en absoluto (Globals From Hell), así que realmente no me importa. Si lo hace: adelante, hágalo mejor. Esa es la belleza de la programación.

La página web hace prácticamente todo en JavaScript, lo siento; fue la solución más compacta que se me ocurrió. La comunicación entre ESP y el navegador se podría hacer mucho mejor con webSockets, pero lo que tenía en mente mientras escribía era GET-Strings, recuerde: nunca toque un sistema en ejecución:)

La página web se construyó usando Firefox, perezoso, no probé chrome / edge / opera / anythingYouUse. Si algo se rompe … prueba con Firefox.

2020 por Detlef Modificar. Software libre - ¡diviértete con él!