Question carte picture element + state switch

Salut tout le monde,
meilleures vœux pour cette nouvelles année ^^

je me repenche sur HA après quelques mois d’arrêt par fautes de temps.

Je me suis mis dans l’idée d’intégrer un plan de maison et pour une lisibilité plus intéressante j’ai voulu tester d’intégrer une carte stae switch qui change le plan en fonction du choix.
Sa ça marche nickel, je pensais avoir fait le plus dur mais non…
Je suis sur le cas ou je n’arrive pas a déplacer mes entités par exemple le cover de ma cuisine.
J’ai beau mettre n’importe quel pourcentage en left et top l’icone ne bouge pas d’un poil.

Voici le code que j’utilise, es ce qu’il y’a une erreur ou es ce pas possible tout simplement avec une state switch ?

type: custom:stack-in-card
cards:
  - type: glance
    entities:
      - entity: input_button.piece_de_vie
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_zone
            option: Pièce de vie
        style: |
          @keyframes blink {
            50% {
              background: none;
            }
          }
          .name {
            display: none;
          }
          state-badge {
            border-style: {% if is_state('input_select.afficher_zone', 'Pièce de vie') %} dashed {% endif %};
            color: {% if is_state('input_select.afficher_zone', 'Pièce de vie') %} gold {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: input_button.chambre
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_zone
            option: Chambre
        style: |
          .name {
            display: none;
          }
          state-badge {
            border-style: {% if is_state('input_select.afficher_zone', 'Chambre') %} dashed {% endif %};
            color: {% if is_state('input_select.afficher_zone', 'Chambre') %} gold {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: input_button.garage
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_zone
            option: Garage
        style: |
          @keyframes blink {
            100% {
              transform: rotate(360deg);
            }
          }
          .name {
            display: none;
          }
          state-badge {
            border-style: {% if is_state('input_select.afficher_zone', 'Garage') %} dashed {% endif %};
            color: {% if is_state('input_select.afficher_zone', 'Garage') %} gold {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: input_button.exterieur
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_zone
            option: Exterieur
        style: |
          @keyframes blink {
            100% {
              transform: rotate(360deg);
            }
          }
          .name {
            display: none;
          }
          state-badge {
            border-style: {% if is_state('input_select.afficher_zone', 'Exterieur') %} dashed {% endif %};
            color: {% if is_state('input_select.afficher_zone', 'Exterieur') %} gold {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
  - type: custom:stack-in-card

    cards:
      - type: custom:state-switch
        entity: input_select.afficher_zone
        default: Pièce de vie
        transition: flip
        states:
          Pièce de vie:
            type: picture-elements
            elements:
              - type: state-badge
                entity: binary_sensor.rpi_power_status
                style: null
                top: 50%
                left: 50%
            image: /local/images/piecedevie.png
          Chambre:
            type: picture-elements
            elements:
              - type: state-badge
                entity: cover.cuisine
                style: null
                top: 50%
                left: 25%
            image: /local/images/chambre2.png
          Garage:
            type: picture-elements
            elements:
              - type: state-badge
                entity: cover.cuisine
                style: null
                top: 95%
                left: 25%
            image: /local/images/garage.png
          Exterieur:
            type: picture-elements
            elements:
              - type: state-badge
                entity: cover.cuisine
                style: null
                top: 95%
                left: 25%
            image: /local/images/exterieur.png

merci

Salut, voilà une partie de mon code pour faire cela :

elements:
  - ...
  - ...
  - entity: camera.camera1
    name: camera
    icon: mdi:cctv
    style:
      font-size: 10px
      left: 35%
      top: 70%
    tap_action:
      action: navigate
      navigation_path: camera
    type: state-icon
image: /local/floor-plan/2eme1.png
type: picture-elements

je suis pas sur a 100% de ce que je dis mais il me semble que le fait de mettre null apres le style fait que tu n’appliques pas de style. De plus il manque l’indentation de top et left…

1 « J'aime »

Bonjour,
regarde ton code, le style: est null ( rien de paramétrer pour c’est action ). il manque des espaces a top: et left:.

la bonne config:

              - type: state-badge
                entity: binary_sensor.rpi_power_status
                style:
                  top: 50%
                  left: 50%

C’est pas lui qui a mis null, c’est automatique quand tu enregistre la carte et que dans style: rien est configurer.

En effet WarC0zes, le fait que top et left soient mals indentés fait que ca marque le null tout seul…

Salut
Ah oui pas fait gaffe à ça……
Merci :pray: