Editor de carátulas de Clockwise XE1E: diseña tu reloj LED desde el navegador

En mi reloj Clockwise XE1E, una matriz LED de 64×64 píxeles con un ESP32, cada carátula es un archivo JSON que dice qué dibujar y dónde. Sin embargo, escribir ese archivo a mano es tedioso: coordenadas, colores en RGB565, capas que se redibujan y capas que no. Por eso hice mi propio editor de carátulas, que corre en el navegador y te deja diseñar viendo el resultado píxel por píxel.

Además, no hay que instalar nada. Abres el editor de carátulas en xe1e.github.io/Clockwise-XE1E/clockface-editor y dibujas. Luego, cuando te gusta, lo mandas al reloj por WiFi o lo exportas. Te cuento qué hace.

Cómo está organizado el editor de carátulas

La pantalla del editor de carátulas tiene tres zonas. A la izquierda están las herramientas. En el centro está el lienzo de 64×64, que simula el panel. Por último, a la derecha están las propiedades: los datos de la carátula (nombre, versión, autor, color de fondo y velocidad de la animación), los del elemento seleccionado y la lista de capas.

Para agregar algo, primero eliges una herramienta y haces clic en el lienzo. Luego lo arrastras con el mouse o lo mueves de a un píxel con las flechas del teclado. Las capas se dibujan de abajo hacia arriba; también puedes subirlas, bajarlas, duplicarlas o borrarlas.

Cada elemento puede ir en la parte fija de la carátula, que se dibuja una sola vez. En cambio, los del ciclo se redibujan todo el tiempo. Así la hora avanza sin redibujar el fondo.

Los elementos que puedes agregar

• Fecha y hora, con el formato que quieras (H:i, d/m, D d…), incluida la hora en palabras en español: «DIEZ» y «y media».
• Texto fijo, con la fuente que elijas. Además, ves cómo luce cada tipografía antes de aplicarla.
• Imágenes PNG, que el editor de carátulas convierte al formato que guarda el archivo.
• Sprites animados: varios cuadros con su tiempo entre cuadro y cuadro, pausa al final y movimiento. También trae un editor para dibujarlos píxel por píxel.
• Rectángulos (contorno o rellenos), líneas y círculos (contorno o rellenos). Ojo: el firmware del reloj todavía no dibuja los círculos.
• Sensor: la temperatura, la humedad o la presión del BME280 del reloj, con sus decimales y su unidad.

Por otro lado, los colores los eliges con un selector normal. Después, el editor hace la conversión a RGB565, el formato de 16 bits que usa el panel.

Ver cómo va a quedar

• Zoom de 4x a 16x y cuadrícula para alinear. Incluso hay una opción de píxeles redondeados que imita cómo se ven los LEDs reales.
• La fecha y la hora se actualizan cada segundo. Sin embargo, puedes fijar una hora y una fecha de prueba; por ejemplo, para revisar un mes con nombre largo. Lo mismo con el sensor: escribes una temperatura, una humedad y una presión de prueba.
• Una imagen de referencia semitransparente para calcar un logo o un dibujo. De hecho, también puedes convertirla en el fondo de la carátula.
• Adaptar imagen: recortas cualquier foto o dibujo y lo reduces a 64×64 con una vista previa del resultado.

Del editor de carátulas al reloj

El botón «Probar en Reloj» manda la carátula al reloj por WiFi. Primero escribes su IP (el editor la recuerda) y en unos segundos la ves en el panel. Es una vista previa temporal, así que si reinicias el reloj, regresa a su carátula guardada. Por eso puedes ajustar y volver a enviar hasta que quede.

Ojo con un detalle: el editor de carátulas publicado está en HTTPS y el reloj responde por HTTP. Por lo tanto, el navegador puede bloquear ese envío. Si te pasa, abre el editor desde una copia local del repositorio.

Al exportar, el editor revisa la carátula y te avisa si encuentra algo raro. Además, genera la miniatura automáticamente. La miniatura va al principio del JSON, ya que es lo que el reloj lee para mostrar la vista previa en su interfaz web.

Después puedes copiar el JSON, descargarlo o guardarlo directo en una carpeta. Con «Importar» cargas cualquier carátula para modificarla. Aparte, hay una herramienta para generar las miniaturas de muchas carátulas de una vez.

Las herramientas que acompañan al editor de carátulas

• Diseñador de dígitos: para dibujar los números del 0 al 9 del tamaño que quieras, como los dígitos grandes del reloj nocturno.
• Editor de fuentes: para crear o modificar tipografías pixeladas carácter por carácter, partiendo de una existente o desde cero.
• Conversor de fuentes: convierte fuentes BDF, el formato clásico de fuentes de mapa de bits, al formato que usa Clockwise. En mi artículo sobre fuentes BDF te cuento más de ese formato.
• Galería: carátulas listas para descargar, mías y de la comunidad de Clockwise.

Lo que hay que saber

• La memoria del ESP32 es limitada. Las formas geométricas ocupan mucho menos que las imágenes. Por eso conviene usar imágenes pequeñas y pocos cuadros en los sprites.
• El color es de 16 bits. Los degradados suaves se ven escalonados en el panel. En cambio, los colores saturados y el estilo pixel art funcionan mejor.
• Guardar en carpeta y la selección de carpetas usan funciones de Chrome y Edge. Aun así, en otros navegadores puedes descargar los archivos uno por uno.

Créditos

La idea de un editor visual para estas carátulas viene del editor original de Clockwise de Jonathas Barbosa (@jnthas), con licencia MIT. En cambio, el mío está hecho desde cero para Clockwise XE1E, con las funciones que fui necesitando.

Conclusión

Con mi editor de carátulas, hacer un diseño nuevo pasó de pelearme con coordenadas y números RGB565 a dibujar y ver el resultado en segundos. Si tienes un Clockwise, ábrelo en el navegador. Y si todavía no lo tienes, en el artículo del reloj te cuento cómo armarlo. Finalmente, si diseñas algo bonito con el editor de carátulas, compártelo.

73 y DX de XE1E
Enrique

Recibe los artículos nuevos por correo

Te aviso cada vez que publique un artículo en el XE1E Radio Blog. Puedes darte de baja cuando quieras.

Nombre*

Email*