Je partage la réalisation du moment sur le sujet Room Card et Mushroom
Sur la partie de gauche j’utilise mushroom template card et sur la droite mushroom chips card le tout dans vertical stack in card
Sur la partie mushroom template card j’ai :
- sur le primary j’ai le nom de la pièce
- un badge où j’affiche un mouvement s’il a lieu sinon le nombre de lumières de la pièce qui sont allumées
- sur le secondary je mets la température / humidité qui change de couleur en fonction de seuil prédéfini comme on le voit sur le screen.
Sur la partie de droite mushroom chips card j’ai :
- en premier la ou les fenêtres (si plusieurs popup)
- en second la ou les portes (si plusieurs popup)
- en troisième la ou les éclairages (si plusieurs popup)
- en dernier la ou les prises (si plusieurs popup)
Je ne mets que 4 chips car sur le téléphone au 5ème cela passe à la ligne et le coté compact n’est plus d’usage !
Si je clique sur la carte mushroom template alors je navigue directement vers la sous vue de la pièce en question afin d’avoir tout le détail comme les volets qui ne sont que très rarement manipuler en manuel mais plus en automatisation par exemple.
j’ai mis aussi en en-tête de section le même genre de carte avec le résumé global des pièces qui compose la section, cela joue le rôle de titre :
Pour le moment je ne bascule pas sur les cartes plus standard de HA car j’ai pas mal de mise en forme afin d’avoir une alerte plus visuel et plus marquer mais dès que le standard est plus customisable si on peut je basculerais pour plus de fluidité, et meilleurs montée de version dans le temps.
J’ai aussi regardé les bubble card qui sont un peu dans le même esprit mais des lenteurs importantes dans la version actuelle m’empêche de faire un test de plus grand envergure
Je mets le code de ma carte CH Parents pour vous donner une idée du bordel qu’il y a !!!
A voir si une simplification est jouable ou non !
Je suis preneur de toute remarque, partage complémentaire, modification et j’en passe 
Code de la carte CH Parents
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: light.grp_ecl_ch_parents
icon: mdi:bed-king
icon_color: purple
primary: CH Parents
secondary: >-
{{ states("sensor.temp_ch_parents_temperature") | round(1) }}°C - {{
states("sensor.temp_ch_parents_humidity") | round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace/Parents
double_tap_action:
action: navigate
navigation_path: /lovelace/Parents
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.mvt_ch_parents_occupancy', 'on') %}
mdi:run-fast
{% else %}
mdi:human-male
{% endif %}
badge_color: |
{% if is_state('binary_sensor.mvt_ch_parents_occupancy', 'on') %}
pink
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
--card-primary-font-size: 14px;
--card-secondary-font-size: 14px;
position: relative;
border: none;
box-shadow: none;
--card-secondary-color:
{% if states('sensor.temp_ch_parents_temperature') | float < 15 %}
rgba(70, 130, 180, 1); /* Bleu froid */
{% elif states('sensor.temp_ch_parents_temperature') | float >= 15 and states('sensor.temp_ch_parents_temperature') | float < 22 %}
rgba(93, 157, 82, 0.7); /* Vert confort */
{% elif states('sensor.temp_ch_parents_temperature') | float >= 22 and states('sensor.temp_ch_parents_temperature') | float < 25 %}
rgba(243, 169, 60, 0.7); /* Orange chaud */
{% else %}
rgba(203, 79, 64, 0.7); /* Rouge trop chaud */
{% endif %};
}
/* Style pour faire clignoter le badge si ON */
mushroom-badge-icon {
{% if is_state('binary_sensor.mvt_ch_parents_occupancy', 'on') %}
animation: blink 1s infinite; /* Clignotement */
{% endif %}
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.fen_ch_parents_contact
icon: |
{% if is_state(entity, 'on') %}
mdi:window-open-variant
{% elif is_state(entity, 'off') %}
mdi:window-closed-variant
{% else %}
mdi:alert
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
pink
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.fen_ch_parents_contact', 'on') %}
background-color: rgba(255, 0, 0, 0.2) !important; /* Rouge avec opacité 0.2 */
{% elif is_state('binary_sensor.fen_ch_parents_contact', 'off') %}
background-color: rgba(var(--rgb-secondary-text-color), 0.1) !important; /* Couleur claire si OFF */
{% else %}
background-color: rgba(255, 165, 0, 0.2) !important; /* Orange avec opacité 0.2 si autre état */
animation: blink 1.0s infinite; /* Animation de clignotement personnalisée */
{% endif %}
border-radius: 5px; /* Arrondi des coins */
}
@keyframes blink {
0%, 100% { opacity: 1; }
10%, 80% { opacity: 0.5; } /* Coups rapides */
40%, 60% { opacity: 1; } /* Coups lents */
}
- type: template
entity: binary_sensor.pte_ch_parents_contact
icon: |
{% if is_state(entity, 'on') %}
mdi:door-open
{% elif is_state(entity, 'off') %}
mdi:door-closed
{% else %}
mdi:alert
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
pink
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.pte_ch_parents_contact', 'on') %}
background-color: rgba(255, 0, 0, 0.2) !important; /* Rouge avec opacité 0.2 */
{% elif is_state('binary_sensor.pte_ch_parents_contact', 'off') %}
background-color: rgba(var(--rgb-secondary-text-color), 0.1) !important; /* Couleur claire si OFF */
{% else %}
background-color: rgba(255, 165, 0, 0.2) !important; /* Orange avec opacité 0.2 si autre état */
animation: blink 1.0s infinite; /* Animation de clignotement personnalisée */
{% endif %}
border-radius: 5px; /* Arrondi des coins */
}
@keyframes blink {
0%, 100% { opacity: 1; }
10%, 80% { opacity: 0.5; } /* Coups rapides */
40%, 60% { opacity: 1; } /* Coups lents */
}
- type: template
entity: light.grp_ecl_ch_parents
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières de la CH Parents
content:
type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-template-card
entity: light.ecl_ch_parents
icon: mdi:ceiling-light
primary: Plafonnier
layout: horizontal
icon_color: >
{% if is_state('light.ecl_ch_parents', 'on') %} {% if
state_attr('light.ecl_ch_parents', 'rgb_color') %}
{% set r = state_attr('light.ecl_ch_parents', 'rgb_color')[0] | int %}
{% set g = state_attr('light.ecl_ch_parents', 'rgb_color')[1] | int %}
{% set b = state_attr('light.ecl_ch_parents', 'rgb_color')[2] | int %}
#{{ '%02x%02x%02x' % (r, g, b) }}
{% else %}
yellow
{% endif %} {% else %} grey {% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color:
{% if is_state('light.ecl_ch_parents', 'on') %}
{% if state_attr('light.ecl_ch_parents', 'rgb_color') is not none %}
rgba({{ state_attr('light.ecl_ch_parents', 'rgb_color')[0] }}, {{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[1] }}, {{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[2] }}, 0.4) !important;
{% else %}
rgba(255, 215, 0, 0.4) !important;
{% endif %}
{% elif is_state('light.ecl_ch_parents', 'off') %}
rgba(var(--rgb-secondary-text-color), 0.1) !important;
{% else %}
rgba(255, 165, 0, 0.4) !important;
{% endif %};
border-radius: 25px;
}
- type: custom:mushroom-template-card
entity: light.ecl_ch_parents_bureau
icon: mdi:desk-lamp
primary: Bureau
layout: horizontal
icon_color: >
{% if is_state('light.ecl_ch_parents_bureau', 'on') %}
{% if state_attr('light.ecl_ch_parents_bureau',
'rgb_color') %}
{% set r = state_attr('light.ecl_ch_parents_bureau', 'rgb_color')[0] | int %}
{% set g = state_attr('light.ecl_ch_parents_bureau', 'rgb_color')[1] | int %}
{% set b = state_attr('light.ecl_ch_parents_bureau', 'rgb_color')[2] | int %}
#{{ '%02x%02x%02x' % (r, g, b) }}
{% else %}
yellow
{% endif %} {% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color:
{% if is_state('light.ecl_ch_parents_bureau', 'on') %}
{% if state_attr('light.ecl_ch_parents_bureau', 'rgb_color') is not none %}
rgba({{ state_attr('light.ecl_ch_parents_bureau', 'rgb_color')[0] }}, {{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[1] }}, {{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[2] }}, 0.4) !important;
{% else %}
rgba(255, 215, 0, 0.4) !important;
{% endif %}
{% elif is_state('light.ecl_ch_parents_bureau', 'off') %}
rgba(var(--rgb-secondary-text-color), 0.1) !important;
{% else %}
rgba(255, 165, 0, 0.4) !important;
{% endif %};
border-radius: 25px;
}
icon: mdi:lightbulb-group
hold_action:
action: toggle
icon_color: |-
{% if is_state('light.grp_ecl_ch_parents', 'on') %}
{% if state_attr('light.grp_ecl_ch_parents', 'rgb_color') %}
{% set r = state_attr('light.grp_ecl_ch_parents', 'rgb_color')[0] | int %}
{% set g = state_attr('light.grp_ecl_ch_parents', 'rgb_color')[1] | int %}
{% set b = state_attr('light.grp_ecl_ch_parents', 'rgb_color')[2] | int %}
#{{ '%02x%02x%02x' % (r, g, b) }}
{% else %}
yellow
{% endif %}
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
background-color:
{% if is_state('light.grp_ecl_ch_parents', 'on') %}
{% if state_attr('light.grp_ecl_ch_parents', 'rgb_color') is not none %}
rgba({{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[0] }}, {{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[1] }}, {{ state_attr('light.grp_ecl_ch_parents', 'rgb_color')[2] }}, 0.4) !important;
{% else %}
rgba(255, 215, 0, 0.4) !important;
{% endif %}
{% elif is_state('light.grp_ecl_ch_parents', 'off') %}
rgba(var(--rgb-secondary-text-color), 0.1) !important;
{% else %}
rgba(255, 165, 0, 0.4) !important;
{% endif %};
border-radius: 5px;
}
- type: template
entity: switch.grp_pc_ch_parents
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Prises de la CH Parents
content:
type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-entity-card
entity: switch.pc_ch_parents_bureau
name: Bureau
icon: mdi:desk
icon_color: green
primary_info: name
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color:
{% if is_state('switch.pc_ch_parents_bureau', 'on') %}
rgba(0, 128, 0, 0.3) !important;;
{% endif %};
border-radius: 25px;
}
- type: custom:mushroom-entity-card
entity: switch.pc_ch_parents_moustiques
icon_color: green
primary_info: name
name: Moustiques
icon: fas:mosquito
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background-color:
{% if is_state('switch.pc_ch_parents_moustiques', 'on') %}
rgba(0, 128, 0, 0.3) !important;;
{% endif %};
border-radius: 25px;
}
- type: custom:mushroom-entity-card
entity: switch.pc_ch_parents_camera
name: Caméra
icon: mdi:cctv
icon_color: pink
primary_info: name
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color:
{% if is_state('switch.pc_ch_parents_camera', 'on') %}
rgba(255, 0, 0, 0.2) !important;;
{% endif %};
border-radius: 25px;
}
icon: mdi:power-plug
hold_action:
action: toggle
icon_color: |
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state('switch.grp_pc_ch_parents', 'on') %}
background-color: rgba(0, 128, 0, 0.4) !important; /* Vert avec opacité 0.2 */
{% elif is_state('switch.grp_pc_ch_parents', 'off') %}
background-color: rgba(var(--rgb-secondary-text-color), 0.1) !important; /* Couleur claire si OFF */
{% else %}
background-color: rgba(255, 165, 0, 0.2) !important; /* Orange avec opacité 0.2 si autre état */
{% endif %}
border-radius: 5px; /* Arrondi des coins */
}
alignment: end
card_mod:
style: |
ha-card {
padding: 10px;
margin-left: -40px;
}