How to create multiple progress bar skins

[jpappalardo]

I am trying to provide different colored progress bars to indicate different status.

i.e. blue, yellow, and red for displaying disk utilization.
If usage < 70% the progress bar is blue
If usage >= 70% && < 90% the progress bar is yellow
If usage >= 90% the progress bar is red

We have successfully altered the skin directory to provide a blue a progress bar. I would like to repeat the process for the other 2 colors, but it does not appear that there is a style that defines which images are used. Are the images files hard coded for this widget?

[Isomorphic]

You can use 'setSrc()' to modify the image used for the ProgressBar. Note that this behavior is inherited from StretchImg, a superclass of progressbar.

The component will automatically look for 6 images based on the string you pass to this method - a "start", "end" and "stretch" segment, and an empty version of same.

To give a concrete example - let's say you called setSrc("redbar.png"); on a horizontal progressbar, and set the percentDone to 50% (and width to 200px)

When rendering out the item, the system would create HTML containing the following elements:

An img of fixed width (3px) with src set to "redbar_h_start.png"
An img of calculated width (in this case 97px) with src set to "redbar_h_stretch.png"
An img of calculated width (in this case 97px again) with src set to "redbar_h_empty_stretch.png"
An img of fixed width (3px) with src set to "redbar_h_empty_end.png"

The size of the "stretch" images would of course vary with component size, and with percentDone setting, and if the percentage was zero or 100 the "empty" or "full" version of the start/end images would be displayed.

Please let us know if this isn't enough to get things working for you.

Regards
Isomorphic Software

[jpappalardo]

that was precisely the enlightenment I needed thank you.