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

Entraide Home Assistant
1

Bonjour,

J’ai enfin réussi à créer une carte plus ou moins chouette à mon goût pour ouvrir et fermer mon portail d’une part et ma porte de garage d’autre part. J’ai aussi fait un script pour ouvrir ou fermer les 2 simultanément.
Mais j’aimerais bien que « Fermé » se mette en vert ou que la chip se colore en vert (peu importe) quand c’est le cas.
Est-ce que qu’lqu’un sait ce que je dois ajouter au code, si c’est possible avec la mushroom card ?
Je vous met une image de ma vue ainsi que le code actuel ci-dessous.
Merci à vous,

image

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: script.portail_et_garage
        tap_action:
          action: toggle
        name: Portail et Garage
        content_info: name
        icon: mdi:gate-open
    alignment: center
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: switch.portail_switch_0
            tap_action:
              action: toggle
            name: Portail
            icon: mdi:gate
            content_info: name
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: binary_sensor.shellyplus1_e465b8f31738_input_0_input
            tap_action:
              action: toggle
            icon: ''
            content_info: state
        alignment: center
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: cover.porte_de_garage
            tap_action:
              action: toggle
            name: Garage
            icon: mdi:garage
            content_info: name
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: cover.porte_de_garage
            content_info: state
        alignment: center

Ma configuration

[center]## System Information

version core-2024.4.4
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.2
os_name Linux
os_version 6.1.73-haos-raspi
arch aarch64
timezone Europe/Brussels
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.34.0
Stage running
Available Repositories 1400
Downloaded Repositories 37
HACS Data ok
Home Assistant Cloud
logged_in true
subscription_expiration 28 avril 2024 à 02:00
relayer_connected true
relayer_region eu-central-1
remote_enabled true
remote_connected true
alexa_enabled false
google_enabled true
remote_server eu-central-1-19.ui.nabu.casa
certificate_status ready
instance_id f0fd017040d14711b17f54352dde68e6
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 12.2
update_channel stable
supervisor_version supervisor-2024.04.0
agent_version 1.6.0
docker_version 25.0.5
disk_total 116.6 GB
disk_used 10.6 GB
healthy true
supported true
board rpi5-64
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.13.0), File editor (5.8.0), Samba share (12.3.1), Home Assistant Google Drive Backup (0.112.1), Studio Code Server (5.15.0), Spotify Connect (0.13.0), OpenThread Border Router (2.5.1), Matter Server (5.5.1), Mosquitto broker (6.4.0)
Dashboards
dashboards 2
resources 34
views 7
mode storage
Recorder
oldest_recorder_run 15 avril 2024 à 11:43
current_recorder_run 25 avril 2024 à 11:17
estimated_db_size 584.12 MiB
database_engine sqlite
database_version 3.44.2
Spotify
api_endpoint_reachable ok
[/center] Comment récupérer ma configuration : Dans votre HA, Menu latéral `Paramètres` > `Système` > `Corrections` puis les trois petits points en haut a droite > `Informations Système` puis une fois en bas `Copier` ___
2

Bonjour, avec les carte mushroom, je ne sais pas mais je t’ai mis un exemple avec une carte custom:button-card avec changement de couleur d’écriture en fonction de l’état (vert : fermé, orange : en mouvement ou ouverture partielle, rouge : ouvert) en fonction du détecteur d’ouverture, de fermeture et de vibrations sur ma porte de garage.

C’est faisable avec card-mod aussi.

1 « J'aime »
3

Salut,
hors la carte mushroom template, tu peut pas par défaut modifier ca.
Il faut passer par card_mod et la tout est possible.

un lien avec plein d’exemple pour modifier chaque carte mushroom dispo

image

suis sympa , te mets un exemple pour un chip entity.

          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: switch.wifi_switch_2
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                icon: mdi:wifi
                content_info: state
                card_mod:
                  style: |
                    ha-card {
                      box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
                      border: 1px rgba(0,0,0,1.0) outset !important;
                      --chip-height: 30px;
                      --chip-icon-size: 20px;
                      --chip-font-size: 14px;
                      {% if is_state('switch.wifi_switch_2','on') %} 
                        --color: green;
                      {% else %}
                        --color: red;
                      {% endif %}
                    }
2 « J'aime »
4

Un seul pixel pour le relief, c’est pas top :grin:

5

Bonjour Cleya et WarC0zes, merci pour vos réponses, je vais regarder tout cela et essayer de comprendre :sweat_smile:

6

Qu’est ce que tu ferais pas pour dépasser @Pulpy-Luke :rofl:

3 « J'aime »
7

Maisss chuttttt… !!! :joy: :rofl:

8

ta besoin de card-mod et que de c’est partie du code a rajouter .
Changer l’entité et l’état si besoin ( on/off open/close …) dans {% if is_state('switch.wifi_switch_2','on') %}.

9

sinon en standard (sans add-ons autre que la mushroom card), on peut avoir une icone qui change de couleur et une info comme la température:

image

cards:
  - type: custom:mushroom-template-card
    primary: Salon
    icon: mdi:sofa
    entity: light.ampoule_lustre_salon
    layout: vertical
    icon_color: |-
      {% if is_state('light.ampoule_lustre_salon', 'on') %}
        orange
      {% endif %}
    secondary: >-
      {{ states('sensor.capteur_hygrometrie_et_temperature_temperature') }}
      °C
    tap_action:
      action: navigate
      navigation_path: salon
    hold_action:
      action: toggle
    multiline_secondary: false
    double_tap_action:
      action: none
10

Il a une carte mushroom chip entity, je donne la soluce pour c’est carte :stuck_out_tongue:

11

Bonjour Bentou, merci pour la proposition, je cherche la solution la plus simple et la plus esthétique, effectivement.
Mais merci aux autres collègues également pour vos réponses.
je vais essayer tout cela asap.

12

Sinon, juste avec custom:button-card, tu change la couleur de l’icône, la couleur du texte, la taille du texte, la couleur du fond, tu fais clignoter le texte, l’icône, tu mets la température, l’humidité, etc. etc. :joy:

1 « J'aime »
13

Ta oublier et 500 lignes de codes … :wink:

14

un tout petit peu plus :

type: custom:button-card
aspect_ratio: 4/3
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: Maison
      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
  ngarage:
    card:
      type: custom:button-card
      name: 'Garage :'
      aspect_ratio: 10/0.9
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - justify-self: start
          - padding-left: 4%
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.5)
      tap_action:
        action: none
      hold_action:
        action: none
  garage:
    card:
      type: custom:button-card
      aspect_ratio: 10/0.9
      show_icon: false
      name: |
        [[[
          if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
            return "(fermé)";
          else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
            return "(ouvert)";
          else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
            return "(en mouvement)";
          else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
            return "(partiellement ouvert)";
        ]]]
      styles:
        name:
          - font-size: |
              [[[
                if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
                  return '1.0em';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
                  return '1.0em';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
                  return '0.9em';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
                  return '0.8em';
              ]]]
          - font-weight: bold
          - align-self: end
          - color: |
              [[[
                if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
                  return 'rgba(0,128,0,0.7)';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
                  return 'rgba(255,0,0,0.7)';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
                  return 'rgba(255,140,0,0.7)';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
                  return 'rgba(255,140,0,0.7)';
              ]]]
          - animation: |
              [[[
                if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
                  return 'blink 2s ease infinite';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
                  return 'blink 2s ease infinite';
              ]]]
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
          - padding-left: |
              [[[
                if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
                  return '20%';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
                  return '20%';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
                  return '25%';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
                  return '30%';
              ]]]
          - padding-top: |
              [[[
                if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'off' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on')
                  return '8.2%';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'off')
                  return '8%';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'on')
                  return '8%';
                else if (states['binary_sensor.garage_detecteur_de_fermeture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_d_ouverture_porte_du_garage_contact'].state == 'on' && states['binary_sensor.garage_detecteur_de_vibration_porte_du_garage_vibration'].state == 'off')
                  return '7.8%';
              ]]]
      tap_action:
        action: none
      hold_action:
        action: none
  nportail:
    card:
      type: custom:button-card
      name: 'Portail :'
      aspect_ratio: 10/0.9
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - justify-self: start
          - padding-left: 4%
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.7)
      tap_action:
        action: none
      hold_action:
        action: none
  portail:
    card:
      type: custom:button-card
      aspect_ratio: 10/0.9
      show_icon: false
      name: (fermé)
      styles:
        name:
          - font-size: 1.0em ]]]
          - font-weight: bold
          - align-self: end
          - color: rgba(0,128,0,0.7)
          - animation: ''
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
          - padding-left: 20%
          - padding-top: 8.5%
      tap_action:
        action: none
      hold_action:
        action: none
  nlampe:
    card:
      type: custom:button-card
      name: Lampe extérieure
      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
  lampe:
    card:
      type: custom:button-card
      size: 75%
      entity: light.entree_lampe_exterieure_lumiere
      icon: phu:wall-fuzo
      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
  nyann:
    card:
      type: custom:button-card
      name: Yannick
      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
  yann:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      size: 100%
      entity: device_tracker.yannick_lecorvaisier
      show_icon: false
      show_entity_picture: true
      show_name: false
      styles:
        card:
          - border-radius: 50%
          - background-color: rgba(255,255,255,0.7)
          - width: 48px
          - height: 48px
      state:
        - value: home
          entity_picture: /local/images/yannick_home.png
          styles:
            entity_picture:
              - opacity: 0.8
        - value: not_home
          entity_picture: /local/images/yannick_out.png
          styles:
            entity_picture:
              - opacity: 0.8
      tap_action:
        action: none
      hold_action:
        action: none
  nvero:
    card:
      type: custom:button-card
      name: Véronique
      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
  vero:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      size: 90%
      entity: device_tracker.veronique_lecorvaisier
      show_icon: false
      show_entity_picture: true
      show_name: false
      styles:
        card:
          - border-radius: 50%
          - background-color: rgba(255,255,255,0.7)
          - width: 48px
          - height: 48px
      state:
        - value: home
          entity_picture: /local/images/vero_home.png
          styles:
            entity_picture:
              - opacity: 0.8
        - value: not_home
          entity_picture: /local/images/vero_out.png
          styles:
            entity_picture:
              - opacity: 0.8
      tap_action:
        action: none
      hold_action:
        action: none
  garageup:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/garage_ouvrir.png)
          - background-size: cover
          - border: none
          - height: 48px
          - width: 48px
      tap_action:
        action: call-service
        service: script.garage_porte_du_garage_ouvrir
  garagestop:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/garage_stopper.png)
          - background-size: cover
          - border: none
          - height: 48px
          - width: 48px
      tap_action:
        action: call-service
        service: script.garage_porte_du_garage_arreter
  garagedown:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/garage_fermer.png)
          - background-size: cover
          - border: none
          - height: 48px
          - width: 48px
      tap_action:
        action: call-service
        service: script.garage_porte_du_garage_fermer
  port_open:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/portail_ouvrir.png)
          - background-size: cover
          - border: none
          - height: 48px
          - width: 48px
      tap_action:
        action: call-service
        service: script.ouvrir_portail
  port_close:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/portail_fermer.png)
          - background-size: cover
          - border: none
          - height: 48px
          - width: 48px
      tap_action:
        action: call-service
        service: script.fermer_portail
  ncourrier:
    card:
      type: custom:button-card
      entity: input_boolean.maison_courrier
      show_icon: false
      name: 'Courrier :'
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
      state:
        - value: 'off'
          styles:
            card:
              - background-color: rgba(255,255,255,0.0)
              - border: none
            name:
              - color: rgba(0,0,0,0.6)
        - value: 'on'
          styles:
            card:
              - background-color: rgba(255,0,0,0.7)
              - border: 1px solid lightgray
            name:
              - color: rgba(255,255,255,1.0)
      tap_action:
        action: none
      hold_action:
        action: none
  courrier:
    card:
      type: custom:button-card
      entity: input_boolean.maison_courrier
      show_name: false
      show_icon: false
      styles:
        card:
          - background-color: rgba(255,255,255,1.0)
          - background-image: url(/local/images/icones/courrier.png)
          - background-size: cover
          - border-radius: 50%
          - border: none
          - height: 48px
          - width: 48px
      state:
        - value: 'off'
          styles:
            card:
              - background-color: rgba(255,255,255,1.0)
        - value: 'on'
          styles:
            card:
              - background-color: rgba(255,0,0,1.0)
              - 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;
          }
      tap_action:
        action: call-service
        service: script.reinitialiser_courrier
styles:
  custom_fields:
    fond:
      - background-image: url(/local/images/maison.png)
      - position: absolute
      - left: 0
      - top: 0
      - width: 100%
      - height: 100%
      - background-size: cover
      - background-position: center
      - opacity: 0.5
    ncarte:
      - position: absolute
      - left: 10px
      - top: '-3px'
    ngarage:
      - width: 60%
      - position: absolute
      - left: 33%
      - top: 14%
    garage:
      - width: 60%
      - position: absolute
      - left: 33%
      - top: 14%
    nportail:
      - width: 60%
      - position: absolute
      - left: 33%
      - top: 47%
    portail:
      - width: 60%
      - position: absolute
      - left: 33%
      - top: 47%
    nlampe:
      - position: absolute
      - left: 5%
      - top: 28%
    lampe:
      - position: absolute
      - left: 10%
      - top: 35%
    garageup:
      - position: absolute
      - left: 54%
      - top: 23%
    garagestop:
      - position: absolute
      - left: 68%
      - top: 23%
    garagedown:
      - position: absolute
      - left: 82%
      - top: 23%
    port_open:
      - position: absolute
      - left: 56%
      - top: 57%
    port_close:
      - position: absolute
      - left: 70%
      - top: 57%
    nyann:
      - width: 15%
      - position: absolute
      - left: 5%
      - top: 72%
    yann:
      - border-radius: 50%
      - position: absolute
      - left: 7%
      - top: 78%
    nvero:
      - width: 20%
      - position: absolute
      - left: 20%
      - top: 72%
    vero:
      - border-radius: 50%
      - width: 60px
      - position: absolute
      - left: 24%
      - top: 78%
    ncourrier:
      - border-radius: 50%
      - width: 60px
      - position: absolute
      - left: 82.5%
      - top: 72%
    courrier:
      - border-radius: 50%
      - width: 60px
      - position: absolute
      - left: 84%
      - top: 80%

image

15

oulaaaaa… C’est super beau mais je suis pas encore à ce niveau ! :grimacing:

Bon, ne vous moquez pas de moi mais après 1h de travail, après relecture de vos messages pour essayer de rentrer dans cette nouvelle logique, et après interrogation de Gemini pour corriger mes codes (je n’ai jamais codé de ma vie :sweat_smile: ) , j’ai réussi à faire ceci et ça fonctionne, c’est incroyable :

image

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Portail & Garage
    secondary: ''
    icon: mdi:gate-open
    entity: script.portail_et_garage
    layout: vertical
    multiline_secondary: false
    icon_color: blanc
    tap_action:
      action: toggle
  - type: custom:mushroom-template-card
    primary: Portail
    secondary: >-
      {% if is_state('binary_sensor.shellyplus1_e465b8f31738_input_0_input',
      'off') %}
        Fermé
      {% else %}
        Ouvert
      {% endif %}
    icon: mdi:gate
    entity: switch.portail_switch_0
    layout: vertical
    multiline_secondary: false
    icon_color: >-
      {% if is_state('binary_sensor.shellyplus1_e465b8f31738_input_0_input',
      'off') %}
        green
      {% else %}
        red
      {% endif %}
    tap_action:
      action: toggle
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: |-
      {% if is_state('cover.porte_de_garage', 'closed') %}
        Fermé
      {% else %}
        Ouvert
      {% endif %}
    icon: mdi:gate
    entity: cover.porte_de_garage
    layout: vertical
    multiline_secondary: false
    icon_color: |-
      {% if is_state('cover.porte_de_garage', 'closed') %}
        green
      {% else %}
        red
      {% endif %}
    tap_action:
      action: toggle
16

je vais essayer avec la custom button card mais j’ai l’impression que certaines instructions sont un peu différentes, je vais regarder.
Et dans mon code ci-dessus, je viens de corriger blanc par white puisqu’il faut écrire en anglais.

17

Voilà, j’ai chipoté avec la carte bouton mais j’y arrive pas :unamused:
Je ne parviens pas à trouver le bout de code que je dois mettre et où je dois le mettre pour avoir de la couleur et pour afficher une information secondaire. J’ai été voir sur GitHub, les liens que vous m’avez donné mais quand on est débutant et qu’on a pas la logique, c’est plutôt compliqué de savoir où il faut mettre toutes ces instructions…

Voici ci-dessous mon code des boutons.

Est-ce que vous pouvez me dire svp ce que je dois mettre et à quel endroit pour afficher une couleur (j’ai encore laissé une partie de ce que j’ai essayé de faire sur le 3ème bouton) + pour afficher une information secondaire (= doit renvoyer Ouvert ou Fermé, mais je dois renommer car l’état apparaît Open ou Closed par défaut…)

Merci beaucoup !!!

Note: je préfère les boutons car l’action est plus intuitive quand on tapote dessus.

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: script.portail_et_garage
    name: Portail & Garage
    show_name: true
    show_icon: true
    tap_action:
      action: toggle
    show_state: false
  - type: custom:button-card
    entity: switch.portail_switch_0
    name: Portail
    show_icon: true
    tap_action:
      action: toggle
  - type: custom:button-card
    entity: cover.porte_de_garage
    name: Portail & Garage
    show_name: true
    show_icon: true
    tap_action:
      action: toggle
    show_state: false
    styles:
      icon:
        - color: |
            [[[
              if (entity.state = open) return 'red';
              if (entity.state = closed) return 'green';
            ]]]
18

Salut, je te fais un exemple full button-card ce WE par rapport à ce que tu as fait avec Mushroom.

A la base tes « if » ne sont pas bons

          - color: |
              [[[
                if (states['cover.porte_de_garage'].state == 'open')
                  return 'red';
                else if (states['cover.porte_de_garage'].state == 'closed')
                  return 'green';
              ]]]

Ca c’est une méthode mais sinon, tu peux le faire directement sous « state »

1 « J'aime »
19

Salut,
je comprends que c’est compliquer au début, mais la doc est la pour aider. Faut un minimum la lire et comprendre, ont y est tous passer par la. En plus ta plein d’exemple pour comprendre.

pour la couleur de l’icone suivant l’état exemple:

  type: 'custom:button-card'
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)
  state:
    - value: 'on'
      color: green
    - value: 'off'
      color: red

show_state / boolean false true / defaut: false / Show the state on the card. defaults to false if not set

exemple:

  type: 'custom:button-card'
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)
  show_state: true
  state:
    - value: 'on'
      color: green
    - value: 'off'
      color: red

pour changer l’état de couleur:

  type: 'custom:button-card'
  entity: switch.ac
  icon: mdi:air-conditioner
  color: rgb(28, 128, 199)
  show_state: true
  state:
    - value: 'on'
      color: green
      styles:
        state:
          - color: green
    - value: 'off'
      color: red
      styles:
        state:
          - color: red
1 « J'aime »
20

ah, ok, c’est très gentil à toi en tout cas !

Je te mets mes entités ici si c’est plus facile :
1/ le script Portail et Garage pour ouvrir les 2 en un seul coup : script.portail_et_garage
2/ entité portail (pour ouvrir uniquement): switch.portail_switch_0
3/ entité portail pour récupérer l’état ouvert ou fermé (mais qui est renvoyé différemment via Open ou Closed car j’ai utilisé l’entrée SW sur le Shelly 1 en le raccordant au signal de la lumière du portail afin de récupérer l’état du portail en position ouverture, et ainsi ne pas devoir mettre de capteur supplémentaire) : binary_sensor.shellyplus1_e465b8f31738_input_0_input
4/ l’entité pour le garage : cover.porte_de_garage
Ici, ça fonctionne avec un dispositif Meross en mode « cover », donc c’est la même entité pour ouvrir et fermer que pour récupérer l’état d’ouverture (open) et de fermeture (closed)

N’hésite pas si tu as besoin d’info, je bosse en même temps mais je suis obsédé par ma domotique en ce moment et je regarde très régulièrement :sweat_smile: