Super merci. Ton Dashboard est un mélange de bubble Card et de mushroom si je comprends bien 
Plus maintenant, je suis full Bubble, mais au moment de ce screen, il l’était.
Enfin… Ca dépend des onglets…!
Merci pour l’info. Je suis occupé de à refaire entièrement mon dash également en full bubble et decluttering.
Bonjour à tous,
J’essaie de me faire un dashbord sympa, à base de Bubble-Cards.
Je vais construire petit à petit ce dashboard, car j’ai peu de temps en journée à y consacrer et que ce que j’ai par ailleurs est un bordel pas possible XD
Je précise que je ne suis pas très doué avec le YAML de HomeAssistant, ni avec toutes les subtilités de ce dernier…
Mais j’apprends par l’exemple.
Je travaille sur ce dashboard en YAML pur, depuis VSCode sur mon mac.
Aujourd’hui j’essaie de faire une carte qui va m’afficher le nombre de mises-à-jours disponible, cliquable pour voir les MAJ à faire.
J’aurais besoin d’aide pour adapter mon code actuel aux Bubble-Cards 
J’ai ce code pour la carte de base qui affiche le nombre de MAJ :
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Software et modules
secondary: |2-
{% if is_state(entity, '0') %}
Tout est à jour
{% elif is_state(entity, '1') %}
1 mise à jour
{% else %}
{{ states(entity)}} mises à jour
{% endif %}
icon: mdi:home-assistant
entity: sensor.nombre_de_mise_a_jour_total
icon_color: |2-
{% if is_state(entity, '0') %}
light-blue
{% else %}
orange
{% endif %}
J’aimerais afficher en popup quand on clique dessus ce qui est décrit dans ce post :
J’ai déjà le code de ceci, à peu près fonctionnelle (je n’arrive pas à avoir la première ligne, car je n’ai pas leswitch.hacs_pre_release. @mrgrlscz si tu passes par-là, voudrais-tu bien le donner, s’il te plait ?)
(j’ai aussi un souci avec les entités HACS sans icônes…, mais c’est un autre souci).
Merci pour votre aide ^^
Tu dois l’avoir mais désactivée par défaut.
il faut l’activer dans paramètres / devices & intégrations / hacs / hacs / diagnostic
type: custom:bubble-card
card_type: button
entity: sun.sun
button_action:
tap_action:
action: navigate
navigation_path: '#update'
Pour ce qui est de « convertir » ta carte existante en bubble-card… C’est plus complexe que ça en a l’air:
Bubble ne gère pas les templates Jinja2.
Je te conseillerais d’être plutôt à l’aise avec le yaml / css / templates avant de te lancer là dedans!
Merci @mrgrlscz
J’avance un petit peu ^^
Avec ce code, je peux afficher un début de popup pour les MAJ :
- type: custom:bubble-card
card_type: button
button_type: state
card_layout: large-2-rows
name: Update(s) Software & modules
entity: sensor.texte_avec_nombre_de_mise_a_jour_total
icon: mdi:update
show_state: true
button_action:
tap_action:
action: navigate
navigation_path: '#update'
sub_button:
- entity: sensor.tplt_available_updates_system
icon: mdi:home-assistant
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor.tplt_available_updates_addon
icon: mdi:puzzle
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor.tplt_available_updates_hacs
icon: mdi:view-module
show_background: false
show_state: true
tap_action:
action: more-info
le code YAML des deux templates pour afficher le nombre de mise à jour total :
# Nombre de mise à jour total
- name: "Nombre de mise à jour total"
unique_id: "nombre_de_mise_a_jour_total"
state: >
{{ states.update
|selectattr('state', 'eq', 'on')
|list
|count
}}
- name: "Texte avec nombre de mise à jour total"
unique_id: "texte_avec_nombre_de_mise_a_jour_total"
state: |2-
{% if is_state('sensor.nombre_de_mise_a_jour_total', '0') %}
{% set text_a_afficher = "Tout est à jour" %}
{% elif is_state('sensor.nombre_de_mise_a_jour_total', '1') %}
{% set text_a_afficher = "1 mise à jour" %}
{% else %}
{% set text_a_afficher = states('sensor.nombre_de_mise_a_jour_total') + " mises à jour" %}
{% endif %}
{{ text_a_afficher }}
Maintenant faut que je vois comment intégrer dans la popup les cartes qui affichent les mises à jour…
Je n’ai pas trop saisi la dernière phrase 
Mais j’apprends par l’exemple
Edit : ajout du code des template
Bon, et bien je ne comprends comment ajouter à la popup d’autres cartes…
à savoir la liste des mises à jour disponible…
Un pop-up bubble, est obligatoirement tout en haut d’une vertical-stack, suivent ensuite les cartes que tu veux y intégrer:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#update'
name: Mises à jour
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
J’ai corrigé (tapé à la vas-vite) ^^
Un exemple: jette un oeil à la partie styles:
Code
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#update'
name: Mises à jour
sub_button:
- entity: switch.hacs_pre_release
name: Beta
show_name: false
icon: ""
show_state: true
show_last_changed: false
show_attribute: false
show_icon: false
show_background: true
tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
name: "Mise(s) à jour ignorée(s):"
entity: binary_sensor.tplt_skipped_updates_all
styles: |-
ha-card { color: var(--primary-background-color); }
.bubble-line {
background: var(--primary-background-color);
opacity: 0.2;
margin-right: 8px;
}
${
card.querySelector('.bubble-name').innerText = hass.formatEntityAttributeValue(hass.states[entity], 'count')
+ (hass.states[entity].attributes.count == '1' ? ' ignorée' : ' ignorées')
}
- type: custom:flex-table-card
etc etc...
Salut a tous.
Merci a @Clooos pour ce superbe travail que je vais m’empresser d’adopter.
Une petite question : comment ne faire apparaître un sub-button sur une condition d’état?
(par exemple ne faire apparaitre un sub button d’une light seulement si elle allumée, si éteinte pas de sub button).
Merci!
non ce que tu demandes n’est pas possible en utilisant juste un paramètre modifiant la présence ou l’absence du sub button
Par contre si tu veux obtenir le même résultat tu peux créer deux cartes conditionnelles contenant à chacune d’elles une bubble card : l’une avec le sub button et l’autre non
Il y a aussi les templates à placer dans les custom styles de Bubble Card, il y a des exemples dans la documentation sur GitHub, avec cet exemple justement.
effectivement
le code
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: lumieres salon
icon: mdi:ceiling-light-multiple-outline
- type: custom:bubble-card
card_type: button
hash: '#yeelight 1'
tap_action:
action: navigate
navigation_path: '#salon'
entity: light.lumieres_salon
show_state: false
sub_button:
- entity: light.yeelight_1
name: y1
show_icon: true
show_name: true
styles: |-
.bubble-sub-button-1 {
display: ${hass.states['light.yeelight_1'].state === 'on' ? '' : 'none'} !important;
}
- type: custom:bubble-card
card_type: button
entity: light.yeelight_1
Salut à tous,
est-il possible de changer l’icon principal en fonction de l’etat de l’entité ?
Par exemple ma piscine possède plusieurs mode de fonctionne grace à un input select, je voudrais qu’en fonction du mode, l’icon du bubble principal change.
Merci
pour ma part j’essaye de changer le name d’un sub-button, le but serait de changer le texte en fonction de l’etat d’un sensor mais je n’arrive deja pas a changer tout simplement le texte.
Ca fonctionne pour la bubble card principale mais pas pour le sub-button
code 1:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Electro-Vannes
icon: mdi:pipe-valve
- type: custom:bubble-card
card_type: button
entity: switch.vanne_generale
sub_button:
- show_state: false
show_last_changed: false
show_icon: false
show_background: true
show_name: true
styles: |-
${card.querySelector('.sub-button-name').innerText =
hass.formatEntityState(hass.states['switch.vanne_generale'])}
styles: |-
.bubble-icon {
color: ${hass.states['switch.vanne_generale'].state === 'off' ? 'green' : 'red'} !important;
}
${card.querySelector('.bubble-name').innerText =
hass.formatEntityState(hass.states['switch.vanne_generale'])}
show_state: false
code 2 :
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Electro-Vannes
icon: mdi:pipe-valve
- type: custom:bubble-card
card_type: button
entity: switch.vanne_generale
sub_button:
- show_state: false
show_last_changed: false
show_icon: false
show_background: true
show_name: true
name: |-
${card.querySelector('.sub-button-name').innerText =
hass.formatEntityState(hass.states['switch.vanne_generale'])}
styles: |-
.bubble-icon {
color: ${hass.states['switch.vanne_generale'].state === 'off' ? 'green' : 'red'} !important;
}
${card.querySelector('.bubble-name').innerText =
hass.formatEntityState(hass.states['switch.vanne_generale'])}
show_state: false
Merci!
essaye plutôt qlqc comme ça:
type: custom:bubble-card
card_type: separator
styles: |-
.bubble-line {
background: var(--accent-color) !important;
}
ou
type: custom:bubble-card
card_type: separator
styles: |-
.bubble-line {
background: var(--primary-color) !important;
opacity: 0.5;
}
ou
type: custom:bubble-card
card_type: separator
styles: |-
.bubble-line {
background: black !important;
}Merci pour ton retour et effectivement la dernière fonctionne très bien 
J’ai ajouté opacity en plus :
type: custom:bubble-card
card_type: separator
name: Piscine
icon: mdi:pool-thermometer
styles: |-
.bubble-line {
background: blue !important;
opacity: 0.6;
}
Je complète si besoin pour d’autres avec changement de la couleur de l’Icon et la taille de la police :
type: custom:bubble-card
card_type: separator
name: Piscine
icon: mdi:pool-thermometer
styles: |-
.bubble-line {
background: #1E7FCB !important;
opacity: 1;
}
.bubble-icon {
color: #1E7FCB !important;
}
* {
font-size: 20px !important;
}
card_layout: large