Actualización de marzo: ¡crea gráficos para ESPHome!

Mucha gente preguntó por ESPHome: es un sistema que te permite convertir microcontroladores comunes en dispositivos de hogar inteligente. Como siempre con Lopaka: tú pides, nosotros entregamos.

Plataforma ESPHome

Agregué soporte para la biblioteca de pantalla predeterminada, incluida la generación de código lambda y las declaraciones de imágenes y fuentes.

ESPHome tiene su propia configuración YAML de un solo archivo, que puede ser difícil de gestionar. Ahora, al menos, puedes crear gráficos bonitos para tus proyectos.

• se agregaron algunas fuentes populares de Google Fonts
• Si tienes capas pintadas o íconos, necesitarás descargar manualmente los archivos de imagen y colocarlos en el directorio de esphome
• Revisa los Ajustes de código para ver opciones adicionales que quizá quieras activar

Color de fondo personalizado

Algunos usuarios reportaron que usan pantallas exóticas como LCD o papel electrónico, y es útil previsualizar el diseño lo más cerca posible de la pantalla real. Por eso agregamos un ajuste de Proyecto para el color de fondo.

• Se aplica a todo el proyecto, a todas las pantallas
• no afecta a la generación de código
• quizá necesites escribir manualmente un código para rellenar la pantalla con el color deseado

Modo de dibujo libre

Tengo la sensación de que Lopaka no es solo generación de código: ¡también puede ser un editor de arte pixelado vectorial! En el Modo de dibujo libre se incluyen todas las fuentes, colores y herramientas de dibujo. ¡Pruébalo!

Watchy: reloj de papel electrónico de código abierto

¿Habías oído hablar de él? Es un dispositivo vestible totalmente de código abierto basado en el ESP32. https://watchy.sqfmi.com/

Lo mejor es que puedes crear gráficos para él con Lopaka. Elige "AdafruitGFX Mono", define la resolución en 200x200px, ¡y listo! Aquí está el ejemplo: https://lopaka.app/gallery/6403/13327

Diseñar una pantalla ESPHome, paso a paso

Este es el flujo desde un proyecto vacío hasta un dispositivo flasheado:

1. Crea un proyecto, elige ESPHome y define el tamaño de pantalla con la resolución de tu pantalla.
2. Dibuja el diseño. Dale a cada capa un nombre claro, ya que los nombres de capa se convierten en comentarios y nombres de variables en la salida.
3. En Ajustes de código, activa Incluir fuentes para el texto, Declarar imágenes para íconos y gráficos pintados, y Declarar variables si la pantalla muestra datos de sensores en vivo.
4. Desactiva Función contenedora si pegas en un bloque lambda: existente, para que solo se copien las llamadas de dibujo it.*.
5. Copia el código a tu YAML. Coloca los bloques font: e image: en la raíz del archivo, no dentro del lambda.
6. Descarga los recursos de imagen desde Ajustes de código → Imágenes y colócalos en la carpeta images/ junto a tu YAML.

ESPHome carga las fuentes desde Google Fonts cuando compila el firmware, así que no hay archivos de fuentes que gestionar. La guía de ESPHome cubre cada paso en detalle, con soluciones para errores comunes de YAML. Para un ejemplo completo, consulta el tutorial del panel de hogar inteligente con ESP32.

Más sobre papel electrónico

Los proyectos de papel electrónico como Watchy también pueden usar GxEPD2, que admite paletas de papel electrónico con negro, blanco, gris, rojo y otros colores. Lee cómo otros makers diseñaron interfaces de papel electrónico en WeatherPaper y Cineink.