[Carte] Mise en forme de ma mushroom room-card et tuto

Ma room card à base de cartes Mushroom

Pour les débutants:
>>> Un super tuto par @Clemalex à lire avant de modifier son dashboard !! <<<
>>> Mon petit tuto pas à pas pour installer facilement la version simplifiée… <<<

La « room card » mushroom.

Mon dashboard est basé depuis le tout début sur les cartes mushroom que j’apprécie pour leur facilité et leur possibilité de personnalisation. Ceci m’a permis de modifier progressivement mon dashboard vers des choses de plus en plus personnalisées, mais « en douceur ». J’en profite pour faire un grand merci à @piitaya pour cette famille de cartes magnifique et qui permettent de se faire un superbe dashboard très simplement.

Cependant, même si les cartes mushroom sont géniales, j’ai eu finalement besoin d’une carte de synthèse pour compacter un peu le dashboard, je vous la présente avec l’exemple de la carte de synthèse du salon:
image

Avant - Après

Par exemple pour le salon et la cuisine on est passé de ça (avec une ligne de mushroom chips et 9 cartes mushroom « standard »):
image

à ça avec deux « room card », plus compactes, un peu plus standardisées et avec plus de fonctions intégrées:

La « room card » mushroom est faite de la façon suivante: il s’agit de la fusion (stack in) d’une carte mushroom template et d’une ligne de 4 mushroom chips.

Aucune de mes pièce n’a pour le moment eu besoin de plus de 4 mini icônes. Mais il est toujours possible de remplacer les chips « template » que j’ai utilisé par des chips « conditionnal » histoire de n’afficher que les chips utiles…

bien sur disponible en thème clair et en thème sombre


Il y a un peu de card_mod pour avoir des espacements plus jolis sur la ligne de chips, mais on peut faire sans si on veut simplifier (les chips sont alors collés à la bordure)…

Pilotage par l'Interface graphique - UI

Parce que c’est l’ADN de mushroom, j’ai cherché à conserver le plus possible un pilotage par l’ interface graphique, ce qui limite aussi certains choix de mise en page de cette carte. On peut faire plus beau, ou plus compact, mais en général on passe en full YAML, et il existe d’autres cartes qui sont peut être plus adaptées que mushroom.

J’ai remarqué que tant qu’on reste en stack-in vertical, on conserve le mode graphique et on n’est pas obligé de passer en full YAML, ce qui reste donc cohérent de la philosophie des cartes mushroom qui sont totalement personnalisables dans l’interface graphique:

Les pop ups sont gérés par des « fire-dom-event » qui sont écrits en YAML dans la description des « tap-actions ». Il y a des pop-up sur tous les chips, bien sûr on peut largement simplifier, surtout si on veut être 100% compatible de l’interface graphique… Il faut alors enlever tous les « fire-dom-event », on peut simplement les remplacer par le « more info » de l’entité liée, mais on perd un peu en ergonomie…
Cependant, même avec les pop ups codés en YAML, (là encore c’est une bizarrerie que je ne m’explique pas), l’interface graphique reste disponible. Tant qu’on ne modifie pas l’appui court, ce qu’on a définit en YAML reste actif, et le reste est modifiable dans l’interface graphique. On n’est forcé de passer en YAML que on veut modifier le pop-up du chip, et on peut revenir ensuite à l’interface graphique (la partie « appui court » semble vide, mais le pop up defini en YMAL reste valable):

Note: Depuis plusieurs mois, suite à une MaJ Home assistant core, il y a parfois un effet curieux et l’interface graphique n’est plus disponible.


Vous pouvez bien sûr modifier le YAML directement en cliquant sur ‹ afficher l’éditeur de code › … Mais on peut aussi récupérer l’interface normale:

  • Cliquez sur annuler ou enregistrer.
  • Cliquez sur ‹ + ajouter une carte ›
  • ajoutez une carte « pile horizontale » par exemple
  • Cliquez alors sur annuler (le seul fait d’avoir ouvert l’interface graphique en mode pile horizontale suffit)
  • revenez modifier votre room card, l’interface graphique est disponible.
    Je ne comprends pas ce phénomène qui est relativement nouveau chez moi, mais avec ce contournement, ça marche…
Pop Ups

La carte fait usage de pop up pour chaque appui court sur les chips (les doubles appui ou appui long permettent un usage rapide, ou des raccourcis spécifiques, voir fonctionnalités détaillées ci dessous):

Sur la lumière :

Sur les volets:

Sur le player:

Et même sur la plante :

Fonctions détaillées

Ci dessous la description détaillée de la carte salon. On s’appuie entierement sur les possibilités offertes par la carte mushroom template et les mushroom chips.

  • L’icône de la carte template (canapé) : son comportement (icône et couleur) est entièrement pilotable via l’UI, en particulier sa couleur dépend de l’état des lumières dans la pièce (c’est géré par un template dans l’UI)
  • Le titre est fixe, mais est entièrement définissable dans l’UI c’est l’info principale de la carte template (il pourrait être dynamique puisque c’est une carte template).
  • L’info secondaire affiche via un template la température dans la pièce (contrôlé par l’UI)
  • le badge de l’icône permet d’afficher l’état des détecteurs de mouvements (icône et couleur gérés par un template dans l’UI de la carte template), d’autre utilisations seraient possibles, mode de chauffage, alertes variées, mode auto/manuel, etc…
  • L’appui court sur l’icône du canapé (en fait sur toute la carte en dehors des chips…) est un raccourci vers une autre page dédiée à la pièce (contrôlé par l’UI) menant à une sous vue dédiée au salon.
  • L’appui long sur l’icône du canapé (en fait sur toute la carte…) fait basculer (toggle) le group « light » de la pièce (contrôlé par l’UI).

La ligne de « chips » permet d’afficher des boutons supplémentaires :

  • L’appui court sur l’icône d’ampoule ouvre un pop-up (basé sur browser mod) avec toutes les lumières de la pièce (contrôlé en YAML)
  • L’appui long sur l’icône d’ampoule fait basculer (toggle) la lumière principale de la pièce (contrôlé avec l’UI)
  • L’appui court sur l’icône de volet ouvre un pop-up (basé sur browser mod) avec tous les volets de la pièce (contrôlé en YAML)
  • L’appui long sur l’icône de volets fait basculer (toggle) le groupe des volets de la pièce (contrôlé avec l’UI)
  • L’appui court sur l’icône media ouvre un pop-up (basé sur browser mod) avec un mini mediaplayer avec tous les raccourcis qui vont bien pour gérer l’amazon echo de la pièce et les raccourcis pour envoyer certains types de musique en multiroom (contrôlé en YAML)
  • L’appui court sur l’icône de fleur ouvre un pop-up (basé sur browser mod) avec toutes les info du capteur miflora (contrôlé en YAML)
    Je n’ai pas joué avec les double clics (sauf une ou deux exception uniquement pour moi pour appeler des sous-vues très spécifiques), mais ils sont bien entendu disponibles sur la carte (via la carte mushroom template) et sur les mini icônes (via les mushroom chips)…
Le code

Le code utilise les dépendances suivantes (facultatives pour la plupart…):

  • les mushroom cards (template et chips en basique, light et cover dans les pop ups)
  • card-mod (pour la mise en forme des chips, facultatif)
  • vertical stack-in-card pour fusionner ensemble la carte template et les chips
  • browser-mod (utilisé pour tous les pop up)
  • mini-media (facultatif, pour le pop up du media player)
  • cutom flower card (facultatif, pour le pop up du mi-flora)
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states("sensor.echo_jeanne_temperature") }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
                  battery_sensor: sensor.alocasia_zebrina_battery
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_tradfri
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

Variante Horizontale

J’ai fait d’autres tests qui peuvent vous intéresser car on a là aussi un rendu très « mushroom » :

image

Cependant ici, avec le stackin horizontal, on perd la capacité à passer par l’interface graphique; mais il y a une astuce pour la conserver (voir la 2eme version du code).

le code - full YAML.
  • les mushroom cards (template et chips en basique, light et cover dans les pop ups)
  • card-mod
  • vertical stack-in-card
  • browser-mod ( facultatif, utilisé pour tous les pop up)
  • mini-media (facultatif, pour le pop up du media player)
  • cutom flower card (facultatif, pour le pop up du mi-flora)
type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states("sensor.echo_jeanne_temperature") }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
                  battery_sensor: sensor.alocasia_zebrina_battery
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 15px;
          padding-bottom: 15px;
          margin-left: -50px;
          padding-left: -150px;
          padding-right: 15px;
        }

Le code - préservant l'interface graphique

J’ai trouvé une variante pour pouvoir avoir cette version horizontale en gardant l’interface graphique: il suffit d’intercaler une carte pile horizontale!
il faut toujours:

  • les mushroom cards (template et chips en basique, light et cover dans les pop ups)
  • card-mod
  • vertical stack-in-card
  • browser-mod ( facultatif, utilisé pour tous les pop up)
  • mini-media (facultatif, pour le pop up du media player)
  • cutom flower card (facultatif, pour le pop up du mi-flora)

Par contre dans ce cas, la répartition des deux cartes est en mode 50/50. on peut donc avoir des cas où le texte est tronqué alors que les chips ne sont pas encore dessus:
image

Le contournement que j’ai trouvé c’est d’introduite du card_mod et le cas échéant de jouer sur margin-right dans la carte template pour autoriser le texte à déborder sur la moitié des chips et margin-left dans les chips pour autoriser les chips à déborder sur la partie template (dans l’exemple ci dessous c’est réglé pour un recouvrement très faible, mais à vous de bouger les curseurs).

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
  
    - type: custom:mushroom-template-card
      entity: group.lumieres_salon
      icon: mdi:sofa
      icon_color: |
        {% if is_state(entity, 'on') %}
          #03A9F4
        {% else %}  
          grey
        {% endif %}
      primary: Salon Horizontal
      secondary: '{{ states("sensor.echo_jeanne_temperature") }}°C'
      layout: horizontal
      tap_action:
        action: navigate
        navigation_path: /lovelace-smartphone/salon
      double_tap_action:
        action: navigate
        navigation_path: /lovelace-smartphone/salon
      hold_action:
        action: toggle
      badge_icon: |
        {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
          mdi:motion-sensor
        {% else %}  
          mdi:motion-sensor-off
        {% endif %}
      badge_color: |
        {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
          orange
        {% else %}  
          grey
        {% endif %}
        card_mod:
          style: |
            ha-card {
              margin-right: -24px;
              padding-right: 0px;
            }
    - type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: plant.alocatia
          icon: mdi:flower
          icon_color: |-
            {% if is_state(entity, 'problem') %} 
             orange
            {% else %}
             grey
            {% endif %}
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Plante Marsupilami
                content:
                  type: custom:mod-card
                  card:
                    type: custom:flower-card
                    entity: plant.alocatia
                    show_bars:
                      - moisture
                      - temperature
                      - illuminance
                      - conductivity
                    battery_sensor: sensor.alocasia_zebrina_battery
        - type: template
          entity: media_player.echo_jeanne
          icon: mdi:play-pause
          icon_color: |-
            {% if is_state(entity, 'playing') %} 
              #03A9F4
            {% else %}
             grey
            {% endif %}
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Echo salon
                content:
                  type: custom:stack-in-card
                  cards:
                    - type: custom:mini-media-player
                      entity: media_player.echo_jeanne
                      source: full
                      volume_stateless: false
                      group: true
                      artwork: full-cover
                      tts:
                        platform: alexa
                        entity_id: media_player.echo_jeanne
                        type: announce
                      shortcuts:
                        hide_when_off: true
                        columns: 3
                        buttons:
                          - name: Playlist Jeanne
                            type: AMAZON_MUSIC
                            id: Playlist Jeanne
                          - name: RTL2
                            type: custom
                            id: joue la station RTL deux
                          - name: Pop- Rock
                            type: custom
                            id: joue du pop rock
                          - name: Rock
                            type: custom
                            id: joue du rock
                          - name: Musique douce
                            type: custom
                            id: joue de la musique douce
                          - name: Piano
                            type: custom
                            id: joue de la musique au piano
                          - name: Queen
                            type: custom
                            id: joue du Queen
                          - name: Vianney
                            type: custom
                            id: joue du Vianney
                          - name: Louane
                            type: custom
                            id: joue du Louane
                          - name: Playlist Jeanne
                            type: AMAZON_MUSIC
                            id: Playlist Jeanne sur le groupe rez_de_chaussee
                            icon: mdi:multicast
                          - name: RTL2
                            type: custom
                            id: >-
                              joue la station RTL deux sur le groupe
                              rez_de_chaussee
                            icon: mdi:multicast
                          - name: Pop- Rock
                            type: custom
                            id: joue du pop rock sur le groupe rez_de_chaussee
                            icon: mdi:multicast
                          - name: Rock
                            type: custom
                            id: joue du rock sur le groupe rez_de_chaussee
                            icon: mdi:multicast
                          - name: Musique douce
                            type: custom
                            id: >-
                              joue de la musique douce sur le groupe
                              rez_de_chaussee
                            icon: mdi:multicast
                          - name: Piano
                            type: custom
                            id: >-
                              joue de la musique au piano sur le groupe
                              rez_de_chaussee
                            icon: mdi:multicast
                          - name: Queen
                            type: custom
                            id: joue du Queen sur le groupe rez_de_chaussee
                            icon: mdi:multicast
                          - name: Vianney
                            type: custom
                            id: joue du Vianney sur le groupe rez_de_chaussee
                            icon: mdi:multicast
                          - name: Louane
                            type: custom
                            id: joue du Louane sur le groupe rez_de_chaussee
                            icon: mdi:multicast
          hold_action:
            action: navigate
            navigation_path: /lovelace-smartphone/echo
        - type: template
          entity: cover.salon
          hold_action:
            action: toggle
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Volets du salon
                content:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-cover-card
                      entity: cover.volet_du_salon_apero
                      name: Volet Apero
                      show_position_control: true
                      show_tilt_position_control: false
                      show_buttons_control: true
                    - type: custom:mushroom-cover-card
                      entity: cover.volet_du_salon_tv
                      name: Volet TV
                      show_position_control: true
                      show_tilt_position_control: false
                      show_buttons_control: true
          icon: |-
            {% if is_state(entity, 'open') %} 
             mdi:window-shutter-open
            {% elif is_state(entity, 'closed') %} 
             mdi:window-shutter
            {% else %}
             mdi:window-shutter-alert
            {% endif %}
          icon_color: |-
            {% if is_state(entity, 'open') %} 
             grey
            {% elif is_state(entity, 'closed') %} 
             grey
            {% else %}
             orange
            {% endif %}
        - type: template
          entity: light.0x84ba20fffe4b2581
          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.popup
              data:
                title: Lumières salon
                content:
                  type: vertical-stack
                  cards:
                    - type: custom:mushroom-light-card
                      entity: light.0x84ba20fffe4b2581
                      name: Petite Lampe
                      use_light_color: true
                      show_brightness_control: true
                      show_color_temp_control: true
                      show_color_control: false
                      collapsible_controls: true
                    - type: custom:mushroom-light-card
                      entity: light.prise_lampadaire
                      use_light_color: false
                      show_brightness_control: false
                      show_color_temp_control: false
                      show_color_control: false
                      collapsible_controls: true
                    - type: custom:mushroom-light-card
                      entity: light.prise_elephants
                      use_light_color: false
                      show_brightness_control: false
                      show_color_temp_control: false
                      show_color_control: false
                      collapsible_controls: true
                    - type: custom:mushroom-light-card
                      entity: light.prise_cerisier
                      use_light_color: false
                      show_brightness_control: false
                      show_color_temp_control: false
                      show_color_control: false
                      collapsible_controls: true
          icon: mdi:lightbulb
          hold_action:
            action: toggle
          icon_color: |-
            {% if is_state(entity, 'on') %} 
             orange
            {% else %}
             grey
            {% endif %}
      alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 12px;
              margin-top: 0px;
              padding-bottom: 12px;
              margin-left: -24px
              padding-left: 0px;
              padding-right: 8px;
            }

Variante Carré

Cette variante ci ressemble plus à la carte « minimalist ». Elle a été mon option préférée durant un bon moment:

image

Ici on utilise beaucoup Card Mod pour mettre en forme la carte, et je n’étais pas sur de la pérennité ni de la facilité à maintenir cette carte à long terme (et j’avais pas mal de soucis en changeant de taille d’écran…) mais visuellement, ça marche très bien !
Je suis donc revenu à quelque chose de plus compact, de plus proche de mushroom visuellement, et aussi pour simplifier un peu le code (moins de card_mod), mais cette option mérite aussi qu’on s’y intéresse…

le code
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states("sensor.echo_jeanne_temperature") }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 16px !important;
            position: relative;
            top: -50px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -43px;
            top: 55px;
          }
        .: |
          :host {
            --mush-icon-size: 146px;
          }
        style: |
          mushroom-badge-icon {
            left: 60px;
            top: 25px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
                  battery_sensor: sensor.alocasia_zebrina_battery
    card_mod:
      style:
        .: |
          ha-card {
            width: 66px;
            margin-left: 80%;
            top: -170px;
            background: none;
            --chip-border-width: 0;
          }
card_mod:
  style: |
    ha-card {
      height: 178px ;

      margin-left: auto;
      margin-right: auto;
    }
Version Hyper simplifiée

Ci dessous une version hyper simplifiée pour ceux qui voudraient se lancer avec une version plus simple.

Tout y est faisable en interface graphique, pas besoin de mettre les doigts dans le YAML…

image

ou en horizontal (avec un peu de card_mod):
image

Coté dépendances, Il n’y a qu’à installer (vias HACS par exemple):

Pas besoin de card mod, pas de browser mod pour les pop up (on appelle le more info de l’entité à la place).
=> procédure pas à pas pour l’installer <=

Card_Mod et Mushroom

Et pour finir pour ceux qui veulent jouer avec cardmod pour modifier des cartes mushroom, je suis tombé sur cet excellent post sur le forum anglophone, qui liste TOUTES les modifications possibles sur les cartes mushroom… une mine d’or:

Mushroom Cards Card Mod Styling/Config Guide - Community Guides - Home Assistant Community

7 « J'aime »

Hello,

voilà un exemple
image

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 25% 75%
  grid-template-rows: 30% 70%
  grid-template-areas: |
    "zone1 zoneV"
    "zone2 zoneV"
cards:
  - type: entity
    view_layout:
      grid-area: zone1
    entity: light.led_cuisine
  - type: entity
    view_layout:
      grid-area: zoneV
    entity: light.led_plan
  - type: button
    entity: light.led_plan
    view_layout:
      grid-area: zone2

A toi de changer les proportions (%) et les types de cartes qui composent l’ensemble (avec les tap_action si besoin)

1 « J'aime »

Merci pour la découverte de cette layout-card.

En effet on garde l’UI, donc c’est parfait.

Dans mes recherche j’etais tombé dessus, mais mes tests rapides ne m’avaient pas permis de l’utiliser simplement. Là avec ton exemple c’est limpide !

Il me reste un soucis: Apres un premier test rapide (sans trop de mise en forme ni de « cablage ») j’arrive a quelque chose qui pourrait être intéressant (c’est un brouillon…):
image

Pour atteindre mon but il ne me resterai plus qu’à mettre un fond sur l’ensemble de la layout-card pour grouper entre eux les éléments.

Est-ce possible ?

Quand je veux unifier des cartes, j’utilise souvent ça :

ça donnerai
image

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 25% 75%
      grid-template-rows: 30% 70%
      grid-template-areas: |
        "zone1 zoneV"
        "zone2 zoneV"
    cards:
      - type: entity
        view_layout:
          grid-area: zone1
        entity: light.led_cuisine
      - type: entity
        view_layout:
          grid-area: zoneV
        entity: light.led_plan
      - type: button
        entity: light.led_plan
        view_layout:
          grid-area: zone2

Oui, ça fait le taf (même s’il y a sans doute des trucs à bricoler dans le layout pour que tout prenne sa place) :
image

Mais le soucis de la stack-in card c’est qu’on perd l’interface et qu’on est obligé de tout faire en YAML. Hors de mon point de vue, tout l’intérêt des mushroom cards c’est l’interface…

Dans mes tests j’ai aussi joué avec card mod car je me suis rendu compte que si on ne met pas de stack-in, ça ne casse pas l’utilisation de l’interface. (et dans certains cas même avec Stack-in on garde l’utilisation de l’interface… J’avoue que j’ai pas tout compris du pourquoi…)

Bref j’ai réussi aussi à faire ça:
image

avec le code suivant :

J’ai deux problèmes:

  • soit à gauche l’icone déborde, mais la carte prend bien « toute sa place »
  • soit j’ai une place perdue à droite de la carte de droite
type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        entity: group.lumieres_salon
        icon: mdi:sofa
        icon_color: |
          {% if is_state(entity, 'on') %}
            #03A9F4
          {% else %}  
            grey
          {% endif %}
        primary: Salon
        secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
        layout: horizontal
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
        hold_action:
          action: toggle
        badge_icon: |
          {% if is_state('cover.volet_du_salon_tv', 'closed') %}
            mdi:window-shutter
          {% else %}  
            mdi:window-shutter-open
          {% endif %}
        badge_color: |
          {% if is_state('cover.volet_du_salon_tv', 'closed') %}
            green
          {% else %}  
            grey
          {% endif %}
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -52px;
                left: -155px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 60px;
                top: 25px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: light.0x84ba20fffe4b2581
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lumières salon
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-light-card
                        entity: light.0x84ba20fffe4b2581
                        name: Petite Lampe
                        use_light_color: true
                        show_brightness_control: true
                        show_color_temp_control: true
                        show_color_control: false
                        collapsible_controls: true
                      - type: custom:mushroom-light-card
                        entity: light.lampadaire
                        use_light_color: false
                        show_brightness_control: false
                        show_color_temp_control: false
                        show_color_control: false
                        collapsible_controls: true
                      - type: custom:mushroom-light-card
                        entity: light.elephants
                        use_light_color: false
                        show_brightness_control: false
                        show_color_temp_control: false
                        show_color_control: false
                        collapsible_controls: true
                      - type: custom:mushroom-light-card
                        entity: light.cerisier
                        use_light_color: false
                        show_brightness_control: false
                        show_color_temp_control: false
                        show_color_control: false
                        collapsible_controls: true
            icon: mdi:lightbulb
            hold_action:
              action: toggle
            icon_color: |-
              {% if is_state('light.0x84ba20fffe4b2581', 'on') %} 
               orange
              {% elif is_state('light.0x84ba20fffe4b2581', 'off') %} 
               grey
              {% else %}
               grey
              {% endif %}
          - type: conditional
            conditions:
              - entity: binary_sensor.echo_salon_mouvement
                state: 'on'
            chip:
              type: entity
              entity: binary_sensor.echo_salon_mouvement
              icon: mdi:motion-sensor
              icon_color: blue
              content_info: none
          - type: template
            entity: media_player.echo_jeanne
            icon: mdi:play-pause
            icon_color: blue
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Echo salon
                  content:
                    type: custom:stack-in-card
                    cards:
                      - type: custom:mushroom-media-player-card
                        entity: media_player.echo_jeanne
                        icon: mdi:play
                        use_media_info: true
                        use_media_artwork: false
                        show_volume_level: false
                        media_controls:
                          - play_pause_stop
                          - previous
                          - next
                        volume_controls:
                          - volume_buttons
                          - volume_set
                        fill_container: false
        card_mod:
          style:
            .: |
              ha-card {
                width: 66px;
                margin-left: 76%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px !important;
          width: 178px !important;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: group.lumieres_salon
        icon: mdi:sofa
        icon_color: |
          {% if is_state(entity, 'on') %}
            #03A9F4
          {% else %}  
            grey
          {% endif %}
        primary: Salon
        secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
        layout: horizontal
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
        double_tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
        hold_action:
          action: toggle
        badge_icon: |
          {% if is_state('cover.volet_du_salon_tv', 'closed') %}
            mdi:window-shutter
          {% else %}  
            mdi:window-shutter-open
          {% endif %}
        badge_color: |
          {% if is_state('cover.volet_du_salon_tv', 'closed') %}
            green
          {% else %}  
            grey
          {% endif %}
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -52px;
                left: -155px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 60px;
                top: 25px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: light.0x84ba20fffe4b2581
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Lumières salon
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:mushroom-light-card
                        entity: light.0x84ba20fffe4b2581
                        name: Petite Lampe
                        use_light_color: true
                        show_brightness_control: true
                        show_color_temp_control: true
                        show_color_control: false
                        collapsible_controls: true
                      - type: custom:mushroom-light-card
                        entity: light.lampadaire
                        use_light_color: false
                        show_brightness_control: false
                        show_color_temp_control: false
                        show_color_control: false
                        collapsible_controls: true
                      - type: custom:mushroom-light-card
                        entity: light.elephants
                        use_light_color: false
                        show_brightness_control: false
                        show_color_temp_control: false
                        show_color_control: false
                        collapsible_controls: true
                      - type: custom:mushroom-light-card
                        entity: light.cerisier
                        use_light_color: false
                        show_brightness_control: false
                        show_color_temp_control: false
                        show_color_control: false
                        collapsible_controls: true
            icon: mdi:lightbulb
            hold_action:
              action: toggle
            icon_color: |-
              {% if is_state('light.0x84ba20fffe4b2581', 'on') %} 
               orange
              {% elif is_state('light.0x84ba20fffe4b2581', 'off') %} 
               grey
              {% else %}
               grey
              {% endif %}
          - type: conditional
            conditions:
              - entity: binary_sensor.echo_salon_mouvement
                state: 'on'
            chip:
              type: entity
              entity: binary_sensor.echo_salon_mouvement
              icon: mdi:motion-sensor
              icon_color: blue
              content_info: none
          - type: template
            entity: media_player.echo_jeanne
            icon: mdi:play-pause
            icon_color: blue
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Echo salon
                  content:
                    type: custom:stack-in-card
                    cards:
                      - type: custom:mushroom-media-player-card
                        entity: media_player.echo_jeanne
                        icon: mdi:play
                        use_media_info: true
                        use_media_artwork: false
                        show_volume_level: false
                        media_controls:
                          - play_pause_stop
                          - previous
                          - next
                        volume_controls:
                          - volume_buttons
                          - volume_set
                        fill_container: false
        card_mod:
          style:
            .: |
              ha-card {
                width: 66px;
                margin-left: 76%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px !important;
          width: 178px !important;
        }

Mais déjà, je garde l’interface graphique dans la plupart des cas… bon c’est pas encore 100% parfait, mais en tatonnant on progresse…

Je partait du postulat card-mod ou stack-in => pas d’éditeur visuel, mais c’est moins simple que ça…

Si tu restes uniquement sur l’idée de passer par des outils graphiques à un moment donné, tu seras forcement obligé de faire des compromis (que les cartes officielles et les quelques custom qui le supportent). Replacer ça par du cardmod, c’est à mon avis même pas plus simple, au contraire (et c’est pas plus graphique).
Et puis le YAML, tu en manipule(ra) partout, donc apprendre à faire sans l’UI c’est pas forcément un mal.

Je suis 100% d’accord avec toi. Ce n’est pas que je sois allergique au Yaml, mais naïvement sans doute je me dit que si mon code est compatible de l’interface graphique il sera plus facilement maintenable à long terme.

L’idée était donc d’essayer de concevoir mon dashboard de la façon la plus simple possible (aujourd’hui je suis sur 90% de mushroom) et de réserver les trucs subtils à quelques cartes particulières (la carte météo par exemple) pour limiter les interventions en cas d’incompatibilité sur une future MaJ.

Je me tâte même à tout basculer en Tile-card pour être quasi 100% cartes « basiques » mais il me manque la carte template pour sauter le pas…

Pour l’instant mon dasboard me va bien, mais il faut beaucoup scroller pour voir toutes les pièces, ensuite j’ai des sous-vues par pièces => d’où la recherche d’une carte de synthèse compacte par pièce.


1 « J'aime »

J’ai poussé encore un peu la réflexion sur le sujet et je vous tiens au courant de mes avancées sur le sujet…

J’ai fini par arriver à quelque chose qui me va, basé uniquement sur une mushroom template et une carte mushroom chips, fusionnées en stackin et modifiées avec card mod:

Sans card mod :
image

Avec card mod:
image
Je ne suis pas resté figé sur du carré pour pouvoir m’adapter à plusieurs largeur d’écran, mais c’est facilement modifiable avec card mod :
imageimage

L’exemple suivant pour la carte « salon »:

  • La plupart des comportements basiques de la carte template et des chips sont toujours pilotables via l’interface graphique (UI) malgré l’utilisation de card mod et du « stacking ». (Je n’ai toujours pas vraiment compris pourquoi des fois ça marche…)
  • La plupart des pop up sur les boutons sont gérés directement en YAML avec des fire-dom-event. Il serait possible de repasser en « full UI » avec des cartes pop up (disponibles avec browser_mod) mais ceci génèrerait un grand nombre de cartes pop-up (4 par cartes).
Fonctions détaillées

Ci dessous la description détaillée:

  • L’icone de la carte template (canapé) est grossie et déplacée via card mod. Cependant son comportement (icone et couleur) est entièrement pilotable via l’UI, en particulier sa couleur dépend de l’état des lumières dans la pièce (c’est géré par un template dans l’UI)
  • Le titre est fixe, mais est entièrement définissable dans l’UI c’est l’info principale de la carte template (il pourrait être dynamique puisque c’est une carte template).
  • L’info secondaire affiche via un template la température dans la pièce (contrôlé par l’UI)
  • le badge de l’icone permet d’afficher l’état des détecteurs de mouvements (icone et couleur gérés par un template dans l’UI de la carte template), puis est déplacé avec card mod, d’autre utilisations seraient possibles, mode de chauffage, etc…
  • L’appui court sur l’icone du canapé (en fait sur toute la carte…) est un raccourci vers une autre page dédiée à la pièce (controlé par l’UI)
  • L’appui long sur l’icone du canapé (en fait sur toute la carte…) fait basculer le group « light » de la pièce (controlé par l’UI)
  • La ligne de « chips » est transformée en colonne (largeur et position modifiée via card mod, pas de background ni de bordures)
  • L’appui court sur l’icone d’ampoule ouvre un pop-up (basé sur browser mod) avec toutes les lumières de la pièce (controlé en YAML)
  • L’appui long sur l’icone d’ampoule fait basculer la lumière principale de la pièce (controlé avec l’UI)
  • L’appui court sur l’icone de volet ouvre un pop-up (basé sur browser mod) avec tous les volets de la pièce (controlé en YAML)
  • L’appui long sur l’icone de volets fait basculer le groupe des volets de la pièce (controlé avec l’UI)
  • L’appui court sur l’icone media ouvre un pop-up (basé sur browser mod) avec un mini mediaplayer avec tous les raccourcis qui vont bien pour gérer l’amazon echo de la pièce et les raccourcis pour envoyer certains types de musique en multiroom (controlé en YAML)
  • L’appui court sur l’icone de fleur ouvre un pop-up (basé sur browser mod) avec toutes les info du capteur miflora (controlé en YAML)
  • je n’ai pas joué avec les double clics, mais ils sont bien entendu disponibles sur la carte (via le template) et sur les mini icones (via les chips)…

Aucune de mes pièce n’a pour le moment eu besoin de plus de 4 mini icones. Mais il est toujours possible de remplacer les chips « template » que j’ai utilisé" par des chips « conditionnal » histoire de n’afficher que les chips utiles…

Dans cette carte, la plupart des réglages restent ainsi disponibles avec l’interface graphique. La seule exception c’est la gestion des pop-ups, réalisé en YAML avec des fire-dom-event. j’aurai pu aussi soit simplifier ce point, soit faire des pop-up cards indépendantes…

J’ai arrêté mes tests là car ça répondait bien à mon besoin, et j’ai généralisé cette carte à mon dashboard…

Code

Le code, il utilise:

  • les mushroom cards (template et chips en basique, light et cover dans les pop ups)
  • card-mod
  • vertical stack-in-card
  • browser-mod ( facultatif, utilisé pour tous les pop up)
  • mini-media (facultatif, pour le pop up du media player)
  • cutom flower card (facultatif, pour le pop up du mi-flora)
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            font-size: 16px !important;
            position: relative;
            top: -50px;
            left: -155px;
            overflow: visible !important;
            white-space: normal !important;
          }
          .secondary {
            position: relative;
            overflow: visible !important;
            top: -52px;
            left: -155px;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -43px;
            top: 55px;
          }
        .: |
          :host {
            --mush-icon-size: 146px;
          }
        style: |
          mushroom-badge-icon {
            left: 60px;
            top: 25px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
    card_mod:
      style:
        .: |
          ha-card {
            width: 66px;
            margin-left: 80%;
            top: -170px;
            background: none;
            --chip-border-width: 0;
          }
card_mod:
  style: |
    ha-card {
      height: 178px ;

      margin-left: auto;
      margin-right: auto;
    }

Le rendu final en mode jour:

en en mode nuit:

2 « J'aime »

Nota: pour les allergiques à card mod, on peut arriver à quelque chose d’assez sympa et très « mushroom » sans card mod (je n’ai pas encore fait mon choix, je garde les deux versions en parallèle…) :

Mais en grid sur deux colonnes uniquement pour passer sur smartphone…
Je remet le code de la carte salon au cas où…

Code
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
    alignment: end

1 « J'aime »

Suite à quelques questions en MP, je me permet une petite mise à jour…

Finalement j’utilise les versions « mushroom » plus que la tuile carrée type « minimalist »


J’ai remis un peu de cardmod pour avoir des espacements plus jolis sur la ligne de chips…

J’ai remarqué que tant qu’on reste en stack in vertical, on conserve le mode graphique et on n’est pas obligé de passer en full YAML:

Le code

Il y a des pop up sur tous les chips, bien sur on peut largement simplifier… Le code utilise les dépendances suivantes (facultative pour la plupart…):

  • les mushroom cards (template et chips en basique, light et cover dans les pop ups)
  • card-mod
  • vertical stack-in-card
  • browser-mod ( facultatif, utilisé pour tous les pop up)
  • mini-media (facultatif, pour le pop up du media player)
  • cutom flower card (facultatif, pour le pop up du mi-flora)
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
                  battery_sensor: sensor.alocasia_zebrina_battery
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_tradfri
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
    alignment: end
    card_mod:
      style:
        style: |
          ha-card {
            padding-top: 0px;
            margin-top: -8px;
            padding-bottom: 8px;
            padding-left: 8px;
            padding-right: 8px;
          }

J’ai fait d’autres tests qui peuvent intéresser car on a là aussi un rendu très « mushroom » :

image

Cependant ici, avec le stackin horizontal, on perd la capacité à passer par l’interface graphique et on passe en full YAML, ce qui est dommage car l’idée de mushroom est justement de rester graphique.

le code
  • les mushroom cards (template et chips en basique, light et cover dans les pop ups)
  • card-mod
  • vertical stack-in-card
  • browser-mod ( facultatif, utilisé pour tous les pop up)
  • mini-media (facultatif, pour le pop up du media player)
  • cutom flower card (facultatif, pour le pop up du mi-flora)
type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    entity: group.lumieres_salon
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        #03A9F4
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    double_tap_action:
      action: navigate
      navigation_path: /lovelace-smartphone/salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: plant.alocatia
        icon: mdi:flower
        icon_color: |-
          {% if is_state(entity, 'problem') %} 
           orange
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Plante Marsupilami
              content:
                type: custom:mod-card
                card:
                  type: custom:flower-card
                  entity: plant.alocatia
                  show_bars:
                    - moisture
                    - temperature
                    - illuminance
                    - conductivity
                  battery_sensor: sensor.alocasia_zebrina_battery
      - type: template
        entity: media_player.echo_jeanne
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            #03A9F4
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:stack-in-card
                cards:
                  - type: custom:mini-media-player
                    entity: media_player.echo_jeanne
                    source: full
                    volume_stateless: false
                    group: true
                    artwork: full-cover
                    tts:
                      platform: alexa
                      entity_id: media_player.echo_jeanne
                      type: announce
                    shortcuts:
                      hide_when_off: true
                      columns: 3
                      buttons:
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne
                        - name: RTL2
                          type: custom
                          id: joue la station RTL deux
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock
                        - name: Rock
                          type: custom
                          id: joue du rock
                        - name: Musique douce
                          type: custom
                          id: joue de la musique douce
                        - name: Piano
                          type: custom
                          id: joue de la musique au piano
                        - name: Queen
                          type: custom
                          id: joue du Queen
                        - name: Vianney
                          type: custom
                          id: joue du Vianney
                        - name: Louane
                          type: custom
                          id: joue du Louane
                        - name: Playlist Jeanne
                          type: AMAZON_MUSIC
                          id: Playlist Jeanne sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: RTL2
                          type: custom
                          id: >-
                            joue la station RTL deux sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Pop- Rock
                          type: custom
                          id: joue du pop rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Rock
                          type: custom
                          id: joue du rock sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Musique douce
                          type: custom
                          id: >-
                            joue de la musique douce sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Piano
                          type: custom
                          id: >-
                            joue de la musique au piano sur le groupe
                            rez_de_chaussee
                          icon: mdi:multicast
                        - name: Queen
                          type: custom
                          id: joue du Queen sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Vianney
                          type: custom
                          id: joue du Vianney sur le groupe rez_de_chaussee
                          icon: mdi:multicast
                        - name: Louane
                          type: custom
                          id: joue du Louane sur le groupe rez_de_chaussee
                          icon: mdi:multicast
        hold_action:
          action: navigate
          navigation_path: /lovelace-smartphone/echo
      - type: template
        entity: cover.salon
        hold_action:
          action: toggle
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_apero
                    name: Volet Apero
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
                  - type: custom:mushroom-cover-card
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.0x84ba20fffe4b2581
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.0x84ba20fffe4b2581
                    name: Petite Lampe
                    use_light_color: true
                    show_brightness_control: true
                    show_color_temp_control: true
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_lampadaire
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_elephants
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
                  - type: custom:mushroom-light-card
                    entity: light.prise_cerisier
                    use_light_color: false
                    show_brightness_control: false
                    show_color_temp_control: false
                    show_color_control: false
                    collapsible_controls: true
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           grey
          {% else %}
           grey
          {% endif %}
    alignment: end
    style: |
      ha-card {
        padding-top: 15px;
        padding-bottom: 15px;
        margin-left: -50px;
        padding-left: -150px;
        padding-right: 15px;
      }


Et pour finir pour ceux qui veulent jouer avec cardmod pour modifier des cartes mushroom, je suis tombé sur cet excellent post sur le forum anglophone, qui liste TOUTES les modifications possibles sur les cartes mushroom… une mine d’or:

2 « J'aime »

Le dashboard complet utilise principalement ce modèle de cartes et d’autres cartes mushroom template, voir ma presentation:

Puis de nombreuses sous vues par pièces ou par sujet accessible via les clic simples ou doubles suivant les cas.

1 « J'aime »

Petit tutoriel pas à pas pour ajouter une room card simplifiée:

N’ayez pas peur de tenter d’ajouter une telle carte à votre dashboard…
Avec cette version simplifiée, vous pouvez tenter, même débutants.

Tout y est faisable en interface graphique, pas besoin de mettre les doigts dans le YAML…

Ceci permet d’obtenir la carte suivante:

La carte simple:
image

La carte améliorée avec card_mod en faisant l’étape 3 en plus:
image

Une variante horizontale en prenant le code de l’étape 5 (avec card mod):
image

Dont le comportement sera le suivant une fois configurée:

  • Si la piece est « utilisée » (ex lumière allumée) l’icone canapé sera bleue (grise sinon)
  • Si on clique sur le canapé (en fait sur toute la moitié haute de la carte), on ouvre un raccourci vers une sous vue dédiée au salon (à définir par ailleurs bien sûr…)
  • Si on reste appuyé sur le canapé (en fait toute la partie du haut) on bascule (toggle) l’entité (ex la lumière) que l’on a lié à l’icone canapé
  • Si le capteur de mouvement détecte un mouvement, le petit badge a coté du canapé sera orange (gris sinon)
  • Le capteur de temperature indiquera la temperature de la pièce (à la place de unknown °C)
  • Les icones et couleurs des 3 boutons changerons en fonction de l’état de l’entité associée (media player, volet, lumière)
  • L’appui sur un des 3 bouton lancera un pop-up (la page « more info » de l’entité utilisée, média player, volet ou lumière)
  • l’appui long sur le bouton volet ou lumière changera l’état de celui ci (action toggle).

Coté dépendances, la carte utilise les ressources suivantes qu’il faut installer avant (via HACS par exemple, c’est le plus simple):

Il n’y a besoin de rien de plus. Il n’y a plus qu’à suivre la procédure pas à pas ci dessous :

1: Ajouter cette carte à votre dashboard

intégrer la carte brute

C’est simple, copiez le code ci dessous.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.votre_lumière
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        yelow
      {% else %}  
        grey
      {% endif %}
    primary: Salon Simplifié
    secondary: "{{ states('sensor.votre_capteur_temperature') }}°C"
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /votre_url_salon
    double_tap_action:
      action: navigate
      navigation_path: /votre_url_salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.votre_capteur_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.votre_capteur__mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: media_player.votre_media_player
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            green
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: cover.votre_volet_salon
        hold_action:
          action: toggle
        tap_action:
          action: more-info
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.votre_lumiere
        icon: mdi:lightbulb
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
    alignment: end

Dans votre dashboard, cliquez sur les 3 points en haut et faites « modifier le dashboard »:
image

Cliquez sur ajouter une carte, et sélectionnez la carte « manuel » tout en bas.

Remplacez type: ' ' par le code que vous venez de copier, sauvegardez la carte (cliquez « Enregistrer ») et passez à l’étape suivante, « vos réglages »…

2: Configurer la carte avec vos entités

Faites vos réglages

Cliquez sur la carte nouvellement ajoutée et faites « modifier »:
image
Ceci va ouvrir l’interface graphique suivante:

Note: il y a parfois un effet curieux et l’interface graphique n’est pas disponible, pas de panique!


Vous pouvez bien sûr modifier le YAML directement en cliquant sur ‹ afficher l’éditeur de code › … Mais on peut aussi récupérer l’interface normale:

  • Cliquez sur annuler ou enregistrer.
  • Cliquez sur ‹ + ajouter une carte ›
  • ajoutez une carte « pile horizontale » par exemple
  • Cliquez alors sur annuler
  • revenez modifier votre room card.

Comme par magie l’interface graphique est disponible. Je ne comprends pas ce phénomène qui est relativement nouveau chez moi…

Etape A la carte mushroom template: la partie haute de la carte

En cliquant sur l’onglet 1 on peut modifier toute la partie haute de la carte:
image

  • en premier l’entité (à la place de light.votre_lumière) qui sera ensuite nommée entity dans le reste de la carte et pilotera le changement de couleur de l’icone canapé (bleu si ‹ on › dans l’exemple) moi j’y met la lumière de la pièce, on peut aussi y mettre un groupe de lumières le cas échéant. Entité à mettre dans la partie entourée en rouge ci dessus.
  • puis dans l’ordre tous les items de la carte mushroom template:
  • l’icône principale (ici mdi:sofa)
  • sa couleur (bleu si l’entité est on, gris sinon)
  • l’info principale (ici Salon, mais libre à vous de mettre ce que vous voulez, voire l’étape 4…)
  • l’info secondaire (ici mettre votre capteur de température à la place de sensor.votre_capteur_temperature, vous pouvez ajouter un capteur d’humidité en utilisant le même type de template, supprimer cette information ou mettre ce que vous voulez, voir l’étape 4 pour plus de renseignements…)
  • puis le badge (mini icône capteur de mouvement dans ce cas, où il faut remplacer binary_sensor.votre_capteur_mouvement par la bonne entité pour gérer la couleur et l’icone)
  • enfin le comportement en cas de clic sur cette partie de la carte (ici lien vers la page « votre url salon », url à remplacer par exemple par la sous vue du dashboard dédiée à la pièce considérée), dans mushroom, on peut définir un comportement différent en simple clic, double clic et clic long.
  • en cas d’appui long il est spécifié « toggle » ce qui fera basculer l’état de l’entité liée dans l’encadré rouge (la lumière dans l’exemple)

Etape B la ligne de mushroom chips: les 3 boutons en bas de la carte

En cliquant sur l’onglet 2 on accède au réglage de la barre de chips (les boutons) :


Pour régler chaque bouton (média player, volet et lumière) il faudra appuyer sur le petit crayon à coté du chip concerné, exemple avec la lumière (le troisième):
image

  • Et là encore il suffit de mettre votre lumière à la place de l’entité au début (ou un groupe de lumières le cas échéant, à la place de light.votre_lumière comme pour la partie A, entouré en rouge ci dessus…)
  • puis éventuellement de modifier l’icone, sa couleur, etc…
  • c’est là aussi que vous pouvez modifier les comportement sur les appui boutons (simple clic, clic long et double clic). Par défaut j’ai mis toggle sur appui long (si on reste appuyé on bascule l’éclairage) et « more info » pour les autres pour faire un genre de pop up…

Il suffit ensuite de recommencer le même réglage avec les autres chips pour les volets et le média-player
Libre à vous d’ajouter d’autres chips sur le même modèle (pour un chauffage par exemple), de les modifier ou d’en supprimer…

3: Améliorer l’esthétique

Petit bonus de mise en page avec Card_mod

Si vous avez installé card_mod, vous pouvez ajouter le code ci dessous à la fin de l’onglet 2 (en cliquant sur les accolades : {} pour passer localement (et temporairement) en YAML)

card_mod:
  style: |
    ha-card {
      padding-right: 15px;
      padding-left: 15px;
      padding-bottom: 15px;
      }

puis cliquer sur « Enregistrer ».
Note: si vous remodifiez la carte ultérieurement, l’interface graphique reste disponible, même si vous êtes passé temporairement en mode YAML, pas d’angoisse…

ou sinon vous copiez-collez le code complet avec card_mod à l'étape 1
type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.votre_lumière
    icon: mdi:sofa
    icon_color: |
      {% if is_state(entity, 'on') %}
        blue
      {% else %}  
        grey
      {% endif %}
    primary: Salon
    secondary: "{{ states('sensor.votre_capteur_temperature') }}°C"
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /votre_url_salon
    double_tap_action:
      action: navigate
      navigation_path: /votre_url_salon
    hold_action:
      action: toggle
    badge_icon: |
      {% if is_state('binary_sensor.votre_capteur_mouvement', 'on') %}
        mdi:motion-sensor
      {% else %}  
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.votre_capteur__mouvement', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: media_player.votre_media_player
        icon: mdi:play-pause
        icon_color: |-
          {% if is_state(entity, 'playing') %} 
            green
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: more-info
      - type: template
        entity: cover.votre_volet_salon
        hold_action:
          action: toggle
        tap_action:
          action: more-info
        icon: |-
          {% if is_state(entity, 'open') %} 
           mdi:window-shutter-open
          {% elif is_state(entity, 'closed') %} 
           mdi:window-shutter
          {% else %}
           mdi:window-shutter-alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'open') %} 
           grey
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.votre_lumiere
        icon: mdi:lightbulb
        tap_action:
          action: more-info
        hold_action:
          action: toggle
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           orange
          {% else %}
           grey
          {% endif %}
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-right: 15px;
          padding-left: 15px;
          padding-bottom: 15px;
          }

Grâce à Card_mod, les chips ne seront plus collés au bord (espace de 15pixel), ce qui est plus joli…
image

Il ne vous reste plus qu’à refaire tout ça pour faire d’autres pieces que le salon, en changeant le nom, l’icone et les entités associées bien sûr…

4: Pour aller un peu plus loin, un petit mot sur les templates JINJA2:

Mushroom template utilise le template Jinja2

Il s’agit de la syntaxe qui va être utilisée pour piloter la carte mushroom template et les mushroom chips.
Basiquement les syntaxes les plus utilisées ici seront de deux types :

Les structures "textuelles" :
{{ states('sensor.votre_capteur_temperature') }}°C

Cette structure vous permet de transformer en texte ce qui va se trouver entre double accolades, donc par exemple {{ states('sensor.votre_capteur_temperature') }}°C donnera la valeur (en texte) de states('sensor.votre_capteur_temperature') (c’est à dire l’état de l’entité, ou encore dans l’exemple la temperature de votre capteur) suivi du texte « °C ». Cette syntaxe permet ainsi de modifier un texte avec des valeurs de capteurs (comme par exemple dans l’info secondaire de la carte.
Ainsi si vous voulez afficher température et humidité sous la forme « 18°C / 55% » il vous faut taper la syntaxe:

{{ states('sensor.votre_capteur_temperature') }}°C / {{ states('sensor.votre_capteur_humidite') }}%

Ce qui est entre doubles accolades sera « calculé » par HA, le reste sera juste le texte que vous avez tapé.

Les structures conditionnelles:

Par exemple

{% if is_state(entity, 'on') %} 
orange
{% elif is_state(entity, 'off') %} 
red
{% else %}
grey
{% endif %}

Dans ce cas on va tester des blocs conditionnels (tout ce qui sera entre les {% et %}):

{% if condition1 %} 
message1 
{% else %} 
message2 
{% endif %}

Si la condition 1 est vraie, on affichera le texte qui suit les accolades (message1 ici) sinon le texte qui suit les accolades de {% else %} donc ici message2.
On n’affichera donc que le texte qui correspond aux conditions (message1 ou message2 dans l’exemple ci dessus). C’est cette syntaxe qui est utilisée pour choisir par exemple la couleur ou l’icone dans les templates.

La condition peut être faite de plusieurs façon équivalentes (entity correspond à l’entité qui a été liée dans la carte, c’est un raccourci offert par la carte mushroom…) il sera donc complètement equivalent d’écrire :

{% if is_state(entity, 'on') %} 
{% if is_state('sensor.entity_id', 'on') %} 
{% if states(entity) == 'on' %} 
{% if states('sensor.entity_id') == 'on' %} 

Astuce à utiliser sans retenue: vous pouvez tester vos syntaxes en allant les taper dans « outils de développement » / onglet « modèles »:

5: Variante horizontale

Petit bonus suivant vos préférences

Cette variante Horizontale se configure de la même façon avec les étapes 1 et 2 (et eventuellement 4) mais avec le look suivant:
image
Il faut avoir card_mod installé:

le code complet à utiliser à l'étape 1
type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: light.votre_lumière
        icon: mdi:sofa
        icon_color: |
          {% if is_state(entity, 'on') %}
            yelow
          {% else %}  
            grey
          {% endif %}
        primary: Salon Simplifié
        secondary: '{{ states(''sensor.votre_capteur_temperature'') }}°C'
        layout: horizontal
        tap_action:
          action: navigate
          navigation_path: /votre_url_salon
        double_tap_action:
          action: navigate
          navigation_path: /votre_url_salon
        hold_action:
          action: toggle
        badge_icon: |
          {% if is_state('binary_sensor.votre_capteur_mouvement', 'on') %}
            mdi:motion-sensor
          {% else %}  
            mdi:motion-sensor-off
          {% endif %}
        badge_color: |
          {% if is_state('binary_sensor.votre_capteur__mouvement', 'on') %}
            orange
          {% else %}  
            grey
          {% endif %}
        card_mod:
          style: |
            ha-card {
              margin-right: -12px;
              padding-right: 0px;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: media_player.votre_media_player
            icon: mdi:play-pause
            icon_color: |-
              {% if is_state(entity, 'playing') %} 
                green
              {% else %}
               grey
              {% endif %}
            tap_action:
              action: more-info
          - type: template
            entity: cover.votre_volet_salon
            hold_action:
              action: toggle
            tap_action:
              action: more-info
            icon: |-
              {% if is_state(entity, 'open') %} 
               mdi:window-shutter-open
              {% elif is_state(entity, 'closed') %} 
               mdi:window-shutter
              {% else %}
               mdi:window-shutter-alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'open') %} 
               grey
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
          - type: template
            entity: light.votre_lumiere
            icon: mdi:lightbulb
            hold_action:
              action: toggle
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               orange
              {% else %}
               grey
              {% endif %}
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 12px;
              margin-top: 0px;
              padding-bottom: 12px;
              margin-left: -12px;
              padding-left: 0px;
              padding-right: 8px;
            }

Note 1: à l’étape 2, les onglets de réglage 1 et 2 sont juste un cran plus bas, Le reste des réglages (étapes 2 et 4) est identique.

.
Note 2: la répartition des deux cartes de bases est de 50/50 par défaut
image
Si vous êtes génés par celà, en particulier quand les colones sont étroites, il suffit dans le code YAML de la carte de modifier:

  • margin-right: -12px dans la carte template, en mettant une valeur négative plus grande (par exemple -62px), vous autorisez le texte à déborder (de 50 px) sur la partie des chips.
  • margin-left: -12px dans la carte chips, en mettant une valeur plus grande (par exemple -62px), vous autorisez les chips à déborder (de 50px) sur la carte template.

N’hésitez pas à faire plusieurs essais de valeurs (-24px, -50px, -100px…) et a changer la taille de la fenêtre pour voir comment celà se comporte suivant les tailles des colones.
Le réglage actuel (-12px) assure l’absence de recouvrement, mais attention, si vous allez trop loin, il peut finir pas y avoir superposition du texte et des chips:
image

[mis à jour 30/05/2024]

4 « J'aime »

Salut, merci pour le code de cette carte, par contre pour moi c’est en mode yaml dès le départ avec les deux exemples, que ce soit avec card-mod ou pas, une idée ? Merci

L’éditeur visuel n’est pas pris en charge pour cette configuration:

  • Cannot read properties of undefined (reading ‹ bind ›)

Vous pouvez toujours modifier votre configuration en YAML.

Salut @Xek
Sans ton code et où tu l’as mis, c’est compliqué de deviner le souci

Salut, le code c’est celui de BBE du message juste au dessus du mien :wink:

Tu as essayé d’enregistrer la carte, sortir puis la modifier?

Chez moi ça marche comme ça.

Autre question, tu as bien installé mushroom et stack in ?

Oui oui mais rien a faire, pas d’éditeur visuel

J’ai bien

stack in card
vertical stack in card
card mod
mushroom

Probablement les entité génériques que j’ai mis qui posent problème.

Essaie en renommant toutes les entités dans le YAML…

Si ça ne marche pas j’essaierai de refaire une version du code qui marche, mais chez moi il me semblait que ça marchait…

[edit] chez moi j’ai eu un petit souci temporaire, mais apres un refresh de la page, ça marche…

c’est déjà fait et ça ne vient pas de là, :wink: j’ai mis toute mes entités, cela fonctionne bien mais impossible d’avoir l’interface graphique, du coup c’est pas simple de rajouter d’autre entité, bizarre

essaie un refresh de la page du navigateur, voire de vider le cache.