[Resolved] Scroll a group with clickable images?

[rmbsoft]

Hi,

I’m trying to create somesort of scrolling list with images.

I create an rectangle, put it in the scrollGroup, add couple of images, add them to the scrollGroup.

Add touch event listeners to each image, and last but not least, add a touch event listener to the group, so i can scroll it up and down.

Dragging the whole group up and down works perfectly, but Corona doesn’t seem to detect the touch listeners for each image.

So problem is, the startDrag event is fired so the Group can be scrolled/moved together with all its images, but the touch listeners of the images don’t work anymore.

Any solution how to solve this?

ListGroup = display.newGroup()  
shadeRect = display.newRect( 0, 140, 1024, 535 )  
shadeRect:setFillColor( 0, 0, 0, 255 )  
shadeRect.alpha = 0.3  
ListGroup:insert(shadeRect)  
  
function ImageClicked(event)  
 if (event.phase == "ended") then  
 -- Do something   
 end  
end  
  
Image1 = display.newImage("Number1.png", 0,0 )  
Image1:addEventListener("touch", ImageClicked )  
ListGroup:insert(Image1)  
  
Image2 = display.newImage("Number2.png", 0,0 )  
Image2:addEventListener("touch", ImageClicked )  
ListGroup:insert(Image2)  
local function startDrag( event )  
  
 local t = event.target  
 local phase = event.phase  
  
 if "began" == phase then  
  
 Dragging = false  
 display.getCurrentStage():setFocus( t )  
 t.isFocus = true   
  
 -- Store initial position  
 t.x0 = event.x - t.x  
 t.y0 = event.y - t.y  
  
  
 elseif t.isFocus then  
  
 if "moved" == phase then  
 Dragging = true  
  
  
 t.x = event.x - t.x0  
 t.y = event.y - t.y0  
  
 if t.x \> 0 or t.x \< 0 then  
 t.x = 0  
 end  
 if t.x \< -1024 then  
 t.x = -1024  
 end  
  
  
 elseif "ended" == phase or "cancelled" == phase then  
  
 display.getCurrentStage():setFocus( nil )  
 t.isFocus = false  
  
 end  
 end  
  
 -- Stop further propagation of touch event!  
 return true  
end   
ListGroup:addEventListener( "touch", startDrag )  
  
  

[import]uid: 50459 topic_id: 26067 reply_id: 326067[/import]

[peach_pellen]

Try this;

[lua]ListGroup = display.newGroup()
shadeRect = display.newRect( 0, 140, 1024, 535 )
shadeRect:setFillColor( 0, 0, 0, 255 )
shadeRect.alpha = 0.3
ListGroup:insert(shadeRect)

function ImageClicked(event)
print “Clicked”
end

Image1 = display.newImage(“crate.png”, 0,0 )
Image1:addEventListener(“tap”, ImageClicked )
ListGroup:insert(Image1)

Image2 = display.newImage(“crate.png”, 0,60 )
Image2:addEventListener(“tap”, ImageClicked )
ListGroup:insert(Image2)

local function startDrag( event )

local t = event.target
local phase = event.phase

if “began” == phase then

Dragging = false
display.getCurrentStage():setFocus( t )
t.isFocus = true

– Store initial position
t.x0 = event.x - t.x
t.y0 = event.y - t.y

elseif t.isFocus then

if “moved” == phase then
Dragging = true

t.x = event.x - t.x0
t.y = event.y - t.y0

if t.x > 0 or t.x < 0 then
t.x = 0
end
if t.x < -1024 then
t.x = -1024
end

elseif “ended” == phase or “cancelled” == phase then

display.getCurrentStage():setFocus( nil )
t.isFocus = false

end
end

– Stop further propagation of touch event!
return true
end

ListGroup:addEventListener( “touch”, startDrag )[/lua]
(I used the crate image as it’s what I had around, you’ll want to change that back.)

I moved one image down so they weren’t on top of each other, then I changed the touch listener to tap and I put in a print statement.

How did you know your touch listener wasn’t firing when you had an empty function? Remember print statements can be very useful for this kind of thing.

Peach [import]uid: 52491 topic_id: 26067 reply_id: 105562[/import]

[rmbsoft]

Hi Peach,

Thanks, the tap event works, but the problem is that it doesn’t seems to have a event.target property, so i can’t detect wich image has been clicked.

Unless i create a tap event listener, with a different function for every image, eg:

Image1:addEventListener(“tap”, Image1Clicked )
Image2:addEventListener(“tap”, Image2Clicked )

But with 30-40 Images in the list this is not really desirable

[import]uid: 50459 topic_id: 26067 reply_id: 105569[/import]

[vito]

#rmbsoft

Indeed, the ‘event’ object does have the event.target property

You can append a custom property to your image object e.g.

Image1.name = "hello 1"
Image2.name = "hello 2"

You can access this property in the event listener

print ("Clicked "..event.target.name)

The console output would be something like this

Clicked hello 2
Clicked hello 1

Here is the is the updated code

function ImageClicked(event)  
 print ("Clicked "..event.target.name)  
end  
   
Image1 = display.newImage("crate.png", 0,0 )  
  
Image1:addEventListener("tap", ImageClicked )  
Image1.name = "hello 1"  
ListGroup:insert(Image1)  
   
Image2 = display.newImage("crate.png", 0,60 )  
Image2.name = "hello 2"  
Image2:addEventListener("tap", ImageClicked )  
ListGroup:insert(Image2)  

[import]uid: 68675 topic_id: 26067 reply_id: 105602[/import]

[rmbsoft]

the TAP event listener DOESN’T have an event.target like the touch event listener has, that’s the problem

[import]uid: 50459 topic_id: 26067 reply_id: 105605[/import]

[vito]

Hi rmbsoft,

I have tried the code and the event.target is passed to the ‘tap’ event listener. I am using Corona Version 2012.807

I attached the entire source code. Just change the ‘crate.png’ to your own image file.

Cheers

[code]
ListGroup = display.newGroup()
shadeRect = display.newRect( 0, 140, 1024, 535 )
shadeRect:setFillColor( 0, 0, 0, 255 )
shadeRect.alpha = 0.3
ListGroup:insert(shadeRect)

function ImageClicked(event)
local t = event.target
print ("Clicked "…t.name)
end

Image1 = display.newImage(“crate.png”, 0,0 )

Image1:addEventListener(“tap”, ImageClicked )
Image1.name = “hello 1”
ListGroup:insert(Image1)

Image2 = display.newImage(“crate.png”, 0,60 )
Image2.name = “hello 2”
Image2:addEventListener(“tap”, ImageClicked )
ListGroup:insert(Image2)

local function startDrag( event )

local t = event.target
local phase = event.phase

if “began” == phase then

Dragging = false
display.getCurrentStage():setFocus( t )
t.isFocus = true

– Store initial position
t.x0 = event.x - t.x
t.y0 = event.y - t.y

elseif t.isFocus then

if “moved” == phase then
Dragging = true

t.x = event.x - t.x0
t.y = event.y - t.y0

if t.x > 0 or t.x < 0 then
t.x = 0
end
if t.x < -1024 then
t.x = -1024
end

elseif “ended” == phase or “cancelled” == phase then

display.getCurrentStage():setFocus( nil )
t.isFocus = false

end
end

– Stop further propagation of touch event!
return true
end

ListGroup:addEventListener( “touch”, startDrag )
[/code] [import]uid: 68675 topic_id: 26067 reply_id: 105615[/import]

[rmbsoft]

@vito

Thank you so much for pointing that out, i was using version 760, so I am going to update to 807.

That should do the trick

Thanks again!
[import]uid: 50459 topic_id: 26067 reply_id: 105622[/import]

[peach_pellen]

Just FYI this actually works fine in 704 so if you find an issue in another build with tap and event.target please let me know so I can look into it.

Thanks,
Peach [import]uid: 52491 topic_id: 26067 reply_id: 105763[/import]

[rmbsoft]

@peach

I was using 760 Windows version, and i couldn’t use event.target with the tap event listener. I thought that this was added in builds after 760…

[import]uid: 50459 topic_id: 26067 reply_id: 105780[/import]

[peach_pellen]

Is that in our docs somewhere? I may be mistaken but the version I tested with should have been 704… Hrm. Will recheck. [import]uid: 52491 topic_id: 26067 reply_id: 105968[/import]

[rmbsoft]

@peach

According to the (probably outdated) documentation, the tap event still doesn’t have an event.target property, thats why I was surprised the newer version did…

https://developer.anscamobile.com/reference/index/events/tap/eventname

[import]uid: 50459 topic_id: 26067 reply_id: 105990[/import]

[peach_pellen]

Ah, I see. The docs are actually in the process of being updated so hopefully confusion over things like this shouldn’t occur in the future. (We know the docs need work.)

Thanks for clarifying

Peach [import]uid: 52491 topic_id: 26067 reply_id: 106140[/import]