[Mon Dashboard] - @kaoru v2025

Bonjour HACF,

Après des longues mois, voire même années d’inactivités, je reviens avec une nouvelle version de mon dashboard pour cette année 2025.

Repo github:

Pour me représenter rapidement, je m’appelle William, je suis ingénieur système lillois. J’utilise Home Assistant depuis 5 ans (time flies).

Initialement basé sur le design inspiré d’homekit, je suis passé sur un design plus flexible Adaptive Mushroom pour accompagner la domotisation plus poussé du logement.

Dans les grandes lignes, les points forts du projet Adaptive Mushroom dans mon usage :

  • Meilleur responsive
  • Personalisation des dashboard par user plus facile
  • Système de menu pour naviguer entre dashboard
  • Modularité par dahsboard plus importante

Le prochain gros objectif à court terme est de tout migrer mon infra sur proxmox.

Si vous avez des questions sur mon code, je suis ravi de répondre :pray:

14 « J'aime »

Bravo ! Très sobre et efficace. Si jamais tu as la possibilité de cacher cette partie avec kiosk mode

Capture d’écran 2025-06-11 à 09.05.47

Bonjour,
Tu utilises quelle carte pour ta meteo ? Celle ou il y a la grenouille ?

Sur tablette, c’est ce que j’utilise

1 « J'aime »

C’est un ensemble d’automation et de carte custom issue du projet orignal

Tu as besoin de de la ligne 1 à 173 de ce fichier : homeassistant-config/packages/temperature.yaml at master · KaoruKanon/homeassistant-config · GitHub

Cette automation permet récupérer la bonne bonne grenouille en fonction de la météo (météo france dans ma situation)

Le lovelace en lui même est celui-ci :


          - type: custom:stack-in-card
            cards:
              - type: custom:decluttering-card
                template: weather_now_template
                variables:
                  - secondary: >-
                      {{states('sensor.openweathermap_temperature') | round(1)}}
                      °C
            card_mod:
              style: |
                ha-card {
                  height: 13em !important;
                  background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status')}})) 10%), url({{states('sensor.weather_frog_image_wide')}});
                  background-size: cover, 200% auto;
                  background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
                  background-repeat: no-repeat;
                  background-blend-mode: saturation;
                }
                ha-card:active {
                  transform: scale(0.95);
                  transition: 0s;
                }

Tu aurais besoin également de ce decluttering_templates utilisée par la carte :

decluttering_templates:
 weather_now_template:
    card:
      type: custom:mushroom-template-card
      primary: >-
        {% set state = states('weather.meteo_france') %}
        {% set meteo = {
          "clear-night": "Nuit dégagée",
          "cloudy": "Nuageux",
          "fog": "Brouillard",
          "hail": "Grêle",
          "lightning": "Orages",
          "lightning-rainy": "Pluies orageuses",
          "partlycloudy": "Partiellement nuageux",
          "pouring": "Pluies torrentielles",
          "rainy": "Pluvieux",
          "snowy": "Neige",
          "snowy-rainy": "Neige et pluie",
          "sunny": "Ensoleillé",
          "windy": "Venteux",
          "windy-variant": "Venteux avec nuages",
          "exceptional": "Conditions exceptionnelles"
        } %}

        Actuellement : {{ meteo[state] if state in meteo else state }}
      secondary: "[[secondary]]"
      icon: mdi:weather-partly-cloudy
      entity: sensor.openweathermap_condition
      picture: >-
        {% set raw_state = states("weather.meteo_france") %}

        {% set condition_map = {
          "Nuit Claire": "clear-night",
          "Nuit claire": "clear-night",
          "Très nuageux": "cloudy",
          "Couvert": "cloudy",
          "Brume ou bancs de brouillard": "fog",
          "Brume": "fog",
          "Brouillard": "fog",
          "Brouillard givrant": "fog",
          "Bancs de Brouillard": "fog",
          "Risque de grêle": "hail",
          "Risque de grèle": "hail",
          "Risque d'orages": "lightning",
          "Orages": "lightning",
          "Pluie orageuses": "lightning-rainy",
          "Pluies orageuses": "lightning-rainy",
          "Averses orageuses": "lightning-rainy",
          "Ciel voilé": "partlycloudy",
          "Ciel voilé nuit": "partlycloudy",
          "Éclaircies": "partlycloudy",
          "Eclaircies": "partlycloudy",
          "Peu nuageux": "partlycloudy",
          "Pluie forte": "pouring",
          "Bruine / Pluie faible": "rainy",
          "Bruine": "rainy",
          "Pluie faible": "rainy",
          "Pluies éparses / Rares averses": "rainy",
          "Pluies éparses": "rainy",
          "Rares averses": "rainy",
          "Pluie modérée": "rainy",
          "Pluie / Averses": "rainy",
          "Averses": "rainy",
          "Averses faibles": "rainy",
          "Pluie": "rainy",
          "Neige / Averses de neige": "snowy",
          "Neige": "snowy",
          "Averses de neige": "snowy",
          "Neige forte": "snowy",
          "Neige faible": "snowy",
          "Quelques flocons": "snowy",
          "Pluie et neige": "snowy-rainy",
          "Pluie verglaçante": "snowy-rainy",
          "Ensoleillé": "sunny",
          "Ciel clair": "sunny"
        } %}

        {% set entity = condition_map.get(raw_state, raw_state) %}

        {% if entity == "clear-night" %}
          {% set slug = "clear-night" %}
        {% elif entity == "cloudy" %}
          {% set slug = "cloudy" %}
        {% elif entity == "fog" %}
          {% set slug = "fog" %}
        {% elif entity == "hail" %}
          {% set slug = "hail" %}
        {% elif entity == "lightning" %}
          {% set slug = "thunderstorms" %}
        {% elif entity == "lightning-rainy" %}
          {% set slug = "thunderstorms" %}
        {% elif entity == "partlycloudy" %}
          {% if states("sun.sun") == "below_horizon" %}
            {% set slug = "partly-cloudy-night" %}
          {% else %}
            {% set slug = "partly-cloudy-day" %}
          {% endif %}
        {% elif entity == "pouring" %}
          {% set slug = "extreme-rain" %}
        {% elif entity == "rainy" %}
          {% set slug = "rain" %}
        {% elif entity == "snowy" %}
          {% set slug = "snowflake" %}
        {% elif entity == "snowy-rainy" %}
          {% set slug = "sleet" %}
        {% elif entity == "sunny" %}
          {% set slug = "clear-day" %}
        {% elif entity == "windy" %}
          {% set slug = "wind" %}
        {% elif entity == "windy-variant" %}
          {% set slug = "wind-cloudy" %}
        {% elif entity == "exceptional" %}
          {% set slug = "extreme" %}
        {% else %}
          {% set slug = "unknown" %}
        {% endif %}

        local/weather/{{ slug }}.svg
      multiline_secondary: false
      icon_color: grey
      tap_action:
        action: navigate
        navigation_path: /lovelace/news
      badge_icon: ""
      badge_color: ""
      card_mod:
        style:
          .: |
            ha-card {
              background: none;
              box-shadow: none;
              --card-secondary-color: white;
              --card-primary-color: rgb(240,240,240);  # In previous HA OS versions, this was '--primary-text-color'
              --card-secondary-color: rgb(240,240,240);  # In previous HA OS versions, this was '--secondary-text-color'
            }
          mushroom-shape-avatar$: |
            .picture {
              width: 60px !important;
              height: 60px !important;
            }

Bonjour Karou,

Félicitation pour vos différent dashboard.

Je vous suit depuis le premier dashboard, aujourd’hui j’aimerais mettre en place votre dashboard sur mon HA, auriez-vous un lien ou autre avec la démarche à suivre pour le refaire sur ma machine s’il vous plait ?