Hello @frankb ,
Je m’étais déjà largement inspiré de la 1ere version de tes cartes, mais je crois que je vais suivre sur cette nouvelle version plus simple et facile à maintenir ! 
Comment geres tu les boutons carrés avec un emplacement dispos ? C’est certainement pas compliqué, mais j’y arrive 
Merci !
Hello !
Je n’ai pas trop compris ta question, mais si tu veux savoir comment faire des boutons carrés c’est tout simple et natif avec les sections de HA :
type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:ceiling-light
entity: light.lampe_tv
icon_color: |2-
{% if is_state(entity, 'on') %}
var(--orange-rgb)
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: toggle
grid_options:
columns: 2
rows: 1
Hello @frankb,
Merci pour le retour ! En fait, j’ai changé de thème pour noctis : le border radius est bien plus « carré » et la forme moins « allongée » (j’me comprends )
Concernant ton bouton « Lumiere », comment geres tu l’affichage de l’intensité ?
Encore merci pour ton aide !
Salut, je trouve les possibilités énormes en combinant les deux.
J’aimerais avoir l’icône de la lumière qui soit animé en fonction de son état. Et faire de même pour les icônes des chips cards. Mais j’ai du mal malgré le code :
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
white
{% endif %}
card_mod:
style: |
mushroom-shape-icon { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
entity: light.salon
icon: mdi:lightbulb-on
primary: Salon
secondary: >
{{ states("sensor.temperature_salon_temperature") | float | round }}°C |{{
states("sensor.temperature_salon_humidity") | float | round }}% 💧|🚪{{
states("sensor.temperature_salon_humidity") }} |🪟{{
states("sensor.compteur_fenetres_salon") }} |💡{{ states("light.salon")
}} {% if is_state('sensor.alarmes_statut', 'unavailable') %}
Indisponible
{% endif %} {% if is_state('light.salon', 'unavailable') %}
Indisponible
{% elif is_state('light.salon', 'off') %}
{% else %}
- {{ (states['light.salon'].attributes.brightness / 2.54) | round(0) }}%
{% endif %}
layout: horizontal
tap_action:
action: toggle
badge_icon: >
{% if
is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: >
{% if
is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
'on') %}
orange
{% else %}
grey
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.temperature_salon_temperature
name: Temperature
color: lightblue
height: 50
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
mushroom-shape-icon { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
- type: template
entity: light.salon
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
- type: template
entity: media_player.freebox_player_pop
icon: mdi:television-box
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
alignment: end
Salut
Regarde par là pour animer les icônes des chips
Je dois louper quelque chose, car aucune icône ne tourne (n’est animé). Le but étant que l’icône lightbulb-on soit animée selon sa condition, de même pour les icônes mdi:radiator et TV.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
white
{% endif %}
card_mod:
style: |
mushroom-shape-icon { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
entity: light.salon
icon: mdi:lightbulb-on
primary: Salon
secondary: >
{{ states("sensor.temperature_salon_temperature") | float | round }}°C |{{
states("sensor.temperature_salon_humidity") | float | round }}% 💧|🚪{{
states("sensor.temperature_salon_humidity") }} |🪟{{
states("sensor.compteur_fenetres_salon") }} |💡{{ states("light.salon")
}} {% if is_state('sensor.alarmes_statut', 'unavailable') %}
Indisponible
{% endif %} {% if is_state('light.salon', 'unavailable') %}
Indisponible
{% elif is_state('light.salon', 'off') %}
{% else %}
- {{ (states['light.salon'].attributes.brightness / 2.54) | round(0) }}%
{% endif %}
layout: horizontal
tap_action:
action: toggle
badge_icon: >
{% if
is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: >
{% if
is_state('binary_sensor.magic_areas_presence_tracking_salon_area_state',
'on') %}
orange
{% else %}
grey
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.temperature_salon_temperature
name: Temperature
color: lightblue
height: 50
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-chips-card
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
chips:
- type: template
entity: climate.radiateur_salon
icon: mdi:radiator
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
mushroom-shape-icon { animation: blink 2s linear infinite; }
@keyframes blink { 50% {opacity: 0;} }
- type: template
entity: light.salon
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
- type: template
entity: media_player.freebox_player_pop
icon: mdi:television-box
icon_color: |-
{% if is_state(entity, 'on') %}
yellow
{% elif is_state(entity, 'off') %}
grey
{% else %}
red
{% endif %}
tap_action:
action: more-info
alignment: end
La carte ressemblerait à cela. (merci @frankb pour l’inspiration).
Le soucis venait de la version de card mod. Je l’ai réinstallée et c’est bon.
Bonjour,
je cherche une petite variante avec le modèle horizontal.
Est ce que je peux utiliser ce modèle mais à la place des icones, je souhaite avoir des valeurs ?
un peu comme le la maquette suivante :
la petite cerise sur le gâteau, serait que la couleur de fond change en fonction de la valeur.
merci
Si tu modifies les chips tu peux sans souci afficher des valeurs.
Ca risque d’être compliqué de rester sur des ronds, mais c’est peut être faisable.
Fais des essais avec l’interface graphique ce n’est pas si compliqué…
Ensuite pour la couleur de fond, il faut passer par card-mod et là c’est une autre affaire…
Ensuite c’est très personnel, mais pourquoi utiliser des boutons pour ça? il y a plein de façon d’afficher des valeurs de façon différentes.
Merci pour ton retour.
à vrai dire, je cherche une jolie carte horizontale afin d’afficher plusieurs informations.
Initialement, je voulais utiliser les cartes « swiss army knife card » mais elles sont compliquées à mettre en place et semble abandonnées.
Du coup, je me suis dis que je pourrais utiliser ces cartes et les adaptées pour mon besoin mais je ne sais pas jusqu’à quel limite je peux les utiliser. Comme changer les ronds pour des rectangles etc. Je me débrouille un peu en yaml mais moins en css ou avec card-mod.
Je parcours couvent le forum HACF pour de nouvelles idées et je suis tombé sur ce sujet. voila
Regarde ce post, tu devrais trouver ton bonheur: Quel type de carte pour capteur température + humidité?
Rien ne t’interdit ensuite d’utiliser la technique que je décris pour les fusionner avec une carte mushroom…
