Ecrire en couleur une entité en fonction de son état

[anon51798830]

@Matt1

type: custom:button-card
aspect_ratio: 9/3
custom_fields:
  cardGaragePortail:
    card:
      type: custom:button-card
      name: Portail &<br/>Garage
      icon: mdi:gate-open
      aspect_ratio: 1/1
      styles:
        name:
          - font-size: 0.9em
          - justify-self: middle
          - align-self: end
          - color: rgba(255,255,255,0.6)
        card:
          - background-color: rgba(64,64,64,0.8)
          - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
          - border: 2px rgba(211,211,211,1.0) outset
        icon:
          - border-radius: 50%
          - border: none
          - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
          - box-shadow: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return '0px 0px 5px 5px rgba(0,128,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return '0px 0px 5px 5px rgba(255,0,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
               ]]]
          - background-color: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(0,128,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,0,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(255,140,0,0.5)';
              ]]]
          - width: 60px
          - height: 60px
          - color: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(0,255,0,1.0)'; 
                else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,0,0,1.05)';
                else if (states['cover.porte_de_garage'].state == 'closed' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,140,0,1.0)';
                else if (states['cover.porte_de_garage'].state == 'open' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(255,140,0,1.0)';
                else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,140,0,1.0)';
                else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,140,0,1.0)';
                else if (states['cover.porte_de_garage'].state == 'closing' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(255,140,0,1.0)';
                else if (states['cover.porte_de_garage'].state == 'opening' && states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(255,140,0,1.0)';
              ]]]          
      tap_action:
        action: call-service
        service: script.portail_et_garage
      hold_action:
        action: none
  cardGarage:
    card:
      type: custom:button-card
      entity: cover.porte_de_garage
      name: Garage
      icon: mdi:garage
      show_label: true
      label: |
        [[[
          if (states['cover.porte_de_garage'].state == 'closed')
            return '<font color= "green"><b>Fermé</font>';
          else if (states['cover.porte_de_garage'].state == 'open')
            return '<font color= "red"><b>Ouvert</font>';
          else if (states['cover.porte_de_garage'].state == 'closing')
            return '<font color= "orange"><b>Fermeture</font>';
          else if (states['cover.porte_de_garage'].state == 'opening')
            return '<font color= "orange"><b>Ouverture</font>';
        ]]]
      aspect_ratio: 1/1
      styles:
        name:
          - font-size: 0.9em
          - justify-self: middle
          - align-self: end
          - color: rgba(255,255,255,0.6)
        card:
          - background-color: rgba(64,64,64,0.8)
          - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
          - border: 2px rgba(211,211,211,1.0) outset
        icon:
          - border-radius: 50%
          - border: none
          - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
          - box-shadow: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closed')
                  return '0px 0px 5px 5px rgba(0,128,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'open')
                  return '0px 0px 5px 5px rgba(255,0,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closing')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening')
                  return '0px 0px 5px 5px rgba(255,140,0,0.5)';
              ]]]
          - background-color: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closed')
                  return 'rgba(0,128,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'open')
                  return 'rgba(255,0,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'closing')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening')
                  return 'rgba(255,140,0,0.5)';
              ]]]
          - width: 60px
          - height: 60px
          - color: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closed')
                  return 'rgba(0,255,0,1.0)';
                else if (states['cover.porte_de_garage'].state == 'open')
                  return 'rgba(255,0,0,1.05)';
                else if (states['cover.porte_de_garage'].state == 'closing')
                  return 'rgba(255,140,0,0.5)';
                else if (states['cover.porte_de_garage'].state == 'opening')
                  return 'rgba(255,140,0,0.5)';
              ]]]          
        label:
          - animation: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closing')
                  return 'blink 2s ease infinite';
                else if (states['cover.porte_de_garage'].state == 'opening')
                  return 'blink 2s ease infinite';
              ]]]
      tap_action:
        action: toggle
      hold_action:
        action: none
  cardportail:
    card:
      type: custom:button-card
      entity: switch.portail_switch_0
      name: Portail
      icon: mdi:gate
      show_label: true
      label: |
        [[[
          if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
            return '<font color= "green"><b>Fermé</font>';
          else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
            return '<font color= "red"><b>Ouvert</font>';
        ]]]
      aspect_ratio: 1/1
      styles:
        name:
          - font-size: 0.9em
          - justify-self: middle
          - align-self: end
          - color: rgba(255,255,255,0.6)
        card:
          - background-color: rgba(64,64,64,0.8)
          - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
          - border: 2px rgba(211,211,211,1.0) outset
        icon:
          - border-radius: 50%
          - border: none
          - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
          - box-shadow: |
              [[[
                if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return '0px 0px 5px 5px rgba(0,128,0,0.5)';
                else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return '0px 0px 5px 5px rgba(255,0,0,0.5)';
              ]]]
          - background-color: |
              [[[
                if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(0,128,0,0.5)';
                else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,0,0,0.5)';
              ]]]
          - width: 60px
          - height: 60px
          - color: |
              [[[
                if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'off')
                  return 'rgba(0,255,0,1.0)';
                else if (states['binary_sensor.shellyplus1_e465b8f31738_input_0_input'].state == 'on')
                  return 'rgba(255,0,0,1.05)';
              ]]]          
      tap_action:
        action: toggle
      hold_action:
        action: none
styles:
  card:
    - background-color: rgba(0,0,0,0.7)
  custom_fields:
    cardGaragePortail:
      - width: 30%
      - position: absolute
      - left: 3%
      - top: 4%
    cardportail:
      - width: 30%
      - position: absolute
      - left: 35%
      - top: 4%
    cardGarage:
      - width: 30%
      - position: absolute
      - left: 67%
      - top: 4%

Code modifié avec ajout de l’animation sur le label quand le state du cover.porte_du_garage = « opening » ou « closing » à placer juste avant le « tap_action » du custom_fields « cardGarage »

        label:
          - animation: |
              [[[
                if (states['cover.porte_de_garage'].state == 'closing')
                  return 'blink 2s ease infinite';
                else if (states['cover.porte_de_garage'].state == 'opening')
                  return 'blink 2s ease infinite';
              ]]]