Which button was pressed?

Solar2D General Questions/Discussion
#1

I am new to this, so any help would be more than welcome. I read the docs, but could not find anything to help me with

I have a table of buttons, for each one I call the same function for button press

[code]
local buttons = display.newGroup()

[code]
for i=1,5 do
local button = ui.newButton{
default=“button_”… i…".png",
onPress=buttonPress,
onRelease=buttonRelease,
}
buttons:insert( button, true )

end

Question is, how to determine which button was pressed?

local buttonPress = function( event )  
 local group = event.target  
end

if i print group it gives me a table output on debugger, but nothing more indicating

Alexandros [import]uid: 4416 topic_id: 376 reply_id: 300376[/import]

#2

I’m not sure whether you can do a group function like that. Ansca’s button library code (modified a bit) targets each button individually…

[code]
–button code
– Text for demo output
local tx = display.newText( “Get Ready”, 0, 0, nil, 12 )
tx:setTextColor( 255, 255, 136, 255 )

[code]
– Trick to create centered text
local group = display.newGroup()
group:insert( tx, true )
group:translate( 0.5*screenW, 0.1*screenH )

[code]

– Create 2 buttons

[code]
– You can replace the following with your own code/assets

[code]
local button1Press = function( event )
–tx.text = “Button 1 pressed”
end

[code]
local button1Release = function( event )
–tx.text = “Button 1 released”
end

[code]
local button2Press = function( event )
–tx.text = “Button 2 pressed”
end

[code]
local button2Release = function( event )
–tx.text = “Button 2 released”
end

[code]
local button1 = ui.newButton{
default=“button.png”,
rollover=“button_over.png”,
onPress=button1Press,
onRelease=button1Release,
}

[code]
local button2 = ui.newButton{
default=“button.png”,
rollover=“button_over.png”,
onPress=button2Press,
onRelease=button2Release,
}

[code]

– A layout trick to make buttons equally spaced horizontally

[code]
– Create an array for convenience and add buttons to it
local buttons = {}
buttons[#buttons + 1] = button1
buttons[#buttons + 1] = button2

[code]
local numButtons = #buttons

[code]
– Solving for buttonSpacing: screenW = (numButtons+1)*buttonSpacing + numButtons*buttonW
local buttonW = buttons[1].width
local buttonSpacing = ( screenW - numButtons*buttonW ) / ( numButtons + 1 )

[code]
– Layout buttons evenly across width of screen
local x = buttonSpacing + 0.5*buttonW
local y = screenH*0.93
for i=1,numButtons do
local button = buttons[i]
button.x = x
button.y = y
x = x + buttonSpacing + buttonW
end

[code]
–end button code

And see the Follow Me sample code for touch handling. [import]uid: 1560 topic_id: 376 reply_id: 689[/import]

#3

I have seen that code from the examples,and it sure can be done this way… However , as long as inside the click handler the event.target can be identified as a table, is there no way we can get which table it is? Any Lua guru or someone from Ansca perhaps could enlighten us :slight_smile:
Alexandros [import]uid: 4416 topic_id: 376 reply_id: 690[/import]

#4

You can also goto into the ui.lua file and add a name property

[code]
if params.name then
button.name = params.name
end

[code]

then in your code you can do

[code]
for i=1,3 do
local button = ui.newButton{
name = “button”…i;
default=“button.png”,
onPress=buttonPress,
onRelease=buttonRelease,

};

[code]

and in your onPress/onRelease you can do

[code]
local buttonPress = function ( event )
print (event.target.name);
end

[code]

and determine what button was pressed. You can do a name, or a button ID or anything you like

Hope this helps.

Carlos [import]uid: 24 topic_id: 376 reply_id: 691[/import]

#5

I am detecting which button was pressed by checking the coordinates of the target and matching it against my buttons.

I setup my buttons using an array. When ANY of them is clicked this function is called:

----8

tabButtonRelease = function( event ) local t = event.target local buttonPressed for i=1, #tabBtn do if( t.x == tabBtn[i].x ) then buttonPressed = i print(buttonPressed) end end --now that I know button 1, 2, or 3 was pressed, do something... end

----8Here’s how I setup my buttons in an array elswhere in the code:

----8

local screenW = display.stageWidth local screenWDividedBy2 = math.floor(screenW/2) local tabBarGroup = display.newGroup() local N = 3

for i=1, N do --button filenames are numbered, e.g. tabBtn-1.png, tabBtn-1\_over.png, tabBtn-2.png, tabBtn-2\_over.png, etc local defaultGraphic = "tabBtn-".. i ..".png" local rolloverGraphic = "tabBtn-".. i .."\_over.png"

tabBtn[i] = ui.newButton{ default=defaultGraphic, rollover=rolloverGraphic, onPress=buttonCalendarPress, onRelease=tabButtonRelease, }

--layout the buttons evenly on the screen tabBtn[i].x = math.floor((tabBtn[i].width\*(i-1) - tabBtn[i].width\*N)/(N+1)\*i + - screenWDividedBy2 + tabBtn[i].width/2) tabBtn[i].y = 0

--add the buttons to the tab bar at the bottom of the screen tabBarGroup:insert( tabBtn[i] ) end

----8 [import]uid: 3800 topic_id: 376 reply_id: 740[/import]

#6

:slight_smile:

c [import]uid: 24 topic_id: 376 reply_id: 741[/import]

#7

One more thought on this, and possibly an easier way to deal with detecting which button was pressed:

Since the buttonPress function is receiving the event that was passed from the event handler, you can pull things out of the event like the target. So rather than modifying the ui.lua file, just add a new property to the button and pull it out of the target.

local buttonPress = function( event )
local t = event.target
local id = t.id
print( id )
end

for i=1,5 do
local myButton = ui.newButton{ default=defaultGraphic, rollover=rolloverGraphic, onRelease= buttonPress }
myButton.id = i
end

You can also add other things to the button, like:
myButton.link = “http://google.com”

I just posted something about this here, where I’m dropping in a link property after my button has been created:
http://developer.anscamobile.com/forum/2009/12/30/emailweb-link#comment-748

[import]uid: 3800 topic_id: 376 reply_id: 749[/import]

#8

In 1.1, the ui.newButton function now allows you to specify id’s and an onEvent listener that gets notified on any touch event that targets the button.

Check out the Interface/ButtonEvents sample for an example. Here’s the relevant excerpt:

local buttonHandler = function( event )
t:setText( "id = " … event.id … ", phase = " … event.phase )
end

local button2 = ui.newButton{
default = “buttonYellow.png”,
over = “buttonYellowOver.png”,
onEvent = buttonHandler,
id = “button2”,
text = “Button 2 Label”,
font = “Trebuchet-BoldItalic”,
textColor = { 51, 51, 51, 255 },
size = 22,
emboss = true
}

[import]uid: 26 topic_id: 376 reply_id: 918[/import]

#9

What is the “params.name” for? [import]uid: 295 topic_id: 376 reply_id: 3525[/import]

#10

I use event.target for (non ui) my buttons … [import]uid: 6928 topic_id: 376 reply_id: 3527[/import]

#11

Very nice. I am using the ui.lua file and it is working good, except that I need to be able to remove the button from the display.

What I am trying to do is show some buttons and then after the user selects one then they all disappear.

How would I go about deleting the button object? [import]uid: 4527 topic_id: 376 reply_id: 3891[/import]

#12

@pixelres

Just have them disappear should work with “button:removeSelf()” … as “button” (the return of newButton) is a group object. To free memory you would also need to remove all of the members from that group and maybe some more cleanup.

ui.lua is more or less just the “start” of a ui framework and by far not complete. I also think that the approach used is questionable. [import]uid: 6928 topic_id: 376 reply_id: 3896[/import]

#13

I was using ui.newButton{} in ui.lua and I was confused as to what was happening so I stopped using ui.lua and started using the buttons example in FollowMe.lua. It made buttons more understandable to me. I think ui.newButton{} in ui.lua hides some important but basic techniques from new Corona/Lua programmers. [import]uid: 295 topic_id: 376 reply_id: 3899[/import]

#14

Thanks for the replies… I was able to get things to work as I wanted late last night. I am going to post my solution…

I have 10 buttons that I wanted to show and then hide… The show function puts 6 buttons on one line and then 4 buttons on the next
local bh = {}

function hideButtons()
for i=1, 10 do
if bh[i] ~= nil then
bh[i].parent:remove(bh[i])
bh[i] = nil
end
end
end

function displayButtons( )
hideButtons()

local offset = 10
local idx = 1

bh = {}

for i=1, 10 do
bh[i] = ui.newButton{id = i, htype = typeHands[i], default = string.format("%s%d.png", bodypart, i), onEvent = bHandTap}

if i < 7 then
bh[i].x = (bh[1].width / 2) + (bh[1].width * (i-1)) + offset
bh[i].y = bh[1].height / 2 + offset
end
if i > 6 then
bh[i].x = (bh[1].width / 2) + (bh[1].width * (i-8+1)) + offset
bh[i].y = bh[1].height / 2 + (bh[1].width) + offset
end
end
end [import]uid: 4527 topic_id: 376 reply_id: 3912[/import]

#15

It may be much better to keep your buttons… put them all into one group and just hide the group by moving it out of the screen (obj.x=-320) as long as the buttons are not needed… instead of recreating and deleting them again and againd…

My app has a lot of “screens” and partial screens which are all groups … you display them if needed… the cool thing is that you may animate those groups… let the buttons fly it… or “zoom in”… or fade or whatever looks cool.

I have usually something like:

“CreateButtons()”
“ShowButtons()” “HideButtons()”
[import]uid: 6928 topic_id: 376 reply_id: 3913[/import]