How to maintain aspect ratio in a resizeable popup window?

Ignition
1

I'm trying to create a popup window that will contain an IP Camera Viewer object in it. What I'd like to do is set the popup window to be resizeable and maintain its aspect ratio when resized so that the camera viewer also maintains the correct aspect ratio. I could just set the layout mode of the IP Camera View to relative, and check the "Maintain Aspect Ratio" option, but that will leave me with blank space in the popup around the object if I resize it. I'd rather that the window itself maintain the aspect ratio. Is there a good way to achieve this?

2

Hi Brian, one possible way to achieve this is through scripting. The basic idea is to resize the window back to aspect ratio whenever the window has been resized by the user. Here is what I did:

  1. I created custom properties on the window’s root container called ‘winWidth’ and ‘winHeight’ which stores the initial width and height of the window. The aspect ratio will depend on these two properties so it is important that the values actually correspond to window’s width and height.

  2. On the IP camera viewer, I changed the layout mode to anchored in all four directions.

  3. On the IP camera viewer’s propertyChange event handler, I added the following script:

# Fires when the IP Camera Viewer Component is resized
if event.propertyName == 'vision.bounds2d':
	# Get the window
	window = system.gui.getParentWindow(event)
	
	# winWidth and winHeight are both custom properties of the Root Container
	# These properties specify the initial width and height of the window
	winWidth = event.source.parent.winWidth
	winHeight = event.source.parent.winHeight
	
	adjustedWidth = window.height * winWidth/winHeight
	adjustedHeight = window.width * winHeight/winWidth
	
	# We only resize the width or the height but not both at the same time.
	# This is to prevent the propertyChange event handler from firing from the
	# the previous propertyChange handler.
	if event.oldValue.width != event.newValue.width:
		window.setSize(window.width, int(adjustedHeight))
	else:
		window.setSize(int(adjustedWidth), window.height)

This should maintain the aspect ratio of the window and the IP Camera Viewer on resize. Hope this helps.

3

One thing I forgot to mention in my initial post is that this camera “popup” is in reality a new desktop with a camera window in it. Each camera popup that I have has to be in its own window so the user can drag that window outside of the bounds of the main screen. I can see how this script will work just fine for a normal popup, however I’m not sure how or if I can manipulate the size of the new desktop itself.

Thank you for the help, I appreciate it!

4

The same concept from Kevin’s code will still apply. Modifying the window dimensions works a little differently, but not very much so. An example, setting to static dimensions, is below:

from javax.swing import SwingUtilities

root = SwingUtilities.getRoot(event.source)

root.setSize(1024, 768)

With secondary desktops, you don’t even need the ‘getRoot’; you can just setSize() directly on the desktop object.

5

Hey Brian, I am having a similar issue with project. Were you able to solve this problem?

6

Will this work with a normal window? I'm designing a webapp for the plant and it's on perspective. I want my components to not resize and keep their aspect ratio as the browser window is being resize.

7

This topic is from before Perspective existed, so it is for Vision only.

You will need to use a coordinate container with declared aspect ratio. Most everything else in Ignition is design to be fluid. Because fluid is what makes a web page "design once, show anywhere". Unless you are showing diagrams of some kind, you should reconsider. But anyways, not in this Vision topic.