Problems realizing button with active status

[Chaos]

Hey Guys,


first of all I want to thank you for this awesome GUI!!! At the moment I'm workin' on the second commercial GUI-Project with CEGUI and it's just workin' fine!

Except for one thing: I want to realize an other status for my graphical buttons. So the Button should have 4 states (normal, pushed, hover and active).

With this button I want to implement a mainmenue which displays submenues in a special frame in the same site. So the mainmenue is always visible and the mainmenuebuttons have to be in an active state when the submenue of it is visible.

Does anybody has an idea how I could fix this problem or some kind of workaround for this problem?
I would be very glad if you could help me!

An other point is, that I'm scripting the GUI with LUA so the function I have to use should be also available in LUA.


Bye for now,

Chaos

[scriptkid]

Hi and welcome

Thanks for the praises! We're glad to hear this.

With 'active' do you mean the hover state which should be kept when you move the mouse out of the main button into a sub button? If that's the case, you can trick the user by changing the image of the button to look hovered, even when it's not.

Code: Select all

mainMenuButton->subscribeEvent(PushButton::EventMouseEnters, Event::Subscriber(&Menu::onMouseEntersMainMenuButton, this));
// ... and then later:
bool Menu::onMouseEntersMainMenuButton(const CEGUI::EventArgs &e)
{
  // Mouse has entered the button. (Hover)
  // Determine which button and so on...
  if (_menu_openened_)
  {  // Overwrite the inactive imagery             
     CEGUI::PushButton * pushButton =  tatic_cast<CEGUI::PushButton*>(static_cast<const WindowEventArgs&>(e).window);
     // Set the normal state to look like it's being hovered
     pushButton->setProperty("NormalImage", "set:MyLook image:MyButtonHovered");
   }
   return true;
}


And when a submenu closes, find it's main button and undo this change by saying:

Code: Select all

// Set the normal state to look like normal again
mainButton->setProperty("NormalImage", "set:MyLook image:MyButtonNormal


HTH. This should all be possible from Lua too. Let me know if that went to fast

[Chaos]

Thank you for the quick answer!

No, I meant something different.
I've got a Menu on the left side with buttons like "Options", "Singleplayer" and so on.
On the right side of this navigation buttons is a defaultwindow in which the content is included when the user clicks on a button.

So if I click on "Singleplayer", the available Levels appear on the right side but the button "Singleplayer" has no active-state.

In other words the user doesn't know on which button he has clicked and in which section he is at the moment.

Is there any solution you can suggest?


Another point is: I recognized that when I destroy dynamically loaded images/imagesets the weren't deleted from the memory of my RAM.
Am I doing something wrong or is it a bug?

Hope now you understood my problem and can help me.

Edit: What happend to CE? Does he just need some time to relax from the hard work or did he "quit" his "job"?

Bye Chaos

[Rackle]

The behavior of the buttons on the left seems closer to that of radiobuttons than that of pushbuttons; the user selects one option amongst many. The behavior of a pushbutton is to generate an event. What you could do is create a new type of radiobutton such that its unselected image is that of a pushbutton in the "up" state and its selected image is that of a pushbutton in the down state. If you look at the WindowsLook imagery in Samples\datafiles\imagesets\WindowsLook.tga, in the middle left you'll see two images for the radiobutton, one with a clear circle (unselected) and another with a greenish dot (selected).

Another approach is what scriptkid suggested, such that in the pushbutton clicked event you change the look of the current button to "pressed down" and change the look of the other buttons to "normal".

[Chaos]

Hi!

I had that already in mind what you wrote. But, as far as I know is the radiobutton divided in 2 parts. one backgroundgraphic (which never changes) an a dot (which is visible when it's active).

But in my case I need 1 part. One that is visible if nothing happens, 1 that changes on over and one that active.

I really would like to create my own buttonelement but don't know how? Are there any tutorials to this issue? The look n' feel xml makes no sense to me.

Chaos

[Rackle]

Look through the articles within Skins - Tutorial For Artists as well as Create a CheckListboxItem

[scriptkid]

Hi again,

the radiobutton also has a Hover state! In the windows look for example note the greenish overlay when you hover.

So you can indeed write your own button, based on the Radiobutton, where you can change the label so that it looks like a button by using the entire width. Something like this might be a start. I have added html comments inside:

Code: Select all

<WidgetLook name="YourLook/MenuButton">
        <PropertyDefinition name="NormalTextColour" initialValue="FF000000" redrawOnWrite="true" />
        <PropertyDefinition name="HoverTextColour" initialValue="FF000000" redrawOnWrite="true" />
        <PropertyDefinition name="PushedTextColour" initialValue="FF000000" redrawOnWrite="true" />
        <PropertyDefinition name="DisabledTextColour" initialValue="FF888888" redrawOnWrite="true" />
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <!-- Use the entire space, so it overlaps the image like in a button-->
                    <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="LeftAligned" />
            </TextComponent>
        </ImagerySection>
        <ImagerySection name="normal">
            <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>
                <Image imageset="YourLook" image="MenuButtonNormal" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="LeftAligned" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="hover">
            <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>
                <Image imageset="YourLook" image="MenuButtonHover" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="LeftAligned" />
            </ImageryComponent>
        </ImagerySection>
        <!-- I renamed this section to 'Active' to match your design.-->
        <ImagerySection name="active">
            <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>
                <Image imageset="YourLook" image="MenuButtonActive" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="LeftAligned" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Normal">
            <Layer>
                <!-- A layer works like a 'stack'. In this case the image with the label on top.-->
                <Section section="normal" />
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="Hover">
            <Layer>
                <Section section="hover" />
                <Section section="label">
                    <ColourProperty name="HoverTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedNormal">
            <Layer>
                <Section section="normal" />
                <Section section="active" />
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedHover">
            <Layer>
                <Section section="hover" />
                <Section section="active" />
                <Section section="label">
                    <ColourProperty name="HoverTextColour" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>


The easiest apprauch might be to add this definition to your current looknfeel of choice. Don't forget to add the mapping to the .scheme file.

To add some more info: each looknfeel defines StateImagery and ImagerySection blocks. The first are defined/expected by cegui. In this case "Normal", "Hover", "SelectedNormal", "SelectedHover". The other are used in these state blocks. Note that "SelectedNormal" and "SelectedHover" use the same "active" Imagery block, meaning that it's also possible to add a different image for 'hovered while active'

HTH!

[scriptkid]

Oh, and about your other questions:

Can you check the logfile for deletion traces of your imagesets? Which OS do you use? On linux, memory might not be actually freed until a new alloc occures.

CE has returned at last and is getting up to speed again. But no promises about his contributions yet

[Chaos]

Hi!

Thank you very much!

I'll try it as soon as I'm back in office.

I haven't checked the logfile for deletionnotes, but the taskmanager shows the RAM-state which increases whith every period of destruction und loadprocess of an image. I'll check that and write again.

At the moment I'm using Windows XP. Btw: are there any known problems with CEGUI and it's Layouteditor with Vista?

Bye Chaos

[Chaos]

Nope,.. there arne't any deletionnotes... ;-( What else could it be?

What about my question about known problems with Vista?