Rolling-my-own progress bar

I’ve got an application where I can’t really use the Progress Bar control but I need to animate the width of a rectangle. The rectangle has to be perfectly squared with no outlines, whereas Progress Bar has a subtle 1-pixel edge to it and slightly rounded corners.

I have bound the rect.overrideWidth to my variable. It works, but the problem is the rectangle is centered in its bounding box. Can I make the rectangle left-align or right-align within its bounding box?

If you can make it be a vertical box, use the “level indicator” component. You can tweak the settings on this to make it a basic, no-frills flat rectangle. Its an oversight of ours that it only goes vertical - we’ll add a horizontal mode soon.

In the meantime, you can use a call to fpmi.gui.resizeComponent to achieve this effect. Before you grumble and say that this is a bit heavy-weight to achieve such a simple idea - I agree. Like I said, its an oversight of ours that the level indicator component doesn’t have a horizontal mode.

Anyhow, here is how you’d do it. Take a rectangle. Add an integer custom property to it called rectWidth. Add this script on the rectangle’s propertyChange event:

if event.propertyName == 'rectWidth': newWidth = event.newValue height = event.source.height fpmi.gui.resizeComponent(event.source, newWidth, height)

Attached is a window that demonstrates this. Stay tuned for the improved level indicator in 3.1.3
rectdemo.fwin (3.87 KB)