PushButton that stay in 'Pressed' state (but not a Checkbox)

[matt]

Hello!

I've created a wrapper around a SequentialLayoutContainer, to store a group of buttons with a method like "addButton("name", "normalPicture", "hoverPicture"....)" in order to differenciate each one.
I currently use 'PushButton's for my buttons, in order to have custom pictures for 'Normal/Hover/Pushed/Disabled' states.

I would like to make these buttons to stay in pressed state, once the user pressed them, and to set them in unpressed state, when the user click on them again.

Reading through the forum, I've seen some posts saying to use a ''Checkbox" control to acheive this goal.
The problem is that Checkbox is not very adapted to customize its picture, and it doesn't have hover state....

Is there an easy way to have 'PushButton' that can keep a 'Pressed' state ?

Thanx in advance for your help

[CrazyEddie]

Hi,

Use a Checkbox!

No! Seriously! Think about the logic and rendering aspects separately. With CEGUI in 99% of cases, anything relating to visual representations is not hard coded, but specified via the looknfeel XML. The behavioural aspect of what you have described is most definitely what we currently call a Checkbox. This is so much the case that in the current development code, the Checkbox class has been renamed to ToggleButton

Anyway, to be genuinely serious for a moment, the correct solution here is to use the "CEGUI/Checkbox" target class (i.e. that which provides the logic) along with the a looknfeel definition that conforms to the relevant requirements (of the Falagard/ToggleButton window renderer class) and provides properties that allow you to set the various images as you desire. It should be possible to either copy/extend the an existing ImageButton WidgetLook XML definition such that it serves the desired purpose. You then use that in a scheme mapping to tie the CEGUI/Checkbox widget class, Falagard/ToggleButton window renderer class and the xml widget look together.

I hope this gives enough ideas to get you underway (you can nag me, and perhaps I'll give a working example, but I would not provide that for days or maybe weeks). I will, of course, answer further questions though

CE.

[matt]

Thanx Eddie for your help! It helped a lot!

Here is my solution:

• This is a Toggle Button, which has a plain background, which color is white when toggle is off, and orange when toggle is on.
• The colors can be adjust with the properties: "NormalTextColour"/"NormalBgColour" for the 'toggle off' mode, and "SelectedTextColour"/"SelectedBgColour" for the 'toggle on' mode
• The hover color is set by the "HoverBgColour" and "SelectedHoverBgColour" properties
• The toggle picture should be a kind of stencil, with some transparent parts, that let the ToggleButton state color, set above, visible. The pictures are configurable with the properties "NormalImage", "HoverImage", "PushedImage", "DisabledImage"

In MySpecialWidgets.scheme:

Code: Select all

  <FalagardMapping WindowType="MySpecialWidgets/ToggleButton"    TargetType="CEGUI/Checkbox"    Renderer="Falagard/ToggleButton" LookNFeel="MySpecialWidgets/ToggleButton" />


in MySpecialWidgets.imageset:

Code: Select all

    <Image Name="WhiteBg" XPos="764" YPos="17" Width="53" Height="53" />
    <Image Name="ToggleButtonNormal" XPos="191" YPos="64" Width="65" Height="65" />
    <Image Name="ToggleButtonHover" XPos="191" YPos="128" Width="65" Height="65" />
    <Image Name="ToggleButtonPushed" XPos="191" YPos="191" Width="65" Height="65" />
    <Image Name="ToggleButtonDisable" XPos="191" YPos="319" Width="65" Height="65" />


and in MySpecialWidgets.looknfeel:

Code: Select all

  <!--
    ***************************************************
        MySpecialWidgets/ToggleButton
    ***************************************************
    -->
  <WidgetLook name="MySpecialWidgets/ToggleButton">
    <!-- Layers of image and text 'available' for this widget -->
    <PropertyDefinition name="NormalTextColour" initialValue="FFB4B9BB" redrawOnWrite="true" />
    <PropertyDefinition name="SelectedTextColour" initialValue="FFF9A01B" redrawOnWrite="true" />
    <PropertyDefinition name="NormalBgColour" initialValue="FFB4B9BB" redrawOnWrite="true" />
    <PropertyDefinition name="HoverBgColour" initialValue="FFFF9090" redrawOnWrite="true" />
    <PropertyDefinition name="SelectedBgColour" initialValue="FFF9A01B" redrawOnWrite="true" />
    <PropertyDefinition name="SelectedHoverBgColour" initialValue="FFFF9090" redrawOnWrite="true" />
    <PropertyDefinition name="NormalImage" initialValue="" redrawOnWrite="true" />
    <PropertyDefinition name="HoverImage" initialValue="" redrawOnWrite="true" />
    <PropertyDefinition name="PushedImage" initialValue="" redrawOnWrite="true" />
    <PropertyDefinition name="DisabledImage" initialValue="" redrawOnWrite="true" />
   
    <ImagerySection name="label">
      <TextComponent>
        <Area>
          <Dim type="LeftEdge" >
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge" >
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge" >
            <UnifiedDim scale="1" type="Width" />
          </Dim>
          <Dim type="Height" >
            <UnifiedDim scale="1" type="Height" />
          </Dim>
        </Area>
        <VertFormat type="CentreAligned" />
        <HorzFormat type="WordWrapCentred" />
      </TextComponent>
    </ImagerySection>

    <ImagerySection name="background_imagery">
      <ImageryComponent>
        <Area>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="Width">
            <UnifiedDim scale="1.0" type="Width" />
          </Dim>
          <Dim type="Height">
            <UnifiedDim scale="1.0" type="Height" />
          </Dim>
        </Area>
        <Image imageset="MySpecialWidgets" image="WhiteBg" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>
   
   
    <ImagerySection name="normal_imagery">
      <ImageryComponent>
        <Area>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="Width">
            <UnifiedDim scale="1.0" type="Width" />
          </Dim>
          <Dim type="Height">
            <UnifiedDim scale="1.0" type="Height" />
          </Dim>
        </Area>
        <ImageProperty name="NormalImage" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>
    <ImagerySection name="hover_imagery">
      <ImageryComponent>
        <Area>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="Width">
            <UnifiedDim scale="1.0" type="Width" />
          </Dim>
          <Dim type="Height">
            <UnifiedDim scale="1.0" type="Height" />
          </Dim>
        </Area>
        <ImageProperty name="HoverImage" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>
    <ImagerySection name="pushed_imagery">
      <ImageryComponent>
        <Area>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="Width">
            <UnifiedDim scale="1.0" type="Width" />
          </Dim>
          <Dim type="Height">
            <UnifiedDim scale="1.0" type="Height" />
          </Dim>
        </Area>
        <ImageProperty name="PushedImage" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>
    <!--<ImagerySection name="disabled_imagery">
      <ImageryComponent>
        <Area>
          <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
            <AbsoluteDim value="0" />
          </Dim>
          <Dim type="Width">
            <UnifiedDim scale="1.0" type="Width" />
          </Dim>
          <Dim type="Height">
            <UnifiedDim scale="1.0" type="Height" />
          </Dim>
        </Area>
        <ImageProperty name="DisabledImage" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
      </ImageryComponent>
    </ImagerySection>-->


    <!-- States of the Toggle Button-->
    <StateImagery name="Normal">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="NormalBgColour" />
        </Section>
        <Section section="normal_imagery" />
        <Section section="label">
          <ColourProperty name="NormalTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Hover">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="HoverBgColour" />
        </Section>
        <Section section="hover_imagery" />
        <Section section="label">
          <ColourProperty name="NormalTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Pushed">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="NormalBgColour" />
        </Section>
        <Section section="pushed_imagery" />
        <Section section="label">
          <ColourProperty name="NormalTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="Disabled">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="NormalBgColour" />
        </Section>
        <Section section="normal_imagery" >
          <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
        </Section>
        <Section section="label">
          <ColourProperty name="NormalTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="SelectedNormal">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="SelectedBgColour" />
        </Section>
        <Section section="normal_imagery" />
        <Section section="label">
          <ColourProperty name="SelectedTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="SelectedHover">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="SelectedHoverBgColour" />
        </Section>
        <Section section="hover_imagery" />
        <Section section="label">
          <ColourProperty name="SelectedTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="SelectedPushed">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="SelectedBgColour" />
        </Section>
        <Section section="pushed_imagery" />
        <Section section="label">
          <ColourProperty name="SelectedTextColour" />
        </Section>
      </Layer>
    </StateImagery>
    <StateImagery name="SelectedDisabled">
      <Layer>
        <Section section="background_imagery" >
          <ColourProperty name="SelectedBgColour" />
        </Section>
        <Section section="normal_imagery" >
          <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
        </Section>
        <Section section="label">
          <ColourProperty name="SelectedTextColour" />
        </Section>
      </Layer>
    </StateImagery>

  </WidgetLook>


[CrazyEddie]

Cool, I'm glad you were able to get it working

CE.

[tlareywi]

Thank you for posting your solution to this! Exactly what I was looking for as well.