[How-to] Make a breakpoint container in vision

Ignition
, ,
1

So, like many others, I've switched to perspective for the majority of my new projects in Ignition, but occasionally I have to go back to vision. And like many others I imagine, going from responsive UI design to whatever you consider vision to be can be painful.

Recently one of those pain points was not having a breakpoint container, and following the normal design logic in vision of build for the small screen and let java scale it up was not working well for my use case. So I spent the day getting exactly one step closer to a responsive-ish experience, by making a 'breakpoint' container in vision.

Steps to make a breakpoint container:

  1. Create a container in the Root Container of your view (you could also use the root container itself I suppose). I set my container to be anchored on all 4 sides.

  2. Give this container the following custom properties: breakpoint of type int, small of type bool, and large of type bool.

  3. Put your expected breakpoint size in the breakpoint property value (I normally run 800). This value is in px (I think?).

  4. Inside of this new container, place 2 new containers, named _small and _large respectively. Make sure each one takes up the entirety of the parent container space, and set them both to be anchored on all 4 sides.

  5. Bind container _small's visibility property to the custom property small on its parent container. Do the same with container _large and the parent container's large property.

  6. In the internalFrameOpened event of the window, place this script:

internalFrameOpened event handler script 
from java.awt.event import ComponentListener
	# custom listeners
	class breakpointContainerListener(ComponentListener):

		def componentResized(self, event):

			currentWidth = event.source.width
			breakpointWidth = event.source.getPropertyValue("breakpoint")
			
			if currentWidth <= breakpointWidth:
				event.source.setPropertyValue("small", True)
				event.source.setPropertyValue("large", False)
			else:
				event.source.setPropertyValue("small", False)
				event.source.setPropertyValue("large", True)
			return
		
		# you need these to stop a flood of errors in the log
		def componentMoved(self, event):
			pass
			return
		
		def componentHidden(self, event):
			pass
			return
		
		def componentShown(self, event):
			pass
			return
			
	resizeListener = breakpointContainerListener()
	event.source.rootContainer.getComponent('theOneContainerWithTheBreakpointProperty').addComponentListener(resizeListener)

  1. Save and launch the client. (Maybe also change the two inner containers to be different colors so you can see when they change) Play around with resizing the window and rejoice in your ability to layout the same information in different orientations in the same window.

  2. When editing either container, toggle the small and large property on the breakpoint container to show whichever container you want to work on.

4 Likes
2

Hmm. Maybe I should make a MigLayout container...

4 Likes
3

That would be awesome. Please!