Salut tout le monde !

Aujourd’hui, on franchit un cap. Si vous avez suivi l’évolution du module depuis la version 2.4, préparez-vous à un changement de dimension. Nous passons directement à la V3.0 de CNX Graph Pro for Bubble Card. Ce n’est pas une simple mise à jour esthétique ou quelques corrections de bugs, c’est une refonte complète.

Le Syndrome de la Courbe Solitaire

Il fut un temps où afficher une belle courbe bleue pour la température du salon sur nos tableaux de bord nous suffisait. Le design était pur, l’intégration parfaite. Mais très vite, cette donnée isolée a montré ses limites. Une courbe seule est muette. S’il fait 26°C dans la pièce, est-ce parce que le chauffage s’est emballé ? Est-ce que la baie vitrée est restée ouverte en plein soleil ?

Passer au multi-capteurs, ce n’est pas juste « ajouter des données pour faire geek ». C’est donner du contexte pour comprendre instantanément ce qu’il se passe chez soi, d’un seul coup d’œil.

Prenons un cas concret qui a motivé cette refonte :

• L’optimisation énergétique : Avec un capteur unique, on constate un énorme pic de consommation à midi. Inquiétant ? Pas si l’on superpose la production de nos panneaux solaires (comme les Sunology Play 2), la consommation globale, et l’état du chauffe-eau en fond. Le graphique prend vie : on voit immédiatement que notre domotique a intelligemment déclenché le ballon d’eau chaude au moment exact où le soleil brillait fort. Ce qui ressemblait à une anomalie devient la preuve visuelle d’une maison parfaitement gérée.

Les Nouveautés de la V3.0

Pour répondre à ces enjeux sans sacrifier la fluidité de nos interfaces, le moteur a été entièrement repensé :

• 🔄 Jusqu’à 4 entités simultanées : Vous pouvez désormais afficher l’entité principale de votre carte + 3 capteurs additionnels (Slots) configurables de A à Z. Pour préserver les performances, le module regroupe intelligemment les requêtes API vers Home Assistant en un seul envoi optimisé.
• ⚖️ Le Moteur Dual-Axis (Double Échelle) : C’est une des grandes nouveautés technique. Vous pouvez désormais lier n’importe quel capteur additionnel à un « Axe Secondaire ».
• 🎨 Indépendance Totale & Z-Index : L’époque où l’épaisseur du trait s’imposait à toutes les courbes en même temps est révolue. Chaque slot possède désormais son propre réglage de lissage, sa propre épaisseur, et surtout, son propre Z-Index (-5 à 10). Vous décidez exactement quelle courbe passe au premier plan et laquelle reste en arrière-plan (idéal pour créer des blocs de couleurs avec les remplissages).
• 🛡️ YAML Blindé et Algorithme de Peintre : Fini les disparitions soudaines de cartes à cause d’une virgule mal placée. Le code YAML a été sécurisé, et la logique de dessin des calques a été réécrite pour que les remplissages et les traits se superposent avec précision.

Le code complet est disponible en téléchargement juste en dessous.

Un immense merci à vous tous pour votre soutien sur ce projet Cedynamix Solutions. Ce sont vos retours continus qui me permettent de pousser ces modules toujours plus loin. N’hésitez pas à partager vos plus belles créations graphiques dans les commentaires, j’ai hâte de voir comment vous allez exploiter ce nouveau moteur Dual-Axis !

À vos tableaux de bord

CNX Graph Pro v3.0 : Vos données n’ont jamais été aussi élégantes.

---

Téléchargement et Installation

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 (cliquez sur l’image) et donnez à vos données l’écrin qu’elles méritent.

---

📝 Changelog : CNX Graph Pro

Voici le changelog complet de CNX Graph Pro, retraçant toute l’évolution depuis la version de base 2.4.0

Nouvelles Fonctionnalités

• Ajout de 3 Slots additionnels configurables indépendamment de l’entité de la carte (Couleurs, Remplissage, Seuils).
• Introduction de l’Axe Secondaire.
• Option ignore_main_entity pour n’utiliser le graphique que pour des capteurs tiers.
• Ajout de la gestion du Z-Index permettant de définir précisément l’ordre de superposition visuelle de chaque courbe.
• Indépendance architecturale des paramètres de dessin. L’épaisseur du trait (line_width) et le lissage (line_smoothing) ne sont plus globaux mais configurables individuellement pour chaque Slot.
• Déplacement de l’algorithme de tri du Z-Index à l’intérieur de la boucle de rendu dynamique (updateGraph). Cela garantit que l’ordre des calques est respecté même si les données de l’API arrivent en décalé.Nouvelles Fonctionnalités

Editeur

• Amélioration : Extension de la plage du Z-Index de -5 à 10 dans l’interface visuelle pour permettre de placer facilement un slot derrière l’entité principale (fixée à 1 par défaut).
• Amélioration : Possibilité d’assigner n’importe quel Slot additionnel à un axe de calcul secondaire indépendant (use_secondary_axis).
• Amélioration : Ajout de réglages de limites (Min/Max) dédiés au nouvel axe secondaire, permettant de faire cohabiter des valeurs dissemblables (ex: Température 15-25°C et Capteur Binaire 0-1) sur un même graphique.

BugFix

• Bugfix : Application d’un transtypage numérique strict (Number()) sur les valeurs de Z-Index pour éviter les conflits de format (String vs Number) envoyés par Home Assistant.
• Bugfix : Résolution du problème d’écrasement visuel où toutes les lignes se dessinaient systématiquement au-dessus de tous les remplissages, ignorant le Z-Index.

Performance

• Refonte du Rendu : Unification de la boucle de dessin. Le Canvas dessine désormais la ligne et le remplissage d’une courbe en une seule passe de calque, avant de passer à la courbe de Z-Index supérieur.
• Performance (Batch Fetching) : Regroupement des requêtes API Home Assistant. Au lieu de multiplier les appels au serveur, le module interroge l’historique de tous les capteurs en une seule requête ultra-rapide.
• Échelle Universelle (Global Scaling) : Le moteur analyse simultanément l’ensemble des courbes actives pour définir un point Min et Max global, garantissant une cohérence visuelle parfaite entre les capteurs sur l’axe principal.

ATTENTION : A la suite de la refonte complète des options du modules, supprimer votre anciènne configuration.

📖 Notice d’Utilisation : CNX Graph Pro (v3.0)

CNX Graph Pro est une extension visuelle avancée conçue pour les boutons Bubble Card sous Home Assistant. Son objectif est de superposer jusqu’à 4 historiques de capteurs sous forme de graphiques fluides en arrière-plan de vos boutons, sans jamais perturber l’interface tactile ou la géométrie de la carte.

1. Les Concepts Fondamentaux

Avant de configurer les options, il est important de comprendre les trois piliers du moteur de rendu :

• Le Canvas Fantôme : Le graphique est dessiné sur une toile transparente (z-index: 0) placée derrière vos icônes. Il est insensible au toucher (pointer-events: none).
• Le Moteur Multi-Calques (Z-Index) : Comme dans Photoshop, chaque courbe est un calque. L’algorithme empile intelligemment les calques du plus profond (fond) au plus élevé (premier plan).
• Le Double Axe (Dual-Axis) : Le module calcule deux échelles distinctes. L’axe primaire pour vos valeurs classiques (ex: Températures de 15 à 25) et l’axe secondaire pour des valeurs radicalement différentes (ex: Capteur de présence 0 ou 1, ou Humidité 0 à 100), permettant de les afficher sur le même graphique sans les écraser.

2. Paramètres Globaux & Structure

Ces réglages affectent le comportement général du module et de la carte.

• Ignorer l’entité de la carte (ignore_main_entity) :
  • Action : Désactive l’affichage du graphique de l’entité principale liée à la Bubble Card.
  • Utilité : Idéal si votre bouton contrôle une prise (On/Off), mais que vous souhaitez que le graphique en fond affiche uniquement la consommation électrique (configurée dans le Slot 1).
• Format Carré (is_square) :
  • Action : Force la Bubble Card à adopter un ratio parfait de 1:1.
  • Utilité : Uniformise le design de vos tableaux de bord pour créer des tuiles symétriques.
• Résolution – Points (points_limit) :
  • Action : Détermine le nombre de segments (points de calcul) qui composent vos courbes (de 10 à 100).
  • Utilité : Par défaut à 32. Plus la valeur est haute, plus la courbe est détaillée mais plus elle demande de calcul. Une valeur basse donne un style plus minimaliste.
• Historique – Heures (hours) :
  • Action : Définit la fenêtre de temps à afficher (de 1 à 168 heures = 1 semaine).
• Valeur Max / Min – Axe Primaire (upper_bound / lower_bound) :
  • Action : Verrouille l’échelle de l’Axe Primaire. Si non défini, le module calcule l’échelle automatiquement selon les données.
  • Utilité : Évite que le graphique ne « saute » visuellement quand une valeur change légèrement.
• Valeur Max / Min – Axe Secondaire (upper_bound_sec / lower_bound_sec) :
  • Action : Identique, mais dédié exclusivement aux capteurs configurés sur l’axe secondaire.
• Réserve Bas / Marge Haute (bottom_padding / top_padding) :
  • Action : Ajoute une zone vide (en pixels) en haut ou en bas du graphique.
  • Utilité : Permet de « tasser » la courbe vers le centre pour éviter qu’elle ne passe sous les textes en haut, ou sous les sous-boutons (thermostat) en bas. À régler sur 0 pour un mode immersif total.

3. Configuration des Courbes (Entité Principale & Slots 1 à 3)

Le module propose 4 espaces de configuration : L’entité principale de la carte, et 3 Slots additionnels. Les paramètres suivants sont disponibles et indépendants pour chaque courbe.

Sélection et Échelle (Uniquement pour les Slots additionnels)

• Entité (entity_x) : Permet de sélectionner le capteur à afficher.
• Lier à l’Axe Secondaire (use_secondary_axis_x) :
  • Action : Détache cette courbe de l’échelle mathématique principale pour utiliser la sienne (ou celle définie dans les paramètres globaux de l’axe secondaire).
  • Utilité : Indispensable pour afficher des pourcentages (0-100%) par-dessus des puissances (0-3000W).

Rendu Visuel

• Priorité d’affichage (z_index) :
  • Action : Détermine l’ordre de superposition (de -5 à 10).
  • Règle : Le chiffre le plus bas est dessiné en premier (en fond). Le chiffre le plus haut est dessiné en dernier (au-dessus des autres).
• Lissage de la courbe (line_smoothing) :
  • Action : Arrondit les angles de la courbe (courbe de Bézier). Si désactivé, la courbe reliera les points par des lignes droites (effet escalier).
• Épaisseur du trait (line_width) :
  • Action : Définit l’épaisseur de la ligne en pixels.
• Afficher le remplissage (show_fill) :
  • Action : Active le dégradé de couleur sous la ligne de la courbe jusqu’en bas de la carte.
• Opacité du remplissage (fill_opacity) :
  • Action : Règle la transparence du dégradé (0 = invisible, 1 = opaque).
  • Conseil : Lors de la superposition de plusieurs courbes, maintenez l’opacité entre 0.1 et 0.3 pour éviter une « bouillie » visuelle.

Gestion des Couleurs

• Mode de couleur (color_type) :
  • Fixe : La courbe et son remplissage auront une seule couleur unie, définie dans Couleur de ligne.
  • Seuils (Thresholds) : La couleur évoluera dynamiquement sous la forme d’un dégradé en fonction de la valeur atteinte.
• Présélections (preset_threshold) : (Valable uniquement si le mode « Seuils » est actif).
  • Choix de palettes pré-calculées.
  • Exemples : Énergie (Vert > Orange > Rouge), Temp Int (Bleu > Vert > Orange > Rouge), ou le profil exclusif Temperature Cedynamix.
  • Mode Personnel (custom) : Permet d’utiliser vos propres couleurs définies ci-dessous.
• Inverser les couleurs (invert_colors) :
  • Action : Retourne complètement la palette choisie. Utile par exemple pour une batterie (Rouge > Vert devient Vert > Rouge).
• Couleurs Min / Moyenne / Max :
  • Action : Si le profil « Personnel » est sélectionné, définit le trio de couleurs qui composera votre dégradé personnalisé.