How To: Create a touch screen on a terminal

Hello anyone who reads this, I will start off with a brief reason on why I made this.
I made this post because I never found any information about creating touch sensitive terminals and I really wanted to make one, as my Lua knowledge was stunted, I started to look for API's. I thought they would be easier, but I won't lie, I struggled a lot! I know a few API's are great but I am going show you easiest way I learnt to make a touch screen on the terminal of an advanced computer.

Requirements:
+ Advanced Computer

Knowledge:
+ os.pullEvent (will help but not needed, the code will be displayed and tested)
+ variables in lua
+ this site: http://computercraft...ki/Os.pullEvent (this site has all the possible events that can be fired from os.pullEvent and all the arguments that come with it.

Basics:
Let's start with the:

os.pullEvent()

command. This is very useful and good for many different things, one being that you can leave the inside of the brackets (for arguments) empty and you can choose more than one event to wait for (will be explained!).

Here is an example of a touch point script:

local event, button, xPos, yPos = os.pullEvent("mouse_click")

Let's break it down, local is just to make the variables local to the program, unlike globals (which normally start with an underscore (but don't have to) for example: _VERSION will display the Lua version). The "event" variable that is also created upon the click of a mouse is the name of the event fired, this will be "mouse_click", this is useless as the pullEvent command is defined as to wait, only, for the click of a mouse on the screen - Leaving the brackets empty will allow you to use the event variable to wait for many different types of events, example: mouse_scroll, mouse_drag, rednet_message, char, etc. Now ComputerCraft is so awesome that it can detect which button you press, whether it being the left click, right click, or the scroll wheel click! A list of the values are as follows:
+ The left click button will be the number 1
+ The right click button will be the number 2
+ The middle scroll wheel button click will be the number 3 (Note: Not rolling the wheel; but clicking it in! (Not all mouses have this))
So the "button" variable will be 1, 2, 3 depending on which button you press.
The "xPos" and "yPos" variables will be where the screen was pressed in screen characters. So this is the same measurements of the setCursorPos function.

So now when this code is run, it will give you all those vars (variables (cause I am lazy at times)) once you press on the screen. When dealing with these kind of controls you need to actually create a button to look at so we are gonna make a button that is 3x3 in size starting at X: 3 to X: 6 and Y: 3 to Y: 6. This is now a blue box (IMAGINE). Now you want to make it so you can press that button and only that button correct? (or maybe a set of buttons (will come to this later)). You will need to set up a simple if statement using the bigger than ">" and the lesser than "<" characters.

The IF statement:
To create a statement we are gonna use the following code that will allow us to press the button we talked about above:

local event, button, xPos, yPos = os.pullEvent("mouse_click")
if (xPos > 2 and xPos < 7) and (yPos > 2 and yPos < 7) then
  print("> You pressed the button!")
else
  print("> You missed the button!")
end

As you can see above we have added an if statement that says that if the button is pressed it will tell you, you pressed it or if you miss it, it will say you missed it. Now as you can see the part of the code between the "if" and the "then" looks a bit weird, yes it is. What you are in fact doing is setting boundries. So in plain english you are saying if the xPos is bigger than 2 (not equal, bigger so that hits the same x value as the box) and smaller than 7 (not equal, smaller so that it allows you to hit it at 3, 4, and 5). You also give it the same Y co-ordinates to make it so the variables match the box position.

Using this allows you to create one box. Now we shall do some fixes!
Fix 1:
Using a loop will make it so that you have to press the button or it will repeat the mouse_click event until you do, here is the updated code:

while true do
  local event, button, xPos, yPos = os.pullEvent("mouse_click")
  if (xPos > 2 and xPos < 7) and (yPos > 2 and yPos < 7) then
	print("> You pressed the button!")
  else
	print("> You missed the button!")
  end
end

Fix 2:
Now to make it so we can run more than one event, we use an extra if statement before we even check whether the person pressed the button or not. This means you can wait for anything else as well as the mouse_click.

while true do
  local event, arg1, arg2, arg3 = os.pullEvent()
  if event == "mouse_click" then
	if (arg2 > 2 and arg2 < 7) and (arg3 > 2 and arg3 < 7) then
	  print("> You pressed the button!")
	else
	  print("> You missed the button!")
	end
  elseif event == "char" then
	charPressed = arg1
	print("You pressed a button on the keyboard!")
	print("You pressed: "..charPressed)
  end
end

Now I have made the pullevent statement more generic so it doesn't confuse you when you are trying to use more than one event, I took the "mouse_click" from the pullevent statement. I have added an if statement will check for the mouse_click or/and the character press on the keyboard. If the keyboard character is pressed it tells you the button pressed.

Hope this helps any of you, need help? Message me:')

UPDATE:
As my knowledge has been expanded here is another version that allows you to (when choosing if you pressed the button) use <= or >= instead.

Here is the fix for the same example as above:

while true do
  local event, arg1, arg2, arg3 = os.pullEvent()
  if event == "mouse_click" then
	if (arg2 >= 3 and arg2 <= 6) and (arg3 >= 3 and arg3 <= 6) then
	  print("> You pressed the button!")
	else
	  print("> You missed the button!")
	end
  elseif event == "char" then
	charPressed = arg1
	print("You pressed a button on the keyboard!")
	print("You pressed: "..charPressed)
  end
end

is it possible to add more buttons?

jim_veens, on 09 November 2014 - 06:41 PM said:

is it possible to add more buttons?

What do you mean? You can have as many buttons as you want? All you have to do is make the button, and find out the X and Y values and the height and width and then use the example code above to create your buttons, above is an example, you mold it to suit you :') I will add an example with 8 buttons.

Wow, this was very good mate!, I was wondering if you could make a tutorial on how to make an animated boot screen or just a loading screen, Helpful info! Thanks :D/>

ePlays, on 05 December 2014 - 12:53 AM said:

Wow, this was very good mate!, I was wondering if you could make a tutorial on how to make an animated boot screen or just a loading screen, Helpful info! Thanks :D/>

What do you mean?
A loading bar? or something else?

ePlays, on 05 December 2014 - 12:53 AM said:

Wow, this was very good mate!, I was wondering if you could make a tutorial on how to make an animated boot screen or just a loading screen, Helpful info! Thanks :D/>

I have this old little loading bar that I made, feel free to have it

Spoiler

neededFiles = {"edit","xEdit","luaIDE","startup"}
function loadfiles(tFiles,fNotfound,...)
local tArgs = {...}
local x,y = term.getCursorPos()
term.setBackgroundColor(colors.green)
for i,v in pairs(tFiles) do
  term.setCursorPos(x,y)
  if fs.exists(v) then
	term.write(""..string.rep(" ",(30/#tFiles)*i)..""..math.floor((100/#tFiles)*i).."%")
  else
    fNotfound(unpack(tArgs))
	term.write(""..string.rep(" ",(30/#tFiles)*i)..""..math.floor((100/#tFiles)*i).."%")
  end
  sleep(0.01)
end
end
loadfiles(neededFiles,error,"Failed to find a value",0)

This code only supports existing files, but Im sure you could change it easily

Requiem, on 05 December 2014 - 06:14 PM said:

ePlays, on 05 December 2014 - 12:53 AM said:

Wow, this was very good mate!, I was wondering if you could make a tutorial on how to make an animated boot screen or just a loading screen, Helpful info! Thanks :D/>

I have this old little loading bar that I made, feel free to have it

Spoiler

neededFiles = {"edit","xEdit","luaIDE","startup"}
function loadfiles(tFiles,fNotfound,...)
local tArgs = {...}
local x,y = term.getCursorPos()
term.setBackgroundColor(colors.green)
for i,v in pairs(tFiles) do
  term.setCursorPos(x,y)
  if fs.exists(v) then
	term.write(""..string.rep(" ",(30/#tFiles)*i)..""..math.floor((100/#tFiles)*i).."%")
  else
	fNotfound(unpack(tArgs))
	term.write(""..string.rep(" ",(30/#tFiles)*i)..""..math.floor((100/#tFiles)*i).."%")
  end
  sleep(0.01)
end
end
loadfiles(neededFiles,error,"Failed to find a value",0)

This code only supports existing files, but Im sure you could change it easily

I shall have a look when I am home!!:D/>

How would one make it so the button has a different colour(from the UK :D/>) background?

The_Cat, on 21 December 2014 - 09:33 PM said:

How would one make it so the button has a different colour(from the UK :D/>) background?

I am from the UK? I have no idea what you are on about?:S

term.setTextColour(colours.lime)
term.setBackgroundColour(colours.black)

I am from the UK? I have no idea what you are on about?:S

term.setTextColour(colours.lime)
term.setBackgroundColour(colours.black)

I said i am from the UK because we spell it "colour" american's and in most programming languages spell it "color".

But for the touch screen, i mean the botton background is different to the background colour of the terminal so you can actual see the button. (i tried what you suggested)

The_Cat, on 21 December 2014 - 10:26 PM said:

-snip-

In ComputerCraft the colors and colours API are identical, I don't know why you think that you'll get different results with each one. It's simply some naming convention niceties.

theoriginalbit, on 21 December 2014 - 10:30 PM said:

The_Cat, on 21 December 2014 - 10:26 PM said:

-snip-

In ComputerCraft the colors and colours API are identical, I don't know why you think that you'll get different results with each one. It's simply some naming convention niceties.

Oh, I thought it would come back as a error or something XD

theoriginalbit, on 21 December 2014 - 10:30 PM said:

In ComputerCraft the colors and colours API are identical, I don't know why you think that you'll get different results with each one. It's simply some naming convention niceties.

Almost! The colors API uses gray and lightGray, whereas the colours API uses grey and lightGrey.

Lyqyd, on 22 December 2014 - 07:49 AM said:

theoriginalbit, on 21 December 2014 - 10:30 PM said:

In ComputerCraft the colors and colours API are identical, I don't know why you think that you'll get different results with each one. It's simply some naming convention niceties.

Almost! The colors API uses gray and lightGray, whereas the colours API uses grey and lightGrey.

That would explain a lot…

The_Cat, on 21 December 2014 - 09:33 PM said:

How would one make it so the button has a different colour(from the UK :D/>) background?

There are a number of ways.

One is to simply write something where you want the button to be (after setting a suitable background colour). Any characters you write to the screen, including spaces, will set the background at that location to the current assigned colour.

If you want an especially large button, use of print/write calls might be a bit long-winded. In such cases, consider using a "for" loop along with paintutils.drawLine().

Another method is to draw the button using paint, then use paintutils.loadImage() and paintutils.drawImage() to load and render what you drew. Although paint doesn't let you put alphanumeric text characters into your "image" files, there's nothing stopping you writing labels over the images once your script has drawn them.

DannySMc, on 22 December 2014 - 09:09 AM said:

That would explain a lot…

Pro-tip
Grey == England spelling
Gray == America spelling