[Article] Un beau dashboard, tout simplement

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
, , , ,
142

100% d’accord.

  • J’attend de voir comment ça évolue pour supprimer card/mod et stack-in-card dans mes room cards comme dit plus haut.
  • J’attends les prochaines évolutions de la tuile pour essayer de virer définitivement bar-card
  • Je me force de plus en plus à utiliser des cartes core partout où ce n’est pas indispensable de passer par du custom (et souvent c’est largement possible)
  • Je regarde ce qui se fait du coté des dashboards automatiques et j’essaie de les utiliser, au final il me manque quelques trucs que j’ai sur mon dashboard perso: Pronote, la gestion des updates, mon interface perso pour la gestion de la PAC, les devices trackers pour voir qui est connecté au wifi, la localisation des gens.
    Des trucs qui au final pourraient être traités via un dashboard parallèle à un dashboard par défaut si on est un peu malin et qu’on joue avec quelques entités templates bien placées…

J’aimerai à terme ne garder que Mushroom (pour des tuiles « template ») et être ~100% core sur le reste, je n’en suis pas si loin…

On peut faire des trucs jolis avec cette carte tuile si on s’applique un peu, un exemple marrant (avec custom features donc pas 100% core non plus, mais 100% compatible du look core): une carte pour envoyer de la musique sur un groupe d’enceinte (sans commande vocale sinon c’est pas drôle !)

image

Code de la carte 
type: tile
features_position: bottom
vertical: false
entity: input_text.alexa_text_input
grid_options:
  columns: 12
  rows: 1
icon: mdi:play
icon_tap_action:
  action: perform-action
  perform_action: script.toggle
  target:
    entity_id: script.play_music_on_group
name: Quelle musique ?
features:
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: input_select.groupes_d_enceintes
        options:
          - entity_id: input_select.groupes_d_enceintes
            option: Partout
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Partout
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Partout
            icon: ""
          - entity_id: input_select.groupes_d_enceintes
            option: Salon et cuisine
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Salon et cuisine
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Salon et cuisine
          - entity_id: input_select.groupes_d_enceintes
            option: Rez de chaussée
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Rez de chaussée
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Rez de Chaussée
          - entity_id: input_select.groupes_d_enceintes
            option: Etage
            tap_action:
              action: perform-action
              perform_action: input_select.select_option
              data:
                option: Etage
              target:
                entity_id: input_select.groupes_d_enceintes
            label: Etage

J’utilise un input text (via le pop up more info pour le modifier en cliquant sur la carte en dehors de l’icone et des groupes).
J’ai aussi un input-select qui permet de choisir le bon groupe d’enceinte (via une custom-feature pour un look tout en un)

On l’utilise en 3 clics: 1 clic pour modifier l’input-text, puis 1 clic de selection du groupe, puis 1 clic sur l’icone “play”.
Ca lance un script script.play_music_on_group qui lance la commande custom à Alexa: “Joue (input_text) sur le groupe (input_select)”.

code du script 
alias: play music on group
sequence:
  - action: media_player.play_media
    data:
      media:
        media_content_id: >-
          joue {{ states('input_text.alexa_text_input')}} sur le groupe {{
          states('input_select.groupes_d_enceintes')}}
        media_content_type: custom
        metadata: {}
    target:
      entity_id: media_player.echo_jeanne
mode: single
icon: mdi:music
Recherche une carte/bouton selecteur
Recherche une carte/bouton selecteur
Un bouton temporisé
Faire parler Alexa
143

Bonjour,

Je suis partie dans la même philosophie que vous, j’ai beaucoup joué avec les card_mod, je suis revenu à tuile et mushroom quasi sans card_mod. J’ai encore des cartes bien empilées mais assez maintenable. Les templates mushroom sont quand-même top. La dernière évolution à moitié en UI est très appréciable.

J’ai quand-même celle-ci qui mélange de tout :blush:

1000021746
10000217461220×929 289 KB

Code 
type: vertical-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: heading
        icon: mdi:bed-double
        heading: Parents
        heading_style: title
        badges:
          - type: entity
            show_state: true
            show_icon: true
            entity: sensor.valve_parents_battery
            color: blue
            tap_action:
              action: more-info
          - type: entity
            show_state: true
            show_icon: true
            entity: number.valve_parents_valve_opening_degree
            icon: mdi:valve-open
            color: green
            tap_action:
              action: more-info
          - type: entity
            show_state: false
            show_icon: true
            entity: binary_sensor.valve_parents_running
            color: red
            tap_action:
              action: more-info
          - type: entity
            show_state: true
            show_icon: true
            entity: climate.valve_parents
            state_content: temperature
            icon: mdi:target
            color: orange
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sonde_parents_temperature
            name: Température
            state_adaptive_color: true
          - entity: climate.valve_parents
            name: Temp
            attribute: current_temperature
            unit: °C
            state_adaptive_color: true
            show_graph: false
            show_state: true
        hour24: true
        hours_to_show: 24
        points_per_hour: 2
        font_size: 50
        show:
          name: false
          icon: false
          legend: false
          labels: true
          extrema: false
        color_thresholds:
          - color: "#33ccff"
            value: 19
          - color: "#00ffff"
            value: 19.5
          - color: "#33ffcc"
            value: 20
          - color: "#00ff99"
            value: 20.5
          - color: "#ffff99"
            value: 21
          - color: "#ffff33"
            value: 21.5
          - color: "#ff9933"
            value: 22
          - color: "#cc6633"
            value: 24
          - color: "#ff6000"
            value: 26
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:button-card
            name: Conf.
            entity: climate.versatile_parents
            show_state: false
            show_icon: true
            show_name: false
            icon: mdi:fire
            size: 80%
            styles:
              icon:
                - color: |
                    [[[
                      if (states['climate.versatile_parents']) {
                      if (states['climate.versatile_parents'].attributes.preset_mode == 'comfort')
                        return 'darkorange';
                      else
                        return 'white'; }
                    ]]]
              name:
                - color: white
                - font-size: 60%
              card:
                - height: 40px
                - width: 30px
            tap_action:
              action: perform-action
              perform_action: climate.set_preset_mode
              target:
                entity_id:
                  - climate.versatile_parents
              data:
                preset_mode: comfort
          - type: custom:button-card
            name: Eco
            entity: climate.versatile_parents
            show_state: false
            show_icon: true
            show_name: false
            icon: mdi:leaf
            size: 80%
            styles:
              icon:
                - color: |
                    [[[
                      if (states['climate.versatile_parents']) {
                      if (states['climate.versatile_parents'].attributes.preset_mode == 'eco')
                        return 'lightgreen';
                      else
                        return 'white'; }
                    ]]]
              name:
                - color: white
                - font-size: 60%
              card:
                - height: 40px
                - width: 30px
            tap_action:
              action: perform-action
              perform_action: climate.set_preset_mode
              target:
                entity_id:
                  - climate.versatile_parents
              data:
                preset_mode: eco
          - type: custom:button-card
            name: Manu
            entity: climate.versatile_parents
            show_state: false
            show_icon: true
            show_name: false
            icon: mdi:hand-back-left
            size: 80%
            styles:
              icon:
                - color: |
                    [[[
                      if (states['climate.versatile_parents']) {
                      if (states['climate.versatile_parents'].attributes.preset_mode == 'none')
                        return 'indianred';
                      else
                        return 'white'; }
                    ]]]
              name:
                - color: white
                - font-size: 60%
              card:
                - height: 40px
                - width: 30px
            tap_action:
              action: perform-action
              perform_action: climate.set_preset_mode
              target:
                entity_id:
                  - climate.versatile_parents
              data:
                preset_mode: none
          - type: custom:button-card
            name: Abs.
            entity: climate.versatile_parents
            show_state: false
            show_icon: true
            show_name: false
            icon: mdi:snowflake
            size: 80%
            styles:
              icon:
                - color: |
                    [[[
                      if (states['climate.versatile_parents']) {
                      if (states['climate.versatile_parents'].attributes.preset_mode == 'frost')
                        return 'skyblue';
                      else
                        return 'white'; }
                    ]]]
              name:
                - color: white
                - font-size: 60%
              card:
                - height: 40px
                - width: 30px
            tap_action:
              action: perform-action
              perform_action: climate.set_preset_mode
              target:
                entity_id:
                  - climate.versatile_parents
              data:
                preset_mode: frost
          - type: custom:button-card
            name: Boost
            entity: climate.versatile_parents
            show_state: false
            show_icon: true
            show_name: false
            icon: mdi:rocket-launch
            size: 80%
            styles:
              icon:
                - color: |
                    [[[
                      if (states['climate.versatile_parents']) {
                      if (states['climate.versatile_parents'].attributes.preset_mode == 'boost')
                        return 'red';
                      else
                        return 'white'; }
                    ]]]
              name:
                - color: white
                - font-size: 60%
              card:
                - height: 40px
                - width: 30px
            tap_action:
              action: perform-action
              perform_action: climate.set_preset_mode
              target:
                entity_id:
                  - climate.versatile_parents
              data:
                preset_mode: boost
      - type: custom:mushroom-climate-card
        entity: climate.versatile_parents
        name: Radiateur
        primary_info: state
        secondary_info: last-updated
        show_temperature_control: true
        fill_container: false
        collapsible_controls: false
        tap_action:
          action: more-info
        layout: horizontal
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
                {% set state = states('number.valve_parents_valve_opening_degree') %}
                {% if is_number(state) and state | float > 0 %}
                {% else %}
                  --shape-color: transparent !important;
                {% endif %}       
              }
            .: |
              ha-state-icon {
                {% set state = states('number.valve_parents_valve_opening_degree') %}
                {% if is_number(state) and state | float > 0 %}
                  color: deep-orange;
                  --card-mod-icon: mdi:radiator;
                {% else %}
                  color: grey;
                  --card-mod-icon: mdi:radiator-off;
                {% endif %}
              }
5 « J'aime »
Dashboards
144

Le badge change t’il de couleur en fonction de l’état de la neige?

145

Non, mais on pourrait le faire. À la base, j’ai cette icône :
image
je n’y vais pas pour le snow :sweat_smile:
Mais j’utilise les caméras de la station pour voir s’il neige, avec un .gif et camera generic.

image
image544×379 126 KB

1 « J'aime »
146

Alors il te manque aussi le prix de l’essence :rofl:

147

Non non, je l’ai :wink:

image
image530×167 19.6 KB

3 « J'aime »
148

Faut vraiment que je prenne du temps pour faire une carte pour ça c’est très intéressant :blush:

149

Bon j’ai installé la 2025.12.0, mais c’est le bordel les dashboards…

Ils m’ont tout pété les dashboard automatiques… j’ai un tiers de l’article à refaire, vu qu’on ne peut plus les créer pour s’en servir de base pour démarrer tranquilou son petit dashboard perso a partir d’un dashboard maison ou d’un dashboard pièces…

Je ne suis pas vraiment sûr de la pertinence de la direction qu’ils prennent… m’enfin…

1 « J'aime »
150

ça l’air top les cartes et dashboard natifs.:rofl:

1 « J'aime »
151

Sur le fond, cartes et dashboard natifs sont très bien pour faire le job…

Mais j’ai l’impression que maintenant c’est:

  • soit tu prend le standard premaché, non customisable
  • soit tu te démerde en partant de zéro.

Il y avait une étape intermédiaire qui est en train de disparaitre…
Dommage.

2 « J'aime »
152

Ça sent le retour sur card-mod :grin:

153

Faut pas déconner…

J’ai fait un gros retour sur le discord… Je crois qu’il pourrait y avoir un retour d’une notion sympa avec des template de dashboard…

A voir…

154

Pareil pour le dashboard energy..ça devient une usine à gaz ce truc…

1 « J'aime »
155

Mise à jour de l’article suite à la modification en 2025.12 des dashboards automatiques…

J’ai trouvé une astuce à base de YAML pour garder la capacité à démarrer d’un dashboard non vide… :face_exhaling:

Par exemple, pour le dashboard Pièces (Areas) qu’on ne peut plus ajouter simplement par l’interface, il est toujours disponible en tapant en yaml:

strategy:
  type: areas

et pour le dashboard Maison (Home) si on veut dupliquer le dashboard par défaut pour jouer avec:

strategy:
  type: home

Il semblerait (suite a quelques discussions sur discord) qu’un jour ou l’autre on puisse avoir l’arrivée de « templates » ou « modèles » de dashboard à la place de ce qu’on avait jusque là et qui marchait plutôt bien… à suivre dans les prochaines versions…

A noter pour les fan de bar card qu’on peut désormais ajouter une jauge dans les tuiles avec un min max, (donc pas uniquement pour les entités %).
Toujours pas de seuil de couleur, mais ça peut servir.

1 « J'aime »