Equipaggiamento di personalizzazione in elenco

  • Tutorial

Le informazioni delineate in blu possono essere modificate usando Javascript.

Training

Il Rilegatura è il passaggio che collega il Vista 3D (oggetti grafici sulla mappa) al DOM delle attrezzature (entità aziendali supervisionate). In termini concreti, creiamo legami stabili tra un oggetto visivo e un dispositivo immersivo, così che qualsiasi azione o dato (stato, variabile, allarme) influenzi la buona rappresentazione visiva — e viceversa (selezione, focus, schede dell'equipaggiamento).

Panoramica di Widget2D

Il Widget2D è la rappresentazione di un dispositivo nell'interfaccia utente. I Widget2D sono mostrati nell'elenco delle attrezzature situato a sinistra del Beholder.

Widget2D: le diverse parti

Il Widget2D è composto da 3 parti distinte:

  • Il titolo: che di default rappresenta il nome dell'attrezzatura
  • Il suo sottotitolo: che di default rappresenta la famiglia dell'apparecchiatura.
  • La parte informativa: Sotto forma di testo oppure Con un'icona, fornisce informazioni rapide sullo stato dell'equipaggiamento. Di default, non è popolato. Può essere usata, ad esempio, per rappresentare il valore di temperatura di un sensore di temperatura o per una porta che mostra un'icona di porta chiusa o aperta.

Personalizzazione del contenuto di un Widget2D

Attraverso gli script JS possiamo modificare le informazioni visibili nel Widget2D, per questo basta aggiungere la funzione Customize.

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

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

La funzione Personalizza espone 3 parametri:

  • Attrezzatura: L'attrezzatura che sarà personalizzata
  • widget2D: L'oggetto UI per cambiare la rappresentazione dell'equipaggiamento in tutte le liste 2D.
  • widget3D: L'oggetto UI modifica la rappresentazione dell'equipaggiamento in 3D. (questa funzione sarà presentata nel prossimo tutorial)

Descrizione dell'oggetto Widget2D (campi modificabili):

  • widget2D.title
    • Il titolo in grassetto in cima al widget
    • Formato: Stringa
    • Predefinito: Il nome dell'attrezzatura
  • widget2D.subtitle
    • Il testo sotto il titolo.
    • Formato: Stringa
    • Predefinito: Il nome della famiglia di equipaggiamenti.
  • widget2D.text
    • Testo informativo in alto a destra del widget
    • Formato: Stringa
    • Predefinito: Nessuno.
  • widget2D.textColor
    • Il colore del testo widget2D.text
    • Formato: Colore
  • widget2D.icon
    • Un'icona in alto a destra del widget 2D. Se widget2D.text è già impostato, l'icona è nascosta.
    • Formato: Immagine
    • Predefinito: empty se widget2D.text è già definito, altrimenti prende l'icona predefinita della famiglia di equipaggiamento.
  • widget2D.iconColor
    • Il colore da applicare a widget2D.icon
    • Formato: Colore
  • widget2D.iconBackgroundColor
    • Il colore di sfondo della bolla.
    • Formato: Colore
    • Predefinito: trasparente.

Esempio Widget2D che mostra testo per vedere la temperatura di un sensore

TUTTO

Esempio Widget2D Visualizzare un'icona per rappresentare lo stato di una porta

TODO 2

Sviluppatori