Blog - Web IQ Web HMI by Smart HMI

Lass uns ein paar Trends ansehen! - Web IQ Web HMI von Smart HMI

Geschrieben von sascha.kimmel | April 26, 2022

Du möchtest gerne einen Trend in Deiner HMI anzeigen, welcher die aktuellen Werte bestimmter Variablen aus der SPS animiert darstellt? Dann solltest Du Dir unsere WEBIQ BEST PRACTISE DEMO: Trend Demo ansehen – diese zeigt, wie man Werte in einem WebIQ Trend Widget anzeigen kann, welche aufgezeichnet werden. Einfach die Variablen auswählen, die Farben einstellen und dem Benutzer sogar erlauben, die Anzeige zur Laufzeit anzupassen! Alles möglich mit WebIQ.

Was enthält die WebIQ Trend Demo?

Die Demo enthält zwei verschiedene Trend Display Layouts: „Layout 1“ und „Layout 2“, in welchen die Trend Widgets auf unterschiedliche Art und Weise angeordnet werden und gezeigt wird, wie flexibel das Layout ist und wie man die Trend Widgets auf verschiedene Arten anordnen kann.

Wie haben wir dieses Trend Display mit WebIQ erstellt?

Eine Standard-Trend-Display-Ansicht besteht aus den folgenden vier WebIQ Trend Widgets:

  1. Trend Display: dies ist das Display, welches die Trendwerte als Kurven darstellt
  2. Trend Zoom: dieses Widget ermöglicht es, hinein- und hinauszuzoomen, ein Zeitintervall auszuwählen und den live-Modus zu starten und zu stoppen
  3. Trend Legend: zeigt die Namen und die aktuellen Werte der Trend Items an. Außerdem wird durch Klick auf ein Trend Item die entsprechende Kurve im Trend Display hervorgehoben
  4. Trend Select: ermöglicht die Auswahl von Trend Items zur Anzeige im Trend Display – außerdem kann die Kurvenfarbe konfiguriert werden und die Skal ein- und ausgeschaltet werden

Obwohl dies vielleicht etwas kompliziert aussieht ist es eigentlich relativ einfach, denn man muss lediglich die Widgets im WebIQ Designer konfigurieren – keine Programmierkenntnisse sind erforderlich!

Einen Trend aufzeichnen

Bevor ein Trend in einem Trend Display angezeigt werden kann müssen die Werte zuallererst einmal aufgezeichnet werden. Hier kommt der WebIQ Recorder zum Einsatz, den man über den Recorder Manager im WebIQ Designer konfigurieren kann. Einfach einen neuen Recorder erstellen – mit der unlimitierten Anzahl von Recordern und Trends gibt es hier wirklich keine Einschränkungen. Nach Auswahl der aufzuzeichnenden Items werden diese einfach zu einem neuen Trend hinzugefügt und die gewünschte Aggregation ausgewählt: soll die Aggregation der Daten innerhalb eines Intervalls den Durchschnitt aufzeichnen oder den letzten Wert? Und voilá: der neue Trend kann im Trend Display angezeigt werden!

Du musst nur sicherstellen, dass die Minimum- und Maximum-Limits für die im Trend anzuzeigenden items gesetzt wurden, denn sonst wird keine Kurve gezeichnet.

Ein Recorder speichert seine Daten in SQLite-Datenbank-Dateien im Projektverzeichnis. Du kannst hierbei konfigurieren, wie oft die Daten aufgezeichnet werden sollen und in welchem Abstand sie auf das Laufwerk geschrieben werden sollen – diese können auch unterschiedlich sein: es kann sinnvoll sein, die Daten jede Sekunde aufzuzeichnen, aber nur alle zehn Sekunden in der Datenbank zu speichern, um die Performance zu erhöhen (wobei dies im Normalfall keinerlei Problem darstellt). Mehr Informationen dazu kannst Du der WebIQ Designer Manual entnehmen.

Erstelle Deine eigene Trend-Ansicht

Nachdem Du den Trend wie zuvor beschrieben angelegt hast kannst Du jetzt einfach mittels Drag&Drop die entsprechenden Trend Widgets in die HMI ziehen. Dann verbinde sie über die Konfiguration miteinander, damit jedes Trend Widget weiß, zu welchem anderen Trend Widget es gehört – es können ja beliebig viele Trend Widgets in einer HMI verwendet werden. Du kannst auch Slide-Ins und Dialogboxen verwenden, um bestimmte Konfigurationsoptionen zu verstecken – so wie wir dies mit dem Trend Select Widget getan haben, welches nur angezeigt wird, wenn man auf das Zahnrad oben rechts klickt.

Mit einer unbegrenzten Anzahl von Trend Display in Deiner HMI kannst Du natürlich auch einfach verschiedene Instanzen an verschiedenen Stellen verwenden. So könntest Du zum Beispiel ein großes Trend-Display mit mehreren Kurven an einer Stelle verwenden und an anderer Stelle viele kleine Trend Display Instanzen, welche zum Beispiel nur einen einzigen Wert anzeigen, also z.B. dort, wo der Benutzer den Set-Wert des Items konfiguriert.

Im Layout #1 in der Demo-App haben wir das Trend Legend Widget unterhalb des Trend Displays angeordnet, während wir es in layout #2 auf der rechten Seite eingefügt haben.

Filtern, zoomen und mehr

Wenn Du das Uhr-Icon oben rechts anklickst öffnet sich ein Kalender, mit dem Du Zeit und Datum auswählen kannst, für die Du den Trend sehen möchtest. Wenn Du auf das Icon rechts daneben klickst kannst Du auswählen, welcher Zeitraum insgesamt in der Ansicht angezeigt wird, also zum Beispiel ein ganzer Tag oder nur eine Stunde.

Durch Klick auf das Zanhrad-Icon oben rechts wird das Trend Select Widget als Slide-In angezeigt. Dort kannst Du die im Trend Display anzuzeigenden Kurven auswählen – bis zu 10 gleichzeitig. Außerdem kannst Du dort das Styling – die Farbe – der Trendkurve ändern und die Skala ein- oder ausblenden.

Nachdem die Trend-Ansicht nunmehr fertig konfiguriert wurde kannst Du einfach über das X oben rechts im Slide-In dieses wieder schließen. Wenn Du eine große Anzahl von Trend-Items konfiguriert hast kannst Du auch einfach im Textfeld nach einem bestimmten Item suchen – ist das nicht ein tolles Feature?

Jetzt bist Du dran!

Warum lädst Du Dir die Trend Demo HMI App nicht einfach direkt herunter, importierst sie in den WebIQ Designer und probierst einfach ein paar Dinge darin aus, um die Trend-Widgets direkt kennenzulernen?

Und wenn Du WebIQ Designer noch nicht heruntergeladen hast warum meldest Du Dich jetzt nicht einfach unten an und probierst die kostenlose Test-Version von WebIQ jetzt aus?