Best way to handle 'icon buttons' with varying images?

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

Azure
Just popping in
Just popping in
Posts: 13
Joined: Thu Dec 28, 2006 22:37

Best way to handle 'icon buttons' with varying images?

Postby Azure » Mon Jan 01, 2007 20:33

Lets say you were trying to display a sea of clickable/dragable icons/buttons, each with its own image (small, maybe 32x32), what would be the best way to do it?

Think along the lines of the action buttons in a game like warcraft. Each button can be moved/clicked, and each can have its own icon image. All icon images are stored in a single image 'atlas', but that would require CEGUI to do some kind of UV setting from code for the buttons/windows.. is that even possible?

Im working with Ogre, the onlything I could think of was to use a combination of CEGUI buttons (transparent) and ogre overlays underneath (to actually display the images/icons). Then 'link' the two together so they move as one...

Thanks for any advice

Twinsen
Just popping in
Just popping in
Posts: 1
Joined: Wed Dec 13, 2006 10:56

Postby Twinsen » Tue Jan 02, 2007 09:41

Just make a custom button object that takes in image names, size, position ect and make bttn alpha 0, position the staticimage over the top with relative sizes ect, on certian button events u trigger a change in the image ect, thats how i do it, works a treat :D

Pompei2
Home away from home
Home away from home
Posts: 489
Joined: Tue May 23, 2006 16:31

Postby Pompei2 » Tue Jan 02, 2007 15:20

I know warcraft good, but i'm not quite sure about what you mean with the buttons being able to move/drag. But I just wrote this post that could at least help you to create image buttons:
http://www.cegui.org.uk/phpBB2/viewtopic.php?t=2226

Azure
Just popping in
Just popping in
Posts: 13
Joined: Thu Dec 28, 2006 22:37

Postby Azure » Tue Jan 02, 2007 20:39

But wait youre talking about using a single image for each icon. What if you had HUNDREDS of different icon pictures, youd need to combine them all into a giant 'icon image atlas' (try and make a WoW macro to see what im talking about). How could cegui support that? It would require some kind of 'uv manipulation' to set the proper image.

Pompei2
Home away from home
Home away from home
Posts: 489
Joined: Tue May 23, 2006 16:31

Postby Pompei2 » Tue Jan 02, 2007 20:59

I still only get it 1/2 ^^ explain me with wc3, i don't know WoW ...
You mean that the button A has graphic A, but now the user selects another unit so the button A has to be replaced by another button B ? or does the button just have to become another graphic X ??
If it's the second one, you can do it so:

Code: Select all

myButtonA->setProperty( "NormalImage",     Value="set:FTSUI image:btnNormal" );
myButtonA->setProperty( "HoverImage",      Value="set:FTSUI image:btnHover"  );
myButtonA->setProperty( "PushedImage",     Value="set:FTSUI image:btnPushed" );
myButtonA->setProperty( "DisabledImage",   Value="set:FTSUI image:btnDisabl" );


For the first one, you could create all these buttons in an array or so and then when the user selects another unit, you hide the button A, show the button B and set its position accordingly.

LennyH
Quite a regular
Quite a regular
Posts: 92
Joined: Thu Nov 30, 2006 20:50

Postby LennyH » Tue Jan 02, 2007 21:21

Azure wrote:But wait youre talking about using a single image for each icon. What if you had HUNDREDS of different icon pictures, youd need to combine them all into a giant 'icon image atlas' (try and make a WoW macro to see what im talking about). How could cegui support that? It would require some kind of 'uv manipulation' to set the proper image.


This is all an imageset is... or somehow I am misunderstanding. An imageset is a single image file with a bunch of images inside it. Then there is the .imageset file itself which defines a position and size for anything in that image and gives it a name that can then be referenced in the CEGUI system.

By using properties, you can then create any buttons with which ever image, and set that property whenever you want to cause the button image to change.

Azure
Just popping in
Just popping in
Posts: 13
Joined: Thu Dec 28, 2006 22:37

Postby Azure » Tue Jan 02, 2007 21:53

Well this would have to be a separate imageset form the main 'gui' image set, is that possible? I dont want to have to include 8 billion icon images for all my possible buttons inside my main gui image set.

And another problem, its silly to make a unique button for each icon, as the onlything that is different is the icon image itself. In otherwords, in order to create a 'hover, pushed, ect...' button for EVERY possible icon image would be a waste. Is ther anyway to 'reuse' the button 'hover, pressed, ect...' for all the different images? This is where I was thinking of using a simple 'transparent button', that you simply lay ontop of a default window (which is what actually has the icon image). Is there a better way to do this?

Rackle
CEGUI Team (Retired)
Posts: 534
Joined: Mon Jan 16, 2006 11:59
Location: Montréal

Postby Rackle » Tue Jan 02, 2007 21:57

You can use a scrollable pane to display multiple images and scroll through them or "reuse" a few buttons and change which image is being displayed on them. A solution like that is presented here: http://www.ogre3d.org/wiki/index.php/CEGUIBuildDialog Be warned that it is more complex than what I'm talking about: it's displaying dynamic images rather than static images. But still, the principle is similar enough.

However you want to drag and drop those icons. For THAT aspect you have to look into:
http://www.cegui.org.uk/phpBB2/viewtopic.php?t=1040

Currently we're all waiting on that Rackle guy to stop partying and to get back to work on a drag and drop solution...

Azure
Just popping in
Just popping in
Posts: 13
Joined: Thu Dec 28, 2006 22:37

Postby Azure » Tue Jan 02, 2007 22:06

Ah ok thats pretty clever. Use a scrollable pane, set it to the exact size as one icon, disable the 'scroll bars', and attach my 'icon atlass' to it. Then I will have manual control over which icon is 'displayed' by scrolling the pane.

But of course then comes the problem of how you 'click' such a pane (since its not a button). Should I just lay a transparent button ontop of the scrollable pane?

Im not worried about drag n drop, even if I have to do some grunt work in my code im sure I can get something going, I was more worried about how to display the icons/buttons.

*hey you could use such a scrolling pane technique with a 'transparent button overlay' to create all kinds of animated buttons (or any kind of animated windows really). I thought CEGUI didnt support animations :p

I hope it works as good as you say, gonna whip up some tests...

Pompei2
Home away from home
Home away from home
Posts: 489
Joined: Tue May 23, 2006 16:31

Postby Pompei2 » Tue Jan 02, 2007 22:14

Azure wrote:Well this would have to be a separate imageset form the main 'gui' image set, is that possible? I dont want to have to include 8 billion icon images for all my possible buttons inside my main gui image set.

This is possible, I explained it in the other post that i gave you the link ;)

Azure wrote:And another problem, its silly to make a unique button for each icon, as the onlything that is different is the icon image itself.

If you do like i told you in the previous post, you only create X buttons and change their images.

Azure wrote:In otherwords, in order to create a 'hover, pushed, ect...' button for EVERY possible icon image would be a waste.

huh? Ahhh you mean you want one general button that has a frame, and instead of putting text onto it, you put a picture onto it, like the windows buttons with pictures in it ??

Azure
Just popping in
Just popping in
Posts: 13
Joined: Thu Dec 28, 2006 22:37

Postby Azure » Tue Jan 02, 2007 22:19

huh? Ahhh you mean you want one general button that has a frame, and instead of putting text onto it, you put a picture onto it, like the windows buttons with pictures in it ??


Exactly, so I think Rackles solution of using a scrolling pane to set the image would work best eh?

LennyH
Quite a regular
Quite a regular
Posts: 92
Joined: Thu Nov 30, 2006 20:50

Postby LennyH » Wed Jan 03, 2007 14:42

Azure wrote:
huh? Ahhh you mean you want one general button that has a frame, and instead of putting text onto it, you put a picture onto it, like the windows buttons with pictures in it ??


Exactly, so I think Rackles solution of using a scrolling pane to set the image would work best eh?


Why?

If you make a button have a property, say:

Code: Select all

<PropertyDefinition name="BackgroundImage" initialValue="set:WindowsLook image:ButtonBackground" redrawOnWrite="true" />


and in the look feel where the background is defined, you would change it to be:

Code: Select all

<ImageProperty name="BackgroundImage" />


then, in your code, you can create one button and set it's background image - in this case, this would be your icon - using:

Code: Select all

YourButton->setProperty( "BackgroundImage", "set:YourSkin image:YourIcon" );


I guess I am still not understanding how any other idea would be better, at the moment.


Return to “Help”

Who is online

Users browsing this forum: No registered users and 22 guests