Touch event not working in scrollView

Hello,

I’m trying to work with the scrollView again and cannot get any touch event listener to work. All I am doing is creating a scrollView and placing an image in it. That scrolls fine. But as soon as I assign the touch event listener to the image I added to the scrollView it no longer scrolls. Below is my code for the scene.

Thanks!

When these lines are removed it scrolls okay:

 imgHome.touch = onSceneTouch  
 imgHome:addEventListener( "touch", imgHome )  

Full scene code:

----------------------------------------------------------------------------------  
--  
-- sceneSelectMenu.lua  
--  
----------------------------------------------------------------------------------  
  
local storyboard = require( "storyboard" )  
storyboard.removeAll()  
local scene = storyboard.newScene()  
local widget = require "widget"  
local imgHome  
 local scrollView = widget.newScrollView{  
 width = 320,  
 height = 480,  
 top = 0,  
 left = 0,  
 scrollWidth = 320,  
 scrollHeight = 705,  
 maskFile="maskSelectMenu.png",  
 listener = scrollViewListener,  
 }  
-- Touch event listener for background image  
local function onSceneTouch( self, event )  
 if event.phase == "began" and imgHome.ready then -- [!] Using a flag instead  
 --MENU BAR  
 if event.x \> 0 and event.y \> 90 and event.x \< 48 and event.y \< 121 then  
 storyboard.gotoScene( "SceneHome" )  
 end  
 end  
 return true  
end  
  
-- function to listen to scrollView events  
local function scrollViewListener( event )  
 local s = event.target -- reference to scrollView object  
  
 if event.type == "beganScroll" then  
 print( "beganScroll event type" )  
  
 elseif event.type == "endedScroll" then  
 print( "endedScroll event type" )  
  
 elseif event.type == "movingToTopLimit" then  
 print( "movingToTopLimit event type" )  
  
 elseif event.type == "movingToBottomLimit" then  
 print( "movingToBottomLimit event type" )  
  
 elseif event.type == "movingToLeftLimit" then  
 print( "movingToLeftLimit event type" )  
  
 elseif event.type == "movingToRightLimit" then  
 print( "movingToRightLimit event type" )  
 end  
end  
  
---------------------------------------------------------------------------------  
-- BEGINNING OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- Called when the scene's view does not exist:  
function scene:createScene( event )  
 local group = self.view  
  
 local screenGroup = self.view  
 imgHome = display.newImage( "background.png" )  
  
 imgHome.touch = onSceneTouch  
 imgHome:addEventListener( "touch", imgHome )  
  
 scrollView:insert( imgHome )  
end  
  
-- Called immediately after scene has moved onscreen:  
function scene:enterScene( event )  
 local group = self.view  
 imgHome.ready = true  
  
 --[[[!] Disabled since the listener is added above.  
 -- Update Lua memory text display  
 local showMem = function()  
 imgHome:addEventListener( "touch", imgHome )  
 end  
 local memTimer = timer.performWithDelay( 1000, showMem, 1 )  
 --]]  
  
end  
  
-- Called when scene is about to move offscreen:  
function scene:exitScene( event )  
 local group = self.view  
 imgHome.ready = false  
end  
  
-- Called prior to the removal of scene's "view" (display group)  
function scene:destroyScene( event )  
 local group = self.view  
end  
---------------------------------------------------------------------------------  
-- END OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- "createScene" event is dispatched if scene's view does not exist  
scene:addEventListener( "createScene", scene )  
  
-- "enterScene" event is dispatched whenever scene transition has finished  
scene:addEventListener( "enterScene", scene )  
  
-- "exitScene" event is dispatched before next scene's transition begins  
scene:addEventListener( "exitScene", scene )  
  
-- "destroyScene" event is dispatched before view is unloaded, which can be  
-- automatically unloaded in low memory situations, or explicitly via a call to  
-- storyboard.purgeScene() or storyboard.removeScene().  
scene:addEventListener( "destroyScene", scene )  
---------------------------------------------------------------------------------  
return scene  

[import]uid: 184193 topic_id: 35736 reply_id: 335736[/import]

You’re making the scrollView before declaring the listener. Not sure if that’s exactly your problem, but the touch listener on the scrollView itself won’t work unless you either (a) move the touch function BEFORE the scrollView, or (b) predeclare the variable [import]uid: 41884 topic_id: 35736 reply_id: 142103[/import]

Thanks for the reply. I moved the onSceneTouch even after I created the scrollView and that did not work. Any other ideas?
[import]uid: 184193 topic_id: 35736 reply_id: 142110[/import]

I see a couple of things. First, it doesn’t look like the scrollView is added to the “group” displayGroup for the Storyboard module. Maybe it matters, maybe it doesn’t but it’s usually a good idea to have everything in the “group” displayGroup unless you have a good reason for them to not be.

Second, the “began” event.phase isn’t recognized by the scrollView/button widget API. See here:

http://docs.coronalabs.com/api/library/widget/newButton.html#onevent-optional

I’d suggest changing the event.phase to “press” instead of “began”. Let us know if you get it sorted. [import]uid: 135394 topic_id: 35736 reply_id: 142115[/import]

Thanks again but those changes did not work. The scrollView still does not scroll. It has something to do with the touch event because it scrolls with this code if I remove the touch listener from the code. Once I add it back the image still shows but no scrolling. I added a print “test” in the touch event and it shows when i click down but nothing else fires. This is killing me!! :slight_smile:

Warren

----------------------------------------------------------------------------------  
--  
-- sceneSelectMenu.lua  
--  
----------------------------------------------------------------------------------  
  
local storyboard = require( "storyboard" )  
storyboard.removeAll()  
local scene = storyboard.newScene()  
local widget = require "widget"  
local imgHome  
-- Touch event listener for background image  
local function onSceneTouch( self, event )  
 print "test"  
 if event.phase == "press" and imgHome.ready then -- [!] Using a flag instead  
 print "released"  
 --MENU BAR  
 if event.x \> 0 and event.y \> 90 and event.x \< 48 and event.y \< 121 then  
 storyboard.gotoScene( "SceneHome" )  
 end  
 end  
 return true  
end  
 local scrollView = widget.newScrollView{  
 width = 320,  
 height = 480,  
 top = 0,  
 left = 0,  
 scrollWidth = 320,  
 scrollHeight = 705,  
 maskFile="maskSelectMenu.png",  
 listener = scrollViewListener,  
 }  
  
-- function to listen to scrollView events  
local function scrollViewListener( event )  
 local s = event.target -- reference to scrollView object  
  
 if event.type == "beganScroll" then  
 print( "beganScroll event type" )  
  
 elseif event.type == "endedScroll" then  
 print( "endedScroll event type" )  
  
 elseif event.type == "movingToTopLimit" then  
 print( "movingToTopLimit event type" )  
  
 elseif event.type == "movingToBottomLimit" then  
 print( "movingToBottomLimit event type" )  
  
 elseif event.type == "movingToLeftLimit" then  
 print( "movingToLeftLimit event type" )  
  
 elseif event.type == "movingToRightLimit" then  
 print( "movingToRightLimit event type" )  
 end  
end  
  
---------------------------------------------------------------------------------  
-- BEGINNING OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- Called when the scene's view does not exist:  
function scene:createScene( event )  
 local group = self.view  
  
 local screenGroup = self.view  
 imgHome = display.newImage( "background.png" )  
  
 imgHome.touch = onSceneTouch  
 imgHome:addEventListener( "touch", imgHome )  
  
 scrollView:insert( imgHome )  
  
 screenGroup:insert( scrollView )  
  
end  
-- Called immediately after scene has moved onscreen:  
function scene:enterScene( event )  
 local group = self.view  
 imgHome.ready = true  
  
 --[[[!] Disabled since the listener is added above.  
 -- Update Lua memory text display  
 local showMem = function()  
 imgHome:addEventListener( "touch", imgHome )  
 end  
 local memTimer = timer.performWithDelay( 1000, showMem, 1 )  
 --]]  
  
end  
-- Called when scene is about to move offscreen:  
function scene:exitScene( event )  
 local group = self.view  
 imgHome.ready = false  
end  
-- Called prior to the removal of scene's "view" (display group)  
function scene:destroyScene( event )  
 local group = self.view  
end  
---------------------------------------------------------------------------------  
-- END OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- "createScene" event is dispatched if scene's view does not exist  
scene:addEventListener( "createScene", scene )  
  
-- "enterScene" event is dispatched whenever scene transition has finished  
scene:addEventListener( "enterScene", scene )  
  
-- "exitScene" event is dispatched before next scene's transition begins  
scene:addEventListener( "exitScene", scene )  
  
-- "destroyScene" event is dispatched before view is unloaded, which can be  
-- automatically unloaded in low memory situations, or explicitly via a call to  
-- storyboard.purgeScene() or storyboard.removeScene().  
scene:addEventListener( "destroyScene", scene )  
  
---------------------------------------------------------------------------------  
  
return scene  

[import]uid: 184193 topic_id: 35736 reply_id: 142126[/import]

Wait, I’m confused. Are you encountering an issue with the the touch listener, or the scroll listener? I don’t think the scroll listener is needed for the new scrollView API. In addition, I don’t think that imgHome.ready call is doing anything at present. Try this out:

[lua]

local storyboard = require( “storyboard” )
storyboard.removeAll()
local scene = storyboard.newScene()
local widget = require “widget”
local imgHome

– Touch event listener for background image
local function onSceneTouch( self, event )
print “test”
if event.phase == “press” and imgHome.ready then – [!] Using a flag instead
print “released”
–MENU BAR
if event.x > 0 and event.y > 90 and event.x < 48 and event.y < 121 then
storyboard.gotoScene( “SceneHome” )
end
end
return true
end

local scrollView = widget.newScrollView{
width = 320,
height = 480,
top = 0,
left = 0,
scrollWidth = 320,
scrollHeight = 705,
– maskFile=“maskSelectMenu.png”,
}

– Called when the scene’s view does not exist:
function scene:createScene( event )
local group = self.view

local screenGroup = self.view
imgHome = display.newImage( “background.png” )

imgHome.touch = onSceneTouch
imgHome:addEventListener( “touch”, imgHome )

scrollView:insert( imgHome )

screenGroup:insert( scrollView )

end

– Called immediately after scene has moved onscreen:
function scene:enterScene( event )
local group = self.view
–[[
imgHome.ready = true
[!] Disabled since the listener is added above.
– Update Lua memory text display
local showMem = function()
imgHome:addEventListener( “touch”, imgHome )
end
local memTimer = timer.performWithDelay( 1000, showMem, 1 )
–]]

end

– Called when scene is about to move offscreen:
function scene:exitScene( event )
local group = self.view
imgHome.ready = false
end

– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )
local group = self.view
end

scene:addEventListener( “createScene”, scene )

scene:addEventListener( “enterScene”, scene )

scene:addEventListener( “exitScene”, scene )
scene:addEventListener( “destroyScene”, scene )


[/lua] [import]uid: 135394 topic_id: 35736 reply_id: 142128[/import]

I glanced through this and I don’t see where you’re handing off the touch event to the background. Normally on the graphic that you’ve added a touch handler too, if you’re moving then you have to pass the event on to the background.

Something like this.

 elseif event.phase == "moved" then -- Check if you moved your finger while touching  
 local dx = math.abs( event.x - event.xStart ) -- Get the x-transition of the touch-input  
 local dy = math.abs( event.y - event.yStart ) -- Get the y-transition of the touch-input  
 if dx \> 5 or dy \> 5 then  
 scrollView:takeFocus( event ) -- If the x- or y-transition is more than 5 put the focus to your scrollview  
 end  

[import]uid: 199310 topic_id: 35736 reply_id: 142146[/import]

Rob, it works! I added the code and it started to scroll. And the touch event works also like I want. Hopefully someone else can use what you posted here.

Thanks!!!

Warren
[import]uid: 184193 topic_id: 35736 reply_id: 142211[/import]

You’re making the scrollView before declaring the listener. Not sure if that’s exactly your problem, but the touch listener on the scrollView itself won’t work unless you either (a) move the touch function BEFORE the scrollView, or (b) predeclare the variable [import]uid: 41884 topic_id: 35736 reply_id: 142103[/import]

Thanks for the reply. I moved the onSceneTouch even after I created the scrollView and that did not work. Any other ideas?
[import]uid: 184193 topic_id: 35736 reply_id: 142110[/import]

I see a couple of things. First, it doesn’t look like the scrollView is added to the “group” displayGroup for the Storyboard module. Maybe it matters, maybe it doesn’t but it’s usually a good idea to have everything in the “group” displayGroup unless you have a good reason for them to not be.

Second, the “began” event.phase isn’t recognized by the scrollView/button widget API. See here:

http://docs.coronalabs.com/api/library/widget/newButton.html#onevent-optional

I’d suggest changing the event.phase to “press” instead of “began”. Let us know if you get it sorted. [import]uid: 135394 topic_id: 35736 reply_id: 142115[/import]

Thanks again but those changes did not work. The scrollView still does not scroll. It has something to do with the touch event because it scrolls with this code if I remove the touch listener from the code. Once I add it back the image still shows but no scrolling. I added a print “test” in the touch event and it shows when i click down but nothing else fires. This is killing me!! :slight_smile:

Warren

----------------------------------------------------------------------------------  
--  
-- sceneSelectMenu.lua  
--  
----------------------------------------------------------------------------------  
  
local storyboard = require( "storyboard" )  
storyboard.removeAll()  
local scene = storyboard.newScene()  
local widget = require "widget"  
local imgHome  
-- Touch event listener for background image  
local function onSceneTouch( self, event )  
 print "test"  
 if event.phase == "press" and imgHome.ready then -- [!] Using a flag instead  
 print "released"  
 --MENU BAR  
 if event.x \> 0 and event.y \> 90 and event.x \< 48 and event.y \< 121 then  
 storyboard.gotoScene( "SceneHome" )  
 end  
 end  
 return true  
end  
 local scrollView = widget.newScrollView{  
 width = 320,  
 height = 480,  
 top = 0,  
 left = 0,  
 scrollWidth = 320,  
 scrollHeight = 705,  
 maskFile="maskSelectMenu.png",  
 listener = scrollViewListener,  
 }  
  
-- function to listen to scrollView events  
local function scrollViewListener( event )  
 local s = event.target -- reference to scrollView object  
  
 if event.type == "beganScroll" then  
 print( "beganScroll event type" )  
  
 elseif event.type == "endedScroll" then  
 print( "endedScroll event type" )  
  
 elseif event.type == "movingToTopLimit" then  
 print( "movingToTopLimit event type" )  
  
 elseif event.type == "movingToBottomLimit" then  
 print( "movingToBottomLimit event type" )  
  
 elseif event.type == "movingToLeftLimit" then  
 print( "movingToLeftLimit event type" )  
  
 elseif event.type == "movingToRightLimit" then  
 print( "movingToRightLimit event type" )  
 end  
end  
  
---------------------------------------------------------------------------------  
-- BEGINNING OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- Called when the scene's view does not exist:  
function scene:createScene( event )  
 local group = self.view  
  
 local screenGroup = self.view  
 imgHome = display.newImage( "background.png" )  
  
 imgHome.touch = onSceneTouch  
 imgHome:addEventListener( "touch", imgHome )  
  
 scrollView:insert( imgHome )  
  
 screenGroup:insert( scrollView )  
  
end  
-- Called immediately after scene has moved onscreen:  
function scene:enterScene( event )  
 local group = self.view  
 imgHome.ready = true  
  
 --[[[!] Disabled since the listener is added above.  
 -- Update Lua memory text display  
 local showMem = function()  
 imgHome:addEventListener( "touch", imgHome )  
 end  
 local memTimer = timer.performWithDelay( 1000, showMem, 1 )  
 --]]  
  
end  
-- Called when scene is about to move offscreen:  
function scene:exitScene( event )  
 local group = self.view  
 imgHome.ready = false  
end  
-- Called prior to the removal of scene's "view" (display group)  
function scene:destroyScene( event )  
 local group = self.view  
end  
---------------------------------------------------------------------------------  
-- END OF YOUR IMPLEMENTATION  
---------------------------------------------------------------------------------  
  
-- "createScene" event is dispatched if scene's view does not exist  
scene:addEventListener( "createScene", scene )  
  
-- "enterScene" event is dispatched whenever scene transition has finished  
scene:addEventListener( "enterScene", scene )  
  
-- "exitScene" event is dispatched before next scene's transition begins  
scene:addEventListener( "exitScene", scene )  
  
-- "destroyScene" event is dispatched before view is unloaded, which can be  
-- automatically unloaded in low memory situations, or explicitly via a call to  
-- storyboard.purgeScene() or storyboard.removeScene().  
scene:addEventListener( "destroyScene", scene )  
  
---------------------------------------------------------------------------------  
  
return scene  

[import]uid: 184193 topic_id: 35736 reply_id: 142126[/import]

Wait, I’m confused. Are you encountering an issue with the the touch listener, or the scroll listener? I don’t think the scroll listener is needed for the new scrollView API. In addition, I don’t think that imgHome.ready call is doing anything at present. Try this out:

[lua]

local storyboard = require( “storyboard” )
storyboard.removeAll()
local scene = storyboard.newScene()
local widget = require “widget”
local imgHome

– Touch event listener for background image
local function onSceneTouch( self, event )
print “test”
if event.phase == “press” and imgHome.ready then – [!] Using a flag instead
print “released”
–MENU BAR
if event.x > 0 and event.y > 90 and event.x < 48 and event.y < 121 then
storyboard.gotoScene( “SceneHome” )
end
end
return true
end

local scrollView = widget.newScrollView{
width = 320,
height = 480,
top = 0,
left = 0,
scrollWidth = 320,
scrollHeight = 705,
– maskFile=“maskSelectMenu.png”,
}

– Called when the scene’s view does not exist:
function scene:createScene( event )
local group = self.view

local screenGroup = self.view
imgHome = display.newImage( “background.png” )

imgHome.touch = onSceneTouch
imgHome:addEventListener( “touch”, imgHome )

scrollView:insert( imgHome )

screenGroup:insert( scrollView )

end

– Called immediately after scene has moved onscreen:
function scene:enterScene( event )
local group = self.view
–[[
imgHome.ready = true
[!] Disabled since the listener is added above.
– Update Lua memory text display
local showMem = function()
imgHome:addEventListener( “touch”, imgHome )
end
local memTimer = timer.performWithDelay( 1000, showMem, 1 )
–]]

end

– Called when scene is about to move offscreen:
function scene:exitScene( event )
local group = self.view
imgHome.ready = false
end

– Called prior to the removal of scene’s “view” (display group)
function scene:destroyScene( event )
local group = self.view
end

scene:addEventListener( “createScene”, scene )

scene:addEventListener( “enterScene”, scene )

scene:addEventListener( “exitScene”, scene )
scene:addEventListener( “destroyScene”, scene )


[/lua] [import]uid: 135394 topic_id: 35736 reply_id: 142128[/import]

I glanced through this and I don’t see where you’re handing off the touch event to the background. Normally on the graphic that you’ve added a touch handler too, if you’re moving then you have to pass the event on to the background.

Something like this.

 elseif event.phase == "moved" then -- Check if you moved your finger while touching  
 local dx = math.abs( event.x - event.xStart ) -- Get the x-transition of the touch-input  
 local dy = math.abs( event.y - event.yStart ) -- Get the y-transition of the touch-input  
 if dx \> 5 or dy \> 5 then  
 scrollView:takeFocus( event ) -- If the x- or y-transition is more than 5 put the focus to your scrollview  
 end  

[import]uid: 199310 topic_id: 35736 reply_id: 142146[/import]

Rob, it works! I added the code and it started to scroll. And the touch event works also like I want. Hopefully someone else can use what you posted here.

Thanks!!!

Warren
[import]uid: 184193 topic_id: 35736 reply_id: 142211[/import]