34 replies to this topic

[Engineer]

Hello and welcome to my first tutorial ever. This is about creating buttons as title tells you. />

So you want to create buttons?
We first have to collect some information before continueing:
xMin = the first position on the horizontal axis
xMax = the last postion on the horizontal axis

yMin = the first position on the vertical axis
yMax = the second position on the vertical axis

Here is a tool-program to help you out, it is straight forward what you should do..
The program ( Obviously run on an advanced computer ) can be downloaded here. Or you can do pastebin get ywa52Eh4

Now you have your values you have to think ifyou want to get multiple buttons. If you want multiple buttons you need their values as well.
If I look at myself, I use multiple buttons or none, so I will start with multiple buttons.

Note: If you are making one button, also read multiple buttons because I am recalling items from them

Multiple buttons
Let's go and process your values. I like them to put them in a table so you have later an easier way of determining which button is clicked.
So I tend als to use a "template" so you can easily look up what you have done

local tCoords = {
  -- xMin, xMax, yMin, yMax, representable string
  -- That string is easier for debugging, thats for later
  [1] = { 12, 16, 8, 10, "X" }, -- button 1: xMin = 12, xMax = 16, yMin = 8, yMax = 10, representable string = X
  [2] = { 1, 2, 1, 19, "OK" },
  -- etc..
}

What you always have to do next is use this:

local evt, button, x, y = os.pullEvent("mouse_click")  -- In the terminal
local evt, side, x, y = os.pullEvent("monitor_touch")   -- on your monitor

You have to do this because it sits and wait until you touch the monitor or click your terminal. You also get your values to compare with of this.

So now we have our values and we can see our positions we clicked or touched on, we can start determining wich button we actually clicked.
So first we want to do a for-loop, and that for the length of the table tCoords. We will do this because then we can get all values of all the current buttons.
You get the length of a table by doing:

#<your table name>

If you don't know how to do a for-loop, here it is:

for i = 1, #tCoords do
   --code
end

The variable i is the most used variable for this. Than you say from <number>, <tonumber>, <step or default 1> do myCode end
So in our for-loop we loop through number 1 to 2, because we have 2 buttons in our table.

This is the total code we will use for determining our button, I will explain the loop later.

local tCoords = {
  -- xMin, xMax, yMin, yMax, representable string
  -- That string is easier for debugging, thats for later
  [1] = { 12, 16, 8, 10, "X" }, -- button 1: xMin = 12, xMax = 16, yMin = 8, yMax = 10, representable string = X
  [2] = { 1, 2, 1, 19, "OK" },
  -- etc..
}

local evt, button, x, y = os.pullEvent("mouse_click")  -- In the terminal

for i = 1, #tCoords do
	 if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
			button = i
			break
	 end
end

So basicly we say in the for loop:
if the x is bigger or equal than our xMin and smaller or equal to our xMax ( also for yMin and yMax )
then we say, our button is the current loopnumber if that makes sense
so we break out of this loop because we have found our button.

If no button has been found then nothing happens. Then we have not found our button.

Now for debugging, now we have variable button ( if we found a button that matches our xMin, xMax, yMin, yMax ) so we can easily fill in button:

if debug and button then -- only if button is not nil and debug is enabled
	print( "Found button: " .. tCoords[button][5] )
end

And at this point the representable string makes sense, right? />

A good example is my Basic Calculator, it uses the same code for determining buttons! You can check the code overthere.

Single button
This time we don't have to put our values in a table, we can use an good old if statement. So your code should look like this:

local evt, button, x, y = os.pullEvent("mouse_click")
if x >= [your xMin] and x <= [your xMax] and y >= [your yMin] and y <= [your yMax] then
   -- your code
end

Well I should not have to explain much about this, because you have read multiple buttons aswell right?

This should wrap up my tutorial,

If you find any spelling errors or if you have a question post it below!
Also feedback is appreciated.

Engineer

Also check out LBPHacker's button API, now you know the logic behind it and can use this:
http://www.computerc...9382#entry99382

Edited by Engineer, 28 May 2013 - 01:33 PM.

[Genclone]

Thanks this will help a lot with my Os since i was wondering how to do something like this.

[Engineer]

 Genclone, on 12 March 2013 - 04:20 AM, said:

Thanks this will help a lot with my Os since i was wondering how to do something like this.

Im glad I could help

[Spongy141]

After reading your tutorial I tried to make mutilple button options for my OS, and the multuple buttons don't work, and end up over lapping them sleves, how to you prevent buttons end function to interact with the other. Like

local tCoords = {
  [1] = {1, 2, 3, 4, "Login" },
  [2] = {10, 20 , 30 , 40, "Create Account" },
}

for i = 1, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
	button = i
	login()  --the function were my login feature is.
	break
  end
end

for i = 2, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
	button = i
	setup()  --the function were my setup feature is.
	break
  end
end

And everytime they either cancel each other out, or when I click login, it goes to the setup function... How do I fix it?

[LBPHacker]

Try this - It's more portable

local tCoords = {
  [1] = {1, 2, 3, 4, "Login", func = login}, -- hooks up "login" function to this button
  [2] = {10, 20 , 30 , 40, "Create Account", func = setup}, -- hooks up "setup" function to this button
}

for i = 1, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
		tCoords[i].func() -- executes the function hooked to the button
		break
  end
end

[cant_delete_account]

 LBPHacker, on 17 March 2013 - 07:48 AM, said:

Try this - It's more portable

local tCoords = {
  [1] = {1, 2, 3, 4, "Login", func = login}, -- hooks up "login" function to this button
  [2] = {10, 20 , 30 , 40, "Create Account", func = setup}, -- hooks up "setup" function to this button
}

for i = 1, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
		tCoords[i].func -- executes the function hooked to the button
		break
  end
end

You forgot the parentheses at the end of .func, it should be:

tCoords[i].func()

[Yopu]

Very nice work. I've been trying to wrap my brain around this kind of thing for a while.

[Engineer]

 Spongy141, on 17 March 2013 - 06:36 AM, said:

After reading your tutorial I tried to make mutilple button options for my OS, and the multuple buttons don't work, and end up over lapping them sleves, how to you prevent buttons end function to interact with the other. Like

local tCoords = {
  [1] = {1, 2, 3, 4, "Login" },
  [2] = {10, 20 , 30 , 40, "Create Account" },
}

for i = 1, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
	button = i
	login()  --the function were my login feature is.
	break
  end
end

for i = 2, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
	button = i
	setup()  --the function were my setup feature is.
	break
  end
end

And everytime they either cancel each other out, or when I click login, it goes to the setup function... How do I fix it?

 LBPHacker, on 17 March 2013 - 07:48 AM, said:

Try this - It's more portable

local tCoords = {
  [1] = {1, 2, 3, 4, "Login", func = login}, -- hooks up "login" function to this button
  [2] = {10, 20 , 30 , 40, "Create Account", func = setup}, -- hooks up "setup" function to this button
}

for i = 1, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
		tCoords[i].func -- executes the function hooked to the button
		break
  end
end

 thesbros, on 17 March 2013 - 10:17 AM, said:

 LBPHacker, on 17 March 2013 - 07:48 AM, said:

Try this - It's more portable

local tCoords = {
  [1] = {1, 2, 3, 4, "Login", func = login}, -- hooks up "login" function to this button
  [2] = {10, 20 , 30 , 40, "Create Account", func = setup}, -- hooks up "setup" function to this button
}

for i = 1, #tCoords do
  if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords[i][3] and y <= tCoords[i][4] then
		tCoords[i].func -- executes the function hooked to the button
		break
  end
end

You forgot the parentheses at the end of .func, it should be:

tCoords[i].func()

Seems that fixed itself xD

 Yopu, on 17 March 2013 - 10:43 AM, said:

Very nice work. I've been trying to wrap my brain around this kind of thing for a while.

Thank you!

[LBPHacker]

 thesbros, on 17 March 2013 - 10:17 AM, said:

You forgot the parentheses at the end of .func, it should be:

tCoords[i].func()

ohhcrap sorry, and thanx, thesbros - fixed

[Spongy141]

Thanks guys. And great tutorial, it REALLY helped me. Now my programs are not so boring.

[thegreatstudio]

THX BRO!!

[thegreatstudio]

it is not working!! it just show a blank text on he bottom of the screen

[Engineer]

 thegreatstudio, on 19 March 2013 - 04:12 AM, said:

it is not working!! it just show a blank text on he bottom of the screen

Give me some code so I can try to fix it?

[thegreatstudio]

local tCoords = {


[1] = {10, 20, 30, 40, "edit", func = edit}
[2] = {6, 7, 8, 9, 10, "start", func = startup}


}


local evt, button, x, y = os.pullEvent("mouse_click")


for i = 1, #tCoords do
if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords [i][3] and y <=tCoords[i][4] then
tCoords[i].func()
break
end
end

if debug and button then
print( "Found Button: ".. tCoords[button][1] )
end


---- HERE Engineer

[Engineer]

 thegreatstudio, on 19 March 2013 - 05:28 AM, said:

local tCoords = {


[1] = {10, 20, 30, 40, "edit", func = edit}
[2] = {6, 7, 8, 9, 10, "start", func = startup}


}


local evt, button, x, y = os.pullEvent("mouse_click")


for i = 1, #tCoords do
if x >= tCoords[i][1] and x <= tCoords[i][2] and y >= tCoords [i][3] and y <=tCoords[i][4] then
tCoords[i].func()
break
end
end

if debug and button then
print( "Found Button: ".. tCoords[button][1] )
end


---- HERE Engineer

edit and startup are no functions. For that you have to do:

shell.run( tCoords[i].func )

Also, edit needs an argument: ex.:

shell.run( tCoords[i].func .. " myprogram" )

Do not blame my code, for others including myself it worked fine. Please look at your own code before even blaming me.
And for the future, please head to ask a pro if you cant work out your func.

If this is not what you meant, please head to ask a pro, this is a tutorial, not solving your problems thread.

[thegreatstudio]

oh....

the problem is the buttons is not showing..

[Engineer]

 thegreatstudio, on 19 March 2013 - 05:06 PM, said:

oh....

the problem is the buttons is not showing..

You have to do that yourself, now you have you buttons clickable, there is nothing in this code to show the button itself

[Ristyo]

Thanks dude, it also make my Os GUI not boring, haven't written the code yet *facepalm*

[PixelToast]

most of the time i use custom if statements for each button
good tutorial though

[theoriginalbit]

 PixelToast, on 21 March 2013 - 05:10 AM, said:

most of the time i use custom if statements for each button

How very cumbersome, unreadable, error prone, and inefficient of you...