[SOLVED] can ImageButton be toggled?

[cbuchner1]

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

[Ident]

Why dont you use a Radiobutton?

[cbuchner1]

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>


[cbuchner1]

Why dont you use a Radiobutton?

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

[Ident]

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.