Du möchtest einen Überblick über die meistgenutzten WebIQ Widgets erhalten und sehen, wie einfach es ist, sie zu verwenden? Das ist ja großartig, denn wir haben soeben ein neues Demo-HMI-Projekt veröffentlicht, welches diese verwendet!

Was enthält die Widget Demo?

Unsere Widget-Demo enthält eine große Auswahl von Eingabe- und Auswahl-Widgets, Buttons und Ausgabe-Widgets, welche Dir zeigen, wie einfach Du diese in Deiner HMI dank unseres in WebIQ Designer integrierten Drag&Drop-Builders verwenden kanns.

Wir haben diese Widgets in drei Bereiche unterteilt:

• Eingabe-Widgets
• Ausgabe-Widgets
• Button-Widgets

Auswahl- und Eingabe-Widgets

Dieser Teild er HMI enthält eine Auswahl von Eingabe-Widgets.

An/Aus Schalter

Als erstes haben wir die An/Aus-Schalter, welche – obwohl sie eigentlich technisch gesehen alle das gleiche machen – verschiedene Benutzerschnittstellen-Visualisierungen darstellen. Je nach Deinen HMI- und Design-Richtlinien kannst Du eine Checkbox, einen Toggle-Button oder einen Flip-Switch verwenden. In diesem Fall haben wir alle mit dem gleichen Item (Tag) verknüpft, so dass ganz gleich welchen Du betätigst alle gleichzeitig den Status ändern.

Auf der rechten Seite wird eine entsprechende einfache Maschinenausgabe visualisiert.

Auswahl-Widgets

Die Auswahl-Widgets sollten Dir von Websites im Internet bekannt vorkommen, denn sie entsprechen Standard-HTML-Elementen, welche von uns mit zusätzlicher Funktionalität ausgestattet wurden. Technisch machen sie quasi das gleiche wie die An/Aus-Schalter, allerdings kann man hier zwischen mehreren Optionen wählen.

Während das Select-Box-Widget sinnvoll für z.B. 30 verschiedene Optionen ist, benötigt man dennoch zwei Klicks, um einen Wert auszuwählen. Wenn Du zum Beispiel nur drei verschiedene Werte hast, so wäre das Select-Radio-Widget sicher besser geeignet, da man hier mit einem Klick direkt den Wert auswählen kann.

Es hängt immer von der Anzahl der Einträge sowie von den Design-Guidelines ab, denen Du folgen musst, um zu entscheiden, welches Du hier wählen solltest.

Analog zu den An/Aus-Schaltern vorher wird auch hier der Status auf der rechten Seite visualisiert.

Numerische Eingabe-Widgets

WebIQs Eingabe-Widgets werden verwendet, um spezifische Werte in der HMI eintrzutragen. Dies ist auf verschiedene Arten möglich:

• falls die Eingabe direkt in die entsprechenden Felder erfolgen soll, so ist das Input Field Widget das geeignete Widget, das hier im Beispiel auch gleich das Numpad für einfachere Benutzung aktiviert hat
• falls die Eingabe üblicherweise eher über relative Auf/Ab-Aktionen gesetzt wird, der Wert also inkrementiert oder dekrementiert wird, so kann dazu das Rocker Button Widget verwenden werden, da es die Eingabe hier verinfacht. Natürlich kann auch die Schrittweite konfiguriert werden. Und mit dem hier ebenfalls (optional) aktivierten Numpad ist auch die direkte Eingabe einfach möglich.
• falls zur Eingabe auch die Visualisierung der Minimum- und Maximum-Werte hilfreich ist, so empfiehlt sich das Slider-Widget, welches ermöglicht, den Wert direkt zu verändern, indem das Slider-handle bewegt wird. Dieses Widget wird häufig verwendet, wenn der absolute Wert nicht so bedeutend ist, sondern stattdessen die Eingabe eher relativ erfolgt.

Auf der rechten Seite siehst Du das entsprechende Radial Gauge Widget, welches seinen Wert nach jeder Änderung unmittelbar ändert.

Bitte beachte außerdem, dass man bei unseren Eingabe-Widgets generell keinen Wert eintragen kann, der zu klein oder zu groß ist – orientiert an den Min/Max-Werten des angebundenen Items.

Texteingabe

Manchmal muss ein Text in der HMI eingegeben werden, zum Beispiel wenn ein String-Item von der SPS angebunden wurde. Dazu ist das Input Field Widget geeignet – es muss nur ein String-Item angebunden werden.

Du hast bestimmt schon gemerkt, dass Du in den Eingabefeldern bei den Zahlenwerten oben keine Buchstaben eingeben konntest, das aber hier möglich ist. Das liegt daran, dass oben numerische Items und hier String-Items angebunden wurden. Deshalb erlaubte WebIQ oben keine Eingabe von Buchstaben, hier aber schon!

Zeit- und Datumseingaben

WebIQ enthält ebenfalls zwei Widgets, um Zeit bzw. Datum einzustellen. Wenn Du Datum und/oder Zeit auf der linken Seite änderst, ändert sich die Anzeige auf der rechten Seite ebenfalls sofort. Außerdem wirst Du feststellen, dass es – wie schon zuvor – unmöglich ist, ungültige Werte einzutragen. Wir finden das smart!

Dieses Widgets können zum Beispiel verwendet werden, um Datum/Zeit-Werte in der SPS zu setzen.

Ausgabe-Widgets

Was wäre eine HMI ohne Ausgabe-Widgets? Da wir bei WebIQ den Fokus auf gutes Design und die Benutzererfahrung legen bieten wir viele verschiedene Widgets an, um Werte darzustellen, und zwar sowohl in Textform als auch grafisch!

Zeit/Datumsausgaben

Wir kennen diese Widgets bereits von vorher, aber dieses Mal geht es uns um die Ausgabe. Wir haben zwei Zeit/Datum-Ausgabe-Widgets, die wir hier erklären möchten:

• das Date/Time-Widget erlaubt es Dir, Datumswerte (im UNIX-Timestamp-Format) auf flexible Weise darzustellen. Du kannst dazu einfach unsere Format-Strings verwenden, um Datum und Uhrzeit in jeder beliebigen Weise als Text darzustellen
• das Duration Display Widget erlaubt es, relative Datumswerte in einem für den Menschen optimierten Format anzuzeigen. Wenn Du zum Beispiel in Deiner Steuerung ein Item hast, welches Datum und Uhrzeit darstellt, wann ein bestimmter Prozess beendet ist, so kann Du dieses Item zusammen mit unserem Standard-„Systemzeit“-Item verwenden, um eine relative Zeit anzuzeigen. In solchen Fällen verbessert dies sicherlich die Effizienz!

Istwert-Anzeigen

Aktuelle Werte von Prozessvariablen anzuzeigen ist Pflichtprogramm für jede HMI, aber benutzerfreundliche Visualisierung ist optinal! WebIQ bietet verschiedene Widgets, um Werte zu visualisieren. In diesem Beispiel haben wir Linear und Radial Gauge Widgets, die nicht nur den absoluten Wert anzeigen, sondern diesen auch noch grafisch mit Minimum und Maximum visualisieren und sehr stark gestyled werden können – und dazu kommen sie noch in verschiedenen Layouts daher! Das Text Display Widget zeigt nur den absoluten Wert an – je nachdem welche Anforderungen im Einzelfall bestehen ist es essentiell, immer das richtige Widget auszuwählen, damit die Benutzererfahrung optimal ist!

Das Quality Display Widget zeigt die Abweichungen von einem Sollwert an. Verschiebe doch einfach mal den Temperatur-Slider und beobachte dabei das Quality Display. Du wirst die Abweichung sehen können bis unser Simulationsserver den Zielwert erreicht hat. Dieses Widget ist sehr gut geeignet, um die Qualität eines Prozesses zu visualisieren, also ob und wenn ja wie weit der Istwert vom Sollwert abweicht.

Image Changer – Der Bildwechsler

Neben dem einfachen Image Widget bietet WebIQ auch ein Image Changer Widget an, welches es Dir ermöglicht, verschiedene Bilder anzuzeigen je nach Wert einer angebundenen Prozessvariable (Item). Dazu kannst Du einfach verschiedene Bilder verwenden, die in einem einfachen Grafikprogramm in einem web-kompatiblen Format erstellt wurden (SVG, PNG, GIF, JPG) und Du kannst sie dann sofort verwenden!

Webb Du hier zum Beispiel den Pumpenstatus änderst, wirst Du direkt sehen, dass das Image Changer Icon direkt mit geändert wird.

Textausgabe

Das Text Widget erlaubt es, einfachen Text auszugeben, z.B. von einem item aus Deiner SPS. Außerdem könntest Du ebenso Werte von anderen Items in Deinen Text einbauen und sie im Text dynamisch anzeigen. Bitte sieh Dir die Dokumentation an für Details dazu.

Button-Widgets mit UI Actions

Technisch kann man Buttons zwar als Eingabe-Widgets sehen, sie können aber auch verwendet werden, um bestimmte Aktionen auszulösen, weshalb wir sie hier in eine separate Kategorie gebracht haben. Buttons sind vermutlich die vielseitigsten Widgets, die WebIQ enthält.

UI Actions sind vordefinierte JavaScript-Funktionen, die Du in Deiner HMI verwenden kannst – aber natürlich kannst Du auch Deine eigenen UI Actions im Code Manager des WebIQ Designer selbst erstellen! UI Actions erlauben es Dir, mit wenig Aufwand Aktionen in der HMI auszulösen:

• zu einem anderen Bereich in der HMI navigieren
• Dialoge, Slide-Ins und Popups öffnen und schließen
• Meldungen dem Benutzer anzeigen
• Setzen, inkrementieren, dekrementieren von Item-Werten, z.B. um Tag-Werte Deiner SPS zu ändern
• die aktuelle Lokalisierung der HMI für den angemeldeten Benutzer ändern (=Sprache umschalten)
• CSS-Klassen hinzufügen, entfernen oder austauschen – das geht natürlich auch mit CSS-Klassen, die Du selbst erstellt hast!

Jetzt bist Du dran!

Wir empfehlen Dir, das Projekt einfach herunterzuladen, es in Deinen WebIQ Designer zu importieren (hier herunterladen) und Dir dann anzusehen, wie wir das alles gemacht haben. Nimm Dir etwas Zeit dazu und verändere das Projekt gerne so, wie Du möchtest!

Jetzt wünschen wir Dir noch viel Spaß!