Cedynamix

La domotique, tout simplement intelligente.

Étiquette : Dashboard

  • CNX Graph Pro fait sa révolution : Passage à la V3.0!

    CNX Graph Pro fait sa révolution : Passage à la V3.0!

    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

    CNX Graph Pro
    CNX Graph Pro – Affichage entité principale

    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é.

  • Genèse de CNX Lunar Pro for Bubble Card v1.0

    J’adore cet astre, il a tellement d’impacts sur nos vies et parfois on a tendance à l’oublier. C’est éclairé par la lueur froide de mon écran pendant une nuit de développement, que l’évidence m’a frappé : il manquait à ce tableau de bord l’ultime capteur naturel, le plus ancien trigger de l’humanité : la Lune.

    Créer CNX Lunar Pro for Bubble Card n’a pas été qu’un simple défi technique consistant à dompter des Canvas HTML5 et des Z-index. C’est né d’une volonté profonde de réintégrer l’organique dans le numérique.

    • Le Symbole et le Mystère : La lune est le symbole absolu des cycles naturels et de l’inconscient. Face à l’immédiateté de nos notifications push, elle nous rappelle que le temps s’écoule selon un rythme qui nous dépasse.
    • L’Influence sur les Émotions : Si nos sondes mesurent la température avec rigueur, en astrologie, la lune représente notre âme, influençant notre humeur et notre parcours. Afficher sa phase, c’est offrir un contexte subtil à nos propres états d’âme.
    • Les Mythes et les Rituels : L’être humain a toujours levé les yeux vers la lune pour forger ses mythes. Aujourd’hui, nous baissons les yeux vers nos écrans. Ramener la pleine lune dans notre interface perpétue cette fascination millénaire.
    • L’Impact sur le Vivant : La lune est à l’origine de la plus grande automatisation terrestre. Elle sculpte nos marées, influence la biologie et modifie notre comportement. Calculer ses éphémérides, c’est s’interfacer avec le chef d’orchestre de la nature.

    Les Fondations Backend : Le choix de « Moon Astro »

    Pour afficher cette mécanique céleste avec une exactitude irréprochable, il fallait un backend solide. Il existe bien entendu l’intégration officielle Moon de Home Assistant, mais pour ce que je voulais accomplir, elle n’était tout simplement pas assez complète.

    Pour obtenir des données fiables et absolues, je me sers de l’intégration HACS Moon Astro (svalsemey/hassio-moon-astro).

    Si vous cherchez la précision ultime pour un projet domotique pointu, c’est la solution la plus robuste du moment :

    • Moteur Mathématique : Elle utilise la puissante bibliothèque astronomique professionnelle Skyfield (DE440) pour calculer les éphémérides.
    • Richesse des Données : Elle fournit l’Azimut, l’Élévation (Altitude topocentrique), l’Illumination, la distance, et tous les événements lunaires clés (phases, apogée, périgée).
    • Fiabilité Locale : Il n’y a aucun appel réseau (Cloud) à part le téléchargement initial du modèle mathématique d’éphéméride au premier lancement.

    Lien du dépôt GitHub : svalsemey/hassio-moon-astro

    Le Maillon Manquant : Calculer l’Âge de la Lune

    Malgré le fait que Moon Astro soit extrêmement complet dans les données calculées, il y manque une information que j’aime particulièrement avoir sous les yeux : l’âge de la lune (en jours).

    Ce n’est pas très grave, la force de Home Assistant réside dans sa flexibilité. Nous allons créer un petit Template Sensor en Jinja2 pour compenser ce manque à partir des données de l’intégration.

    Voici le code à ajouter dans votre fichier templates.yaml :

    YAML

    template:
  - sensor:
      - name: "Âge de la Lune"
        unique_id: calcul_age_de_la_lune
        unit_of_measurement: "jours"
        icon: "mdi:progress-clock"
        state: >
          {% set last_new_moon = states('sensor.moon_astro_nouvelle_lune_precedente') %}
          {% set ts_last = as_timestamp(last_new_moon, default=None) %}
          
          {% if ts_last != None %}
            {% set ts_now = as_timestamp(now()) %}
            {% set age_in_seconds = ts_now - ts_last %}
            
            {# Diviser par 86400 (secondes dans une journée) et arrondir #}
            {{ (age_in_seconds / 86400) | round(2) }}
          {% else %}
            unavailable
          {% endif %}

    Explications du code (Jinja2) :

    • as_timestamp(...) : Cette fonction prend la valeur brute de votre sensor (ex: 2026-05-16T20:01:00+00:00) et la transforme en un nombre de secondes écoulées depuis le 1er janvier 1970 (Timestamp Unix). Elle gère automatiquement le décalage horaire UTC.
    • default=None : C’est une sécurité indispensable. Si jamais l’intégration astro plante, ou que le sensor source est indisponible lors d’un redémarrage, le calcul ne générera pas d’erreur critique dans vos logs et affichera simplement l’état unavailable.
    • 86400 : C’est le nombre exact de secondes contenues dans 24 heures (60 * 60 * 24), nécessaire pour convertir l’âge en jours.
    • round(2) : Permet d’obtenir un résultat propre (ex: 11.14 jours). Vous pouvez utiliser round(1) si vous préférez n’avoir qu’une seule décimale sur vos cartes.

    Une fois ce code ajouté, un redémarrage rapide suffira pour faire remonter votre nouveau sensor.age_de_la_lune.

    Avec des fondations Backend aussi solides grâce à Moon Astro et notre capteur d’âge personnalisé, la voie était libre pour développer le Frontend. C’est ainsi qu’est né CNX Lunar Pro for Bubble Card, un module graphique capable de marier la poésie de la mécanique céleste à l’exigence de notre architecture domotique.

    Le Module CNX Lunar Pro for Bubble Card

    Exemple de CNX Lunar Pro for Bubble Card

    Le module CNX Lunar Pro for Bubble Card est un moteur de rendu pour la carte Home Assistant Bubble Card de Clooos. Sa fonction principale est de remplacer l’icône native d’une carte par une représentation graphique réaliste et dynamique de la Lune en temps réel.

    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)

  • Sublimer vos graphiques avec Bubble Card sous Home Assistant

    Sublimer vos graphiques avec Bubble Card sous Home Assistant

    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.