Touch Lua's Draw Library Basics

Question

WARNING: This question is only for Touch Lua users who have purchased and have knowledge of the Draw Library.

PLEASE REFER TO THE BOTTOM PORTION OF THIS QUESTION TO SEE THE FULL PROGRAM. THE SNIPPETS I USE IN THE BEGINNING ARE PART OF THAT PROGRAM (NUMPAD.LUA)

Okay, so now for the questions:

•What's the use of "." between "b" and "x"? Or "b" and "draw"? Etc...

•How does the table set up the button? Please be super specific?

•Why is there a "+", "*", and "(j-1)" in lines 7 and 8?

•What's height and width doing in there? I thought there were only x and y.

function createButtons()
   buttons = { }
   local c = 1
   for i = 1, 4 do
      for j = 1, 3 do
         local b = { }
         b.x = 80 + 60 * (j-1)
         b.y = 160 + 60 * (i-1)
         b.width = 40
         b.height = 40
         b.color = draw.blue
         b.draw = drawButton
         b.action = digitAction
         buttons[c] = b
         c = c + 1
      end
   end
   buttons[1].title = '7'
   buttons[2].title = '8'
   buttons[3].title = '9'
   buttons[4].title = '4'
   buttons[5].title = '5'
   buttons[6].title = '6'
   buttons[7].title = '1'
   buttons[8].title = '2'
   buttons[9].title = '3'
   buttons[10].title = '0'
   buttons[11].title = '.'
   buttons[11].action = dotAction
   buttons[12].title = 'C'
   buttons[12].color = draw.orange
   buttons[12].action = clearAction
end

Lastly, referencing the program as a whole... •How does the button know when you tap on it? Specifically what are the lines of code and how does it work? (I have a very faint understanding of track touches btw)

function digitAction(button)
   if string.len(display.title) < 16 then
  sys.alert('tock')
  if display.started then
     display.title = display.title .. button.title
  else
     if button.title ~= '0' then
        display.title = button.title
        display.started = true
     end
  end
   else
  sys.alert('tink')
   end
end

function dotAction(button)
   if string.find(display.title, '.', 1, true) then
  sys.alert('tink')
   else
  display.title = display.title .. '.'
  display.started = true
  sys.alert('tock')
   end
end

function clearAction(button)
   sys.alert('tock')
   display.title = '0'
   display.started= false
end

function createDisplay()
   display = { }
   display.x = 60
   display.y = 100
   display.width = 200
   display.height = 40
   display.title = '0'
   display.color = draw.red
   display.started = false
end

function createButtons()
   buttons = { }
   local c = 1
   for i = 1, 4 do
  for j = 1, 3 do
     local b = { }
     b.x = 80 + 60 * (j-1)
     b.y = 160 + 60 * (i-1)
     b.width = 40
     b.height = 40
     b.color = draw.blue
     b.draw = drawButton
     b.action = digitAction
     buttons[c] = b
     c = c + 1
  end
   end
   buttons[1].title = '7'
   buttons[2].title = '8'
   buttons[3].title = '9'
   buttons[4].title = '4'
   buttons[5].title = '5'
   buttons[6].title = '6'
   buttons[7].title = '1'
   buttons[8].title = '2'
   buttons[9].title = '3'
   buttons[10].title = '0'
   buttons[11].title = '.'
   buttons[11].action = dotAction
   buttons[12].title = 'C'
   buttons[12].color = draw.orange
   buttons[12].action = clearAction
end

function drawDisplay()
   draw.setfont('Helvetica', 20)
   draw.setlinestyle(2, 'butt')
   local x1, y1 = display.x, display.y
   local x2, y2 = x1 + display.width, y1 + display.height
   draw.roundedrect(x1, y1, x2, y2, 10, display.color)
   local w, h = draw.stringsize(display.title)
   local x = x2 - 10 - w
   local y = y1 + (display.height - h)/2
   draw.string(display.title, x, y, draw.black)
end

function drawButton(b)
   draw.setfont('Helvetica', 18)
   draw.setlinestyle(2, 'butt')
   local x1, y1 = b.x, b.y
   local x2, y2 = x1+b.width, y1+b.height
   draw.roundedrect(x1, y1, x2, y2, 10, b.color)

   local w, h = draw.stringsize(b.title)
   local x = b.x + (b.width - w)/2
   local y = b.y + (b.height - h)/2
   draw.string(b.title, x, y, draw.black)

end

function drawButtons()
   for i = 1, #buttons do
  buttons[i].draw(buttons[i])
   end
end

function lookupButton(x, y)
   for i = 1, #buttons do
  local b = buttons[i]
  if x > b.x and x < b.x+b.width and y > b.y and y < b.y+b.height then
     return b
  end
   end
   return nil
end

function drawScreen()
   draw.beginframe()
   draw.clear()
   drawDisplay()
   drawButtons()
   draw.endframe()
end

function touchBegan(x, y)
   local b = lookupButton(x, y)
   if b then
  b.action(b)
   end
end

function touchMoved(x, y)
end

function touchEnded(x, y)
end

function init()
   draw.setscreen(1)
   draw.settitle('Num Pad')
   draw.clear()
   draw.tracktouches (touchBegan, touchMoved, touchEnded)

   createButtons()
   createDisplay()
end

function mainloop()
   while true do
  draw.doevents()
  drawScreen()
  draw.sleep(30)
   end
end

function main()
   init()
   mainloop()
end

-- start program
main()

Thank you so much for any help you can offer! I know this is a lot of questions, but this knowledge can really help propel me forward!

Answer 1

WARNING: This question is only for Touch Lua users who have purchased and have knowledge of the Draw Library

Since when do you have to purchase something to answer programming questions? All your questions are on absolute Lua basics anyway.

What's the use of "." between "b" and "x"? Or "b" and "draw"? Etc...

The dot operator is used to index table members. So b.x will give you the value that belongs to key "x" in table b. Its syntactic sugar for b["x"].

How does the table set up the button? Please be super specific?

The function createButtons creates an empty table and fills it with buttons represented by a table b that stores various button properties.

Why is there a "+", "*", and "(j-1)" in lines 7 and 8?

Because the author of that program wants to add and multiply. Here the coordinates b.x and b.y are calculated. (j-1) is used because j starts at 1, but he needs it to start at 0 for this calculation. The 2 for loops will create 4 rows of buttons, each containing 3 buttons as the x coordinate depends on parameter j while y depends on parameter i.

What's height and width doing in there? I thought there were only x and y.

The button needs dimensions, not only a location. As b is created as a local variable within the for loop all its properties are set here. They may be changed later.

How does the button know when you tap on it? Specifically what are the lines of code and how does it work?

Your mainloop will call draw.doevents() every cycle. So at some point there will be an event that will cause touchBegan to be called. The button itself does not know that it was tapped. function touchBegan(x,y) will search if one of the buttons was hit at x,y by calling lookupButton(x,y) and call its action function. action is either one of dotAction, digitAction or clearAction. So if you tap on a digit button digitAction() will be called e.g.

Do yourself a favour and read a book on Lua or at least do a Lua tutorial. Befor diving into third party libraries. If you don't know how to index the most common Lua type or that + and * are arrithmetic operators, you will have a very hard time understanding code and you will not be productive in any way.

Answer 2

This program in particular uses tables to represent buttons, it does this to make it more manageable. The height and width are the same way. If you are new to the draw library, reviewing code like this is only going to confuse you. Most of your questions are actually about OOP honestly

Also this question probably isn't suitable for Stack Overflow right now. If you want help/a small tutorial on the subject feel free to PM me on the Touch Lua forum, my username is warspyking, but as it stands you need to either revise or delete this question.