How to fit HMI to specific screen resolution
cechurat last edited by
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
- 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.
Resized HMI page example:
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.