Infos card sur Home Assistant

🔍 Objectif de la carte

Créer une carte élégante et interactive, regroupant :

  • Température, humidité, luminosité, présence
  • Nombre de portes/fenêtres/lumières ouvertes ou allumées
  • Historique de température sur 24h
  • Commandes rapides : lumières, chauffage, présence, infos, etc.

🧱 Prérequis

  • Home Assistant avec HACS installé
  • Plugins nécessaires :
    • custom:vertical-stack-in-card
    • custom:mini-graph-card
    • custom:mushroom-* cards
  • Entités :
    • Un capteur de température
    • Un capteur d’humidité
    • Capteurs de portes, fenêtres, lumières, capteur de présence, etc.

🧩 Code YAML complet

Le code est divisé en deux parties : la carte d’information principale et la barre d’actions rapides.

  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: light.lampe_sp
        icon: mdi:sofa
        primary: Salon
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
                  background: linear-gradient(
                    0deg,
                    rgba(255, 152, 0, 1) calc({{ state_attr(config.entity, 'brightness') | float / 2.55 }}%),
                    rgba(255, 152, 0, 0.2) 0.1%
                  ) !important;
                {% endif %}
              }
            .: |
              ha-card {
                width: 500px;
                left: -20px;
                top: -10px;
                height: 80px !important;
                --icon-size: 80px;
              }
              ha-state-icon {
                {% if is_state(config.entity, 'on') %}
                  color: white !important;
                {% else %}
                  color: grey !important;
                {% endif %}
              }
        secondary: >
          🌡️{{ states("sensor.interieur_temperature") | float(0) | round(1)
          }}°C  💧{{ states("sensor.interieur_humidite") | default('N/A') }}%  
          🚪{{ states("sensor.compteur_porte_salon") | default('N/A') }}   🪟{{
          states("sensor.compteur_fenetres_salon") | default('N/A') }}   ☀️{{
          states("sensor.presence_sensor_fp2_c57c_light_sensor_light_level") |
          default('N/A') }} lux   💡{{ states("sensor.compteur_lumieres_salon")
          | default('N/A') }}  {% if is_state('light.lampe_sp', 'on') and
          state_attr('light.lampe_sp', 'brightness') != none %}
            - {{ (state_attr('light.lampe_sp', 'brightness') | float(0) / 2.54) | round(0) }}%
          {% endif %}
        layout: horizontal
        tap_action:
          action: toggle
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.interieur_temperature
            name: Temperature
        height: 80
        hours_to_show: 24
        points_per_hour: 2
        line_width: 1
        animate: true
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        primary_info: none
        secondary_info: none
        entity: light.lampe_tv
        tap_action:
          action: toggle
        icon_color: accent
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                {% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
                  {% if state_attr(config.entity,'rgb_color') != none %}
                    background: linear-gradient(0deg, rgba{{ (state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (1,) }} calc({{ state_attr(config.entity,'brightness') | float / 2.55 }}%), rgba{{ (state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.2,) }} 0.1%) !important;
                  {% else %}
                    background: linear-gradient(0deg, rgba(255, 152, 0, 1) calc({{ state_attr(config.entity,'brightness') | float / 2.55 }}%), rgba(255, 152, 0, 0.2) 0.1%) !important;
                  {% endif %}
                {% endif %}
              }
            .: |
              ha-state-icon {
                {% if is_state(config.entity, 'on') %}
                  color: white !important;  # Couleur de l'icône lorsque l'entité est allumée
                {% else %}
                  color: grey !important;  # Couleur de l'icône lorsque l'entité est éteinte
                {% endif %}
              }
      - type: custom:mushroom-fan-card
        entity: binary_sensor.fil_pilote_salon
        icon_animation: true
        primary_info: none
        secondary_info: none
        show_oscillate_control: false
        show_percentage_control: false
        show_direction_control: false
        tap_action:
          action: more-info
      - type: custom:mushroom-entity-card
        primary_info: none
        secondary_info: none
        entity: binary_sensor.presence_sensor_fp2_c57c_presence_sensor_1
        fill_container: false
        tap_action:
          action: more-info
        icon_color: red
      - type: custom:mushroom-light-card
        primary_info: none
        secondary_info: none
        entity: light.lampe_aquarium
        tap_action:
          action: toggle
      - type: custom:mushroom-entity-card
        primary_info: none
        secondary_info: none
        entity: input_button.infos
        fill_container: false
        tap_action:
          action: navigate
          navigation_path: /lovelace/salon