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

J’ai juste changer l’entité timer. Mon timer est sur activé, ca clignote bien.
popup2

timer off


popup3

je suis en v4.0.4
image

1 « J'aime »

Je suis en même version de mushroom 4.0.4

Je ne comprends pas ce qui coince, par rapport à chez toi.

Bon, j’ai trouvé la bêtise ! :joy:

J’ai inversé le timer du garage et celui du portail dans la carte ! quel boulet… je te jure…

Merci pour votre aide @WarC0zes et @Tochy

2 « J'aime »

Je ne ferai plus confiance à tes schémas à compter d’aujourd’hui vu les inversions que tu es capable de faire :joy:

2 « J'aime »

J’ai plus de facilité à lire un schéma que des lignes de code (heureusement).
Dans le code, il y a toujours un truc que je n’ai pas vu…ça existe IA pour les yeux ? (à part le labrador :rofl:)

1 « J'aime »

Bonjour à tous

J’ai un petit souci avec cette carte, je n’arrive pas corriger ce défaut :
image

Code
type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: input_boolean.bal_courrier
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:mailbox
          {% elif is_state(entity, 'off') %}  
            mdi:mailbox-outline       
          {% else %}  
            mdi:alert
          {% endif %}
        icon_color: |
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           green
          {% else %}
           grey
          {% endif %} 
        primary: Courrier
        secondary: |-
          {% if is_state(entity, 'on') %} 
           Vous avez reçu du courrier , {{ states('counter.compteur_bal') }} lettre(s)
          {% elif is_state(entity, 'off') %}
          {% endif %} 
        tap_action:
          action: none
        double_tap_action:
          action: none
        hold_action:
          action: none
        badge_icon: |
          {% if is_state('counter.compteur_bal', '0') %}
          {% elif (states('counter.compteur_bal')|float(0) >0 ) %}
           mdi:email-newsletter 
          {% endif %}
        badge_color: >
          {% if is_state('counter.compteur_bal', '0') %}
           green
          {% elif (states('counter.compteur_bal')|float(0) >0 )
          %}                
           orange
          {% else %}  
           grey
          {% endif %}
        fill_container: false
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              margin-right: -240px;
              padding-right: 0px;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: counter.compteur_bal
            icon: mdi:email-newsletter
          - type: template
            entity: binary_sensor.shelly_uni_bal_channel_1_input
            icon: |
              {% if is_state(entity, 'on') %}
                mdi:door-open
              {% elif is_state(entity, 'off') %}  
                mdi:door-closed-lock      
              {% else %}  
                mdi:alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               red
              {% elif is_state(entity, 'off') %} 
               green
              {% else %}
               grey
              {% endif %}
            tap_action:
              action: none
            hold_action:
              action: more-info
          - type: template
            entity: binary_sensor.shelly_uni_bal_channel_2_input
            icon: |
              {% if is_state(entity, 'on') %}
                mdi:door-open
              {% elif is_state(entity, 'off') %}  
                mdi:door-closed-lock      
              {% else %}  
                mdi:alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               red
              {% elif is_state(entity, 'off') %} 
               blue
              {% else %}
               grey
              {% endif %}
            tap_action:
              action: none
            hold_action:
              action: more-info
        alignment: end
        card_mod:
          style: |
            ha-card {
             padding-top: 10px;
             margin-top: 0px;
             padding-bottom: 0px;
             padding-left: 0px;
             padding-right: 10px;
                 }          

Merci pour votre aide

Salut,

il te faut un border: none; dans card_mod de la premieère carte.

code corrigé:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: input_boolean.bal_courrier
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:mailbox
          {% elif is_state(entity, 'off') %}  
            mdi:mailbox-outline       
          {% else %}  
            mdi:alert
          {% endif %}
        icon_color: |
          {% if is_state(entity, 'on') %} 
           orange
          {% elif is_state(entity, 'off') %} 
           green
          {% else %}
           grey
          {% endif %} 
        primary: Courrier
        secondary: |-
          {% if is_state(entity, 'on') %} 
           Vous avez reçu du courrier , {{ states('counter.compteur_bal') }} lettre(s)
          {% elif is_state(entity, 'off') %}
          {% endif %} 
        tap_action:
          action: none
        double_tap_action:
          action: none
        hold_action:
          action: none
        badge_icon: |
          {% if is_state('counter.compteur_bal', '0') %}
          {% elif (states('counter.compteur_bal')|float(0) >0 ) %}
           mdi:email-newsletter 
          {% endif %}
        badge_color: >
          {% if is_state('counter.compteur_bal', '0') %}
           green
          {% elif (states('counter.compteur_bal')|float(0) >0 )
          %}                
           orange
          {% else %}  
           grey
          {% endif %}
        fill_container: false
        layout: horizontal
        multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              margin-right: -240px;
              padding-right: 0px;
              border: none;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: counter.compteur_bal
            icon: mdi:email-newsletter
          - type: template
            entity: binary_sensor.shelly_uni_bal_channel_1_input
            icon: |
              {% if is_state(entity, 'on') %}
                mdi:door-open
              {% elif is_state(entity, 'off') %}  
                mdi:door-closed-lock      
              {% else %}  
                mdi:alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               red
              {% elif is_state(entity, 'off') %} 
               green
              {% else %}
               grey
              {% endif %}
            tap_action:
              action: none
            hold_action:
              action: more-info
          - type: template
            entity: binary_sensor.shelly_uni_bal_channel_2_input
            icon: |
              {% if is_state(entity, 'on') %}
                mdi:door-open
              {% elif is_state(entity, 'off') %}  
                mdi:door-closed-lock      
              {% else %}  
                mdi:alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %} 
               red
              {% elif is_state(entity, 'off') %} 
               blue
              {% else %}
               grey
              {% endif %}
            tap_action:
              action: none
            hold_action:
              action: more-info
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              margin-top: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              padding-right: 10px;
            }  

Merci, c’était bien cela.
Je pouvais essayer longtemps…1 coup a gauche, 1 coup a droite :woozy_face:

@pascal_ha
Moi c’est surtout le horizontal-stack que je ne comprends pas.
Dans ton code le vertical-stack-in-card qui sert justement à mélanger plusieurs cartes (au moins 2), tu n’en mets qu’une (la horizontal stack).

Normalement tu pars de ça :

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:dice-1
      - type: template
        icon: mdi:dice-2
      - type: template
        icon: mdi:dice-3
    alignment: end

image

Et avec ajout de card-mod :


type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Hello, {{user}}
    secondary: How are you?
    icon: mdi:home
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:dice-1
      - type: template
        icon: mdi:dice-2
      - type: template
        icon: mdi:dice-3
    alignment: end
    card_mod:
      style: |
        ha-card {
          margin-top: -46px;
          margin-left: 200px;
          padding-bottom: 8px;
          padding-right: 8px;
        }

image

1 « J'aime »

De base, je suis parti de cette carte :

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.bal_courrier
    icon: |
      {% if is_state(entity, 'on') %}
        mdi:mailbox
      {% elif is_state(entity, 'off') %}  
        mdi:mailbox-outline       
      {% else %}  
        mdi:alert
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %} 
       orange
      {% elif is_state(entity, 'off') %} 
       green
      {% else %}
       grey
      {% endif %}    
    primary: Courrier
    secondary: |-
      {% if is_state(entity, 'on') %} 
       Vous avez reçu du courrier , {{ states('counter.compteur_bal') }} lettre(s)
      {% elif is_state(entity, 'off') %}
      {% endif %}          
    layout: horizontal
    tap_action:
      action: none
    badge_icon: |
      {% if is_state('counter.compteur_bal', '0') %}
      {% elif (states('counter.compteur_bal')|float(0) >0 ) %}
       mdi:email-newsletter 
      {% endif %}
    badge_color: |
      {% if is_state('counter.compteur_bal', '0') %}
       green
      {% elif (states('counter.compteur_bal')|float(0) >0 ) %}                
       orange
      {% else %}  
       grey
      {% endif %}
    multiline_secondary: true
    card_mod:
      style: null
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: counter.compteur_bal
        icon: mdi:email-newsletter
      - type: template
        entity: binary_sensor.shelly_uni_bal_channel_1_input
        icon: |
          {% if is_state(entity, 'on') %}
            mdi:door-open
          {% elif is_state(entity, 'off') %}  
            mdi:door-closed-lock      
          {% else %}  
            mdi:alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           red
          {% elif is_state(entity, 'off') %} 
           green
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: more-info
      - type: template
        entity: binary_sensor.shelly_uni_bal_channel_2_input
        icon: |
          {% if is_state(entity, 'on') %}
            mdi:door-open
          {% elif is_state(entity, 'off') %}  
            mdi:door-closed-lock      
          {% else %}  
            mdi:alert
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %} 
           red
          {% elif is_state(entity, 'off') %} 
           blue
          {% else %}
           grey
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: more-info
    alignment: end
    card_mod:
      style: |
        ha-card {
          padding-top: 0px;
          margin-top: -8px;
          padding-bottom: 8px;
          padding-left: 8px;
          padding-right: 8px;
        }

Que j’aie transformé, certainement pas comme il faut pour n’avoir qu’une ligne.
Si tu as un meilleur code pour arriver au même résultat, je suis preneur.
Comme vous avez pu le voir, je galère un peu, beaucoup, a la folie… :joy:

Édit : Je viens de reprendre ma carte d’origine en me basant sur ton modèle, et ce coup-ci c’est bon. Je ne sais pas pourquoi ça ne voulait pas.

1 « J'aime »

Du coup ta base de départ était bonne. Tu n’avais plus qu’à jouer avec le margin-top et margin-left dans la partie cardmod comme dans l’exemple que je t’ai mis.

1 « J'aime »

Juste une petite question, je trouve que les cartes mushroom ont plus de mal à s’afficher que celle avec button-card.
Avez-vous constaté ce phénomène ?

Je ne saurais pas te dire je n’utilise pas les button_card.

Oui, c’est à cause de card_mod :sweat_smile:
button-card est moins lourd , que mushroom avec card_mod.

1 « J'aime »

Je vais reproduire mes cartes, après, je verrais si c’est trop pénalisant.

J’utilise ce code pour le badge_icone

badge_icon: |
  {% if is_state('counter.compteur_bal', '0') %}
  {% elif (states('counter.compteur_bal')|float(0) >0 ) %}                
   mdi:email-newsletter
  {% else %}  
    mdi:alert
  {% endif %}

Je voudrais mettre une deuxième condition sur la ligne elif.
En clair : Si condition un et condition deux réunis, alors afficher icône.
J’ai essayé avec {% elif (states('counter.compteur_bal')|float(0) >0 ) && (states('input_boolean.bal_courrier'), ('on')) %} mais sa le fait pas.

{% elif (states(‹ counter.compteur_bal ›)|float(0) >0 ) && (is_state(‹ input_boolean.bal_courrier ›), (‹ on ›)) %}

Par contre dans ton code y’a un soucis

badge_icon: |
  {% if is_state('counter.compteur_bal', '0') %}
  {% elif (states('counter.compteur_bal')|float(0) >0 ) %}                
   mdi:email-newsletter
  {% else %}  
    mdi:alert
  {% endif %}

La première ligne ne sert a rien, du coups tu peux faire

badge_icon: |
  {% if (states('counter.compteur_bal')|float(0) >0 ) %}                
   mdi:email-newsletter
  {% else %}  
    mdi:alert
  {% endif %}

ça ne fonctionne pas. J’ai remplacé les <> par des ’ mais pas mieux

{% elif (states('counter.compteur_bal')|float(0) >0 ) && (is_state('input_boolean.bal_courrier', 'on') %}

Et comme ça

Non toujours pas, j’ai essayé avec une parenthèse de plus après 'on')) mais pas mieux

J’ai trouvé !!, c’est and et pas &&

  {% elif (states('counter.compteur_bal')|float(0) >0 ) and
  (is_state('input_boolean.bal_courrier', 'on')) %}               
    mdi:email-newsletter

Effectivement j’écris toujours and et or mais comme tu avais mis && je pensais que c’était valable aussi