[SOLVED] can ImageButton be toggled?

For help with general CEGUI usage:
- Questions about the usage of CEGUI and its features, if not explained in the documentation.
- Problems with the CMAKE configuration or problems occuring during the build process/compilation.
- Errors or unexpected behaviour.

Moderators: CEGUI MVP, CEGUI Team

cbuchner1
Just popping in
Just popping in
Posts: 6
Joined: Wed Sep 17, 2014 10:36

[SOLVED] can ImageButton be toggled?

Postby cbuchner1 » Thu Sep 18, 2014 12:40

I plan to emulate some radio button behavior using image button. One problem is that the "PushedImage" is really only shown while the mouse button is currently being pressed.

Is it feasible to replace the NormalImage with the same image as PushedImage while the button is supposed to be in the "on" state?

Are there better ways to achieve an effect of (image skinned) buttons that stay depressed after clicking? I haven't really mastered the Falagard skinning topic yet ;)

Christian
Last edited by cbuchner1 on Thu Sep 18, 2014 14:42, edited 1 time in total.

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

Re: can ImageButton be toggled?

Postby Ident » Thu Sep 18, 2014 14:32

Why dont you use a Radiobutton?
CrazyEddie: "I don't like GUIs"

cbuchner1
Just popping in
Just popping in
Posts: 6
Joined: Wed Sep 17, 2014 10:36

can ImageButton be toggled?

Postby cbuchner1 » Thu Sep 18, 2014 14:35

Okay, I used Generic/ImageButton as a template and created my own Generic/ImageToggleButton and Generic/ImageRadioButton widgets. Internally these map to ToggleButton and RadioButton objects, and both use the renderer for ToggleButton widgets.

An open issue is the disabled and hover state when a button is currently toggled on. The button will always show the PushedImage at this time. We'd need separate images for PushedHover and PushedDisabled here. I'll leave that as an excercise for the reader.

add this to Generic.scheme

Code: Select all

    <FalagardMapping windowType="Generic/ImageToggleButton" targetType="CEGUI/ToggleButton" renderer="Core/ToggleButton" lookNFeel="Generic/ImageToggleButton" />
    <FalagardMapping windowType="Generic/ImageRadioButton" targetType="CEGUI/RadioButton" renderer="Core/ToggleButton" lookNFeel="Generic/ImageRadioButton" />


and this to Generic.looknfeel

Code: Select all

<!--
            - Normal            - Rendering for when the togglebutton is neither pushed or has the mouse hovering over it.
            - Hover             - Rendering for then the togglebutton has the mouse hovering over it.
            - Pushed            - Rendering for when the togglebutton is not selected, is pushed and has the mouse over it.
            - PushedOff         - Rendering for when the togglebutton is not selected, is pushed and the mouse is not over it.
            - Disabled          - Rendering for when the togglebutton is not selected and is disabled.
            - SelectedNormal    - Rendering for when the togglebutton is selected and is neither pushed or has the mouse hovering over it.
            - SelectedHover     - Rendering for then the togglebutton is selected and has the mouse hovering over it.
            - SelectedPushed    - Rendering for when the togglebutton is selected, is pushed and has the mouse over it.
            - SelectedPushedOff - Rendering for when the togglebutton is selected, is pushed and the mouse is not over it.
            - SelectedDisabled  - Rendering for when the togglebutton is selected and is disabled.
-->
           
    <WidgetLook name="Generic/ImageToggleButton">
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="NormalImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="HoverImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="PushedImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="DisabledImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="Stretched" type="VerticalFormatting" name="VertImageFormatting"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="Stretched" type="HorizontalFormatting" name="HorzImageFormatting"/>
        <Property name="Size" value="{{0, 96}, {0, 32}}" />
        <ImagerySection name="normal">
            <ImageryComponent>
                <ImageProperty name="NormalImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="hover">
            <ImageryComponent>
                <ImageProperty name="HoverImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="pushed">
            <ImageryComponent>
                <ImageProperty name="PushedImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="disabled">
            <ImageryComponent>
                <ImageProperty name="DisabledImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Normal">
            <Layer>
                <Section section="normal"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Hover">
            <Layer>
                <Section section="hover"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Pushed">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="PushedOff">
            <Layer>
                <Section section="hover"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="disabled"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedNormal">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedHover">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedPushed">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedPushedOff">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedDisabled">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
    </WidgetLook>

<!--
            - Normal            - Rendering for when the togglebutton is neither pushed or has the mouse hovering over it.
            - Hover             - Rendering for then the togglebutton has the mouse hovering over it.
            - Pushed            - Rendering for when the togglebutton is not selected, is pushed and has the mouse over it.
            - PushedOff         - Rendering for when the togglebutton is not selected, is pushed and the mouse is not over it.
            - Disabled          - Rendering for when the togglebutton is not selected and is disabled.
            - SelectedNormal    - Rendering for when the togglebutton is selected and is neither pushed or has the mouse hovering over it.
            - SelectedHover     - Rendering for then the togglebutton is selected and has the mouse hovering over it.
            - SelectedPushed    - Rendering for when the togglebutton is selected, is pushed and has the mouse over it.
            - SelectedPushedOff - Rendering for when the togglebutton is selected, is pushed and the mouse is not over it.
            - SelectedDisabled  - Rendering for when the togglebutton is selected and is disabled.
-->
           
    <WidgetLook name="Generic/ImageRadioButton">
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="NormalImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="HoverImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="PushedImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="" type="Image" name="DisabledImage"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="Stretched" type="VerticalFormatting" name="VertImageFormatting"/>
        <PropertyDefinition redrawOnWrite="true" initialValue="Stretched" type="HorizontalFormatting" name="HorzImageFormatting"/>
        <Property name="Size" value="{{0, 96}, {0, 32}}" />
        <ImagerySection name="normal">
            <ImageryComponent>
                <ImageProperty name="NormalImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="hover">
            <ImageryComponent>
                <ImageProperty name="HoverImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="pushed">
            <ImageryComponent>
                <ImageProperty name="PushedImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="disabled">
            <ImageryComponent>
                <ImageProperty name="DisabledImage"/>
                <VertFormatProperty name="VertImageFormatting"/>
                <HorzFormatProperty name="HorzImageFormatting"/>
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Normal">
            <Layer>
                <Section section="normal"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Hover">
            <Layer>
                <Section section="hover"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Pushed">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="PushedOff">
            <Layer>
                <Section section="hover"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="disabled"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedNormal">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedHover">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedPushed">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedPushedOff">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedDisabled">
            <Layer>
                <Section section="pushed"/>
            </Layer>
        </StateImagery>
    </WidgetLook>
Last edited by cbuchner1 on Thu Sep 18, 2014 14:51, edited 4 times in total.

cbuchner1
Just popping in
Just popping in
Posts: 6
Joined: Wed Sep 17, 2014 10:36

Re: can ImageButton be toggled?

Postby cbuchner1 » Thu Sep 18, 2014 14:36

Ident wrote:Why dont you use a Radiobutton?


I want the simplicity of ImageButton for manually skinned layouts (no runtime-switchable skins or themes)

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

Re: can ImageButton be toggled?

Postby Ident » Thu Sep 18, 2014 15:40

cbuchner1 wrote:
Ident wrote:Why dont you use a Radiobutton?


I want the simplicity of ImageButton for manually skinned layouts (no runtime-switchable skins or themes)

Sorry, I dont understand. You say you want ImageButton, but then you say you dont want runtime-switchable Imagery? That is however the exact purpose of ImageButton.

Did you look at Checkbox? Cant you just adapt a Checkbox t do what you want? If you want to be able to have something like Generic/ImageButton for a checkbox, this is easily doable. Same is true for RadioButton. You only need to create PropertyDefinition or Property for the imagery.
CrazyEddie: "I don't like GUIs"


Return to “Help”

Who is online

Users browsing this forum: Google [Bot] and 22 guests