Home Assistant , crear un panel de navidad

por

En esta ocasión vamos a crear un panel de navidad al que luego iremos añadiendo una serie de cositas . lo primero será buscar las imágenes y las editaremos con https://www.aconvert.com/es/image/edit/

Le quitaremos el fondo y la grabaremos como arbol_x_on.png

Lo pasamos a escala de grises y la grabaremos como arbol_x_off.png

Una vez que tengamos varios candidatos crearemos una carpeta llamada navidad en www y guardaremos las imágenes allí

Crearemos un par de tarjetas condicionales para cada uno de los estados de nuestras tiras led

A la hora de montarlo en nuestro panel tenemos varias opciones

Tarjeta conditional

    - type: conditional
      conditions:
        - entity: light.luz_led_arbol  
          state: "on"
      card:
        type: picture
        image: /local/navidad/arbol_5_on.png
        tap_action:
          action: call-service
          service: light.toggle
          data:
            entity_id: light.luz_led_arbol      


    - type: conditional
      conditions:
        - entity: light.luz_led_arbol  
          state: "off"
      card:
        type: picture
        image: /local/navidad/arbol_5_off.png
        tap_action:
          action: call-service
          service: light.toggle
          data:
            entity_id: light.luz_led_arbol

Tarjeta picture-entity

    - type: picture-entity
      entity: light.luz_led_arbol
      state_image:
        "on": /local/navidad/arbol_5_on.png
        "off": /local/navidad/arbol_5_off.png           
      tap_action:
        action: call-service
        service: light.toggle
        data:
          entity_id: light.luz_led_arbol

Tarjeta picture-glance

      - type: picture-glance   
        title: Arbol navidad
        entities: 
          - light.luz_led_arbol
        state_image:
          "on": /local/navidad/arbol_5_on.png 
          "off": /local/navidad/arbol_5_off.png 
        entity: light.luz_led_arbol    
        tap_action:
          action: toggle

Yo al final me decidí por usar picture-glance , y que al pulsar sobre la imagen cambie el estado de la luz en cuestión al final el yaml de nuestro panel quedaria así mas o menos

title: Navidad
icon: mdi:pine-tree  
cards:
    
  - type: horizontal-stack
    cards:
     
      - type: picture-glance   
        # title: Arbol navidad
        entities: 
          - light.luz_led_arbol
        state_image:
          "on": /local/navidad/arbol_5_on.png 
          "off": /local/navidad/arbol_5_off.png 
        entity: light.luz_led_arbol    
        tap_action:
          action: toggle
    
      - type: picture-glance   
        # title: Luces exteriores
        entities: 
          - light.luz_led_arbol
        state_image:
          "on": /local/navidad/balcon_7_on.png 
          "off": /local/navidad/balcon_7_off.png 
        entity: light.luz_led_arbol    
        tap_action:
          action: toggle

Y así es como quedaria nuestro panel con las luces encendidas

Y así se vería con las luces apagadas

Dejo aquí una serie de imágenes listas para usar

Y con esto y un bizcocho …..

Deja un comentario