Hit Button [ Help me! ]

Questions
1

I don’t know how to hit a button in Codea.
For example: When I tap on Button1, execute a block of code.
I’m Java programmer and I can do this in a simple way.

Draw part:


Rectangle rect1 = new Rectangle(20, 20, 100, 100);
g.setColor(Color.blue);
g.draw(rect1);

Mouse Event part:


Point mousePt = e.getPoint();
if(rect1.contains(mousePt)) {
// TODO Code Here ...
} else {
// If needed ...
}

I need a function similar to contains.

For example into Codea:


rect1 = rect(x, y, width, height)
function touched(touched) {
if touched.x.contains(rect1) then
// TODO Code Here ...
end
}

Here is a problem, I need touch.point, not x or y.

2

@Georgian… I’m still the programming neophyte here but perhaps you could:

  1. create a table for each of your buttons with keys for each of the rect parameters (x, y, w, h)?

  2. create a master table of all your buttons?

You could then iterate through the master table in @Simeon’s containsPoint() function checking for true and if true returning the button name to your calling function.

HTH…

Edit: Ah I see that @Simeon has already replied…

3 

-- My rectangle
x = 20
y = 20
w = 100
h = 100

function containsPoint( point, x, y, w, h )
    if point.x > x and point.x < (x+w) and
       point.y > y and point.y < (y+h) then
        return true
    end

    return false
end

function touched( touch ) 
    if containsPoint( vec2(touch.x,touch.y), x, y, w, h ) then
        print( "Touched Rect" )
    end 
end
4

Thanks @Simeon!
I will try your code, but here is another problem.
What should I do if I have more than a button?
If You will take a look at the my problem and my solution, at the first post.
You will understand why I want contains().

5

Perhaps you could put it into a class? That way it would be reusable

Button = class()

function Button:init( x, y, w, h )
    self.position = vec2(x,y)
    self.size = vec2(w,h)
    self.color = color(255,0,0)

    -- This could be any function
    self.action = function(sender) print("Hello!") end
end

function Button:draw()
    pushStyle()

    fill(self.color)
    stroke(255)
    strokeWidth(5)

    rect( self.position.x, self.position.y, self.size.x, self.size.y )

    popStyle()
end

function Button:contains( point )
    local l = self.position.x
    local r = self.position.x + self.size.x
    local b = self.position.y
    local t = self.position.y + self.size.y

    if point.x > l and point.x < r and
       point.y > b and point.y < t then
        return true
    end

    return false
end

function Button:touched(touch)
    if touch.state == ENDED and touch.tapCount == 1 then
        if self:contains( vec2(touch.x, touch.y) ) and self.action then
            self.action(self)
        end
    end
end

Using it:


function setup()
    button1 = Button( 100, 300, 100, 100 )
    button1.action = function(sender) print("Hello From Button 1") end
    button1.color = color(100,110,125)

    button2 = Button( 300, 300, 100, 100 )
    button2.action = function(sender) print("Hello From Button 2") end
end

function draw()
    background(20,20,40)

    button1:draw()
    button2:draw()
end

function touched(touch) 
    button1:touched(touch)
    button2:touched(touch)
end

Note: there may be bugs in this code — I haven’t tested it. Hopefully it explains the idea.

6

@Blanchot still a good suggestion to keep all the buttons in a table. Makes it much easier to add more.

7

@Blanchot, Good idea. I will try.

@Simeon, Thank you! Your code works fine. I will learn a lot from this example. B-) But, wait. I still have a problem, maybe you can help me. How to store an array in saveLocalData and also readLocalData?