Este artículo técnico detalla el proceso de diseño y desarrollo de un panel de control para Home Assistant, una plataforma de automatización del hogar inteligente. El autor, tras frustrarse con la usabilidad de sus aplicaciones actuales, optó por contratar a un ilustrador para crear un plano interactivo de su vivienda en estilo pixel art. El objetivo era que el panel fuera tan atractivo que la familia lo usara activamente, resolviendo problemas de control remoto como la iluminación del jardín.
El proceso técnico se divide en la preparación del brief para el artista y la implementación en Home Assistant. Para el artista, se proporcionaron planos arquitectónicos, fotos de referencia y especificaciones técnicas detalladas, como la necesidad de archivos PNG con transparencia y animaciones WebP. El autor enfatiza la importancia de exportar todos los recursos en un lienzo compartido para facilitar la alineación posterior.
En la implementación, se utiliza la tarjeta 'picture-elements' de Home Assistant. La ilustración actúa como fondo, mientras que los dispositivos y sensores se superponen como elementos interactivos. Se emplean técnicas como 'state_image' para cambiar entre estados estáticos y animados (por ejemplo, un aire acondicionado encendido o apagado) y elementos condicionales para alternar entre modos día y noche. Además, se integra Browser Mod para gestionar dispositivos complejos, como el sistema de riego, que no tiene una interfaz nativa única. Este enfoque permite una experiencia de usuario fluida y visualmente coherente, integrando la estética del hogar con la funcionalidad técnica de la automatización.