relY and relX position expression binding issues

Ignition
1

I have a few analog indicator templates that I’m working on for a project that are similar to the default Moving Analog Indicator object. These indicators are set up with a moving indicator, a desired operating range, and high/low alarm range indicators. The relX, relY, and Height position properties of the shapes that make up each one of these ranges have expression bindings on them to correctly calculate the height and position within the template. All of the expressions are using relative coordinates and the height values of other objects rather than using absolute pixel values.

The issue I run into is I’d like the templates to be scalable with certain constraints, so I’m using the anchored layout on all of the components within the template. When doing this and when the template is resized, it seems like the expressions that are being calculated to determine the size and position of all of the components are using the height, width, x, and y values of the components as they are within the template itself rather than the resized instance of the template. Is there any way around this?

2

Here’s a picture showing the issue. The template instance on the left is the same size as the template. The template instance on the right is twice as long. The alarm ranges and desired range are all the same size as the default template even though the height of the range (which everything else is scaled off of) has doubled.

3

If I use the relative layout on all of the components then it works almost the way that I want. The main issue that I’m having is that within the template I’d like to have a fixed spacing of 5px on the top and bottom of the object. That way when I’m laying components out in the designer with the snap feature on, lining up something like a sparkline to be the same size as the indicator becomes easy. Using the relative mode, if I resize the indicator at all within the designer then I have an unpredictable spacing on the top and bottom of the template making accurate alignment with other components near impossible.

4

Consider placing a container in the template covering all but the top and bottom five pixels, using absolute positioning in the template root. Then have everything in that container use relative positioning.

5

I went ahead and tried that but unfortunately it appears to have the same behavior as just having the components of the indicator in the template itself. I placed the components of my template within the container that was added, applied a relative layout to them, and then applied an anchored layout to the container itself. When the template instance is resized the container resizes and maintains the 5px spacing like I would expect, but the indicator’s offset from the edge of the container will still change an unpredictable amount.

Here’s another example where the template instance on the left is the same size as the template itself, and the instance on the right is twice as long. The container background is shown in red.

For reference, here’s the anchored layout applied to the container in the template.

And here’s the relative layout applied to the components of the indicator.

And in the template here’s how I have the components placed in the container

6

Ok I went ahead and made one more change that, in addition to pturmel’s advice, seems to have fixed the problem. The “Range” rectangle’s dimensions are what all of the other components dimensions and positions are based on. I went ahead and added this propertyChange script to the container that the indicator is placed in within the template.

# Set the height and offset of the indicator at initialization
if event.propertyName == "componentRunning":
	
	# Get the height of the container which contains the indicator components
	containerHeight = event.source.getHeight()
	
	offset = 10
	rangeHeight = containerHeight - (2 * offset)
	range = event.source.getComponent('Range')
	system.gui.transform(range, newY = 10, newHeight = rangeHeight)
1 Like
7

Did you try to play with the “Enable layout” flag on the template? By default it’s off and the template falls back to regular relative scaling. Anchoring is only done when the flag is on.

8

Yes that was enabled. The problem was that I needed some combination of anchored and relative layout. I wanted the anchored layout so that the template could be resized to be used in other templates of various sizes and I wanted the relative layout so that the animation of the different components would scale correctly. Just using anchored positioning doesn’t accomplish this.

1 Like