Bubble Card est devenu incontournable pour créer des interfaces mobiles élégantes grâce à un travail exceptionnel de Clooos sur sa carte. Cependant, intégrer des données historiques tout en gardant un design cohérent reste un défi. Pour répondre à ce besoin, j’ai développé Bubble Graph Pro.

La genèse : Pourquoi faire simple quand on peut faire compliqué ?

Au départ, mon objectif était de trouver un code simple pour mettre en musique ce concept de graphique intégré. J’y parvenais en superposant une Bubble Card et une mini-graph-card en arrière-plan, le tout encapsulé dans une vertical-stack.

Le problème ? Ce montage était un calvaire à mettre en œuvre pour les novices, demandait une maintenance fastidieuse et, surtout, rendait l’éditeur visuel de la Bubble Card totalement inutilisable. Il fallait une meilleure solution.

Le concept : L’élégance sans compromis

L’idée est devenue évidente : transformer l’arrière-plan de vos boutons Bubble en de véritables moniteurs de données natifs. Au lieu d’aligner des dizaines de lignes de code complexes, Bubble Graph Pro devient une solution « tout-en-un », simple et efficace.

Les points forts du module

1. Un rendu précis et estétique

Le module ne se contente pas d’afficher des points ; il calcule des moyennes par segments de temps. Cela permet de lisser les bruits de vos capteurs pour ne garder que l’essentiel de l’information.

2. Des thèmes de couleurs « intelligents »

Plus besoin de chercher les codes RGB pendant des heures. Le module intègre des présélections automatiques adaptées à votre quotidien :

• Mode Thermostat : Une échelle optimisée de 14°C à 28°C (du bleu givré au rouge chaud).
• Mode Énergie : Pour visualiser instantanément votre production solaire ou votre consommation.
• Mode Batterie & Température Extérieure : Des contrastes étudiés pour une lisibilité maximale.

3. Une mise en page au pixel près

L’une des grandes forces de la version 2.3.3 est la gestion des Paddings (marges).

• Bottom Padding : Réservez l’espace exact pour vos icônes et boutons de contrôle en bas de carte.
• Top Padding : Évitez que votre courbe ne vienne chevaucher le nom de votre entité.
• Valeur 0 : Si vous réglez tout à 0, le graphique occupe l’intégralité de la surface du bouton pour un effet immersif total.

Installation rapide

Pas besoin de télécharger des fichiers externes ou de modifier vos ressources Lovelace. Le module s’installe directement dans la section Modules de votre Bubble Card. Tout est contenu dans le code YAML.

Prêt à transformer votre Dashboard ? Téléchargez le code via le lien ci-dessous et donnez à vos données l’écrin qu’elles méritent.