Bouton avec graph + information

Je vais vous montrer aujourd’hui comment créer des visuels qui peuvent également servir de bouton avec du stack-in-card, du mushroom et du mini-graph-card.

Voici les deux utilisations que j’en fait aujourd’hui :

• Visualisation de la consommation des chauffages et de leur état actuel :

• Visualisation de la consommation de mes autres appareils :

Pour les chauffages, l’icône change de couleur en fonction de leur état :

• Gris : Chauffage éteint
• Bleu : Chauffage allumé mais en veille (ne chauffe pas)
• Rouge : Chauffage en fonctionnement (chauffe)

Les boutons associés sont purement informatifs et n’ont aucune action.

Le graphique permet de suivre la consommation électrique des chauffages.

Pour les autres appareils, l’indication est plus simple :

• Gris : Prise connectée éteinte
• Jaune : Prise connectée allumée

Selon le type de prise, le bouton peut permettre d’allumer ou d’éteindre l’appareil. Cependant, pour les réfrigérateurs et congélateurs, cette option a été volontairement désactivée afin d’éviter tout risque d’arrêt accidentel.

Comment construire ce visuel

Les pré-requis

Pour construire ce visuel vous devez au préalable installer via hacs les visuels suivants :

• Mushroom
• Stack in card
• Mini Graph Card

Le code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: >-
      Bureau Axelle  : {{states('sensor.bureau_axelle_power') | float(0) |
      round(0)}} W 
    secondary: "{{states('sensor.bureau_axelle') | float(0) | round(2)}} kWh"
    icon: mdi:lightning-bolt
    icon_color: |-
      {%if states('switch.bureau_axelle')=="on"%} yellow 
      {%else%} grey
      {%endif%}
    tap_action:
      action: perform-action
      perform_action: switch.toggle
      target:
        entity_id: switch.bureau_axelle
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
          --card-primary-font-size: 15px;
          --card-secondary-font-size: 14px;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.bureau_axelle_power
        color: "#4dfc5a"
        smoothing: false
        aggregate_func: min
    height: 80
    hours_to_show: 24
    points_per_hour: 10
    line_width: 1
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 80%;
          right: 0px;
          bottom: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          'background: linear-gradient(to right, var(--card-background-color), transparent);
          --ha-card-border-width: 0;
        }
card_mod:
  style: |
    ha-card {
    --ha-card-border-width: 0;
      }

La première partie de la carte est réalisée avec une carte Mushroom Template, qui permet de personnaliser librement l’affichage des informations primaires et secondaires ainsi que l’icône.

Dans cet exemple, les informations primaires et secondaires affichent respectivement la consommation instantanée et la consommation totale de la journée. L’icône change également de couleur en fonction de l’état de la prise, offrant ainsi un retour visuel rapide.

En dessous, un graphique affiche l’évolution de la consommation sur les 8 dernières heures, permettant de suivre facilement les variations de consommation.

⚠️ Désactivation du contrôle de la prise
Si vous souhaitez empêcher l’extinction de la prise en cliquant sur la carte, il suffit de supprimer cette partie du code :

 tap_action:
      action: perform-action
      perform_action: switch.toggle
      target:
        entity_id: switch.bureau_axelle

Voilà, j’espère que ce visuel vous sera utile et que vous pourrez l’adapter à vos besoins !

💬 N’hésitez pas à laisser un commentaire !