Aide pour création d'une carte

[anon51798830]

Le code actuel :

type: custom:button-card
name: Poêle à granulés
custom_fields:
  etat_poele:
    card:
      type: custom:button-card
      name: |
        [[[
          if (states['input_boolean.essai_poele'].state == 'off')
            return 'Off';
          else
            return 'On';
        ]]]
      show_icon: false
      show_name: true
      show_state: false
      styles:
        card:
          - width: 150px
          - height: 65px
          - background: none
          - border: none
          - cursor: default
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'rgba(128,0,0,1.0)';
                else
                  return 'rgba(0,128,0,1.0)';
              ]]]
  bouton_moins:
    card:
      type: custom:button-card
      icon: mdi:minus
      show_icon: true
      styles:
        card:
          - width: 90px
          - height: 65px
          - background-color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(54,54,54,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(60,60,60,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        icon:
          - color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - width: 45%
      tap_action:
        action: |
          [[[
            if (states['input_number.essai_temp_consigne'].state > '14.0')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.decrement_essai_temp_consigne
  temp_consigne:
    card:
      type: custom:button-card
      entity: input_number.essai_temp_consigne
      show_icon: false
      show_name: false
      show_state: true
      styles:
        card:
          - width: 150px
          - height: 65px
          - background-color: rgba(54,54,54,1.0)
          - border: 2px solid rgba(60,60,60,1.0)
          - cursor: default
        state:
          - color: white
          - font-size: 48px
  bouton_plus:
    card:
      type: custom:button-card
      icon: mdi:plus
      show_icon: true
      styles:
        card:
          - width: 90px
          - height: 65px
          - background-color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(54,54,54,1.0)';
              ]]]          
          - border: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return '2px solid rgba(60,60,60,0.4)';
                else
                  return '2px solid rgba(60,60,60,1.0)';
              ]]]          
          - cursor: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        icon:
          - color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'dimgray';
                else
                  return 'white';
              ]]]          
          - width: 45%
      tap_action:
        action: |
          [[[
            if (states['input_number.essai_temp_consigne'].state < '32.0')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.increment_temp_consigne
  temperature:
    card:
      type: custom:button-card
      entity: sensor.echo_salon_temperature
      show_icon: true
      show_name: false
      show_state: true
      layout: icon_state
      styles:
        card:
          - width: 150px
          - height: 65px
          - background: none
          - border: none
          - cursor: default
        state:
          - color: white
          - font-size: 24px
          - padding-right: 10px
        icon:
          - color: white
          - width: 50%
          - margin-left: "-10px"
  bouton_allumer:
    card:
      type: custom:button-card
      entity: input_boolean.essai_poele
      icon: mdi:fire
      name: Allumer
      show_icon: true
      layout: icon_name
      styles:
        card:
          - width: 162px
          - height: 60px
          - background-color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(158,158,158,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(164,164,164,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-right: 30px
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - width: 60%
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'off')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: input_boolean.turn_on
        service_data:
          entity_id: input_boolean.essai_poele
  bouton_eteindre:
    card:
      type: custom:button-card
      icon: mdi:power
      name: Eteindre
      show_icon: true
      layout: icon_name
      styles:
        card:
          - width: 162px
          - height: 60px
          - background-color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(158,158,158,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(160,160,160,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-right: 20px
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-left: 10px
          - width: 60%
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: input_boolean.turn_off
        service_data:
          entity_id: input_boolean.essai_poele
  niveau_cuve:
    card:
      type: custom:button-card
      show_name: true
      show_icon: false
      show_state: false
      name: "Cuve :"
      custom_fields:
        fond_barre:
          card:
            type: custom:button-card
            styles:
              card:
                - width: 200px
                - height: 30px
                - border-radius: 15px
                - background-color: rgba(255,165,0,0.2)
        niveau_remplissage:
          card:
            type: custom:button-card
            styles:
              card:
                - width: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      return `${niveau * 2}px`
                    ]]]
                - height: 30px
                - border-radius: 15px
                - background-color: rgba(255,165,0,1.0)
      styles:
        card:
          - width: 260px
          - height: 30px
          - background: none
          - border: none
          - border-radius: 0
          - padding: 0
          - display: flex
          - align-items: center
          - cursor: default
          - "--mdc-ripple-press-opacity": 0
        name:
          - font-size: 16px
          - color: white
          - position: absolute
          - top: 5px
          - left: 0px
      tap_action:
        action: none
  bouton_puissance:
    card:
      type: custom:button-card
      entity: input_number.essai_puissance_poele
      icon: mdi:fire
      show_icon: true
      show_name: false
      show_state: true
      layout: icon_state
      styles:
        card:
          - width: 90px
          - height: 50px
          - background-color: rgba(22,22,22,1.0)
          - border: 1px solid rgba(40,40,40,0.5)
          - border-radius: 25px
          - "--mdc-ripple-press-opacity": 0.12
        state:
          - font-size: 20px
          - font-weight: bold
          - color: white
        icon:
          - color: white
          - width: 80%
          - padding-left: 20px
      tap_action:
        action: call-service
        service: script.increment_puissance_poele
styles:
  card:
    - width: 480px
    - height: 430px
    - background-color: rgba(30,30,30,1.0)
    - cursor: default
    - "--mdc-ripple-press-opacity": 0
  name:
    - font-size: 20px
    - color: white
    - position: absolute
    - top: 20px
  custom_fields:
    etat_poele:
      - position: absolute
      - top: 70px
      - left: 164px
    bouton_moins:
      - position: absolute
      - top: 135px
      - left: 65px
    temp_consigne:
      - position: absolute
      - top: 135px
      - left: 164px
    bouton_plus:
      - position: absolute
      - top: 135px
      - right: 65px
    temperature:
      - position: absolute
      - top: 200px
      - left: 164px
    bouton_allumer:
      - position: absolute
      - top: 270px
      - left: 85px
      - z-index: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return '0';
            else
              return '2';
          ]]]
    bouton_eteindre:
      - position: absolute
      - top: 270px
      - right: 85px
      - z-index: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'off')
              return '0';
            else
              return '2';
          ]]]
    niveau_cuve:
      - position: absolute
      - top: 370px
      - left: 30px
    bouton_puissance:
      - position: absolute
      - top: 360px
      - right: 30px

Je fais la modification pour que le bouton de réglage de la puissance ne soit cliquable que si le poêle est allumé.

Pour le remplissage, du coup, tu veux un changement de couleur de la barre de remplissage en fonction du niveau, c’est bien ça (donc pas de dégradé) ?
Que veux-tu dire par le status du poêle (état « on » ou « off ») ou la puissance active ?

[Bougnat63]

oui couleur de la barre en fonction du niveau

Pour le status, j’ai un sensor qui me renvoi l’info si le poele est en phase d’allumage , travail , extinction et les alarme etc

[Bougnat63]

j’ai reussi a rajouté le status , ca me permet de comprendre comment ça fonctionne également .

Si je veut changer la couleur d’ecriture suivant le status afficher il faut que je rajoute styles: etc

[anon51798830]

Le but est effectivement que tu comprennes le fonctionnement (d’où le fait que je mettes le code au différentes modifications : ainsi par comparaison, tu peux voir ce que donne les modifications)

Le code final (?) :

type: custom:button-card
name: Poêle à granulés
custom_fields:
  etat_poele:
    card:
      type: custom:button-card
      name: |
        [[[
          if (states['input_boolean.essai_poele'].state == 'off')
            return 'Off';
          else
            return 'On';
        ]]]
      show_icon: false
      show_name: true
      show_state: false
      styles:
        card:
          - width: 150px
          - height: 65px
          - background: none
          - border: none
          - cursor: default
        name:
          - font-size: 24px
          - font-weight: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'bold';
                else
                  return 'regular';
              ]]]
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'rgba(128,0,0,1.0)';
                else
                  return 'rgba(0,128,0,1.0)';
              ]]]
  bouton_moins:
    card:
      type: custom:button-card
      icon: mdi:minus
      show_icon: true
      styles:
        card:
          - width: 90px
          - height: 65px
          - background-color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(54,54,54,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(60,60,60,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        icon:
          - color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - width: 45%
      tap_action:
        action: |
          [[[
            if (states['input_number.essai_temp_consigne'].state > '14.0')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.decrement_essai_temp_consigne
  temp_consigne:
    card:
      type: custom:button-card
      entity: input_number.essai_temp_consigne
      show_icon: false
      show_name: false
      show_state: true
      styles:
        card:
          - width: 150px
          - height: 65px
          - background-color: rgba(54,54,54,1.0)
          - border: 2px solid rgba(60,60,60,1.0)
          - cursor: default
        state:
          - color: white
          - font-size: 48px
  bouton_plus:
    card:
      type: custom:button-card
      icon: mdi:plus
      show_icon: true
      styles:
        card:
          - width: 90px
          - height: 65px
          - background-color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(54,54,54,1.0)';
              ]]]          
          - border: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return '2px solid rgba(60,60,60,0.4)';
                else
                  return '2px solid rgba(60,60,60,1.0)';
              ]]]          
          - cursor: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        icon:
          - color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'dimgray';
                else
                  return 'white';
              ]]]          
          - width: 45%
      tap_action:
        action: |
          [[[
            if (states['input_number.essai_temp_consigne'].state < '32.0')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.increment_temp_consigne
  temperature:
    card:
      type: custom:button-card
      entity: sensor.echo_salon_temperature
      show_icon: true
      show_name: false
      show_state: true
      layout: icon_state
      styles:
        card:
          - width: 150px
          - height: 65px
          - background: none
          - border: none
          - cursor: default
        state:
          - color: white
          - font-size: 24px
          - padding-right: 10px
        icon:
          - color: white
          - width: 50%
          - margin-left: "-10px"
  bouton_allumer:
    card:
      type: custom:button-card
      entity: input_boolean.essai_poele
      icon: mdi:fire
      name: Allumer
      show_icon: true
      layout: icon_name
      styles:
        card:
          - width: 162px
          - height: 60px
          - background-color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(158,158,158,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(164,164,164,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-right: 30px
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - width: 60%
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'off')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: input_boolean.turn_on
        service_data:
          entity_id: input_boolean.essai_poele
  bouton_eteindre:
    card:
      type: custom:button-card
      icon: mdi:power
      name: Eteindre
      show_icon: true
      layout: icon_name
      styles:
        card:
          - width: 162px
          - height: 60px
          - background-color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(158,158,158,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(160,160,160,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-right: 20px
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-left: 10px
          - width: 60%
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: input_boolean.turn_off
        service_data:
          entity_id: input_boolean.essai_poele
  niveau_cuve:
    card:
      type: custom:button-card
      show_name: true
      show_icon: false
      show_state: false
      name: "Cuve :"
      custom_fields:
        fond_barre:
          card:
            type: custom:button-card
            styles:
              card:
                - width: 200px
                - height: 30px
                - border-radius: 15px
                - background-color: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      if (niveau <= 30) {
                        return 'rgba(255,0,0,0.2)';
                      } else if (niveau >= 31 && niveau <= 49) {
                        return 'rgba(255,165,0,0.2)';
                      } else {
                        return 'rgba(0,128,0,0.2)';
                      }
                    ]]]
        niveau_remplissage:
          card:
            type: custom:button-card
            styles:
              card:
                - width: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      return `${niveau * 2}px`
                    ]]]
                - height: 30px
                - border-radius: 15px
                - background-color: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      if (niveau <= 30) {
                        return 'rgba(255,0,0,1.0)';
                      } else if (niveau >= 31 && niveau <= 49) {
                        return 'rgba(255,165,0,1.0)';
                      } else {
                        return 'rgba(0,128,0,1.0)';
                      }
                    ]]]
      styles:
        card:
          - width: 260px
          - height: 30px
          - background: none
          - border: none
          - border-radius: 0
          - padding: 0
          - display: flex
          - align-items: center
          - cursor: default
          - "--mdc-ripple-press-opacity": 0
        name:
          - font-size: 16px
          - color: white
          - position: absolute
          - top: 5px
          - left: 0px
      tap_action:
        action: none
  bouton_puissance:
    card:
      type: custom:button-card
      entity: input_number.essai_puissance_poele
      icon: mdi:fire
      show_icon: true
      show_name: false
      show_state: true
      layout: icon_state
      styles:
        card:
          - width: 90px
          - height: 50px
          - background-color: rgba(22,22,22,1.0)
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return '1px solid rgba(40,40,40,1.0)'; 
                else
                  return 'none';
              ]]]
          - border-radius: 25px
          - "--mdc-ripple-press-opacity": 0.12
        state:
          - font-size: 20px
          - font-weight: bold
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'white'; 
                else
                  return 'dimgray';
              ]]]
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'white'; 
                else
                  return 'dimgray';
              ]]]
          - width: 80%
          - padding-left: 20px
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.increment_puissance_poele
styles:
  card:
    - width: 480px
    - height: 430px
    - background-color: rgba(30,30,30,1.0)
    - cursor: default
    - "--mdc-ripple-press-opacity": 0
  name:
    - font-size: 20px
    - color: white
    - position: absolute
    - top: 20px
  custom_fields:
    etat_poele:
      - position: absolute
      - top: 70px
      - left: 164px
    bouton_moins:
      - position: absolute
      - top: 135px
      - left: 65px
    temp_consigne:
      - position: absolute
      - top: 135px
      - left: 164px
    bouton_plus:
      - position: absolute
      - top: 135px
      - right: 65px
    temperature:
      - position: absolute
      - top: 200px
      - left: 164px
    bouton_allumer:
      - position: absolute
      - top: 270px
      - left: 85px
      - z-index: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return '0';
            else
              return '2';
          ]]]
    bouton_eteindre:
      - position: absolute
      - top: 270px
      - right: 85px
      - z-index: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'off')
              return '0';
            else
              return '2';
          ]]]
    niveau_cuve:
      - position: absolute
      - top: 370px
      - left: 30px
    bouton_puissance:
      - position: absolute
      - top: 360px
      - right: 30px

Là tu as les modifications concernant le bouton « puissance » (il change d’aspect et devient cliquable ou pas en fonction de l’état du poêle) et le changement de couleur de la barre de niveau de remplissage (et la couleur du support de la barre) en fonction de la valeur du niveau de remplissage.

Poêle allumé avec 27% de remplissage :

Poêle éteint avec 46% de remplissage :

[Bougnat63]

C’est top merci beaucoup, pour prendre le temps

[anon51798830]

@Bougnat63

j’ai reussi a rajouté le status

Tu peux simplement remplacer la veleur « On » ou « Off » par le status remplacer « On » par « Allumage » ou « Travail » en fonction ou « Extinction » et « Off » par « Eteint » quand il est effectivement éteint mais il faudra dans ce cas penser à changer toute la logique de fonctionnement de la carte (pour l’instant, tout est basé sur l’état « On » ou « Off »).

[Bougnat63]

Je vais garder l’état On ou Off c’est un bon indicateur. le status est plus optionnel et savoir ou il en ai

[anon51798830]

C’est toi qui est maitre de cette carte maintenant
Je t’ai ajouté d’autre visuels sur mon post précédant.

Si tu penses que tu as la solution à ton problème initial, passe ton post en résolu

[Bougnat63]

Un grand merci , oui j’ai vu les autres visuel c’est top.

[anon51798830]

@WarC0zes

Beh, prends-toi la tête

Pas eu de prise de tête

[WarC0zes]

La solution, n’est pas ton message, mais celui de @anon51798830 avec tout le code et boulot qu’il t’a fait.
J’ai changé la solution.

[Bougnat63]

A oui désolé m’étais tromper

[anon51798830]

Lol, pas de souci

Je finalise un truc sur l’affichage du label que si le niveau de remplissage est suffisament important pour permettre l’affichage du pourcentage de remplissage et je te mets le code (pas avant demain car c’est l’heure de l’apéro là )

[anon51798830]

Allez, cadeau

La barre de niveau de remplissage droite et non pas arrondie.

Indication du niveau de remplissage sur la barre si niveau de remplissage supérieur à 15% (en dessous, pas la place pour l’inscrire, donc pas d’inscription…)

Le nouveau code :

type: custom:button-card
name: Poêle à granulés
custom_fields:
  etat_poele:
    card:
      type: custom:button-card
      name: |
        [[[
          if (states['input_boolean.essai_poele'].state == 'off')
            return 'Off';
          else
            return 'On';
        ]]]
      show_icon: false
      show_name: true
      show_state: false
      styles:
        card:
          - width: 150px
          - height: 65px
          - background: none
          - border: none
          - cursor: default
        name:
          - font-size: 24px
          - font-weight: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'bold';
                else
                  return 'regular';
              ]]]
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'rgba(128,0,0,1.0)';
                else
                  return 'rgba(0,128,0,1.0)';
              ]]]
  bouton_moins:
    card:
      type: custom:button-card
      icon: mdi:minus
      show_icon: true
      styles:
        card:
          - width: 90px
          - height: 65px
          - background-color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(54,54,54,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(60,60,60,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        icon:
          - color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state <= '14.0')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - width: 45%
      tap_action:
        action: |
          [[[
            if (states['input_number.essai_temp_consigne'].state > '14.0')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.decrement_essai_temp_consigne
  temp_consigne:
    card:
      type: custom:button-card
      entity: input_number.essai_temp_consigne
      show_icon: false
      show_name: false
      show_state: true
      styles:
        card:
          - width: 150px
          - height: 65px
          - background-color: rgba(54,54,54,1.0)
          - border: 2px solid rgba(60,60,60,1.0)
          - cursor: default
        state:
          - color: white
          - font-size: 48px
  bouton_plus:
    card:
      type: custom:button-card
      icon: mdi:plus
      show_icon: true
      styles:
        card:
          - width: 90px
          - height: 65px
          - background-color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(54,54,54,1.0)';
              ]]]          
          - border: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return '2px solid rgba(60,60,60,0.4)';
                else
                  return '2px solid rgba(60,60,60,1.0)';
              ]]]          
          - cursor: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        icon:
          - color: |
              [[[
                if (states['input_number.essai_temp_consigne'].state >= '32.0')
                  return 'dimgray';
                else
                  return 'white';
              ]]]          
          - width: 45%
      tap_action:
        action: |
          [[[
            if (states['input_number.essai_temp_consigne'].state < '32.0')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.increment_temp_consigne
  temperature:
    card:
      type: custom:button-card
      entity: sensor.echo_salon_temperature
      show_icon: true
      show_name: false
      show_state: true
      layout: icon_state
      styles:
        card:
          - width: 150px
          - height: 65px
          - background: none
          - border: none
          - cursor: default
        state:
          - color: white
          - font-size: 24px
          - padding-right: 10px
        icon:
          - color: white
          - width: 50%
          - margin-left: "-10px"
  bouton_allumer:
    card:
      type: custom:button-card
      entity: input_boolean.essai_poele
      icon: mdi:fire
      name: Allumer
      show_icon: true
      layout: icon_name
      styles:
        card:
          - width: 162px
          - height: 60px
          - background-color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(158,158,158,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(164,164,164,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-right: 30px
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - width: 60%
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'off')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: input_boolean.turn_on
        service_data:
          entity_id: input_boolean.essai_poele
  bouton_eteindre:
    card:
      type: custom:button-card
      icon: mdi:power
      name: Eteindre
      show_icon: true
      layout: icon_name
      styles:
        card:
          - width: 162px
          - height: 60px
          - background-color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'rgba(54,54,54,0.4)';
                else
                  return 'rgba(158,158,158,1.0)';
              ]]]
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return '2px solid rgba(60,60,60,0.2)';
                else
                  return '2px solid rgba(160,160,160,1.0)';
              ]]]
          - cursor: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'default';
                else
                  return 'hand';
              ]]]
          - "--mdc-ripple-press-opacity": 0.12
        name:
          - font-size: 24px
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-right: 20px
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'off')
                  return 'dimgray';
                else
                  return 'white';
              ]]]
          - padding-left: 10px
          - width: 60%
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: input_boolean.turn_off
        service_data:
          entity_id: input_boolean.essai_poele
  niveau_cuve:
    card:
      type: custom:button-card
      show_name: true
      show_icon: false
      show_state: false
      name: "Cuve :"
      custom_fields:
        fond_barre:
          card:
            type: custom:button-card
            styles:
              card:
                - width: 200px
                - height: 30px
                - border-radius: 15px
                - background-color: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      if (niveau <= 30) {
                        return 'rgba(255,0,0,0.2)';
                      } else if (niveau >= 31 && niveau <= 49) {
                        return 'rgba(255,165,0,0.2)';
                      } else {
                        return 'rgba(0,128,0,0.2)';
                      }
                    ]]]
        niveau_remplissage:
          card:
            type: custom:button-card
            label: |
              [[[
                const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                return niveau > 15 ? `${niveau}%` : "";
              ]]]
            show_label: true
            styles:
              card:
                - width: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      return `${niveau * 2}px`
                    ]]]
                - height: 30px
                - border-top-left-radius: 15px
                - border-bottom-left-radius: 15px
                - border-top-right-radius: 0px
                - border-bottom-right-radius: 0px
                - background-color: |
                    [[[
                      const niveau = parseFloat(states['input_number.essai_niveau_cuve']?.state || 0);
                      if (niveau <= 30) {
                        return 'rgba(255,0,0,1.0)';
                      } else if (niveau >= 31 && niveau <= 49) {
                        return 'rgba(255,165,0,1.0)';
                      } else {
                        return 'rgba(0,128,0,1.0)';
                      }
                    ]]]
              label:
                - font-size: 14px
                - color: white
                - text_align: center
      styles:
        card:
          - width: 260px
          - height: 30px
          - background: none
          - border: none
          - border-radius: 0
          - padding: 0
          - display: flex
          - align-items: center
          - cursor: default
          - "--mdc-ripple-press-opacity": 0
        name:
          - font-size: 16px
          - color: white
          - position: absolute
          - top: 5px
          - left: 0px
      tap_action:
        action: none
  bouton_puissance:
    card:
      type: custom:button-card
      entity: input_number.essai_puissance_poele
      icon: mdi:fire
      show_icon: true
      show_name: false
      show_state: true
      layout: icon_state
      styles:
        card:
          - width: 90px
          - height: 50px
          - background-color: rgba(22,22,22,1.0)
          - border: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return '1px solid rgba(40,40,40,1.0)'; 
                else
                  return 'none';
              ]]]
          - border-radius: 25px
          - "--mdc-ripple-press-opacity": 0.12
        state:
          - font-size: 20px
          - font-weight: bold
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'white'; 
                else
                  return 'dimgray';
              ]]]
        icon:
          - color: |
              [[[
                if (states['input_boolean.essai_poele'].state == 'on')
                  return 'white'; 
                else
                  return 'dimgray';
              ]]]
          - width: 80%
          - padding-left: 20px
      tap_action:
        action: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return 'call-service'; 
            else
              return 'none';
          ]]]
        service: script.increment_puissance_poele
styles:
  card:
    - width: 480px
    - height: 430px
    - background-color: rgba(30,30,30,1.0)
    - cursor: default
    - "--mdc-ripple-press-opacity": 0
  name:
    - font-size: 20px
    - color: white
    - position: absolute
    - top: 20px
  custom_fields:
    etat_poele:
      - position: absolute
      - top: 70px
      - left: 164px
    bouton_moins:
      - position: absolute
      - top: 135px
      - left: 65px
    temp_consigne:
      - position: absolute
      - top: 135px
      - left: 164px
    bouton_plus:
      - position: absolute
      - top: 135px
      - right: 65px
    temperature:
      - position: absolute
      - top: 200px
      - left: 164px
    bouton_allumer:
      - position: absolute
      - top: 270px
      - left: 85px
      - z-index: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'on')
              return '0';
            else
              return '2';
          ]]]
    bouton_eteindre:
      - position: absolute
      - top: 270px
      - right: 85px
      - z-index: |
          [[[
            if (states['input_boolean.essai_poele'].state == 'off')
              return '0';
            else
              return '2';
          ]]]
    niveau_cuve:
      - position: absolute
      - top: 370px
      - left: 30px
    bouton_puissance:
      - position: absolute
      - top: 360px
      - right: 30px

[anon51798830]

@WarC0zes

Beh, prends-toi la tête

Finalement, c’est beaucoup plus simple que prévu de faire une barre de progression de type custom:bar-card avec custom:button-card vu qu’on peut préciser quel coin du rectangle doit être arrondi :

                - border-top-left-radius: 15px
                - border-bottom-left-radius: 15px
                - border-top-right-radius: 0px
                - border-bottom-right-radius: 0px

[Bougnat63]

Merci Cleya pour la mise à jour.

Je me suis rajouter le satus avec un changement de couleur suivant la phase en cours

Vert-travail, blanc-phase d’allumage ou extinction et rouge pour les alarm

C’est pile ce que je voulais