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

Ah , t’a trouvé une solution pour avoir une bordure en mode section ?

tu le place a quel niveau la carte vertical-stack-in-card ?

en tête de la section juste apres le grid.

Exemple:

Résumé
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: heading
        heading: Salon
        heading_style: subtitle
        tap_action:
          action: navigate
          navigation_path: /lovelace-smartphone/salon
        badges:
          - type: entity
            entity: sensor.echo_jeanne_temperature
          - type: entity
            show_state: false
            show_icon: true
            entity: binary_sensor.echo_salon_mouvement
            color: accent
        icon: mdi:sofa
      - type: heading
        icon: ""
        heading_style: subtitle
        badges:
          - type: entity
            icon: mdi:flower
            show_state: false
            show_icon: true
            entity: plant.alocatia
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Plante Marsupilami
                  content:
                    type: custom:flower-card
                    entity: plant.alocatia
                    show_bars:
                      - moisture
                      - temperature
                      - illuminance
                      - conductivity
                    battery_sensor: sensor.alocasia_zebrina_battery
                    display_type: compact
          - type: entity
            show_state: false
            show_icon: true
            icon: mdi:play-pause
            entity: media_player.echo_jeanne
            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: entity
            entity: cover.salon
            show_state: false
            show_icon: true
            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
          - type: entity
            show_state: false
            show_icon: true
            icon: mdi:lightbulb
            color: accent
            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
                        tap_action:
                          action: toggle
                      - 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
                        tap_action:
                          action: toggle
                      - 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
                        tap_action:
                          action: toggle
                      - 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
                        tap_action:
                          action: toggle
        heading: .

image
on récupère le code en editant la section en mode YAML:
image

et en vertical stackincard, aux bugs près, on garde l’UI

Et 0% de card mod…

Le même principe avec Header title + header subtitle + chip: moins compact, plus cliquable:
image
et toujours 0% cardmod… mais les chips « touchent »…
image

OK, merci.

d’accord, mais les chips sont coller a la bordure :stuck_out_tongue:

1 « J'aime »

Yep… un petit coup de card mod et c’est (re)parti… :rofl:

Sinon les cartes header (en mode title ou subtitle) c’est vraiment sympa pour faire des listes:
image

On peut faire plein de truc avec les petites entités liées (icone, etat, les deux) et c’est assez puissant.

Je pense que tu vas adorer si tu commences à jouer avec pour tes cartes « techniques »…

1 « J'aime »

Gros travail en cour:

  • réduire le code: transformer les pop-ups en streamline-cards…
  • essayer de supprimer le maximum de cartes custom pour les transformer en cartes basiques
  • éviter d’avoir trop de regressions… et là c’est pas gagné…
1 « J'aime »

Bonjour la communauté,
Petit soucis pour ma part concernant les chip verticaux, en effet seuls 2 sont affichés, et un grand espace … Comment puis-je remédié à cette problématique ? De même mon icon a coté de la température est un shutter, mais il apparait pas…
En PJ mon visuel avec le code.

Capture d’écran 2024-10-25 153516

Code :

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.lumiere_bureau
    icon: mdi:desktop-classic
    icon_color: |
      {% if is_state('light.lumiere_bureau', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
    primary: Bureau
    secondary: "{{ states(\"sensor.home_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_bureau_invertiert', 'on') %}
        mdi:window-shutter
      {% else %}  
        mdi:window-shutter-close
      {% endif %}
    badge_color: |
      {% if is_state('light.lumiere_bureau', 'on') %}
        orange
      {% else %}  
        grey
      {% endif %}
    fill_container: false
    multiline_secondary: false
    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.lumiere_bureau
        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_bureau_invertiert
                    name: Volet Bureau
                    show_position_control: false
                    show_tilt_position_control: false
                    show_buttons_control: false
        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: light
        entity: light.armoire
        use_light_color: true
    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;
    }

Merci à vous.

Déjà tu n’as pas la même entité pour le badge et sa couleur.

tu es sur de ne pas avoir une faute de frappe?

Tu n’as que deux chips de définis, donc c’est normal de n’en avoir que deux…
Tu n’as pas mis d’option alignement dans ta carte chips regarde si un mode te convient mieux qu’un autre dans l’UI…

Non non j’en ai bien 3 de chip, j’ai light.lumire_bureau / cover.salon / light.armoire … Quand je modifie :

    card_mod:
      style:
        .: |
          ha-card {
            width: 66px;
            margin-left: 80%;
            top: -170px;
            background: none;
            --chip-border-width: 0;
          }

notamment top: -170px avec une autre valeur, je peux voir le 3ème mais j’amais les trois d’un coup.

Salut à toi j’ai copié ton code dans mon ha pour moi il y a un autre souci que ta carte car sa fonctionne , pour l’icône du volet il faut changer l’attribut on par open et elle va apparaître par magie

1 « J'aime »

Si je comprends bien, un travail est en cours pour adapter la room-card aux sections ? Je passe tout mon dashboard téléphone dessus, et j’utilise ta room-card, alors le sujet m’intéresse beaucoup !

Il n’y a rien de vraiment en cours…

J’utilise mes room cards dans des sections depuis plusieurs mois. Ça marche.

En parallèle on est quelques uns a réfléchir a réduire la dépendance aux cartes custom. Et ma room cards utilise a la fois vertical stack et mushroom…

Donc il y a des tests en cour de certains pour trouver une alternative core. Pour l’instant on en est loin…

2 « J'aime »

Assez d’accord avoir toi @BBE c’est loin d’être gagné ou alors @piitaya nous prépare pour Noël une room card horizontale et vertical sur nos inspirations en natif :crazy_face::stuck_out_tongue_winking_eye:
J’aimerais aussi en natif une carte plus petite pour les volets je passe encore par la mushroom comme pour mes têtes thermostatiques.

3 « J'aime »

Hello,
Effectivement je suis aussi dans le même état d’esprit que vous, voulant optimiser et alléger mes dashboard.
J’ai l’impression d’avoir régressé par rapport à ma 1er carte visuellement, mais pour le moment cela me convient plutot bien.
image
Il manque quand même un petit background qui va bien pour détourer la carte, que j’avais avec stack-in-card

1 « J'aime »

Oui c’est des fourrage de carte ou groupement de carte qui manque parfois pour délimiter des zones
Joli travail

J’espère qu’on pourra un jour avoir l’option de mettre un background et un cadre sur une section…

Pour moi ce serait la fin des stack-in-card…

2 « J'aime »

Dans le cadre du mois Whath the heck: WTH I can't specify a background color per section? - Month of "What the heck?!" - Home Assistant Community

N’hésitez pas à voter…

Salut @BBE

C’est fait :wink: !!!

1 « J'aime »

c’est fais , a voter !!!
ca manque un background et bordure…

1 « J'aime »

Fait aussi
Mais j’adore le mec dit le faire en card_mod mais ne donne pas la solution pour autant pour tout ceux qui attende un potentiel dev !

1 « J'aime »

Pourquoi vouloir retirer card-mod ? Car c’est lourd ? C’est étonnant car le dev de custum-ui dit de privilégier card-mod…