Actualización de abril: variables, capas ocultas y más
Acabamos de lanzar un lote de funciones nuevas que han estado pidiendo, además de algunas correcciones importantes para que todo funcione mejor. Ahora puedes usar variables para cualquier propiedad de una capa, ocultar o mostrar capas y disfrutar de títulos de capa más inteligentes: todo pensado para darte más control y una salida más limpia.
Variables para las propiedades de las capas Ahora puedes declarar variables para cosas como la posición, el tamaño, el color y el texto. Solo activa "Declare variables", y esas propiedades se extraerán como variables al principio de tu código. Los nombres de las variables se basan en los títulos de las capas, así que nómbralas bien.
Ocultar/mostrar capas El nuevo ícono de ojo en la lista de capas te permite alternar la visibilidad. Las capas ocultas no aparecerán en la salida en absoluto.
Títulos de capa inteligentes para el texto Por defecto, el contenido de una capa de texto se convierte en su título. Pero si renombras el título, este tiene prioridad en la lista, manteniendo todo limpio.
🔧 Correcciones
- Las esquinas redondeadas ahora se renderizan con precisión perfecta al nivel de píxel
- Las comillas dobles en las capas de texto se escapan correctamente
- ESPHome ahora tiene una mejor lógica de variables y nombres de imágenes
Cuéntame qué opinas, y gracias, como siempre, por ser parte del recorrido.
El hecho es que Lopaka solo existe gracias a su apoyo.
Si te gusta lo que hago, hay muchas opciones para apoyar el desarrollo de Lopaka:
- Corre la voz entre tus amigos y colegas
- Envía tus comentarios y peticiones de funciones: https://airtable.com/apps27BkejrUF0DWT/pagP4FNoUcmtwGsAW/form
- Compra una suscripción Plus https://lopaka.app/price
- Conviértete en patrocinador ❤️ https://buymeacoffee.com/milin
Cómo usar variables en la práctica
Las variables convierten un diseño estático en una pantalla que tu firmware puede actualizar. Un ejemplo típico es una lectura de temperatura: diseñas el diseño una vez, y luego cambias el texto y el color en tiempo de ejecución sin tocar el código de dibujo.
- Selecciona una capa, por ejemplo una capa de texto que muestra
23°C. - En el Inspector, haz clic en el interruptor de variable junto a la propiedad que quieres controlar, como
text,x,yocolor. - Activa Declarar variables en los Ajustes de código.
Lopaka mueve esos valores al principio del código generado como declaraciones con tipo, y las llamadas de dibujo hacen referencia a ellos:
const char* temp_text = "23°C";
int temp_x = 10;
display.setCursor(temp_x, 20);
display.print(temp_text);Los nombres de las variables vienen del nombre de la capa y la propiedad, por ejemplo temp_text. Renombra las capas antes de copiar el código a tu proyecto, porque renombrar una capa después cambia los nombres de sus variables.
Capas ocultas y superposiciones
Las capas ocultas son útiles para mantener estados alternativos en la misma pantalla, como un ícono de error o una advertencia de batería baja, sin exportarlos. Para las imágenes de referencia sobre las que calcas, usa la opción Superposición: la capa se atenúa en el lienzo y se queda fuera del código.
Consulta Generación de código para ver la lista completa de opciones, y la guía de ESPHome para usar variables con datos de sensores.