Small square button or image as button

Started by BasV, 07 May 2015, 14:02:00

BasV

Hey everyone,

I'm trying to use a small button that only has "+" or "-" as text on it. However, it defaults to a rather large size, I'd prefer it to be 20x20 pixels, for example. Do  I need to use images instead? Or is there a way to force buttons to a certain size?

Another thing: I'm trying to use .conf files as much as possible, but I can't really find a lot of documentation on this. For example, I'm trying to get AnimatedPicture working (as substitute for buttons) but I have no clue how to add frames using these config files. AnimatedButton seems to be unavailable in .conf files altogether?

Cheers!

texus

Quoteit defaults to a rather large size
I'm not sure if you mean the button itself or the text on top of it.
You can change the button with the setSize function and the text size with the setTextSize function.

Quoteseems to be unavailable in .conf files altogether
The idea of config files is that they determine the theme, the way widgets look. So classes like AnimatedPicture do not load from it, since they have no "theme", it is just several frames op pictures. So you can only add those frames from code.

BasV

Hi,

Thanks for the reaction, I'm sorry for being unclear about the buttons' size: What I meant was the width - I want a 20x20 pixels button, maybe without text. Alternatively, I could do with a picture that has a mouse over state, but I'm guessing this would be much more work if done from the config files (that's why I was looking into animated pictures)

In practice, my button all are 'long' horizontally - even with no text in them.

Cheers!

BasV

Ah, damn.. I figured out my mistake! I was using a config file for my buttons, and without realising they already loaded in an image. I guess that's why it's so wide.. Sorry!

texus

I understand what you mean now.
The buttons in the Black theme were indeed not meant to be square. They have a minimum width.
(in v0.7-dev I changed the behavior so that if you ask for 20x20 the image will display as 20x20. It will look really bad since the image is not made for it, but at least it does what you ask)

In order to make the button scalable, it is divided in a L (left), M (middle) and R (right) part. You can clearly see this in the Black.conf file. The left and right parts are squares here, and they will keep their ratio when scaled, only the middle part will stretch. So the button is always at least twice as width as it is high.

You could fix it in the Black theme by changing the lines in these forms:
NormalImage_L = "Black.png" ( 0, 25, 50, 50)
NormalImage_M = "Black.png" ( 50, 25, 100, 50)
NormalImage_R = "Black.png" (150, 25, 50, 50)


by this
NormalImage = "Black.png" ( 0, 200, 50, 50)
(the numbers between brackets is always left, top, width, height)

But it won't look good, so you best use your own images.

BasV

Yes, I'm now using my own images. Thanks! I find it a bit weird that I get an error message if I don't use the left and right parts, but to fix it I just defined the leftmost pixel column as left, and the rightmost pixel column as right ;)

Cheers!

texus

Are you perhaps specifying the middle part? If you specify the property ending with "_M" then tgui will also expect to find the "_L" and "_R" properties. But if you don't use any postfix then you should only have to pass a single image and it should not complain about missing left and right parts.

BasV