Afficher une image dans une position différente en fonction d'un état

Entraide Home Assistant
,
1

Bonjour,
J’ai essayé de chercher dans le forum mais je n’ai pas réussi à trouver, alors mes excuses si le sujet a déjà été traité.
J’ai un robot aspirateur et je souhaite que sur mon Dashboard, une image se mette dans la bonne pièce en fonction de la position du robot. Pour éviter de copier-coller le même code pour chaque pièce, je pensais faire écrire une position différente (left et top) en fonction de l’état de l’entité qui me remonte la pièce dans laquelle il se trouve. Malheureusement, je n’arrive pas à écrire le code pour que cela fonctionne.

Mon code actuel :

  - type: conditional
    conditions:
      - entity: vacuum.nestor
        state: cleaning
    elements:
      - type: image
        image: local/images/icons/icon_vacuum_on.png
        style: 
          left: 32%;
          top: 52%
          width: 03%

Et voici l’idée du code que je souhaite faire (mais qui ne marche pas :slight_smile: :

  - type: conditional
    conditions:
      - entity: vacuum.nestor
        state: cleaning
    elements:
      - type: image
        image: local/images/icons/icon_vacuum_on.png
        style: >-
         {% if states('sensor.nestor_current_room')=='Living Room' %}
         left: 32%;
         top: 52%
         {% endif %}
         width: 03%

D’avance merci pour votre aide.

2

Salut,

Le plus simple c’est de passer par state_image. Le principe est le suivant :

  • la position de l’image es toujours la même
  • tu peux définir une image par défaut
  • et des images additionnelles qui changent en fonction de l’état

Chez moi par défaut il n’y a rien (une image transparente), quand à l’état on la vraie image de la poubelle est là

    element:
      type: image
      style:
        top: 33%
        left: 74.4%
        width: 2%
      entity: binary_sensor.poubelle_periode
      image: /local/images/empty.png
      state_image:
        'on': /local/images/floors/rdc/items/poubelle.png
      tap_action:
3

merci pour l’astuce. Je vais regarder ça mais j’avoue que cela va me faire générer beaucoup d’images (une par pièce au moins) alors que je pensais pouvoir écrire une position différente en fonction de l’état.
Merci quand même :slight_smile:

4

Pourquoi 1 par pièce ? Tu as un montage photo rapide pour se rendre compte ? Un menu commun, ça expliquerai le fait que ça s’affiche partout, mais à une position différente à chaque fois, c’est compliqué (et ergonomiquement c’est pas idéal)

5

Par exemple si le robot est dans le salon, j’aurai :

image
image1299×731 97.9 KB

et si il est dans une chambre :
image
image1265×719 94.5 KB

1 « J'aime »
6

Ok je vois. Donc 5 cas (cuisine/salon/chb1 2 ou 3) c’est lourd.
Dans ce cas, tu peux essayer le decluttering… En variables, les positions top/left + valeur du state (equiv la pièce) et le reste (avec une carte conditionnelle) est commun
Par contre ça fera toujours 5 superposition à gérer
Il y a peut-être plus malin, mais pour l’instant je ne vois pas

7

Avec une custom:button-card avec en background-image ton image 3D et un custom_field pour l’aspirateur ?

8

Je suis sur une carte type: picture-elements, je ne pense pas que ce soit compatible. Je dois choisir l’une ou l’autre mais si je choisis la custom:button-card, je vais perdre d’auters fonctionnalités. (tous les picto que tu vois sur ma capture écran qui permet le contrôle de lampes, volets…

9

Tous les « picto » peuvent être mis sur une carte custom:button-card avec en image de fond ton image 3D. Tu peux les placer au pixel près, les masquer et les afficher à la demande et tous peuvent être cliquable, changer de couleur quand les lamps sont allumées ou d’aspect quand les volets sont ouverts ou fermés, etc. Le déplacement de ton « picto » pour l’aspirateur pourra être géré en fonction d’un input_number ou un input_text automatiquement.

10

Ok, je vais me pencher sur ça. Merci :grinning: