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:
-
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.
-
Give this container the following custom properties:
breakpoint
of type int,small
of type bool, andlarge
of type bool. -
Put your expected breakpoint size in the
breakpoint
property value (I normally run 800). This value is in px (I think?). -
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. -
Bind container
_small
's visibility property to the custom propertysmall
on its parent container. Do the same with container_large
and the parent container'slarge
property. -
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)
-
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.
-
When editing either container, toggle the
small
andlarge
property on the breakpoint container to show whichever container you want to work on.