Como ya avance en partes anteriores del tutorial, hoy vamos a aprender como realizar un diseño integrando un plano de nuestra casa, donde representaremos los diferentes focos de luz que tengamos domotizados, creando un efecto de “animación” de la iluminación.
Para integrar la iluminación en nuestro plano utilizaremos el programa Sweet Home 3D, continuando con el diseño que iniciamos en la primera parte del tutorial.
A continuación crearemos otras sencillas imágenes (poligonales de fondo negro) que emularán de forma inversa el encendido y apagado de las luces.
Estas imágenes se podrán realizar con cualquier programa de retoque de imagen que admita trabajar con capas.
En mi caso, de forma habitual utilizo la aplicación Pixelmator del entorno de Apple, acortando algunos pasos de los que aquí expondremos, pero no os preocupéis, no vais a tener que comprar un ordenador de la conocida marca.
Voy a trasladar la creación de estas imágenes a un programa que todos podáis utilizar, un “open source” con lenguaje español incluido, que al igual que Sweet Home 3D, funciona en las plataformas Windows, Linux y Mac.
Esta aplicación es la conocida GIMP, que ya muchos conoceréis. Esta disponible en el siguiente enlace: Gimp.
No soy experto en la utilización de la aplicación GIMP, por lo que estoy seguro que el método que utilizo para crear estas imágenes puede ser mejorado.
Una vez tengamos el plano con la iluminación y las imágenes necesarias creadas, veremos como integrar todo esto en HA.
Para ello continuaremos con el aprendizaje y utilización de nuevos elementos en la card picture-elements y obtendremos como resultado un diseño para interactuar con nuestros dispositivos de iluminación totalmente gráfico y realmente atractivo.
En el panel 1, de la aplicación Sweet Home 3D, disponemos una carpeta de nombre “iluminación”, en su interior contiene numerosos elementos de este tipo.
La forma de integrar estos elementos en el plano sigue el mismo patrón que el resto de elementos de este panel, es decir, bastará con arrastrar el elemento elegido a nuestro panel de trabajo, panel 2.
Una vez situado el elemento de iluminación en el panel 2, mediante doble click, obtendremos la siguiente ventana emergente: 
En esta ventana, podremos modificar propiedades como elevación, ángulo, visibilidad, nombre, tamaño, nivel de iluminación, etc.
En la carpeta de elementos de iluminación se encuentran dos tipos principales:
En esta parte del tutorial, voy a utilizar un aplique que representa la luz de un gateway de Xiaomi (visible).
El resto de iluminación lo haré con bombillas, que representarán la iluminación de las lámparas de techo, que no quiero que se vean en el diseño final como un elemento suspendido en el aire.
Una vez establecidos (en el panel 2) los elementos e iluminación que correspondan a nuestros dispositivos domotizados, dispondremos nuestro diseño en 3D (panel 4) en la vista que deseemos trasladar a nuestro HA.
Es decir, la giraremos en un sentido u otro, y ampliaremos o reduciremos a elección propia.
A continuación iremos a la barra de herramientas y hacemos click en el botón con el dibujo de una cámara de fotos réflex, que corresponde con la etiqueta Crear Foto desde Vista 3D, como ya hicimos en la anterior parte del tutorial.
Esta vez, vamos a poner la calidad en “mejor”, apareciendo nuevos campos en la ventana emergente. 
En estos campos dispondremos la fecha, hora, tipo de objetivo y si queremos añadir las lámparas de techo (en el caso de haberlas representado con elementos visibles -no bombillas-).
La referencia al dia y la hora, lo que hará es disponer en el resultado final la iluminación natural (sol) correspondiente a nuestra localización. En mi caso he puesto antes de la salida del sol, 08.30 horas, para las fechas que estamos.
Si no tenéis vuestra localización establecida correctamente, debéis hacer doble click en la rosa de los vientos que aparece en el panel 2, apareciendo una ventana emergente donde pondréis vuestra localización geográfica, orientación y huso horario. 
Haremos click en crear y empezará la renderización de la imagen.
Si el resultado de iluminación representada no se ajusta a lo que deseamos (niveles muy altos o muy bajos en algunos dispositivos que queremos representar), volveremos a las propiedades del dispositivo de iluminación (panel 2) y bajaremos o subiremos el nivel de iluminación. Lo ideal es empezar con un nivel de iluminación de 50%, y corregir a posteriori.
Una vez tengamos el diseño 3D renderizado y a nuestro gusto, lo guardaremos.
Como avanzamos en el inicio de esta parte del tutorial, vamos a necesitar de una aplicación de retoque de imágenes que disponga de utilización de capas.
Por tanto, si no disponéis de ninguna, debéis instalar la aplicación GIMP para seguir.
Si ya disponéis de una aplicación de este tipo y sabéis utilizar las capas, bastará que adaptéis lo que a continuación se expone para realizarlo con vuestra aplicación.
En primer lugar vamos a integrar el diseño obtenido en nuestra aplicación de Sweet Home 3D como primera capa en nuestro programa de retoque de imágenes.
En Gimp, en el menú superior seleccionamos Archivo>Abrir como capas… y seleccionamos nuestra imagen obtenida en Sweet Home.
Añadiremos una nueva capa, menú superior seleccionamos Capa> Capa Nueva y en la ventana emergente pondremos el nombre del dispositivo que vamos a representar su iluminación.
En mi caso voy a empezar por crear la imagen necesaria para la iluminación del aseo. 
Las capas que vamos añadiendo irán apareciendo en el cuadro de capas de la aplicación, situado en el parte baja del lateral derecho, donde las podremos seleccionar, hacerlas visibles, bloquearlas, etc.
Ahora vamos a seleccionar en el cuadro de herramientas de Gimp (zona superior del lateral izquierdo) la herramienta de selección rectangular.
Sobre la imagen, haremos una selección del foco de iluminación que corresponde al dispositivo que queremos representar en HA, en mi caso sobre el aseo. Click en un vertice y sin soltar extender los límites de la selección.
A continuación, seleccionaremos en el cuadro de herramientas de Gimp la herramienta de relleno, nos aseguramos que tenemos el color negro seleccionado, y haremos click sobre la selección anterior, rellenándose esta de color negro. 
De esta forma iremos creando diferentes imágenes rellenadas de color negro, cada una en nueva capa, para poder exportar por separado.
Si la imagen que queremos crear no responde a un rectángulo, iremos creando, en la misma capa, diferentes selecciones que uniremos entre sí, antes de guardar y exportar la imagen.
Por último guardaremos esta imagen:
Como ejemplo, en mi diseño, en el salón representado, se sitúan tres focos de luz, dos lámparas de techo (luz cenital) y un aplique elevado 30 cm. sobre el suelo, que representa luz emitida por un Gateway de Xiaomi.
Por tanto, seleccionaremos un cuadro rectangular para la iluminación correspondiente a la representación de la luz emitida por un Gateway de Xiaomi.
La imagen que recrea la iluminación de la lámpara cenital que se sitúa a continuación no podrá tener forma rectangular, ya que rodeará a la imagen anterior, por lo que realizaremos tres rectángulo que uniremos en la misma capa. 
Esta unión se irá realizando entre las selecciones contiguas cada vez que realicemos una nueva selección.
Para unir la última, seleccionaremos en el panel de herramientas la herramienta de Selección difusa, haremos click sobre la selección no unida teniendo pulsada la tecla Cmd y desplazaremos el cursor sobre la selección a la que queremos unir. La imagen obtenida que utilizaremos para esa luz cenital será la siguiente:
Como vimos en la parte anterior del tutorial, vamos a crear dentro de nuestra carpeta www, nuevas carpetas, para tener todo bien organizado.
En mi caso voy a crear las siguientes: images/luces/planta1
En la carpeta "/planta1", copiaremos todas las imágenes que hemos creado, tanto la del diseño iluminado creado con Sweet Home 3D (luzinterior3d_planta1.png), como los recortes que hemos realizado con la aplicación GIMP (luz_aseo.png, luz_patio.png, luz_gateway.png, etc.).
Como vimos en la parte anterior del tutorial, añadimos el siguiente código:
|
1 2 3 |
- title: Luces 3D icon: mdi:lightbulb-on cards: |
Sumamos el siguiente código, y ponemos como imagen de fondo nuestro diseño 3D con iluminación:
|
1 2 3 |
- type: picture-elements image: /local/images/luces/planta1/luzinterior3d_planta1.png elements: |
Por cada entidad de iluminación que queramos integrar, añadiremos un elemento a la card del tipo image, y le asociaremos la entidad correspondiente.
|
1 2 |
- type: image entity: switch.shelly1_luz_patio |
Definiremos una acción, en este caso, un tap_action (click de ratón) con el valor toggle (hará de interruptor, pasando de on a off y viceversa) que servirá para interactuar con nuestra imagen creada, que la declararemos a continuación.
|
1 2 3 |
tap_action: action: toggle image: /local/luz_patio.png |
A continuación, condicionaremos una propiedad CSS de nuestra imagen, en este caso su opacidad, con el estado de la entidad (on - off).
|
1 2 3 |
state_filter: "off": opacity(40%) "on": opacity(1%) |
Declaramos opacidad 1%, en caso de que el estado de la entidad esté en “on”, y un valor superior (podéis probar varios valores para ver cuál es el que mejor se ajusta a vuestro gusto), para el estado en “off”.
Como ya habréis deducido, este condicionamiento del estado de la entidad con la propiedad de opacidad de la imagen, es lo que creará la simulación de iluminación en nuestro diseño.
Por último, localizaremos nuestra imagen en el lugar que le corresponde sobre la imagen de fondo. Para ello utilizaremos la misma dinámica de cuadro cartesiano que utilizamos en la anterior parte del tutorial para los iconos, con un nuevo dato, el tamaño o ancho -width- de la imagen en % del total de la imagen de fondo.
Para ello añadiremos el siguiente código:
|
1 2 3 4 |
style: top: 74.5% left: 8.15% width: 18% |
Como podréis observar, en este caso para ser más precisos, utilizaremos para el top y left centesimales.
Como habéis visto, tendremos que repetir este código ( un elemento de imagen ) por cada dispositivo de iluminación domotizado que queramos representar en nuestro diseño.
La mayor dificultad esta en localizar la imagen oscura, creada para cada foco de iluminación, en el lugar y tamaño exacto que le corresponde. Para ello iremos variando la posición y/o el tamaño, refrescando la pantalla y corrigiendo hasta obtener el resultado deseado.
Recordad, que podéis disponer una visión del diseño a pantalla completa con la utilización de “panel: true”, como ya explicamos en la anterior parte del tutorial.
Como resultado obtendréis algo como esto (fue mi primer diseño con esta técnica), espero que lo mejoréis con la información aportada en este tutorial. 
