David
Janvier 11, 2025, 12:47
1
Bonjour,
Voici une carte qui fonctionne mais je souhaite la modifier mais je n’y arrive pas.
Il me semble que le code de départ vient de @BBE
Voici le visuel
Et voici le code
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: blue
primary: Piscine
secondary: >-
{{ states("sensor.piscine_temperature") }} °C / {{
states("sensor.piscine_battery") }} % batterie / {{
states("sensor.piscine_linkquality") }} link
tap_action:
action: navigate
navigation_path: /lovelace/piscine
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ""
badge_color: ""
multiline_secondary: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.volet_piscine
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Volet ON
{% elif is_state(entity, 'off') %}
Volet OFF
{% endif %}
- type: template
entity: switch.filtration
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Filtration ON
{% elif is_state(entity, 'off') %}
Filtration OFF
{% endif %}
- type: template
entity: switch.lumiere_piscine
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:light-flood-up
{% else %}
mdi:light-flood-down
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Lumière ON
{% elif is_state(entity, 'off') %}
Lumière OFF
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
Bon à présent mon, mes souhaits :
réalisé la rotation de l’icon fan si la filtration est en on
est-il possible d’avoir des icon sur la ligne avec la température, batterie
voici un code simplifié pour essai mais rien
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: blue
primary: Piscine
secondary: >-
{{ states("sensor.piscine_temperature") }} °C / {{
states("sensor.piscine_battery") }} % batterie / {{
states("sensor.piscine_linkquality") }} link
tap_action:
action: navigate
navigation_path: /lovelace/piscine
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ""
badge_color: ""
multiline_secondary: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_essai_tempo
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Filtration ON
{% elif is_state(entity, 'off') %}
Filtration OFF
{% endif %}
alignment: end
card_mod:
style: |
ha-icon {
{% if is_state('switch.prise_essai_tempo', 'on') %}
animation: spin 2s linear infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
Merci d’avance
Salut
pour l’animation du fan, essaye ce code :
- type: template
entity: switch.filtration
icon: |
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
{% if is_state('switch.filtration,'on') %}
ha-card { animation: spin 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
Je pense pas
Hello,
en même temps ça risque d’être compliqué vu que tu empiles les cartes verticalement avec custom:vertical-stack-in-card
tente avec horizontal-stack
il faudra peut-être encore ajuster le code
cdt
David
Janvier 11, 2025, 1:56
4
Merci pour votre aide mais avec horizontal ou autre
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: blue
primary: Piscine
secondary: >-
{{ states("sensor.piscine_temperature") }} °C / {{
states("sensor.piscine_battery") }} % batterie / {{
states("sensor.piscine_linkquality") }} link
tap_action:
action: navigate
navigation_path: /lovelace/piscine
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ""
badge_color: ""
multiline_secondary: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_essai_tempo
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Filtration ON
{% elif is_state(entity, 'off') %}
Filtration OFF
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
{% if is_state('switch.prise_essai_tempo,'on') %}
ha-card { animation: spin 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
alignment: end
card_mod:
style: |
ha-icon {
{% if is_state('switch.prise_essai_tempo', 'on') %}
animation: spin 2s linear infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
et
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: blue
primary: Piscine
secondary: >-
{{ states("sensor.piscine_temperature") }} °C / {{
states("sensor.piscine_battery") }} % batterie / {{
states("sensor.piscine_linkquality") }} link
tap_action:
action: navigate
navigation_path: /lovelace/piscine
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ""
badge_color: ""
multiline_secondary: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_essai_tempo
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Filtration ON
{% elif is_state(entity, 'off') %}
Filtration OFF
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
{% if is_state('switch.prise_essai_tempo,'on') %}
ha-card { animation: spin 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
alignment: end
card_mod:
style: |
ha-icon {
{% if is_state('switch.prise_essai_tempo', 'on') %}
animation: spin 2s linear infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
Re,
je n’ai modifié que la ligne type du 1er code
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: blue
primary: Piscine
secondary: >-
{{ states("sensor.piscine_temperature") }} °C / {{
states("sensor.piscine_battery") }} % batterie / {{
states("sensor.piscine_linkquality") }} link
tap_action:
action: navigate
navigation_path: /lovelace/piscine
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ""
badge_color: ""
multiline_secondary: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.volet_piscine
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Volet ON
{% elif is_state(entity, 'off') %}
Volet OFF
{% endif %}
- type: template
entity: switch.filtration
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Filtration ON
{% elif is_state(entity, 'off') %}
Filtration OFF
{% endif %}
- type: template
entity: switch.lumiere_piscine
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:light-flood-up
{% else %}
mdi:light-flood-down
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Lumière ON
{% elif is_state(entity, 'off') %}
Lumière OFF
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
cdt
David
Janvier 11, 2025, 2:18
6
oui @freetronic et j’ai ajouté le code @pascal_ha et cela ne fonctionne pas
Re,
je n’ai pas regardé au code de @pascal_ha
je me suis concentré sur le placement, c’est l’effet voulu?
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:pool
icon_color: blue
primary: Piscine
secondary: >-
{{ states("sensor.piscine_temperature") }} °C / {{
states("sensor.piscine_battery") }} % batterie / {{
states("sensor.piscine_linkquality") }} link
tap_action:
action: navigate
navigation_path: /lovelace/piscine
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ""
badge_color: ""
multiline_secondary: false
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.volet_piscine
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Volet ON
{% elif is_state(entity, 'off') %}
Volet OFF
{% endif %}
- type: template
entity: switch.filtration
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Filtration ON
{% elif is_state(entity, 'off') %}
Filtration OFF
{% endif %}
- type: template
entity: switch.lumiere_piscine
tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:light-flood-up
{% else %}
mdi:light-flood-down
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
green
{% endif %}
content: |-
{% if is_state(entity, 'on') %}
Lumière ON
{% elif is_state(entity, 'off') %}
Lumière OFF
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
padding-top: 18px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
cdt
C’est étrange, chez moi cela fonctionne.
Bonjour,
David
Janvier 11, 2025, 4:42
10
@WarC0zes merci mais mon but n’est pas de l’avoir sur la même ligne mais de mettre en rotation mon fan si = on
j’ai mal compris.
tu ne peux pas mettre d’icone sur la ligne, mais tu peut utiliser des emoji.
secondary: >-
AV:🌡{{
states("sensor.temperature_humidity_sensor_exterieur_av_temperature")
|round(1)}}°C / 💧{{
states("sensor.temperature_humidity_sensor_exterieur_av_humidity")
|round(0)}}%
Tochy
Janvier 11, 2025, 5:33
12
Salut
type: custom:mushroom-chips-card
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
{% if is_state('switch.vmc', 'on') %}
ha-state-icon {
animation: spin 1s linear infinite;
}
{% endif %}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
chips:
- type: template
entity: switch.vmc
icon: mdi:fan
icon_color: |-
{% if is_state('switch.vmc', 'on') %}
green
{% endif %}
content: |-
{% if is_state('switch.vmc', 'on') %}
{% if is_state('switch.vitesse_vmc', 'off') %}
- 1 -
{% else %}
- 2 -
{% endif %}
{% else %}
Off
{% endif %}
tap_action:
action: more-info
A adapter à tes entités bien sur.
mushroom-template-chip:nth-child(1)$: |
Deviendra :
mushroom-template-chip:nth-child(2)$: |
EMqA
Janvier 11, 2025, 5:45
13
Ce sujet m’a donné envie de le faire et ça donne ça.
- type: template
entity: switch.p_nous_1_commutateur
icon: mdi:fan
tap_action:
action: more-info
hold_action:
action: none
icon_color: |-
{% set var=states('sensor.p_nous_1_puissance') | float %}
{% if var<=1 %}
grey
{% elif var >=50 %}
red
{% else %}
green
{% endif %}
content: ""
card_mod:
style: >
ha-card { {{ 'animation: spin 3s linear infinite;' if
(is_state('switch.p_nous_1_commutateur','on')) }} }
Tochy
Janvier 11, 2025, 5:55
14
Oui celà fonctionne aussi à condition de ne pas avoir de ‹ content › parce que avec ha-card c’est toute la carte qui tourne.
- type: template
entity: switch.p_nous_1_commutateur
icon: mdi:fan
tap_action:
action: more-info
hold_action:
action: none
icon_color: |-
{% set var=states('sensor.p_nous_1_puissance') | float %}
{% if var<=1 %}
grey
{% elif var >=50 %}
red
{% else %}
green
{% endif %}
content: "test"
card_mod:
style: >
ha-card { {{ 'animation: spin 3s linear infinite;' if
(is_state('switch.p_nous_1_commutateur','on')) }} }
EMqA
Janvier 11, 2025, 6:31
15
@David
Il te manque un ’ après le O de tempo.
('switch.prise_essai_tempo,'on')
('switch.prise_essai_tempo','on')
Essayé ce code complet, dans une nouvelle carte.(Je l’ai simplifié pour essai)
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.prise_essai_tempo
icon: |
{% if is_state(entity, 'on') %}
mdi:toggle-switch
{% elif is_state(entity, 'off') %}
mdi:toggle-switch-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% endif %}
primary: PRISE ESSAI
secondary: ""
layout: horizontal
tap_action:
action: toggle
badge_icon: ""
badge_color: ""
card_mod:
style: null
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.prise_essai_tempo
icon: |
{% if is_state(entity, 'on') %}
mdi:fan
{% elif is_state(entity, 'off') %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
{% if is_state('switch.prise_essai_tempo','on') %}
ha-card { animation: spin 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
{%- endif %}
alignment: end
card_mod:
style: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
card_mod:
style: |
ha-card {
margin: 10px;
background: var(--mantle2);
}
David
Janvier 11, 2025, 7:25
17
@pascal_ha ok merci cela fonctionne@Tochy effectivement avec et sans content c’est pas pareil, donc question il y a un autre moyen de placer un texte si off ou on ?
mais la carte tourne également dans les deux cas
Tochy
Janvier 11, 2025, 7:43
18
Regarde mon premier post plus haut tu as la solution pour la rotation de l’icône seulement
re,
du coup j’avais rien compris
cdt
Bonjour,
Merci pour ton exemple qui fonctionne. A partir de celui-ci , j’ai essayé de l’appliquer à ma card mais dès lors qu’il y a plusieurs chips ; l’animation ne fonctionne pas , le code n’étant pas correct.
effectivement ça fait pas pareil
désolé…