Synoptiques¶

Cette page décrit les outils pour la création de synoptiques dans une application flybox.

Inkscape¶

Les synoptiques sont des schémas animés en temps réel. Le format vectoriel utilisé est le format SVG, qui est le standard vectoriel du web. Pour plus d'informations sur ce format, regarder ici.

De nombreux éditeurs graphiques savent exportés en format SVG. Nous préconisons l'utilisation de l'éditeur Inkscape, gratuit et open-source. Se référer au site pour télécharger et installer Inkscape dans votre langage préféré.

note

Il existe de nombreux tutoriels de Inkscape sur le web et sur les chaînes vidéos. En voici un florilège.

Création d'un synoptique¶

Dans Inkscape, créer un fichier vierge puis modifier la taille dans les propriétés du document, en choisissant l'unité px.

Propriétés

Paramétrage d'une animation¶

Les animations en temps réel sont associés à des objets vectoriels en associant des paramètres dans leurs propriétés :

Dessiner un objet ou un groupe d'objet
Ouvrir la boite de propriétés
Saisir fb-animation dans le champ Titre
Saisir les paramètres d'animation dans le champ Description

attention

Seuls les objets dont le titre contient fb-animation dans sa fenêtre de propriétés seront animés. C'est de cette manière que la flybox distingue les objets statiques des objets animés.

Les paramètres se présentent sous la forme d'un objet JSON qui contient deux propriétés :

type : définit le type d'animation
params : définit la valeur du ou des paramètres d'animation comme par exemple les variables ou les couleurs

A titre d'exemple, une animation de couleur sur une variable booléenne 0/1 se présente ainsi :

{
    "type": "fillcolor",
    "params": {
        "variable": "CUVE_NIVEAUHAUT",
        "color0": "#689f38",
        "color1": "#e53935"
    }
}

Dans Inkscape :

Propriétés

Après avoir saisi ou modifier les paramètres, appuyer sur le bouton Définir.

Types d'animation et paramétrage¶

flybox animation helper¶

L'utilitaire flybox animation helper permet de mettre en forme plus facilement les paramètres d'animation en format JSON.

Voici le même paramétrage généré avec cet utilitaire :

Saisir le nom de la variable
Choisir la couleur pour la valeur 0
Choisir la couleur pour la valeur 1
Copier le paramétrage JSON et le coller dans Inkscape

Propriétés

attention

Les nom de variables flybox sont sensibles à la casse. Il faut faire attention aux majuscules et minuscules. Une bonne pratique consiste à déclarer toutes les variables en majuscules afin d'éviter ce genre d'ambiguité.

Il en est de même pour les autres type d'animations.

Couleurs prédéfinies¶

Pour les couleurs pleines, les mots clés suivant peuvent être utilisés en lieu et place des codes RGB :

"red": "#FF0000"
"green": "#00FF00"
"blue": "#0000FF"
"yellow": "#FFFF00"
"orange": "#FF8000"
"black": "#000000"
"white": "#FFFFFF"
"grey": "#808080"
"lightgrey": "#C0C0C0"
"darkgrey": "#404040"

Changer la couleur de remplissage sur un bit (2 couleurs)¶

{
    "type": "fillcolor",
    "params": {
        "variable": "NIVEAU_HAUT",
        "color0": "green",
        "color1": "red"
    }
}

Changer la couleur de remplissage sur une valeur analogique (n couleurs)¶

{
    "type": "fillcolor",
    "params": {
        "variable": "NIVEAU_HAUT",
        "colors": [
            {"value": 0, "color": "green"},
            {"value": 70, "color": "orange"},
            {"value": 90, "color": "red"}
        ]
            "green",
        "color1": "red"
    }
}

Simple afficheur numérique¶

{
    "type":"textvalue",
    "params": {
        "variable":"TEMPERATURE_CUVE",
        "format":"%v °C"
    }
}

Texte associé à une valeur analogique (n textes)¶

{
    "type":"textcaption",
    "params": {
        "variable":"ETAPE_PROCESS",
        "values": [
            {"value": 0, "caption":"Arrêt"},
            {"value": 1, "caption":"Ouverture rampe"},
            {"value": 2, "caption":"Remplissage"},
            {"value": 3, "caption":"Mélange"},
            {"value": 4, "caption":"Stabilisation"},
            {"value": 5, "caption":"Vidange"},
            {"value": 6, "caption":"Purge"}
        ]
    }
}

Changer la couleur du contour sur un bit (2 couleurs)¶

{
    "type": "strokecolor",
    "params": {
        "variable": "NIVEAU_HAUT",
        "color0": "green",
        "color1": "red"
    }
}

Changer la couleur du contour sur une valeur analogique (n couleurs)¶

{
    "type": "strokecolor",
    "params": {
        "variable": "NIVEAU_HAUT",
        "colors": [
            {"value": 0, "color": "green"},
            {"value": 70, "color": "orange"},
            {"value": 90, "color": "red"}
        ]
            "green",
        "color1": "red"
    }
}

Bargraphe vertical¶

{
    "type":"bargraph",
    "params": {
        "variable":"NIVEAU_CUVE",
        "min": 0,
        "max": 100,
        "color":"green"
    }
}

Visibilité¶

{
    "type":"visibility",
    "params": {
        "variable": "DEFAUT_MAJEUR",
        "visibleValue": 1,
        "blinkPeriod": 500
    }
}

Visibilité avec clignottement¶

{
    "type":"visibility",
    "params": {
        "variable": "DEFAUT_MAJEUR",
        "visibleValue": 1,
        "blink": true,
        "blinkPeriod": 500
    }
}

Visibilité avec clignotement indépendant¶

{
    "type":"visibility",
    "params": {
        "variable": "PRESENCE_DEFAUT",
        "visibleValue": 1,
        "blinkVariable": "DEFAUT_MAJEUR",
        "blinkValue": 1,
        "blinkPeriod": 500
    }
}

Animation multiples sur le même objet¶

Pour associer plusieurs animations sur un même objet, il faut regroupes ces animations dans un tableau au format JSON : [ {...}, {...}, {...} ].

[
    {
        "type":"visibility",
        "params": {
            "variable": "PRESENCE_DEFAUT",
            "visibleValue": 1,
        }
    },
    {
        "type": "fillcolor",
        "params": {
            "variable": "NIVEAU_DEFAUT",
            "colors": [
                {"value": 1, "color": "yellow"},
                {"value": 2, "color": "orange"},
                {"value": 3, "color": "red"}
            ]
        }
    }

Variables et expressions¶

Pour associer une variable à une animation, il faut saisir le nom de la variable dans le paramètre correspondant. Attention, les noms de variables sont sensibles à la casse et il faut respecter les majuscules / minuscules.

Il est possible de saisir une expression mathématique en lieu et place d'une variable. La syntaxe de cette expression est celle du langage javascript. Attention, pour utiliser une valeur de variable dans une expression, il faut lui ajouter le préfixe $tag.. Exemples d'expressions :

$tag.CUVE_NIVEAUHAUT * 0.8

($tag.POID_CUVE1 + $tag.POID_CUVE2) / 2

($tag.CUVE1_NH==1) || ($tag.CUVE2_NH==1) || ($tag.CUVE2_NH==1)

Math.round(tag.CUVE_NIVEAUHAUT)

Symbols et références indirectes¶

Dans un groupe d'objets vectoriels (par exemple une vanne, un moteur, un ventilateur, ...), il est possible de saisir des paramètres qui seront utilisés dans les objets à l'intérieur du groupe. On utilise à cet effet la syntaxe des double-accolades {{xxx}}. Cette méthode permet de créer des symboles pré-animés.

Par exemple, pour une variable :

{{ligne}}MOTEUR{{reference}}_MARCHE : la ligne et la référence seront remplacées par leur valeur dans le groupe d'objet

note

Le nombre de références indirectes n'est pas limité.

Pour affecter la valeur des références indirectes au groupe d'objets, il faut lui associer une animation de type parameters. Dans le même exemple, les paramètres d'animation du groupe seront :

{
    "type":"parameters",
   "params": {
    "ligne": "L1",
    "ref":"M544"
    }
}

En dupliquant le groupe (le symbole), on peut ensuite modifier dans la description de ses propriétés ses références indirectes :

{
    "type":"parameters",
   "params": {
    "ligne": "L1",
    "ref":"M548"
    }
}

{
    "type":"parameters",
   "params": {
    "ligne": "L3",
    "ref":"M008"
    }
}

les synoptiques dans l'application flybox¶

Le composant Polymer fb-svgsynop permet d'insérer dans une vue un synoptique animé SVG. La seule propriété à renseigner est le chemin d'accès au fichier SVG. Par exemple :

  <fb-svgsynop svgfile="images/ligne3.svg"></fb-svgsynop>

Tests et mise au point¶

Après chaque modification du dessin ou du paramétrage des animations dans Inkscape :

Enregistrer le fichier dans Inkscape
Rafraichir la supervision dans le navigateur