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.

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

Dans cet exemple nous allons afficher la valeur de la température d’un capteur directement dans sa bulle d’équipement.

Affichage de la température d’un capteur dans la bulle Widget3D.

Prérequis :

Famille :
- Capteur de température
Script :
- Thermomètre
  - Règle d’import : Capteur de température
  - Méthodes implémentées
  - Customize
Instance d’équipment :
- Capteur température 1
  - Famille : Capteur de température
  - Variables
    - TEMP : 13.032

Script d'exemple :

function Customize(equipment, widget2d, widget3d)
{
  // Récupération de la variable TEMP de l'équipement
  // Astuce : Une variable peut être récupérée via son nom (Température) ou sa référence (TEMP)
  let temperatureVar = equipment.GetVariable("TEMP"); 

  // Modification du texte par la valeur de la température (1 décimale) ajout et de l’unité
  widget3d.text = temperatureVar.AsFloat.toFixed(1) + "°C"; 
}

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

Dans cet exemple nous allons modifier l’icône affichée dans la bulle 3D en fonction de son état d’ouverture, et rajouter la même icône dans le Widget2D.

Affichage d’une icône de porte ouverte ou fermée dans la bulle 3D.

Prérequis :

Famille :
- GarageDoor
Script :
- GarageDoor
  - Règle d’import : GarageDoor
  - Méthodes implémentées
  - Customize
Instance d’équipment :
- Garage G1
  - Famille : GarageDoor
  - Variables
    - DOOR : true / false

Script JS :

function Customize(equipment, widget2D, widget3D)
{  
  // Récupération de la variable qui porte l'état de la porte.
  var doorVar = equipment.GetVariable("DOOR");

  // L'état de la porte étant une string pouvant avoir 2 valeurs Open/Close, on calcule si la porte est ouverte en vérifiant la valeur.
  var isOpened = doorVar.AsString == "Open";

  var iconReference = isOpened ? "Icon Door_Opened" 
                               : "Icon Door_Closed";

  // On applique l'icône à la 2D et 3D
  widget2D.icon = widget3D.icon = iconReference;
}

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.

Bouton QuickAction dans un Widget3D ouvrant une page web.

Prérequis :

Famille :
- Porte
Script :
- EtatPorte
  - Règle d’import : Porte
  - Méthodes implémentées
  - Customize
Instance d’équipment :
- Camera local 1
  - Famille : Camera
  - Variables
    - flux : url de la page à ouvrir

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 :

// Ajout d'un bouton avec le label "Voir le flux" dans le menu des actions rapides
function Customize(equipment, w2d, w3d) 
{
    w3d.quickAction = "Voir le flux";
}

// Implémentation de l'action rapide "Voir le flux" : affichage d'une page web
function ExecuteQuickAction(equipment) 
{
    let flux = equipment.GetVariable(“flux”);
    WebView.Show(flux.AsString, false);
}

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.

Affichage du taux de remplissage d’une poubelle via le remplissage de l’icône Widget3D.

Prérequis :

Famille :
- Poubelle publique
Script :
- Poubelle
  - Règle d’import : Poubelle publique
  - Méthodes implémentées
  - Customize
Instances d’équipment :
- Poubelle 1
  - Famille : Poubelle publique
  - Variables
    - Remplissage : 25 (correspond à 25% de remplissage)
- Poubelle 2
  - Famille : Poubelle publique
  - Variables
    - Remplissage : 35 (correspond à 35% de remplissage)
- Poubelle 3
  - Famille : Poubelle publique
  - Variables
    - Remplissage : 65 (correspond à 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 est affectée de façon verticale.

Script :

// Remplissage de l'icône et changement de sa couleur en fonction de la valeur du capteur
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";
}

GraphicStream

Immersive

Développeur

Centre d'apprentissage
Launcher
Immersive Script
Immersive Forge
SDK Immersive