Les graphiques sont des dessins SVG reliés à l'installation : un plan dont les lampes s'allument, un schéma de chauffage dont les circulateurs tournent, un flux d'énergie dont les flèches défilent selon la puissance, un plan de sécurité dont les contacts de porte virent au rouge. Vous les préparez sur la page Graphiques du panneau d'administration ; les utilisateurs les placent sur leurs vues (voir « Graphiques sur vos vues »). La page Graphiques constitue sa propre entrée dans le groupe BÂTIMENT de la barre latérale, à côté de Logique.
Un graphique est constitué de quatre éléments :
| Élément | Description |
|---|---|
| Le dessin | Un document SVG : un tracé que vous avez dessiné ou exporté, une image d'arrière-plan ou une zone vierge que vous remplissez de symboles |
| Symboles | Des formes prêtes à l'emploi issues de la bibliothèque (une lampe, un volet, une pompe, une pastille de valeur…) placées sur le dessin, avec leurs liaisons et actions préconfigurées |
| Liaisons | Des règles qui modifient une forme lorsqu'une valeur change : une couleur, un texte, une classe, une position, une animation |
| Actions | Ce que déclenche un appui, un double appui ou un appui long sur une forme : basculer un appareil, exécuter un scénario, ouvrir une pièce, accéder à une vue |
La page Graphiques. Le tableau liste chaque graphique avec son nombre de liaisons et d'actions ainsi que son statut d'emplacement (Placé : « 2 vue(s) » ou « non placé »). Chaque ligne propose Modifier, Dupliquer, Exporter et Supprimer. Au-dessus du tableau : Nouveau graphique et Importer un bundle.
⚠️ Avertissement : Supprimer un graphique placé sur des vues supprime également ces emplacements — la boîte de dialogue vous indique sur combien de vues.
Création d'un graphique
Cliquez sur Nouveau graphique. Le premier écran vous demande comment démarre le dessin :
| Point de départ | Comportement | Taille du graphique |
|---|---|---|
| Depuis un fichier SVG | Votre dessin devient le graphique. Les symboles se superposent dessus, et vous pouvez lier les formes qu'il contient déjà. | La taille native du fichier |
| Depuis une image d'arrière-plan | Une photo, un plan numérisé ou une scène générée devient l'arrière-plan. Le graphique est créé et enregistré immédiatement, l'image étant stockée sur le serveur. Les symboles se placent par-dessus. | La taille de l'image |
| Composition vierge | Un canevas vide — symboles uniquement, un logo par exemple. Choisissez Large 16:10, Classique 4:3, Carré ou une largeur et une hauteur Personnalisées. | La taille définie |
| Exemples | Deux graphiques complets fournis avec le serveur : Flux d'énergie et Station de pompage. Ils sont importés sous forme de copies modifiables ; leurs références d'appareils sont associées par leur nom. | La taille de l'exemple |
La taille d'un graphique correspond à son espace de coordonnées, affiché dans l'onglet Source sous Dimensions du graphique. Vous pouvez la modifier ultérieurement ; l'ensemble du dessin s'adapte à l'échelle. Une image d'arrière-plan ajuste systématiquement les dimensions à la taille de l'image.
💡 Conseil : Une image claire (fond blanc) nécessite des traits sombres quel que soit le thème de l'application. Lorsque vous partez d'une image d'arrière-plan claire, le paramètre Couleurs bascule automatiquement sur Dessin clair (voir Test, paramètres, export ci-dessous).
L'éditeur
L'éditeur comporte deux colonnes. À gauche, l'Aperçu affiche le graphique exactement comme le feront les applications, avec une barre d'outils :
| Bouton | Fonction |
|---|---|
| Insérer un symbole | Ouvre la bibliothèque de symboles (voir Symboles ci-dessous) |
| Déplacer | Mode composition : faites glisser un symbole pour le déplacer, tirez sur le point orange à son angle pour le redimensionner, cliquez dessus pour modifier ses liaisons, appuyez sur Supprimer pour le retirer, Échap pour désélectionner |
| Sélectionner | Cliquez sur n'importe quelle forme du dessin pour la sélectionner et modifier ses liaisons — pour les formes dessinées manuellement plutôt que les symboles |
| Panoramique, Zoom arrière, Zoom avant | Déplacez-vous et zoomez dans l'aperçu ; la molette de la souris permet aussi de zoomer ; cliquez sur le pourcentage pour revenir à 100 %. Le zoom ne concerne que votre affichage du dessin, il ne change rien au graphique |
À droite, quatre onglets :
- Source — le nom, Téléverser SVG, les Dimensions du graphique et le texte SVG lui-même, modifiable directement. En dessous, le résultat du nettoyage : « Le dessin passe le filtre sans modification », ou la liste des éléments supprimés.
- Symboles (n) — chaque symbole placé sur le dessin, plus Autres éléments pour les formes propres au dessin (voir Symboles ci-dessous).
- Valeurs de test — injecte des valeurs dans l'aperçu (voir Test, paramètres, export ci-dessous).
- Paramètres — description, couleurs, ajustement, arrière-plan, CSS supplémentaire et ressources d'images (voir Test, paramètres, export ci-dessous).
Rôle du filtre de nettoyage. Le serveur assainit chaque dessin lors de l'enregistrement : les scripts, les gestionnaires d'événements, les liens et les images externes sont supprimés, et les animations sont limitées aux attributs sécurisés. Un dessin peut peser au maximum 2 Mo. Les modifications effectuées par le filtre sont listées sous la source pour que rien ne disparaisse à votre insu.
Enregistrement. Rien n'est transmis aux applications tant que vous n'avez pas cliqué sur Enregistrer. Si une liaison ou une action est incomplète — un symbole sans appareil, un sélecteur sans correspondance —, l'enregistrement est refusé et l'éditeur ouvre la ligne en cause avec le motif de l'erreur.
Symboles
Les symboles représentent le moyen le plus rapide de concevoir un graphique : chacun intègre déjà les liaisons et les actions nécessaires ; il suffit donc de placer une lampe et de sélectionner son éclairage pour la rendre opérationnelle.
La bibliothèque. Cliquez sur Insérer un symbole. La boîte de dialogue est organisée par catégorie, avec un champ de recherche.
| Catégorie | Symbole | Affichage et comportement |
|---|---|---|
| Éclairage | Lampe | L'ampoule s'allume et brille lorsque l'éclairage est actif ; un appui bascule l'état |
| Climat | Radiateur | Un radiateur avec sa température ; un appui ouvre la pièce |
| Climat | Ventilateur | Tourne en fonctionnement ; un appui bascule l'état |
| Ouvrants | Volet | Une fenêtre dont la fermeture suit la position du volet roulant |
| Local technique | Pompe | Verte et en rotation en fonctionnement ; un appui bascule l'état après confirmation |
| Local technique | Vanne | Une vanne deux voies dont la voie ouverte est mise en surbrillance ; un appui bascule l'état |
| Local technique | Cuve | Une cuve dont le remplissage et la valeur suivent un niveau en pourcentage |
| Énergie | Panneau solaire | Un champ photovoltaïque avec sa valeur de production |
| Énergie | Batterie | Une batterie dont le niveau de remplissage suit l'état de charge |
| Énergie | Réseau | Le raccordement au réseau, vert en cas d'injection, avec la puissance |
| Énergie | Borne de recharge | Un véhicule qui s'illumine pendant la charge, avec la puissance de charge |
| Étiquettes et lignes | Ligne de flux | Une flèche en pointillés dont les tirets défilent lors du passage de l'énergie, plus vite selon la puissance, en sens inverse si le signe s'inverse |
| Étiquettes et lignes | Valeur analogique | Une pastille affichant n'importe quelle mesure avec son unité ; un appui ouvre l'appareil |
| Étiquettes et lignes | Texte | Une étiquette libre que vous saisissez vous-même ; redimensionnable et orientable comme tout symbole |
| Étiquettes et lignes | Indicateur d'état | Un point coloré accompagné d'un texte d'état pour une entrée binaire — ouvert / fermé, on / off |
| Navigation | Zone active, Zone active (large) | Une zone cliquable invisible à superposer sur la pièce d'un plan ; un appui redirige vers une pièce, une catégorie, une vue ou un appareil. Teintée en bleu dans l'éditeur uniquement, jamais dans les applications |
| Mes symboles | personnalisé | Icônes que vous avez téléversées (voir ci-dessous) |
Zones actives (Hotspots). Une Zone active est un symbole sans graphisme propre : un rectangle invisible dont toute la surface réagit à l'appui. Placez-en une sur chaque pièce d'un plan, ajustez sa taille avec le point d'angle et définissez sa destination dans son action (Aller à une pièce est préconfiguré). Elle apparaît en bleu pendant la composition pour rester repérable ; les utilisateurs ne la voient jamais.
Placement et déplacement. La sélection d'un symbole le dépose au centre du dessin, bascule l'aperçu en mode Déplacer et ouvre le panneau du symbole. Faites-le glisser à l'endroit voulu, tirez sur le point d'angle orange pour modifier sa taille, ou renseignez son Placement : X, Y, Échelle et Rotation. Ajuster au canevas met à l'échelle et centre le graphisme du symbole pour occuper tout le dessin — idéal pour un graphique constitué uniquement d'un logo. Un rectangle en pointillés délimite les bords du canevas lors des déplacements : les éléments situés en dehors sont tronqués dans les applications.
Le panneau de symbole. En haut, Appareil associe d'un seul clic l'ensemble des liaisons et actions du symbole à un même appareil — pour la plupart des symboles, c'est l'unique paramètre à définir. Sous le placement, trois sous-onglets listent les Liaisons, Actions et Animations propres au symbole, chacune modifiable comme décrit ci-dessous. Supprimer le symbole l'efface avec toutes ses lignes associées.
Texte. Le symbole Texte affiche les mots que vous saisissez dans son champ Texte. Modifiez son échelle pour changer sa taille ; liez sa couleur ou sa visibilité comme tout autre élément.
Autres éléments. Les formes propres au dessin sont listées sous Autres éléments, par identifiant (id) — une forme sans identifiant ne peut pas être liée. Attribuez des identifiants aux formes dans l'onglet Source, ou cliquez dessus avec l'outil Sélectionner ; ajoutez-leur ensuite des liaisons et des actions de la même façon. Les lignes dont le sélecteur est une classe ou un chemin plutôt qu'un identifiant sont regroupées sous Lignes sur d'autres sélecteurs.
Mes symboles. Dans la catégorie Mes symboles, Téléverser un symbole permet d'ajouter votre propre icône SVG — une caméra, un logo, un équipement absent de la bibliothèque :
| Champ | Signification |
|---|---|
| Fichier SVG | L'icône, d'un poids maximal de 256 Ko. Elle passe par le même filtre de nettoyage qu'un dessin |
| Nom | Son libellé dans la bibliothèque |
| Couleurs | Une couleur redessine l'icône dans la couleur de texte du dessin, afin qu'une liaison puisse la passer en vert ou en rouge. Conserver les couleurs préserve le graphisme d'origine et autorise uniquement l'affichage / masquage |
| Mots-clés | Termes permettant au champ de recherche de la retrouver |
Un symbole personnalisé ne comporte aucune ligne préconfigurée : ajoutez les liaisons et actions nécessaires après l'avoir inséré. Chaque graphique qui l'utilise en conserve sa propre copie ; renommer ou supprimer le symbole de la bibliothèque n'impacte donc aucun graphique existant.
Liaisons
Une liaison modifie une forme dès qu'une valeur change. Ouvrez un symbole (ou un élément sous Autres éléments), puis le sous-onglet Liaisons. Chaque ligne comporte quatre parties :
Sélecteur — la forme pilotée par la liaison. Pour les lignes propres à un symbole, il est prérempli (#lamp_1 .body) ; pour une forme dessinée à la main, il s'agit de son identifiant.
Source — la provenance de la valeur :
| Source | Champs |
|---|---|
| Appareil | Un appareil et l'un de ses objets — l'état de commutation de l'éclairage, la puissance du compteur, la mesure de la sonde |
| Fonction | Une fonction du moteur logique et l'une de ses sorties (voir « Configuration des fonctions et sorties ») |
| Statique | Une valeur fixe que vous saisissez — pratique pour tester une règle ou forcer un état |
Ce qui change — l'effet de la valeur sur la forme :
| Type | Effet | Champs supplémentaires |
|---|---|---|
| Attribut | Définit un attribut SVG (fill, stroke, opacity, width…) | le nom de l'attribut |
| Style | Définit une propriété CSS | le nom de la propriété |
| Texte | Remplace le texte de la forme par la valeur | décimales, unité et un modèle tel que {value} {unit} |
| Classe | Ajoute une classe quand la valeur est active, la retire sinon | le nom de la classe — à associer avec CSS supplémentaire |
| Visibilité | Affiche la forme quand la valeur est active, la masque sinon | — |
| Transformation | Pivote, déplace ou met à l'échelle la forme selon la valeur | l'opération |
| Animation | Pilote une ligne d'animation (voir Animations ci-dessous) : exécuter si actif, vitesse (dur) ou direction selon le signe | l'animation et le mode |
| Symbole (href) | Remplace la forme par un autre #symbol du dessin | — |
Correspondance — transformation de la valeur brute vers le format attendu par la forme :
| Correspondance | Comportement | Exemple |
|---|---|---|
| Directe | La valeur est utilisée telle quelle | une température injectée dans un Texte |
| On / off | Un résultat si actif, un autre si inactif | #facc15 si actif, #64748b si inactif, pour le remplissage d'une lampe |
| Plage | Échelonne une plage de valeurs d'entrée vers une plage de sortie ; Bloquer aux limites fige les extrémités, Utiliser la valeur absolue ignore le signe | 0–100 % vers un volet déplacé de −28 à 0 |
| Seuils | Paliers : jusqu'à une valeur donne un résultat, puis la suivante, puis sinon | jusqu'à 15 rouge, jusqu'à 30 orange, sinon vert, pour une cuve |
| Table de correspondance | Tableau de valeurs exactes, avec sinon pour tout le reste | 1 → Ouvert, 0 → Fermé, pour un mot d'état |
💡 Conseil : Les lignes de la bibliothèque constituent les meilleurs exemples : placez un Indicateur d'état et examinez ses trois liaisons — la couleur du point (On / off), la couleur du halo (On / off) et le mot d'état (Table de correspondance). Modifiez les deux termes dans la table pour indiquer « Ouvert » et « Fermé », ou « Armé » et « Désarmé ».
Actions
Une action exécute une commande lorsqu'une forme est touchée. Ouvrez le sous-onglet Actions d'un symbole, ou ajoutez-en une à une forme dessinée.
| Champ | Choix |
|---|---|
| Sélecteur | La forme réceptrice du geste — généralement l'ensemble du symbole |
| Geste | Appui, Double appui, Appui long |
| Action | Définir la valeur d'un appareil (avec la Valeur à envoyer) · Basculer un appareil · Incrémenter la valeur d'un appareil · Ouvrir la pièce de l'appareil · Ouvrir le détail de l'appareil (la page qu'ouvre sa tuile ; un appareil sans page dédiée ouvre sa pièce) · Exécuter un scénario · Exécuter une automatisation · Commande globale (éclairages ou volets, pour l'ensemble du bâtiment, une pièce ou une catégorie) · Aller à une vue · Aller à une pièce · Aller à une catégorie |
| Demander confirmation | Une question posée avant d'exécuter l'action, comme Démarrer la pompe ?. Laissez vide pour une exécution immédiate |
Une même forme peut recevoir plusieurs actions avec des gestes distincts : dans l'exemple Station de pompage, une pompe bascule son état lors d'un appui (après confirmation) et ouvre sa fiche d'appareil lors d'un appui long.
📘 Note : Les commandes d'appareils, les scénarios et les automatisations s'exécutent sur le serveur, quelle que soit l'application émettrice. Ouvrir la pièce de l'appareil, Ouvrir le détail de l'appareil, Commande globale, Aller à une vue, Aller à une pièce et Aller à une catégorie se déroulent au sein de l'application où l'appui a eu lieu ; l'aperçu administrateur ne peut donc pas les exécuter.
📘 Note : Les utilisateurs n'ont accès qu'aux actions autorisées par leur compte. Un symbole relié à un appareil extérieur aux pièces et catégories d'un utilisateur reste un dessin statique pour lui ; une commande globale sur l'ensemble du bâtiment est réservée aux administrateurs.
Animations
Une ligne d'animation applique un mouvement continu à une forme — un rotor qui tourne, des tirets qui défilent le long d'une ligne, une lampe qui clignote — que les liaisons peuvent démarrer, arrêter, accélérer ou inverser.
| Champ | Signification |
|---|---|
| Cible | La forme en mouvement (#pump_1 .rotor) |
| Attribut | Ce qui est animé : transform pour un déplacement, ou un attribut tel que stroke-dashoffset ou opacity |
| Transformation | Pour transform : rotate, scale, translate, skewX, skewY — une rotation s'effectue autour du centre du symbole |
| De, À | Les valeurs de départ et d'arrivée |
| Durée | Un cycle, par exemple 1s |
| Répétition | Un nombre de cycles, ou indefinite |
| Début | indefinite lorsqu'une liaison la déclenche, load pour démarrer dès l'affichage du graphique, ou une liste SMIL comme pump1.click; spin.end+1s |
| Fin, Remplissage | La condition de fin SMIL standard et l'état conservé à l'arrêt de l'animation |
Pour synchroniser une animation avec l'installation, ajoutez une liaison dont Ce qui change est Animation : exécuter si actif démarre et stoppe selon un état, vitesse (dur) définit son cycle à partir d'une valeur (une correspondance Plage des watts vers les secondes), direction selon le signe inverse le sens pour les valeurs négatives — le symbole Ligne de flux exploite ces trois possibilités.
Test, paramètres, export
Valeurs de test. Cet onglet propose un champ par valeur liée pour vous permettre de saisir une mesure et d'observer la réaction de l'aperçu. Activez Valeurs en direct pour injecter à la place les valeurs réelles de l'installation. Tester les actions (qui requiert les Valeurs en direct) permet aux clics dans l'aperçu d'exécuter leur action sur le serveur — basculer des appareils, lancer des scénarios et des automatisations — afin de valider un graphique avant sa mise à disposition des utilisateurs. Les actions propres à l'application (ouverture d'une pièce, commandes globales, navigation vers une vue) sont signalées mais pas exécutées.
Paramètres.
| Paramètre | Signification |
|---|---|
| Description | Une note affichée dans la liste |
| Couleurs | Suivre le thème de l'application — les symboles et étiquettes adoptent la couleur de texte de l'application ; Dessin clair — traits sombres quel que soit le thème, pour une image d'arrière-plan blanche ; Dessin sombre — traits clairs quel que soit le thème |
| Ajustement | Façon dont le dessin remplit son cadre : contain affiche la totalité, cover remplit le cadre en rognant |
| Arrière-plan | Une couleur sous le dessin, ou transparent |
| Hauteur min. (px) | La tuile ne sera jamais plus petite que cette valeur |
| CSS supplémentaire | Une feuille de style appliquée au dessin — classes pour les liaisons de type Classe, keyframes, transitions |
| Ressources d'images | Les images que le dessin peut référencer (PNG, JPEG, WebP). Téléverser une image en ajoute une ; Utiliser comme arrière-plan la place en fond de dessin et redimensionne le graphique à sa taille. Une image encore utilisée par le dessin porte la mention utilisée et ne peut pas être supprimée ; lors du remplacement de l'arrière-plan, l'éditeur propose de supprimer le fichier précédent |
Exportation et importation. Exporter télécharge un graphique sous forme de fichier bundle : le dessin, ses lignes, ses paramètres et ses images regroupés en un seul fichier. Importer un bundle sur la page Graphiques crée un graphique à partir d'un tel fichier. Les références aux appareils, fonctions, scénarios et vues sont associées par leur nom ; une référence sans correspondance est ignorée et l'importation en indique le nombre. C'est ainsi que les deux exemples sont distribués et qu'un graphique est transféré d'une installation à une autre.
Sauvegardes. Les graphiques et vos symboles personnalisés résident dans la base de données du serveur et font donc partie intégrante de la sauvegarde du serveur (voir « Sauvegarde et restauration »). Les images référencées par un graphique sont stockées sous forme de fichiers et ne sont pas incluses dans la sauvegarde : exportez le graphique sous forme de bundle pour conserver les fichiers avec lui.