HMIEdge

HMIEdge ist eine Anwendung, die wir für einen unserer Großkunden für den Einsatz von browserbasierten HMI-Systemen in der Automatisierungstechnik entwickelt haben.

Die Annahme, dass man zur Visualisierung, Wartung und Steuerung einer Station nur eine Webseite benötigt, ist meist nicht ganz zutreffend. Heutzutage besitzt nicht jede Anwendung ein Web-Frontend und es besteht auch kein Bedarf, zu einer anderen Website zu wechseln, da dies den User aus der HMI herausnehmen würde. Wenn man dann ein neues Fenster öffnet, verliert man schnell den Vollbildmodus und der Benutzer hat vollständigen Zugriff auf den Desktop. Möglicherweise müssen auch Informationen, die den Rechner betreffen, auf dem die Website gerade angezeigt wird, abgerufen werden. All dies ist schwierig darzustellen, da die Webanwendung in der Sandbox des Browsers läuft.

Genau hier setzt HMIEdge an. Diese Anwendung kann überall dort eingesetzt werden, wo aufgrund der Webtechnologie Abstriche gemacht werden müssen.

Fensterverwaltung

HMIEdge ermöglicht es, eine Reihe von Fenstern vorab zu konfigurieren, die dann von der HMI angesprochen werden können. Dies gibt Ihnen die Kontrolle darüber, wie diese Fenster angezeigt werden und welche Funktionen sie haben.

So ist es auch möglich, ein Fenster, das nicht nur ein Browser-Fenster, sondern auch ein Applikationsfenster sein kann, zu öffnen und anzuheften, ohne den Vollbildmodus zu verlassen. Darüber hinaus können eine Reihe interner HTML-Seiten erstellt werden, die von HMIEdge gesteuert werden können. Das folgende Beispiel zeigt HMIEdge im Vollbildmodus mit drei geöffneten Fenstern.

Das Fenster, das sich oben befindet, ist eine interne HTML-Seite, die als Header fungiert. Diese Seite kann individuell angepasst werden und dient dazu, die anderen Seiten zu steuern.

Das Fenster links ist eine HMI-Seite, die auch als Startseite konfiguriert ist. Es ist so eingestellt, dass sie vom Benutzer nicht geschlossen werden kann.

Das Fenster rechts ist eine Windows-Anwendung, die gestartet und in HMIEdge eingebettet wird.

All das sorgt dafür, dass der Endbenutzer nie Zugriff auf das Desktopsystem bekommt und eigentlich auch das HMI-System nie verlassen muss. Es gibt die folgenden Möglichkeiten, wo die Fenster positioniert werden können. Bei Verwendung von Dock.Fill werden alle Fenster, die diese Einstellung besitzen, in der "Overview"-Ansicht nebeneinander angezeigt. Ist die "Overview" deaktiviert, werden einzelne Tabs für die Umschaltung verwendet.

Die Steuerung der Fenster kann über die window.open Methode von JavaScript erfolgen, wobei als Target dann der konfigurierte Name mitübergeben wird. Eine weitere Möglichkeit bieten auch die HMIEdge-internen Schnittstellen, die in der Sektion "Schnittstellen" näher beschrieben werden.

parent.window.open('https://server/WebRH','WINCC');

Schnittstellen

HMIEdge bietet eine Reihe von Schnittstellen an, damit man von JavaScript aus mit HMIEdge oder sogar dem Hostsystem kommunizieren kann.

Web-Messages

Die Kommunikation über Web-Messages erfolgt über bidirektionale Post-Aufrufe. Das bedeutet, dass man keinen Rückgabewert erhält. Etwaige Ergebnisse werden von HMIEdge zurückgeschickt und können in JavaScript mit dem Eventlistener aufgefangen werden.

// send a request to HMIEdge
window.chrome.webview.postMessage({ command: msg, commandParameter: parameter });

// receive a response from HMIEdge
window.chrome.webview.addEventListener('message', arg => {
    if (arg.data.command == "MYCommand" && arg.data.commandResult) {
        // handle the command
    }
}

Bridges

Eine weitere Möglichkeit der Kommunikation zwischen JavaScript und HMIEdge sind die sogenannten Bridges. Jede Bridge muss für ihre Verwendung auf der Seite freigegeben werden, dies dient der Sicherheit, somit ist es möglich den Zugriff nur für bekannte Seiten zu erlauben.

Aktuell werden folgende Bridges unterstützt:

• HMIEdgeBridge: Hiermit kann HMIEdge gesteuert werden.
• HostEnvironmentBridge: Bietet Zugriff auf die Hostumgebung zum Auslesen von Daten wie User, MachineName, Environment Variable, usw.
• ProcessBridge: Ermöglicht es Prozesse zu starten, abzufragen oder zu beenden.
• FileSystemBridge: Ermöglich den Zugriff auf das Dateisystem.
• DnsBridge: Ermöglich das Abfragen des DNS.

Virtuelle Verzeichnisse

Um auch die Möglichkeit zu schaffen auf lokale Ordner zugreifen zu können ist es möglich für jedes Fenster eine Reihe von VirtualHostNameToFolderMapping zu deklarieren.

"VirtualHostNameToFolderMapping": [
    "pictures.folder": "C:\\Temp\\pictures"
]

Dies kann dann beispielsweise dazu eingesetzt werden lokale Bilder in einer Website anzuzeigen.

<img src="http://pictures.folder/image1.png" />

Anpassbarkeit

HMIEdge ist vollständig anpassbar und ermöglicht es Ihnen, es an Ihre Bedürfnisse anzupassen.

HTML Seiten

HMIEdge wird mit einem Standardsatz von Steuerelementseiten installiert, auf die über die Adresse https://hmi.edge/ zugegriffen werden kann. Diese Kontrollseiten befinden sich im Anwendungsordner im Unterordner assets. Dieser Ordner enthält einige Quellen wie:

• Home.html: Default Homepage. (https://hmi.edge/Home.html)
• HeaderPage.html: Enthält Tab-Schaltflächen, die eine Schaltfläche für jede geöffnete Inhaltsseite anzeigen. (https://hmi.edge/HeaderPage.html)
• ControlsPage.html: Enthält eine Reihe von Steuerelementen zur Steuerung von HMI Edge. (https://hmi.edge/ControlsPage.html)

Dies ist jedoch nur ein Ausgangspunkt und kann auf Ihre Bedürfnisse erweitert werden. Wenn Sie möchten, kopieren Sie den Assets-Ordner an einen anderen Speicherort und ändern Sie die Konfiguration von HmiEdgeAssetsLocation an den neuen Zielspeicherort.

Sie können nun die Dateien am neuen Speicherort an Ihre Bedürfnisse anpassen. Dadurch haben Sie die volle Kontrolle über das Erscheinungsbild der erweiterten HMIEdge-Benutzeroberfläche.