Refresh UI après un input_select.select_option

Entraide Home Assistant
1

Bonjour à tous,

J’ai un input_select qui peux prendre trois valeurs : Maison, Rez-de-chaussée ou Etage. Je souhaite pouvoir le changer avec trois bouton et mettre à jour mon interface en fonction de cette valeur.

Mon problème est le suivant : lorsque je clique sur un bouton, mon changement de valeur se fait bien mais je dois rafraîchir manuellement l’interface pour la prise en compte….

Voilà une vidéo montrant le pb :
image

Voilà le code de mes boutons :

card_select_floor:
  show_icon: false
  show_label: true
  show_name: true
  styles:
    grid:
      - grid-template-areas: "'n item1 item2 item3' 'l item1 item2 item3'"
      - grid-template-columns: "1fr 60px 60px 60px"
      - grid-template-rows: "min-content  min-content"
    card:
      - background-color: "rgba(0,0,0,0)"
      - box-shadow: "none"
      - height: "auto"
      - margin: "5px 0px 0px 0px"
      - padding: "0px"
    name:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1.5rem"
    label:
      - justify-self: "start"
      - font-size: "0.8rem"
      - opacity: "0.4"
  name: >
    [[[ return states[variables.input_select_name].state; ]]]
  label: >
    [[[
      if (states[variables.input_select_name].state == "Maison") {
        return "X pièces dans la maison";
      } else if (states[variables.input_select_name].state == "Rez-de-chaussée") {
        return "X pièces au rez-de-chaussée";
      } else {
        return "X pièces à l'étage";
      }
    ]]]
  custom_fields:
    item1:
      card:
        type: custom:button-card
        name: Maison
        icon: mdi:home-assistant
        styles:
          card:
            - background-color: "rgba(0,0,0,0)"
            - box-shadow: "none"
            - padding: "0px"
          icon:
            - width: 30px
            - opacity: >
                [[[
                  if (states[variables.input_select_name].state == "Maison") {
                    return 1;
                  } else {
                    return 0.4;
                  }
                ]]]
          name:
            - font-size: "0.8rem"
            - opacity: >
                [[[
                  if (states[variables.input_select_name].state == "Maison") {
                    return 1;
                  } else {
                    return 0.4;
                  }
                ]]]
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: "[[[ return variables.input_select_name; ]]]"
            option: Maison
    item2:
      card:
        type: custom:button-card
        name: RDC
        icon: mdi:home-floor-0
        styles:
          card:
            - background-color: "rgba(0,0,0,0)"
            - box-shadow: "none"
            - padding: "0px"
          icon:
            - width: 30px
            - opacity: >
                [[[
                  if (states[variables.input_select_name].state == "Rez-de-chaussée") {
                    return 1;
                  } else {
                    return 0.4;
                  }
                ]]]
          name:
            - font-size: "0.8rem"
            - opacity: >
                [[[
                  if (states[variables.input_select_name].state == "Rez-de-chaussée") {
                    return 1;
                  } else {
                    return 0.4;
                  }
                ]]]
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: "[[[ return variables.input_select_name; ]]]"
            option: Rez-de-chaussée
    item3:
      card:
        type: custom:button-card
        name: Etage
        icon: mdi:home-floor-1
        styles:
          card:
            - background-color: "rgba(0,0,0,0)"
            - box-shadow: "none"
            - padding: "0px"
          icon:
            - width: 30px
            - opacity: >
                [[[
                  if (states[variables.input_select_name].state == "Etage") {
                    return 1;
                  } else {
                    return 0.4;
                  }
                ]]]
          name:
            - font-size: "0.8rem"
            - opacity: >
                [[[
                  if (states[variables.input_select_name].state == "Etage") {
                    return 1;
                  } else {
                    return 0.4;
                  }
                ]]]
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: "[[[ return variables.input_select_name; ]]]"
            option: Etage

Merci d’avance et bonne journée.

2

Salut,

je ne sais pas te répondre, mais c’est surement le genre d’élément d’interface ou l’intégration browser mod qui se trouver dans HACS.

Eléments d’interface

Intégration Browser Mod

3

Cela ressemble au fait que button-card ne scrute pas la mise à jour de l’entité concernée.

Gestion de la mise à jour dans la carte personnalisée [Button-Card]

4

Bonsoir,

Si par exemple vous ajoutez un appel de service « homeassistant.update_entity » pour l’entité en question à la suite dans les sections « tap_action », est-ce que vous avez toujours ce problème d’actualisation ?

Mcp

5

@Clemalex a encore les bonnes pistes :slight_smile:

J’ai utilisé le « state » pour adapter mes opacités et titre et cela fonctionne :

FullSizeRender

card_select_floor:
  show_icon: false
  show_label: true
  show_name: true
  styles:
    grid:
      - grid-template-areas: "'n item1 item2 item3' 'l item1 item2 item3'"
      - grid-template-columns: "1fr 60px 60px 60px"
      - grid-template-rows: "min-content  min-content"
    card:
      - background-color: "rgba(0,0,0,0)"
      - box-shadow: "none"
      - height: "auto"
      - margin: "5px 0px 0px 0px"
      - padding: "0px"
    name:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1.5rem"
    label:
      - justify-self: "start"
      - font-size: "0.8rem"
      - opacity: "0.4"
  state:
    - name: Maison
      value: Maison
    - name: Rez-de-chaussée
      value: Rez-de-chaussée
    - name: Etage
      value: Etage
  custom_fields:
    item1:
      card:
        type: custom:button-card
        name: Maison
        entity: "[[[ return variables.input_select_name; ]]]"
        icon: mdi:home-assistant
        styles:
          card:
            - background-color: "rgba(0,0,0,0)"
            - box-shadow: "none"
            - padding: "0px"
          icon:
            - width: 30px
          name:
            - font-size: "0.8rem"
        state:
          - styles:
              icon:
                - opacity: 1
              name:
                - opacity: 1
            value: Maison
          - styles:
              icon:
                - opacity: 0.4
              name:
                - opacity: 0.4
            operator: default
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: "[[[ return variables.input_select_name; ]]]"
            option: Maison
    item2:
      card:
        type: custom:button-card
        name: RDC
        entity: "[[[ return variables.input_select_name; ]]]"
        icon: mdi:home-floor-0
        styles:
          card:
            - background-color: "rgba(0,0,0,0)"
            - box-shadow: "none"
            - padding: "0px"
          icon:
            - width: 30px
          name:
            - font-size: "0.8rem"
        state:
          - styles:
              icon:
                - opacity: 1
              name:
                - opacity: 1
            value: Rez-de-chaussée
          - styles:
              icon:
                - opacity: 0.4
              name:
                - opacity: 0.4
            operator: default
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: "[[[ return variables.input_select_name; ]]]"
            option: Rez-de-chaussée
    item3:
      card:
        type: custom:button-card
        name: Etage
        entity: "[[[ return variables.input_select_name; ]]]"
        icon: mdi:home-floor-1
        styles:
          card:
            - background-color: "rgba(0,0,0,0)"
            - box-shadow: "none"
            - padding: "0px"
          icon:
            - width: 30px
          name:
            - font-size: "0.8rem"
        state:
          - styles:
              icon:
                - opacity: 1
              name:
                - opacity: 1
            value: Etage
          - styles:
              icon:
                - opacity: 0.4
              name:
                - opacity: 0.4
            operator: default
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: "[[[ return variables.input_select_name; ]]]"
            option: Etage