Planos para Home Assistant: un panel visual claro, privado y mantenible

Un plano puede hacer más comprensible un panel doméstico: en lugar de recordar a qué estancia corresponde cada nombre de dispositivo, se ve un control cerca de la habitación que afecta. La utilidad está en reconocer y actuar con facilidad, no en convertir la vivienda en una escena que haya que contemplar antes de encontrar una luz.

Esta guía explica un proceso basado en una imagen. 3DHouseMaker no se conecta directamente a Home Assistant, no descubre dispositivos ni sincroniza un modelo con entidades. Preparas el plano por separado y configuras el panel en tu propia instalación. Esa separación debe quedar clara para no esperar una integración que la herramienta no ofrece.

Una imagen con controles no es una escena 3D en tiempo real

Las búsquedas de plano 3D para Home Assistant pueden referirse a un fondo renderizado, un modelo interactivo o un panel que recuerda la casa. Son proyectos diferentes. La tarjeta estándar picture-elements utiliza una imagen bidimensional con elementos superpuestos; no constituye una escena tridimensional nativa en tiempo real.

La documentación oficial de picture-elements explica posicionamiento de iconos y otros elementos sobre imágenes. El ejemplo de esta guía utiliza claves documentadas. Cualquier solución de terceros más compleja necesita revisar su propio mantenimiento y compatibilidad, sin atribuirle el mismo alcance al proceso básico.

Una perspectiva renderizada puede servir de fondo, pero seguirá siendo una imagen. Los controles comunicarán la información actual. Mover una pared en el modelo original no recoloca automáticamente los iconos ni actualiza sus relaciones con las entidades.

Elige tres tareas cotidianas para la primera versión

Empieza por identificar una luz del salón, consultar temperatura de cocina y localizar la información de una luz del dormitorio. Mantén fuera del primer ensayo controles sensibles y automatizaciones complejas. Una prueba reducida ayuda a comprobar reconocimiento antes de aumentar la cantidad de elementos.

Escribe quién utilizará la pantalla y desde dónde. Un teléfono sostenido cerca y una tableta mural vista de pie plantean necesidades distintas. Decide qué datos ganan al aparecer sobre un plano y cuáles se entienden mejor en una lista. No todas las entidades deben ocupar la imagen de la casa.

Cuando una habitación contiene muchas funciones, selecciona las que necesitan contexto espacial. Lleva el resto a una vista de habitación o una disposición alternativa clara. El panel debe ayudar a completar una tarea y no exigir aprender la decoración de un modelo para encontrar el control.

Prepara una copia simplificada del plano

Parte de una distribución cuyas posiciones conoces. Retira cadenas de cotas, títulos técnicos y notas innecesarias del fondo, conservando el original medido por separado. La imagen de control no necesita mostrar todas las dimensiones de una vivienda privada.

El creador de planos ayuda a preparar una organización sencilla. Si ya existe una fuente adecuada, el conversor a 3D puede generar una previsualización aproximada de muros. Ninguno de esos procesos crea entidades ni configura su comportamiento en Home Assistant.

Mantén orientación y límites de imagen consistentes. Girar el fondo posteriormente obliga a revisar la colocación de todos los elementos. Utiliza nombres familiares para el hogar y evita conservar abreviaturas que eran comprensibles solo en un documento técnico.

Compara una planta y una perspectiva suave

La planta permite ver todas las habitaciones y colocar controles de forma predecible. Una perspectiva suave puede hacer reconocibles los muros, pero también ocultar zonas detrás de paredes altas. Compara ambas utilizando las mismas tres tareas y no solo la impresión visual.

Comprueba si la estancia menor conserva espacio visible y si cocina o pasillo quedan parcialmente tapados. Una cubierta reconocible o un suelo muy detallado no ayudan cuando ocupan la zona donde debe leerse información. Empieza con un fondo sencillo y añade detalle únicamente si mejora la identificación.

Conserva dimensiones y posiciones relativas del fondo al actualizar su estética. Una renovación visual no debería exigir reconstruir todo el panel. Mantener la referencia permite dedicar las revisiones a la utilidad en vez de recolocar iconos sin fin.

Reserva áreas tranquilas para etiquetas e iconos

Los patrones intensos compiten con textos pequeños. Reduce mobiliario donde coincidan varios controles y evita colocar un icono sobre un objeto que sugiera otro dispositivo. Una luz situada sobre una mesa decorativa puede interpretarse como lámpara de mesa aunque controle el techo.

Usa nombres inequívocos y revisa contraste sobre el fondo real. El planificador de habitaciones puede ayudar a elegir muebles que expliquen una estancia, pero en el panel conviene retirar los que distraen. Estás preparando un mapa operativo, no un anuncio inmobiliario.

Comprueba la lectura con alguien que no haya creado la imagen. Pregunta qué dispositivo espera encontrar tras cada control. Las interpretaciones diferentes revelan asociaciones visuales que resultan difíciles de detectar cuando conoces de memoria la configuración.

Calcula posiciones como porcentajes de la imagen

Imagina un fondo de 1.200 píxeles de ancho y 800 de alto. Un centro de icono situado en x = 300 e y = 240 corresponde al 25 % desde la izquierda y al 30 % desde arriba: 300 ÷ 1.200 × 100 y 240 ÷ 800 × 100.

El estilo documentado utiliza posiciones porcentuales y la transformación predeterminada centra el elemento sobre esa posición. Por eso calculamos el centro, no la esquina superior izquierda. Comprueba el resultado visual en tu tarjeta real: una cuenta correcta no garantiza una composición legible sobre todos los fondos.

Guarda una tabla de habitación, entidad, función y coordenadas. Si cambia el fondo, podrás entender por qué cada control estaba allí. También ayuda a descubrir un icono bien colocado visualmente pero asociado a la habitación o entidad equivocada.

Empieza con una tarjeta ilustrativa mínima

Sustituye imagen y entidad por recursos apropiados de tu instalación. El nombre es un marcador de ejemplo: no crea un dispositivo ni indica que debas renombrar uno existente. Tampoco contiene credenciales ni configura una integración.

type: picture-elements
image: /local/house-dashboard.png
elements:
  - type: state-icon
    entity: light.living_room
    style:
      left: 25%
      top: 30%

Comprueba primero la entidad y añade elementos de uno en uno. Así puedes identificar la causa de un problema. Utiliza la documentación actual cuando configures acciones y decide si pulsar debe mostrar información o cambiar un estado. Explícalo al resto del hogar: una imagen no comunica automáticamente el comportamiento de un control.

Revisa la privacidad del alojamiento del fondo

La ruta /local/ del ejemplo tiene una consecuencia importante. La documentación HTTP de Home Assistant indica que los archivos servidos desde www no están protegidos por su autenticación. Quien pueda alcanzar la URL y la conozca puede acceder al archivo.

No coloques allí un plano privado detallado solo porque el panel solicite iniciar sesión. Prepara una versión sin dirección, códigos, ubicaciones de alarma ni detalles sensibles. Comprueba cómo se aloja la imagen y cómo funciona el acceso remoto previsto antes de subirla.

Cambiar el nombre del archivo no constituye control de acceso. Si necesitas mantener una imagen restringida, utiliza un método protegido adecuado y verifica su comportamiento. No confundas una URL difícil de adivinar con una autorización real ni copies una configuración ajena sin revisar esa diferencia.

Protege instalación y capturas compartidas

No incluyas contraseñas ni tokens en YAML, imágenes o capturas de soporte. Recorta información personal y nombres de cuenta que no sean necesarios. Un plano puede revelar más sobre accesos y vida doméstica que una lista convencional de luces.

La guía de seguridad de Home Assistant recomienda contraseñas únicas robustas, autenticación multifactor y actualizaciones. Sigue su documentación para acceso remoto. Para pedir ayuda de diseño, utiliza una maqueta anónima con estancias y entidades ficticias; contrastes y posiciones no suelen requerir ver la propiedad real.

Prueba primero la pantalla más pequeña

Un plano completo puede funcionar en escritorio y resultar ilegible en teléfono. La posición porcentual conserva la relación con la imagen, pero no garantiza texto claro, separación suficiente o interacción cómoda. Intenta completar las tres tareas sin ampliar el fondo.

Busca solapamientos, etiquetas sobre muros y habitaciones demasiado pequeñas para distinguirse. Revisa con luz ambiental diferente y en los modos de presentación utilizados. Si el conjunto deja de funcionar, prepara un resumen más simple y vistas por habitación. Mantén una lista convencional como alternativa para quien no interprete bien el esquema espacial.

Considera también una consulta rápida al llegar con bolsas o mientras se realiza otra actividad. La información debería reconocerse sin estudiar un sofá detallado. Nombres, orientación familiar y colocación consistente suelen merecer más espacio que los objetos decorativos.

Diseña para información ausente o inesperada

Comprueba cómo se comunica una entidad no disponible, renombrada o retirada. Un brillo pintado permanentemente en el fondo no debe sugerir que una luz está encendida ahora. El estado actual debe proceder de la entidad correspondiente, no de una decisión estética de la imagen.

Para acciones con consecuencias importantes, utiliza una interacción y revisión adecuadas. No amplíes un experimento sencillo a puertas o alarmas solo porque cabe otro icono. La capacidad de colocar un elemento visual no determina que su incorporación sea útil o apropiada para el hogar.

Valida el comportamiento, además de la posición

Un icono puede estar perfectamente colocado y resultar confuso si su acción no coincide con lo que espera quien lo utiliza. Durante la prueba, pide que la persona explique antes de pulsar qué cree que ocurrirá. Compara la respuesta con la configuración real y cambia nombres o interacción cuando exista ambigüedad.

Prueba asimismo que la información siga siendo comprensible sin apoyarse únicamente en un color. El fondo debe ayudar a ubicar una estancia, mientras el control proporciona el estado de manera clara. Conserva una alternativa de uso sencilla para situaciones en las que el esquema, el tamaño de pantalla o la percepción visual dificulten la tarea.

No evalúes todos los cambios a la vez. Ajusta un nombre, una posición o una selección de entidades y repite las mismas tareas. Esa comparación permite saber si la mejora responde a un problema observado o solo a una preferencia estética de quien diseña el panel.

Conserva fondo, controles y versiones coordinados

Guarda fuente editable, imagen exportada y tabla de colocación juntas, con fecha y resumen del cambio. Si se divide o renombra una habitación, revisa entidades y etiquetas, no únicamente el dibujo. La guía de gestión del plano desarrolla el hábito de conservar base y registro de revisiones.

Anota tamaños de pantalla y tareas comprobadas. Pide a otra persona que identifique habitación, control y estado, registra dudas y cambia una cosa cada vez. Un panel útil no necesita comportarse como un videojuego: necesita hacer comprensibles las tareas, proteger información privada y seguir siendo mantenible cuando la vivienda o los dispositivos cambian.