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. Il Widget2D è visualizzato nell'elenco dei dispositivi 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 di un'icona, fornisce informazioni rapide sullo stato dell'apparecchiatura. Per impostazione predefinita, non viene inserita. Può essere usata, ad esempio, per rappresentare il valore della 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