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

For help with anything that CEGUI doesn't offer straight out-of-the-box, e.g.:
- Implementation of new features, such as new Core classes, widgets, WindowRenderers, etc. ...
- Modification of any existing features for specific purposes
- Integration of CEGUI in new engines or frameworks and writing of new plugins (Renderer, Parser, ...) or modules

Moderators: CEGUI MVP, CEGUI Team

Bertram
Quite a regular
Quite a regular
Posts: 73
Joined: Wed Oct 02, 2013 14:46

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

Postby Bertram » Wed Apr 29, 2015 10:12

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,
Last edited by Bertram on Sun Oct 04, 2015 12:07, edited 1 time in total.

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Widgets - Create a mix between a button and a progressba

Postby Ident » Wed Apr 29, 2015 17:10

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?
CrazyEddie: "I don't like GUIs"

Bertram
Quite a regular
Quite a regular
Posts: 73
Joined: Wed Oct 02, 2013 14:46

Re: Widgets - Create a mix between a button and a progressba

Postby Bertram » Wed Apr 29, 2015 20:22

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. :)

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Widgets - Create a mix between a button and a progressba

Postby Ident » Wed Apr 29, 2015 22:56

Bertram wrote:
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.
CrazyEddie: "I don't like GUIs"

Bertram
Quite a regular
Quite a regular
Posts: 73
Joined: Wed Oct 02, 2013 14:46

Re: Widgets - Create a mix between a button and a progressba

Postby Bertram » Sat May 02, 2015 22:49

Ident wrote: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. :D
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. :)

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Widgets - Create a mix between a button and a progressba

Postby Ident » Sat May 02, 2015 23:02

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).
CrazyEddie: "I don't like GUIs"

Bertram
Quite a regular
Quite a regular
Posts: 73
Joined: Wed Oct 02, 2013 14:46

Re: Widgets - Create a mix between a button and a progressba

Postby Bertram » Thu May 07, 2015 11:37

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. :D

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,

User avatar
Ident
CEGUI Team
Posts: 1998
Joined: Sat Oct 31, 2009 13:57
Location: Austria

Re: Widgets - Create a mix between a button and a progressba

Postby Ident » Thu May 07, 2015 18:20

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.
CrazyEddie: "I don't like GUIs"

Bertram
Quite a regular
Quite a regular
Posts: 73
Joined: Wed Oct 02, 2013 14:46

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

Postby Bertram » Sun Oct 04, 2015 12:16

Hey again,

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

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à !!


Return to “Modifications / Integrations / Customisations”

Who is online

Users browsing this forum: No registered users and 13 guests