How to Detect multiple button selected?

Solar2D Widgets
#1

i would like to create some kinda of blocks game
Each block is a widget button.
 
The game mechanism is to tap on one block and drag horizontally or vertically to select multiple blocks.
And release to clear them out.
 
Here is my code

 local function onBlockEvent(event) local phase = event.phase local target = event.target if phase == 'began' then print( "You pressed a button!" ) end if phase == 'moved' then -- print( "You pressed and moved a button!" ) end if phase == 'ended' then print( "You pressed and released a button!" ) end if phase == 'cancelled' then print('You cancelled the button click but dragged') end end local block = widget.newButton { width = confs.w, height = confs.h, defaultFile = imgFile, font = confs.font, fontSize = confs.fontSize, label = number, labelColor = confs.labelColor, onEvent = onBlockEvent, } block:setReferencePoint(display.CenterReferencePoint) block.x, block.y = params.x, params.y

But i have a difficulty because when i touch-drag the first block, the second block will never be selected…

what is the trick to perform the multiple button widget to be selected?

Thanks for your input.

Regards,

Weilies

#2

Hi Weilies,

This kind of functionality probably isn’t suited to widget buttons. I suggest you consider a hand-brewed method that involves display objects with touch listeners, and when you hit a “began” or “moved” event on these, they become selected.

Best regards,

Brent

#3

hi Brent,

Thanks for the reply.

Any sample code to show how it can be done? :slight_smile:

Thanks

#4

Hi Weilies,

Unfortunately, I’m not aware of any code for this. I’d write up a sample but I’m insanely busy at the moment. So, I suggest you just explore how all of the phases work for touch listeners, and go from there.

In theory it shouldn’t be that difficult… maybe another user here can write up a sample. :slight_smile:

Brent

#5

Thanks brent,

i tested the working one

 local b1 = display.newImage('images/bl\_blue.png') b1.x, b1.y = 150, 150 b1.name = 'blue' local b2 = display.newImage('images/bl\_green.png') b2.x, b2.y = 300, 300 b2.name = 'green' local function touchme(event) if event.phase == 'moved' then print('touch image ' .. event.target.name) end end b1:addEventListener('touch', touchme) b2:addEventListener('touch', touchme)

But i need a block (image), with a number, that’s the reason i use button widget as well

Then i change my code to below

 local function touchme(event) if event.phase == 'moved' then print('touch image ' .. event.target.name) end end -- local block = widget.newButton { width = confs.w, height = confs.h, defaultFile = imgFile, font = confs.font, fontSize = confs.fontSize, label = number, labelColor = confs.labelColor, -- onEvent = onBlockEvent, } block:setReferencePoint(display.CenterReferencePoint) block.x, block.y = params.x, params.y block.onEvent = nil block.onPress = nil block.onRelease = nil block:addEventListener('touch', touchme)

It doesn’t work…

I know there is a lousy way to do it, which is to make the block image with text into one single image. (then it might create many image files)

Then i try this trick

http://stackoverflow.com/questions/6408687/in-corona-sdk-how-to-add-labeltext-to-images

But it seems like it’s hard to adjust the font since it’s not centralised.

Any other method to achieve it? :slight_smile:

#6

hi Brent,

Thanks for the pointers!

here is the working code!!

 local function touchme(event) if event.phase == 'moved' then print('touch image ' .. event.target.name) end end local block2 = display.newImageRect(imgFile, confs.w, confs.h) block2:setReferencePoint(display.CenterReferencePoint) block2.x, block2.y = params.x, params.y block2.name = params.name local text = display.newText( number, 0, 0, confs.font, confs.fontSize ) text:setTextColor( 255, 255, 255, 255 ) text.x, text.y = params.x, params.y block2:addEventListener('touch', touchme)
#7

Hi Weilies,

This kind of functionality probably isn’t suited to widget buttons. I suggest you consider a hand-brewed method that involves display objects with touch listeners, and when you hit a “began” or “moved” event on these, they become selected.

Best regards,

Brent

#8

hi Brent,

Thanks for the reply.

Any sample code to show how it can be done? :slight_smile:

Thanks

#9

Hi Weilies,

Unfortunately, I’m not aware of any code for this. I’d write up a sample but I’m insanely busy at the moment. So, I suggest you just explore how all of the phases work for touch listeners, and go from there.

In theory it shouldn’t be that difficult… maybe another user here can write up a sample. :slight_smile:

Brent

#10

Thanks brent,

i tested the working one

 local b1 = display.newImage('images/bl\_blue.png') b1.x, b1.y = 150, 150 b1.name = 'blue' local b2 = display.newImage('images/bl\_green.png') b2.x, b2.y = 300, 300 b2.name = 'green' local function touchme(event) if event.phase == 'moved' then print('touch image ' .. event.target.name) end end b1:addEventListener('touch', touchme) b2:addEventListener('touch', touchme)

But i need a block (image), with a number, that’s the reason i use button widget as well

Then i change my code to below

 local function touchme(event) if event.phase == 'moved' then print('touch image ' .. event.target.name) end end -- local block = widget.newButton { width = confs.w, height = confs.h, defaultFile = imgFile, font = confs.font, fontSize = confs.fontSize, label = number, labelColor = confs.labelColor, -- onEvent = onBlockEvent, } block:setReferencePoint(display.CenterReferencePoint) block.x, block.y = params.x, params.y block.onEvent = nil block.onPress = nil block.onRelease = nil block:addEventListener('touch', touchme)

It doesn’t work…

I know there is a lousy way to do it, which is to make the block image with text into one single image. (then it might create many image files)

Then i try this trick

http://stackoverflow.com/questions/6408687/in-corona-sdk-how-to-add-labeltext-to-images

But it seems like it’s hard to adjust the font since it’s not centralised.

Any other method to achieve it? :slight_smile:

#11

hi Brent,

Thanks for the pointers!

here is the working code!!

 local function touchme(event) if event.phase == 'moved' then print('touch image ' .. event.target.name) end end local block2 = display.newImageRect(imgFile, confs.w, confs.h) block2:setReferencePoint(display.CenterReferencePoint) block2.x, block2.y = params.x, params.y block2.name = params.name local text = display.newText( number, 0, 0, confs.font, confs.fontSize ) text:setTextColor( 255, 255, 255, 255 ) text.x, text.y = params.x, params.y block2:addEventListener('touch', touchme)