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

[Azure]

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 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

[Pompei2]

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]

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]

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]

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]

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]

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]

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]

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

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.

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]

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]

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.