Customisation Cartouche / Widget 3D

  • Formation

Le Widget3D correspond à une représentation virtuelle d’un équipement dans une carte sous la forme d’une bulle flottante qui est remplacée par un cartouche de sélection avec plus d’information.

Dans cet article

    Afficher plus
    Réduire

    Les informations encadrées en bleue peuvent être modifiées au travers du Javascript.

    Widget3D illustration

    Le Widget3D est composé de 4 parties distinctes :

    • La bulle d'information : Sous forme de texte ou d'icone, elle donne une information rapide sur l'etat de l'equipement. Par defaut elle represente l'icone de la famille de l'equipement et la couleur de la bulle depend de l'etat de l'equipement
      • Connecte : Bulle blanche
      • En defaut : Bulle rouge
      • Deconnecte : Bulle grise
      • Etat de workflow (couleur associe au workflow)
    • Le cartouche visible lorsque l'equipement est selectionne :
      • Son titre : qui par defaut represente le nom de l'equipement
      • Son sous-titre : qui par defaut represente la famille de l'equipement ou son etat metier (Defaut en cours, En travaux etc ...)
      • Le bouton QuickAction : Permet d'executer une action rapide sur l'equipement. Par defaut il n'est pas visible.

    Customisation du contenu d’un Widget3D :

    Au travers du scripts JS, nous pouvons modifier les informations qui sont visibles dans le Widget3D, pour cela il suffit d’ajouter la fonction Customize, ou d’utiliser et compléter la même fonction Customize précédemment utilisée pour customiser le Widget2D, en effet la customisation est effectuée au même moment.

    
// Modifies the content of widget2D and widget 3D for a given equipment.
function Customize(equipment, widget2d, widget3d)
{
    Widget3D.text = ":)" ;
}

    Lorsque cette fonction est présente dans un script, elle sera appelée chacun des équipements associé à ce script à chaque fois que l’équipement est modifié ou qu’un élément d’UI apparait dans l’interface.

    La fonction Customize expose 3 paramètres :

    • equipment : L'equipement qui sera customise
    • widget2D : L'objet d'UI permettant de modifier la representation de l'equipement dans toutes les listes 2D.
    • widget3D : L'objet d'UI permettant de modifier la representation de l'equipement dans la 3D.

    Description de l’objet Widget3D (champs éditables) :

    • widget3D.title
      • Le titre en gras en haut du cartouche
      • Format: string
      • Valeur par defaut : Le nom de l'equipement
    • widget3D.subtitle
      • Le texte en dessous du titre.
      • Valeur par defaut : La nom de la famille de l'equipement.
      • Format: string
    • widget3D.text
      • Un texte d'information affiche dans la bulle et le cartouche.
      • Valeur par defaut : vide
      • Format : string
    • widget3D.textColor
      • La couleur de widget3D.text
      • Format : color
    • widget3D.icon
      • L'icone dans la bulle, si widget3D.text est deja definis, l'icone n'est pas affichee.
      • Valeur par defaut : L'icone de la famille de l'equipement
      • Format: icon
    • widget3D.iconColor
      • La couleur de widget3D.icon
      • Format : color
    • widget3D.iconBackgroundColor
      • La couleur de fond de la bulle.
      • Valeur par defaut : transparent
      • Format: color
    • widget3D.iconFillAmount
      • La quantite de remplissage de la couleur de fond. N'importe quelle valeur entre 0 et 1, 0 = vide, 1 = remplis, 0.5 = a moitie remplis.
      • Valeur par defaut: 1
      • Format: Single
    • widget3D.iconFillMethod
      • La methode de remplissage de la couleur de fond.
      • Valeurs possibles
        • vertical : La couleur se remplit de bas en haut.
        • horizontal : La couleur se remplit de gauche a droite
        • circular : La couleur se remplit dans le sens horaire.
      • Valeur par defaut : circular
      • Format : string
    • widget3D.quickAction
      • Gere l'affichage d'un bouton QuickAction, la valeur correspond le texte du bouton, si cette derniere n'est pas renseignee le bouton est cache. Pour plus d'information sur l'utilisation du bouton QuickAction, se referer au tutoriel correspondant.
      • Valeur par defaut : vide
      • Format : string
    • widget3D.quickActionIcon
      • L'icone affichee dans le bouton QuickAction. L'icone est cachee si la valeur n'est pas remplie.
      • Valeur par defaut : vide
      • Format : icon

    Exemple Widget3D : Affichage d’un texte dans la bulle pour voir la température d’un capteur

    TODO

    Exemple Widget3D : Affichage d’une icône pour représenter l’état d’une lampe

    TODO

    Exemple Widget3D : Affichage d’une icône pour l’état d’une porte

    Dans cet exemple nous allons modifier l’icône affichée dans la bulle de l’équipement en fonction de l’état d’ouverture/fermeture d’une porte.

    Prérequis :

    • Famille :
      • Porte
    • Script :
      • FluxCamera
        • Règle d’import : Camera
        • Méthodes implémentées
          • Customize
          • ExecuteQuickAction
    • Instance d'equipment :
      • Camera local 1
        • Famille : Camera
        • Variables
          • flux

    Exemple Widget3D : Affichage du bouton QuickAction pour ouvrir une page web

    Dans cet exemple nous allons afficher un bouton pour un équipement de type camera pour ouvrir une page web pour accéder au flux de la caméra.

    Prérequis :

    • Famille :
      • Porte
    • Script :
      • EtatPorte
        • Regle d'import : Porte
        • Methodes implementees
          • Customize
    • Instance d'equipment :
      • Camera local 1
        • Famille : Camera
        • Variables
          • flux

    L’affichage du bouton se fait via l’implémentation de la fonction Customize. Lorsque l’utilisateur clique sur le bouton, la fonction ExecuteQuickAction est appelée. Dans notre exemple l’appel à la fonction récupère la valeur de la variable Flux qui est une url et la passe en paramètre d’une fonction pour déclencher l’ouverture d’une page Web.

    Script Javascript FluxCamera : 

    
function Customize(equipment, w2d, w3d) 
{
    w3d.quickAction = "Voir le flux";
}
function ExecuteQuickAction(equipment) 
{
    let flux = equipment.GetVariable(“flux”);
    WebView.Show(flux.AsString, false);
}
    Widget3D illustration

    Exemple Widget3D : Exemple d’affichage d’une poubelle (remplissage icône)

    Dans cet exemple nous avons 3 poubelles publiques qui remontent leur taux de remplissage. Nous voulons représenter ce taux directement dans la bulle de chaque poubelle en remplissant le fond en couleur.

    Prérequis :

    • Famille :
      • Poubelle publique
    • Script :
      • Poubelle
        • Regle d'import : Poubelle publique
        • Methodes implementees
          • Customize
    • Instances d'equipment :
      • Poubelle 1
        • Famille : Poubelle publique
        • Variables
          • Remplissage : 25 (correspond a 265% de remplissage)
    • Poubelle 2
      • Famille : Poubelle publique
      • Variables
        • Remplissage : 35 (correspond a 35% de remplissage)
    • Poubelle 3
      • Famille : Poubelle publique
      • Variables
        • Remplissage : 65 (correspond a 65% de remplissage)

    Le remplissage de la bulle se fait via l’implémentation de la fonction Customize. La couleur de la bulle va prendre 3 valeurs en fonction de différents seuils de valeur, et la valeur de remplissage es 

    
function Customize(equipment, widget2D, widget3D)
{
    var fillVar = equipment.GetVariable("Remplissage");

    // Customize the color and its fill
    var color = "white";

    if (fillVar.AsFloat > 70)  color = "#FFFF7702";
    if (fillVar.AsFloat <= 70) color = "#FFFFB400";
    if (fillVar.AsFloat <= 50) color = "#FF95B804";

    widget3D.iconBackgroundColor = color;
    widget3D.iconFillAmount = fillVar.AsFloat/100; // Value is from 0 to 1
    widget3D.iconFillMethod = "Vertical";
}
    Widget3D illustration

    Développeur