Carte personnalisée pour la température et l’humidité

Lorsque j’ai commencé à concevoir mon tableau de bord Home Assistant, je voulais une carte affichant la température et l’humidité de manière claire et esthétique. Après avoir exploré les options disponibles, aucune ne correspondait vraiment à mes attentes. J’ai donc décidé de créer ma propre carte, alliant lisibilité et design soigné. Aujourd’hui, je vous partage les étapes de sa conception !

Prérequis

Pour concevoir cette carte il vous faudra ajouté via hacs, les éléments lovelace suivant :

• stack-in-card
• apexcharts-card
• mushroom cards
• ini-graph-card
• card_mod

La construction de la carte température et humidité

Cette carte est en 3 parties, d’abord le graphique rond avec l’humidité et la température, puis les deux graphique de suivi de l’évolution.

Créer votre carte en choisissant « pile horizontal », choisissez ensuite une carte manuelle et entrez le code suivant :

type: custom:stack-in-card
cards:
  - type: markdown
    content: <center>Salon</center>
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.salon_temperature
        color: green
        max: 50
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 0
          startAngle: -90
          endAngle: 90
          hollow:
            size: 80%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            strokeWidth: 90%
            margin: 0
      fill:
        type: gradient
        gradient:
          shade: dark
          type: horizontal
          shadeIntensity: 0.5
          inverseColors: false
          gradientToColors:
            - "#DCFE04"
            - "#FEEF04"
            - "#FEB204"
            - "#FE4404"
          opacityFrom: 1
          opacityTo: 1
          stops:
            - 0
            - 100
      legend:
        show: false
      chart:
        height: 220
    card_mod:
      style: |
        ha-card {
        margin-top: -30px;
         }
  - type: custom:apexcharts-card
    chart_type: radialBar
    series:
      - entity: sensor.humidite_salon
        color: "#04FEF3"
        max: 100
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          offsetY: 100
          startAngle: 90
          endAngle: 270
          hollow:
            size: 80%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            strokeWidth: 80%
            margin: 0
      fill:
        type: gradient
        gradient:
          shade: light
          type: horizontal
          shadeIntensity: 0.3
          inverseColors: true
          gradientToColors:
            - "#0408FE"
          opacityFrom: 1
          opacityTo: 1
          stops:
            - 0
            - 100
      legend:
        show: false
      chart:
        height: 220
    card_mod:
      style: |
        ha-card {
        margin-top: -242px;
         }
  - type: custom:mushroom-entity-card
    entity: sensor.salon_temperature
    primary_info: state
    secondary_info: none
    name: Salon
    icon_color: green
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 35%;
          left : 25%;
         }
        :host {
         --card-primary-font-size: 16px !important;
         --mush-icon-size: 25px; 
        }
  - type: custom:mushroom-entity-card
    entity: sensor.humidite_salon
    primary_info: state
    secondary_info: none
    name: Salon
    icon_color: blue
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 50%;
          left : 25%;
           }
        :host {
         --card-primary-font-size: 16px !important;
         --mush-icon-size: 25px; 
        }

Remplacez les entités températures et humidité par les vôtres. Si jamais les différentes parties ne sont pas correctement alignées, il faudra jouer sur les valeurs présentes dans les card_mod, notamment sur les éléments « top », « left » et « margin-top ».

Ajouter une deuxième carte à votre pile horizontale et choisissez « pile verticale »

Dans la première carte, ajoutez le code suivant en mettant votre entité :

animate: true
color_thresholds:
  - color: "#1bc6fd"
    value: 18
  - color: "#1bfd1b"
    value: 20
  - color: "#fdf31b"
    value: 22
  - color: "#fda41b"
    value: 25
  - color: "#fd331b"
    value: 30
entities:
  - sensor.salon_temperature
labels: true
height: 130
line_color: green
points_per_hour: 6
show:
  labels: true
  state: false
name: °C
type: custom:mini-graph-card

Puis ajouter une deuxième carte avec le code suivant sans oublier de changer l’entité :

animate: true
color_thresholds:
  - color: "#F6FE04"
    value: 20
  - color: "#04FEFE"
    value: 30
  - color: "#049FFE"
    value: 50
  - color: "#0441FE"
    value: 60
  - color: "#002FBF"
    value: 70
entities:
  - sensor.humidite_salon
labels: true
height: 130
line_color: blue
points_per_hour: 6
show:
  labels: true
  state: false
name: "%"
type: custom:mini-graph-card

Et voilà votre carte est prête ! A vous de jouer et n’hésitez pas à me donner vos remarques et impressions en commentaire.