[Carte] Mise en forme de room-card avec mushroom et tutos

Je trouve cette room card très chouette ! Est-ce que tu peux partager le code STP ?
Merci !!!

Heu… as tu lu le premier message ??

Tous les codes sont partagés depuis le début…

Je crois avoir bien lu l’ensemble du post très interressant … Mais je n’ai pas trouvé le code pour la carte présentée ici :

Bonsoir à tous

je travaille en ce moment sur cette carte et je veux changer les couleurs des textes

Et si possible pouvoir jouer sur les couleurs “lumière :” indépendamment de Circulation eau”

si off j’ai ceci

si on

image

Alors que mon code pour les couleurs des textes primary et secondary n’est pas cela.

La couleur du primary prend le dessus

mon code

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.lumiere_sdb_bas
    icon: mdi:bathtub
    tap_action:
      action: none
    badge_icon: |
      {% if is_state('binary_sensor.capteur_mvt_sdb_bas', 'on') %}
        mdi:motion-sensor
      {% else %}
        mdi:motion-sensor-off
      {% endif %}
    badge_color: |
      {% if is_state('binary_sensor.capteur_mvt_sdb_bas', 'on') %}
        orange
      {% else %}
        green
      {% endif %}
    primary: |
      Salle de bain : {{ states('sensor.capteur_tem_sdb_bas') }}°C
    secondary: >
      {% set on_lights = [] %} {% if is_state('light.lumiere_sdb_bas', 'on') %}
        {% set on_lights = on_lights + ['On'] %}
      {% endif %}

      {% set on_sockets = [] %} {% if is_state('switch.prise_pompe_eau', 'on')
      %}
        {% set on_sockets = on_sockets + ['On'] %}

      {% endif %}

      Lumière             : {{ 'On' if is_state('light.lumiere_sdb_bas', 'on')
      else 'off' }} {{ '\n' }}Circulation eau : {{ 'on' if
      is_state('switch.prise_pompe_eau', 'on') else 'off' }}  
    multiline_secondary: true
    color: |
      {% if is_state(entity, 'on') %}
        #F80A0A
      {% else %}
        #03A9F4
      {% endif %}
    features_position: bottom
    card_mod:
      style: |
        ha-card {
          --primary-text-color: {{ 'orange' if is_state('light.lumiere_sdb_bas', 'on') else 'green' }};
          --secondary-text-color: {{ 'red' if is_state('light.lampe_cuisine', 'on') else 'blue' }};
        }
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          display: flex;
          justify-content: flex-end;  # aligne les chips à droite
          padding-right: 1px;        # espace entre les chips et le bord droit
          padding-top: 1px;
          padding-bottom: 5px;
          background: blue;
          box-shadow: red;
        }
    mushroom-chip$: |
      :host {
        --chip-height: 148px;         /* Hauteur du chip */
        --chip-icon-size: 136px;      /* Taille de l’icône */
        --chip-font-size: 116px;      /* Taille du texte si présent */
      }
    chips:
      - type: template
        entity: light.lumiere_sdb_bas
        icon: mdi:lightbulb
        icon_color: |
          {% if is_state(entity, 'on') %} orange {% else %} green {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumière SDB
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: light.lumiere_sdb_bas
                    name: Salle de bain
                    icon: mdi:light-recessed
                    collapsible_controls: true
      - type: template
        entity: switch.prise_pompe_eau
        icon: >
          {% if is_state(entity, 'on') %} mdi:water-pump {% elif
          is_state(entity, 'off') %} mdi:water-pump-off {% else %} mdi:water-pum
          {% endif %}
        icon_color: >
          {% if is_state(entity, 'off') %} green {% elif is_state(entity, 'on')
          %} orange {% else %} red {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Circulation eau chaude
              content:
                type: vertical-stack
                cards:
                  - type: custom:mushroom-light-card
                    entity: switch.prise_pompe_eau
                    name: Circulation eau chaude
                    show_position_control: true
                    show_tilt_position_control: false
                    show_buttons_control: true
card_mod:
  style: |
    ha-card {
      margin-left: auto;
      margin-right: auto;
    }
    ha-card {
      box-shadow: inset -4px -4px 6px #FFFCF7, inset 4px 4px 6px #F8DEB4;
      border-radius: 12px;
      background-color: #;  # Assure un fond visible
      overflow: visible !important;
      padding: 5px;
    }

en attendant votre retour. Merci

Bonjour,
avec la nouvelle mise à jour de mushroom, la carte template à changer et n’utilise plus les variables du thème mushroom. Ça utilise les variables de la carte tuile.

Utilise ça pour changer la couleur primaire et secondaire, exemple :

card_mod:
  style:
    ha-tile-info$: |
      .primary {
        color: orange !important;
      }         
      .secondary {
        color: darkgrey !important;
      }

Bonjour à tous.

Avec la nouvelle version de mushroom (V5.0), on a désormais la possibilité d’ajouter des features à la carte mushroom template.

Ainsi on peut ajouter par exemple les features de la carte area directement dans une carte mushroom:

Même si les contrôles de la carte Area sont assez “brutaux” car on toggle toutes les lumières ou tous les volets à la fois, ce peut être suffisant selon les cas…

On peut également utiliser le projet custom-card-features pour ajouter des features sur mesures à la carte mushroom template:

On se retrouve alors avec une seule carte mushroom template, sans avoir besoin d’utiliser stack in card ou card mod.

le code
type: custom:mushroom-template-card
entity: group.lumieres_salon
icon: mdi:sofa
primary: Salon
secondary: |-
  Alexa: {{ states('sensor.echo_jeanne_temperature') }}°C
  Marsu: {{ states('sensor.alocatia_temperature_2') }}°C
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 %}
multiline_secondary: true
color: |
  {% if is_state(entity, 'on') %}
    #03A9F4
  {% else %}  
    grey
  {% endif %}
features_position: bottom
area: salon
features:
  - type: custom:service-call
    entries:
      - type: button
        entity_id: group.lumieres_salon
        hold_action:
          action: toggle
          target:
            entity_id: group.lumieres_salon
          data: {}
        haptics: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Lumières salon
              content:
                type: custom:streamline-card
                template: pop-up-light-salon
                variables: {}
        icon: mdi:lightbulb
        color: accent
        autofill_entity_id: true
        styles: |-
          :host {
                --icon-color: grey;
                {% if is_state("light.0x84ba20fffe4b2581", "on") %}
                --icon-color: orange;
                {% endif %}
          }
      - type: button
        entity_id: cover.salon
        icon: >-
          {{ iif(is_state("cover.salon", "open"), "mdi:window-shutter-open",
          "mdi:window-shutter") }}
        styles: |-
          :host {
                --icon-color: grey;
                {% if is_state("cover.salon", "open") %}
                --icon-color: orange;
                {% endif %}
          }
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Volets du salon
              content:
                type: vertical-stack
                cards:
                  - type: tile
                    features_position: bottom
                    vertical: false
                    entity: cover.volet_du_salon_tv
                    name: Volet TV
                    color: accent
                    features:
                      - type: cover-open-close
                  - type: tile
                    features_position: bottom
                    vertical: false
                    entity: cover.volet_du_salon_apero
                    name: Volet Apéro
                    color: accent
                    features:
                      - type: cover-open-close
        hold_action:
          action: toggle
          target:
            entity_id: cover.salon
          data: {}
      - type: button
        entity_id: device_tracker.echo_jeanne
        icon: mdi:play-pause
        styles: |-
          :host {
                --icon-color: grey;
                {% if is_state("media_player.echo_jeanne", "playing") %}
                --icon-color: blue;
                {% endif %}
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Echo salon
              content:
                type: custom:streamline-card
                template: pop-up-alexa
                variables:
                  media_player_entity_name: echo_jeanne
      - type: button
        entity_id: plant.alocatia
        icon: mdi:information
        styles: |-
          :host {
                --icon-color: grey;
                {% if is_state("plant.alocatia", "alert") %}
                --icon-color: orange;
                {% endif %}
        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
                  - dli
                battery_sensor: sensor.alocasia_zebrina_battery
                display_type: compact
    styles: ""

Enfin comme discuté avec Piitaya dans cette discussion, il semble qu’il nous prépare un moyen plus simple de faire des features customizables…

J’attend cette nouveauté pour refaire mon dashboard et éventuellement refaire ce tuto qui n’aura plus vraiment de raison d’être…

Salut,
mais avec custom-card-features, tu n’utilises pas card_mod, car c’est intégré directement dans cette carte.
Ça revient au même, car plus lourd à charger.

c’est comme la carte bubble-card. Du moment que tu joue avec le CSS, c’est plus lourd :wink:

1 « J'aime »

Exactement !

C’est pour ça que j’attend de voir ce que va sortir Piitaya concernant les features… J’espère un truc simple et efficace…

1 « J'aime »

Bonjour

Merci @WarC0zes cela fonctionne :+1:

Oui des éléments dans la 2025.10 sur la tuile aussi

On s’approche d’une belle room card simplifiée :zany_face:

Je pense que c’est passé un peu inaperçu car ce n’est pas l’éditeur de la carte, mais il y a un paramètre exclude_entities pour la carte area qui permet de contounrer cela. C’est pas fou mais c’est déjà ça.

Tout à fait.

Je trouve que ça manque quand même un peu de finesse, on pourrait par exemple avoir dans certains cas (si l’utilisateur le choisi) le more info a la place du toggle. Ca permet d’avoir un pop-up simpliste qui permet de faire toggle du groupe ou toggle individuel. Pratique par exemple pour les lampes et les volets d’une piece…

Je fais ça avec une distinction appui long appui court sur mes boutons:

  • appui court => pop up pour un contrôle fin (allumer juste la petite lampe du salon)
  • appui long => toggle de toutes les lampes du salon (en pratique surtout utilisé pour tout éteindre)

Idem pour les volets…

Mais clairement le fonctionnement “toggle” est largement suffisant pour les pieces “simples” (un volet, une lumière) en filtrant les entités qu’on veut contrôler ainsi…

J’ai pas regardé encore la 2025.10, il y a des choses prometteuses ?

J’ai pas regardé en détail, c’est issue d’un échange avec le dev mais oui il va y avoir des fonctionnalités en plus dans la 2025.10 normalement

Et oui la carte native pièce n’est pas ouf et ils en sont bien conscient.

Ils ont posé la base et ça va s’améliorer c’est certain

Je viens de faire un PR pour selectionner les entités a exclure.
Pas 100% satisfait du fait que ce param peut s’appliquer a tout et pas seulement les features. Mais bon c’est déjà ça pour ceux qui ne vont pas trifouiller le yaml des cartes

Oui, il a cette PR pour config le nom de la tuile qui fait doublon avec celle que j’avais commencé, ainsi que celle-ci pour aider à configurer l’info secondaire qui devrait aboutir.

L’ajout de variable pour la carte tuile dans le theme est également en bonne voix. Celle-ci y sera à priori.

ça ne rajoute pas de la fonction, mais ça permet de tuner un peu plus facilement la carte.

@jerome6994 tu as quelques indiscrétions ? :slight_smile:

Edit:
Je viens de découvrir que l’on peut déjà exclure par l’interface graphique des entités d’une carte area dans le dashbord area dès lors que l’on n’a pas pris le contrôle sur le dashbord

SI on prend le contrôle, les entités exclues sont bien dans la conf de la carte concernée.