Aprendemos a utilizar la potencia gráfica de Lovelace UI. Tercera Parte. Diseños avanzados con iluminación, renderización de imágenes y su integración en HA (Trucos y Tips).

Hola a tod@s.

CONCEPTOS BÁSICOS:

Qué vamos a hacer hoy.

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.

Qué herramienta utilizamos para integrar 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.

Qué otra aplicación será necesaria para terminar el diseño.

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:

http://www.gimp.org.es/

Aclaración.

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.

Y finalmente…

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.

COMO IMPLEMENTAMOS LA ILUMINACIÓN EN NUESTRO PLANO DE SWEET HOME 3D:

Continuamos nuestro plano donde lo dejamos en partes anteriores.

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.

Aclaración.

En la carpeta de elementos de iluminación se encuentran dos tipos principales:

  • Diferentes elementos con representación gráfica sobre el plano (flexos, farolas, lámparas de techo, de pie, fluorescentes, etc.). Estos podremos hacer visible o no, en la representación 3D, teniendo en cuenta que si no son visibles su representación, tampoco lo será su iluminación.
  • Diferentes bombillas. Estas bombillas no será visible su representación gráfica en el modelo 3D, pero sí su iluminación que corresponderá a diferentes tipos y color.

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.

Obtención de nuestro diseño 3D con iluminación:

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.

CREACIÓN DE OTRAS IMÁGENES NECESARIAS PARA EMULAR LA ANIMACIÓN DE ILUMINACIÓN:

Aplicación de retoque de imágenes con disponibilidad de capas.

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.

Nuestro diseño 3D como primera capa.

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.

Nueva capa para la nueva imagen.

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.

Selección para crear la nueva imagen.

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.

Relleno de color negro de la selección anterior.

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.

Dinámica de trabajo.

De esta forma iremos creando diferentes imágenes rellenadas de color negro, cada una en nueva capa, para poder exportar por separado.

Guardamos la nueva imagen creada.

  • Menú (o superior o pulsando con el botón derecho en la aplicación), Editar>Copiar.
  • Editar>Pegar como>imagen nueva
  • Archivo>Exportar
  • En la ventana emergente le ponemos nombre “luz_aseo.png”, elegimos la localización donde se guardará, damos a “exportar”, y en la nueva ventana emergente, de nuevo “exportar”.

Si la imagen que necesitamos no es un rectángulo.

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:

INTEGRAMOS LAS IMAGENES CREADAS EN HOME ASSISTANT

Añadimos las imagenes a nuestra carpeta local “www” de Home Assistant.

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.).

Añadimos una nueva pestaña -view- a nuestro interfaz Lovelace.

Como vimos en la parte anterior del tutorial, añadimos el siguiente código:

- title: Luces 3D
icon: mdi:lightbulb-on
cards:

Añadimos una nueva tarjeta picture-elements.

Sumamos el siguiente código, y ponemos como imagen de fondo nuestro diseño 3D con iluminación:

  - type: picture-elements   
image: /local/images/luces/planta1/luzinterior3d_planta1.png
elements:

Añadimos un elemento tipo image.

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.

     - 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.

       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).

      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:

      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.

Dinámica de trabajo.

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.

Resultado final.

Como resultado obtendréis algo como esto (fue mi primer diseño con esta técnica), espero que lo mejoreis con la información aportada en este tutorial.

Y hasta aquí hemos llegado hoy. Espero veros pronto en nuestros canales de comunicación Telegram Twitter Facebook y que mostréis vuestros magníficos diseños.

Un saludo y hasta pronto.

Deja un comentario

Síguenos

Siguenos en facebook