Image Buttons

[syngen101]

Hi,

I am having trouble implementing image buttons.
I read the tutorial on http://www.cegui.org.uk/wiki/index.php/ ... ageButtons to figure out how to make image buttons

this is my code:

Code: Select all

CEGUI::OgreCEGUIRenderer* mGUIRenderer = new CEGUI::OgreCEGUIRenderer(mWindow,Ogre::RENDER_QUEUE_OVERLAY,false,3000,mSceneManager);
    CEGUI::System* mGUISystem = new CEGUI::System(mGUIRenderer);
    CEGUI::SchemeManager::getSingleton().loadScheme((CEGUI::utf8*)"TaharezLookSkin.scheme");
    mGUISystem->setDefaultMouseCursor((CEGUI::utf8*)"TaharezLook", (CEGUI::utf8*)"MouseArrow");
    CEGUI::MouseCursor::getSingleton().setImage(CEGUI::System::getSingleton().getDefaultMouseCursor());
    //initialising ninjabutton
    CEGUI::ImagesetManager::getSingleton().createImageset( "NinjaButton.imageset" );
    CEGUI::Imageset *m_pImageSet = CEGUI::ImagesetManager::getSingleton().getImageset( "NinjaButton" );

    CEGUI::WindowManager *win = CEGUI::WindowManager::getSingletonPtr();
    CEGUI::Window *sheet = win->createWindow("DefaultGUISheet", "CEGUIDemo/Sheet");

    CEGUI::Window *start = win->createWindow("TaharezLook/Button", "CEGUIDemo/StartButton");
    start->setText("Start Game");
    start->setSize(CEGUI::UVector2(CEGUI::UDim(0.15, 0), CEGUI::UDim(0.1, 0)));
    start->setPosition(CEGUI::UVector2(CEGUI::UDim(0.8, 0), CEGUI::UDim(0.8, 0)));

    CEGUI::Window *pane = win->createWindow("TaharezLook/ScrollablePane", "CEGUIDemo/Pane");
    pane->setSize(CEGUI::UVector2(CEGUI::UDim(0.2, 0), CEGUI::UDim(1, 0)));

 CEGUI::Window *popup2 = win->createWindow("TaharezLook/FrameWindow","CEGUIDemo/Popup2");
    popup2->setText("information about Ninja");
    popup2->setSize(CEGUI::UVector2(CEGUI::UDim(0.5, 0), CEGUI::UDim(0.5, 0)));
    popup2->setPosition(CEGUI::UVector2(CEGUI::UDim(0.3, 0), CEGUI::UDim(0.3, 0)));
    popup2->setVisible(false);

    CEGUI::Window *popupText2 = win->createWindow("TaharezLook/StaticText","CEGUIDemo/PopupText2");
    popupText2->setText("This window contains information about ninjas");
    popupText2->setSize(CEGUI::UVector2(CEGUI::UDim(1, 0), CEGUI::UDim(1, 0)));

    CEGUI::Window *w = CEGUI::WindowManager::getSingleton().loadWindowLayout( "NinjaButton.layout" );
    w->setPosition( CEGUI::UVector2( CEGUI::UDim(0.05,0), CEGUI::UDim(0,0) ) );
   

    sheet->addChildWindow(pane);
    sheet->addChildWindow(start);
    sheet->addChildWindow(popup2);
    popup2->addChildWindow(popupText2);
    pane->addChildWindow(w);

    mGUISystem->setGUISheet(sheet);


I followed the steps as of the tutorial listed above to create the imageset file, and layout file but im getting a runtime error:

Code: Select all

C++ exception: CEGUI::RendererException at memory location 0x002ac0e8..


Is this because the compiler cannot find the imageset, or layout file. Or is there something else I am doing wrong
Here is the imageset and layout file if this would help you answer me

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<Imageset Name="NinjaButton" imagefile="NinjaButton.tga">
   <Image Name="btnNormal" XPos="2" YPos="3" Width="94"    Height"59" />
   <Image Name="btnHover" XPos="2" YPos="66" Width="94"    Height"59" />
   <Image Name="btnPushed" XPos=100" YPos="3" Width="94"    Height"59" />
   <Image Name="btnDisabl" XPos="2" YPos="3" Width="94"    Height"59" />
</Imageset>


layout file:

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?> <GUILayout> <Window Type="TaharezLook/ImageButton" Name="NinjaButton">
<Property Name="UnifiedPosition" Value="{{0,0},{0,0}}" />
<Property Name="UnifiedSize" Value="{{0,64},{0,20}}" />
<!-- Here we choose what images to take. set:THEButton means they are stored -->
 <!-- in the imageset named THEButton and image:btnNormal specifies wich image it is. -->
<Property Name="NormalImage" Value="set:NinjaButton image:btnNormal" /> <Property Name="HoverImage" Value="set:NinjaButton image:btnHover" /> <Property Name="PushedImage" Value="set:NinjaButton image:btnPushed" /> <Property Name="DisabledImage" Value="set:NinjaButton image:btnDisabl" />
 </GUILayout>


Thanks in advance

[syngen101]

Also i have done nothing with the original TarahezLook files from the ogre tutorials. Do i have to add something to these files to incorporate my imageButtons?

[Pompei2]

First: ALWAYS surround your CEGUI code by a try/catch block, so in case of an error, it doesn't look like a crash!

something like:

Code: Select all

try {
// (Parts of) Your CEGUI code
}catch(CEGUI::Exception &e){
printf("CEGUI Error: %s", e.getMessage().c_str());
}

Then you will see why that happens. also, ALWAYS take a look at the logfile CEGUI.log, there may be interesting error messages.

Now, at a first glance I don't find anything obviously wrong with your codes. Please see if you get an exception.

[syngen101]

the error i get when putting a try and catch statment around

Code: Select all

CEGUI::ImagesetManager::getSingleton().createImageset("NinjaButton.imageset" );


is:

Code: Select all

CEGUI Error: Imageset::xmlHandler::startElement - an unexpected error occured while creating a Texture object from file ''Texture: _cegui_ogre_0: Loading 1 faces <PF_A8R8G8B8, 256x256x1> with 0 generated mipmaps from Image. Internal format is PF_A8R8G8B8, 256x256x1.


Can someone please help me understand what this means, thank you

[CrazyEddie]

Hi,

It means that for some reason the texture could not be created from the file. Perhaps it can't find the image file?

Having looked at the earlier posts, in your Imageset definition, you have 'imagefile' whereas it should be 'Imagefile' - it's case sensitive.

CE.

[syngen101]

Thank you very much, i dont believe that was a spelling mistake ><
One more question tho (hopefully)
When I changed the spelling I am getting a CEGUI::UnknownObjectException at this line:

Code: Select all

CEGUI::Imageset *m_pImageSet = CEGUI::ImagesetManager::getSingleton().getImageset( "NinjaButton" );


I as shown in the code above i haved named the imageset "NinjaButton" in the .imageset file so I cannot see what the problem with this is.

Thanks in advance and for the help so far

[syngen101]

To be more precise with my question I put a try and catch around the line of code in question and got the following error:

Code: Select all

CEGUI Error: ExpatParser::ParseXMLFile - XML Parsing error 'not well-formed <invalid token>' at line 4CEGUI Error: Imageset::getImageset - No Imageset named 'NinjaButton' is present in the system.


Also is it a problem that I referenced the same image for normal button and disabled button, because i dont really need the disabled function but could add in later if needed.

[CrazyEddie]

Code: Select all

CEGUI Error: ExpatParser::ParseXMLFile - XML Parsing error 'not well-formed <invalid token>' at line 4CEGUI Error: Imageset::getImageset - No Imageset named 'NinjaButton' is present in the system.


There appears to be two errors there

The first one seems to indicate that there is something wrong with some XML. Looking back at the earlier post, the layout seems to be missing the closing </Window> tag; not sure if that's where the error is emanating from.

After fixing the above, if you still get the error with regards to the unknown Imageset, please post the CEGUI.log.

Also is it a problem that I referenced the same image for normal button and disabled button, because i dont really need the disabled function but could add in later if needed.

No, that should be fine.

CE

[syngen101]

Sorry just realised that in my .layout file I have set the type to TarahezLook/ImageButton. I have not changed the TarahezLook files at all so i guess it doesnt include the ImageButton type. What needs to be done if this is the problem.

Sorry about all the noobish questions im new to OGRE, CEGUI and XML. So im moving pretty slow atm before i can start making some cool stuff

Thanks in advance

[syngen101]

I changed the .layout file to have </window> call as shown below:

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?> <GUILayout> <Window Type="TaharezLook/ImageButton" Name="NinjaButton">
<Property Name="UnifiedPosition" Value="{{0,0},{0,0}}" />
<Property Name="UnifiedSize" Value="{{0,64},{0,20}}" />
<!-- Here we choose what images to take. set:THEButton means they are stored -->
 <!-- in the imageset named THEButton and image:btnNormal specifies wich image it is. -->
<Property Name="NormalImage" Value="set:NinjaButton image:btnNormal" /> <Property Name="HoverImage" Value="set:NinjaButton image:btnHover" /> <Property Name="PushedImage" Value="set:NinjaButton image:btnPushed" /> <Property Name="DisabledImage" Value="set:NinjaButton image:btnDisabl" />
</Window>
 </GUILayout>


but when I include the line:

Code: Select all

CEGUI::ImagesetManager::getSingleton().createImageset("NinjaButton.imageset" );


I am getting the following error when encased in a try and catch

Code: Select all

CEGUI Error: ExpatParser::ParseXMLFile - XML Parsing error 'not well-formed <invalid token>' at line 4


I was wondering if this was from line 4 of my .layout file:

Code: Select all

<Property Name="UnifiedSize" Value="{{0,64},{0,20}}" />


I dont know what the values for unified size exactly mean but i guess i need to make this the same size as my button in the .imageset file shown in a previous post.

[gring]

Try changing these lines...

Height"59" /> to Height="59" />

Will at least remove one bug..

HTH

G

[syngen101]

Hi thanks for that but I am still getting the same error.

[syngen101]

Just realised another stupid error of mine. I had =100" in the imageset file on one of the buttons. Now my program compiles and with the following code:

Code: Select all

    try{
    CEGUI::ImagesetManager::getSingleton().createImageset("NinjaButton.imageset" );
    CEGUI::Imageset *m_pImageSet = CEGUI::ImagesetManager::getSingleton().getImageset( "NinjaButton" );
    }catch(CEGUI::Exception &e){
      printf("CEGUI Error: %s", e.getMessage().c_str());
    }
CEGUI::WindowManager *win = CEGUI::WindowManager::getSingletonPtr();
    CEGUI::Window *sheet = win->createWindow("DefaultGUISheet", "CEGUIDemo/Sheet");
 CEGUI::Window *w = CEGUI::WindowManager::getSingleton().loadWindowLayout( "NinjaButton.layout" );
    w->setPosition( CEGUI::UVector2( CEGUI::UDim(0.05,0), CEGUI::UDim(0,0) ) );
    w->setVisible(true);
sheet->addChildWindow(w);
mGUISystem->setGUISheet(sheet);


I get no ouput of any kind into the window
There are no errors either so I dont know what I am doing wrong.

[syngen101]

I solved my problem, In my .layout file i had TarahezLook/imageButton for type, in the TarahezLook files there is no such mention of this type so I changed it to be TarahezLook/Button and it worked.

Thank you for all of your help

[Jamarr]

If you look at the tutorial, or in the TaharezLook.looknfeel file, it clearly shows the widget type as "ImageButton" not "imageButton".

The reason it still works if you use "Button" is because it just so happens that in the TaharezLook.looknfeel, the "Button" widget definition is nearly identicle to "ImageButton", except it has a label. If you tried to switch to the WindowsLook.looknfeel, it would fail because the "Button" definition there does not define any image properties. The important thing I'm trying to get across here is that you should try to understand the reasoning behind why something works, and not just accept trial & error conclusions - it will save you time in the long run.

In any case I think the obvious outcome of all this, is that whenever you are hand-creating or hand-modifying xml files you should double-check all of your work. You should also run the file through /at least/ an xml-syntax parser, if not a full blown Validator using a schema. This really should be common sense, but everyone always skips this (including me :/).

I also have to ask, why not just save yourself the headache and just use the CELayoutEditor? All you would have had to do is click Add->ImageButton, set your image-state properties, and be done with it.