WEB-APPs für die Industrie

WEB-APPs für die Industrie über HMI-Tool projektieren

PROCON-WEB kann als Tool für die Erstellung von WEB-APPs benutzt werden. Um diese näher aufzuzeigen soll hier zuerst auf die verschiedenen APP-Typen und den Zusammenhang zwischen Oberfläche einer APP und den fast immer notwendigen Server-Backend erläutert werden.

Welche Typen von APPs werden unterschieden?

  • Web-APP
    • Reine Webseite
    • Kann Geräteeigenschaften nur teilweise nutzen
    • Keine Installation
    • Plattformneutrale Erstellung (alle Geräte)

  • Hybrid-APP
    • Oberfläche in HTML plattformunabhängig geschrieben
    • Hülle ist plattformspezifisch und kann Geräteeigenschaften nutzen
    • Installation über Store des Ecosystems (Google, Apple, Microsoft)

  • Native-APP
    • Kann alle Geräteeigenschaften nutzen
    • Installation über Store des Ecosystems
    (Google, Apple, Microsoft)
    • Beste Performance

Seite1

Beliebte APPs mit Backend:

Dies sind Beispiel der heute beliebtesten APPs, die aufzeigen sollen, dass ein sehr großer Teil der APPs nur als Frontend für eine mehr oder weniger komplexe Datenhaltung bzw. Infrastruktur darstellt. So ist es auch bei den meisten industriellen APPs. Auf dem Smartphone soll der Zustand einer Maschine oder Anlage dargestellt werden, der im Wesentlichen über die Automatisierungstechnik und darüber liegenden SCADA-Funktionen zum Loggen und Auswerten von Daten generiert wird.

beliebte apps

  • Wetter      • Shazam      • Skype     • Bahnverbindungen    • Google Maps    • Facebook Messenger

die meisten apps-server

WEB-APPs mit Server als Backend:

Wie sieht bei PROCON-WEB die Systemstruktur aus?

APP:apps mit server als backend
• Oberfläche auf Basis HTMl5 und CSS3
• Javascript zur Dynamisierung/Interaktion

Kommunikation:
• HTTP bzw. HTTPS und Websockets für sehr schnelle Kommunikation (WS, WSS)
• Bindung: JSON

Server:
• Windows: C# und SQL-Server
• Plattformspezifische Lösungen mit C, Java, …

 

Industrie 4.0 – Maschine als WebService

maschine als webService• Maschine verfügt über aktuelle Informationen und Protokolle/Statistiken
• Maschine kann als WebService fungieren
• APPs können als Web-APPs über den Webserver der Maschine verfügbar gemacht werden
• Beliebige stationäre oder mobile Geräte können Web-APPs nutzen

 

Was muss eine HMI können, um als APP-Server zu arbeiten?

• Oberflächen in reinem HTML (ohne PlugIns)hmi app server
• Responsive Design zur Unterstützung aller Geräte
• Moderne Oberflächen mit Gestenunterstützung und stylebaren Controls
• Gute Datenverarbeitungsmöglichkeiten mit Datenaustausch zu MES/ERP-Systemen
• Sicherheitsmechanismen für Zugang und Datenübertragung

 

 

 

Typische Systemkonstellation

• Mit dem Projektierungswerkzeug werden typische systemkonstellationBenutzeroberflächen gestaltet und die Datenaufbereitung konfiguriert
• Die WebAPP und Konfiguration der Benutzeroberfläche werden dem Webserver des HMI-Systems zugeführt ( JS-, HTML-Files)
• Serverkomponenten als ‚Backend‘ bereiten die Daten auf
• Das Smartphone/Tablet mit dem Browser ruft die Website ab und stellt die interaktive Oberfläche dar

 

Wie funktioniert eine WEB-APP per HMI?

app per hmi• Das Konfigurationstool erzeugt die WebAPP in Form von HTML- und Javascript-Files
• Die App nutzt den WebService der HMI Serverkomponente per HTTP/Websockets und führt den Bildaufbau durch
• Die Serverkomponente beschafft aktuelle Infos per Kopplung zur SPS und holt Daten aus der Datenbank

 

 

 

Projektierung statt Programmierung

• Die ‚Erstellung‘ der ‚APP‘ funktioniert wie das projektierung statt programmierungProjektieren einer HMI
• Es werden keine Kenntnisse über HTML5 oder JavaScript benötigt
• Die Unterstützung für Responsive Design schließt beliebige Mobilgeräte ein
• Einfache Anpassung und Pflege durch den Automatisierungstechniker
• Lieferung direkt mit der Maschine, ohne Umweg über den APP-Store!

 

Eigenschaften der Anzeigelemente konfigurieren

eigenschaften anzeigeelemente• Die Eigenschaften von Anzeigeelementen werden konfiguriert
• Die Kopplung zum Prozess oder der Datenbank werden über Datenpunkte realisiert
• Die Darstellung kann mit einem beliebigen Style kombiniert werden und so dem Corporate Design entsprechen
• Die Oberfläche unterstützt Multitouch-Gesten

 

 

Beispiel einer Web-APP für eine Verpackungsmaschine

  • beispiel web app 1

  • beispiel web app 2

  • beispiel web app 3

  • • Anzeige des aktuellen Auftragsfortschrittes
    • Anzeige des Materials mit Laufzeit bis Rollenwechsel
    • Materialdaten mit QR-Code

  • • Anzeige der aktuellen KPIs zum laufenden Auftrag
    • Online-Berechnung der Faktoren in der HMI

  • • Darstellung Wartungsaufgaben nach Priorität/Fälligkeit

Beispiel einer moderen Oberfläche

beispiel einer modernen oberflaeche

Anwendungsbeispiel: Auswertung von Beacons per Web-APP

  • Gerätespezifische Informationsanzeige über BEACONs
    • Innerhalb einer Produktionsumgebung sind alle wichtigen Komponenten mit Beacons zur Identifizierung ausgestattet
    • Per Handy wir bei kurzer Entfernung zum Beacon dieser erkannt und ausgelesen
    • Anschließend kann komponentenspezifische Zusatzinformation wie Status, KPIs oder Wartungsinformationen ausgegeben werden

  • Umsetzung

    • Projektierte PROCON-WEB Anwendung mit CustomControl für die Auswertung des Beacons (per Bluetooth)
    • Kopplung per PROCON-WEB Server zu den verschiedenen Maschinen und Geräten zur Informationsgewinnung

maschine + beacon