Cherche Carte pour CLIM / Affecter services aux boutons

[VANLOC]

Bonjour à tous, pour résumer :

• J’ai acheté une télécommande intelligente WiFi IR RF315/433, pour climatiseur, téléviseurs, etc etc, que j’ai synchronisé avec ZHA
• Vu que j’ai une clim qui ne fonctionne qu’avec un signal IR, j’ai « appris » les codes des differents boutons à la télécommande intelligente
• J’ai ainsi différents services pour la fonction ON/OFF, +/-, mode etc etc

Mon problème

Mon soucis maintenant et que je souhaite affecter ces services à différents bouton, tel une télécommande virtuelle; j’ai essayé :

Une carte bouton classique; ca fait le taf quand je clique dessus à savoir ici allumer et éteindre mais je n’arrive pas à changer l’état de mon bouton (couleur ou texte) pour dire que c’est allumé ou éteint (sachant que je n’ai aucun sensor, capteur etc etc)

show_name: true
show_icon: true
type: button
tap_action:
  action: call-service
  service: zha.issue_zigbee_cluster_command
  target: {}
  data:
    cluster_type: in
    ieee: 90:39:5e:ff:fe:2f:3f:db
    endpoint_id: 1
    cluster_id: 57348
    command: 2
    command_type: server
    params:
      code: >-
        B6wRrBEzApEG4AED4AsB4BcfQAFAI+APAcAbQAfBwBtAB+AIAwIGMwI=
icon: mdi:air-conditioner
show_state: true
entity: sensor.capteur_ir_batterie  <-- entité bateau car il fallait en mettre une obligatoire

Idem avec custom:button-card, custom:simple-thermostat

type: custom:button-card
tap_action:
  action: call-service
  service: zha.issue_zigbee_cluster_command
  target: {}
  data:
    cluster_type: in
    ieee: 90:39:5e:ff:fe:2f:3f:db
    endpoint_id: 1
    cluster_id: 57348
    command: 2
    command_type: server
    params:
      code: >-
        'B6wRrBEzApEG4AED4AUAj4A8BwBtAB+AIAwIGMwI=
entity: sensor.capteur_ir_batterie
icon: mdi:air-conditioner

Du coup, est-il possible de faire ce genre de carte et d’y affecter une action d’appel de service par bouton ?

Merci beaucoup !

[Cleya]

Bonsoir,

Avec custom:button-card et des custom_fields (une custom:button-card par bouton), c’est relativement simple à faire.

Voici ce que j’avais commencé à faire pour mes climatiseurs Daikin :

J’ai supprimé les scripts allant avec mais tu devrais pouvoir t’en sortir sans.

Le code de la carte :

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: vertical
  cards:
    - type: custom:button-card
      aspect_ratio: 1/2
      custom_fields:
        fond:
          card:
            type: custom:button-card
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        logo:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/daikin_logo.svg
            aspect_ratio: 4/1
            border_radius: 0%
            size: 80%
            show_icon: false
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,1.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        ecran:
          card:
            type: custom:button-card
            aspect_ratio: 2/1.5
            styles:
              card:
                - background-image: url(/local/images/climatiseur/ecran/fond.png)
                - background-size: cover
                - background-picture: center
                - box-shadow: 6px 6px 6px 0px inset rgba(32,32,32,0.7)
                - border-radius: 6%
            tap_action:
              action: none
            hold_action:
              action: none
        clim_on:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/clim_on.png
            entity: input_boolean.salle_a_manger_interrupteur_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 2/1
            width: 100%
            styles:
              card:
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
            state:
              - value: 'off'
                styles:
                  card:
                    - opacity: 0
                    - border: none
              - value: 'on'
                styles:
                  card:
                    - opacity: 0.7
                    - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        mode_auto:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_auto.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_deshumidification:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_deshumidification.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '1')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_rafraichissement:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_rafraichissement.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '2')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_chaleur:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_chaleur.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '3')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_ventilateur:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_ventilateur.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '4')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_puissant:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_puissant.png
            entity: input_boolean.salle_a_manger_mode_puissant_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['input_boolean.salle_a_manger_mode_puissant_climatiseur'].state == 'on')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_bruit_reduit_exterieur:
          card:
            type: custom:button-card
            entity_picture: >-
              /local/images/climatiseur/ecran/mode/mode_bruit_reduit_exterieur.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_econo:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_econo.png
            entity: counter.salle_a_manger_mode_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['counter.salle_a_manger_mode_climatiseur'].state == '0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        debit:
          card:
            type: custom:button-card
            entity_picture: |
              [[[
                if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '0')
                  return '/local/images/climatiseur/ecran/debit/debit_auto.png';
                else if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '1')
                  return '/local/images/climatiseur/ecran/debit/debit_silence_interieur.png';
                else if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '2')
                  return '/local/images/climatiseur/ecran/debit/debit_bas.png';
                else if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '3')
                  return '/local/images/climatiseur/ecran/debit/debit_faible.png';
                else if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '4')
                  return '/local/images/climatiseur/ecran/debit/debit_moyen.png';
                else if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '5')
                  return '/local/images/climatiseur/ecran/debit/debit_moyen_haut.png';
                else if (states['counter.salle_a_manger_debit_d_air_climatiseur'].state == '6')
                  return '/local/images/climatiseur/ecran/debit/debit_haut.png';
              ]]]
            show_entity_picture: true
            aspect_ratio: 3.85/2.79
            show_icon: false
            show_name: false
            styles:
              card:
                - border-radius: 0%
                - border: none
                - background-color: rgba(0,0,0,0.0)
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_courant_confortable:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/courant_confortable.png
            entity: >-
              input_number.salle_a_manger_courant_confortable_et_oeil_intelligent
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['input_number.salle_a_manger_courant_confortable_et_oeil_intelligent'].state == '1.0')
                        return '0.7';
                      else if (states['input_number.salle_a_manger_courant_confortable_et_oeil_intelligent'].state == '3.0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_oeil_intelligent:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/oeil_intelligent.png
            entity: >-
              input_number.salle_a_manger_courant_confortable_et_oeil_intelligent
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['input_number.salle_a_manger_courant_confortable_et_oeil_intelligent'].state == '2.0')
                        return '0.7';
                      else if (states['input_number.salle_a_manger_courant_confortable_et_oeil_intelligent'].state == '3.0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_flux_vertical:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/flux_vertical.png
            entity: ''
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: 0.7
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_clean:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/clean.png
            entity: input_boolean.salle_a_manger_mode_purification_climatiseur
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['input_boolean.salle_a_manger_mode_purification_climatiseur'].state == 'on')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_flux_horizontal:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/flux_horizontal.png
            entity: ''
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 2/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: 0.7
            tap_action:
              action: none
            hold_action:
              action: none
        power_text:
          card:
            type: custom:button-card
            name: On/Off
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        power:
          card:
            type: custom:button-card
            entity: input_boolean.salle_a_manger_interrupteur_climatiseur
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 60px
                - height: 60px
            state:
              - value: 'off'
                styles:
                  icon:
                    - color: red
              - value: 'on'
                styles:
                  icon:
                    - color: green
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_on_off
        fan_text:
          card:
            type: custom:button-card
            name: Fan
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        fan:
          card:
            type: custom:button-card
            size: 50%
            entity_picture: /local/images/climatiseur/boutons/bouton_fan.png
            show_entity_picture: true
            show_name: false
            styles:
              entity_picture:
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 60px
                - height: 40px
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_fan
        powerful_text:
          card:
            type: custom:button-card
            name: Powerful
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        powerful:
          card:
            type: custom:button-card
            size: 60%
            entity_picture: /local/images/climatiseur/boutons/bouton_puissant.png
            show_entity_picture: true
            show_name: false
            styles:
              entity_picture:
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 60px
                - height: 40px
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_mode_puissant
        temp_text:
          card:
            type: custom:button-card
            name: Temp
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        temp_down:
          card:
            type: custom:button-card
            size: 100%
            icon: mdi:menu-down
            show_name: false
            styles:
              icon:
                - color: black
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 50px
                - height: 40px
            tap_action:
              action: call-service
              service: ' '
        temp_up:
          card:
            type: custom:button-card
            size: 100%
            icon: mdi:menu-up
            show_name: false
            styles:
              icon:
                - color: black
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 50px
                - height: 40px
            tap_action:
              action: call-service
              service: ' '
        clapet:
          card:
            type: custom:button-card
            aspect_ratio: 1/1.1
            styles:
              card:
                - background-color: rgba(242,242,242,0.8)
                - border: 2px rgba(32,32,32,0.5) inset
            tap_action:
              action: none
            hold_action:
              action: none
        mode:
          card:
            type: custom:button-card
            size: 100%
            name: Mode
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.7)
            tap_action:
              action: call-service
              service: ' '
        econo_quiet_text:
          card:
            type: custom:button-card
            name: Econo / Quiet
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        econo_quiet:
          card:
            type: custom:button-card
            size: 80%
            entity_picture: /local/images/climatiseur/boutons/bouton_econo_et_quiet.png
            show_entity_picture: true
            styles:
              card:
                - padding: 0px
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        flux_vertical:
          card:
            type: custom:button-card
            size: 25%
            entity_picture: /local/images/climatiseur/boutons/bouton_flux_vertical.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        clean_text:
          card:
            type: custom:button-card
            name: Clean
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        comfort_sensor_text:
          card:
            type: custom:button-card
            name: Comfort / Sensor
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        swing_text:
          card:
            type: custom:button-card
            name: Swing
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        clean:
          card:
            type: custom:button-card
            size: 50%
            entity_picture: /local/images/climatiseur/boutons/bouton_clean.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_mode_purification
        courant_oeil:
          card:
            type: custom:button-card
            size: 80%
            entity_picture: /local/images/climatiseur/boutons/bouton_courant_et_oeil.png
            show_entity_picture: true
            styles:
              card:
                - padding: 0px
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: >-
                script.climatiseur_sejour_courant_confortable_et_oeil_intelligent
        flux_horizontal:
          card:
            type: custom:button-card
            size: 40%
            entity_picture: /local/images/climatiseur/boutons/bouton_flux_horizontal.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        weekly_text:
          card:
            type: custom:button-card
            name: Weekly
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        programmation_text:
          card:
            type: custom:button-card
            size: 40%
            entity_picture: /local/images/climatiseur/boutons/bouton_programmation.png
            show_entity_picture: true
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 60px
              entity_picture:
                - opacity: 0.7
        copy_text:
          card:
            type: custom:button-card
            name: Copy
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        weekly:
          card:
            type: custom:button-card
            size: 50%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        programmation:
          card:
            type: custom:button-card
            size: 70%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 60px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        copy:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        back_text:
          card:
            type: custom:button-card
            name: Back
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        next_text:
          card:
            type: custom:button-card
            name: Next
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        back:
          card:
            type: custom:button-card
            size: 50%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        next:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        select:
          card:
            type: custom:button-card
            size: 70%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 10px
                - width: 60px
                - height: 100px
        select_up:
          card:
            type: custom:button-card
            size: 30%
            entity_picture: /local/images/climatiseur/boutons/bouton_up.png
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - box-shadow: none
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 5px
                - width: 60px
                - height: 35px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        select_text:
          card:
            type: custom:button-card
            name: Select
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 60px
                - height: 30px
        select_down:
          card:
            type: custom:button-card
            size: 30%
            entity_picture: /local/images/climatiseur/boutons/bouton_down.png
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - box-shadow: none
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 5px
                - width: 60px
                - height: 35px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        off_text:
          card:
            type: custom:button-card
            name: 'Off'
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        on_text:
          card:
            type: custom:button-card
            name: 'On'
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        off_btn:
          card:
            type: custom:button-card
            size: 50%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        on_btn:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        cancel_text:
          card:
            type: custom:button-card
            name: Cancel
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        cancel:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        timer:
          card:
            type: custom:button-card
            size: 70%
            entity_picture: /local/images/climatiseur/boutons/bouton_timer.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 50%
                - width: 40px
                - height: 40px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
      styles:
        custom_fields:
          fond:
            - background-image: ''
            - position: absolute
            - left: 0
            - top: 0
            - width: 100%
            - height: 100%
            - background-size: cover
            - background-position: center
            - opacity: 0.5
          logo:
            - position: absolute
            - left: 20%
            - top: 1%
            - width: 60%
          ecran:
            - position: absolute
            - left: 15%
            - top: 8%
            - width: 70%
          clim_on:
            - position: absolute
            - width: 48%
            - left: 2%
            - top: 4.5%
          mode_auto:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 8.5%
          mode_deshumidification:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 8.5%
          mode_rafraichissement:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 12.2%
          mode_chaleur:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 12.2%
          mode_ventilateur:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 15.8%
          mode_puissant:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 15.8%
          mode_bruit_reduit_exterieur:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 19.2%
          mode_econo:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 19.2%
          debit:
            - position: absolute
            - width: 250px
            - left: 17%
            - top: 9.5%
          indicateur_courant_confortable:
            - position: absolute
            - width: 22%
            - left: 59%
            - top: 5%
          indicateur_oeil_intelligent:
            - position: absolute
            - width: 22%
            - left: 68%
            - top: 5%
          indicateur_flux_vertical:
            - position: absolute
            - width: 21%
            - left: 59%
            - top: 15.4%
          indicateur_clean:
            - position: absolute
            - width: 35%
            - left: 61.2%
            - top: 12%
          indicateur_flux_horizontal:
            - position: absolute
            - width: 35%
            - left: 55%
            - top: 20.5%
          power_text:
            - position: absolute
            - left: 44.5%
            - top: 35%
          power:
            - position: absolute
            - left: 43%
            - top: 38%
          fan_text:
            - position: absolute
            - left: 13%
            - top: 36.5%
          fan:
            - position: absolute
            - left: 8.5%
            - top: 39%
          powerful_text:
            - position: absolute
            - left: 26.2%
            - top: 36.5%
          powerful:
            - position: absolute
            - left: 24.8%
            - top: 39%
          temp_text:
            - position: absolute
            - left: 72%
            - top: 36.5%
          temp_down:
            - position: absolute
            - left: 62%
            - top: 39%
          temp_up:
            - position: absolute
            - left: 77%
            - top: 39%
          clapet:
            - position: absolute
            - left: 5%
            - top: 48%
            - width: 90%
          mode:
            - position: absolute
            - left: 8%
            - top: 52%
          econo_quiet_text:
            - position: absolute
            - left: 40%
            - top: 49%
          econo_quiet:
            - position: absolute
            - left: 37%
            - top: 52%
          flux_vertical:
            - position: absolute
            - left: 66%
            - top: 52%
          clean_text:
            - position: absolute
            - left: 8%
            - top: 57.5%
          comfort_sensor_text:
            - position: absolute
            - left: 37%
            - top: 57.5%
          swing_text:
            - position: absolute
            - left: 66%
            - top: 57.5%
          clean:
            - position: absolute
            - left: 8%
            - top: 60.5%
          courant_oeil:
            - position: absolute
            - left: 37%
            - top: 60.5%
          flux_horizontal:
            - position: absolute
            - left: 66%
            - top: 60.5%
          weekly_text:
            - position: absolute
            - left: 8%
            - top: 65.5%
          programmation_text:
            - position: absolute
            - left: 42%
            - top: 65%
          copy_text:
            - position: absolute
            - left: 66%
            - top: 65.5%
          weekly:
            - position: absolute
            - left: 8%
            - top: 68.5%
          programmation:
            - position: absolute
            - left: 42%
            - top: 68.5%
          copy:
            - position: absolute
            - left: 66%
            - top: 68.5%
          back_text:
            - position: absolute
            - left: 8%
            - top: 72.5%
          next_text:
            - position: absolute
            - left: 66%
            - top: 72.5%
          back:
            - position: absolute
            - left: 8%
            - top: 75.5%
          next:
            - position: absolute
            - left: 66%
            - top: 75.5%
          select:
            - position: absolute
            - left: 42%
            - top: 72.5%
          select_up:
            - position: absolute
            - left: 42%
            - top: 73%
          select_text:
            - position: absolute
            - left: 42%
            - top: 77%
          select_down:
            - position: absolute
            - left: 42%
            - top: 80.6%
          off_text:
            - position: absolute
            - left: 8%
            - top: 79.5%
          on_text:
            - position: absolute
            - left: 66%
            - top: 79.5%
          off_btn:
            - position: absolute
            - left: 8%
            - top: 82.5%
          on_btn:
            - position: absolute
            - left: 66%
            - top: 82.5%
          cancel_text:
            - position: absolute
            - left: 8%
            - top: 86.5%
          cancel:
            - position: absolute
            - left: 8%
            - top: 89.5%
          timer:
            - position: absolute
            - left: 73%
            - top: 88.5%

Regarde uniquements les lignes des custom_fields avec un tap_action.

[VANLOC]

Merci @Cleya je regarde ca et te fais un retour !

[Cleya]

Un autre exemple (plus simple à comprendre et exploiter) :

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: vertical
  cards:
    - type: custom:button-card
      aspect_ratio: 1/1
      custom_fields:
        fond:
          card:
            type: custom:button-card
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        rad:
          card:
            type: custom:button-card
            name: Chauffage électrique
            styles:
              name:
                - font-size: 1.6em
                - font-weight: bold
                - justify-self: start
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        radsdb:
          card:
            type: custom:button-card
            name: 'Radiateur SdB bas :'
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
        power_radsdb:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              icon:
                - color: red
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        leaf_radsdb:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:leaf
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        snow_radsdb:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:snowflake
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        sun_radsdb:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:weather-sunny
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 38px
                - height: 38px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        radgael_pri:
          card:
            type: custom:button-card
            name: 'Radiateur Ch Gael principal :'
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
        power_gael_pri:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              icon:
                - color: red
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        leaf_gael_pri:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:leaf
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        snow_gael_pri:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:snowflake
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        sun_gael_pri:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:weather-sunny
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 38px
                - height: 38px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        clim:
          card:
            type: custom:button-card
            name: Climatisations réversibles
            styles:
              name:
                - font-size: 1.6em
                - font-weight: bold
                - justify-self: start
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        clim_parent:
          card:
            type: custom:button-card
            name: 'Climatisation parents :'
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
        power_clim_parent:
          card:
            type: custom:button-card
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              icon:
                - color: red
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        froid_clim_parent:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:air-conditioner
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 36px
                - height: 36px
                - border: none
            tap_action:
              action: call-service
              service: ' '
        chaud_clim_parent:
          card:
            type: custom:button-card
            size: 70%
            icon: mdi:radiator
            show_name: false
            styles:
              icon:
                - color: dimgray
              card:
                - box-shadow: none
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - width: 38px
                - height: 38px
                - border: none
            tap_action:
              action: call-service
              service: ' '
      styles:
        custom_fields:
          fond:
            - background-image: ''
            - position: absolute
            - left: 0
            - top: 0
            - width: 100%
            - height: 100%
            - background-size: cover
            - background-position: center
            - opacity: 0.5
          rad:
            - position: absolute
            - left: 6%
            - top: 4%
          radsdb:
            - position: absolute
            - left: 6%
            - top: 20%
          power_radsdb:
            - position: absolute
            - left: 50%
            - top: 19%
          leaf_radsdb:
            - position: absolute
            - left: 58%
            - top: 19%
          snow_radsdb:
            - position: absolute
            - left: 66%
            - top: 19%
          sun_radsdb:
            - position: absolute
            - left: 74%
            - top: 19%
          radgael_pri:
            - position: absolute
            - left: 6%
            - top: 29%
          power_gael_pri:
            - position: absolute
            - left: 50%
            - top: 29%
          leaf_gael_pri:
            - position: absolute
            - left: 58%
            - top: 29%
          snow_gael_pri:
            - position: absolute
            - left: 66%
            - top: 29%
          sun_gael_pri:
            - position: absolute
            - left: 74%
            - top: 29%
          clim:
            - position: absolute
            - left: 6%
            - top: 44%
          clim_parent:
            - position: absolute
            - left: 6%
            - top: 62%
          power_clim_parent:
            - position: absolute
            - left: 50%
            - top: 62%
          froid_clim_parent:
            - position: absolute
            - left: 62%
            - top: 62%
          chaud_clim_parent:
            - position: absolute
            - left: 74%
            - top: 62%

[VANLOC]

Super pour ces 2 exemple, le 1er a l’air d’être une tuerie, je vais beaucoup l’exploiter si j’y arrive.

Pour le moment, j’ai copier coller ton 2eme exemple, remplacer par mes valeurs pour tester vite fait; est-ce que c’est censé changer d’icones ou de couleur ou autre quand tu cliques sur les boutons ? Moi ca m’allume et éteint ma tv (à defaut de clim dans les combles je teste sur la tv en 1er lol) mais rien d’autre.

[Cleya]

Un autre exemple avec changement de couleur sur changement d’état (on/off) et une animation faisant grossir et diminuer l’ombre rouge autour de l’image du détecteur de mouvement :

type: custom:button-card
aspect_ratio: 4/1.5
custom_fields:
  fond:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  ncarte:
    card:
      type: custom:button-card
      name: Terrasse et piscine
      styles:
        name:
          - font-size: 1.4em
          - font-weight: bold
          - justify-self: start
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  nterrasse:
    card:
      type: custom:button-card
      name: Éclairage<br/>terrasse
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  terrasse:
    card:
      type: custom:button-card
      size: 90%
      entity: switch.atelier_relais_eclairage_terrasse_commutateur
      icon: phu:wall-econic-lantern-base
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  npiscine:
    card:
      type: custom:button-card
      name: Éclairage<br/>piscine
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  piscine:
    card:
      type: custom:button-card
      size: 75%
      entity: switch.atelier_relais_eclairage_piscine_commutateur
      icon: phu:adore-mirror
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nmouvement:
    card:
      type: custom:button-card
      name: 'Détecteur de mouvement<br/>terrasse :'
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - text-align: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
  mouvement:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: binary_sensor.terrasse_detecteur_de_mouvement_occupancy
      show_icon: false
      show_name: false
      styles:
        card:
          - border-radius: 50%
      state:
        - value: 'off'
          styles:
            card:
              - opacity: 1
              - background-image: url(/local/images/icones/detect_move_off.png)
              - background-size: cover
              - background-position: center
              - background-color: rgba(255,255,255,1.0)
              - border: none
        - value: 'on'
          styles:
            card:
              - background-image: url(/local/images/icones/detect_move_on.png)
              - background-size: cover
              - background-position: center
              - background-color: rgba(255,0,0,1.0)
              - border: none
              - animation: shadowcolorswap 3s linear infinite
      extra_styles: |
        @keyframes shadowcolorswap {
          0% {
            box-shadow: none;
          }
          25% {
            box-shadow: 0px 0px 6px 3px rgba(255,0,0,0.8);
          }
          50% {
            box-shadow: none;
          }
          75% {
            box-shadow: 0px 0px 6px 3px rgba(255,0,0,0.8);
          }
          100% {
            box-shadow: none;
          }
styles:
  custom_fields:
    fond:
      - background-image: url(/local/images/terrasse_piscine.png)
      - position: absolute
      - left: 0
      - top: 0
      - width: 100%
      - height: 100%
      - background-size: cover
      - background-position: center
      - opacity: 0.7
    ncarte:
      - position: absolute
      - left: 10px
      - top: '-3px'
    nterrasse:
      - width: 15%
      - position: absolute
      - left: 2%
      - top: 40%
    terrasse:
      - position: absolute
      - left: 17%
      - top: 35%
    npiscine:
      - width: 15%
      - position: absolute
      - left: 80%
      - top: 13%
    piscine:
      - position: absolute
      - left: 81%
      - top: 34%
    nmouvement:
      - width: 50%
      - position: absolute
      - left: '-3%'
      - top: 65%
    mouvement:
      - width: 48px
      - height: 48px
      - position: absolute
      - left: 42%
      - top: 62%

[Cleya]

Pour le moment je travaille sur un dashboard pour le téléphone de mon épouse :

Le code du custom_fields « carte_sejour » :

  carte_sejour:
    card:
      type: custom:button-card
      name: Salle à manger
      entity: input_number.tableau_de_bord_carte_courante
      show_state: false
      show_icon: false
      custom_fields:
        eclairage:
          card:
            type: custom:button-card
            name: 'Éclairage :'
            styles:
              name:
                - font-size: 0.8em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
                - font-style: italic
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        plafonnier_texte:
          card:
            type: custom:button-card
            name: Plafonnier
            styles:
              name:
                - font-size: 0.7em
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0
            tap_action:
              action: none
            hold_action:
              action: none
        plafonnier_icone:
          card:
            type: custom:button-card
            size: 80%
            entity: light.salle_a_manger_plafonnier
            icon: phu:ceiling-fugato-four
            show_name: false
            state:
              - value: 'off'
                styles:
                  icon:
                    - color: dimgray
                  card:
                    - box-shadow: none
                    - border-radius: 50%
                    - border: dimgray
                    - background-color: rgba(242,242,242,1.0)
                    - width: 48px
                    - height: 48px
              - value: 'on'
                styles:
                  icon:
                    - color: rgb(255,255,128)
                  card:
                    - border-radius: 50%
                    - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
                    - background-color: rgba(0,0,0,0.5)
                    - width: 48px
                    - height: 48px
        buffet_texte:
          card:
            type: custom:button-card
            name: Buffet
            styles:
              name:
                - font-size: 0.7em
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0
            tap_action:
              action: none
            hold_action:
              action: none
        buffet_icone:
          card:
            type: custom:button-card
            size: 80%
            entity: light.salle_a_manger_relais_buffet
            icon: phu:adore
            show_name: false
            state:
              - value: 'off'
                styles:
                  icon:
                    - color: dimgray
                    - transform: rotate(180deg)
                  card:
                    - box-shadow: none
                    - border-radius: 50%
                    - border: dimgray
                    - background-color: rgba(242,242,242,1.0)
                    - width: 48px
                    - height: 48px
              - value: 'on'
                styles:
                  icon:
                    - color: rgb(255,255,128)
                    - transform: rotate(180deg)
                  card:
                    - border-radius: 50%
                    - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
                    - background-color: rgba(0,0,0,0.5)
                    - width: 48px
                    - height: 48px
        vaisselier_texte:
          card:
            type: custom:button-card
            name: Vaisselier
            styles:
              name:
                - font-size: 0.7em
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0
            tap_action:
              action: none
            hold_action:
              action: none
        volet:
          card:
            type: custom:button-card
            name: 'Volet :'
            styles:
              name:
                - font-size: 0.8em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
                - font-style: italic
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        volet_up:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/icones/volet_ouvrir.png)
                - background-size: cover
                - height: 54px
                - width: 54px
                - border-radius: 50%
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border: 2px rgba(211,211,211,1.0) outset
            tap_action:
              action: call-service
              service: script.salle_a_manger_volet_ouvrir
        volet_stop:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/icones/volet_stopper.png)
                - background-size: cover
                - height: 54px
                - width: 54px
                - border-radius: 50%
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border: 2px rgba(211,211,211,1.0) outset
            tap_action:
              action: call-service
              service: script.salle_a_manger_volet_arreter
        volet_down:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/icones/volet_fermer.png)
                - background-size: cover
                - height: 54px
                - width: 54px
                - border-radius: 50%
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border: 2px rgba(211,211,211,1.0) outset
            tap_action:
              action: call-service
              service: script.salle_a_manger_volet_fermer
        climatiseur:
          card:
            type: custom:button-card
            name: 'Climatiseur :'
            styles:
              name:
                - font-size: 0.8em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
                - font-style: italic
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        climatiseur_icone:
          card:
            type: custom:button-card
            show_name: false
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - background-image: url(/local/images/icones/climatiseur.png)
                - background-size: cover
                - height: 54px
                - width: 54px
                - border-radius: 50%
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border: 2px rgba(211,211,211,1.0) outset
            tap_action:
              action: none
            hold_action:
              action: none
        climatiseur_texte:
          card:
            type: custom:button-card
            name: On / Off
            styles:
              name:
                - font-size: 0.7em
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0
            tap_action:
              action: none
            hold_action:
              action: none
        climatiseur_interrupteur:
          card:
            type: custom:button-card
            aspect_ratio: 1/1
            entity: climate.climatisation_sejour_mqtt_hvac
            show_name: false
            show_icon: false
            styles:
              card:
                - background-color: rgba(0,0,0,0.0)
                - border: none
                - width: 54px
                - height: 54px
                - border-radius: 0px
                - background-size: cover
                - background-position: center
                - background-image: |
                    [[[
                      if (states['climate.climatisation_sejour_mqtt_hvac'].state == 'off')
                        return 'url(/local/images/icones/bouton_off.png)';
                      else
                        return 'url(/local/images/icones/bouton_on.png)';
                    ]]]
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_on_off
        climatiseur_temp_texte:
          card:
            type: custom:button-card
            name: Température cible
            styles:
              name:
                - font-size: 0.7em
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0
            tap_action:
              action: none
            hold_action:
              action: none
        climatiseur_temp:
          card:
            type: custom:button-card
            entity: sensor.salle_a_manger_climatisation_temperature_cible
            show_name: false
            show_icon: false
            show_state: true
            numeric_precision: 0
            tap_action: none
            styles:
              state:
                - font-size: 0.9em
                - font-weight: bold
                - color: |
                    [[[
                      if (states['climate.climatisation_sejour_mqtt_hvac'].state == 'off')
                        return 'rgba(80,80,80,1.0)';
                      else
                        return 'lightgray';
                    ]]]
              card:
                - background-color: rgba(32,32,32,0.5)
                - border: 1px rgba(0,0,0,0.5) inset
                - box-shadow: 1px 1px 1px 0px rgba(211,211,211,0.5)
                - width: 54px
                - aspect-ratio: 2/1
                - border-radius: 5px
                - z-index: 1
        climatiseur_temp_down:
          card:
            type: custom:button-card
            show_name: false
            show_state: true
            icon: mdi:menu-down
            numeric_precision: 0
            tap_action:
              action: |
                [[[
                  if (states['sensor.salle_a_manger_climatisation_temperature_cible'].state >= '17.0')
                    return 'call-service';
                  else
                    return 'none';
                ]]]
              service: script.climatiseur_sejour_diminuer_temperature_cible
            styles:
              state:
                - font-size: 0.9em
                - font-weight: bold
                - color: lightgray
              card:
                - background-color: rgba(0,0,0,0.0)
                - border: none
                - box-shadow: none
                - width: 40px
                - aspect-ratio: 1/1
                - border-radius: 50%
                - z-index: |
                    [[[
                      if (states['sensor.salle_a_manger_climatisation_temperature_cible'].state >= '17.0')
                        return '0';
                      else
                        return '-1';
                    ]]]
              icon:
                - width: 40px
                - color: |
                    [[[
                      if (states['sensor.salle_a_manger_climatisation_temperature_cible'].state >= '17.0')
                        return 'rgba(32,32,32,0.5)';
                      else
                        return 'rgba(32,32,32,0.0)';
                    ]]]
        climatiseur_temp_up:
          card:
            type: custom:button-card
            show_name: false
            show_state: true
            icon: mdi:menu-up
            numeric_precision: 0
            tap_action:
              action: |
                [[[
                  if (states['sensor.salle_a_manger_climatisation_temperature_cible'].state <= '32.0')
                    return 'call-service';
                  else
                    return 'none';
                ]]]
              service: script.climatiseur_sejour_augmenter_temperature_cible
            styles:
              state:
                - font-size: 0.9em
                - font-weight: bold
                - color: lightgray
              card:
                - background-color: rgba(0,0,0,0.0)
                - border: none
                - box-shadow: none
                - width: 40px
                - aspect-ratio: 1/1
                - border-radius: 50%
                - z-index: |
                    [[[
                      if (states['sensor.salle_a_manger_climatisation_temperature_cible'].state <= '32.0')
                        return '0';
                      else
                        return '-1';
                    ]]]
              icon:
                - width: 40px
                - color: |
                    [[[
                      if (states['sensor.salle_a_manger_climatisation_temperature_cible'].state <= '32.0')
                        return 'rgba(32,32,32,0.5)';
                      else
                        return 'rgba(32,32,32,0.0)';
                    ]]]
        temp_icone:
          card:
            type: custom:button-card
            aspect_ratio: 1/1
            show_name: false
            show_icon: false
            styles:
              card:
                - opacity: 1
                - background-image: url(/local/images/icones/temperature.png)
                - background-size: cover
                - background-position: center
                - background-color: rgba(0,0,0,0.0)
                - border-radius: 50%
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border: 2px rgba(211,211,211,1.0) outset
                - z-index: 1
        temp_valeur:
          card:
            type: custom:button-card
            entity: sensor.climatisation_sejour_bletemp
            show_name: false
            show_icon: false
            show_state: true
            numeric_precision: 1
            tap_action: none
            styles:
              state:
                - font-size: 0.8em
                - font-weight: bold
                - color: dimgray
                - justify-self: end
                - padding-right: 3%
              card:
                - background-color: rgba(242,242,242,1.0)
                - border: dimgray
                - z-index: 0
        hygro_icone:
          card:
            type: custom:button-card
            aspect_ratio: 1/1
            show_name: false
            show_icon: false
            styles:
              card:
                - opacity: 1
                - background-image: url(/local/images/icones/hygrometrie.png)
                - background-size: cover
                - background-position: center
                - background-color: rgba(0,0,0,0.0)
                - border-radius: 50%
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border: 2px rgba(211,211,211,1.0) outset
                - z-index: 1
        hygro_valeur:
          card:
            type: custom:button-card
            entity: sensor.climatisation_sejour_blehum
            show_name: false
            show_icon: false
            show_state: true
            numeric_precision: 1
            tap_action: none
            styles:
              state:
                - font-size: 0.8em
                - font-weight: bold
                - color: dimgray
                - justify-self: end
                - padding-right: 3%
              card:
                - background-color: rgba(242,242,242,1.0)
                - border: dimgray
                - z-index: 0
        ouvertures:
          card:
            type: custom:button-card
            name: 'Ouverture(s) :'
            styles:
              name:
                - font-size: 0.8em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
                - font-style: italic
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        baie_vitree_etat:
          card:
            type: custom:button-card
            show_name: true
            show_icon: false
            name: |
              [[[
                if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                  return 'Baie vitrée <br> fermée';
                else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                  return 'Baie vitrée <br> ouverte côté droit';
                else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                  return 'Baie vitrée <br> ouverte côté gauche';
                else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                  return 'Baie vitrée <br> ouverte (deux côtés)';
              ]]]
            styles:
              name:
                - font-size: |
                    [[[
                      if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return '0.9em';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return '0.8em';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return '0.8em';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return '0.7em';
                    ]]]
                - font-weight: |
                    [[[
                      if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return 'regular';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return 'bold';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return 'bold';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return 'bold';
                    ]]]
                - color: |
                    [[[
                      if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return 'green';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return 'red';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return 'red';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return 'red';
                    ]]]
              card:
                - background-color: |
                    [[[
                      if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return 'rgba(128,255,128,0.7)';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'off')
                        return 'rgba(255,128,128,1.0)';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'off' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return 'rgba(255,128,128,1.0)';
                      else if (states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_droit_contact'].state == 'on' && states['binary_sensor.salle_a_manger_detecteur_d_ouverture_baie_vitree_cote_gauche_contact'].state == 'on')
                        return 'rgba(255,128,128,1.0)';
                    ]]]
                - border: 1px rgba(0,0,0,0.5) inset
                - box-shadow: 1px 1px 1px 0px rgba(211,211,211,0.5)
                - width: 130px
                - height: 40px
                - border-radius: 5px
                - z-index: 1
      styles:
        card:
          - background-color: rgba(128,128,128,1.0)
          - border: 2px outset darkgrey
          - aspect-ratio: 1/1.176
          - border-radius: 3%
          - width: 330px
          - padding-left: 5px
          - z-index: |
              [[[
                if (states['input_number.tableau_de_bord_carte_courante'].state == '7.0')
                  return '1';
                else
                  return '-1';
              ]]]
        name:
          - font-size: 0.9em
          - font-weight: bold
          - justify-self: start
          - align-self: start
          - margin-top: '-10px'
          - color: lightgrey
        custom_fields:
          eclairage:
            - position: absolute
            - top: 25px
            - left: 20px
          plafonnier_texte:
            - position: absolute
            - top: 50px
            - left: 50px
          plafonnier_icone:
            - position: absolute
            - top: 75px
            - left: 55px
          buffet_texte:
            - position: absolute
            - top: 50px
            - left: 151px
          buffet_icone:
            - position: absolute
            - top: 75px
            - left: 145px
          vaisselier_texte:
            - position: absolute
            - top: 50px
            - left: 230px
          volet:
            - position: absolute
            - top: 155px
            - left: 20px
          volet_down:
            - position: absolute
            - top: 140px
            - left: 70px
          volet_stop:
            - position: absolute
            - top: 140px
            - left: 140px
          volet_up:
            - position: absolute
            - top: 140px
            - left: 210px
          climatiseur:
            - position: absolute
            - top: 225px
            - left: 20px
          climatiseur_icone:
            - position: absolute
            - top: 210px
            - left: 100px
          climatiseur_texte:
            - position: absolute
            - top: 208px
            - left: 165px
          climatiseur_interrupteur:
            - position: absolute
            - top: 215px
            - left: 160px
          climatiseur_temp_texte:
            - position: absolute
            - top: 206px
            - left: 225px
          climatiseur_temp_down:
            - position: absolute
            - top: 220px
            - left: 212px
          climatiseur_temp:
            - position: absolute
            - top: 228px
            - left: 245px
          climatiseur_temp_up:
            - position: absolute
            - top: 220px
            - left: 292px
          temp_valeur:
            - position: absolute
            - width: 75px
            - top: 295px
            - left: 48px
          temp_icone:
            - position: absolute
            - width: 48px
            - top: 281px
            - left: 16px
          hygro_valeur:
            - position: absolute
            - width: 75px
            - top: 345px
            - left: 48px
          hygro_icone:
            - position: absolute
            - width: 48px
            - top: 331px
            - left: 16px
          ouvertures:
            - position: absolute
            - width: 100px
            - top: 295px
            - left: 185px
          baie_vitree_etat:
            - position: absolute
            - width: 150px
            - top: 325px
            - left: 165px
      tap_action:
        action: none
      hold_action:
        action: none

Tu trouveras des changements de couleur de police, d’icônes, de carte. Des changements de taille de police, etc.

Je pense qu’avec ces exemples, tu devrais parvenir à faire ce que tu veux à partir de custom:button-card

Si tu bloques sur certains points, n’hésites pas à me solliciter. Je file. Bonne soirée

[VANLOC]

Merci beaucoup pour tous ces exemples, je tests je tests, ca ne donne rien pour le moment, mais je vais reprendre depuis le début et re re re tester ^^

[Cleya]

Salut, tu avances avec le code ?

[VANLOC]

Oui j’avance beaucoup grace à toi, j’ai compris apres coup mes erreurs je pense, mon entity n’était pas bonne et le fait de lancer le service dans le bouton non plus.

J’ai donc créé un interrupteur entity: input_boolean.clim puis une automatisation qui lance le service au changement d’état, et là ca fonctionne parfaitement !

[VANLOC]

Petite question, si tu as toujours le code en tête, je bloque sur la bordure de l’image clim_on.

Impossible de supprimer la bordure quand l’image apparait :

Quand c’est ON:

Quand c’est OFF :

[VANLOC]

C’es le mode sombre grrrrrrrrrr

[Cleya]

Bonjour,

Pour la bordure (si c’est une bordure en tant que telle et pas un problème lié à l’image), il faut mettre dans le style de la carte du custom_fields : « - border: none »

Styles:
  card:
    - border: none

Si ça ne fonctionne pas c’est qu’il y a eu un problème lors du copié-collé des images. Il faudra alors les retravailler avec un logiciel de retouche d’image permettant de conserver la transparence (The Gimp par exemple).

[VANLOC]

Oui, j’ai des border : none par tout mais ca ne fonctionne pas, et je ne comprends pas comment mon thème affiche ces bordures qui sont plus grandes que la taille de l’image elle même

[Cleya]

Salut, dans le « state: » essaie de modifier le « border: none » par « border: 2px red » pour voir si c’est bien la bordure du custom_fields qui est visible.

Chez moi même en mettant le tableau de bord en mode sombre, je n’ai pas de bordure qui apparait.

[VANLOC]

Erf, c’est bien chez moi qua ca bug Idem en mettant les bordure rouge, ca n’affiche rien mais les même, voici mon code complet :

type: custom:mod-card
card:
  type: custom:layout-card
  layout_type: vertical
  cards:
    - type: custom:button-card
      color_type: card
      aspect_ratio: 1/2
      custom_fields:
        fond:
          card:
            type: custom:button-card
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
            tap_action:
              action: none
            hold_action:
              action: none
        ecran:
          card:
            type: custom:button-card
            aspect_ratio: 2/1.5
            styles:
              card:
                - background-image: url(/local/images/climatiseur/ecran/fond.png)
                - background-size: cover
                - background-picture: center
                - box-shadow: 6px 6px 6px 0px inset rgba(32,32,32,2.7)
                - border-radius: 6%
            tap_action:
              action: none
            hold_action:
              action: none
        clim_on:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/clim_on.png
            entity: input_boolean.clim
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 2/1.5
            width: 100%
            styles:
              card:
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - border: none
            state:
              - value: 'off'
                styles:
                  card:
                    - opacity: 0
                    - border: 2px red
              - value: 'on'
                styles:
                  card:
                    - opacity: 1
                    - border: 2px red
            tap_action:
              action: none
            hold_action:
              action: none
        mode_auto:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_auto.png
            entity: input_boolean.clim
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['input_boolean.clim'].state == '0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_deshumidification:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_deshumidification.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '1')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_rafraichissement:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_rafraichissement.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '2')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_chaleur:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_chaleur.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '3')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_ventilateur:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_ventilateur.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '4')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_puissant:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_puissant.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == 'on')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_bruit_reduit_exterieur:
          card:
            type: custom:button-card
            entity_picture: >-
              /local/images/climatiseur/ecran/mode/mode_bruit_reduit_exterieur.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        mode_econo:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/mode_econo.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        debit:
          card:
            type: custom:button-card
            entity_picture: |
              [[[
                if (states['button.capteur_ir_identifier'].state == '0')
                  return '/local/images/climatiseur/ecran/debit/debit_auto.png';
                else if (states['button.capteur_ir_identifier'].state == '1')
                  return '/local/images/climatiseur/ecran/debit/debit_silence_interieur.png';
                else if (states['button.capteur_ir_identifier'].state == '2')
                  return '/local/images/climatiseur/ecran/debit/debit_bas.png';
                else if (states['button.capteur_ir_identifier'].state == '3')
                  return '/local/images/climatiseur/ecran/debit/debit_faible.png';
                else if (states['button.capteur_ir_identifier'].state == '4')
                  return '/local/images/climatiseur/ecran/debit/debit_moyen.png';
                else if (states['button.capteur_ir_identifier'].state == '5')
                  return '/local/images/climatiseur/ecran/debit/debit_moyen_haut.png';
                else if (states['button.capteur_ir_identifier'].state == '6')
                  return '/local/images/climatiseur/ecran/debit/debit_haut.png';
              ]]]
            show_entity_picture: true
            aspect_ratio: 3.85/2.79
            show_icon: false
            show_name: false
            styles:
              card:
                - border-radius: 0%
                - border: none
                - background-color: rgba(0,0,0,0.0)
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_courant_confortable:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/courant_confortable.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '1.0')
                        return '0.7';
                      else if (states['button.capteur_ir_identifier'].state == '3.0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_oeil_intelligent:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/oeil_intelligent.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == '2.0')
                        return '0.7';
                      else if (states['button.capteur_ir_identifier'].state == '3.0')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_flux_vertical:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/flux_vertical.png
            entity: ''
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: 0.7
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_clean:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/clean.png
            entity: button.capteur_ir_identifier
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 1/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: |
                    [[[
                      if (states['button.capteur_ir_identifier'].state == 'on')
                        return '0.7';
                      else
                        return '0.0';
                    ]]]
            tap_action:
              action: none
            hold_action:
              action: none
        indicateur_flux_horizontal:
          card:
            type: custom:button-card
            entity_picture: /local/images/climatiseur/ecran/mode/flux_horizontal.png
            entity: ''
            show_entity_picture: true
            show_name: false
            show_icon: false
            aspect_ratio: 2/1
            width: 100%
            styles:
              card:
                - border: none
                - border-radius: 0%
                - background-color: rgba(255,255,255,0.0)
                - opacity: 0.7
            tap_action:
              action: none
            hold_action:
              action: none
        power_text:
          card:
            type: custom:button-card
            name: On/Off
            styles:
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        power:
          card:
            type: custom:button-card
            entity: input_boolean.clim
            size: 80%
            icon: mdi:power
            show_name: false
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - border-radius: 50%
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 60px
                - height: 60px
            state:
              - value: 'off'
                styles:
                  icon:
                    - color: red
              - value: 'on'
                styles:
                  icon:
                    - color: green
        fan_text:
          card:
            type: custom:button-card
            name: Fan
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        fan:
          card:
            type: custom:button-card
            size: 50%
            entity_picture: /local/images/climatiseur/boutons/bouton_fan.png
            show_entity_picture: true
            show_name: false
            styles:
              entity_picture:
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 60px
                - height: 40px
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_fan
        powerful_text:
          card:
            type: custom:button-card
            name: Powerful
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        powerful:
          card:
            type: custom:button-card
            size: 60%
            entity_picture: /local/images/climatiseur/boutons/bouton_puissant.png
            show_entity_picture: true
            show_name: false
            styles:
              entity_picture:
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 60px
                - height: 40px
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_mode_puissant
        temp_text:
          card:
            type: custom:button-card
            name: Temp
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        temp_down:
          card:
            type: custom:button-card
            size: 100%
            icon: mdi:menu-down
            show_name: false
            styles:
              icon:
                - color: black
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 50px
                - height: 40px
            tap_action:
              action: call-service
              service: ' '
        temp_up:
          card:
            type: custom:button-card
            size: 100%
            icon: mdi:menu-up
            show_name: false
            styles:
              icon:
                - color: black
                - opacity: 0.7
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - width: 50px
                - height: 40px
            tap_action:
              action: call-service
              service: ' '
        clapet:
          card:
            type: custom:button-card
            aspect_ratio: 1/1.1
            styles:
              card:
                - background-color: rgba(242,242,242,0.8)
                - border: 2px rgba(32,32,32,0.5) inset
            tap_action:
              action: none
            hold_action:
              action: none
        mode:
          card:
            type: custom:button-card
            size: 100%
            name: Mode
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              name:
                - font-size: 0.9em
                - font-weight: bold
                - color: rgba(0,0,0,0.7)
            tap_action:
              action: call-service
              service: ' '
        econo_quiet_text:
          card:
            type: custom:button-card
            name: Econo / Quiet
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
                - justify-self: start
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
        econo_quiet:
          card:
            type: custom:button-card
            size: 80%
            entity_picture: /local/images/climatiseur/boutons/bouton_econo_et_quiet.png
            show_entity_picture: true
            styles:
              card:
                - padding: 0px
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        flux_vertical:
          card:
            type: custom:button-card
            size: 25%
            entity_picture: /local/images/climatiseur/boutons/bouton_flux_vertical.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        clean_text:
          card:
            type: custom:button-card
            name: Clean
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        comfort_sensor_text:
          card:
            type: custom:button-card
            name: Comfort / Sensor
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        swing_text:
          card:
            type: custom:button-card
            name: Swing
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        clean:
          card:
            type: custom:button-card
            size: 50%
            entity_picture: /local/images/climatiseur/boutons/bouton_clean.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: script.climatiseur_sejour_mode_purification
        courant_oeil:
          card:
            type: custom:button-card
            size: 80%
            entity_picture: /local/images/climatiseur/boutons/bouton_courant_et_oeil.png
            show_entity_picture: true
            styles:
              card:
                - padding: 0px
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: >-
                script.climatiseur_sejour_courant_confortable_et_oeil_intelligent
        flux_horizontal:
          card:
            type: custom:button-card
            size: 40%
            entity_picture: /local/images/climatiseur/boutons/bouton_flux_horizontal.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 30px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        weekly_text:
          card:
            type: custom:button-card
            name: Weekly
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        programmation_text:
          card:
            type: custom:button-card
            size: 40%
            entity_picture: /local/images/climatiseur/boutons/bouton_programmation.png
            show_entity_picture: true
            styles:
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 60px
              entity_picture:
                - opacity: 0.7
        copy_text:
          card:
            type: custom:button-card
            name: Copy
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        weekly:
          card:
            type: custom:button-card
            size: 50%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        programmation:
          card:
            type: custom:button-card
            size: 70%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 60px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        copy:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        back_text:
          card:
            type: custom:button-card
            name: Back
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        next_text:
          card:
            type: custom:button-card
            name: Next
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        back:
          card:
            type: custom:button-card
            size: 50%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        next:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        select:
          card:
            type: custom:button-card
            size: 70%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 10px
                - width: 60px
                - height: 100px
        select_up:
          card:
            type: custom:button-card
            size: 30%
            entity_picture: /local/images/climatiseur/boutons/bouton_up.png
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - box-shadow: none
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 5px
                - width: 60px
                - height: 35px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        select_text:
          card:
            type: custom:button-card
            name: Select
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 60px
                - height: 30px
        select_down:
          card:
            type: custom:button-card
            size: 30%
            entity_picture: /local/images/climatiseur/boutons/bouton_down.png
            show_entity_picture: true
            show_name: false
            styles:
              card:
                - box-shadow: none
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 5px
                - width: 60px
                - height: 35px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
        off_text:
          card:
            type: custom:button-card
            name: 'Off'
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        on_text:
          card:
            type: custom:button-card
            name: 'On'
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        off_btn:
          card:
            type: custom:button-card
            size: 50%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        on_btn:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        cancel_text:
          card:
            type: custom:button-card
            name: Cancel
            size: 100%
            styles:
              name:
                - font-size: 0.7em
                - font-weight: bold
                - color: rgba(0,0,0,0.6)
              card:
                - background-color: rgba(255,255,255,0.0)
                - border: none
                - border-radius: 0%
                - width: 100px
        cancel:
          card:
            type: custom:button-card
            size: 40%
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 5px
                - width: 100px
                - height: 25px
            tap_action:
              action: call-service
              service: ' '
        timer:
          card:
            type: custom:button-card
            size: 70%
            entity_picture: /local/images/climatiseur/boutons/bouton_timer.png
            show_entity_picture: true
            styles:
              card:
                - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
                - background-color: rgba(255,255,255,1.0)
                - border: 2px rgba(32,32,32,0.5) outset
                - border-radius: 50%
                - width: 40px
                - height: 40px
              entity_picture:
                - opacity: 0.7
            tap_action:
              action: call-service
              service: ' '
      styles:
        custom_fields:
          fond:
            - background-image: ''
            - position: absolute
            - left: 0
            - top: 0
            - width: 100%
            - height: 100%
            - background-size: cover
            - background-position: center
            - opacity: 0.5
          logo:
            - position: absolute
            - left: 20%
            - top: 1%
            - width: 60%
          ecran:
            - position: absolute
            - left: 15%
            - top: 8%
            - width: 70%
          clim_on:
            - position: absolute
            - width: 38%
            - left: 6%
            - top: 4%
          mode_auto:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 8.5%
          mode_deshumidification:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 8.5%
          mode_rafraichissement:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 12.2%
          mode_chaleur:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 12.2%
          mode_ventilateur:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 15.8%
          mode_puissant:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 15.8%
          mode_bruit_reduit_exterieur:
            - position: absolute
            - width: 22%
            - left: 11%
            - top: 19.2%
          mode_econo:
            - position: absolute
            - width: 22%
            - left: 19%
            - top: 19.2%
          debit:
            - position: absolute
            - width: 250px
            - left: 17%
            - top: 9.5%
          indicateur_courant_confortable:
            - position: absolute
            - width: 22%
            - left: 59%
            - top: 5%
          indicateur_oeil_intelligent:
            - position: absolute
            - width: 22%
            - left: 68%
            - top: 5%
          indicateur_flux_vertical:
            - position: absolute
            - width: 21%
            - left: 59%
            - top: 15.4%
          indicateur_clean:
            - position: absolute
            - width: 35%
            - left: 61.2%
            - top: 12%
          indicateur_flux_horizontal:
            - position: absolute
            - width: 35%
            - left: 55%
            - top: 20.5%
          power_text:
            - position: absolute
            - left: 44.5%
            - top: 35%
          power:
            - position: absolute
            - left: 43%
            - top: 38%
          fan_text:
            - position: absolute
            - left: 13%
            - top: 36.5%
          fan:
            - position: absolute
            - left: 8.5%
            - top: 39%
          powerful_text:
            - position: absolute
            - left: 26.2%
            - top: 36.5%
          powerful:
            - position: absolute
            - left: 24.8%
            - top: 39%
          temp_text:
            - position: absolute
            - left: 72%
            - top: 36.5%
          temp_down:
            - position: absolute
            - left: 62%
            - top: 39%
          temp_up:
            - position: absolute
            - left: 77%
            - top: 39%
          clapet:
            - position: absolute
            - left: 5%
            - top: 48%
            - width: 90%
          mode:
            - position: absolute
            - left: 8%
            - top: 52%
          econo_quiet_text:
            - position: absolute
            - left: 40%
            - top: 49%
          econo_quiet:
            - position: absolute
            - left: 37%
            - top: 52%
          flux_vertical:
            - position: absolute
            - left: 66%
            - top: 52%
          clean_text:
            - position: absolute
            - left: 8%
            - top: 57.5%
          comfort_sensor_text:
            - position: absolute
            - left: 37%
            - top: 57.5%
          swing_text:
            - position: absolute
            - left: 66%
            - top: 57.5%
          clean:
            - position: absolute
            - left: 8%
            - top: 60.5%
          courant_oeil:
            - position: absolute
            - left: 37%
            - top: 60.5%
          flux_horizontal:
            - position: absolute
            - left: 66%
            - top: 60.5%
          weekly_text:
            - position: absolute
            - left: 8%
            - top: 65.5%
          programmation_text:
            - position: absolute
            - left: 42%
            - top: 65%
          copy_text:
            - position: absolute
            - left: 66%
            - top: 65.5%
          weekly:
            - position: absolute
            - left: 8%
            - top: 68.5%
          programmation:
            - position: absolute
            - left: 42%
            - top: 68.5%
          copy:
            - position: absolute
            - left: 66%
            - top: 68.5%
          back_text:
            - position: absolute
            - left: 8%
            - top: 72.5%
          next_text:
            - position: absolute
            - left: 66%
            - top: 72.5%
          back:
            - position: absolute
            - left: 8%
            - top: 75.5%
          next:
            - position: absolute
            - left: 66%
            - top: 75.5%
          select:
            - position: absolute
            - left: 42%
            - top: 72.5%
          select_up:
            - position: absolute
            - left: 42%
            - top: 73%
          select_text:
            - position: absolute
            - left: 42%
            - top: 77%
          select_down:
            - position: absolute
            - left: 42%
            - top: 80.6%
          off_text:
            - position: absolute
            - left: 8%
            - top: 79.5%
          on_text:
            - position: absolute
            - left: 66%
            - top: 79.5%
          off_btn:
            - position: absolute
            - left: 8%
            - top: 82.5%
          on_btn:
            - position: absolute
            - left: 66%
            - top: 82.5%
          cancel_text:
            - position: absolute
            - left: 8%
            - top: 86.5%
          cancel:
            - position: absolute
            - left: 8%
            - top: 89.5%
          timer:
            - position: absolute
            - left: 73%
            - top: 88.5%

[Cleya]

Sinon, essaye de remplacer le bloc « state » « on » par :

State:
  - value: 'on'
    styles:
      entity_picture:
        - border: none
      card:
        - opacity: 1

[Cleya]

Custom:mod-card est installé sur ton HA ?

[VANLOC]

@Cleya

mod-card

Oui il est installé :

Mais ca vient de mon theme global, en désactivant le theme et en mettant celui de HA par défaut, en mode sombre et clair je n’ai pas de souci :

[Cleya]

Essaie éventuellement de supprimer la bordure avec card-mod.