---
description: Synoptiques des graphiques du process
---

# Synoptiques

## Aller sur IHM > Contenus > Synoptiques

​Cliquer sur Synoptiques pour accéder à la section permettant de créer un synoptique.

<figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2Fnm22bmEbyxiVN8iEyyIt%2Fimage.png?alt=media&#x26;token=c40ade47-c0d9-446f-a1a4-c25419720ddc" alt=""><figcaption></figcaption></figure>

## Ajouter un nouveau synoptique

<div><figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2F59jFHQ3HoHwGfy6jOz97%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-04-29%2016-53-00.png?alt=media&#x26;token=ef5120d5-c610-4a68-88f5-8a5d8be18a18" alt=""><figcaption><p>Clique sur ajouter</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FJbL7JxLOkHZJHmGrNzEq%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-04-29%2016-53-30.png?alt=media&#x26;token=a0b134d1-37f3-4f43-80b5-ce341ade4b83" alt=""><figcaption><p>Nommer le synoptique</p></figcaption></figure></div>

Ajouter un synoptique permettra de créer un design unique pour un équipement ou encore un bâtiment.

## Paramétrer le synoptique

<figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FEa8jfuwZV92QUM30HXY2%2Fsvg-edit-main-tools.jpg?alt=media&#x26;token=ebea1a84-9705-436d-82c1-9ff25fbe5253" alt=""><figcaption><p>Accueil du développement de graphique</p></figcaption></figure>

Une fois sélectionné, vous serez dirigé directement sur la page d'accueil. Les 3 fonctions mises en évidence sont les fonctions principales :&#x20;

* (1) Rouge : il s'agit de la sélection des figures géométriques
* (2) Vert : il s'agit de la sélection des figures à formes libres
* (3) Bleu : il s'agit de la sélection de textes

## Options de développement

<div><figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FNg1I8LpYIHgrBEjInM4s%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2010-52-23.png?alt=media&#x26;token=27986950-c3d6-405f-8d35-cb2df854d123" alt=""><figcaption><p>Options de formes libres</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FSK9OwxDksrFfstwGtCEr%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2010-54-13.png?alt=media&#x26;token=a3e43068-c381-47ff-8bc2-f7d010aab1a6" alt=""><figcaption><p>Options de formes géométriques</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FiuhuXL9gBbPOw55f0zKG%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2010-55-50.png?alt=media&#x26;token=480bd011-3b56-4dd8-bcf4-3b47127cf661" alt=""><figcaption><p>Option du texte</p></figcaption></figure></div>

Dans les options de développement nous retrouvons :&#x20;

* Formes libres :&#x20;
  * Outil plume : Permet de dessiner une forme délimité avec plusieurs points que l'on ajoute avec la souris
  * Outil Main Levé : permet de de dessiner une forme en maintenant le clique de la souris
* Formes géométriques :&#x20;
  * Modèle d'objet ;&#x20;
  * Cercle, permet de dessiner un cercle
  * Elipse, permet de dessiner une ellipse;&#x20;
  * Polygone, permet de dessiner un polygone
  * Rectangle, permet de dessiner un rectangle ou un carré;&#x20;
  * Ligne, permet de dessiner une ligne
* Texte : texte, permet d'entrer un texte

Ces formes seront paramétrables grâce aux paramètres objets que l'on abordera dans la partie suivante.

## Paramètres objets

<div><figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FvfvDc7UUFNRG4brzg8Ds%2Fsbg-edit-right.jpg?alt=media&#x26;token=67070c3e-8200-45e3-90cf-7f9fff589409" alt=""><figcaption><p>Paramètre animations</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FJsdoDOaOcFAybxiCU4eV%2Fsbg-edit-anim.jpg?alt=media&#x26;token=9cd74190-1df1-4690-a47d-13c8fcdb98de" alt=""><figcaption><p>Paramètre interactions</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FyJouNceKoIkXLdEdm7pu%2Fsbg-edit-interaction.jpg?alt=media&#x26;token=74f65c55-2b8e-4355-9c15-30068ce4fb7f" alt=""><figcaption><p>Paramètre propriétés</p></figcaption></figure></div>

Dans les paramètres objets nous retrouvons :&#x20;

* Propriétés : il s'agit des paramètres de l'objet créé, on y retrouve les coordonnées X Y, la longueur, la largeur, le remplissage en couleur interne et externe, l'orientation, l'angle, l'épaisseur des bordures, le type de bordure, les jonctions et extrémités
* Animations : il s'agit de fonctions réagissant à l'état des variables que l'on affecte à ces dernières pour modifier les propriétés des objets, on y retrouve 9 options tel que le clignotement de l'objet, le remplissage des contours et interne, la visibilité, le remplissage horizontal, le déplacement horizontal, la rotation, le texte, le remplissage vertical, le déplacement vertical.

## Animations

* Sélectionnez par un clic l'élément graphique sur lequel vous souhaitez ajouter une animation, rendez vous à droite dans la catégorie _Animation,_ enfin, créez une nouvelle animation en cliquant sur le bouton "+"\
  Une fois le bouton cliqué : 14 animations s'offrent à vous, choisissez celle qui vous convient.

<figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FYwQk0NdmgKmCAiNJy4Uj%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2012-38-14.png?alt=media&#x26;token=15f85273-9801-47dc-bec2-4735d24f69a3" alt="" width="375"><figcaption><p>Choisir l'animation de l'objet</p></figcaption></figure>

* Une fois le type d'animation sélectionné, la fenêtre d'édition s'ouvrira devant vous.  Sur celle-ci, vous pourrez modifier 3 informations :&#x20;
  1. Le nom de l'animation. _(Conseil : Nommez là en fonction de l'information quelle transmet)_
  2. Les conditions d'activation de l'animation, Encore une fois, vous retrouverez des explications détaillées pour créer une formule sur cette page : \[Ajouter lien vers édition de formules]
  3. Les paramètres visuels de l'animation (_vitesse de rotation, couleur, durée, ..)_

<figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FRlhih53zSEQTVQ5deNVY%2Fsvg-edit-formule.jpg?alt=media&#x26;token=50054d77-2538-487d-87ac-25f43d6bf596" alt="" width="375"><figcaption></figcaption></figure>

* Sauvegarder l'animation : il s'agit d'enregistrer l'animation précédemment remplie
* Animation créée : il s'agit du résultat que l'on obtient après la configuration de l'animation

## Enregistrer le graphique

<div><figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FpUUS4xiX4DRM2j3nbJt7%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2015-55-02.png?alt=media&#x26;token=bba0e545-a87f-49fe-9eb9-43e228a6943e" alt=""><figcaption><p>Cliquer sur enregistrer</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2F4ohtuBbYGDNBq2DBMH8d%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2015-56-05.png?alt=media&#x26;token=14e82d5b-9b1e-49dc-aaac-58655fc9c8c6" alt=""><figcaption><p>Cliquer sur confirmer</p></figcaption></figure></div>

Pour enregistrer l'édition, il faut cliquer sur "Enregistrer" et confirmer la modification. Activer l'option "Ajuster automatiquement à la taille du contenu" permet d'éviter d'avoir de trop gros graphiques avec peu d'éléments dedans.&#x20;

<div><figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2Ffu9YrK7y6gDomWOJ606b%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2016-01-19.png?alt=media&#x26;token=ea5a182d-cac4-4d7b-8c09-1914793ba018" alt=""><figcaption><p>Avant sauvegarde</p></figcaption></figure> <figure><img src="https://3448551736-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqIpmKf9C2tuFgdUD9Dx8%2Fuploads%2FHbVghHdvEn15FpQY3GVN%2FCapture%20d%E2%80%99%C3%A9cran%20du%202025-02-20%2016-00-49.png?alt=media&#x26;token=59be350a-14f0-4acb-aab9-5751105d7a09" alt=""><figcaption><p>Après sauvegarde</p></figcaption></figure></div>
