Créer une carte élégante et interactive, regroupant :

custom:vertical-stack-in-cardcustom:mini-graph-cardcustom:mushroom-* cardsLe code est divisé en deux parties : la carte d’information principale et la barre d’actions rapides.
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lampe_sp
icon: mdi:sofa
primary: Salon
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
background: linear-gradient(
0deg,
rgba(255, 152, 0, 1) calc({{ state_attr(config.entity, 'brightness') | float / 2.55 }}%),
rgba(255, 152, 0, 0.2) 0.1%
) !important;
{% endif %}
}
.: |
ha-card {
width: 500px;
left: -20px;
top: -10px;
height: 80px !important;
--icon-size: 80px;
}
ha-state-icon {
{% if is_state(config.entity, 'on') %}
color: white !important;
{% else %}
color: grey !important;
{% endif %}
}
secondary: >
🌡️{{ states("sensor.interieur_temperature") | float(0) | round(1)
}}°C 💧{{ states("sensor.interieur_humidite") | default('N/A') }}%
🚪{{ states("sensor.compteur_porte_salon") | default('N/A') }} 🪟{{
states("sensor.compteur_fenetres_salon") | default('N/A') }} ☀️{{
states("sensor.presence_sensor_fp2_c57c_light_sensor_light_level") |
default('N/A') }} lux 💡{{ states("sensor.compteur_lumieres_salon")
| default('N/A') }} {% if is_state('light.lampe_sp', 'on') and
state_attr('light.lampe_sp', 'brightness') != none %}
- {{ (state_attr('light.lampe_sp', 'brightness') | float(0) / 2.54) | round(0) }}%
{% endif %}
layout: horizontal
tap_action:
action: toggle
- type: custom:mini-graph-card
entities:
- entity: sensor.interieur_temperature
name: Temperature
height: 80
hours_to_show: 24
points_per_hour: 2
line_width: 1
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
primary_info: none
secondary_info: none
entity: light.lampe_tv
tap_action:
action: toggle
icon_color: accent
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if states(config.entity) == 'on' and state_attr(config.entity, 'brightness') != none %}
{% if state_attr(config.entity,'rgb_color') != none %}
background: linear-gradient(0deg, rgba{{ (state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (1,) }} calc({{ state_attr(config.entity,'brightness') | float / 2.55 }}%), rgba{{ (state_attr(config.entity,'rgb_color')[0] * 0.85, state_attr(config.entity,'rgb_color')[1] * 0.85, state_attr(config.entity,'rgb_color')[2] * 0.85) + (0.2,) }} 0.1%) !important;
{% else %}
background: linear-gradient(0deg, rgba(255, 152, 0, 1) calc({{ state_attr(config.entity,'brightness') | float / 2.55 }}%), rgba(255, 152, 0, 0.2) 0.1%) !important;
{% endif %}
{% endif %}
}
.: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
color: white !important; # Couleur de l'icône lorsque l'entité est allumée
{% else %}
color: grey !important; # Couleur de l'icône lorsque l'entité est éteinte
{% endif %}
}
- type: custom:mushroom-fan-card
entity: binary_sensor.fil_pilote_salon
icon_animation: true
primary_info: none
secondary_info: none
show_oscillate_control: false
show_percentage_control: false
show_direction_control: false
tap_action:
action: more-info
- type: custom:mushroom-entity-card
primary_info: none
secondary_info: none
entity: binary_sensor.presence_sensor_fp2_c57c_presence_sensor_1
fill_container: false
tap_action:
action: more-info
icon_color: red
- type: custom:mushroom-light-card
primary_info: none
secondary_info: none
entity: light.lampe_aquarium
tap_action:
action: toggle
- type: custom:mushroom-entity-card
primary_info: none
secondary_info: none
entity: input_button.infos
fill_container: false
tap_action:
action: navigate
navigation_path: /lovelace/salon