Tu pourrais partager ton yaml avec ces cartes stp ?
Alors plutôt qu’un screen l’ajout du code complet via
permettrait à plus de personne de pouvoir te répondre 
Pour utiliser, la même chose de mon coté je confirme que l’important est bien placé en tout cas cela fonctionne très bien comme ceci
1 « J'aime »
salut @jerome6994, je répondais à un post de @MilesTEG1 (sujet 298 - [ CARTE ] Bubble Card - Des pop-up et une collection de cartes minimalistes - #298 par MilesTEG1) d’où le screenshot… Ce n’est pas la bonne approche ?
Salut,
il est mal réveiller, je lui avais mis un exemple hier :
1 « J'aime »
Alors, pour cité le poste en question c’est mieux cela fait le lien, imbriqué le code en question comme évoqué c’est super cela permet d’avoir la source + le point précis de ta remarque.
je n’avais pas fait le lien pour ma part avec un poste précédent, pourtant j’aide activement notre ami dans quelques lignes de code avant un partage plus large.
sinon je confirme que ceci fonctionne très bien chez moi :
.bubble-sub-button-3 {
background-color: ${ hass.states['light.ecl_terrasse']?.state === 'on'
? (hass.states['light.ecl_terrasse']?.attributes.rgb_color
? `rgba(${hass.states['light.ecl_terrasse']?.attributes.rgb_color[0]},
${hass.states['light.ecl_terrasse']?.attributes.rgb_color[1]},
${hass.states['light.ecl_terrasse']?.attributes.rgb_color[2]}, 0.4)`
: 'rgba(255, 220, 200, 0.4)')
: (hass.states['light.ecl_terrasse']?.state === 'off'
? ''
: 'rgba(255, 165, 0, 0.4)')
} !important;
color: ${ hass.states['light.ecl_terrasse']?.state === 'on'
? (hass.states['light.ecl_terrasse']?.attributes.rgb_color
? `#${hass.states['light.ecl_terrasse']?.attributes.rgb_color[0].toString(16).padStart(2, '0')}${hass.states['light.ecl_terrasse'].attributes.rgb_color[1].toString(16).padStart(2, '0')}${hass.states['light.ecl_terrasse'].attributes.rgb_color[2].toString(16).padStart(2, '0')}`
: 'rgba(255, 220, 200, 1)')
: 'grey'
} !important;
}
Tout ceci est tiré de la doc que @WarC0zes avait mis en lien dans un autre poste mais que je mets ici au cas où
1 « J'aime »
@WarC0zes 
si si très bien réveillé et j’ai même implémenté puis RTFMé la doc. C’est en lisant de nouveau ce fil de discussion que j’ai vu comment milesTEG1 avait créé des conditions imbriquées (ce que je cherche aussi pour gérer l’affichage d’une batterie) et suggéré de déplacer la clause important avant les accolades… mais bon pas une bonne idée à priori puisque @jerome6994 confirme que cela fonctionne pour lui.
cela donne ça par exemple :
Le code da la carte sans les popup
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.temp_ch_parents_temperature
name: Parents
icon: mdi:bed-king
show_state: false
show_attribute: true
scrolling_effect: false
tap_action:
action: none
double_tap_action:
action: navigate
navigation_path: /lovelace/Parents
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: navigate
navigation_path: /lovelace/Parents
hold_action:
action: none
card_layout: large
styles: |
.bubble-button-card-container {
background: rgba(var(--rgb-secondary-text-color), 0.2) !important;
}
.bubble-button-card-container .bubble-icon {
color: rgba(146, 107, 199, 1) !important; /* Couleur de l'icône */
background-color: rgba(146, 107, 199, 0.2) !important; /* Fond de l'icône en violet avec opacité 0.2 */
border-radius: 50%; /* Pour donner un effet circulaire à l'arrière-plan de l'icône */
padding: 5px; /* Ajoute un espace autour de l'icône */
}
.bubble-sub-button-1 {
background: ${ hass.states['binary_sensor.mvt_ch_parents_occupancy']?.state !== 'on'
? ''
: 'rgba(247, 53, 67, 0.4)'
} !important;
color: ${ hass.states['binary_sensor.mvt_ch_parents_occupancy']?.state === 'on'
? 'rgba(247, 53, 67, 1)'
: 'grey'
} !important;
}
.bubble-sub-button-2 {
background: ${ hass.states['binary_sensor.pte_ch_parents_contact']?.state !== 'on'
? ''
: 'rgba(247, 53, 67, 0.4)'
} !important;
color: ${ hass.states['binary_sensor.pte_ch_parents_contact']?.state === 'on'
? 'rgba(247, 53, 67, 1)'
: 'grey'
} !important;
}
.bubble-sub-button-3 {
background: ${ hass.states['binary_sensor.fen_ch_parents_contact']?.state !== 'on'
? ''
: 'rgba(247, 53, 67, 0.4)'
} !important;
color: ${ hass.states['binary_sensor.fen_ch_parents_contact']?.state === 'on'
? 'rgba(247, 53, 67, 1)'
: 'grey'
} !important;
}
.bubble-sub-button-4 {
background: ${ hass.states['switch.grp_pc_ch_parents']?.state !== 'on'
? ''
: 'rgba(0, 202, 139, 0.3)'
} !important;
color: ${ hass.states['switch.grp_pc_ch_parents']?.state === 'on'
? 'rgba(0, 202, 139, 1)'
: 'grey'
} !important;
}
.bubble-sub-button-5 {
background-color: ${ hass.states['light.grp_ecl_ch_parents']?.state === 'on'
? (hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color
? `rgba(${hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color[0]},
${hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color[1]},
${hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color[2]}, 0.4)`
: 'rgba(255, 220, 200, 0.4)')
: (hass.states['light.grp_ecl_ch_parents']?.state === 'off'
? ''
: 'rgba(255, 165, 0, 0.4)')
} !important;
color: ${ hass.states['light.grp_ecl_ch_parents']?.state === 'on'
? (hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color
? `#${hass.states['light.grp_ecl_ch_parents']?.attributes.rgb_color[0].toString(16).padStart(2, '0')}${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[1].toString(16).padStart(2, '0')}${hass.states['light.grp_ecl_ch_parents'].attributes.rgb_color[2].toString(16).padStart(2, '0')}`
: 'rgba(255, 220, 200, 1)')
: 'grey'
} !important;
}
${(() => {
const temperature = parseFloat(state);
const humidity = hass.states['sensor.temp_ch_parents_humidity']?.state; // Utilisation du capteur d'humidité
let color;
// Conditions pour définir la couleur
if (temperature < 15) {
color = 'rgba(70, 130, 180, 1)'; // Bleu froid
} else if (temperature >= 15 && temperature < 22) {
color = 'rgba(93, 157, 82, 0.7)'; // Vert confort
} else if (temperature >= 22 && temperature < 25) {
color = 'rgba(243, 169, 60, 0.7)'; // Orange chaud
} else {
color = 'rgba(203, 79, 64, 0.7)'; // Rouge trop chaud
}
// Met à jour le texte et la couleur
card.querySelector('.bubble-state').innerText =
(temperature.toFixed(1) + "°C") + (' • ' + (humidity ? parseFloat(humidity).toFixed(0) + "%" : "N/A")); // Arrondir l'humidité à 0 décimale
// Applique la couleur et rend le texte en gras
card.querySelector('.bubble-state').style.color = color; // Applique la couleur
card.querySelector('.bubble-state').style.fontWeight = 'bold'; // Texte en gras
card.querySelector('.bubble-state').style.fontSize = '13px'; // Taille de police à 13 pixels
})()} !important
sub_button:
- entity: binary_sensor.mvt_ch_parents_occupancy
- entity: binary_sensor.pte_ch_parents_contact
- entity: binary_sensor.fen_ch_parents_contact
- entity: switch.grp_pc_ch_parents
tap_action:
action: navigate
navigation_path: "#PC_CH_Parents"
- entity: light.grp_ecl_ch_parents
tap_action:
action: navigate
navigation_path: "#ECL_CH_Parents"
card_mod: null
1 « J'aime »
Super ! et merci pour ton code, je retrouve un peu de syntaxe qui me parle un peu plus (if then else) ;-). Je v tester demain !!
On est bien d’accord en revanche que la dernière ligne :
card_mod: null
n’est pas nécéssaire ?
1 « J'aime »
De rien, nous sommes là pour partager les réussites comme les échecs et là je trouve que c’est une réussite pour moi pas en design mais en carte qui fonctionne
euh surement même pas fait attention que je l’avais encore
en tout cas en la supprimant la je ne vois rien à l’écran qui change
1 « J'aime »
Bonjour à tous,
Avez-vous réussi à utiliser les styles avec la carte media-player ?
J’ai réussi à modifier le fond avec :
styles: |-
.bubble-media-player-container {
background: ;
}
Mais impossible de faire autre chose. Je souhaiterais modifier le fond des boutons, surtout Play.
Salut,
Bon, maintenant que j’ai quelque chose de sympa pour les MAJ (qui sera perfectionné plus tard), voilà le code du dashboard (mode section)
type: sections
path: home
max_columns: 3
title: Home
background:
image: /local/_wallpapers/blue.jpg
sections:
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Alarme
icon: mdi:shield-home
card_layout: normal
rows: 1
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0.1;
}
ha-card {
border-radius: 0px !important;
padding-top: 20px !important;
padding-bottom: 80px !important;
bottom: 0 !important;
}
sub_button: []
- type: custom:bubble-card
card_type: button
name: ""
show_last_changed: true
show_attribute: false
show_state: true
force_icon: true
button_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
sub_button:
- name: Désactiver
icon: mdi:shield-off
show_name: false
show_state: false
show_last_changed: false
show_attribute: false
tap_action:
action: call-service
service: script.script_yaml_alarme_ima_desactivation
target: {}
- name: Mode Nuit
icon: mdi:shield-home
show_name: false
show_state: false
tap_action:
action: call-service
service: script.script_yaml_alarme_ima_activation_en_mode_presence
target: {}
- icon: mdi:shield-lock
name: Mode Absence
show_name: false
tap_action:
target: {}
action: call-service
service: script.script_yaml_alarme_ima_activation_en_mode_absence
show_icon: true
entity: alarm_control_panel.alarme_maison
button_type: state
show_icon: true
attribute: code_format
styles: |
.bubble-button-background {
opacity: 0.15 !important;
background-color:
${ state === 'armed_away'
? 'rgba(0, 255, 0)'
: state === 'armed_home'
? 'rgba(0, 255, 200)'
: state === 'disarmed'
? 'rgba(255, 127, 0)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon {
opacity: 1 !important;
color:
${ state === 'armed_away'
? 'rgba(0, 255, 0)'
: state === 'armed_home'
? 'rgba(0, 255, 200)'
: state === 'disarmed'
? 'rgba(255, 127, 0)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon-container{
opacity: 0.6 !important;
background-color: rgba(0, 0, 0) !important;
}
.bubble-sub-button > ha-icon {
color: rgba(255, 127, 0, 1) !important;
}
.bubble-sub-button-2 > ha-icon {
color: rgba(0, 255, 200, 1) !important;
}
.bubble-sub-button-3 > ha-icon {
color: rgba(0, 255, 0, 1) !important;
}
${icon.setAttribute("icon",
state === 'armed_away'
? 'mdi:shield-lock'
: state === 'armed_home'
? 'mdi:shield-home'
: state === 'disarmed'
? 'mdi:shield-off'
: 'mdi:shield-alert'
)}
card_layout: large
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#update"
name: Mises à jour
icon: mdi:update
close_on_click: false
sub_button:
- entity: switch.hacs_pre_release
name: Beta
show_name: false
icon: null
show_state: true
show_last_changed: false
show_attribute: false
tap_action:
action: toggle
show_icon: false
show_background: true
styles: |+
.bubble-button-background {
background-color:
${ hass.states['binary_sensor.tplt_available_updates'].state !== 'off'
? 'rgba(200, 0, 80, 0.8)'
: 'rgba(255, 255, 255, 0.5)'
} !important;
}
.bubble-icon {
opacity: 1 !important;
color:
${ hass.states['sensor.nombre_de_mise_a_jour_total'].state !== '0'
? 'rgba(200, 0, 80, 0.8)'
: 'rgba(255, 255, 255, 0.5)'
} !important;
}
.bubble-icon-container{
opacity: 0.7 !important;
background-color: rgba(0, 0, 0) !important;
}
/* Beta Updates or not
switch.hacs_pre_release */
.bubble-sub-button-1 {
font-weight: bold !important;
background-color: ${ hass.states['switch.hacs_pre_release'].state !== 'off'
? 'rgba(220, 30, 30, 0.6)'
: 'rgba(30, 30, 150, 0.6)'
} !important;
}
show_header: true
button_type: state
entity: sensor.nombre_de_mise_a_jour_total
show_state: false
show_name: true
force_icon: false
show_icon: true
- type: conditional
conditions:
- condition: state
entity: binary_sensor.tplt_available_updates
state: "on"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:bubble-card
card_type: separator
name: "Mise(s) à jour disponible(s):"
styles: |-
ha-card { color: var(--primary-text-color); }
.bubble-line {
background: var(--primary-text-color);
opacity: 0.2;
}
- type: custom:stack-in-card
card_mod:
class: stock
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.tplt_available_updates_system
state_not: "0"
card:
type: custom:auto-entities
filter:
include:
- entity_id: update.*
state: "on"
exclude:
- entity_id: update.*
attributes:
device_class: firmware
- entity_id: update.*
attributes:
supported_features: 23
- entity_id: update.*
attributes:
supported_features: 25
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: Système
data: friendly_name
align: left
modify: |-
x = x.replace('Update', '');
x;
- data: installed_version
name: Actuelle
align: right
- data: latest_version
name: Disponible
align: right
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
tbody tr td:nth-child(4): >-
width: 64px; color: var(--success-color);
font-weight: bold;
- type: conditional
conditions:
- condition: state
entity: sensor.tplt_available_updates_addon
state_not: "0"
card:
type: custom:auto-entities
filter:
include:
- entity_id: update.*
state: "on"
exclude:
- entity_id: update.*
attributes:
device_class: firmware
- entity_id: update.*
attributes:
supported_features: 23
- entity_id: update.home_assistant_core_update
- entity_id: update.home_assistant_operating_system_update
- entity_id: update.home_assistant_supervisor_update
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: Module comp.
data: friendly_name
align: left
modify: |-
x = x.replace('Update', '');
x;
- data: installed_version
name: Actuelle
align: right
- data: latest_version
name: Disponible
align: right
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
tbody tr td:nth-child(4): >-
width: 64px; color: var(--success-color);
font-weight: bold;
- type: conditional
conditions:
- condition: state
entity: sensor.tplt_available_updates_hacs
state_not: "0"
card:
type: custom:auto-entities
filter:
include:
- entity_id: update.*
state: "on"
exclude:
- entity_id: update.*
attributes:
device_class: firmware
- entity_id: update.*
attributes:
supported_features: 25
- entity_id: update.home_assistant_core_update
- entity_id: update.home_assistant_operating_system_update
- entity_id: update.home_assistant_supervisor_update
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: HACS
data: friendly_name
align: left
modify: |-
x = x.replace('update', '');
x;
- data: installed_version
name: Actuelle
align: right
- data: latest_version
name: Disponible
align: right
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
tbody tr td:nth-child(4): >-
width: 64px; color: var(--success-color);
font-weight: bold;
- type: conditional
conditions:
- condition: state
entity: binary_sensor.tplt_skipped_updates
state: "on"
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:bubble-card
card_type: separator
name: "Mise(s) à jour ignorée(s):"
styles: |-
ha-card { color: var(--primary-text-color); }
.bubble-line {
background: var(--primary-text-color);
opacity: 0.2;
}
- type: custom:stack-in-card
card_mod:
class: stock
cards:
- type: conditional
conditions:
- condition: state
entity: sensor.tplt_skipped_updates_system
state_not: "0"
card:
type: custom:auto-entities
filter:
include:
- entity_id: update.*
state: "off"
exclude:
- entity_id: update.*
attributes:
skipped_version: null
- entity_id: update.*
attributes:
device_class: firmware
- entity_id: update.*
attributes:
supported_features: 23
- entity_id: update.*
attributes:
supported_features: 25
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: Système
data: friendly_name
align: left
modify: |-
x = x.replace('Update', '');
x;
- data: installed_version
name: Actuelle
align: right
- data: skipped_version
name: Ignorée
align: right
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
tbody tr td:nth-child(4): >-
width: 64px; color: var(--nova-color);
font-weight: bold;
- type: conditional
conditions:
- condition: state
entity: sensor.tplt_skipped_updates_addon
state_not: "0"
card:
type: custom:auto-entities
filter:
include:
- entity_id: update.*
state: "off"
exclude:
- entity_id: update.*
attributes:
skipped_version: null
- entity_id: update.*
attributes:
device_class: firmware
- entity_id: update.*
attributes:
supported_features: 23
- entity_id: update.home_assistant_core_update
- entity_id: update.home_assistant_operating_system_update
- entity_id: update.home_assistant_supervisor_update
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: Module comp.
data: friendly_name
align: left
modify: |-
x = x.replace('Update', '');
x;
- data: installed_version
name: Actuelle
align: right
- data: skipped_version
name: Ignorée
align: right
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
tbody tr td:nth-child(4): >-
width: 64px; color: var(--nova-color);
font-weight: bold;
- type: conditional
conditions:
- condition: state
entity: sensor.tplt_skipped_updates_hacs
state_not: "0"
card:
type: custom:auto-entities
filter:
include:
- entity_id: update.*
state: "off"
exclude:
- entity_id: update.*
attributes:
skipped_version: null
- entity_id: update.*
attributes:
device_class: firmware
- entity_id: update.*
attributes:
supported_features: 25
- entity_id: update.home_assistant_core_update
- entity_id: update.home_assistant_operating_system_update
- entity_id: update.home_assistant_supervisor_update
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: HACS
data: friendly_name
align: left
modify: |-
x = x.replace('update', '');
x;
- data: installed_version
name: Actuelle
align: right
- data: skipped_version
name: Ignorée
align: right
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): "width: 64px; font-weight: bold;"
tbody tr td:nth-child(4): >-
width: 64px; color: var(--nova-color);
font-weight: bold;
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#update_restart"
name: Mises à jour nécessitant un redémarrage
icon: mdi:update
close_on_click: false
sub_button:
- name: Redémarrer HA
show_name: true
icon: mdi:restart-alert
show_state: false
show_last_changed: false
show_attribute: false
tap_action:
action: call-service
target: {}
service: homeassistant.restart
show_icon: true
show_background: true
styles: |
.bubble-button-background {
background-color:
${ hass.states['binary_sensor.tplt_available_updates'].state !== 'off'
? 'rgba(200, 0, 80, 0.8)'
: 'rgba(255, 255, 255, 0.5)'
} !important;
}
.bubble-icon {
opacity: 1 !important;
color:
${ hass.states['sensor.nombre_de_mise_a_jour_total'].state !== '0'
? 'rgba(200, 0, 80, 0.8)'
: 'rgba(255, 255, 255, 0.5)'
} !important;
}
.bubble-icon-container{
opacity: 0.7 !important;
background-color: rgba(0, 0, 0) !important;
}
.bubble-sub-button-1 {
display:
${hass.states['sensor.nombre_de_maj_avec_redemarrage_requis'].state !== 0
? ''
: 'none'
} !important;
}
.bubble-sub-button-1 {
font-weight: bold !important;
background-color:
${ hass.states['sensor.nombre_de_maj_avec_redemarrage_requis'].state !== 0
? 'rgba(220, 30, 30, 0.6)'
: 'rgba(30, 30, 150, 0.6)'
} !important;
}
show_header: true
button_type: state
entity: sensor.nombre_de_maj_avec_redemarrage_requis
show_state: false
show_name: true
force_icon: false
show_icon: true
- type: custom:vertical-stack-in-card
cards:
- type: custom:bubble-card
card_type: separator
name: "Redémarrage requis pour :"
styles: |-
ha-card { color: var(--primary-text-color); }
.bubble-line {
background: var(--primary-text-color);
opacity: 0.2;
}
- type: custom:stack-in-card
card_mod:
class: stock
cards:
- type: custom:auto-entities
filter:
include:
- entity_id: update.*
attributes:
release_summary: "*Restart of Home Assistant required*"
exclude: []
card:
type: custom:flex-table-card
card_mod:
class: stock
style: |
table {
padding: 4px;
}
sort_by: friendly_name+
clickable: true
columns:
- data: entity_picture
align: center
name: ""
modify: >-
'<img src="' + x +
'"style="height:30px;width:30px">'
- name: ""
data: friendly_name
align: left
modify: |-
x = x.replace('Update', '');
x;
- data: installed_version
name: Version Installée
align: center
css:
thead th: "color: var(--text);"
tbody tr: "background-color: transparent !important;"
tbody tr td:nth-child(1): "width: 32px;"
tbody tr td:nth-child(3): >-
width: 114px; color: rgba(87, 214, 87, 1);
font-weight: bold;
visibility:
- condition: state
entity: sensor.nombre_de_maj_avec_redemarrage_requis
state_not: "0"
- type: custom:bubble-card
card_type: separator
name: Mises à jour
icon: mdi:update
card_layout: normal
rows: 1
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0.1;
}
ha-card {
border-radius: 0px !important;
padding-top: 20px !important;
padding-bottom: 80px !important;
bottom: 0 !important;
}
sub_button: []
- 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
name: Nombre de MAJ HAOS
- entity: sensor.nombre_de_maj_avec_redemarrage_requis
icon: mdi:restart-alert
show_background: false
show_state: true
tap_action:
action: navigate
navigation_path: "#update_restart"
name: Nb. Maj avec reboot de HA
- entity: sensor.tplt_available_updates_addon
icon: mdi:puzzle
show_background: false
show_state: true
tap_action:
action: more-info
name: Nombre de MAJ AddOn
- entity: sensor.tplt_available_updates_hacs
icon: mdi:view-module
show_background: false
show_state: true
tap_action:
action: more-info
name: Nombre de MAJ HACS
styles: |
.bubble-button-card-container {
border: ${ hass.states['sensor.nombre_de_maj_avec_redemarrage_requis'].state !== '0'
? '2px dashed var(--warning-color)'
: ''
} !important;
border-radius: ${ hass.states['sensor.nombre_de_maj_avec_redemarrage_requis'].state !== '0'
? '30px'
: ''
} !important;
}
.bubble-button-background {
background-color:
${ hass.states['binary_sensor.tplt_available_updates'].state !== 'off'
? 'rgba(200, 0, 80, 0.8)'
: hass.states['binary_sensor.tplt_update_restart'].state == 'on'
? 'rgba(170, 0, 100, 0.5)'
: 'rgba(255, 255, 255, 0.5)'
} !important;
}
.bubble-icon {
opacity: 1 !important;
color:
${ hass.states['binary_sensor.tplt_available_updates'].state !== 'off'
? 'rgba(200, 0, 80, 0.8)'
: hass.states['binary_sensor.tplt_update_restart'].state == 'on'
? 'rgba(170, 0, 100, 0.5)'
: 'rgba(255, 255, 255, 0.5)'
} !important;
}
.bubble-icon-container{
opacity: 0.7 !important;
background-color: rgba(0, 0, 0) !important;
}
/* HAOS Updates
sensor.tplt_available_updates_system */
.bubble-sub-button-1 {
font-weight:
${ hass.states['sensor.tplt_available_updates_system'].state !== '0'
? 'bold'
: 'normal'
} !important;
}
.bubble-sub-button-1 > ha-icon {
color:
${ hass.states['sensor.tplt_available_updates_system'].state === '0'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(255, 127, 0, 1)'
} !important;
}
/* Number of updates needing restart
sensor.nombre_de_maj_avec_redemarrage_requis */
.bubble-sub-button-2 {
font-weight:
${ hass.states['sensor.nombre_de_maj_avec_redemarrage_requis'].state !== '0'
? 'bold'
: 'normal'
} !important;
}
.bubble-sub-button-2 > ha-icon {
color:
${ hass.states['sensor.nombre_de_maj_avec_redemarrage_requis'].state === '0'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(255, 127, 0, 1)'
} !important;
}
/* HACS Updates
sensor.tplt_available_updates_addon */
.bubble-sub-button-3 {
font-weight:
${ hass.states['sensor.tplt_available_updates_addon'].state !== '0'
? 'bold'
: 'normal'
} !important;
}
.bubble-sub-button-3 > ha-icon {
color:
${ hass.states['sensor.tplt_available_updates_addon'].state === '0'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(0, 255, 0, 1)'
} !important;
}
/* Add-On Updates
sensor.tplt_available_updates_hacs */
.bubble-sub-button-4 {
font-weight:
${ hass.states['sensor.tplt_available_updates_hacs'].state !== '0'
? 'bold'
: 'normal'
} !important;
}
.bubble-sub-button-4 > ha-icon {
color:
${ hass.states['sensor.tplt_available_updates_hacs'].state === '0'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(0, 255, 200, 1)'
} !important;
}
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#speedtest_details"
show_header: true
force_icon: false
show_state: false
show_last_changed: false
show_attribute: false
button_type: name
name: Historique du Speedtest
icon: phu:speedtest
show_icon: true
show_name: true
card_layout: normal
hide_backdrop: false
close_on_click: true
bg_opacity: "75"
- type: custom:bubble-card
card_type: separator
name: Historique des Speedtest
icon: mdi:chart-histogram
sub_button:
- entity: sensor.speedtest_cli_data
show_last_changed: true
show_icon: true
icon: mdi:clock-time-two-outline
show_background: true
show_state: false
show_attribute: false
name: Date du dernier test
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.speedtest_cli_download
name: Download
icon: mdi:speedometer
show_last_changed: true
show_attribute: false
double_tap_action:
action: none
hold_action:
action: none
card_layout: normal
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.speedtest_cli_upload
name: Upload
icon: mdi:speedometer
show_last_changed: true
show_attribute: false
double_tap_action:
action: none
hold_action:
action: none
card_layout: normal
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_cli_download
name: Download
name: Download
decimals: "0"
more_info: true
line_width: 2
hours_to_show: 24
points_per_hour: 2
show:
graph: line
extrema: true
color_thresholds:
- value: 0
color: "#ef1d0f"
- value: 500
color: "#ef5a0f"
- value: 1000
color: "#f0da11"
- value: 1500
color: "#11f13a"
- value: 2000
color: "#1da4f2"
- type: custom:mini-graph-card
entities:
- entity: sensor.speedtest_cli_upload
name: Upload
name: Upload
decimals: "0"
more_info: true
line_width: 2
hours_to_show: 24
points_per_hour: 2
show:
graph: line
extrema: true
color_thresholds:
- value: 0
color: "#ef1d0f"
- value: 200
color: "#ef5a0f"
- value: 400
color: "#f0da11"
- value: 600
color: "#11f13a"
- value: 800
color: "#1da4f2"
style: ""
card_mod:
style: ""
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Ouvetures
icon: mdi:window-closed-variant
card_layout: normal
rows: 1
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0.1;
}
ha-card {
border-radius: 0px !important;
padding-top: 20px !important;
padding-bottom: 80px !important;
bottom: 0 !important;
}
sub_button: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.capteur_fenetre_bureau_contact
double_tap_action:
action: none
hold_action:
action: none
button_action:
double_tap_action:
action: none
hold_action:
action: none
force_icon: true
show_last_changed: false
show_attribute: false
scrolling_effect: true
name: Bureau
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: normal
styles: |
.bubble-button-background {
opacity: 0.35 !important;
background-color:
${state === 'off'
? 'rgba(0, 36, 146, 0.8)'
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon {
opacity: 0.85 !important;
# color: 'rgba(255, 255, 255, 1)';
color:
${state === 'off'
? ''
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon-container{
opacity: 0.6 !important;
background-color: rgba(0, 0, 0) !important;
}
${icon.setAttribute("icon",
state === 'off'
? 'phu:double-window-closed'
: state === 'on'
? 'phu:double-window-open'
: 'mdi:alert-circle-outline'
)}
sub_button: []
show_state: true
show_name: true
show_icon: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.capteur_fenetre_salle_de_bains_contact
double_tap_action:
action: none
hold_action:
action: none
button_action:
double_tap_action:
action: none
hold_action:
action: none
force_icon: false
show_last_changed: false
show_attribute: false
scrolling_effect: true
name: Salle de Bain
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: normal
styles: |
.bubble-button-background {
opacity: 0.35 !important;
background-color:
${state === 'off'
? 'rgba(0, 36, 146, 0.8)'
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon {
opacity: 0.85 !important;
# color: 'rgba(255, 255, 255, 1)';
color:
${state === 'off'
? ''
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon-container{
opacity: 0.6 !important;
background-color: rgba(0, 0, 0) !important;
}
${icon.setAttribute("icon",
state === 'off'
? 'phu:double-window-closed'
: state === 'on'
? 'phu:double-window-open'
: 'mdi:alert-circle-outline'
)}
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.capteur_fenetre_chambre_parents_contact
double_tap_action:
action: none
hold_action:
action: none
button_action:
double_tap_action:
action: none
hold_action:
action: none
force_icon: false
show_last_changed: false
show_attribute: false
scrolling_effect: true
name: Chambre Parents
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: normal
styles: |
.bubble-button-background {
opacity: 0.35 !important;
background-color:
${state === 'off'
? 'rgba(0, 36, 146, 0.8)'
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon {
opacity: 0.85 !important;
# color: 'rgba(255, 255, 255, 1)';
color:
${state === 'off'
? ''
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon-container{
opacity: 0.6 !important;
background-color: rgba(0, 0, 0) !important;
}
${icon.setAttribute("icon",
state === 'off'
? 'phu:double-window-closed'
: state === 'on'
? 'phu:double-window-open'
: 'mdi:alert-circle-outline'
)}
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.capteur_fenetre_chambre_enfant_contact
double_tap_action:
action: none
hold_action:
action: none
button_action:
double_tap_action:
action: none
hold_action:
action: none
force_icon: false
show_last_changed: false
show_attribute: false
scrolling_effect: true
name: Chambre Enfant
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: normal
styles: |
.bubble-button-background {
opacity: 0.35 !important;
background-color:
${state === 'off'
? 'rgba(0, 36, 146, 0.8)'
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon {
opacity: 0.85 !important;
# color: 'rgba(255, 255, 255, 1)';
color:
${state === 'off'
? ''
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon-container{
opacity: 0.6 !important;
background-color: rgba(0, 0, 0) !important;
}
${icon.setAttribute("icon",
state === 'off'
? 'phu:double-window-closed'
: state === 'on'
? 'phu:double-window-open'
: 'mdi:alert-circle-outline'
)}
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.capteur_fenetre_salon_contact
double_tap_action:
action: none
hold_action:
action: none
button_action:
double_tap_action:
action: none
hold_action:
action: none
force_icon: false
show_last_changed: false
show_attribute: false
scrolling_effect: true
name: Salon
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: normal
styles: |
.bubble-button-background {
opacity: 0.35 !important;
background-color:
${state === 'off'
? 'rgba(0, 36, 146, 0.8)'
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon {
opacity: 0.85 !important;
# color: 'rgba(255, 255, 255, 1)';
color:
${state === 'off'
? ''
: state === 'on'
? 'rgba(235, 116, 150)'
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-icon-container{
opacity: 0.6 !important;
background-color: rgba(0, 0, 0) !important;
}
${icon.setAttribute("icon",
state === 'off'
? 'phu:double-window-closed'
: state === 'on'
? 'phu:double-window-open'
: 'mdi:alert-circle-outline'
)}
- type: custom:bubble-card
card_type: separator
name: Personnes
icon: mdi:account-group
card_layout: normal
rows: 1
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0.1;
}
ha-card {
border-radius: 0px !important;
padding-top: 20px !important;
padding-bottom: 80px !important;
bottom: 0 !important;
}
sub_button:
- entity: zone.home
show_last_changed: false
show_state: true
show_icon: true
icon: ""
show_attribute: false
show_name: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.Miles
show_name: true
show_last_changed: true
show_attribute: false
card_layout: normal
layout_options:
grid_columns: 2
grid_rows: 1
show_state: false
sub_button:
- entity: person.Miles
show_state: false
show_icon: true
show_background: true
show_attribute: false
attribute: entity_picture
styles: |+
.bubble-sub-button-1 {
opacity: 0.8 !important;
background-color: rgb(0, 0, 0) !important;
}
.bubble-button-background {
opacity: 0.65 !important;
background-color:
${ state === 'home'
? 'rgb(0, 255, 136)'
: state === 'not_home'
? 'rgb(255, 103, 0)'
: state === 'Travail'
? 'rgb(45, 152, 209)'
/* 'rgb(25, 152, 209)' */
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-sub-button-1 > ha-icon {
opacity: 1 !important;
color:
${ state === 'home'
? 'rgb(0, 255, 136)'
: state === 'not_home'
? 'rgb(255, 103, 0)'
: state === 'Travail'
? 'rgb(45, 152, 209)'
/* 'rgb(45, 152, 209)' */
: 'rgb(127, 127, 127)'
} !important;
}
${subButtonIcon[0].setAttribute("icon",
state === 'home'
? 'mdi:home'
: state === 'not_home'
? 'mdi:home-off'
: state == 'Travail'
? 'mdi:school'
: 'mdi:crosshairs-question'
)}
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.Mme
show_name: true
show_last_changed: true
show_attribute: false
card_layout: normal
layout_options:
grid_columns: 2
grid_rows: 1
show_state: false
sub_button:
- entity: person.Miles
show_state: false
show_icon: true
show_background: true
show_attribute: false
attribute: entity_picture
styles: |+
.bubble-sub-button-1 {
opacity: 0.8 !important;
background-color: rgb(0, 0, 0) !important;
}
.bubble-button-background {
opacity: 0.65 !important;
background-color:
${ state === 'home'
? 'rgb(0, 255, 136)'
: state === 'not_home'
? 'rgb(255, 103, 0)'
: state === 'Travail'
? 'rgb(45, 152, 209)'
/* 'rgb(25, 152, 209)' */
: 'rgb(127, 127, 127)'
} !important;
}
.bubble-sub-button-1 > ha-icon {
opacity: 1 !important;
color:
${ state === 'home'
? 'rgb(0, 255, 136)'
: state === 'not_home'
? 'rgb(255, 103, 0)'
: state === 'Travail'
? 'rgb(45, 152, 209)'
/* 'rgb(45, 152, 209)' */
: 'rgb(127, 127, 127)'
} !important;
}
${subButtonIcon[0].setAttribute("icon",
state === 'home'
? 'mdi:home'
: state === 'not_home'
? 'mdi:home-off'
: state == 'Travail'
? 'mdi:school'
: 'mdi:crosshairs-question'
)}
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Speedtest
icon: phu:speedtest
card_layout: normal
rows: 1
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0.1;
}
ha-card {
border-radius: 0px !important;
padding-top: 20px !important;
padding-bottom: 80px !important;
bottom: 0 !important;
}
sub_button:
- entity: sensor.speedtest_cli_data
icon: mdi:clock-time-four-outline
show_last_changed: true
tap_action:
action: none
show_icon: true
show_background: true
show_attribute: false
- type: custom:bubble-card
card_type: button
button_type: name
name: Démarrer Speedtest
icon: mdi:speedometer
show_last_changed: true
show_attribute: false
double_tap_action:
action: none
hold_action:
action: none
card_layout: normal
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.speedtest_cli_data
target:
entity_id: sensor.speedtest_cli_data
button_action:
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.speedtest_cli_data
target: {}
sub_button:
- icon: mdi:play
show_background: false
show_last_changed: false
show_attribute: false
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.speedtest_cli_data
target:
entity_id: sensor.speedtest_cli_data
show_name: false
entity: sensor.speedtest_cli_data
columns: 2
styles: |-
.bubble-icon {
opacity: 1 !important;
color: rgb(34, 163, 220) !important;
}
.bubble-icon-container{
opacity: 1 !important;
background-color: rgb(16, 16, 28) !important;
}
.bubble-button-background {
opacity: 0.75 !important;
background-color: rgba(34, 163, 220) !important
}
.bubble-sub-button-1 > ha-icon {
opacity: 1 !important;
color: rgb(34, 163, 220) !important;
}
.bubble-sub-button-1 {
opacity: 1 !important;
background-color: rgb(16, 16, 28) !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
name: Afficher Historique
icon: mdi:chart-histogram
entity: sensor.speedtest_cli_data
show_state: false
show_last_changed: false
show_attribute: false
tap_action:
action: navigate
navigation_path: "#speedtest_details"
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: navigate
navigation_path: "#speedtest_details"
double_tap_action:
action: none
hold_action:
action: none
columns: 2
card_layout: normal
styles: |-
.bubble-icon {
opacity: 1 !important;
color: rgb(34, 163, 220) !important;
}
.bubble-icon-container{
opacity: 1 !important;
background-color: rgb(16, 16, 28) !important;
}
.bubble-button-background {
opacity: 0.75 !important;
background-color: rgba(34, 163, 220) !important
}
.bubble-sub-button-1 > ha-icon {
opacity: 1 !important;
color: rgb(34, 163, 220) !important;
}
.bubble-sub-button-1 {
opacity: 1 !important;
background-color: rgb(16, 16, 28) !important;
}
- type: custom:bubble-card
card_type: separator
name: "Tempo "
sub_button:
- entity: sensor.rte_tempo_cycle_jours_restants_bleu
show_state: true
- entity: sensor.rte_tempo_cycle_jours_restants_blanc
show_state: true
- entity: sensor.rte_tempo_cycle_jours_restants_rouge
show_state: true
styles: |
ha-card {
border-radius: 0px !important;
padding-top: 20px !important;
padding-bottom: 80px !important;
bottom: 0 !important;
}
.bubble-sub-button-1 {
background-color: rgb(15, 63, 188,1) !important;
font-weight: bold !important;
}
.bubble-sub-button-2 {
background-color: rgb(241, 241, 241,1) !important;
color: rgb(0,0,0, 1) !important;
font-weight: bold !important;
}
.bubble-sub-button-3 {
background-color: rgb(224, 58, 37,1) !important;
font-weight: bold !important;
}
.bubble-line {
background: var(--primary-text-color) !important;
opacity: 0.1 !important;
}
icon: mdi:lightning-bolt-outline
- type: grid
cards:
- type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: home
1_icon: mdi:home-circle
2_link: climat
2_icon: mdi:home-thermometer
2_name: ""
highlight_current_view: false
hide_gradient: false
rise_animation: true
- type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.rte_tempo_couleur_actuelle
name: "Aujourd'hui : "
show_attribute: false
attribute: options
icon: mdi:transmission-tower-export
styles: >
.bubble-button-background {
opacity: 1;
background-color:
${state === 'Blanc'
? 'rgba(241, 241, 241, 0.5)'
: state === 'Bleu'
? 'rgba(15, 63, 188,0.5)'
: state === 'Rouge'
? 'rgba(224, 58, 37, 0.5)'
: 'black'};
}
.bubble-sub-button-1 {
font-weight: bold;
}
.bubble-icon-container {
background-color:
${state === 'Blanc'
? 'rgba(241, 241, 241, 0.5)'
: state === 'Bleu'
? 'rgba(15, 63, 188,0.5)'
: state === 'Rouge'
? 'rgba(224, 58, 37, 0.5)'
: 'black'};
}
.bubble-sub-button-1 {
background-color:
${state === 'Blanc'
? 'rgba(241, 241, 241, 1)'
: hass.states['sensor.rte_tempo_prochaine_couleur'].state === 'Bleu'
? 'rgba(15, 63, 188, 1)'
: hass.states['sensor.rte_tempo_prochaine_couleur'].state === 'Rouge'
? 'rgba(224, 58, 37, 1)'
: 'black'};
}
${card.querySelector('.bubble-name').innerText = "Aujourd'hui :" + "
" + hass.states['sensor.rte_tempo_couleur_actuelle_visuel'].state + "
" + hass.states['sensor.rte_tempo_couleur_actuelle'].state }
${card.querySelector('.bubble-sub-button-name-container').innerText =
"Demain :" + " " +
hass.states['sensor.rte_tempo_prochaine_couleur_visuel'].state + " " +
hass.states['sensor.rte_tempo_prochaine_couleur'].state }
sub_button:
- entity: sensor.rte_tempo_prochaine_couleur
name: Demain
icon: mdi:transmission-tower-export
show_name: true
show_state: true
show_attribute: false
show_background: true
show_icon: true
show_last_changed: false
show_state: false
show_name: true
force_icon: false
show_last_changed: false
double_tap_action:
action: none
hold_action:
action: none
button_action:
double_tap_action:
action: none
hold_action:
action: none
cards: []
layout: {}
icon: mdi:home-circle
badges: []
dense_section_placement: false
Il y a pas mal de template/scripts, et autres derrière
Demande au besoin 
1 « J'aime »
Bonjour à tous
Est-ce que vous savez si il est possible de faire un “navigation_path”
tap_action:
action: navigate
navigation_path: /lovelace/test-2
avec une pile de boutons horizontaux ?
Si oui comment SVP 
Merci pour vos réponses
C’est quoi ta carte au complet ?
Bon je pars du principe que tu es sous ce format :
et du coup le code est le suivant :
Code de la carte Bubble Card
type: custom:bubble-card
card_type: media-player
entity: media_player.parents
scrolling_effect: false
force_icon: false
show_state: true
show_last_changed: false
show_attribute: true
attribute: volume_level
hide:
play_pause_button: false
volume_button: false
styles: |
.bubble-media-player-container {
background: rgba(var(--rgb-secondary-text-color), 0.2) !important;
}
ha-card {
overflow: hidden;
border-radius: 50px !important;
}
.card-content {
background: var(--background-color-2,var(--secondary-background-color));
}
.card-content::before {
content: '';
display: flex;
width: 100%;
height: 100%;
background-image: url(${hass.states['media_player.parents']?.attributes.entity_picture_local});
background-size: cover;
background-position: 50%;
filter: blur(20px);
top: 0;
position: absolute;
opacity: 0.5;
}
.bubble-play-pause-button {
background: rgba(255, 165, 0, 0.4);
}
Super et Merci @MilesTEG1 ! Je vais commencer à jouer avec cela ^^
1 « J'aime »
Un message a été scindé en un nouveau sujet : Idée carte température / Humidité avec Bubble Card
C’était bien celle-ci !
Merci pour le code 
Je viens de voir que sur le Github, il fallait aller dans les styles.ts pour avoir tous les éléments modifiables. Ca me simplifiera la suite !
Euh j’ai pas compris de quoi tu parles !?
Bonjour et bravo pour le boulot.
Pourrais tu partager les sensors suivants stp:
sensor.nombre_de_maj_avec_redemarrage_requis
sensor.texte_avec_nombre_de_mise_a_jour_total
Merci par avance
Salut 
@cob94440
Tu devrais avoir ce qu’il faut avec ceci :
# ╔══════════════════════════════════════════════════════════════════════════╗
# ║ Configuration pour les mises à jours de HA et HACS ║
# ╚══════════════════════════════════════════════════════════════════════════╝
#
# Source : https://forum.hacf.fr/t/maj-de-hacs-version-1-34-vers-la-version-2-0-procedure-dinstallation/46439/72
- sensor:
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AVAILABLE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- name: tplt_available_updates_system
unique_id: tplt_available_updates_system
state: |
{% set var = states.update
|selectattr('state', 'equalto', 'on')
|select('search', 'home_assistant')
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
- name: tplt_available_updates_addon
unique_id: tplt_available_updates_addon
state: |
{% set var = states.update
|selectattr('state', 'equalto', 'on')
|selectattr('attributes.supported_features', 'equalto', 25)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
- name: tplt_available_updates_hacs
unique_id: tplt_available_updates_hacs
state: |
{% set var = states.update
|selectattr('state', 'equalto', 'on')
|selectattr('attributes.supported_features', 'equalto', 23)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SKIPPED ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- name: tplt_skipped_updates_system
unique_id: tplt_skipped_updates_system
state: |
{% set var = states.update
|select('search', 'home_assistant')
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
- name: tplt_skipped_updates_addon
unique_id: tplt_skipped_updates_addon
state: |
{% set var = states.update
|selectattr('attributes.supported_features', 'equalto', 25)
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
- name: tplt_skipped_updates_hacs
unique_id: tplt_skipped_updates_hacs
state: |
{% set var = states.update
|selectattr('attributes.supported_features', 'equalto', 23)
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
# 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: "Nombre de MAJ avec Redémarrage requis"
unique_id: nombre_de_maj_avec_redemarrage_requis
state: |
{% set maj = states.update
| selectattr('attributes.release_summary', 'search', 'Restart of Home Assistant required')
| map(attribute='name')
| list %}
{% set maj_count = maj | count | int(2) %}
{{ maj_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 %}
{% if is_state('binary_sensor.tplt_update_restart', 'on') %}
{% set text_a_afficher = text_a_afficher + ", mais ⚠️ Redemarrage requis ⚠️" %}
{% endif %}
{{ text_a_afficher }}
- binary_sensor:
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ UPDATES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- name: tplt_update_restart
unique_id: tplt_update_restart
icon: mdi:restart-alert
device_class: update
state: |
{% set var = states.update
|selectattr('attributes.release_summary', 'search', 'Restart of Home Assistant required')
|map(attribute='entity_id')
|list %}
{% set nr_count = var |length %}
{% if nr_count == 0 %}
off
{% else %}
on
{% endif %}
attributes:
list: |
{% set var = states.update
|selectattr('attributes.release_summary', 'search', 'Restart of Home Assistant required')
|map(attribute='attributes.friendly_name')
|map('replace', 'Update', '')
|map('replace', 'update', '')
|list %}
{% set nr_count = var | length %}
{% if nr_count == 0 %}
null
{% else %}
{{ var | join('et ') }}{{ 'nécessite' if nr_count == 1 else 'nécessitent' }} un redémarrage.
{% endif %}
# {% set var = states.update
# |selectattr('attributes.release_summary', 'search', 'Restart of Home Assistant required')
# |map(attribute='attributes.friendly_name')
# |map('replace', 'Update', '')
# |map('replace', 'update', '')
# |list %}
# {% set nr_count = var |length %}
# {% if nr_count == 0 %}
# null
# {% else %}
# {% set nr_joined = var |join('\n'+' ') %}
# {{" "}}{{ nr_joined }}
# {% endif %}
- name: tplt_available_updates
unique_id: tplt_available_updates
icon: mdi:update
device_class: update
state: |
{% set var = states.update
|selectattr('state', 'equalto', 'on')
|reject('search','Swiss Army Knife custom card')
|map(attribute='attributes.friendly_name')
|map('replace', 'Update', '')
|map('replace', 'update', '')
|list %}
{% set result = var |length %}
{% if result == 0 %}
off
{% else %}
on
{% endif %}
- name: tplt_skipped_updates
unique_id: tplt_skipped_updates
icon: mdi:debug-step-over
device_class: update
state: |
{% set var = states.update
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{% if result == 0 %}
off
{% else %}
on
{% endif %}
attributes:
count_all: |
{% set var = states.update
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
count_system: |
{% set var = states.update
|select('search', 'home_assistant')
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
count_addon: |
{% set var = states.update
|selectattr('attributes.supported_features', 'equalto', 25)
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
count_hacs: |
{% set var = states.update
|selectattr('attributes.supported_features', 'equalto', 23)
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='entity_id')
|list %}
{% set result = var |length %}
{{ result }}
list: |
{% set var = states.update
|selectattr('attributes.skipped_version', 'ne', none)
|map(attribute='attributes.friendly_name')
|map('replace', 'Update', '')
|map('replace', 'update', '')
|list %}
{% set result = var |join('\n'+' ') %}
{{ result }}
2 « J'aime »
Super merci bcp. Y a plus qu’à
1 « J'aime »