Template Layout Enabled/Disabled Bahavior

I have a simple level indicator combined with a couple rectangles to serve as setpoints along the indicator. I'm calculating the relative position of the rectangles and binding to the X position property.

I'm having trouble getting the layout just right.

If I don't enable layout the template stretches fine, but the rectangle's thickness increases too much.
image

Then, if I enable layout and change all layout options to anchored to all edges:
image
That's not right...

So, I try relative, do not maintain AR:


Same result as with layout disabled.

So, relative with maintain AR, none of the 3 options (center, leading, trailing) work:



How do I make this work?

I also tried with just using a linear scale over the whole thing and both the level and linear scale anchored to all edges, but 0 and 100 are not actually at the very edges of the container for that component, so that doesn't work either, when scaling.
Progress_SP.zip (5.8 KB)

Java swing has it's issues with scaling.

Is there a reason why a Moving Analog Indicator won't work for your application?

If for some reason it won't I would probably use a paintable canvas for this.

Doesn't give the look and feel that we want. We'll just have to live with slightly thicker setpoint bars for now...

I suspect that it was also have issues scaling because the bar doesn't begin/end at the very ends of the component container bounds

Easily achievable with a paintable canvas, then you can have any look and feel you want. (Or you could create your own component with a module) but that's quite a bit of overhead.

What are you looking for? It isn't exactly clear to me from your post.

The progress bar fills up as the amps increases. The bars are warning and shutdown levels, relative to the amperage.

I've not done anything with a paintable canvas...

Here is an example which I believe is what you're aiming for. If not should be simple enough for you to modify it to get what you're looking for.

progress

Code for repaint event handler

from java.awt.geom import Rectangle2D as Rect

#save the graphics object, really so you can type less
g = event.graphics
#all graphics are drawn with an assumption of 1000 x 100 px size
#scalling is applied later prior to painting

#background rectangle
backRect = Rect.Float(0,0,1000,100)

#amperage rectangle
#will convert amperage to a %
amps = (event.source.amperage / 100) * 1000

ampRect = Rect.Float(0,0,amps,100)

indWidth = event.source.levelIndicatorWidth

#warning rectangle
#warning is relative to amps
warnLevel = (event.source.warningLevel / 100) * 1000.0
warn = (warnLevel - (indWidth / 2))
warnRect = Rect.Float(warn, 0, indWidth,100)

#shutdown rectangle
#shutdown is relative to amps
shutdownLevel = (event.source.shutdownLevel / 100) * 1000.0
shutdown = (shutdownLevel - (indWidth / 2))
shutdownRect = Rect.Float(shutdown, 0, indWidth,100)


# Scale graphics to actual component size
dx = (event.width - 0.005) / 1000.0
dy = (event.height - 0.01) / 100.0
g.scale(dx,dy)
#paint the rectangles

g.draw(backRect)
g.setPaint(event.source.progressBarColor)
g.fill(ampRect)
g.setPaint(event.source.warningLevelColor)
g.fill(warnRect)
g.setPaint(event.source.shutdownLevelColor)
g.fill(shutdownRect)
3 Likes

:exploding_head:

Where do I put this?

1 Like

Create a Paintable Canvas component and go into the event scripting. Then drop @lrose' script in. You'll need to add the custom properties he's referencing as well.

1 Like

Then, of course, bind those to component properties?

Yep. You can change the names as well, obviously, you'll just need to modify the script accordingly. The only thing that is important is that any property that should trigger a repaint should be on the component itself. Otherwise you'll be stuck with a stale graphic because it won't be asked to repaint when you want.

This means that if you want those to be say template parameters, that you need to create both template parameters and custom properties on the component and bind them.

1 Like