Modul- / 3D-Widget-Anpassung

  • Tutorial

Training

Das Widget3D ist eine virtuelle Darstellung eines Geräts auf einer Karte in Form einer schwebenden Blase, die durch eine Auswahlkassette mit weiteren Informationen ersetzt wird.

Widget3D in Aktion

Die in Blau umrissenen Informationen können mit Javascript modifiziert werden.

Widget3D-Illustration

Das Widget3D besteht aus 4 verschiedenen Teilen:

  • Die Informationsblase: In Form von Text oder Symbol liefert sie schnelle Informationen über den Status der Ausrüstung. Standardmäßig stellt sie das Symbol der Gerätefamilie dar, und die Farbe der Blase hängt vom Zustand der Ausrüstung ab
    • Verbunden: White Bubble
    • Standard: Rote Blase
    • Getrennt: Graue Blase
    • Workflow-Status (Farbe, die mit dem Workflow verknüpft ist)
  • Die sichtbare Kassette, wenn die Ausrüstung ausgewählt wird:
    • Sein Titel: der standardmäßig den Namen der Ausrüstung darstellt
    • Sein Untertitel: der standardmäßig die Familie der Ausrüstung oder ihren Geschäftsstatus angibt (Defekt im Gang, im Bau usw. ...)
    • Die QuickAction-Schaltfläche: Ermöglicht es dir, eine schnelle Aktion an der Ausrüstung auszuführen. Standardmäßig ist es nicht sichtbar.

Anpassung des Inhalts eines 3D-Widgets:

Über die JS-Skripte können wir die im 3D-Widget sichtbaren Informationen verändern; dafür müssen wir nur die Funktion hinzufügen Customize, oder um dieselbe Anpassen-Funktion zu verwenden und abzuschließen, die zuvor zur Anpassung des Widget2D verwendet wurde; tatsächlich erfolgt die Anpassung gleichzeitig.

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

Wenn diese Funktion in einem Skript vorhanden ist, wird sie jedes der mit diesem Skript verbundenen Geräte aufgerufen, jedes Mal, wenn das Gerät modifiziert wird oder ein UI-Element in der Schnittstelle erscheint.

Die Funktion "Anpassen" stellt drei Parameter frei:

  • Ausrüstung: Die Ausrüstung, die individuell angepasst wird
  • widget2D: Das UI-Objekt zur Änderung der Darstellung des Geräts in allen 2D-Listings.
  • widget3D: Das UI-Objekt zur Änderung der Darstellung der Ausrüstung im 3D.

Beschreibung des Widget3D-Objekts (bearbeitbare Felder):

  • widget3D.title
    • Der Titel ist fett gedruckt oben im Titelblock
    • Format: String
    • Standard: Der Name der Ausrüstung
  • widget3D.untertitel
    • Der Text unter dem Titel.
    • Standard: Der Name der Gerätefamilie.
    • Format: String
  • widget3D.text
    • Informationstext, der im Ballon und im Titelblock angezeigt wird.
    • Standard: leer
    • Format: String
  • widget3D.textColor
    • Die Farbe von widget3D.text
    • Format: Farbe
  • widget3D.icon
    • Das Symbol im Ballon, falls widget3D.text bereits gesetzt ist, wird das Symbol nicht angezeigt.
    • Standard: Das Ausrüstungsfamilien-Symbol
    • Format: Ikone
  • widget3D.iconColor
    • Die Farbe von widget3D.icon
    • Format: Farbe
  • widget3D.iconBackgroundColor
    • Die Hintergrundfarbe der Blase.
    • Standard: Transparent
    • Format: Farbe
  • widget3D.iconFillAmount
    • Die Füllmenge der Hintergrundfarbe. Jeder Wert zwischen 0 und 1, 0 = leer, 1 = gefüllt, 0,5 = halb gefüllt.
    • Standardwert: 1
    • Format: Single
  • widget3D.iconFillMethod
    • Die Methode, die Hintergrundfarbe auszufüllen.
    • Mögliche Werte
      • Vertikal: Die Farbfüllungen reichen von unten nach oben.
      • Horizontal: Die Farbe füllt sich von links nach rechts aus
      • Kreisförmig: Die Farbe füllt sich im Uhrzeigersinn.
    • Standard: Kreisförmig
    • Format: String
  • widget3D.quickAction
    • Verwaltet die Anzeige eines QuickAction-Buttons, der Wert entspricht dem Text des Buttons; wenn letzterer nicht ausgefüllt ist, wird der Button ausgeblendet. Weitere Informationen zur Nutzung des QuickAction-Buttons finden Sie im entsprechenden Tutorial.
    • Standard: leer
    • Format: String
  • widget3D.quickActionIcon
    • Das Symbol wurde im QuickAction-Button angezeigt. Das Symbol ist versteckt, wenn der Wert nicht befüllt ist.
    • Standard: leer
    • Format: Ikone

Widget3D-Beispiel: Text im Ballon anzeigen, um die Temperatur eines Sensors zu sehen

In diesem Beispiel zeigen wir den Temperaturwert eines Sensors direkt in seiner Geräteblase an.

Anzeige der Temperatur eines Sensors in der Widget3D-Blase.

Voraussetzungen:

  • Familie:
    • Temperatursensor
  • Drehbuch:
    • Thermometer
      • Importregel: Capteur de température
      • Implementierte Methoden
      • Customize
  • Ausrüstungsinstanz:
    • Temperatursensor 1
      • Familie: Temperatursensor
      • Variablen
        • TEMP : 13.032

Beispielskript:

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

Widget3D-Beispiel: Ein Symbol anzeigen, das den Status einer Tür darstellt

In diesem Beispiel verändern wir das Symbol, das in der 3D-Blase angezeigt wird, entsprechend seinem Eröffnungszustand, und das gleiche Symbol im Widget2D hinzufügen.

Anzeige eines offenen oder geschlossenen Türsymbols in der 3D-Blase.

Voraussetzungen:

  • Familie:
    • GarageDoor
  • Drehbuch:
    • GarageDoor
      • Importregel: GarageDoor
      • Implementierte Methoden
      • Customize
  • Ausrüstungsinstanz:
    • Garage G1
      • Familie: GarageDoor
      • Variablen
        • DOOR : wahr / falsch

JS-Skript:

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

Widget3D-Beispiel: Anzeige der QuickAction-Schaltfläche zum Öffnen einer Webseite

In diesem Beispiel zeigen wir eine Schaltfläche an, mit der ein Kameragerät eine Webseite öffnen kann, um auf den Kamerafeed zuzugreifen.

QuickAction-Button in einem 3D-Widget öffnet eine Webseite.

Voraussetzungen:

  • Familie:
    • Tür
  • Drehbuch:
    • StateDoor
      • Importregel: Porte
      • Implementierte Methoden
      • Customize
  • Ausrüstungsinstanz:
    • Lokale Kamera 1
      • Familie: Kamera
      • Variablen
        • flux : URL der zu öffnenden Seite

Die Anzeige des Knopfes erfolgt über die Implementierung von Customize. Wenn der Nutzer auf den Button klickt, gilt die ExecuteQuickAction wird genannt. In unserem Beispiel ruft der Funktionsaufruf den Wert der Flux-Variable ab, die eine URL ist, und übergibt ihn als Parameter einer Funktion, um das Öffnen einer Webseite auszulösen.

Drehbuch:

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

Widget3D-Beispiel: Beispiel für die Darstellung eines Mülleimers (Symbolfüllung)

In diesem Beispiel haben wir drei öffentliche Behälter, die ihre Füllrate erhöhen. Wir möchten diese Rate direkt in der Blase jedes Behälters darstellen, indem wir den Hintergrund farbig ausfüllen.

Anzeige der Füllrate eines Mülleimers, indem man das Widget3D-Symbol füllt.

Voraussetzungen:

  • Familie:
    • Öffentliche Mülltonne
  • Drehbuch:
    • Mülleimer
      • Importregel: Poubelle publique
      • Implementierte Methoden
      • Customize
  • Geräte-Instanzen:
    • Mülleimer 1
      • Familie: Öffentlicher Mülleimer
      • Variablen
        • Remplissage : 25 (entspricht 25 % Belegung)
    • Mülleimer 2
      • Familie: Öffentlicher Mülleimer
      • Variablen
        • Remplissage : 35 (entspricht 35 % Füllung)
    • Mülleimer 3
      • Familie: Öffentlicher Mülleimer
      • Variablen
        • Remplissage : 65 (entspricht 65 % Füllung)

Die Blase wird durch die Implementierung der Customize. Die Farbe der Blase nimmt 3 Werte entsprechend unterschiedlichen Schwellenwerten an, und der Füllwert wird vertikal zugewiesen.

Drehbuch:

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

Entwickler

  • Lernzentrum
  • Launcher
  • Immersive Script
  • Immersive Forge
  • SDK Immersive