Pourquoi ne pas partir du code et du tuto pas à pas alors ?
Je l’ai fait justement pour ça…
Salut @BBE,
card_mod est en version 4 beta et qui corrige le problème avec vertical-stack-in-card ou quand on avait du code card_mod sur une carte , il disparaissait quand on réédite une carte. Je crois que ca le fesait sur d’autre carte aussi.
J’ai testé et c’est fonctionnelle.
Salut,
J’avais échangé avec l’auteur via PM et il m’avait invité à partager mes cartes, manque de temps (puis oublie par la suite, me culpa ! 
), je viens corriger cette erreur :
Voici un aperçu de mes cartes et quelques spécialité que j’ai faites :
Certaines sous-carte de mon salon :
Pour mon philips hue (quand je l’allume les icônes sont en couleurs et je peux choisir la sortie hdmi, mode et intensité) :
tous mes capteurs de vibrations et ouvertures de mes fenêtres avec badge de batterie :
Certaines sous-carte de mon garage/cellier :
Pour ma pompe à chaleur : (j’ai juste mon BSB-LAN de débranché donc les valeurs ne sont pas à jour)
Pour mon ballon thermodynamique :
Ma machine à laver, en secondary j’ai la phase qui apparaît quand elle fonctionne + timer depuis son démarrage (ca ressemble à celle du congélateur un peu plus bas) :
Mon congélateur (je peux voir des statistiques sur son nombre de cycle, le coût et son énergie consommée) :
Pour mon NAS (via ce sujet : [Carte] - Nas Synology)
Beaucoup de temps passé pour en arriver jusqu’ici. Toutes les fonctionnalités ne sont pas encore en place, j’ai mis le max auquel j’ai pensé lorsque j’ai créé les cartes. Par la suite j’achète mes appareils et je complète…
Question bête mais ça a peut-être déjà été abordé dans les 500 messages mais, il existe une manière de mettre un bouton retour ?
Voilà, si quelque chose de précis vous intéresses, je peux vous en faire part, il suffit juste de me demander 
En tout cas, merci pour le partage de vos créations 
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.lumieres_salon
icon: mdi:sofa
primary: Salon
secondary: >-
{{ states('sensor.0x54ef44100091b708_temperature') }}°C • {{
states('sensor.0x54ef44100091b708_humidity') }}% • {{
states('sensor.0xa4c138726ad60c4e_illuminance') }} lux
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.0xa4c138726ad60c4e_presence', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.0xa4c138726ad60c4e_presence', 'on') %}
orange
{% else %}
grey
{% endif %}
color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
features_position: bottom
- type: custom:mushroom-chips-card
chips:
- type: template
entity: plant.alocasia_wentii
icon: mdi:flower
icon_color: |-
{% if is_state(entity, 'problem') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Alocasia Wentii
content:
type: custom:mod-card
card:
type: custom:flower-card
entity: plant.alocasia_wentii
show_bars:
- moisture
- temperature
- illuminance
- humidity
battery_sensor: sensor.plante_alocasia_wentii_battery_state
- type: template
entity: media_player.fire_tv_192_168_1_116
icon: |
{% if is_state(entity, 'playing') %}
mdi:pause
{% elif is_state(entity, 'paused') %}
mdi:play
{% else %}
mdi:play-pause
{% endif %}
icon_color: >
{% if not is_state(entity, 'off') and not is_state(entity,
'unavailable') %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Fire TV Salon
content:
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.fire_tv_192_168_1_116
name: Fire TV
artwork: full-cover
source: full
volume_stateless: false
group: true
idle_view: false
hide:
power: false
icon: false
volume: false
progress: false
controls: false
info: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch.sync_box_synchronisation_des_lumieres
icon: mdi:television-ambient-light
layout: vertical
primary: Philips Hue
icon_color: |
{% if is_state(entity, 'on') %}
accent
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
text-align: center;
}
- type: custom:mushroom-template-card
icon: mdi:hdmi-port
layout: vertical
primary: HDMI
icon_color: "#2196F3"
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sortie HDMI
size: fullscreen
content:
type: entities
entities:
- entity: select.sync_box_sortie_hdmi
name: Sélection HDMI
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
text-align: center;
display: flex; /* organise les icônes horizontalement */
flex-wrap: wrap; /* passe à la ligne si écran trop petit */
gap: 0px; /* réduit l'espace entre icônes */
padding: 0 8px;
margin: 2px
}
- type: custom:mushroom-template-card
icon: mdi:multimedia
layout: vertical
primary: Mode
icon_color: >
{% if
is_state('switch.sync_box_synchronisation_des_lumieres',
'on') %}
#3F51B5
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Mode Philips Hue
size: fullscreen
content:
type: entities
entities:
- entity: select.sync_box_mode_de_synchronisation
name: Mode
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
text-align: center;
}
- type: custom:mushroom-template-card
icon: mdi:brightness-6
layout: vertical
primary: Luminosité
icon_color: >
{% if
is_state('switch.sync_box_synchronisation_des_lumieres',
'on') %}
#FF9800
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Luminosité Philips Hue
size: fullscreen
content:
type: entities
entities:
- entity: number.sync_box_luminosite
name: Luminosité
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
text-align: center;
}
- type: custom:mushroom-template-card
icon: mdi:sine-wave
layout: vertical
primary: Intensité
icon_color: >
{% if
is_state('switch.sync_box_synchronisation_des_lumieres',
'on') %}
#9C27B0
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Intensité Philips Hue
size: fullscreen
content:
type: entities
entities:
- entity: select.sync_box_intensite
name: Intensité
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
text-align: center;
}
hold_action:
action: navigate
navigation_path: /lovelace-smartphone/echo
- type: template
entity: cover.volet_wiser_salon_porte_fenetre
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_wiser_salon_porte_fenetre
name: Tous les volets
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_wiser_salon_porte_fenetre
name: Volet porte fenêtre
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_wiser_coulissant_droit
name: Volet coulissant droit
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_wiser_coulissant_gauche
name: Volet coulissant gauche
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
icon: mdi:window-shutter
icon_color: >
{% set p1 =
state_attr('cover.volet_wiser_salon_porte_fenetre','current_position')
| int %} {% set p2 =
state_attr('cover.volet_wiser_coulissant_droit','current_position') |
int %} {% set p3 =
state_attr('cover.volet_wiser_coulissant_gauche','current_position') |
int %}
{% if p1 == 0 and p2 == 0 and p3 == 0 %}
#03A9F4
{% elif p1 == 100 and p2 == 100 and p3 == 100 %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: light.0xa4c138030ca780d0
icon: mdi:lightbulb
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.0xa4c138030ca780d0
name: Lampe TV
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
- type: template
entity: vacuum.roborock_s7
icon: mdi:robot-vacuum
icon_color: |
{% if is_state(entity, 'cleaning') %}
#03A9F4
{% else %}
{% set level = states('sensor.roborock_s7_batterie') | int %}
{% if level > 80 %}
green
{% elif level > 40 %}
orange
{% else %}
red
{% endif %}
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Aspirateur Roborock
content:
type: custom:mushroom-vacuum-card
entity: vacuum.roborock_s7
icon_animation: true
fill_container: true
layout: vertical
commands:
- on_off
- start_pause
- stop
- return_home
- locate
- type: template
entity: switch.0x70ac08fffe6de95b
icon: mdi:power-plug
icon_color: >
{% if is_state('switch.0x70ac08fffe6de95b','on') or
is_state('switch.0x70ac08fffe6dd7e8','on') %}
accent
{% else %}
grey
{% endif %}
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Prises salon
content:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.0x70ac08fffe6de95b_power
primary: TV - {{ states('sensor.0x70ac08fffe6de95b_power') }} W
icon: mdi:power-plug
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.0x70ac08fffe6de95b
color: |
{% if is_state('switch.0x70ac08fffe6de95b','on') %}
accent
{% else %}
grey
{% endif %}
- type: custom:mushroom-template-card
entity: sensor.0x70ac08fffe6dd7e8_power
primary: Caméra - {{ states('sensor.0x70ac08fffe6dd7e8_power') }} W
icon: mdi:power-plug
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.0x70ac08fffe6dd7e8
color: |
{% if is_state('switch.0x70ac08fffe6dd7e8','on') %}
accent
{% else %}
grey
{% endif %}
- type: template
entity: climate.salon_clim
icon: mdi:air-conditioner
icon_color: |
{% if is_state(entity, 'cooling') %}
#03A9F4
{% elif is_state(entity, 'heating') %}
red
{% elif is_state(entity, 'fan_only') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Climatisation Salon
content:
type: entities
entities:
- entity: climate.salon_clim
name: Mode et Température
- entity: input_number.salon_clim_temperature
name: Consigne Température
- type: template
entity: >-
binary_sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_gauche_contact
icon: mdi:window-closed-variant
icon_color: >
{% set ouvertures = [
'binary_sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_gauche_contact',
'binary_sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_droit_contact',
'binary_sensor.capteur_ouverture_porte_aqara_salon_porte_fenetre_contact'
] %}
{% set vibrations = [
'binary_sensor.capteur_vibration_aqara_salon_coulissant_gauche_vibration',
'binary_sensor.0x00158d0008f3432b_vibration',
'binary_sensor.capteur_vibration_aqara_cuisine_petite_fenetre_vibration'
] %}
{% if ouvertures | select('is_state', 'on') | list | count > 0 or
vibrations | select('is_state', 'on') | list | count > 0 %}
yellow
{% else %}
#03A9F4
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Capteurs Fenêtres Salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Coulissant Gauche
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 8px 16px 0px 16px !important;
margin-top: -12px !important;
margin-bottom: -4px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: >-
binary_sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_gauche_contact
icon: mdi:window-closed-variant
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
#03A9F4
{% endif %}
badge_icon: mdi:battery
badge_color: >
{% set bat =
states('sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_gauche_battery')
| int(0) %}
{% if bat > 80 %}
green
{% elif bat > 40 %}
orange
{% else %}
red
{% endif %}
primary: Ouverture
secondary: |
{% if is_state(entity, 'on') %}
Ouvert
{% else %}
Fermé
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
entity: >-
binary_sensor.capteur_vibration_aqara_salon_coulissant_gauche_vibration
icon: mdi:vibrate
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
badge_icon: mdi:battery
badge_color: >
{% set bat =
states('sensor.capteur_vibration_aqara_salon_coulissant_gauche_battery')
| int(0) %}
{% if bat > 80 %}
green
{% elif bat > 40 %}
orange
{% else %}
red
{% endif %}
primary: Vibration
secondary: |
{% if is_state(entity, 'on') %}
Détectée
{% else %}
Aucune
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-title-card
title: Coulissant Droit
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 8px 16px 0px 16px !important;
margin-top: -12px !important;
margin-bottom: -4px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: >-
binary_sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_droit_contact
icon: mdi:window-closed-variant
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
#03A9F4
{% endif %}
badge_icon: mdi:battery
badge_color: >
{% set bat =
states('sensor.capteur_ouverture_fenetre_aqara_salon_coulissant_droit_battery')
| int(0) %}
{% if bat > 80 %}
green
{% elif bat > 40 %}
orange
{% else %}
red
{% endif %}
primary: Ouverture
secondary: |
{% if is_state(entity, 'on') %}
Ouvert
{% else %}
Fermé
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
entity: binary_sensor.0x00158d0008f3432b_vibration
icon: mdi:vibrate
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
badge_icon: mdi:battery
badge_color: >
{% set bat =
states('sensor.0x00158d0008f3432b_battery') | int(0)
%}
{% if bat > 80 %}
green
{% elif bat > 40 %}
orange
{% else %}
red
{% endif %}
primary: Vibration
secondary: |
{% if is_state(entity, 'on') %}
Détectée
{% else %}
Aucune
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-title-card
title: Porte-fenêtre
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 8px 16px 0px 16px !important;
margin-bottom: -4px !important;
margin-top: -12px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: >-
binary_sensor.capteur_ouverture_porte_aqara_salon_porte_fenetre_contact
icon: mdi:window-closed-variant
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
#03A9F4
{% endif %}
badge_icon: mdi:battery
badge_color: >
{% set bat =
states('sensor.capteur_ouverture_porte_aqara_salon_porte_fenetre_battery')
| int(0) %}
{% if bat > 80 %}
green
{% elif bat > 40 %}
orange
{% else %}
red
{% endif %}
primary: Ouverture
secondary: |
{% if is_state(entity, 'on') %}
Ouvert
{% else %}
Fermé
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
entity: >-
binary_sensor.capteur_vibration_aqara_cuisine_petite_fenetre_vibration
icon: mdi:vibrate
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
badge_icon: mdi:battery
badge_color: >
{% set bat =
states('sensor.capteur_vibration_aqara_cuisine_petite_fenetre_battery')
| int(0) %}
{% if bat > 80 %}
green
{% elif bat > 40 %}
orange
{% else %}
red
{% endif %}
primary: Vibration
secondary: |
{% if is_state(entity, 'on') %}
Détectée
{% else %}
Aucune
{% endif %}
layout: vertical
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
box-shadow: none !important;
}
- type: template
entity: camera.salon
icon: mdi:video
icon_color: |
{% if is_state(entity, 'streaming') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Caméra Salon
content:
type: picture-entity
entity: camera.salon
- type: template
entity: climate.chauffage_sol_salon
icon: mdi:floor-plan
icon_color: |
{% if is_state(entity, 'heat') %}
red
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Chauffage au sol Salon
content:
type: entities
entities:
- entity: climate.chauffage_sol_salon
name: Contrôle chauffage
alignment: end
card_mod:
style: |
ha-card {
--chip-height: 34px;
--chip-icon-size: 17px;
padding-top: 4px;
margin-top: -8px;
padding-bottom: 9px;
padding-left: 4px;
padding-right: 4px;
}
.chip-container {
gap: 4px !important;
}
Hello @Quentin57520
Faire qque chose comme ceci ?
Si oui, il suffit de sélectionner sous vue dans la configuration de ta vue et cela apparaitra tout seul ; seule contrainte: avoir un bouton qui t’amène à cette vue
voili voilou et bonne année à tout le monde !
Olci
Je viens de découvrir le sujet, et je m’aperçois que j’ai fait pratiquement la même chose, en moins “industrialisé” de mon côté
J’utilise du more-info et pas du popup mais sinon j’exploite “visibilité” via des binaires que j’active via “action” et qui affichent des sous-cartes. Exemple en cliquant sur l’icône du poêle ça deplie les cartes dédiées :
C’est bcp plus réactif qu’un popup ou qu’un more-info j’ai l’impression
Chouette, poste le code d’une de tes cartes, ça peut servir à certains pour s’inspirer !
Quelques questions perso:
- Tu as des « sous cartes » pour tous les boutons, ou seulement pour certains?
- Tu as des actions directes sur certains boutons (lumières volets) ou systématiquement une sous carte
- Comment traites-tu le « reste » (s’il y a lieu) de ton dashboard (y a t’il une entéte au dessus de tes cartes pièces?)
pas pour tous les boutons, juste certains ou j’ai besoin d’afficher de l’info complementaire ou par exemple un webrtc de camera sans que ça bouffe tout mon dashobard.
L’obectif c’est que tout le dashobard tienne sur une seule page
voila un exemple :
- je click sur une icone
- ça active un input.boolean
- j’asservis la visibilté a l’etat du boolean
- je lance un timer qui referme le bolean au bout de 30 secondes => le dashboard revient a l’intial
type: custom:stack-in-card
mode: vertical
keep:
margin: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: lock.serrure_entree
icon: >-
{{ (is_state('binary_sensor.serrure_entree_door_sensor','on'))
|iif('mdi:door-open','mdi:door-closed') }}
icon_color: >-
{{ (is_state('lock.serrure_entree','locked'))
|iif('green','red') }}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.capteur_temperature_salon_temperature
icon_color: deep-orange
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.capteur_temperature_salon_humidity
icon_color: light-blue
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.prise_b_o_power
icon_color: yellow
icon: mdi:speaker
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: entity
entity: sensor.prise_poele_power
icon_color: yellow
icon: mdi:fireplace
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fireplace
entity: climate.poele
icon_color: >-
{{ (states('sensor.prise_poele_power')|int(0) > 0) |
iif('deep-orange', 'lightgrey') }}
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.toggle_lovelace_salon_poele
hold_action:
action: navigate
navigation_path: poele
double_tap_action:
action: none
- type: template
entity: fan.ventilateur_salon
tap_action:
action: more-info
icon: >-
{{ (states('fan.ventilateur_salon') == 'on')
|iif('mdi:fan','mdi:fan-off') }}
icon_color: >-
{{ (states('light.ventilateur_salon') == 'on')
|iif('yellow','lightgrey') }}
hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.ventilateur_salon
double_tap_action:
action: none
- type: template
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
entity: cover.bso_salon
icon: >-
{{ (states('cover.bso_salon') == 'open') |
iif('mdi:blinds-horizontal', 'mdi:blinds-horizontal-closed') }}
content: ""
icon_color: "{{ (states('cover.bso_salon') == 'open') | iif('blue', 'lightgrey') }}"
- type: template
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
entity: cover.vr_tele
icon: >-
{{ (states('cover.vr_tele') == 'open') |
iif('mdi:window-shutter-open', 'mdi:window-shutter') }}
content: ""
icon_color: "{{ (states('cover.vr_tele') == 'open') | iif('blue', 'lightgrey') }}"
- type: template
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
entity: cover.vr_bibliotheque
icon: >-
{{ (states('cover.vr_bibliotheque') == 'open') |
iif('mdi:window-shutter-open', 'mdi:window-shutter') }}
content: ""
icon_color: >-
{{ (states('cover.vr_bibliotheque') == 'open') | iif('blue',
'lightgrey') }}
- type: light
entity: light.grande_lampe_salon
tap_action:
action: more-info
hold_action:
action: toggle
double_tap_action:
action: none
use_light_color: true
content_info: none
- type: light
entity: light.petite_lampe_salon
tap_action:
action: more-info
hold_action:
action: toggle
double_tap_action:
action: none
use_light_color: true
content_info: none
alignment: end
card_mod:
style: |
ha-card {
position: relative;
overflow: hidden;
}
ha-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url('/api/image/serve/b30a9a5a8a6547da1d17dc1689525d3d/512x512');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
opacity: 0.5;
pointer-events: none;
}
ha-card > * {
position: relative;
z-index: 1;
opacity: 0.9;
}
et les sous-cartes :
type: custom:bubble-card
card_type: climate
entity: climate.poele
sub_button:
main:
- name: HVAC modes menu
select_attribute: hvac_modes
state_background: true
show_arrow: false
sub_button_type: select
- entity: climate.poele
select_attribute: preset_modes
state_background: false
show_background: true
sub_button_type: select
bottom: []
show_last_changed: false
show_state: false
state_color: false
show_name: true
card_layout: normal
show_icon: true
scrolling_effect: false
show_attribute: true
attribute: current_temperature
visibility:
- condition: state
entity: input_boolean.toggle_lovelace_salon_poele
state: "on"
double_tap_action:
action: none
hold_action:
action: more-info
tap_action:
action: none
type: entities
entities:
- entity: timer.minuteur_poele_mode_continu
type: custom:timer-bar-card
state_color: true
name: Mode Continu
icon: mdi:fire-alert
- type: buttons
entities:
- entity: automation.destratification_chauffage
show_name: true
name: Destrat.
icon: mdi:ceiling-fan
- entity: switch.schedule_planning_temperatures
show_name: true
name: Prog.
icon: mdi:calendar-text
- entity: switch.poele_mode_chauffe_continue_2
show_name: true
name: Continu
icon: mdi:fire-alert
visibility:
- condition: state
entity: input_boolean.toggle_lovelace_salon_poele
state: "on"
et le bout d’autom :
trigger: state
entity_id:
- input_boolean.toggle_lovelace_salon_poele
to: "on"
for:
hours: 0
minutes: 0
seconds: "{{states('input_number.visibilite_cartes')|int(30)}}"
id: salon poele
actions:
- choose:
- conditions:
- condition: trigger
id:
- salon poele
sequence:
- action: input_boolean.turn_off
metadata: {}
data: {}
target:
entity_id:
- input_boolean.toggle_lovelace_salon_poele
Ce n’est pas un 
, la toute dernière mouture de la carte, son code et ses tutos sont là: [ConcoursDash] Une room card entièrement configurable (+ tutos pour tous sans YAML)
On supprime vertical-stack-in-card. on supprime card-mod, on remplace les chips par une custom-card-features, et voilà le résultat :
On se retrouve alors avec une seule carte (mushroom template, mais si on n’a pas besoin de template, ou si on réalise le template dans une entrée helper, on peut faire la même avec une tuile, on perd alors juste le badge, les premiers tests ont été fait là et là)
Comme on n’a plus qu’une carte et sa fonctionnalité (feature), pour la mise en page, on fait comme une tuile, et on peut tout changer en quelques clics dans l’interface (mode horizontal, mode vertical, info secondaire sur une ou plusieurs lignes, fonctionalités en dessous ou en ligne). Quelques exemples:
Si on supprime les infos principales et secondaires de la carte mushroom template, on peut faire une version minimaliste encore plus compacte:
N’hésitez pas à tester, le code et tous les tutos sont là: [ConcoursDash] Une room card entièrement configurable (+ tutos pour tous sans YAML)
Hello,
Et button card alors ? 
cdt
Une question posée en MP a laquelle je répond ici afin que ça profite à tous…
En réalité il n’y a aucun code YAML ou select wire derrière cet exemple.
Il « suffit » de bien choisir l’entité que l’on met dans la carte mushroom template (ici la PAC, donc un climate) pour avoir acces à ses features (ici les contrôles du climate):
- Selectionner la bonne entité dans le contexte
- Choisir les fonctionalités (
features) associées
le code pour ceux qui veulent vraiment tout savoir...
type: custom:mushroom-template-card
entity: climate.pac
primary: Escalier
secondary: >-
{{ states('sensor.pac_room_temperature') }}°C {% if
is_state('timer.alumage_escalier', 'on') %}- Minuterie {% endif %}
{% set s = states('vacuum.roomba') %}
{%- if s == 'docked' -%}Toto sur base
{%- elif s == 'paused' -%}Toto en pause
{%- elif s == 'cleaning' -%}Toto nettoie
{%- elif s == 'error' -%}Toto bloqué
{%- elif s == 'returning to dock' -%}Toto rentre
{%- else -%} - {%- endif -%}
multiline_secondary: true
icon: mdi:stairs
badge_icon: >-
{% if is_state('binary_sensor.capteur_presence_sonoff2_occupancy', 'on') %}
mdi:motion-sensor {% else %}{% endif %}
badge_color: >-
{% if is_state('binary_sensor.capteur_presence_sonoff2_occupancy', 'on') %}
#ff9800 {% else %}{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/escalier
icon_tap_action:
action: none
icon_hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: group.lumieres_escalier
color: "{{ '#03a9f4' if is_state('group.lumieres_escalier', 'on') else '#9e9e9e' }}"
features_position: bottom
grid_options:
columns: 6
rows: auto
features:
- type: custom:service-call
entries:
- type: button
icon: mdi:lightbulb
styles: >
:host { --icon-color: {{ '#ff9800' if
is_state('group.lumieres_escalier', 'on') else '#9e9e9e' }}; }
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Lumières Escalier
content:
type: vertical-stack
cards:
- type: tile
entity: light.escalier_ampoule_bas
name: Sous escalier
vertical: false
features:
- type: toggle
features_position: inline
- type: tile
entity: light.lampe_mezzanine
name: Mezzanine
features:
- type: toggle
features_position: inline
- type: tile
entity: timer.alumage_escalier
name: Minuterie
hold_action:
action: perform-action
perform_action: homeassistant.toggle
target:
entity_id:
- light.lumieres_escalier
data: {}
entity_id: group.lumieres_escalier
- type: button
icon: |-
{% set s = states('cover.volet_de_la_mezzanine') %}
{% if s == 'open' %} mdi:window-shutter-open
{% elif s == 'closed' %} mdi:window-shutter
{% else %} mdi:window-shutter-alert {% endif %}
styles: >
:host { --icon-color: {{ '#03a9f4' if
states('cover.volet_de_la_mezzanine') not in ['closed'] else '#9e9e9e'
}}; }
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Volet Mezzanine
content:
type: tile
entity: cover.volet_de_la_mezzanine
name: Mezzanine
features:
- type: cover-open-close
features_position: inline
hold_action:
action: perform-action
perform_action: cover.toggle
target:
entity_id: cover.volet_de_la_mezzanine
data: {}
entity_id: cover.volet_de_la_mezzanine
- type: button
icon: >-
{% if is_state('climate.pac', 'heat') %} mdi:fire
{% elif is_state('climate.pac', 'cool') %} mdi:snowflake
{% elif is_state('input_boolean.saison_chauffage', 'on') %} mdi:fire
{% elif is_state('input_boolean.saison_climatistion', 'on') %}
mdi:snowflake
{% else %} mdi:fan {% endif %}
styles: |
:host {
--icon-color:
{%- if is_state('climate.pac', 'heat') -%} orange
{%- elif is_state('climate.pac', 'cool') -%} #03a9f4
{%- else -%} #9e9e9e
{%- endif -%};
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: PAC Étage
content:
type: custom:streamline-card
template: pop-up-pac
hold_action:
action: navigate
navigation_path: /lovelace-smartphone/gestion-pac-gainable
entity_id: climate.pac
- type: button
icon: mdi:information
styles: |
:host {
{% set r = states('vacuum.roomba') %}
{% set m = is_state('capteur_presence_sonoff2_occupancy', 'on') %}
--icon-color:
{%- if r not in ['cleaning', 'docked', 'paused', 'returning', 'idle', 'off'] -%} #ff9800
{%- elif r == 'cleaning' -%} #4caf50
{%- else -%} #9e9e9e
{%- endif -%};
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Escalier
content:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: binary_sensor.capteur_presence_sonoff2_occupancy
- type: entity
entity: sensor.pac_room_temperature
icon_color: blue
- type: template
icon_color: >-
{% set r = states('vacuum.roomba') %} {%- if r not in
['cleaning', 'docked', 'paused', 'returning', 'idle',
'off'] -%} #ff9800 {%- elif r == 'cleaning' -%}
#4caf50 {%- else -%} #9e9e9e {%- endif -%}
icon: mdi:information
content: >-
{% set r = states('vacuum.roomba') %} {%- if r not in
['cleaning', 'docked', 'paused', 'returning', 'idle',
'off'] -%} {{r}} {%- elif r == 'cleaning' -%} nettoie
{%- else -%} RAS {%- endif -%}
- type: heading
icon: ""
heading: Contrôles rapides
heading_style: subtitle
- type: horizontal-stack
cards:
- type: tile
entity: light.lumieres_escalier
name: Lumière
vertical: false
features_position: inline
features:
- type: toggle
- type: tile
entity: cover.volet_de_la_mezzanine
name: Volet
vertical: false
features_position: inline
features:
- type: cover-open-close
- type: custom:streamline-card
template: pop-up-roomba
- type: heading
icon: ""
heading: Thermostat
heading_style: subtitle
- type: custom:streamline-card
template: pop-up-pac
entity_id: group.lumieres_escalier
- style: icons
type: climate-hvac-modes
hvac_modes:
- heat
- cool
- dry
- "off"
- type: target-temperature
Par contre ça ne marche que pour une entité : pas possible de mettre aussi les features de l’aspirateur robot par exemple… Dans ce cas il faut les recréer avec custom features qui est extrêmement complet.