How to fit HMI to specific screen resolution

cechurat

The HMI Designer generates an HTML file with a SVG image. The SVG is using the "viewbox" attribute to fit the screen and preserve the aspect ratio.
To optimize the SVG you need to elaborate with the Document Properties of the *.hmi.svg source file.

Open the source document
Open Document Properties dialog using File -> Document Properties or Shift + Ctrl + D
Change With and Height of the document
Rearrange your HMI components
Generate new HMI using REXYGEN Studio

To fill the whole page with the HMI with small margins you have to have the same aspect ratio of the document as is the aspect ratio of the webpage without header and margins.

You can use the Inspection tool which is included in all modern browsers (Chrome, Firefox, Opera, etc.). Just open the inspection tool, click on the left top corner icon and point to the whole SVG element. The tooltip will show the size of the current space. Use it to change the SVG document properties and rearrange the HMI components to fit new size.

02 Webbrowser_get_size.png

Resized HMI page example:
03 Webbrowser_resized.png

Apollo

Thanks for the explanation.
First I did try to do it without the viewbox and it was working quite well until I opened the page on another PC with a monitor with a different aspect ratio...
But by simply enabling the viewbox checkbox and changing the width and height of the document by trial and error I managed to get something which is working fine on both PC's.