Grafiken einbinden

Innerhalb einer benutzerspezifischen Login-Seite können auch Grafiken verwendet werden, wie zum Beispiel ein Firmenlogo. Dabei wird die Verwendung von Inline-Grafiken im Base64-Format in der HTML-Datei empfohlen. Die Verwendung von Grafikressourcen außerhalb der HMTL-Datei ist auch möglich, erfordert aber eine zusätzliche Konfiguration im Server.

Inline-Grafiken

Innerhalb einer HTML-Datei können Grafiken als Base64-String eingebunden werden. Der Base64-String kann direkt im HTML-Code oder im CSS-Code verwendet werden. Bei der benutzerspezifischen Login-Seite hat das den Vorteil, dass keine Benutzerrechte für die „__SystemGuests“-Gruppe im Server konfiguriert werden muss.

Ein HTML-Image-Tag mit einem Base64-String als Quelle wird wie folgt aufgebaut:

<img src=”data:[mime type];[charset],[base64]”>

Der „MIME-Type“ gibt das ursprüngliche Dateiformat an, das „Charset“ die Zeichenkodierung und „base64“ die Datenkodierung. Als Beispiel für eine SVG-Grafik:

<img src="data:image/svg+xml;base64,PD94bWwg…[rest of base64]"/>

Die Grafiken können über einen Base64 Image Encoder in einen Base64-String encodiert werden. Das Encodieren kann z. B. mit einem Online-Tool durchgeführt werden.

Ein Favicon kann auch als Inline-Grafik in die HTML-Seite integriert werden.

Externe Ressourcen

Das Einbinden von externen Grafiken in die benutzerspezifische Login-Seite ist möglich, wenn sich diese innerhalb des HMI-Projektes befinden. Zunächst muss die Grafik zu dem Projekt hinzugefügt werden. Anschließend kann die Grafik innerhalb der HTML-Datei referenziert werden, zum Beispiel innerhalb eines HTML-Image-Tags:

<img src="manual_pressed.svg" />

Da zum Zeitpunkt des Ladens der Login-Seite noch kein Benutzer im HMI-Server eingeloggt ist, gelten die Rechte der Gruppe „__SystemGuests“ zu diesem Zeitpunkt. Daher muss dieser Gruppe explizit Zugriff auf die Grafiken gewährt werden, die innerhalb der Login-Seite verwendet werden sollen. Öffnen Sie dazu die Konfigurations-Seite vom HMI-Server in der Kategorie „General“.

Öffnen Sie die Konfiguration der Rechte der „_SystemGuests“-Gruppe unter „Usergroups“.

Klicken Sie unter „Files“ auf „Add“.

Fügen Sie die Grafik mit Read/Write-Rechten hinzu.

Anschließend können Sie die Grafik auf der Login-Seite verwenden.