Make a button act like a 'normal' windows button

Posted By: Kartoffel

Make a button act like a 'normal' windows button - 11/17/12 10:41

Hi there,

the title says it all, I want a button which acts like this:

clicked? -> wait for mouse left release -> mouse is over the button ? -> call button event -> else -> do nothing

I could do a kind of workaround for this but that'll be a lot of work to modify this workaround for every single button

Isn't there an easy way to do this?

Posted By: Ch40zzC0d3r

Re: Make a button act like a 'normal' windows button - 11/17/12 13:31

A simple func I wrote some time ago:

Code:

function DrawButton(var x, var y, var alpha, STRING *caption, STRING *functionName)
{
	var w = 187;
	var h = 40;
	static int wasPressed = 0;
	
	draw_textmode("Arial", 1, 18, alpha);
	
	if(mouse_pos.x >= x && mouse_pos.x <= x+w && mouse_pos.y >= y && mouse_pos.y <= y+h)
	{
		if(mouse_left)
		{
			draw_quad(button_bmap, vector(x, y, 0), nullvector, vector(w, h, 0), NULL, COLOR_YELLOW_DARK, alpha, 0);
			draw_text(caption, x + (w / 2) - (str_width(caption, arialMenu_font) / 2) + 2, y + (h / 2) - 6, COLOR_YELLOW_DARK);
			
			if(wasPressed == 0)
			{
				pButtonCallback = engine_getscript(_chr(functionName));
				if(ValidPointer(pButtonCallback))
				{
					pButtonCallback();
				}
			}
			
			wasPressed = 1;
		}
		else
		{
			wasPressed = 0;
			
			draw_quad(button_bmap, vector(x, y, 0), nullvector, vector(w, h, 0), NULL, COLOR_YELLOW, alpha, 0);
			draw_text(caption, x + (w / 2) - (str_width(caption, arialMenu_font) / 2), y + (h / 2) - 8, COLOR_YELLOW);
		}
	}
	else
	{
		draw_quad(button_bmap, vector(x, y, 0), nullvector, vector(w, h, 0), NULL, COLOR_WHITE, alpha, 0);
		draw_text(caption, x + (w / 2) - (str_width(caption, arialMenu_font) / 2), y + (h / 2) - 8, COLOR_WHITE);
	}
	
	draw_textmode("Arial", 0, 16, 100);
}

void ExitFunc()
{
	error("LOL");
}

DrawButton(50, 50, 100, "Quit the Game", "ExitFunc"); //HowTo

You just need to make a new variable and store mouse_left, and wait till its not pressed anymore, then execute the event

Posted By: Kartoffel

Re: Make a button act like a 'normal' windows button - 11/17/12 13:50

well, thanks a lot!
I haven't got the time right now to test it, but I'll let you know if it works for me.

Posted By: Yashas

Re: Make a button act like a 'normal' windows button - 11/17/12 14:48

Epic Coding , but isn't engine_getscript slow??
Function pointers are faster if I am correct.

Posted By: Kartoffel

Re: Make a button act like a 'normal' windows button - 11/17/12 14:53

...I thought the same, but the main idea of the function is more important

Posted By: Carlos3DGS

Re: Make a button act like a 'normal' windows button - 11/27/12 14:11

alternatively, you can search the forum for "lbgui", a great solution someone posted some time ago that does all that and much more. Basically he made everything work more "windows-like".

The thing I can remember I used in the past were windows buttons, sliders, combobox, checkbox, dropdown menu lists, textbox, progress bars, window-like panels, scrollbars, maximize/minimize buttons for window-panels, resizing panels, auto ajusting text objects to fit variable window size, and a loooong list of many similar things.

LBGUI is a great tool for 3dgs I recommend for anyone working on user interface elements that want a more windows-like or visual studio feel, behaviour, and functionality.

Posted By: Ch40zzC0d3r

Re: Make a button act like a 'normal' windows button - 11/27/12 15:51

Bro, lbgui uses for every element as example a button a new while-loop. Ever made a main-menu and drawed a serverlist? 20 fps on 1920x1080 reolution. My way is much better. Btw the millisecond it takes to get a functionpointer is not captchable by human eyes

its only called 1 time when you click the button!

Posted By: Carlos3DGS

Re: Make a button act like a 'normal' windows button - 11/27/12 19:05

I never used it for anything very complex so I never noticed that. If I ever make a very complex gui I will be sure to use this approach all I can and only use the more complex lbgui objects for stuff like re-formatting text for resizable panels.

Thanks for the info! You have probably helped me out alot to avoid headaches further down the line when my UI gets more complex and it would have been a pain to re-do everything later whith more UI elements. By the time I would have started to notice the fps drop in the future I would have tons of stuff to re-make. Thanks for the warning!
Cheers mate!

Posted By: Kartoffel

Re: Make a button act like a 'normal' windows button - 11/27/12 19:30

well I know lbgui but I don't use it because of the complexity (really hard to create a solid interface with it) and for performace reasons.

I wanted this for my own interface system.

Maybe - if some other people are interested in this - I'll post it in the "The Future"-Forum together with some other small GUI-improvements
which would be really helpful, like textboxes for easier text-input with auto scroll if the text is longer than the editbox.

At the moment I'm using pan_setstring(); and checkboxes together with a work-around as editboxes.
They work but they're far from perfect and this workaround is really annoying, inelegant and uncomfortable to use

Posted By: TechMuc

Re: Make a button act like a 'normal' windows button - 11/27/12 19:50

use cegui and do not use draw_quad / draw_text if you want to have performance.

http://www.opserver.de/ubb7/ubbthreads.php?ubb=showflat&Number=409292

Posted By: Kartoffel

Re: Make a button act like a 'normal' windows button - 11/27/12 20:03

Thank you very much, TechMuc. I'll check it out.

I just hate interface-systems which are too complicated.
It always seemed like years until I had created something usable with lbgui.
That's why I started creating my own.

(but I still think a better "built-in" gui-system for 3dgs would be great...)

Posted By: TechMuc

Re: Make a button act like a 'normal' windows button - 11/27/12 20:25

this is of course correct (even cegui will probably need a lot of work) but you need to use hardware acceleration.

Example: CeGUI uses the following renders:

Quote:

There are currently CEGUI renderer modules for Microsoft® DirectX® 9, 10 and 11, OpenGL, the Ogre engine, and the Irrlicht engine (CEGUI 0.7).

This is just muuuuuch faster and better than using standard windows apis

Posted By: Kartoffel

Re: Make a button act like a 'normal' windows button - 11/27/12 20:35

Well, as I've already said, I'll check cegui out. I heared of it before and it looks pretty promising.

Maybe (if I've got the time for it) I will create a simple editor for this interface system which will make creating UIs much easier.

In my opinion thats the best and easiest way to create good interfaces - by actually seeing the all the stuff while editing it
without adjusting vars all the time and having to restart the engine after every little change.

Anyway, thanks again for all the information!
Kartoffel

Posted By: Carlos3DGS

Re: Make a button act like a 'normal' windows button - 11/28/12 14:51

I agree on the built-in gui editor, that is something I have always felt is missing in 3dgs...
I mean, we have SED, MED (with a skin editor too), WED, GED... we need a GUI-ED
Creating interfaces is just so slow and painfull. It would be great to have tool to just select the type of item and place them, to be able to see the iterface object layout and edit on the fly. Something like an extremely simplified editor to create UI's like Visual Studio's approach.

Posted By: Kartoffel

Re: Make a button act like a 'normal' windows button - 11/28/12 15:54

Originally Posted By: Carlos3DGS

I can just agree with that but I'm not sure if creating another editor is the right thing to do (we've already got MED GED SED WED)
One powerful editor which can handle most of this stuff would be so awesome - but I know I that can't expect something like this in the next time

Posted By: krial057

Re: Make a button act like a 'normal' windows button - 11/28/12 16:06

If you feel like writing UI is a pain in the ass, take a look onto IMGUI's. I really fell in love with the technique
I was writing a GUI Framework based on it for 3dgs. Its easy to extend it, not a lot of code needed to create one and responsive.

For example to create a slider you only need one line and everything works(resizes with resolution, data get changed, ...)
From my framework for 3dgs:

Code:

//0: min health; 1000 max health.
//If auto-layout is on, the first parameter (UIRectC) is not needed
this->health = UIHSlider(UIRectC(20, 250, 400, 8), this->health, 0, 1000);

To extend it, you can simply write a function that contains functioncalls for other elements.
(The slider function f.i. just calls UIRepeatButton() and UIBackroundImage())