[Solved] Widgets - Create a mix between a button and a progressbar

[Bertram]

Hi there,

I'm opening a new topic to get some hints about creating a widgets that will a mix between a button and a progressbar.

I'll explain: The widget will be a standard button but will visually display a cooldown once clicked and in the disabled state.
I'd like to display the cooldown by a grayish non opaque progress image over the button that will diminish until the cooldown is over.

I thus wondered what would be the simplest (and reusable) way to do it. Is it possible for instance to mix the button and progressbar widgets type, or wrap them in a mother button widget for instance?

Best regards,

[Ident]

Just a question upfront: do you already know how to do the opaque-image thing (e.g. in a regular progressbar)? Is that part of the question?

[Bertram]

Just a question upfront: do you already know how to do the opaque-image thing (e.g. in a regular progressbar)? Is that part of the question?

I was thinking about using a color property and setting the alpha part to less than 256 <-> FF.
My actual question is indeed how to mix the button and the progressbar features.

[Ident]

Just a question upfront: do you already know how to do the opaque-image thing (e.g. in a regular progressbar)? Is that part of the question?

I was thinking about using a color property and setting the alpha part to less than 256 <-> FF.
My actual question is indeed how to mix the button and the progressbar features.

That would have been my suggestion.


From what I understand you want the classic "skill-with-cooldown" type of widget, as present in a lot of games of all genres. This would be a great addition to CEGUI!

I think all you need is the basic scrollbar look and behavior that consist of the image above with transparency + image underneath that stays static. This would have to be amended with an extra state in the look that does not include the overlay and is merely for the pre-pressed state. This has also to be reflected in the logic then.

I might be missing something there, not sure. Feel free to post code and I will look at it and we can discuss.

[Bertram]

From what I understand you want the classic "skill-with-cooldown" type of widget, as present in a lot of games of all genres. This would be a great addition to CEGUI!

Yes, exactly the kind of thing I'm trying to achieve.

Btw, I've witnessed that exact widget in Torchlight II, which is using cegui 0.7.x.
I've unpacked their data using modding tools and I haven't found anything in the looknfeel concerning such widgets.
I guess they are using some kind of trick both in code and in their layout but I couldn't be able to read the layouts due to strange encoding issues.

But there is hope.
Maybe they created a child widget in a button and are changing its area with the code? I'll check that possibility and tell you.

[Ident]

Child widgets are always a possibility and its easy to do. But clearly it is not as self-contained and nice as having a full widget doing that entirely on its own. Creating a new widget is the clean way to do it. So I suggest doing that instead of however they might have hacked it. Is their source code even open?

I will help you create this widget, if I was you i would start off with the scrollbar stuff available. Imo the scrollbar should btw not fill up itself but require updates from the outside in regards to its percent value. Otherwise it becomes kind of messy and out of control. Given that fact it is really just an issue of how to display stuff (similar to how it is with the scrollbar) and for that basically you just need the two states (one represents a button, the other the scrollbar).

[Bertram]

Hey,

Child widgets are always a possibility and its easy to do. But clearly it is not as self-contained and nice as having a full widget doing that entirely on its own. Creating a new widget is the clean way to do it. So I suggest doing that instead of however they might have hacked it. Is their source code even open?

True. The source code isn't open, but most of their data is, explaining why I could have a look at their look'n'feel file. (I wouldn't want to do reverse engineering here anyway.)

I will help you create this widget, if I was you i would start off with the scrollbar stuff available. Imo the scrollbar should btw not fill up itself but require updates from the outside in regards to its percent value. Otherwise it becomes kind of messy and out of control. Given that fact it is really just an issue of how to display stuff (similar to how it is with the scrollbar) and for that basically you just need the two states (one represents a button, the other the scrollbar).

I'll gladly have a go at this one. Thanks for the advice.

Yet, I must think of a short-term solution at the same time. That's why I'd rather create a parent widget with both children for now as IMHO it will work while being somewhat hackish.
Then, I'll create a new widget for v0 based on your advice. (Is it ok if I base the future widget against v0?)

Best regards,

[Ident]

Base it against whatever you want, it won't break ABI. v0 is fine imo.

If you use a parent&child window as workaround, then remember to set the child window to pass all mouse inputs through to the parent so that all clicks on the "scrollbar" will be registered. Otherwise it may "eat" clicks. After all the scrollbar part is just for presentation.

[Bertram]

Hey again,

I wanted to say we found a simple way to fix that!

Here is how:
Not mandatory, but for our own use, in the look'n'feel, we adapted the progressbar lnf part to accept a progressbar custom image parameter: 'ProgressImage'

Code: Select all

    <WidgetLook name="OD/ProgressBar">
        <PropertyDefinition initialValue="OpenDungeonsSkin/ProgressBarLitSegment" name="ProgressImage" redrawOnWrite="true" />
        <NamedArea name="ProgressArea">
            <Area>
                <Dim type="LeftEdge"><ImageDim dimension="Width" name="OpenDungeonsSkin/ProgressBarLeft" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="RightEdge">
                    <OperatorDim op="Subtract">
                        <UnifiedDim scale="1" type="RightEdge" />
                        <ImageDim dimension="Width" name="OpenDungeonsSkin/ProgressBarRight" />
                    </OperatorDim>
                </Dim>
                <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="frame">
            <FrameComponent>
                <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 component="TopLeftCorner" name="OpenDungeonsSkin/ProgressBarTopLeft" />
                <Image component="TopRightCorner" name="OpenDungeonsSkin/ProgressBarTopRight" />
                <Image component="BottomLeftCorner" name="OpenDungeonsSkin/ProgressBarBottomLeft" />
                <Image component="BottomRightCorner" name="OpenDungeonsSkin/ProgressBarBottomRight" />
                <Image component="LeftEdge" name="OpenDungeonsSkin/ProgressBarLeft" />
                <Image component="RightEdge" name="OpenDungeonsSkin/ProgressBarRight" />
                <Image component="BottomEdge" name="OpenDungeonsSkin/ProgressBarBottom" />
                <Image component="TopEdge" name="OpenDungeonsSkin/ProgressBarTop" />
                <Image component="Background" name="OpenDungeonsSkin/ProgressBarMiddle" />
                <HorzFormat type="Tiled" />
            </FrameComponent>
            <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>
                <VertFormatProperty name="VertImageFormatting" />
                <HorzFormatProperty name="HorzImageFormatting" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="progress_lights">
            <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>
                <ImageProperty name="ProgressImage" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Tiled" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="frame" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="frame">
                    <Colours bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" topLeft="FF7F7F7F" topRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledProgress">
            <Layer>
                <Section section="progress_lights" />
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledProgress">
            <Layer>
                <Section section="progress_lights">
                    <Colours bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" topLeft="FF7F7F7F" topRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>

The actual how is here, in the layout file.
We added a progressbar within the image button:

Code: Select all

...
                <Window type="OD/ImageButton" name="TrainingHallButton" >
                    <Property name="Area" value="{{0.3,-25},{0,15},{0.3,25},{0,65}}" />
                    <Property name="ButtonImage" value="OpenDungeonsIcons/TrainingHallButton" />
                    <Property name="TooltipText" value="Room: Training Hall" />
                    <Window type="OD/ProgressBar" name="TrainingHallButtonProgressBar" >
                        <Property name="Area" value="{{0.0,-20},{0.0,0},{1.0,20},{1.0,0}}" />
                        <Property name="InheritsTooltipText" value="True" />
                        <Property name="CurrentProgress" value="0.0" />
                        <Property name="MousePassThroughEnabled" value="True" />
                        <Property name="StepSize" value="0.1" />
                        <Property name="Visible" value="False" />
                        <Property name="VerticalProgress" value="True" />
                        <Property name="Alpha" value="0.2" />
                        <Property name="ProgressImage" value="OpenDungeonsSkin/SelectionBrush" />
                        <Property name="ReversedProgress" value="True" />
                    </Window>
                </Window>
...               


Note that the area of the progressbar was adapted to avoid showing its borders here.

And voilà !!