Call us! 512-349-0334 or (877) INDUSOFT

Aspect Ratios and Your InduSoft Web Studio Project

Occasionally you may have an InduSoft Web Studio HMI project that was built for a specific monitor configuration and you might be faced with modifying the project in order for it to display properly on a monitor with a different aspect ratio.

InduSoft Web Studio has the ability to automatically resize existing HMI applications to display applications on monitors other than the original project width and height (aspect ratio is width divided by height) without losing any information by selecting “Auto Screen Scaling” in the Viewer Settings of the project.  Unfortunately, if for instance, the project was built using an aspect ratio of 1280 x 800, such as the PCDemo program and displaying it (starting maximized) on a monitor that is 1366 x 768 will fill the monitor’s vertical component, but will leave a grey band on the right side of the monitor (Figure 1).  Similarly, running the same project on a monitor that is 1024 x 768 will fill the monitor’s horizontal component but leave a grey band on the bottom of the monitor (Figure 2).

Figure 1: A project defined as 1280 x 800 run on a 1366 x 768 monitor using Auto Scaling.

Figure 2: A project defined as 1280 x 800 run on a 1024 x 768 monitor using Auto Scaling.

A way to directly convert the HMI application screens to the new monitor aspect ratio and size is to use the “Convert Resolution” utility located on the Home Tab in the “Tools” section (after saving a backup of your current InduSoft Web Studio project).  The effect of using this utility on screens that are of a distinctly different aspect ratio than the original design of the application may produce an undesired effect of stretching the objects to a highly distorted size and shape (Figure 3).

Figure 3: PCDemo Application converted to 1024 x 768 aspect ratio.  Note the distorted circles of the knobs and the robot arm being slightly off axis, appearing disconnected at the pivot.

In addition to the issues shown in Figure 3, the screen attributes for each screen are changed as well.  Note that for the STATUSBAR.scr, the thin band of information at the bottom of the application, the original size and location was 1280 pixels wide x 30 pixels high with a starting location of 770 pixels from the top so that the 30 pixel height will fill to the bottom of the 1280 x 800 monitor. After conversion, the new screen attributes for STATUSBAR.scr are 1024 wide x 28 high with a new starting location of 739.

The function, “Open()” will open a project screen in a specific location if optional parameters are defined. After conversion, the parameters in Open() are not changed.  The screen will continue to open at the coordinates originally set within the function, even if those coordinates are based on the newly converted project size and aspect ratio. See Figures 4 and 5 to understand how these changes affect the application before and after conversion.

Figure 4: The default coordinates and sizes of screens are recalculated after using the Conversion tool, so screens appear to open in the same apparent location as the original default coordinates placed them. Note the Test Popup Window opens in virtually the same location on the screen beneath it after conversion from 1280 x 800 to 1024 x 768.

Figure 5: Opening the Test Popup Screen using the function “Open()” with specifically defined coordinates of 600, 300, will continue to open the screen at those specific coordinates after an application conversion from 1280 x 800 to 1024 x 768.

Note that this effect of using “Open()” with defined coordinates in order to open a screen will not be affected using Auto Screen Scaling.  Since the HMI project aspect ratio is not actually resized when displayed on a different monitor using Auto Screen Scaling, the coordinates in the Open() statement are still valid, but are rendered on the new monitor in a scaled location relative to the project aspect ratio in InduSoft Web Studio.

Comments are closed.