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

[FabM]

Merci.
Comment on installe ta room-card modifiée?

J’ai inséré ton code dans le mien mais ça change pas la taille de la police:

type: custom:room-card
title: Etage
card_mod:
card_styles:
  '--ha-card-header-font-size': 17px;
  '--ha-card-header-color': grey;
  '--ha-card-header-font-family': Roboto, Noto, sans-serif;
rows:
  - entities:
      - entity: sensor.sensor_temp_enfants_temperature
        show_name: false
        show_icon: true
        icon:
          template:
            styles: |
              return 'color: grey';  
            icon: |
              return 'mdi:bed';
        tap_action:
          action: none
      - entity: sensor.sensor_temp_enfants_temperature
        show_icon: false
        show_name: false
        show_state: true
        format: precision1
        styles:
          template: >
            if (entity.state < 20) return 'color: rgb(52,152,219)'; if
            (entity.state >= 24) return 'color: red'; if (entity.state >= 22)
            return 'color: orange'; if (entity.state >= 20) return 'color:
            green';
        card_mod:
      - entity: sensor.sensor_temp_enfants_humidity
        show_icon: false
        show_name: false
        show_state: true
        format: precision1
        card_mod:
          style: |
            ha-card {
              color: Green !important;
            }
        styles:
          template: >
            if (entity.state < 40) return 'color: orange'; if (entity.state >=
            70) return 'color: red'; if (entity.state >= 55) return 'color:
            orange'; if (entity.state >= 40) return 'color: green';
      - entity: cover.volet_roulant_enfant
        show_name: false
        state_color: true
        show_icon: true
        tap_action:
          action: toggle
info_entities:
  - entity: cover.volets_etage
    show_name: false
    state_color: true
    show_icon: true
    tap_action:
      action: toggle

[BBE]

Heu tu m’a perdu la.

En fait ton code n’a rien a voir avec le mien…

Ouvre un sujet specifique plutot…

[WarC0zes]

Bonjour @FabM,
ton code est pour la carte room-card, qui n’a rien avoir avec la carte Mushroom.
Ton message est hors-sujet, ouvre un nouveau sujet pour t’aider dans t’on problème.

[FabM]

Ah sorry, je pensais que tu avais forké la contribution room-card:
marcokreeft87/room-card: Show multiple entity states, attributes and icons in a single card in Home Assistant’s Lovelace UI (github.com)

[FabM]

Je suis en train de créer ma première card room

Une question: pourquoi la couleur de fond des mes cards ne reprend pas celle par défaut du thème?
Seule la dernière custom:mushroom-chips-card le prend bien.

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - type: custom:mushroom-template-card
        icon_color: grey
        primary: RDC
        layout: horizontal
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: plant.alocatia
            icon: mdi:flower
          - type: template
            entity: cover.volets_rdc
            state_color: true
            tap_action:
              action: toggle
            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') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        alignment: end
        card_mod:
          style:
            style: |
              ha-card {
                padding-top: 8px;
                padding-bottom: 8px;
                margin-left: -24px;
                padding-right: 8px;
              }
  - type: custom:mushroom-template-card
    icon: mdi:sofa
    icon_color: grey
    secondary: '{{ states(''sensor.sensor_temp_salon_temperature'') }}°C'
    layout: horizontal
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: cover.volet_roulant_baie
        state_color: true
        tap_action:
          action: toggle
        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') %} 
           green
          {% elif is_state(entity, 'closed') %} 
           grey
          {% else %}
           orange
          {% endif %}
      - type: template
        entity: light.plug_lampe_biblio_switch_1
        icon: mdi:lightbulb
        tap_action:
          action: toggle
        state_color: true
    alignment: end
    card_mod:
      style:
        style: |
          ha-card {
            padding-top: 0px;
            margin-top: 0px;
            padding-bottom: 8px;
            padding-left: 0px;
            padding-right: 8px;
          }

[BBE]

Dans le lien indiqué plus haut, le backgound de la carte mushroom se change comme ça:

card_mod:
  style: |
    ha-card {
      background-color: #002f7a;
    }

Est-ce la même valeur que dans ton thème?

[FabM]

Merci, j’avais vu ce code mais ça n’avait pas marché partout. Je vais réessayer ce soir.
Ce que je comprends pas c’est pourquoi quand je créé une card toute simple elle prend par défaut la couleur de mon thème et ici seule la dernière custom:mushroom-chips-card a le bon comportement mais pas les autres? Par exemple la custom:mushroom-template-card du RDC a un fond noir, bizarre.

[Jeffodilo]

J’imagine que 2 fois style ne doit pas bien fonctionner !

@FabM

card_mod:
          style:
            style: |
              ha-card {

[FabM]

J’avais pas vu Mais si ça marche quand même

[BBE]

Empiler deux custom:vertical-stack-in-card c’est un peu curieux aussi…

[FabM]

J’avoue que je sais pas forcément bien m’y prendre.
Je cherche à faire une room-card par niveau (RDC, étage) avec en 1ere ligne le nom du niveau et ses commandes associées à droite (on/off toutes les ouvertures, on/off toutes les lumières) puis juste en dessous une ligne par pièce avec la température et les commandes alignées à droite dans une sous-ligne.

Quelle serait le meilleur design pour faire ça?

[BBE]

Ce que tu fais pourais marcher, mais essaie avec une seule custom vertical stack in puis un empilement de horizontal stack par ligne avec dans chaque horizontal stack un mushroom template card et une ligne de chips par niveau…

donc une structure type:

type: custom:vertical-stack-in-card
# pour unifier toute la suite dans une seule grosse carte en mode pile verticale
cards:
  - type: horizontal-stack
    #carte horizontale du nom du niveau
    cards: 
    - type: custom:mushroom-template-card
      primary: RDC
      #code à completer info RDC, icone etc...
    - type: custom:mushroom-chips-card
      chips:
        - type: template
          #code à completer on off tous volets
        - type: template
          #code à completer on off toutes lumières

  - type: horizontal-stack
    # carte horizontale 1ere piece
    cards: 
    - type: custom:mushroom-template-card
      entity: group.lumieres_ch1
      icon: mdi:bed
      primary: chambre 1
      secondary: '{{ states(''sensor.chambre1_temperature'') }}°C'
      #code à completer info chambre 1
    - type: custom:mushroom-chips-card
      chips:
      #code à completer controles chambre 1
        - type: template
          #code à completer on off tous volets
        - type: template
          #code à completer on off toutes lumières

  - type: horizontal-stack
    # carte horizontale 2eme piece
    cards: 
    - type: custom:mushroom-template-card
      entity: group.lumieres_ch2
      icon: mdi:bed
      primary: chambre 2
      secondary: '{{ states(''sensor.chambre2_temperature'') }}°C'
      #code à completer info chambre 2
    - type: custom:mushroom-chips-card
      chips:
      #code à completer contrôles chips chambre 2
        - type: template
          #code à completer on off tous volets
        - type: template
          #code à completer on off toutes lumières

Commence simplement (avec l’interface graphique par exemple) tu ajouteras card mod seulement à la fin dans chaque carte chip par exemple…

Sinon la version plus simple. Tu utilise les sections, avec une section par niveau et une room card par ligne dans chaque section…

[FabM]

Bonjour,

j’ai bien avancé sur ma room-card. J’ai besoin encore de votre aide svp pour aligner tout à gauche. Comment faire?

J’ai lu qu’on pouvait jouer avec flex mais je n’y arrive pas.
card-mod:
style: |
:host {
flex: xxxx !important ;
}

Voici mon code:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Etage
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: 66px;
              --card-primary-font-size: 15px;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volets_etage
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            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') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:bed
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              width: max-content;
              padding-top: 12px;
              padding-bottom: 0px;
            }
        chips:
          - type: entity
            entity: sensor.sensor_temp_enfants_temperature
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_enfants_temperature')|int < 20 %} rgb(52,152,219); {% endif %}
                    {% if states('sensor.sensor_temp_enfants_temperature')|int >= 24 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_temperature')|int >= 22 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_temperature')|int >= 20 %} green; {% endif %}
                }
            tap_action:
              action: more-info
          - type: entity
            entity: sensor.sensor_temp_enfants_humidity
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_enfants_humidity')|int < 40 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_humidity')|int >= 70 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_humidity')|int >= 55 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_humidity')|int >= 40 %} green; {% endif %}
                }
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volet_roulant_enfant
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            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') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:desk
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              width: max-content;
              padding-top: 12px;
              padding-bottom: 0px;
            }
        chips:
          - type: entity
            entity: sensor.sensor_temp_bureau_temperature
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_bureau_temperature')|int < 20 %} rgb(52,152,219); {% endif %}
                    {% if states('sensor.sensor_temp_bureau_temperature')|int >= 24 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_temperature')|int >= 22 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_temperature')|int >= 20 %} green; {% endif %}
                }
            tap_action:
              action: more-info
          - type: entity
            entity: sensor.sensor_temp_bureau_humidity
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_bureau_humidity')|int < 40 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_humidity')|int >= 70 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_humidity')|int >= 55 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_humidity')|int >= 40 %} green; {% endif %}
                }
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volet_roulant_bureau_nord
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            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') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
          - type: template
            entity: cover.volet_roulant_bureau_est
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            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') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:stairs
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              width: max-content;
              padding-top: 12px;
              padding-bottom: 0px;
            }
        chips:
          - type: entity
            entity: sensor.sensor_temp_tremie_temperature
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_tremie_temperature')|int < 20 %} rgb(52,152,219); {% endif %}
                    {% if states('sensor.sensor_temp_tremie_temperature')|int >= 24 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_temperature')|int >= 22 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_temperature')|int >= 20 %} green; {% endif %}
                }
            tap_action:
              action: more-info
          - type: entity
            entity: sensor.sensor_temp_tremie_humidity
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_tremie_humidity')|int < 40 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_humidity')|int >= 70 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_humidity')|int >= 55 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_humidity')|int >= 40 %} green; {% endif %}
                }
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        chips: null
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:bathtub-outline
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volet_roulant_sdb
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            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') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }

[BBE]

Soit dans l’interface graphique, soit dans le code, tu as des options pour les chips sur l’alignement (à droite, à gauche, centré, justifié).

Dans le code, tu peux ajouter alignment: end dans chaque carte mushroom chip pour les aligner à droite…

D’ailleurs tu as la ligne sur la moitié de tes cartes…

Le but de mushroom c’est de garder l’interface graphique… au bout d’un moment si c’est pour tout faire en Yaml, il faut se poser la question de passer à d’autres cartes avec plus de possibilités (genre button card par exemple…)

[denisb88]

Merci pour cette carte. Je voudrais faire changer la couleur de l’icône de la pièce en fonction de la température mais je n’y arrive pas avec plus de 2 valeurs, est-ce possible ?
J’ai mis cela

{% if states(entity)|float <20 %}
  blue
{% else %}
  red
{% endif %}

Mais c’est trop restrictif, je voudrais 4 ou 5 seuils. J’ai essayé avec else if mais je n’y arrive pas. C’est possible au moins ?

[denisb88]

je viens de trouver la réponse juste au-dessus. Désolé

{% elif states(entity)|float <20 %}

[BBE]

message #12…

A quoi ça sert que Ducros se décarcasse…

[FabM]

C’est pas si simple car la horizontal stack divise chaque card avec la même largeur donc si j’aligne à gauche ma card du milieu ne sera pas collée à mes icônes:

[BBE]

Tu veux aligner quoi et où?

Je parle un peu de ça dans le 1er post:

et dans le message #12:

Peux être que vu la complexité de ta carte, tu aurais intérêt à ouvrir un sujet spécifique pour avoir l’aide des spécialistes de card mod…

[FabM]

Je veux aligner comme ça: