SpiderControl: Das HTML5 HMI

Die Marke SpiderControl ist Jahren für hoch-performante Web HMI’s bekannt, die nicht nur auf PCs und grossen Steuerungen, sondern auch auf kleinsten embedded Geräten läuft. Diese können nicht nur mit dem für alle Plattformen verfügbaren MicroBrowser angezeigt werden sondern waren schon immer in jedem Standard Browser über das JAVA Applet lauffähig.

 Seit 2012 arbeitet der SpiderControl Editor nun schon vollständig mit SVGs (Scalable Vector Graphics) und seit 2013 generiert er an Stelle des JAVA Applets auch vollwertige HTML5 HMIs. Diese können dann sowohl von einem MicroBrowser als auch von jedem aktuellen Webbrowser, vom Smartphone bis zum PC, angezeigt werden.

Diese Skalierbarkeit der Clients, vom Mikroprozessor basierendem Device über Smartphones, Tablets und PCs bis zu Cloud Lösungen, bietet kein anderes Tool am Markt.

Welche Vorteile bietet HTML5?

Da HTML5 von allen aktuellen Webbrowsern unterstützt wird, können diese HMI’s von allen Geräten angezeigt werden, ohne dass sie sich mit der immer mangelhafteren Unterstützung von JAVA Applets und den mit diesen verbundenen Problemen mit Sicherheitszertifikaten herumschlagen müssen.

Einfach Smartphone zücken, Browser öffnen, URL eingeben und schon haben sie das HMI auf ihrem Gerät!

Natürlich können sie auch weiterhin einen MicroBrowser oder eine MicroBrowser App installieren und von den Vorteilen dieser Lösung profitier

SpiderControl HMI in HTML5 page

SpiderControl HTML5 HMI

Funktionsweise

Der HTML5 Output im Wesentlichen eine SVG Datei für jede View und ein hmi_min.js welches statischen JavaScript Code enthält. Innerhalb der SVG Datei gibt es eine JS Code Sektion in der die dynamischen Repaints und Actions sind. Um Speicherplatz zu sparen, werden die SVG’s als komprimierte SVGZ Dateien emittiert.

Beim hmi-min.js handelt es sich um eine JS Bibliothek welche das SpiderControl HTML5 API zur Verfügung stellt und den SVGz die Funktionen anbietet, die sie benötigen um zum Beispiel Aktionen auszuführen.

Die HTML Seite enthält dabei, neben einem kleinen Style Sheet und den benötigten JavaScript Aufrufen, nur einen Container (<div>-Element), in welchen per JavaScript ein <iframe> impliziert wird, welches das SVG der aktuellen HMI Seite enthält.

Die Datei “jquery.js“ wird für die Kommunikation mit dem Server verwendet (http://jquery.com/) und die Datei “ProjektName_itq.js“ entspricht der binären “*.itq“ Datei zur Initialisierung der Container Variable.

HTML: