Bonjour à toutes et à tous,
En parcourant le forum, je suis tombé sur lovelace-mushroom
Mon problème :
J’aimerais que l’icone devienne d’une certaine couleur, voir même clignote, lorsque le jour de sorti est arrivé (aujourd’hui).
J’ai beau regardé des exemples, je n’y arrive pas…
Si quelqu’un veut bien m’aider, svp ? MERCI BEAUCOUP !
Le code de ma carte :
type: custom:vertical-stack-in-card
title: Poubelles
cards:
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.ordures_menageres_jour
icon: mdi:trash-can
primary_info: state
secondary_info: name
name: Ordures Ménagères
icon_color: grey
- type: custom:mushroom-entity-card
entity: sensor.emballages_papiers_jour
icon: mdi:recycle
primary_info: state
secondary_info: name
name: Emballages
icon_color: yellow
card_mod:
style: |
ha-card {
border: none;
margin-top: -25px;
}
1 « J'aime »
Bonjour,
Puis ajouter ce code:
card_mod:
style: |
ha-state-icon {
animation: pulse 2s linear infinite;
}
Suivant un état d’une entité:
card_mod:
style: |
ha-state-icon {
{% if is_state('fan.rpi_cooling_fan','off') %}
animation: none;
{% else %}
animation: pulse 2s linear infinite;
{% endif %}
}
Plein d’exemple pour mushrrom card:
This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.5.4 and Card Mod Version 3.4.3 ...
Reading time: 209 mins 🕑
Likes: 513 ❤
2 « J'aime »
Merci beaucoup pour ta réponse, je vais regarder ça !
Voici une petite modification de ma carte. Fait apparaitre le fond de l’élément en rouge, le jour J.
Et le code :
Résumé
type: custom:vertical-stack-in-card
title: Poubelles
cards:
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-entity-card
entity: sensor.ordures_menageres_jour
icon: mdi:trash-can
primary_info: name
secondary_info: state
name: Ordures Ménagères
icon_color: grey
card_mod:
style: |
ha-card {
{% if states('calendar.ordures_menagere') == 'on' %}
background: red;
{% else %}
background: none;
{% endif %}
}
- type: custom:mushroom-entity-card
entity: sensor.emballages_papiers_jour
icon: mdi:recycle
primary_info: name
secondary_info: state
name: Emballages
icon_color: yellow
card_mod:
style: |
ha-card {
{% if states('calendar.emballages_papiers') == 'on' %}
background: red;
{% else %}
background: none;
{% endif %}
}
card_mod:
style: |
ha-card {
border: none;
margin-top: -25px;
}
Je serais preneur d’exemple, pour essayer d’améliorer/peaufiner ma carte !
T’en a pas assez avec tout les exemples dans mon lien ?
Je comprends pas, tu créer un sujet pour faire clignoter une icone. Pour au final, changer le background ?
Effectivement, je n’ai pas réussi
Pourtant ca fonctionne, essai ce code:
type: custom:mushroom-entity-card
entity: sensor.ordures_menageres_jour
icon: mdi:trash-can
primary_info: name
secondary_info: state
icon_color: grey
name: Ordures Ménagères
card_mod:
style: |
ha-state-icon {
{% if is_state('calendar.ordures_menagere','on') %}
animation: pulse 2s linear infinite;
color: red;
{% else %}
animation: none;
color: green;
{% endif %}
}
GENIAL, merci beaucoup !!!
Je ne sais pas si cela peut t’intéresser mais il existe une carte dédiée aux poubelles sur HACS, qui s’appelle trash-card , je l’utilise depuis peu et elle est pas mal, je pense même que je vais essayer de lui rajouter le pulse suite à la lecture de ce sujet, si c’est possible.
Matt1
Juillet 7, 2024, 4:00
10
Bonjour @WarC0zes ,
J’ai appliqué le code que tu as donné pour certaines entités qui renvoient un état non numérique et ça fonctionne nickel.
Par contre, je me suis arraché les cheveux pour les états numériques sur le modèle du code que j’ai adapté ci-dessous.
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: CPU
secondary: >-
{{states('sensor.system_monitor_utilisation_du_processeur') | float |
round (0)}} %
layout: vertical
icon: mdi:cpu-64-bit
icon_color: >
{% if states('sensor.system_monitor_utilisation_du_processeur')|float
<= 10 %}
green
{% elif
states('sensor.system_monitor_utilisation_du_processeur')|float <= 50
%}
blue
{% elif
states('sensor.system_monitor_utilisation_du_processeur')|float <= 75
%}
orange
{% else %}
red
{% endif %}
entity: sensor.system_monitor_utilisation_du_processeur
card_mod:
style: |
ha-card {
max-height: 110px !important;
border: 0px;
}
ha-state-icon {
{% if states('sensor.system_monitor_utilisation_du_processeur') > '75' %}
animation: blink 0.8s linear alternate infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.1;}
}
- type: custom:mushroom-template-card
primary: CPU
secondary: >-
{{states('sensor.system_monitor_temperature_du_processeur') | float |
round (0)}} °C
layout: vertical
icon: mdi:thermometer
icon_color: >
{% if states('sensor.system_monitor_temperature_du_processeur')|float
<= 30 %}
green
{% elif
states('sensor.system_monitor_temperature_du_processeur')|float <= 45
%}
blue
{% elif
states('sensor.system_monitor_temperature_du_processeur')|float <= 60
%}
orange
{% else %}
red
{% endif %}
entity: sensor.system_monitor_temperature_du_processeur
card_mod:
style: |
ha-card {
max-height: 110px !important;
border: 0px;
}
ha-state-icon {
{% if states('sensor.system_monitor_temperature_du_processeur') > '60' %}
animation: blink 0.8s linear alternate infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.1;}
}
- type: custom:mushroom-template-card
primary: RAM
secondary: >-
{{states('sensor.system_monitor_utilisation_de_la_memoire') | float |
round (0)}} %
layout: vertical
icon: mdi:memory
icon_color: >
{% if states('sensor.system_monitor_utilisation_de_la_memoire')|float
<= 10 %}
green
{% elif
states('sensor.system_monitor_utilisation_de_la_memoire')|float <= 50
%}
blue
{% elif
states('sensor.system_monitor_utilisation_de_la_memoire')|float <= 75
%}
orange
{% else %}
red
{% endif %}
entity: sensor.system_monitor_utilisation_de_la_memoire
card_mod:
style: |
ha-card {
max-height: 110px !important;
border: 0px;
}
ha-state-icon {
{% if states('sensor.system_monitor_utilisation_de_la_memoire') > '75' %}
animation: blink 0.8s linear alternate infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.1;}
}
- type: custom:mushroom-template-card
primary: SSD
secondary: >-
{{states('sensor.system_monitor_utilisation_du_disque') | float |
round (0)}} %
layout: vertical
icon: mdi:harddisk
icon_color: >
{% if states('sensor.system_monitor_utilisation_du_disque')|float <=
10 %}
green
{% elif states('sensor.system_monitor_utilisation_du_disque')|float <=
50 %}
blue
{% elif states('sensor.system_monitor_utilisation_du_disque')|float <=
75 %}
orange
{% else %}
red
{% endif %}
entity: sensor.system_monitor_utilisation_du_disque
card_mod:
style: |
ha-card {
max-height: 110px !important;
border: 0px;
}
ha-state-icon {
{% if states('sensor.system_monitor_utilisation_du_disque') < '75' %}
animation: pulse 2s linear infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0.1;}
}
- type: custom:mushroom-template-card
primary: Kiosk
secondary: >-
{{states('sensor.lenovo_tb_x606x_battery_level') | float | round (0)}}
%
layout: vertical
icon: mdi:battery-40
icon_color: |
{% if states('sensor.lenovo_tb_x606x_battery_level')|float <= 20 %}
red
{% elif states('sensor.lenovo_tb_x606x_battery_level')|float <= 40 %}
orange
{% elif states('sensor.lenovo_tb_x606x_battery_level')|float <= 65 %}
blue
{% else %}
green
{% endif %}
entity: sensor.lenovo_tb_x606x_battery_level
card_mod:
style: |
ha-card {
max-height: 110px !important;
border: 0px;
}
ha-state-icon {
{% if states('sensor.lenovo_tb_x606x_battery_level') < '25' %}
animation: pulse 2s linear infinite;
{% endif %}
}
@keyframes blink {
0% {opacity: 1;}
100% {opacity: 0;}
}
- type: custom:mushroom-template-card
primary: OS
secondary: >-
{{ state_attr('update.home_assistant_operating_system_update',
'installed_version') }}
layout: vertical
icon: mdi:home-assistant
icon_color: >
{% set state=states('update.home_assistant_operating_system_update')
%} {% if state=='off' %}
green
{% else %}
red
{% endif %}
entity: update.home_assistant_operating_system_update
card_mod:
style: |
ha-card {
max-height: 110px !important;
border: 0px;
}
ha-state-icon {
{% if is_state('update.home_assistant_operating_system_update','on') %}
animation: pulse 2s linear infinite;
color: red;
{% else %}
animation: none;
{% endif %}
}
Jicay
Avril 30, 2025, 5:28
11
Bonjour,
Je débute dans la réalisation de mon Dashboard et ce sujet m’intéresse.
Pour bien comprendre, pour que cela fonctionne, je dois créer un sensor ?
Merci d’avance
Salut Jicay
Le plus simple à mon sens est d’utiliser le calendrier et y définir les jours de collecte. A partir de là, tu auras tout ce qu’il faut pour faire une carte adaptée.
Jicay
Avril 30, 2025, 6:07
13
Salut Cleya,
J’ai bien créé un calendrier « poubelles » qui à tous les 15 jours un évènement (la sortie des poubelles).
Est-ce qu’en ayant créé cela, j’ai automatiquement un sensor ?
Ben, c’est le principe
Voici le code de ma carte (la veille du ramassage, l’état - Demain - clignote en rouge) :
carte_poubelles:
card:
type: custom:button-card
template: carte_fond
variables:
carte_hauteur: 115
carte_largeur: 383
name: 'Ramassage des ordures :'
custom_fields:
poubelle_verte_icone:
card:
type: custom:button-card
entity_picture: /local/images/poubelle_verte.png
show_entity_picture: true
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
- width: 66px
- height: 66px
- border-radius: 0
entity_picture:
- width: 90%
- opacity: 100%
poubelle_verte_valeur:
card:
type: custom:button-card
entity: sensor.poubelle_verte_jour
name: 'Prochain<br>ramassage :'
show_name: true
show_icon: false
show_state: true
lock:
enabled: true
exemptions: []
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
- width: 120px
- height: 70px
- border-radius: 0
- cursor: default
lock:
- opacity: 0
name:
- font-size: 0.7em
- font-weight: bold
- justify-self: start
- align-self: start
- text-align: start
- color: rgba(0,0,0,0.6)
state:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: |
[[[
if (states['sensor.poubelle_verte_jour'].state == 'demain')
return 'rgba(255,0,0,1.0)';
else
return 'rgba(0,0,0,0.6)';
]]]
- animation: |
[[[
if (states['sensor.poubelle_verte_jour'].state == 'demain')
return 'blink 2s ease infinite';
]]]
tap_action:
action: none
hold_action:
action: none
poubelle_jaune_icone:
card:
type: custom:button-card
entity_picture: /local/images/poubelle_jaune.png
show_entity_picture: true
styles:
card:
- background-color: rgba(64,192,64,0.0)
- border: none
- width: 66px
- height: 66px
- border-radius: 50%
entity_picture:
- width: 90%
- opacity: 100%
poubelle_jaune_valeur:
card:
type: custom:button-card
entity: sensor.poubelle_jaune_jour
name: 'Prochain<br>ramassage :'
show_name: true
show_icon: false
show_state: true
lock:
enabled: true
exemptions: []
styles:
card:
- background-color: rgba(255,255,255,0.0)
- border: none
- width: 120px
- height: 70px
- border-radius: 0
- cursor: default
lock:
- opacity: 0
name:
- font-size: 0.7em
- font-weight: bold
- justify-self: start
- align-self: start
- text-align: start
- color: rgba(0,0,0,0.6)
state:
- font-size: 0.9em
- font-weight: bold
- justify-self: start
- align-self: start
- color: |
[[[
if (states['sensor.poubelle_jaune_jour'].state == 'demain')
return 'rgba(255,0,0,1.0)';
else
return 'rgba(0,0,0,0.6)';
]]]
- animation: |
[[[
if (states['sensor.poubelle_jaune_jour'].state == 'demain')
return 'blink 2s ease infinite';
]]]
tap_action:
action: none
hold_action:
action: none
styles:
name:
- margin-top: '-8px'
- font-size: 1.0em
- font-weight: bold
- justify-self: start
- align-self: start
- padding-left: 15px
- color: rgba(0,0,0,0.6)
custom_fields:
poubelle_verte_icone:
- position: absolute
- top: 35px
- left: 25px
poubelle_verte_valeur:
- position: absolute
- top: 40px
- left: 90px
poubelle_jaune_icone:
- position: absolute
- top: 35px
- left: 200px
poubelle_jaune_valeur:
- position: absolute
- top: 40px
- left: 265px
tap_action:
action: none
hold_action:
action: none
Jicay
Avril 30, 2025, 6:13
15
OK merci je vais essayer d’y arriver en affichant le nombre de jours restant.
Pour l’instant j’arrive à cela, je n’ai pas le nombre de jours mais l’info que ce sera semaine prochaine :
Il te faut un template sensor pour calculer le nombre de jour avant la prochaine collecte.
Un exemple :
sensor:
- platform: template
sensors:
jours_avant_poubelle_jaune:
friendly_name: "Jours avant ramassage poubelle jaune"
value_template: >
{% set calendrier = states.calendar.maison_poubelle_jaune %}
{% if calendrier.attributes.start_time %}
{% set prochaine_collecte = as_timestamp(calendrier.attributes.start_time) %}
{% set maintenant = as_timestamp(now()) %}
{{ ((prochaine_collecte - maintenant) / 86400) | round(0) }}
{% else %}
Aucune date trouvée
{% endif %}
unit_of_measurement: 'jours'
Code à insérer dans ton fichier « configuration.yaml »
Tu remplaces « calendar.maison_poubelle_jaune » par ton entité « calendar.poubelles »
Ca te donnera un nouveau sensor appelé « sensor.jours_avant_poubelle_jaune »
Il faudra redémarrer HA.
1 « J'aime »
Salut,
Depuis le temps, tu devrais être sur le nouveau format
template:
- sensor:
- name: "Jours avant ramassage poubelle jaune"
unique_id: "jours_avant_poubelle_jaune"
unit_of_measurement: 'jours'
state: >
{% set calendrier = states.calendar.maison_poubelle_jaune %}
{% if calendrier.attributes.start_time %}
{% set prochaine_collecte = as_timestamp(calendrier.attributes.start_time) %}
{% set maintenant = as_timestamp(now()) %}
{{ ((prochaine_collecte - maintenant) / 86400) | round(0) }}
{% else %}
Aucune date trouvée
{% endif %}
1 « J'aime »
Jicay
Avril 30, 2025, 8:14
18
Que je comprenne, qu’est ce qui ne va pas dans ma config ? Car ca ne s’affiche pas :
Regarde dans outils de développement, onglet états. Recherche ton sensor, il ne doit pas s’appeler comme tu la mis dans le code de la carte.
IL faut redémarrer HA ou recharger les entités modèle, après avoir ajouté un template.
1 « J'aime »
C’est peut-être lié au nouveau format de template
@WarC0zes , je rigole là
1 « J'aime »
?