Custom carte cover de mushroom / template

La carte mushroom template, mais tu perds toutes les autres options spécifiques aux volets.
Et je n’ai pas connaissance d’autre chose de tout fait pour ce cas là

Et sur ma carte tu as une solution pour ne faire apparaître que le pourcentage d’ouverture? Sans ouvert.

Par défaut custom:mushroom-cover-card supporte primary_info et secondary_info mais elle est incluse dans ton autre carte qui regroupe plein d’autres choses (température/humidité/lumière). C’est là qu’il faut chercher à avoir un peu plus d’espace pour afficher le tout

ok compliqué les volets pour faire ce que je veux.

sinon tu sais mettre l’icone en jaune lorsqu’une lumière est allumé, et mettre l’etat des lumières en secondary (allumé ou eteins) stp
Screenshot 2023-03-26 15.11.41

type: custom:mushroom-template-card
primary: ''
icon: mdi:lightbulb-group
icon_color: ''
entity: light.maison
badge_icon: name
badge_color: transparent
layout: vertical
tap_action:
  action: more-info
secondary: ''
card_mod:
  style: |
    mushroom-badge-icon:after {
      content: "{{ expand(states.light.maison) | selectattr( 'state', 'eq', 'on') | list | count }}";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-blue));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 0.8em; 
    }

C’est plus vraiment le sujet d’origine mais c’est faisable avec la carte template, donc ça tombe bien

ok merci a toi j’avais vu cette page mais je comprends pas tout mais merci a toi.

Il faut se lancer à un moment …
Pour la couleur, tu peux faire ça

icon_color: >-
  {% if ( expand(states.light.maison)| selectattr( 'state', 'eq', 'on') | list | count
  ) >= 1 %}
    yellow
  {% else %}
    disabled
  {% endif %}

Tu feras pareil pour le secondary (même si à mon avis tu t’embêtes, tu as déjà le compteur du n d’allumées)

j’ai un soucis sur une carte template je n’arrive pas a faire apparaitre la Temperature en info secondaire dans secondary: je dois utiliser une formule ?

ah, mais sans savoir de quelle carte on parle, et de ce que tu veux afficher, c’est difficile (et peut-être même pas le bon sujet ici)

je fait un petit up… @jerome6994 tu fais comment pour mettre l’icone badge en bas a gauche?
voici le code de ma carte

type: custom:mushroom-template-card
primary: Baie Droite
multiline_secondary: true
secondary: |
  {% set sec = as_timestamp(now()) -
  as_timestamp(states.binary_sensor.door_window_sensor_baie_dte.last_changed)
  %}
  {%set hr = (sec / 3600) | int %}
  {%set min = sec / 60 - hr * 60 %}
  {% if hr > 1 %}
    il y a {{"%d" % (hr)}} heures
  {% elif hr > 0 and min > 2 and min <30 %}
    il y a {{"%d" % (hr)}} heure et {{"%2d" % (min)}} minutes
  {% elif hr > 0 and min > 30 %}
    il y a {{"%d" % (hr)}} heure et demi
  {% elif hr > 0 and min > 1 and min <30 %}
    il y a {{"%d" % (hr)}} heures et {{"%2d" % (min)}} minutes
  {% elif min > 2 %} 
    il y a {{min | int}} minutes
  {% elif min > 1 %}
    il y a {{min | int}} minute
  {% elif sec > 0 %}
    il y a {{sec | int}} secondes
  {% endif %}
icon_color: |-
  {% if is_state ('binary_sensor.door_window_sensor_baie_dte', 'off') %}
   green
  {% else %}
   red
  {% endif %}
layout: horizontal
icon: mdi:window-closed-variant
badge_icon: none
badge_color: transparent
card_mod:
  style: |
    mushroom-badge-icon:after {
      content: "{{states('sensor.battery_detecteur_baie_dte')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-grey));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: 0;
      width: 120%;
      height: 120%;
      font-size: 0.6em; 
    }

et le rendu :
image
je voudrais mettre le badge 45% en bas a gauche…
et en bonus si j’ose : changer la couleur de ce badge en fonction de l’etat de la batterie!
Merci a vous!

Salut @Coben

Faudra finir la mise au point, mais un début de piste :

card_mod:
  style: |
    mushroom-badge-icon {
      left: -8px;
      top: 20px;
    }
    mushroom-badge-icon:after {
      content: "{{states('sensor.1200_pro_battery_charge')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      {% if states('sensor.1200_pro_battery_charge') | int > 80 %}
      background: green;
      {% elif states('sensor.1200_pro_battery_charge') | int > 60 %}
      background: yellow;
      {% else %}
      background: red;
      {% endif %}
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: 0;
      font-size: 0.6em; 
    }   

image

1 « J'aime »

Top.
Merci à toi @Herbs ; j’ai meme un petit rendu ovale (non voulu???) mais que je trouve fort sympathique!
image
la partie du code :

          badge_icon: none
          badge_color: transparent
          card_mod:
            style: |
              ha-card {
                margin-left: 8px !important;
                margin-right: 1px !important;
              }
              mushroom-badge-icon {
                left: -15px;
                top: 25px;
              }
              mushroom-badge-icon:after {
                content: "{{states('sensor.battery_detecteur_baie_dte')}}%";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: {% if states('sensor.battery_detecteur_baie_dte') | float > 50 %} green {% elif states('sensor.battery_detecteur_baie_dte') | float > 10 %} orange {% else %} red {% endif %};
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: 0;
                width: 40%;
                height: 100%;
                font-size: 0.6em; 
              }

Petite question : quelle est la différence entre

et

?

Je dirai que l’un est le contenant et l’autre le contenu.

Pour l’effet ovale, c’est pas voulu pour ça que je disais qu’il restait de la mise au point à faire :wink:

D’ailleurs il risque d’évoluer en fonction de la valeur de ton sensor (contenu).

Sorry je n’ai pas vu ton message !
Pas vu de notification grrrr

As tu ta réponse avec @Herbs ?

Salut @jerome6994

Je pense que ma réponse n’est que partiellement fonctionnelle.

En tout cas chez moi le traitement de « mushroom-badge-icon:after » en fonction de la valeur du sensor n’est pas toujours identique :

  • sensor à 100%

image

  • sensor à 65%

image

Mais là ça dépasse mes compétences, enfin j’ai pas encore trouvé comment réellement « fixer » ça.

A voir ce qu’en pense @Coben pour son usage personnelle, de mon côté je l’ai juste pris comme un exercice.

Mais maintenant j’aimerai bien aller au bout :wink:

Je vous dirai à l’usage…
Je suis relativement nouveau sur HA donc pas beaucoup de recul.
Je vais jeter un coup d’oeil du coté des forums anglophones…

Salut,

ça vaut pê le coup d’ouvrir une issue ou voir avec @piitaya

Salut @Pulpy-Luke

Je maitrise pas assez pour déterminer si ça peut rentrer dans les « issues », j’ai même l’impression qu’on sort pas mal de ce qui est prévu à l’origine.

Je sais que @piitaya passe de temps en temps sur le forum, mais vu qu’on joue un peu aux apprentis sorciers j’avais pas encore « osé » le « taguer » :wink:

Sans forcement être un bug, l’issue pourrait permettre de savoir si c’est justement dans le cadre ou pas, et d’autant plus que l’activité forumesque de piitaya n’est logiquement pas si importante ici. Le tag permettra d’être notifié, il répondra ou pas selon son envie

Bon j’ai qqc de plus « propre » :

image

image

Après au niveau des proportions, c’est moyen visuellement :thinking:

La section card_mod de la carte
card_mod:
  style: |
    mushroom-badge-icon {   
      left: -8px;
      top: 20px;
    }
    mushroom-badge-icon:after {
      content: "{{states('sensor.1200_pro_battery_charge')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      {% if states('sensor.1200_pro_battery_charge') | int > 80 %}
      background: green;
      {% elif states('sensor.1200_pro_battery_charge') | int > 60 %}
      background: yellow;
      {% else %}
      background: red;
      {% endif %}
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50% !important;
      top: 8px;
      left: -2px;
      font-size: 0.6em;
      height: 3em;
      width: 3em;
    }
    :host {
      --mush-icon-size: 48px;
    }    
1 « J'aime »