Identify touched object

Solar2D General Questions/Discussion
#1

I read the question i posted here

http://forums.coronalabs.com/topic/38310-handling-displayed-itemspictures-attributes-positionwidthheight/ 

and i think i complicated the explanation so i will try again by using sample of my code.

Can a moderator please delete my previous question? i did not see an option to do so myself…

I have been trying a few things and maybe i am getting somewhere.

What i need to know is how to detect which item has been touched??

I have read this article http://docs.coronalabs.com/guide/events/detectEvents/index.html but i didn’t manage to do it…

Any help?

Lets say i have a button named arrow 

     

  arrow=display.newImage("arrow.png")         arrow.x = \_W\*0.5         arrow.y = \_H-50         arrow:rotate( 180 )         screenGroup:insert( arrow )  

when this is touched another item named myRoundedRect pops up as a menu

       

myRoundedRect = display.newRoundedRect(0, 0, arrow.contentWidth, arrow.contentHeight, 12 )         myRoundedRect.x=\_W\*0.2         myRoundedRect.y= \_H\*0.5         myRoundedRect.strokeWidth = 3         myRoundedRect:setFillColor(0, 0, 0)         myRoundedRect:setStrokeColor(180, 180, 180)         myRoundedRect.isVisible = false         screenGroup:insert( myRoundedRect )  

What i want to do is to detect which button is touched by the
user (in this case the arrow) and then take its .x and .y and place them
as attributes to myRoundedRect. Something like that:

myRoundedRect = display.newRoundedRect(0, 0, TOUCHED BUTTON.contentWidth, TOUCHED BUTTON.contentHeight, 12 )  

 

#2

in your function that handles your arrow’s touch, you have two options:

1.  event.x, event.y are the coordinates of where the touch occurred.  Since the object had to be touched, this should be within the bounds of the object and probably would be good enough for you.

2.  event.target is your arrow object.  Therefore event.target.x is arrow.x and event.target.y is arrow.y (assuming you called your event table “event” and not “e” or “fred”.  I don’t see your event handler above, so I’m speculating on what naming scheme you’ve used. 

#3

I tried a few things and i keep getting error reports so i must be doing something wrong.

This is the function that gets called when the “arrow” is touched

local function onPopUp(event) local t = event.target     if event.phase == 'ended' then         myRoundedRect.contentWidth=t.target.x         myRoundedRect.contentWidth=t.target.y         myRoundedRect.isVisible = true         sms.isVisible = true         callIcon.isVisible = true         onTimer = timer.performWithDelay(0, Animation)     end end   

via this listener

 arrow:addEventListener( "touch", onPopUp )

I tried naming the event.target as “event” as you pointed in your example but for some reason the onPopUp function did not respond. There was no error report as well. I tried naming it “t” just in case the “event” was a keyword in lua or corona and the onPopUp function was responding again.

I changed the myRectangles width and height attributes from arrow.contentWidth and arrow.contentHeight to t.target.x and t.target.y as shown below.

 myRoundedRect = display.newRoundedRect(0, 0, t.target.x, t.target.y, 12 ) myRoundedRect.x=\_W\*0.2 myRoundedRect.y= \_H\*0.5 myRoundedRect.strokeWidth = 3 myRoundedRect:setFillColor(0, 0, 0) myRoundedRect:setStrokeColor(180, 180, 180) myRoundedRect.isVisible = false screenGroup:insert( myRoundedRect )

I dont know if this affects anything but i will mention it. The app i am making uses storyboard.

The function “onPopUp” is located beneath function “scene:createScene( event )” (as all my functions are) and above function scene:enterScene( event ).

The error report is the one on the attached picture
 

In the picture it refers to lines 26 and 73 which are:

function scene:createScene( event )

and

myRoundedRect = display.newRoundedRect(0, 0, t.target.x, t.target.y, 12 )
#4

What is line 73 in wind.lua?

Why are you trying to set the button’s contentWidth and height to the X, Y of the touch here?

        myRoundedRect.contentWidth=t.target.x         myRoundedRect.contentWidth=t.target.y

Also you probably should not be referencing t.target.x but t.x.

The " event" parameter passed to touch handlers can be named whatever you want.  The standard is to call it either event or e but you are free to call it “orange” if you want (I wouldn’t advise it…).  Event is not a reserved word.  Next you have to understand what all is in that event table.  Those contents are documented here:

http://docs.coronalabs.com/api/event/touch/index.html

You will see that this table contains a lot of information:

  • event.id  – and ID so that you know what event it is.  I don’t know that I’ve ever used it.
  • event.name  – should be the string “touch”
  • event.phase – you are using this already
  • event.x  – the X of the touch
  • event.y  – the Y of the touch
  • event.xStart  – When moving, this is where the first X happened
  • event.yStart  – When moving, this is where the first Y happened
  • event.time – The time the event triggered
  • event.target  – *** This is a reference to the object that was touched.

So when you do:

    t = event.target

t now is the reference to your object, or in this case your arrow display object.

    t.target

however, does not exist because that’s not a property of a display object.  t.x is the same as arrow.x.   This is why you’re getting an error.

#5

Line 73 is

 myRoundedRect = display.newRoundedRect(0, 0, t.target.x, t.target.y, 12 )

I tried t.x and t.y and still i cant get the result i want.

This means that either my code is missing something, or the thing i want to accomplised can’t be done in that way.

myRoundedRect is not the button. It is the menu that pops up after the button (which is the arrow.png) is touched.

The reason i want to change its contentWidth and contentHeight (i just spoted this mistake on my code) is because i want to create an effect that the menu first takes the size of the button that was pressed with .alpha=0.1 and then gradually move to the center of the screen while getting bigger and darker. Then when the user chooses something from the menu (myRoundedRect) a ClosePopUp function gets activated which does the exactly opposite effect, meaning it gets smaller and lighter untill it becomes the same size of the button that was pressed and then dissapear.

#6

I tried t.x and t.y and still i cant get the result i want.

That’s because the 3rd and 4th parameter to display.newRect() (or in this case newRoundedRect() is the width and height , not the x, y location opposite corner.  If you were to have 0,0 as the top left location, then it would probably work, but as soon as you don’t draw it at 0,0 you will end up with odd sized rectangles.

#7

in your function that handles your arrow’s touch, you have two options:

1.  event.x, event.y are the coordinates of where the touch occurred.  Since the object had to be touched, this should be within the bounds of the object and probably would be good enough for you.

2.  event.target is your arrow object.  Therefore event.target.x is arrow.x and event.target.y is arrow.y (assuming you called your event table “event” and not “e” or “fred”.  I don’t see your event handler above, so I’m speculating on what naming scheme you’ve used. 

#8

I tried a few things and i keep getting error reports so i must be doing something wrong.

This is the function that gets called when the “arrow” is touched

local function onPopUp(event) local t = event.target     if event.phase == 'ended' then         myRoundedRect.contentWidth=t.target.x         myRoundedRect.contentWidth=t.target.y         myRoundedRect.isVisible = true         sms.isVisible = true         callIcon.isVisible = true         onTimer = timer.performWithDelay(0, Animation)     end end   

via this listener

 arrow:addEventListener( "touch", onPopUp )

I tried naming the event.target as “event” as you pointed in your example but for some reason the onPopUp function did not respond. There was no error report as well. I tried naming it “t” just in case the “event” was a keyword in lua or corona and the onPopUp function was responding again.

I changed the myRectangles width and height attributes from arrow.contentWidth and arrow.contentHeight to t.target.x and t.target.y as shown below.

 myRoundedRect = display.newRoundedRect(0, 0, t.target.x, t.target.y, 12 ) myRoundedRect.x=\_W\*0.2 myRoundedRect.y= \_H\*0.5 myRoundedRect.strokeWidth = 3 myRoundedRect:setFillColor(0, 0, 0) myRoundedRect:setStrokeColor(180, 180, 180) myRoundedRect.isVisible = false screenGroup:insert( myRoundedRect )

I dont know if this affects anything but i will mention it. The app i am making uses storyboard.

The function “onPopUp” is located beneath function “scene:createScene( event )” (as all my functions are) and above function scene:enterScene( event ).

The error report is the one on the attached picture
 

In the picture it refers to lines 26 and 73 which are:

function scene:createScene( event )

and

myRoundedRect = display.newRoundedRect(0, 0, t.target.x, t.target.y, 12 )
#9

What is line 73 in wind.lua?

Why are you trying to set the button’s contentWidth and height to the X, Y of the touch here?

        myRoundedRect.contentWidth=t.target.x         myRoundedRect.contentWidth=t.target.y

Also you probably should not be referencing t.target.x but t.x.

The " event" parameter passed to touch handlers can be named whatever you want.  The standard is to call it either event or e but you are free to call it “orange” if you want (I wouldn’t advise it…).  Event is not a reserved word.  Next you have to understand what all is in that event table.  Those contents are documented here:

http://docs.coronalabs.com/api/event/touch/index.html

You will see that this table contains a lot of information:

  • event.id  – and ID so that you know what event it is.  I don’t know that I’ve ever used it.
  • event.name  – should be the string “touch”
  • event.phase – you are using this already
  • event.x  – the X of the touch
  • event.y  – the Y of the touch
  • event.xStart  – When moving, this is where the first X happened
  • event.yStart  – When moving, this is where the first Y happened
  • event.time – The time the event triggered
  • event.target  – *** This is a reference to the object that was touched.

So when you do:

    t = event.target

t now is the reference to your object, or in this case your arrow display object.

    t.target

however, does not exist because that’s not a property of a display object.  t.x is the same as arrow.x.   This is why you’re getting an error.

#10

Line 73 is

 myRoundedRect = display.newRoundedRect(0, 0, t.target.x, t.target.y, 12 )

I tried t.x and t.y and still i cant get the result i want.

This means that either my code is missing something, or the thing i want to accomplised can’t be done in that way.

myRoundedRect is not the button. It is the menu that pops up after the button (which is the arrow.png) is touched.

The reason i want to change its contentWidth and contentHeight (i just spoted this mistake on my code) is because i want to create an effect that the menu first takes the size of the button that was pressed with .alpha=0.1 and then gradually move to the center of the screen while getting bigger and darker. Then when the user chooses something from the menu (myRoundedRect) a ClosePopUp function gets activated which does the exactly opposite effect, meaning it gets smaller and lighter untill it becomes the same size of the button that was pressed and then dissapear.

#11

I tried t.x and t.y and still i cant get the result i want.

That’s because the 3rd and 4th parameter to display.newRect() (or in this case newRoundedRect() is the width and height , not the x, y location opposite corner.  If you were to have 0,0 as the top left location, then it would probably work, but as soon as you don’t draw it at 0,0 you will end up with odd sized rectangles.