Cómo Crear un Plano 3D para Home Assistant con Sweet Home 3D (Guía 2026)

Lucía llevaba meses con un dashboard de Home Assistant lleno de filas y filas de entidades: luces, sensores, termostatos… Todo en listas. Funcional, sí. Pero cuando su pareja intentaba controlar algo, siempre le preguntaba: “¿Y el sensor de la cocina cuál es?” Hasta que un sábado por la tarde decidió hacer el plano 3D de la casa y montarlo como pantalla principal.

Tardó unas tres horas entre diseñar el plano, exportarlo y configurar el panel en Home Assistant. El resultado fue tan visual que ahora todo el mundo en casa sabe exactamente qué está encendido, dónde hay movimiento y qué temperatura tiene cada habitación. Con un solo vistazo.

Con Sweet Home 3D puedes crear dos tipos de dashboard visual para Home Assistant:

1. Plano clásico 2D exportado desde el plan de planta
2. Render 3D realista cenital con iluminación dinámica (nivel avanzado)

En esta guía te enseñamos ambos, empezando por el método rápido y terminando con el profesional.

Respuesta rápida: Para crear un plano 3D de tu casa en Home Assistant necesitas: diseñar el plano con Sweet Home 3D (gratuito), exportarlo como imagen o SVG, subirlo a Home Assistant y usar la tarjeta Picture Elements para superponer entidades interactivas sobre el plano. El resultado es un dashboard visual donde ves el estado real de cada habitación en tiempo real.

Por qué un plano 3D transforma tu experiencia con Home Assistant

La mayoría de los usuarios de Home Assistant empieza con dashboards de listas: entidades agrupadas por tipo o por habitación en formato texto. Es práctico cuando tú eres el que lo configura todo, pero falla en cuanto otra persona de casa tiene que usarlo.

Un plano visual cambia esto por completo. En lugar de buscar “Luz techo salón” en una lista, simplemente miras el dibujo de tu casa y ves qué está encendido. Los iconos cambian de color con el estado real. Puedes tocar cualquier luz y apagarla directamente desde el mapa.

Javier lo resume bien: “Cuando montamos el panel con el plano de planta, el uso del dashboard por parte del resto de la familia se multiplicó. Antes nadie lo tocaba porque no entendían la estructura. Con el mapa, es intuitivo para cualquiera.”

Esta funcionalidad también es el siguiente paso natural si ya tienes Home Assistant instalado y configurado. Es donde la domótica pasa de ser “cosa de frikis” a ser algo que toda la familia usa a diario.

Qué es Sweet Home 3D y por qué es la mejor opción

Sweet Home 3D es un software gratuito y de código abierto para diseñar planos de interiores en 2D con visualización 3D en tiempo real. Desarrollado originalmente para planificación de mobiliario, se ha convertido en la herramienta más usada por la comunidad de Home Assistant para crear planos de planta exportables.

Las alternativas que existen son Floorplanner (online, freemium), RoomSketcher (de pago para exportar en alta resolución) y dibujar directamente en Inkscape o Figma si tienes mano con el diseño vectorial. Sergio siempre recomienda Sweet Home 3D como punto de partida: “Es gratuito, tiene miles de muebles descargables, y la curva de aprendizaje para lo que necesitamos —un plano de planta limpio— es de menos de una hora.”

La única pega real es que el software se siente un poco anticuado en su interfaz. Pero para el objetivo concreto que tenemos, hace exactamente lo que necesitamos.

Descarga Sweet Home 3D: www.sweethome3d.com — disponible para Windows, macOS y Linux. También tiene versión web online si no quieres instalar nada.

Con Sweet Home 3D puedes crear dos tipos de dashboard visual para Home Assistant:

1. Plano clásico 2D (vectorial): Exportado desde la vista de planta. Es un mapa interactivo técnico, limpio y rápido de hacer.
2. Render 3D realista (cenital): Exportado desde la vista de cámara con iluminación dinámica. Es el nivel avanzado y más espectacular.

En esta guía te enseñamos ambos, empezando por el método base y terminando con el montaje profesional.

¿Qué tipo de plano deberías usar?

Para ayudarte a decidir antes de abrir el programa, aquí tienes un resumen de lo que mejor funciona según tu objetivo:

Paso 1: Diseña el plano de tu casa en Sweet Home 3D

Bosch Zamo - Medidor Láser Digital (25m)

La herramienta imprescindible antes de abrir Sweet Home 3D. Medir las paredes de tu casa con cinta métrica es frustrante; con esto tardas 5 minutos en sacar el plano exacto para Home Assistant.

57,99 € aproximado.

★★★★★ 4.4 (Valoración editorial)

Ver oferta

Truco de Javier: “Exporta también en SVG si puedes. El formato vectorial escala perfectamente a cualquier resolución de pantalla, mientras que el PNG puede verse pixelado en tablets grandes. Para exportar SVG desde Sweet Home 3D necesitas la versión de escritorio, no la online.”

Cómo exportar en SVG para mejor calidad

¿Y si prefiero un plano técnico 2D en lugar de 3D? (Exportar en SVG)

Si prefieres un dashboard estilo plano técnico y minimalista en lugar del render fotorrealista, no renderices la foto 3D. En su lugar, ve a Plan → Exportar plan como SVG.

Este formato vectorial significa que escala sin pérdida de calidad en cualquier dispositivo, desde un móvil hasta una tablet. Es ideal para un mapa de casa en Home Assistant más tradicional y esquemático.

Paso 2: Sube el plano a Home Assistant

Con la imagen exportada (PNG o SVG), el siguiente paso es subirla a la carpeta de archivos accesibles de Home Assistant.

La ruta más sencilla: en el panel lateral de Home Assistant ve a Configuración → Media (o usa el explorador de archivos si tienes el addon File Editor instalado). Navega hasta /config/www/ y sube tu imagen ahí. La URL pública del archivo será /local/nombre-del-plano.png.

Si tienes instalado el addon File Editor o Studio Code Server, puedes hacer esto directamente desde la interfaz web sin necesidad de acceder por SSH.

Paso 3: Crea el dashboard con Picture Elements

La tarjeta de Home Assistant que hace posible todo esto se llama Picture Elements. Permite tomar una imagen de fondo y superponer encima elementos interactivos: iconos de entidades, etiquetas de estado, botones… todo posicionado con coordenadas porcentuales sobre la imagen.

María explica bien cómo funciona: “Piensa en Picture Elements como un lienzo donde la imagen es el fondo y tú vas colocando pegatinas encima. Cada pegatina puede ser el icono de una luz, el valor de un sensor, o un botón que ejecuta una acción. Y todo se actualiza en tiempo real.”

Configuración básica en YAML

type: picture-elements
image: /local/plano-casa.png
elements:
  # Icono de luz en el salón
  - type: state-icon
    entity: light.luz_salon
    style:
      top: 45%
      left: 30%
      
  # Temperatura del dormitorio
  - type: state-label
    entity: sensor.temperatura_dormitorio
    style:
      top: 25%
      left: 65%
      color: white
      font-size: 12px
      
  # Botón para activar escena
  - type: service-button
    title: Cine
    service: scene.turn_on
    service_data:
      entity_id: scene.cine
    style:
      top: 80%
      left: 15%

El posicionamiento (top y left) se define en porcentajes relativos al tamaño de la imagen. Al principio es un poco prueba y error, pero hay una extensión de Chrome llamada Picture Elements Position Helper que te muestra las coordenadas al hacer clic sobre la imagen, lo que acelera enormemente el proceso.

Paso 4: Añade entidades al plano con iconos inteligentes

Ahora viene la parte donde el plano cobra vida. Para cada dispositivo de tu casa, vas a añadir un elemento en las coordenadas correctas.

Tipos de elementos más útiles

state-icon: Muestra el icono de la entidad y cambia de color según el estado (encendido/apagado, abierto/cerrado). Ideal para luces, enchufes y sensores de puertas y ventanas.

state-label: Muestra el valor numérico de un sensor directamente sobre el plano. Perfecto para temperatura, humedad o consumo energético de enchufes con medidor.

image: Puedes usar una imagen pequeña que cambie según el estado. Útil para mostrar el estado de las persianas automatizadas con un icono diferente según el porcentaje de apertura.

conditional: Muestra un elemento solo si se cumple una condición. Por ejemplo, un icono de alarma que solo aparece si el sensor detecta movimiento cuando estás fuera de casa.

Lucía añade algo que aprendió a las malas: “La primera vez posicioné todos los iconos sin tener el plano a tamaño final en pantalla. Cuando lo puse en la tablet de pared, todo estaba desplazado. Ahora siempre hago las pruebas directamente en el dispositivo que va a mostrar el dashboard.”

Si vas a instalar una tablet empotrada en la pared, asegúrate de ajustar el plano en esa pantalla concreta, no en el ordenador.

Técnica avanzada: cómo hacer que las habitaciones se iluminen de verdad

Si quieres pasar de un simple plano con iconos a un dashboard interactivo casi cinematográfico, esta es la técnica que usa la comunidad más avanzada de Home Assistant. Consiste en superponer renders iluminados.

El proceso es el siguiente:

1. Vas a Sweet Home 3D y haces un render 3D de la casa completa con todas las luces apagadas (modo noche). Esta será tu imagen de fondo principal.
2. Haces un segundo render encendiendo solo la luz del salón.
3. Recortas únicamente la zona iluminada del salón (usando Photoshop o GIMP) con fondo transparente y la guardas como salon-iluminado.png.
4. En Home Assistant, usas la etiqueta state_image para superponer esa “capa de luz” solo cuando la bombilla real se enciende.

Aquí tienes la configuración YAML exacta de cómo se hace dentro de la tarjeta Picture Elements:

type: picture-elements
image: /local/plano-noche-oscuro.png
elements:
  # Capa de iluminación dinámica del salón
  - type: image
    entity: light.salon_techo
    image: /local/salon-iluminado.png
    state_image:
      "on": /local/salon-iluminado.png
      "off": /local/transparente.png
    style:
      top: 50%
      left: 50%
      width: 100%
      pointer-events: none # Evita que la imagen bloquee los clics en otros iconos

Comparativa: métodos para crear el plano

La conclusión de Sergio es clara: “Para el 90% de los usuarios que quieren un plano funcional para Home Assistant, Sweet Home 3D es la respuesta. Floorplanner está bien si ya lo conoces, pero para exportar en calidad necesitas pagar. Y Inkscape requiere demasiado tiempo si no tienes experiencia en diseño vectorial.”

Sweet Home 3D vs Floorplan para Home Assistant: ¿qué diferencia hay?

Muchos usuarios buscan tutoriales sobre “Floorplan Home Assistant” y los confunden con Sweet Home 3D. Es vital entender que no son competidores, sino complementos:

• Sweet Home 3D es el software de diseño (fuera de Home Assistant) que usas para dibujar los muros, poner los muebles y generar la imagen PNG o SVG.
• Floorplan (ha-floorplan) es una integración avanzada (una tarjeta personalizada instalable vía HACS) que se usa dentro de Home Assistant para hacer que el SVG que diseñaste sea hiper-interactivo usando CSS y JavaScript.

Para empezar, la tarjeta nativa Picture Elements es más que suficiente. Si luego quieres animaciones complejas (como ventiladores de techo que giran en el plano), entonces darás el salto a ha-floorplan.

Integración avanzada: plano interactivo con Mushroom Cards

Si tienes instalado el plugin Mushroom Cards vía HACS, puedes combinar Picture Elements con tarjetas Mushroom para conseguir un aspecto más moderno y botones más elegantes sobre el plano.

La combinación más potente es usar type: custom:mushroom-entity-card dentro de un elemento de Picture Elements. Así obtienes el diseño limpio de Mushroom posicionado directamente sobre el plano.

Javier lo usa para mostrar el estado de las cámaras de seguridad como miniaturas en tiempo real sobre el plano, de forma que en una sola pantalla ve tanto el estado de los dispositivos como la imagen en vivo de cada cámara.

Para llevar esto aún más lejos, el addon Frigate NVR con detección de personas permite mostrar alertas directamente sobre el plano cuando detecta movimiento en una cámara concreta. Tienes la guía completa en nuestro artículo sobre Frigate NVR con Coral TPU.

Rendimiento: cómo evitar que el plano ralentice Home Assistant

Un dashboard visual muy cargado puede afectar seriamente al rendimiento, haciendo que la app tarde en cargar, especialmente en tablets antiguas o paneles de pared económicos.

Para evitar un dashboard lento, aplica estas buenas prácticas:

• Convierte tus renders a WebP: Usa herramientas gratuitas para pasar tu PNG a formato WebP antes de subirlo a Home Assistant. Pesará muchísimo menos sin perder calidad.
• Vigila el peso del archivo: Intenta mantener tu imagen de fondo siempre por debajo de 500 KB.
• Limita los elementos: Evita tener más de 20-25 entidades simultáneas en una sola tarjeta Picture Elements. Si tienes más, tu plano está demasiado recargado.
• Cuidado con las animaciones: Si usas Mushroom Cards o Floorplan, reduce los efectos CSS innecesarios.
• Divide y vencerás: Si tu casa es muy grande o tiene varias plantas, no intentes meterlo todo en una sola imagen. Crea dashboards diferentes por planta.

Errores comunes al crear el plano para Home Assistant

Error 1: Exportar a resolución demasiado baja Un PNG de 800x600 se ve pixelado en cualquier tablet moderna. Exporta siempre a mínimo 1920px de ancho. Si tienes una tablet de alta resolución, sube a 2560px o usa SVG directamente.

Error 2: Olvidarse de la proporción de aspecto El plano debe tener la misma proporción que la pantalla donde se va a mostrar. Si tu tablet es 16:9 y el plano es cuadrado, habrá franjas negras o el plano se cortará. Ajusta el canvas de Sweet Home 3D antes de exportar.

Error 3: Posicionar entidades en el ordenador y no en el dispositivo final Las coordenadas porcentuales son relativas al tamaño de visualización. Lo que parece centrado en tu monitor puede quedar desplazado en una tablet con diferente resolución. Siempre valida en el dispositivo real.

Error 4: No usar nombres de entidades descriptivos Si tus luces se llaman light.luz_1, light.luz_2… vas a volverte loco asignándolas al plano. Antes de crear el dashboard, renombra todas las entidades con nombres claros: light.salon_techo, light.cocina_encimera. Tu yo del futuro te lo agradecerá.

Error 5: Saturar el plano con demasiados iconos La primera versión de Lucía tenía 40 iconos sobre el plano. Era ilegible. La regla que usa ahora: solo los dispositivos que alguien de casa va a usar a diario. Los técnicos y de mantenimiento, en dashboards separados.

Error 6: Olvidar el coste de mantenimiento a futuro Importante: El dashboard visual impresiona mucho a las visitas y es súper intuitivo, pero tiene una contrapartida técnica: requiere mantenimiento manual. Cada vez que cambies la distribución del sofá, añadas una nueva lámpara de pie, o reformes una habitación, tendrás que volver a abrir Sweet Home 3D, hacer un render nuevo, subirlo a Home Assistant y reajustar las coordenadas YAML.

Hardware recomendado para mostrar el plano

Si vas a dedicar una pantalla permanente al plano de tu casa, tienes varias opciones según tu presupuesto:

Tablet empotrada en la pared

La opción más habitual y la que mejor resultado visual da. Cualquier tablet Android de gama media funciona perfectamente con Home Assistant Companion.

Ver amazon Fire HD 10

El software imprescindible: Fully Kiosk Browser Si decides empotrar una tablet (ya sea un iPad viejo o una Fire HD), no uses el navegador normal. Instala la app Fully Kiosk Browser. Esta aplicación te permite poner Home Assistant en pantalla completa real (ocultando la barra de Android/iOS) y, lo más importante: usa la cámara frontal de la tablet para detectar cuándo te acercas. La pantalla permanece apagada para reducir el consumo y el desgaste del panel, y Fully Kiosk puede activarla automáticamente al detectar presencia mediante la cámara frontal de la tablet.

Monitor con mini PC o Raspberry Pi

Para instalaciones más permanentes o si quieres un monitor de mayor tamaño, un mini PC con un monitor secundario da más flexibilidad. Puedes ver la comparativa completa en nuestra guía de hardware para servidor domótico.

ver soportes tablet en amazon

Recomendaciones rápidas según tu nivel

Si estás empezando con Home Assistant: Empieza con un plano PNG sencillo de Sweet Home 3D con 5-8 entidades básicas (luces principales y termostato). No te compliques. Una vez funciona, vas añadiendo más.

Si ya tienes experiencia con YAML: Pasa directamente a SVG y usa la tarjeta Picture Elements con type: conditional para iconos que cambian según el estado. Añade Mushroom Cards vía HACS para un resultado más polido.

Si quieres el resultado más profesional: Combina Picture Elements con la integración Floorplan (disponible en HACS como custom component). Permite animaciones, hover states y una gestión más potente de los estados. La configuración es más compleja pero el resultado es espectacular.

FAQ

Conclusión: Tu misión esta semana

Crear el plano 3D de tu casa para Home Assistant es uno de esos proyectos que siempre pospones porque parece complicado. Y en realidad no lo es. Con Sweet Home 3D tienes el plano listo en una hora, y con Picture Elements lo integras en el dashboard en otra hora más.

Lo que hemos visto hoy:

• Sweet Home 3D es la herramienta gratuita más rápida para crear el plano de planta
• Exporta en PNG (rápido) o SVG (mejor calidad) según tu caso
• La tarjeta Picture Elements es el puente entre el plano y las entidades de Home Assistant
• Los errores más comunes son resolución baja y posicionamiento en el dispositivo equivocado
• Para resultados avanzados, Mushroom Cards + HACS Floorplan es el combo ganador

Tu misión esta semana: Descarga Sweet Home 3D, dibuja el plano de una sola habitación (empieza pequeño: el salón o la cocina), expórtalo y crea una vista de prueba en Home Assistant con 3-4 entidades. Una vez ves el resultado, el resto de la casa lo añades en un fin de semana.

Si aún no tienes Home Assistant funcionando, el primer paso es nuestra guía sobre qué es la domótica y cómo empezar desde cero. Y si quieres ideas sobre qué sensores y dispositivos poner en el plano, echa un vistazo a nuestro kit de inicio domótico por menos de 60€.

El plano no es el final de nada. Es el principio de una forma completamente diferente de interactuar con tu casa.