Progress Bar with 2 images

[cippyboy]

I was wondering if there's any way to make that since i haven't been able to figure out how. So, I have a background image and the progress image on top of it. This second image would have to be scissored entirely for 0% progress and be entirely displayed for 100% progress. The thing is that in order to do this I would need to update at run-time the top edge of the progress image, and have the image bottom aligned, but CEGUI interprets bottom aligning in a different way, aligning to bottom only if the Area Rectangle is bigger than the image size while I'd like it to start mapping from the bottom edge up, so that 50% would show the bottom side, and not the upper side.

Also, my color property with the 4 corner colors doesn't seem to work with a static image, pretty weird. Also is there a way to tell the renderer where to start the mapping ? Like have some kind of access to the texcoords ?

[CrazyEddie]

Hi,

The CEGUI progress bar component is intended to do exactly what you need (I believe) - though all the current released versions have a bug whereby it doesn't work correctly (the progress imagery is scaled into the scissor / clipping area instead of being clipped by it), in order to get the correct behaviour you need the v0-6 branch of SVN code where the issue has been fixed.

Armed with the fixed progress bar code, you can then get what you want by creating (or editing the existing) WidgetLook definitions in the looknfeel file. If you need additional assistance with this, simple examples can be provided.

I'm not sure what the issue is with regards to the colour property. If you could post some code or xml of some kind, and state what you thought would happen and what does happen, that would be useful - sometimes it's hard to visualise things from a description alone

With regards to the last point, there is currently no such low-level access to rendering elements.

CE.

[cippyboy]

I forgot to add that we're using 0.50b due to some issues and we're basically afraid to upgrade because it might screw up a lot of working stuff.

We're trying to achieve something similar to Diablo style health bars. Please forgive my poor Paint stkills



I looked at the 0.5 descriptions of the progress bar and it's vertically stretched and horizontally tiled. Will have to test it's use though.

EDIT: By the way, how can you set an image property to a certain frame component like Background, I tried <ImageProperty type="Background name="Image"/> but it doesn't work. And can you set Vector2 properties from the XML to offset windows ?

[CrazyEddie]

Thanks for posting the image; this is absolutely what the core progress bar is intended for.

Are you using a source version of CEGUI where you could apply the progress bar fix? If you're using source, I can post the appropriate patch - it's only a couple of lines changed - to fix the clipping bug (without the fix you might have a hard time getting this to work correctly without resorting to hacks).

Whether a progress bar is stretched or tiled, or whatever, is not something that is set in stone (or even code) - it's possible to define multiple variants of the progress bar - all with different approaches to imagery arrangement - via the XML looknfeel and scheme system.

The ImageProperty element is only valid in the ImageryComponent, not the FrameComponent. In reference to the Vector2 property question, you'll have to elaborate (which property and on what object, at least).


A simple "two image" progress bar looknfeel WidgetLook definition might look something like this:

Code: Select all

    <WidgetLook name="MyGUISkin/HealthBar">
        <Property name="VerticalProgress" value="True" />
        <NamedArea name="ProgressArea">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="background">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="MyImageset" image="ProgressBackground" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>   
        <ImagerySection name="progress" >
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" ><UnifiedDim scale="0" type="LeftEdge" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="MyImageset" image="ProgressForeground" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="background" />
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledProgress">
            <Layer>
                <Section section="progress" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled" />
        <StateImagery name="DisabledProgress" />
    </WidgetLook>


To reiterate,though, this will only work correctly with the clipping fix, without it the ProgressForeground image would not be clipped according to the current progress, but instead scaled to fit within it.

CE.

[cippyboy]

By using an invisible frame window in which I have the progress image, and offsetting both the frame and the progress image I can clip it from bottom up. Overlaying it ontop of the empty overlay gives the desired effect, although the technique sounds like a hack .

Unfortunately we're using some libs to compile the code. Is this "fix" available in 0.6 or the to-be-released 0.7 (or the subversion you were talking about) ?

[CrazyEddie]

By using an invisible frame window in which I have the progress image, and offsetting both the frame and the progress image I can clip it from bottom up. Overlaying it ontop of the empty overlay gives the desired effect, although the technique sounds like a hack .

Unfortunately we're using some libs to compile the code. Is this "fix" available in 0.6 or the to-be-released 0.7 (or the subversion you were talking about) ?

The fix is not in the 'released' 0.6 packages, though it is in the v0-6 branch of SVN - this branch is basically the stable, maintained version of the code where virtually all bug fixes get put first (the URL for this to use with svn is https://crayzedsgui.svn.sourceforge.net ... ches/v0-6/ if you're a MSVC++ user, you'll need the 0.6.0 dependencies package appropriate for your compiler, and also premake to generate the MSVC++ project files).
The next major release (0.7.0) will be taken from trunk, but this code is not stable, and is not really recommended for production use, also I think does not contain the fix yet (it will do this weekend once I do a couple more fixes in v0-6 and then merge the whole lot back in).

CE.

Edited at 0902 on 9th Aug '08 to fix SVN URL - oops!