Hoy les presentamos una serie de guías que les permitirán crear y configurar el floorplan de su hogar en Home Assistant. Con esto, podrán tener un plano interactivo que les permitirá controlar interruptores, lámparas y sensores desde una única vista. Además, podrán mostrar información relevante como el estado de la alarma, la previsión del tiempo o la ubicación de los dispositivos móviles.
Es importante tener en cuenta que este proceso no es apto para principiantes, ya que configurar y mostrar correctamente el floorplan en tu Home Assistant requiere atención y dedicación.
Recomendamos seguir previamente las guías para la configuración de Wunderground, Life360, la guía de traccar y la guía para la instalación de la alarma, pues podremos integrar todo ello en el plano y además ya tendrás parte del trabajo hecho, pues la estructura de las carpetas es la misma.
Una vez hayas seguido las guías anteriores, podrás comenzar a configurar tu plano. En esta guía, hemos creado el siguiente plano para poder configurar todo. Más adelante te explicaremos cómo crear el tuyo propio.
Empezaremos descargando los archivos necesarios desde aquí
A continuación crea las siguientes carpetas:
|
1 2 3 |
sudo mkdir -p /home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib sudo mkdir -p /home/homeassistant/.homeassistant/www/custom_ui/floorplan/images |
Si lo has hecho mediante terminal con el usuario pi, debes cambiarlo al usuario homeassistant:
|
1 |
sudo chown -R homeassistant:homeassistant /home/homeassistant/.homeassistant/www |
en el directorio floorplan debes copiar los siguientes archivos:
|
1 2 3 |
ha-floorplan.html floorplan.svg floorplan.css |
y en el directorio lib estos otros:
|
1 2 3 |
jquery-3.2.1.min.js moment.min.js svg-pan-zoom.min.js |
El archivo floorplan.yaml lo debes copiar en el directorio
|
1 |
/.homeassistant |
La carpeta weather con los iconos del clima, debes copiarla en
|
1 |
/home/homeassistant/.homeassistant/www/custom_ui/floorplan/images |
Para mostrar el floorplan en el frontend de Home Assistant recomendamos configurarlo como panel lateral
Debes copiar el archivo floorplan.html en el siguiente directorio:
|
1 |
/.homeassistant/panels |
A continuación debes editar el archivo panel_custom.yaml que debes tener en /.homeassistant y añade lo siguiente:
|
1 2 3 4 5 |
- name: floorplan sidebar_title: Plano sidebar_icon: mdi:home url_path: floorplan config: !include floorplan.yaml |
Si has llegado hasta aquí, reinicia tu Home Assistant y en el menú lateral verás que aparece "Plano". Esto lo puedes modificar a tu antojo en la linea sidebar_title.
Accede a esta pestaña y se mostrará el croquis de ejemplo.
