Customisation équipement dans liste

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

  • Formation

Le binding est l’étape qui relie la vue 3D (objets graphiques de la carte) au DOM des équipements (entités métiers supervisées). Concrètement, on crée des liens stables entre un objet visuel et un équipement Immersive, pour que toute action ou donnée (état, variable, alarme) impacte la bonne représentation visuelle — et réciproquement (sélection, focus, fiches d’équipement).

Dans cet article

    Afficher plus
    Réduire

    Présentation du Widget2D

    Le Widget2D correspond à la représentation d’un équipement dans l’interface utilisateur. Les Widget2D sont affichés dans la liste des équipements situés à gauche du Beholder.

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

    Widget2D les différentes parties

    Le Widget2D est composé de 3 parties distinctes :

    • Son titre : qui par défaut représente le nom de l’équipement
    • Son sous-titre : qui par défaut représente la famille de l’équipement.
    • La partie information : Sous la forme d’un texte ou d’une icône, elle donne une information rapide sur l’état de l’équipement. Par défaut elle n’est pas remplie. Elle peut être utilisée par exemple pour représenter la valeur de température d’un capteur de température ou pour une porte l’affichage d’une icône de porte fermée ou ouverte.

    Customisation du contenu d’un Widget2D 

    Au travers du scripts JS, nous pouvons modifier les informations qui sont visibles dans le Widget2D, pour cela il suffit d’ajouter la fonction Customize.

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

    Lorsque cette fonction est présente dans un script, elle sera appelée chacun des équipements impactés par 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’équipement qui sera customisé
    • widget2D : L’objet d’UI permettant de modifier la représentation de l’équipement dans toutes les listes 2D.
    • widget3D : L’objet d’UI permettant de modifier la représentation de l’équipement dans la 3D. (cette fonctionnalité sera présentée dans le tutoriel suivant)

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

    • widget2D.title
      • Le titre en gras en haut du widget
      • Format : chaîne de caractères
      • Valeur par défaut : Le nom de l’équipement
    • widget2D.subtitle
      • Le texte en dessous du titre.
      • Format : chaîne de caractères
      • Valeur par défaut : Le nom de la famille de l’équipement.
    • widget2D.text
      • Un texte d’information en haut à droite du widget
      • Format : chaîne de caractères
      • Valeur par défaut : aucune.
    • widget2D.textColor
      • La couleur du texte widget2D.text
      • Format : color
    • widget2D.icon
      • Une icône en haut à droite du widget 2D. Si widget2D.text est déjà définis, l’icône est cachée.
      • Format : image
      • Valeur par défaut : vide si widget2D.text est déjà défini, sinon prend l'icone de la famille d'équipement par defaut.
    • widget2D.iconColor
      • La couleur à appliquer à widget2D.icon
      • Format : color
    • widget2D.iconBackgroundColor
      • La couleur de fond de la bulle.
      • Format : color
      • Valeur par défaut : transparent.

    Exemple Widget2D  Affichage d’un texte pour voir la température d’un capteur

    TODO

    Exemple Widget2D  Affichage d’une icône pour représenter l’état d’une porte

    TODO

    Développeur