Ah , t’a trouvé une solution pour avoir une bordure en mode section ?
tu le place a quel niveau la carte vertical-stack-in-card ?
Ah , t’a trouvé une solution pour avoir une bordure en mode section ?
tu le place a quel niveau la carte vertical-stack-in-card ?
en tête de la section juste apres le grid.
Exemple:
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: heading
heading: Salon
heading_style: subtitle
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
badges:
- type: entity
entity: sensor.echo_jeanne_temperature
- type: entity
show_state: false
show_icon: true
entity: binary_sensor.echo_salon_mouvement
color: accent
icon: mdi:sofa
- type: heading
icon: ""
heading_style: subtitle
badges:
- type: entity
icon: mdi:flower
show_state: false
show_icon: true
entity: plant.alocatia
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Marsupilami
content:
type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
battery_sensor: sensor.alocasia_zebrina_battery
display_type: compact
- type: entity
show_state: false
show_icon: true
icon: mdi:play-pause
entity: media_player.echo_jeanne
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.echo_jeanne
source: full
volume_stateless: false
group: true
artwork: full-cover
tts:
platform: alexa
entity_id: media_player.echo_jeanne
type: announce
shortcuts:
hide_when_off: true
columns: 3
buttons:
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne
- name: RTL2
type: custom
id: joue la station RTL deux
- name: Pop- Rock
type: custom
id: joue du pop rock
- name: Rock
type: custom
id: joue du rock
- name: Musique douce
type: custom
id: joue de la musique douce
- name: Piano
type: custom
id: joue de la musique au piano
- name: Queen
type: custom
id: joue du Queen
- name: Vianney
type: custom
id: joue du Vianney
- name: Louane
type: custom
id: joue du Louane
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: RTL2
type: custom
id: >-
joue la station RTL deux sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Pop- Rock
type: custom
id: joue du pop rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Rock
type: custom
id: joue du rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Musique douce
type: custom
id: >-
joue de la musique douce sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Piano
type: custom
id: >-
joue de la musique au piano sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Queen
type: custom
id: joue du Queen sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Vianney
type: custom
id: joue du Vianney sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Louane
type: custom
id: joue du Louane sur le groupe rez_de_chaussee
icon: mdi:multicast
- type: entity
entity: cover.salon
show_state: false
show_icon: true
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_du_salon_apero
name: Volet Apero
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: entity
show_state: false
show_icon: true
icon: mdi:lightbulb
color: accent
entity: light.0x84ba20fffe4b2581
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.0x84ba20fffe4b2581
name: Petite Lampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.prise_lampadaire
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.prise_elephants
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.prise_cerisier
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
heading: .
on récupère le code en editant la section en mode YAML:
et en vertical stackincard, aux bugs près, on garde l’UI
Et 0% de card mod…
Le même principe avec Header title + header subtitle + chip: moins compact, plus cliquable:
et toujours 0% cardmod… mais les chips « touchent »…
OK, merci.
d’accord, mais les chips sont coller a la bordure
Yep… un petit coup de card mod et c’est (re)parti…
Sinon les cartes header (en mode title ou subtitle) c’est vraiment sympa pour faire des listes:
On peut faire plein de truc avec les petites entités liées (icone, etat, les deux) et c’est assez puissant.
Je pense que tu vas adorer si tu commences à jouer avec pour tes cartes « techniques »…
Gros travail en cour:
Bonjour la communauté,
Petit soucis pour ma part concernant les chip verticaux, en effet seuls 2 sont affichés, et un grand espace … Comment puis-je remédié à cette problématique ? De même mon icon a coté de la température est un shutter, mais il apparait pas…
En PJ mon visuel avec le code.
Code :
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lumiere_bureau
icon: mdi:desktop-classic
icon_color: |
{% if is_state('light.lumiere_bureau', 'on') %}
orange
{% else %}
grey
{% endif %}
primary: Bureau
secondary: "{{ states(\"sensor.home_temperature\") }}°C"
layout: horizontal
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('cover.volet_bureau_invertiert', 'on') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-close
{% endif %}
badge_color: |
{% if is_state('light.lumiere_bureau', 'on') %}
orange
{% else %}
grey
{% endif %}
fill_container: false
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lumiere_bureau
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: cover.salon
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_bureau_invertiert
name: Volet Bureau
show_position_control: false
show_tilt_position_control: false
show_buttons_control: false
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
grey
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: light
entity: light.armoire
use_light_color: true
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
}
Merci à vous.
Déjà tu n’as pas la même entité pour le badge et sa couleur.
tu es sur de ne pas avoir une faute de frappe?
Tu n’as que deux chips de définis, donc c’est normal de n’en avoir que deux…
Tu n’as pas mis d’option alignement dans ta carte chips regarde si un mode te convient mieux qu’un autre dans l’UI…
Non non j’en ai bien 3 de chip, j’ai light.lumire_bureau
/ cover.salon
/ light.armoire
… Quand je modifie :
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -170px;
background: none;
--chip-border-width: 0;
}
notamment top: -170px
avec une autre valeur, je peux voir le 3ème mais j’amais les trois d’un coup.
Salut à toi j’ai copié ton code dans mon ha pour moi il y a un autre souci que ta carte car sa fonctionne , pour l’icône du volet il faut changer l’attribut on par open et elle va apparaître par magie
Si je comprends bien, un travail est en cours pour adapter la room-card aux sections ? Je passe tout mon dashboard téléphone dessus, et j’utilise ta room-card, alors le sujet m’intéresse beaucoup !
Il n’y a rien de vraiment en cours…
J’utilise mes room cards dans des sections depuis plusieurs mois. Ça marche.
En parallèle on est quelques uns a réfléchir a réduire la dépendance aux cartes custom. Et ma room cards utilise a la fois vertical stack et mushroom…
Donc il y a des tests en cour de certains pour trouver une alternative core. Pour l’instant on en est loin…
Assez d’accord avoir toi @BBE c’est loin d’être gagné ou alors @piitaya nous prépare pour Noël une room card horizontale et vertical sur nos inspirations en natif
J’aimerais aussi en natif une carte plus petite pour les volets je passe encore par la mushroom comme pour mes têtes thermostatiques.
Hello,
Effectivement je suis aussi dans le même état d’esprit que vous, voulant optimiser et alléger mes dashboard.
J’ai l’impression d’avoir régressé par rapport à ma 1er carte visuellement, mais pour le moment cela me convient plutot bien.
Il manque quand même un petit background qui va bien pour détourer la carte, que j’avais avec stack-in-card
Oui c’est des fourrage de carte ou groupement de carte qui manque parfois pour délimiter des zones
Joli travail
J’espère qu’on pourra un jour avoir l’option de mettre un background et un cadre sur une section…
Pour moi ce serait la fin des stack-in-card…
Dans le cadre du mois Whath the heck: WTH I can't specify a background color per section? - Month of "What the heck?!" - Home Assistant Community
N’hésitez pas à voter…
Salut @BBE
C’est fait !!!
c’est fais , a voter !!!
ca manque un background et bordure…
Fait aussi
Mais j’adore le mec dit le faire en card_mod mais ne donne pas la solution pour autant pour tout ceux qui attende un potentiel dev !
Pourquoi vouloir retirer card-mod ? Car c’est lourd ? C’est étonnant car le dev de custum-ui dit de privilégier card-mod…