Buttons for Dummies!

[recneps]

I saw someone make a post in AsianSensation's "Suggest a Tutorial" post and thought i'd clarify it for the people.

First off, lets see what the Turing Reference Says about buttons. :

Quote:

Syntax GUI.CreateButton (x, y, width : int, text : string,
actionProc : procedure x ()) : int
GUI.CreateButtonFull (x, y, width : int, text : string,
actionProc : procedure x (), height : int, shortcut : char, default : boolean) : int


Description Creates a button and returns the button's widget ID.
The button widget is used to implement a textual button. When you click on a button, the button's action procedure is called. If a button is given a short cut, then entering the keystroke will cause the action procedure to be called. It will not visibly cause the button to depress.



Two Buttons
The x and y parameters specify the lower-left corner of the button. The width parameter specifies the width of the button. If width is less than the size necessary to display the button, the button is automatically enlarged to fit the text. The text parameter specifies the text to appear in the button. The actionProc parameter is the name of a procedure that is called when the button is pressed.

For GUI.CreateButtonFull, the height parameter specifies the height of the button. If height is less than the size necessary to display the button, the button is automatically enlarged to fit the text. The shortcut parameter is the keystroke to be used as the button's shortcut. The default parameter is a boolean indicating whether the button should be the default button. If there is already a default button, and default is set to true, then this button becomes the new default button.

Since this is "Buttons for Dummies", forget the CreateButtonFull. Got that? Bye! So now, we have The syntax, the description, and the explanation of the syntax.

So let me clarify. this is how you use the GUI.CreateButton command.

First, tell Turing you're gonna be using GUI, place this line at the top of your program.

code:

import GUI

Next, create procedures containing all the work you want that button to do, like....

code:

procedure hello put "Hello User, you have clicked Button #1!" end hello procedure hi put "Hello User, you have clicked Button #2!!" end hi

Next, declare the button names as variables.

code:

var button1 :int var button2:int

and Turn those variables into buttons!

code:

var button1:int:=GUI.CreateButton var button2:int:=GUI.CreateButton

And finally, fill in the parameters for them.

code:

var button1:int:=GUI.CreateButton(x,y,0,"Button Text",procedure) var button2:int:=GUI.CreateButton(x,y,0,"Button Text",procedure)

Where x and y are the bottom left corner of the button, and "0 is the width of the button( note: The width will be incresed if the button text is larger than the width of the button specified) "ButtonText" is the text on the button's face, and procedure is the procedure you named above that you want the button to call when being pressed.

Finally, you need to have a little thing in there to keep the program going until a button is pressed, otherwise it would just draw the button, and then finish the program. so we add:

code:

loop exit when GUI.ProcessEvent end loop

And thats it! So now we put it all together......

code:

import GUI setscreen("graphics:300;125") procedure hello locate(1,1) put "Hello User, you have clicked Button #1!" end hello procedure hi locate(1,1) put "Hello User, you have clicked Button #2!!" end hi var button1:int:=GUI.CreateButton(25,25,0,"Button 1",hello) var button2:int:=GUI.CreateButton(25,50,0,"button 2",hi) loop exit when GUI.ProcessEvent end loop

[Paul]

Hey! Are you implying Im a dummy? (j/k), thanks for the tutorial +bits. Oh yea, the import is lowercase, and the text writes over the buttons. What does GUI.ProcessEvent do exactly? Does it call anything with GUI in it? Thats why I don't know how to clear it.

[recneps]

oops! forgot to make those changes! Its fixed now. And GUI . Process Event... if you break it down, it literally starts an infinite loop, UNTIL that GUI processes something (the button click) Get it?

[Paul]

Oh, so when you do this:

code:

var button1:int:=GUI.CreateButton var button2:int:=GUI.CreateButton

The buttons are automatically drawn?

[Delta]

Heck no!
Writing the :
var button1:int:=GUI.CreateButton
var button2:int:=GUI.CreateButton

does absolutely nothing, besides giving you an error of course... I'm not sure why he would put that in there sure its for dummies but still it gets ppl confused

And ya without the GUI.ProcessEvent your GUI commands won't work... GUI.ProcessEvent processes and event such as keyboard or mouse events
(clicks, key strokes) if one of these events call a widget(your button/textfield/gui stuff) then it works...

[AsianSensation]

good attempts at tutorials

now if everyone begins to write a tutorial, we'll soon have enough to get all kinds of people at all different levels started.

here, have some bits.

+35 bits

[shorthair]

i think there is a thread about how to reset , the gui event , so that you can have multiple buttons in differnt parts of the program , but in hte turing 5 documentation there is a F9 about a command that resets it automatically , its a good update , if i had turing handy id give it to you, but im sure someonne here knows what it is

[recneps]

Well, i wrote it in pieces, set by step of what you have to do, so that was the first part

code:

var button1:int:=GUI.CreateButton var button2:int:=GUI.CreateButton

and then i went on to tell you you needed to add things to it, like:

code:

var button1:int:=GUI.CreateButton(x,y,width,"text",proc) var button2:int:=GUI.CreateButton(x2,y2,width2,"text2",proc2)

Understand now? the button will be drawn after you add in the parameters, x and y positions of the bottom left corner, height(automatically expands to fit the text if needed), the text on the button face, and the procedure the button calls when clicked.

P.S. Thanks for bits! I'm thinking of more tutorials that people really need

[the_short1]

VERY COOL!!!! i was just thinking on asking Templest for help on this ssince hes the Aclaimed master GUI!

i want to fix my unit converter with each button and have a pop up area show the buttons FULL NAME!!!!

Id give you bits... but i saving up for a email now...only 1900 to go... (i have lots in my title)

[the_short1]

btw is there a specific command for making a rounded button (oval) for my unit converter words.... the normal ones are too big....even with just letter a in button and width of 0

or should i just make a Menu for the Base and new unit of measure? Thanks,.....(I AM GUI NOOB)

[recneps]

I dont believe there is a command for round buttons, if there is, then I dont know

but you could make your own buttons , they just wouldnt look as nice
like

code:

drawoval(100,100,10,10,7) buttonwait("down",x,y,button,updown)%Or something like that. :p if x>90 and x<110 and y>90 and y<110 then put "You clicked the oval. yay! Call a procedure here." end if

[Andy]

code:

setscreen ("graphics:120;120,nobuttonbar,position:center;center") var mx, my, mb : int var r := 60 loop     mousewhere (mx, my, mb)     if mb = 0 then         drawfilloval (60, 60, r, r, blue)     end if     if mb = 1 and mx ** 2 + mb ** 2 <= r ** 2 then         drawfilloval (60, 60, r, r, red)     end if end loop

circle button

[Paul]

Thanx dodge, I've always wondered how to do a circle button, but there isn't a command for a GUI round or circle button is there?

[Andy]

not that i noe of...

[SuperGenius]

Thank you for this tutorial, because at the rate my comp sci class moves, we might get to processes and procedures by June.

I ran the code from the first post( You pressed button 1 / You pressed button 2) and when I closed the window another window opened called

Quote:

WidgetModule.tu

What is this window for?