Personalizzazione della cartuccia / widget 3D

  • Tutorial

Training

Il Widget3D è una rappresentazione virtuale di un pezzo di attrezzatura in una mappa sotto forma di una bolla fluttuante che viene sostituita da una cartuccia di selezione con maggiori informazioni.

Widget3D in azione

Le informazioni delineate in blu possono essere modificate usando Javascript.

Illustrazione Widget3D

Il Widget3D è composto da 4 parti distinte:

  • La bolla informativa: sotto forma di testo o icona, fornisce informazioni rapide sullo stato dell'attrezzatura. Di default, rappresenta l'icona della famiglia di apparecchiature e il colore della bolla dipende dalle condizioni dell'apparecchiatura
    • Connesso: Bolla Bianca
    • Predefinito: Bolla rossa
    • Disconnesso: Bolla grigia
    • Stato del flusso di lavoro (colore associato al flusso di lavoro)
  • La cartuccia visibile quando l'apparecchiatura è selezionata:
    • Il suo titolo: che di default rappresenta il nome dell'attrezzatura
    • Il suo sottotitolo: che di default rappresenta la famiglia delle attrezzature o il suo stato commerciale (Difetto in corso, In costruzione ecc ...)
    • Il pulsante Quickaction: Ti permette di eseguire un'azione rapida sull'equipaggiamento. Di default, non è visibile.

Personalizzazione del contenuto di un widget 3D:

Attraverso gli script JS possiamo modificare le informazioni visibili nel 3D Widget, per questo basta aggiungere la funzione Customize, oppure usare e completare la stessa funzione Personalizza precedentemente usata per personalizzare il Widget2D, infatti la personalizzazione avviene contemporaneamente.

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

Quando questa funzione è presente in uno script, verrà chiamata ciascuno dei dispositivi associati a quello script ogni volta che il dispositivo viene modificato o apparirà un elemento UI nell'interfaccia.

La funzione Personalizza espone 3 parametri:

  • Equipaggiamento: L'equipaggiamento che sarà personalizzato
  • widget2D: L'oggetto UI per cambiare la rappresentazione del dispositivo in tutte le inserzioni 2D.
  • widget3D: L'oggetto UI per modificare la rappresentazione dell'equipaggiamento nel 3D.

Descrizione dell'oggetto Widget3D (campi modificabili):

  • widget3D.title
    • Il titolo in grassetto in cima al blocco del titolo
    • Formato: Stringa
    • Predefinito: Il nome dell'attrezzatura
  • widget3D.subtitle
    • Il testo sotto il titolo.
    • Predefinito: Il nome della famiglia di equipaggiamenti.
    • Formato: Stringa
  • widget3D.text
    • Testo informativo mostrato nel palloncino e nel blocco titolo.
    • Predefinito: vuoto
    • Formato: Stringa
  • widget3D.textColor
    • Il colore di widget3D.text
    • Formato: Colore
  • widget3D.icon
    • L'icona nel palloncino, se widget3D.text è già impostato, l'icona non viene visualizzata.
    • Predefinito: l'icona della famiglia di equipaggiamenti
    • Formato: Icona
  • widget3D.iconColor
    • Il colore di widget3D.icon
    • Formato: Colore
  • widget3D.iconBackgroundColor
    • Il colore di sfondo della bolla.
    • Predefinito: trasparente
    • Formato: Colore
  • widget3D.iconFillAmount
    • La quantità di riempimento del colore di sfondo. Qualsiasi valore compreso tra 0 e 1, 0 = vuoto, 1 = riempito, 0,5 = mezzo riempito.
    • Valore predefinito: 1
    • Formato: Singolo
  • widget3D.iconFillMethod
    • Il metodo per riempire il colore di sfondo.
    • Valori possibili
      • Verticale: Il colore riempie dal basso verso l'alto.
      • Orizzontale: Il colore riempie da sinistra a destra
      • circolare: Il colore si riempie in senso orario.
    • Predefinito: circolare
    • Formato: Stringa
  • widget3D.quickAction
    • Gestisce la visualizzazione di un pulsante QuickAction, il cui valore corrisponde al testo del pulsante; se quest'ultimo non viene compilato, il pulsante viene nascosto. Per maggiori informazioni su come usare il pulsante QuickAction, consulta il tutorial corrispondente.
    • Predefinito: vuoto
    • Formato: Stringa
  • widget3D.quickActionIcon
    • L'icona mostrata nel pulsante Quickaction. L'icona è nascosta se il valore non è popolato.
    • Predefinito: vuoto
    • Formato: Icona

Esempio Widget3D: Visualizzare il testo nel pallone per vedere la temperatura di un sensore

In questo esempio, mostreremo il valore di temperatura di un sensore direttamente nella sua bolla di apparecchiature.

Visualizzazione della temperatura di un sensore nella bolla Widget3D.

Prerequisiti:

  • Famiglia:
    • Sensore di temperatura
  • Copione:
    • Termometro
      • Regola di importazione: Capteur de température
      • Metodi implementati
      • Customize
  • Esempio di equipaggiamento:
    • Sensore di temperatura 1
      • Famiglia: Sensore di temperatura
      • Variabili
        • TEMP : 13.032

Esempio di copione:

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";
}

Esempio di Widget3D: visualizzare un'icona per rappresentare lo stato di una porta

In questo esempio modificheremo l'icona mostrata nella bolla 3D in base al suo stato di apertura, e aggiungere la stessa icona nel Widget2D.

Visualizzazione di un'icona di porta aperta o chiusa nella bolla 3D.

Prerequisiti:

  • Famiglia:
    • GarageDoor
  • Copione:
    • GarageDoor
      • Regola di importazione: GarageDoor
      • Metodi implementati
      • Customize
  • Esempio di equipaggiamento:
    • Garage G1
      • Famiglia: GarageDoor
      • Variabili
        • DOOR : vero / falso

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;
}

Esempio di Widget3D: visualizzazione del pulsante QuickAction per aprire una pagina web

In questo esempio, mostreremo un pulsante per un dispositivo fotografico per aprire una pagina web e accedere al feed della telecamera.

Pulsante QuickAction in un Widget 3D che apre una pagina web.

Prerequisiti:

  • Famiglia:
    • Porta
  • Copione:
    • StateDoor
      • Regola di importazione: Porte
      • Metodi implementati
      • Customize
  • Esempio di equipaggiamento:
    • Telecamera locale 1
      • Famiglia: Camera
      • Variabili
        • flux : URL della pagina da aprire

La visualizzazione del pulsante avviene tramite l'implementazione del Customize. Quando l'utente preme il pulsante, il ExecuteQuickAction si chiama. Nel nostro esempio, la chiamata alla funzione recupera il valore della variabile Flux, che è un URL, e la passa come parametro di una funzione per attivare l'apertura di una pagina web.

Copione:

// 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);
}

Esempio Widget3D: Esempio di visualizzazione di un bidone della spazzatura (riempimento icone)

In questo esempio, abbiamo 3 bidoni pubblici che aumentano la loro velocità di riempimento (load rate rates). Vogliamo rappresentare questo tasso direttamente nella bolla di ogni contenitore riempiendo lo sfondo a colori.

Visualizza la velocità di riempimento di un bidone della spazzatura riempiendo l'icona Widget3D.

Prerequisiti:

  • Famiglia:
    • Bidone della spazzatura pubblico
  • Copione:
    • Cestino della spazzatura
      • Regola di importazione: Poubelle publique
      • Metodi implementati
      • Customize
  • Istanze di equipaggiamento:
    • Cestino 1
      • Famiglia: Bidone della spazzatura pubblico
      • Variabili
        • Remplissage : 25 (corrisponde al 25% di occupazione)
    • Cestino 2
      • Famiglia: Bidone della spazzatura pubblico
      • Variabili
        • Remplissage : 35 (corrisponde al 35% di riempire)
    • Bidone della spazzatura 3
      • Famiglia: Bidone della spazzatura pubblico
      • Variabili
        • Remplissage : 65 (corrisponde al 65% di impastazione)

La bolla viene riempita tramite l'implementazione del Customize. Il colore della bolla assumerà 3 valori secondo diverse soglie di valore, e il valore di riempimento viene assegnato verticalmente.

Copione:

// 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";
}

Sviluppatori