(Video) GUI Tutorials [New video: Metatable Basics]

This video series aims to cover some more advanced ways of going about GUI. It's my first time recording tutorials for anything, and I'm forcing myself to go without notes and the like just to get more comfortable with talking/thinking at the same time. It's difficult (and I'm sure it shows), but hopefully I can still manage to teach something useful.

Most Recent Video: (Video 4) - Metatable Basics

In this tutorial, I explain the concepts of Metatables and Object Oriented Programming (find a better explanation of OOP on Wikipedia - I know mine sucks!). I feel like my explanation of metamethods is not quite as fleshed out as I would like it to be, but oh well. I've recorded this one about five times now and I'm not going to do it again unless people have a lot of trouble understanding this one.

Here is a link to a full list of metamethods: http://lua-users.org...MetatableEvents

Please note that neither __gc nor __mode are available to you in ComputerCraft.

Email: render.still@gmail.com

Spoiler

[media]http://youtu.be/SDLujCr0c5Y[/media]

Video 1: Clickable menu

Well I'm sure it's been done before and I'm sure it'll be done again but I've made a clickable menu tutorial. It's my first video tutorial so go easy on me.

The reason I made this was mainly because I wanted to get a grip on talking and writing code at the same time, but I also know that some people learn better by listening than by reading.

The commented code for the whole thing can be found here: http://pastebin.com/YsqzVY8d

Spoiler

[media]http://www.youtube.com/watch?v=-O6pd9nhL8U&feature=youtu.be[/media]

Video 2: Draggable Text Objects

This is a ComputerCraft draggable text tutorial for advanced computers. Although I am writing the program in CC-Emulator, it still applies to the computers in Minecraft.

Here is a link to the completed code: http://pastebin.com/GXRDLnSR

If you have any questions concerns, please comment below!

Spoiler

[media]http://www.youtube.com/watch?v=pFxGMW5tg74&feature=youtu.be[/media]

Video 3: Buttons & Metatables
This video ended up being a lot longer than I really wanted it to be, and my explanation of metatables is rather poor and fumbling. Hopefully it serves its purpose though and you're able to get the jist of how metatables work.

One thing that I should make note of is that at around 10:53 I mention that you need to use the rawset function in order to avoid recursion: this is actually untrue, due to the fact that you are editing the button.buttons table instead of the button table directly.

This tutorial is aimed mainly towards intermediate level programmers due to the fact that it has some more abstract concepts such as metatables. If you are not familiar with metatables, go ahead and check them out here: http://www.lua.org/pil/13.html

A few notes about the tutorial:
1) I have a rather terrible explanation of what a metatable/metamethod is: check the link to the Lua PIL to get a better explanation that you can be sure is 100% accurate.

2) Buttons do not necessarily need to be this complicated! In fact, this is quite a bit more complicated than it should be. The reason that I used these more advanced Lua concepts is so that I don't have to go over them later when I'm trying to teach even harder subjects.

Hope you enjoy!

Link to code with comments on pastebin: http://pastebin.com/JMegbtg6

Spoiler

[media]http://youtu.be/ppZMCAF7cWw[/media]

Nice, this could be very useful for new users starting out.

Isn't this more suited to Tutorials though. Hmm.

Nice! I hope people watch this.

oeed, on 04 April 2013 - 11:23 PM said:

Nice, this could be very useful for new users starting out.

Isn't this more suited to Tutorials though. Hmm.

Well it is a video. Hmm.

oeed, on 04 April 2013 - 11:23 PM said:

Isn't this more suited to Tutorials though. Hmm.

Yeah I wasn't sure about that either. I suppose it does fit a bit better in Tutorials than it does here though. I'll request to have it moved.

Also thanks for the praise guys! It's much appreciated :)/>

Moved to Tutorials.

Lyqyd, on 05 April 2013 - 06:38 AM said:

Moved to Tutorials.

Thanks!

This is an awesome tutorial but for some reason, I typed one line and of code and it didn't work so I copied that same line from your pastebin post and it worked but the weird thing is, both lines were identical.

This is a great tutorial!

I did know before how to make such a menu, but not how to do it efficiently. And you are doing great with the talking-and-coding together.
You should definitely do this more often in the future, just because you do it easy-to-understand and explain it well.

+1

Just to encourage you.

And for the ternary operater, I like this syntax much better:

local value = value1 == value2 and "something" or "something else"

Then:

local value=
		value1 == value2 and "something" or
				"something else"

Just a preference:P

Engineer, on 05 April 2013 - 11:36 AM said:

This is a great tutorial!

I did know before how to make such a menu, but not how to do it efficiently. And you are doing great with the talking-and-coding together.
You should definitely do this more often in the future, just because you do it easy-to-understand and explain it well.

+1

Just to encourage you.

And for the ternary operater, I like this sytax much better:

local value = value1 == value2 and "something" or "something else"

Then:

local value=
		value1 == value2 and "something" or
				"something else"

Just a preference:P

Thank you! That's very encouraging :)/>
And yeah, the ternary operator definitely looks better your way, but I wanted the whole thing to fit on the screen which I was I did it like that.

I just finished recording another tutorial (Draggable text objects) so I'll be putting it up in a second here. I'm thinking about just making this thread into an index for GUI video tutorials.

Bubba, on 05 April 2013 - 11:43 AM said:

- snip -

Yeah you should do that. And I recommend putting it in your signature, because you are very active in Ask a Pro and that can help quite a lot of people.

Engineer, on 05 April 2013 - 11:50 AM said:

Bubba, on 05 April 2013 - 11:43 AM said:

- snip -

Yeah you should do that. And I recommend putting it in your signature, because you are very active in Ask a Pro and that can help quite a lot of people.

Good idea :)/>

spyman68, on 05 April 2013 - 08:43 AM said:

This is an awesome tutorial but for some reason, I typed one line and of code and it didn't work so I copied that same line from your pastebin post and it worked but the weird thing is, both lines were identical.

Sorry I somehow missed your post. If both lines are identical then they'll run the same. It's possible I typed something wrong in the video and went back to fix it later on. Something as small as a missing comma will mess up the whole thing.

New tutorial added! This video deals with buttons and metatables, and although I say in the video that it's not going to be too advanced I actually think it's a bit more on the difficult side than my other two videos. Hopefully I'm not too confusing, but I get the feeling that It's quite a bit more difficult to follow along because I ramble quite a bit.

Anyway, I hope you enjoy. :)/>

Nice work Bubba :)/>

Just a few bugs with the pastebin code for the Metatables one.

Missing an end for the checkClick function:

  checkClick = function(self, x,y) --This checks whether you have actually clicked on a table
	for index, btn in pairs(self.buttons) do
	  if x>=btn.x and x<=btn.bounds.x2 and y>=btn.y and y<=btn.bounds.y2 then
		btn.isClicked = true --If we have actually clicked the button then set its click value to true
		if btn.onClick then --And check if it has an onClick function
		  btn:onClick() --If so, then execute it and pass the button's table/info into it by using the colon operator
		  return index --Return the index of the button so we can unhighlight it
		end -- this end
	  end
	end
  end;

And once clicking on "This is a button" button, it errors with 102: index expected, got nil on the line:

button.buttons[timer.index].isClicked = false --Deselect the button

remiX, on 21 April 2013 - 09:34 AM said:

Nice work Bubba :)/>

Just a few bugs with the pastebin code for the Metatables one.

Missing an end for the checkClick function:

  checkClick = function(self, x,y) --This checks whether you have actually clicked on a table
	for index, btn in pairs(self.buttons) do
	  if x>=btn.x and x<=btn.bounds.x2 and y>=btn.y and y<=btn.bounds.y2 then
		btn.isClicked = true --If we have actually clicked the button then set its click value to true
		if btn.onClick then --And check if it has an onClick function
		  btn:onClick() --If so, then execute it and pass the button's table/info into it by using the colon operator
		  return index --Return the index of the button so we can unhighlight it
		end -- this end
	  end
	end
  end;

And once clicking on "This is a button" button, it errors with 102: index expected, got nil on the line:

button.buttons[timer.index].isClicked = false --Deselect the button

Err, I think you have different code from me? I'm not getting the error and I'm not missing an end either:

  checkClick = function(self, x,y) --This checks whether you have actually clicked on a table
	for index, btn in pairs(self.buttons) do
	  if x>=btn.x and x<=btn.bounds.x2 and y>=btn.y and y<=btn.bounds.y2 then
		btn.isClicked = true --If we have actually clicked the button then set its click value to true
		if btn.onClick then --And check if it has an onClick function
		  btn:onClick() --If so, then execute it and pass the button's table/info into it by using the colon operator
		end
		return index --Return the index of the button so we can unhighlight it
	  end
	end
  end;

I actually just added comments to the program that's used in the video + removed rawset on line 47. So I'd be very surprised if it didn't work. Are you using this pasteID? http://pastebin.com/80yuGtCR

Edit: Figured out the error your getting. If you click outside of the button after clicking on a button you'll get that error due to the fact that I immediately reset the timer.index to a nil value. I'll fix that and reupload the code.

Lol well I took the code exactly from your Pastebin code without editing, ran it straight away and got the errors :?

remiX, on 21 April 2013 - 09:47 AM said:

Lol well I took the code exactly from your Pastebin code without editing, ran it straight away and got the errors :?

Yeah I edited my post. Still not sure how on earth you're missing the end: it's there on the original Pastebin.

But the attempt to call nil is due to this:

local index = button:checkClick(e[3], e[4]) --Check the click: make sure to pass the button table into the checkClick function
timer.index = index --The index of the button that is clicked
timer.timer = os.startTimer(1)

I set the timer.index whether it get's something from button:checkClick or not, and if you click on something that is not a button then it will error.

I'll change the relevant code to this and upload it:

local index = button:checkClick(e[3], e[4]) --Check the click: make sure to pass the button table into the checkClick function
if index then
  timer.index = index  --The index of the button that is clicked
  timer.timer = os.startTimer(1)
end

Well, I would have guessed you changed the pastebin code :o/>?

But it's fine! It works fine now. Brilliant way to use metatables. My way was boring :P/>

What will you be making next? :P/>

remiX, on 21 April 2013 - 10:19 AM said:

Well, I would have guessed you changed the pastebin code :o/>?

But it's fine! It works fine now. Brilliant way to use metatables. My way was boring :P/>

What will you be making next? :P/>

Thanks :)/>

Next I plan to do drop-down menus, which should be fun. After that I'll do draggable windows, and then from there I'll move on to add all the previous tutorials' content into windows.

One huge reason I'm doing these tutorials is to motivate me to work on Lunar (A project manager which will hopefully function a bit like GitHub). Getting the GUI parts out of the way in the form of these tutorials does a huge portion of the work.

Ooh nice. Drop down menus like Right-click popup menus and such? Mm, quite easy.

Sounds fun! I wish you goodluck :P/>

remiX, on 21 April 2013 - 11:00 AM said:

Ooh nice. Drop down menus like Right-click popup menus and such? Mm, quite easy.

Sounds fun! I wish you goodluck :P/>

Heh, thanks, but not quite so easy. I plan on doing menu bars with drop down menus, which in turn can have fold out menus to an infinite level (provided you have screen space of course). But we'll see how it goes :)/>

Bubba, on 22 April 2013 - 01:38 PM said:

- Snip -

If you really wanted you can make the dropdown menu "scroll-able". Its not that hard to make it scroll-able :P/>

Engineer, on 22 April 2013 - 09:25 PM said:

Bubba, on 22 April 2013 - 01:38 PM said:

- Snip -

If you really wanted you can make the dropdown menu "scroll-able". Its not that hard to make it scroll-able :P/>/>

I'll probably do that to, but those tend to get cluttered more easily in my opinion. Besides, the infinite pull-out menus present more of a challenge to me which is something that I enjoy :)/>

Wait a minute.. I thought you meant just a vertical list.
But you want to make a vertical list wich can fold to an infinite level.

Holy (…)

Thats freaking awesome! Why didnt I get that the first time?
:o/>

Yeah I thought you were just going to do a simple right click menu xD

That will be quite difficult, well goodluck :P/>

Just wanted to say thanks to you Bubba I was able to make my own engine control system using your button tutorial. Modified your code a bit but overall it works fantastically.

kauqilla, on 03 May 2013 - 08:43 PM said:

Just wanted to say thanks to you Bubba I was able to make my own engine control system using your button tutorial. Modified your code a bit but overall it works fantastically.

Thanks! I'm glad to hear it :)/>

Posted a tutorial on metatable basics. I'm not quite as happy with this one as I am with the others, but I've recorded it way too many times to do so again unless it is requested that I do so.

Thanks! Thanks to this I understood meta tables!

Bubba, on 12 May 2013 - 01:00 AM said:

Posted a tutorial on metatable basics. I'm not quite as happy with this one as I am with the others, but I've recorded it way too many times to do so again unless it is requested that I do so.

Holy mother of metatables! Thanks to you, I understand metatables.
Thank you for making these tutorials, please keep them up :)/>