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!
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:
Dieser Teild er HMI enthält eine Auswahl von Eingabe-Widgets.
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.
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.
WebIQs Eingabe-Widgets werden verwendet, um spezifische Werte in der HMI eintrzutragen. Dies ist auf verschiedene Arten möglich:
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.
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!
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.
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!
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:
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.
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.
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.
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:
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ß!