Include graphics

Graphics such as a company logo can also be used within a user-specific login page. The use of inline graphics in Base64 format in the HTML file is recommended. The use of graphic resources outside the HMTL file is also possible, but requires additional configuration in the server.

inline graphics

Within an HTML file, graphics can be integrated as Base64 strings. The Base64 string can be used directly in HTML code or CSS code. With the user-specific login page, this has the advantage that no user rights have to be configured for the "__SystemGuests" group in the server.

An HTML image tag with a Base64 string as source is structured as follows:

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

The "MIME-Type" specifies the original file format, the "Charset" the character encoding and "base64" the data encoding. As an example of an SVG graphic:

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

The graphics can be encoded into a Base64 string via a Base64 Image Encoder. Encoding can be performed using an online tool, for example.

A favicon can also be integrated into the HTML page as an inline graphic.

External resources

The integration of external graphics into the user-specific login page is possible if they are located within the HMI project. First the graphic must be added to the project. The graphic can then be referenced within the HTML file, for example within an HTML image tag:

<img src="manual_pressed.svg" />

Since no user is logged in to the HMI server at the time the login page is loaded, the rights of the "__SystemGuests" group apply at this point in time. Therefore, this group must be granted explicit access to the graphics to be used within the login page. Open the configuration page of the HMI server in the category "General".

Open the configuration of the rights of the "_SystemGuests" group under "Usergroups".

Click "Add" under "Files".

Add the graphic with read/write permissions.

You can then use the graphic on the login page.