Je résume car ça peut vite être confus (désolé pour le flood) :x
L’intégration ce base sur 2 cards. Seule la première est visible et ne donne que les informations nécessaires.
La seconde apparait lors d’un clic sur l’icone ou le bouton et donne la totalité des infos.
La première:
Dont voici le code:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.alert_level_in_frouzins
name: Vigieau Frouzins
show_state: true
show_attribute: true
scrolling_effect: false
tap_action:
action: navigate
navigation_path: "#vigieau"
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: navigate
navigation_path: "#vigieau"
double_tap_action:
action: none
hold_action:
action: none
card_layout: large
styles: |
.bubble-button-card-container {
background: ${
hass.states['sensor.alert_level_in_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(var(--rgb-secondary-text-color), 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Crise'
? 'rgba(255, 0, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte renforcée'
? 'rgba(255, 165, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte'
? 'rgba(255, 255, 0, 0.2)'
: 'rgba(0, 128, 0, 0.2)'
} !important;
}
.bubble-button-card-container .bubble-icon {
color: ${
hass.states['sensor.alert_level_in_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgb(135, 182, 209)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Crise'
? 'rgb(255, 0, 0)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte renforcée'
? 'rgb(255, 165, 0)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte'
? 'rgb(255, 255, 0)'
: 'rgb(0, 128, 0)'
} !important;
background-color: ${
hass.states['sensor.alert_level_in_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(76, 124, 30, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Crise'
? 'rgba(255, 0, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte renforcée'
? 'rgba(255, 165, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte'
? 'rgba(255, 255, 0, 0.2)'
: 'rgba(0, 128, 0, 0.2)'
} !important;
border-radius: 50% !important;
padding: 5px !important;
}
.bubble-sub-button-1 {
background: ${ hass.states['sensor.arrosage_des_jardins_potagers_restrictions_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(247, 53, 67, 0.4)'
: ''
} !important;
color: ${
hass.states['sensor.arrosage_des_jardins_potagers_restrictions_frouzins']?.state === 'vigilance (pas de restriction)'
? ''
: hass.states['sensor.arrosage_des_jardins_potagers_restrictions_frouzins']?.state === 'Crise'
? 'red'
: hass.states['sensor.arrosage_des_jardins_potagers_restrictions_frouzins']?.state === 'Alerte renforcée'
? 'orange'
: hass.states['sensor.arrosage_des_jardins_potagers_restrictions_frouzins']?.state === 'Alerte'
? 'yellow'
: 'green'
} !important;
}
.bubble-sub-button-2 {
background: ${ hass.states['sensor.arrosage_des_pelouses_restrictions_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(247, 53, 67, 0.4)'
: ''
} !important;
color: ${
hass.states['sensor.arrosage_des_pelouses_restrictions_frouzins']?.state === 'vigilance (pas de restriction)'
? ''
: hass.states['sensor.arrosage_des_pelouses_restrictions_frouzins']?.state === 'Crise'
? 'red'
: hass.states['sensor.arrosage_des_pelouses_restrictions_frouzins']?.state === 'Alerte renforcée'
? 'orange'
: hass.states['sensor.arrosage_des_pelouses_restrictions_frouzins']?.state === 'Alerte'
? 'yellow'
: 'green'
} !important;
}
.bubble-sub-button-3 {
background: ${ hass.states['sensor.vidange_et_remplissage_des_piscines_restrictions_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(247, 53, 67, 0.4)'
: ''
} !important;
color: ${
hass.states['sensor.vidange_et_remplissage_des_piscines_restrictions_frouzins']?.state === 'vigilance (pas de restriction)'
? ''
: hass.states['sensor.vidange_et_remplissage_des_piscines_restrictions_frouzins']?.state === 'Crise'
? 'red'
: hass.states['sensor.vidange_et_remplissage_des_piscines_restrictions_frouzins']?.state === 'Alerte renforcée'
? 'orange'
: hass.states['sensor.vidange_et_remplissage_des_piscines_restrictions_frouzins']?.state === 'Alerte'
? 'yellow'
: 'green'
} !important;
}
${(() => {
const alertlevel = hass.states['sensor.alert_level_in_frouzins']?.state;
let icon;
// Conditions pour définir l'icône
if (alertlevel === 'vigilance (pas de restriction)') {
icon = 'mdi:water-check';
} else if (alertlevel === 'Alerte') {
icon = 'mdi:water-alert';
} else if (alertlevel === 'Alerte renforcée') {
icon = 'mdi:water-remove';
} else if (alertlevel === 'Crise') {
icon = 'mdi:water-off';
}
// Applique l'icône
card.querySelector('.bubble-icon').setAttribute('icon', icon);
let color;
// Conditions pour définir la couleur
if (alertlevel === 'vigilance (pas de restriction)') {
color = 'green';
} else if (alertlevel === 'Alerte') {
color = 'yellow';
} else if (alertlevel === 'Alerte renforcée') {
color = 'orange';
} else if (alertlevel === 'Crise') {
color = 'red';
}
// 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: sensor.arrosage_des_jardins_potagers_restrictions_frouzins
- entity: sensor.arrosage_des_pelouses_restrictions_frouzins
- entity: sensor.vidange_et_remplissage_des_piscines_restrictions_frouzins
card_mod: null
Et la seconde:
dont voici le code:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#vigieau"
name: Vigieau
show_header: false
scrolling_effect: false
force_icon: false
show_state: false
show_last_changed: false
show_attribute: false
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.alert_level_in_frouzins
name: Vigieau Frouzins
show_state: true
show_attribute: true
scrolling_effect: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action: null
action: none
hold_action:
action: none
card_layout: large
styles: |
.bubble-button-card-container {
background: ${
hass.states['sensor.alert_level_in_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(var(--rgb-secondary-text-color), 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Crise'
? 'rgba(255, 0, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte renforcée'
? 'rgba(255, 165, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte'
? 'rgba(255, 255, 0, 0.2)'
: 'rgba(0, 128, 0, 0.2)'
} !important;
}
.bubble-button-card-container .bubble-icon {
color: ${
hass.states['sensor.alert_level_in_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgb(135, 182, 209)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Crise'
? 'rgb(255, 0, 0)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte renforcée'
? 'rgb(255, 165, 0)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte'
? 'rgb(255, 255, 0)'
: 'rgb(0, 128, 0)'
} !important;
background-color: ${
hass.states['sensor.alert_level_in_frouzins']?.state === 'vigilance (pas de restriction)'
? 'rgba(76, 124, 30, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Crise'
? 'rgba(255, 0, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte renforcée'
? 'rgba(255, 165, 0, 0.2)'
: hass.states['sensor.alert_level_in_frouzins']?.state === 'Alerte'
? 'rgba(255, 255, 0, 0.2)'
: 'rgba(0, 128, 0, 0.2)'
} !important;
border-radius: 50% !important;
padding: 5px !important;
}
${(() => {
const alertlevel = hass.states['sensor.alert_level_in_frouzins']?.state;
let icon;
// Conditions pour définir l'icône
if (alertlevel === 'vigilance (pas de restriction)') {
icon = 'mdi:water-check';
} else if (alertlevel === 'Alerte') {
icon = 'mdi:water-alert';
} else if (alertlevel === 'Alerte renforcée') {
icon = 'mdi:water-remove';
} else if (alertlevel === 'Crise') {
icon = 'mdi:water-off';
}
// Applique l'icône
card.querySelector('.bubble-icon').setAttribute('icon', icon);
let color;
// Conditions pour définir la couleur
if (alertlevel === 'vigilance (pas de restriction)') {
color = 'green';
} else if (alertlevel === 'Alerte') {
color = 'yellow';
} else if (alertlevel === 'Alerte renforcée') {
color = 'orange';
} else if (alertlevel === 'Crise') {
color = 'red';
}
// 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
- type: custom:bubble-card
card_type: separator
- type: custom:auto-entities
card:
type: custom:vertical-stack-in-card
card_param: cards
filter:
include:
- entity_id: sensor.*_restrictions_frouzins
options:
type: custom:mushroom-template-card
primary: "{{ state_attr(entity,'friendly_name')}}"
secondary: "{{states(entity)}}"
icon: "{{ state_attr(entity,'icon')}}"
icon_color: |-
{% if is_state(entity, 'Interdiction') %}
red
{% elif is_state(entity, 'Interdiction sur plage horaire') %}
orange
{% elif is_state(entity, 'Interdiction sauf exception') %}
orange
{% elif is_state(entity, 'Aucune restriction') %}
green
{% else %}
grey
{% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
N’hésitez pas à l’améliorer !
z.