Animation

Une fois votre Graphique créé, le module Designer vous permet de pouvoir ajouter des animations.

Cela se fait également depuis la page d'édition d'un graphique :

Page d'édition du graphique "TEST"

Avant de pouvoir effectuer quelconques modifications sur l'élément du graphique, il faut sélectionner celui-ci, puis cliquer sur le bouton "dégrouper" 2 fois afin de pouvoir sélectionner chaque petite partie de l'élément.

Elément après dégroupage

Une fois le dégroupage effectué, vous pouvez maintenant créer des animations.

Cliquer sur "Animations" en haut à droite :

Maintenant cliquer sur l'élément de votre graphique que vous voulez animer puis cliquer sur "+" de le menu "Animations" sur la droite de la page

Il y a plusieurs types d'animations possibles, selon l'élément choisi :

Prenons l'exemple d'une animation de remplissage verticale :

Menu des types d'animations

Animation de remplissage verticale

Après avoir cliqué sur l'animation que l'on souhaites, un onglet pop-up s'ouvre afin d'entrée les informations suivantes :

• Titre
• Valeur numérique : soit un attribut, soit une formule (ex : temp_eau + 1) ou une opération
• Couleur à vide, couleur de remplissage
• Valeur min et max
• Sens de remplissage

Attention : Si vous choisissez une autre animation que "Remplissage" les informations demandées sont différentes, mais la logique reste inchangée.

Sélection de l'attribut "Température eau"

Paramétrage de l'animation

Une fois ces informations validées, cliquer sur "Sauvegarder".

Résultat

Ainsi, les animations paramétrées apparaissent dans l'onglet "Animations" sur le menu de droite.

Pour prendre un autre exemple, on peut également animer le texte au-dessus de l'élément que nous venons d'animer.

Pour cela, cliquer sur "+" dans l'onglet "Animations" puis sélectionnez le texte

On remarque que la valeur et l'unité sont deux éléments distincts dus au dégroupage réalisé auparavant. Vous devrez donc répéter deux fois l'opération. Une fois sur l'emplacement de la valeur "XX" et une fois sur celui de l'unité, ici "Bar".

Deux éléments distincts

Cliquer ensuite sur l'animation "Texte" :

Pop-up animation "Texte"

Paramétrage attribut + comparaison + valeur

Pour animer le texte on peut donc utiliser l'attribut "Température eau" et lui spécifier grâce au l'outil de comparaison une condition : par exemple, le dépassement des 90°C.

Ensuite, il ne reste plus qu'a spécifié le texte que l'on veut mettre lorsque la condition est, ou n'est pas remplie

• Si la valeur de température d'eau est au dessus de 90°C --> Surchauffe
• Si la valeur de température d'eau est en dessous de 90°C --> Température correcte

Enfin, cliquer sur "Sauvegarder"

Choix du texte affiché sous conditions

Résultat

Dans notre cas, on peut donc à la fin supprimer la deuxième zone de texte que l'on utilisera pas en la sectionnant et en appuyant sur la touche "Supprimer" de votre clavier. Pour recentrer la valeur que l'on viens de paramétrer, cliquer dessus en la faisant glisser avec la souris.

Enfin, on peut aussi remplacer les valeurs texte (0 et 120) en dessous de l'élément "barre" par les valeurs que l'on souhaite en double cliquant dessus afin d'y mettre le même intervalle que sur l'animation de remplissage.

Mis à jour le : 15/04/2026