[TUTO] - Design - Zendure & Bubble-Card - Intégration - Home Assistant Communauté Francophone [TUTO] - Design - Zendure & Bubble-Card Home Assistant - Tutoriels & Partages Intégration energie-energy yannweb Avril 3, 2025, 2:38 1 Hi, Vous avez des panneaux photovoltaïques et des batteries et vous voulez un design un peu plus plaisant que ce qui existe de base sur HA ? Je vous présente une petite adaptation de la fabuleuse Bubble-Card (merci @Clooos) dans un système de production/stockage d’énergie; Ici avec le système Zendure à adapter à votre système et à vos sensors… Cettet adaptation de Bubble-card a été reprise ici et là par @Julien_Galliot qui a bien aimé ce format semble-t-il et qui présente très bien l’intégration de Zendure dans HA via ioBroker ou via l’add-on développé par @FireSon que je teste également. Pour ceux qui sont intéressés, vous devriez pouvoir facilement reproduire ce genre de dashboard avec la Bubble-Card, Card-mod et les quelques ajustements ci-dessous. Pour les différentes possibilités de la Bubble Card, voir ici : [ CARTE ] Bubble Card - Des pop-up et une collection de cartes minimalistes Le code est sûrement perfectible, n’hésitez pas img1958×2502 369 KB img2730×2192 144 KB Zendure Flow — flèche rouge/verte dynamique selon le sens de la batterie Pretez attention au clip-path qui dessine la flèche selon le flux de la batterie — vous pouvez créer votre propre flèche ou autre forme, voir ici 🧩 Template sensor flow (calcul du flux) - sensor: - name: "Zen Flow batt (W)" unique_id: "zen_flow" unit_of_measurement: "W" state_class: measurement state: > {% set input = states('sensor.io_zen_recoit_w') | float(0) %} {% set output = states('sensor.io_zen_envoie_w') | float(0) %} {{ input - output }} availability: > {{ states('sensor.io_zen_recoit_w') not in ['unavailable', 'unknown'] and states('sensor.io_zen_envoie_w') not in ['unavailable', 'unknown'] }} device_class: power 🎨 Bubble Card Flow Batterie (trick css) type: custom:bubble-card card_type: button button_type: state entity: sensor.zen_flow styles: |- :host { --color-negative: #ad2b2b; --color-positive: #5F730B; --color-neutral: #4D4D4D; --color-zero-line: #FFFFFF; } .bubble-button-card-container { position: relative; border-radius: 8px; height: 20px; overflow: hidden; } .bubble-button-card-container::before { content: ''; position: absolute; top: 0; height: 100%; width: 2px; left: 50%; background: var(--color-zero-line); z-index: 2; transform: translateX(-50%); } .bubble-button-card-container::after { content: ''; position: absolute; top: 0; height: 100%; display: ${hass.states['sensor.zen_flow'].state == -10 ? 'none' : 'block'}; width: max(calc(${Math.abs(hass.states['sensor.zen_flow'].state) / 1500 * 50}%), ${(""+Math.round(hass.states['sensor.zen_flow'].state)).length * 10 + 20}px); left: ${hass.states['sensor.zen_flow'].state < 0 ? 'calc(50% - max(calc(' + (Math.abs(hass.states['sensor.zen_flow'].state) / 1500 * 50) + '%), ' + ((""+Math.round(hass.states['sensor.zen_flow'].state)).length * 10 + 20) + 'px))' : '50%'}; background: ${hass.states['sensor.zen_flow'].state < 0 ? 'var(--color-negative)' : 'var(--color-positive)'}; z-index: 1; clip-path: ${hass.states['sensor.zen_flow'].state < 0 ? 'polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)' : 'polygon(40% 0%, 40% 20%, 0 20%, 0 80%, 40% 80%, 40% 100%, 100% 50%)'}; } ha-card::after { position: absolute; top: 50%; left: ${hass.states['sensor.zen_flow'].state < 0 ? 'calc(50% - max(calc(' + (Math.abs(hass.states['sensor.zen_flow'].state) / 1500 * 50) + '%), ' + ((""+Math.round(hass.states['sensor.zen_flow'].state)).length * 10 + 20) + 'px) / 2)' : 'calc(50% + max(calc(' + (Math.abs(hass.states['sensor.zen_flow'].state) / 1500 * 50) + '%), ' + ((""+Math.round(hass.states['sensor.zen_flow'].state)).length * 10 + 20) + 'px) / 2)'}; transform: translate(-50%, -50%); padding: 2px 10px; border-radius: 25px; border: 0; color: #fff; content: "${Math.round(state)} W"; background: none; text-align: center; display: block; z-index: 3; } card_mod: style: | ha-icon { color: {% if states('sensor.zen_flow') | float(0) < 0 %} var(--color-negative) {% else %} var(--color-positive) {% endif %} !important; } icon: "" name: Flux-batterie sub_button: [] card_layout: large slider_live_update: true show_state: false show_attribute: false show_last_changed: false force_icon: false grid_options: columns: 12 rows: 1 scrolling_effect: false show_icon: true show_name: false double_tap_action: action: more-info hold_action: action: more-info tap_action: action: navigate navigation_path: "#shelly" Production PV (avec météo animée via les icônes de lovelace-meteofrance-weather-card) 🌤️ Bubble Card PV avec icône météo animée type: custom:bubble-card card_type: button button_type: state animated_icons: true entity: sensor.zendure_pv_total styles: |- :host { --color-ok: #bfac1a; --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); --color-notification-bubble: #bfac1a; --color-bar: var(--color-ok); --progress: ${Math.round((Number(state) < 2200 ? Number(state) : 2200) / 2200 * 100)}%; } ha-icon { background-image: url("/local/community/lovelace-meteofrance-weather-card/icons/${ hass.states['sensor.meteo_ponderee'].state === 'clear-day' ? 'day.svg' : hass.states['sensor.meteo_ponderee'].state === 'clear-night' ? 'night.svg' : hass.states['sensor.meteo_ponderee'].state === 'partlycloudy' ? 'cloudy-day-3.svg' : hass.states['sensor.meteo_ponderee'].state === 'partly-cloudy-day' ? 'cloudy-day-3.svg' : hass.states['sensor.meteo_ponderee'].state === 'partly-cloudy-night' ? 'cloudy-night-3.svg' : hass.states['sensor.meteo_ponderee'].state === 'cloudy' ? 'cloudy.svg' : hass.states['sensor.meteo_ponderee'].state === 'fog' ? 'fog.svg' : hass.states['sensor.meteo_ponderee'].state === 'windy' ? 'windy.svg' : hass.states['sensor.meteo_ponderee'].state === 'windy-variant' ? 'windy-night.svg' : hass.states['sensor.meteo_ponderee'].state === 'hail' ? 'snowy-rainy.svg' : hass.states['sensor.meteo_ponderee'].state === 'lightning' ? 'thunder.svg' : hass.states['sensor.meteo_ponderee'].state === 'lightning-rainy' ? 'lightning-rainy.svg' : hass.states['sensor.meteo_ponderee'].state === 'rainy' ? 'rainy-5.svg' : hass.states['sensor.meteo_ponderee'].state === 'rainy-5' ? 'rainy-5.svg' : hass.states['sensor.meteo_ponderee'].state === 'rainy-6' ? 'rainy-6.svg' : hass.states['sensor.meteo_ponderee'].state === 'rainy-7' ? 'rainy-7.svg' : hass.states['sensor.meteo_ponderee'].state === 'snowy' ? 'snowy-6.svg' : hass.states['sensor.meteo_ponderee'].state === 'snowy-rainy' ? 'snowy-rainy.svg' : hass.states['sensor.meteo_ponderee'].state === 'exceptional' ? 'lightning-rainy.svg' : 'day.svg' }"); background-size: calc(130%); background-repeat: no-repeat; background-position: center; mask-image: none; -webkit-mask-image: none; width: 40px; height: 40px; opacity: 0.6!important; } .bubble-button-card-container { background: var(--color-background) !important; position: relative; } .bubble-button-card-container::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--progress) !important; background: var(--color-bar) !important; z-index: 0; } @keyframes rotatePulse { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } } name: Prod PV icon: url("/local/community/lovelace-meteofrance-weather-card/icons/day.svg") sub_button: [] layout_options: grid_columns: 2 grid_rows: 1 card_layout: large Affichage des jours Tempo RTE + prix EDF 📘 Stack Bubble RTE (bleu/blanc/rouge + prix) type: horizontal-stack cards: - type: custom:bubble-card show_state: false show_attribute: false show_last_changed: false force_icon: false sub_button: [] show_icon: false scrolling_effect: false card_layout: large icon: mdi:calendar-today name: Aujourd'hui button_type: state styles: |- .bubble-button-card-container { #background: ${state === 'rouge' ? 'red' : ''} 'red' !important; #background-color: rgb(71,19,37); background: ${hass.states['sensor.rte_tempo_couleur_actuelle'].state === 'Rouge' ? 'rgb(142, 35, 35)' : hass.states['sensor.rte_tempo_couleur_actuelle'].state === 'Blanc' ? 'rgb(201, 191, 191)' : hass.states['sensor.rte_tempo_couleur_actuelle'].state === 'Bleu' ? 'rgb(15, 117, 137)' : ''} !important; border-radius: 32px 0 0 32px !important; } attribute: friendly_name show_name: true card_type: button entity: sensor.rte_tempo_couleur_actuelle_visuel - type: custom:bubble-card show_state: false show_attribute: false show_last_changed: false force_icon: false sub_button: - entity: sensor.rte_tempo_prochaine_couleur_format show_icon: false show_state: true state_background: false show_background: false - entity: sensor.edf_tempo_prix_actuel show_icon: false state_background: false show_background: false show_state: true show_icon: false scrolling_effect: false card_layout: large-2-rows icon: mdi:calendar-today name: " " button_type: state styles: |- .bubble-button-card-container { border-radius: 0 0 0 0 !important; } .name-without-icon { margin-left: 1px !important; } attribute: friendly_name show_name: false card_type: button entity: sensor.rte_tempo_prochaine_couleur_format - type: custom:bubble-card show_state: true show_attribute: false show_last_changed: false force_icon: false sub_button: [] show_icon: false scrolling_effect: false card_layout: large icon: mdi:calendar-today name: " Restants" button_type: state styles: |- .bubble-button-card-container { border-radius: 0 0 0 0 !important; } attribute: friendly_name show_name: true columns: 2 rows: 2 card_type: button entity: sensor.rte_tempo_cycle_jours_restants_rouge - type: custom:bubble-card show_state: false show_attribute: false show_last_changed: false force_icon: false sub_button: [] show_icon: false scrolling_effect: false card_layout: large icon: mdi:calendar-today name: demain button_type: state styles: |- .bubble-button-card-container { #background: rgb(206, 30, 30) !important; background: ${hass.states['sensor.rte_tempo_prochaine_couleur'].state === 'Rouge' ? 'rgb(142, 35, 35)' : hass.states['sensor.rte_tempo_prochaine_couleur'].state === 'Blanc' ? 'rgb(201, 191, 191)' : hass.states['sensor.rte_tempo_prochaine_couleur'].state === 'Bleu' ? 'rgb(15, 117, 137)' : ''} !important; border-radius: 0 32px 32px 0 !important; } attribute: friendly_name show_name: true columns: 2 rows: 2 card_type: button entity: sensor.rte_tempo_prochaine_couleur_visuel Affichage en dégradé (gradient) pour pièces ou zones 🏡 Carte à fond rayé pour zones personnalisées (petit trick css) type: horizontal-stack cards: - type: custom:bubble-card entity: sensor.shelly_3em_c_power card_mod: style: > .bubble-button-background { background: linear-gradient(45deg, #72500b 1%, #fff 1%, #fff 49%, #72500b 49%, #72500b 51%, #fff 51%, #fff 99%, #72500b 99%); background-size: 10px 10px; background-position: 0 0; } - type: custom:bubble-card entity: sensor.conso_maison_instant_w card_mod: style: > .bubble-button-background { background: linear-gradient(45deg, #72500b 1%, #fff 1%, #fff 49%, #72500b 49%, #72500b 51%, #fff 51%, #fff 99%, #72500b 99%); background-size: 10px 10px; background-position: 0 0; } Intégration Zendure (partie 1) MilesTEG1 Avril 3, 2025, 3:18 2 Salut @yannweb Superbes tes cards ! Je n’ai pas de production solaire, ni de VE, mais certaines cartes m’intéresse ^^ Ce sont celles des énergies ^^ Pourrais-tu mettre le code ce quelques unes d’entres elles ? Et enfin, au sujet des cartes hachurées, je n’ai rien qui s’affiche en collant ton code et en mettant des entités d’énergie… C’est normal ? MilesTEG1 Avril 3, 2025, 6:27 4 C’est déjà installé cob94440 Avril 3, 2025, 7:00 5 Bonjour tu aurais le template pour : sensor.rte_tempo_prochaine_couleur_format Stp Merci d…