Contour image clignotante

Entraide Home Assistant
, ,
1

Bonjour,

Je suis dans les débuts de HA et actuellement mon idée est d’avoir l’image de mon frigo avec la température actuelle sur l’image, ça c’est ok, ça fonctionne.
Mais je souhaite que quand il est ouvert, le contour du frigo clignote rouge.

Voici mon code actuel : 
type: picture-elements
image: /api/image/serve/c176956bd75f6d614ddbfc6ace29a1fb/512x512
elements:
  - type: state-label
    entity: sensor.0xa4c13885846c2f8d_temperature
    prefix: "T° "
    style:
      left: 50%
      top: 50%
      font-size: 20px
      font-weight: bold
      text-align: center
    card_mod:
      style: |
        :host {
          color: {% set temp = states('sensor.0xa4c13885846c2f8d_temperature')|float %}
          {% if temp >= 4 and temp <= 8 %}
            green
          {% else %}a
            red
          {% endif %};
        }
Voici le code que j'ai déjà essayé : 
type: picture-elements
image: /api/image/serve/c176956bd75f6d614ddbfc6ace29a1fb/512x512  # Image du frigo
elements:
  - type: state-label
    entity: sensor.0xa4c13885846c2f8d_temperature
    prefix: "T° "
    style:
      left: 50%
      top: 50%
      font-size: 20px
      font-weight: bold
      text-align: center
    card_mod:
      style: |
        :host {
          color: {% set temp = states('sensor.0xa4c13885846c2f8d_temperature')|float %}
          {% if temp >= 4 and temp <= 8 %}
            green
          {% else %}
            red
          {% endif %};
        }

  # Image du frigo avec bordure qui clignote si la porte est ouverte
  - type: image
    entity: binary_sensor.fridge_door  # Entité représentant l'état de la porte du frigo
    image: /api/image/serve/c176956bd75f6d614ddbfc6ace29a1fb/512x512  # La même image du frigo
    style:
      left: 50%
      top: 50%
      width: 100%
      height: 100%
      border: 5px solid transparent  # Bordure par défaut
      animation: {% if is_state('binary_sensor.fridge_door', 'on') %} blink-red 1s infinite {% else %} none {% endif %};  # Animation de clignotement si la porte est ouverte

# Animation CSS pour faire clignoter la bordure en rouge
  - type: custom:hui-element
    card_type: markdown
    content: |
      <style>
        @keyframes blink-red {
          0% {
            border-color: red;
          }
          50% {
            border-color: transparent;
          }
          100% {
            border-color: red;
          }
        }
      </style>

Merci de votre aide

2

Hello,

Vu que c’est du picture element, c’est peut-être plus simple de mettre un gif
plan si off > gif si on

frigo

attends d’autres avis
cdt

1 « J'aime »
3

Oui je pourrais regarder de ce côté, après l’objectif ça serait d’avoir le même frigo en image, donc trouver un gif du bon modèle.

4

Re,

Bah suffit de le faire en partant de l’image de départ :wink:

porte2 veranda1 base porte2 veranda1 ouverte porte2 veranda1 defaut

avec gimp par exemple
cdt

5

Oui c’est vrai, je pense que ce n’est pas trop compliqué. Je n’ai jamais essayé, c’est l’occasion.

6

après faudra jouer avec

elements:
  - type: image
    image: /local/plan3D/xx.gif
    style:
      top: xx%
      left: xx%

pour le placer au bon endroit sur le plan au dessus de sa position actuelle

A voir si c’est plus rapide ou pas suivant si il y en a plusieurs ou pas, ça m’a pris pas mal de temps au final pour tous mes ouvrants

cdt

7

Avez-vous un code pour l’activation du giff ?

8

Re,

je gère plusieurs états mais c’est le même principe

type: picture-elements
image: /local/plan3D/plan 3D.png
elements:
  - type: image
    entity: binary_sensor.porte_chaufferie_labopi2
    style:
      top: 50%
      left: 50%
      width: 100%
     state_image:
      "on": /local/plan3D/piece maxi/ouvrant/porte chaufferie ouverte maxi.gif
      "off": /local/plan3D/piece maxi/ouvrant/porte chaufferie base maxi.png

j’affiche les 2 états au dessus du plan de base, et en fonction de l’état du sensor ça affiche la bonne image

cdt