Need help with touch event with image in scrollview

WarrenW · June 14, 2013, 12:16am

Hi,

I use this touch even on another page with just an image. Now on this next page I have inserted the background image in a scrollView and want to use the onSceneTouch even I have coded. But when I click it does not do anything. I must have something wrong with it using a scrollView control.

Any ideas? Thanks!!!

Warren

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 = 505 } -- Touch event listener for background image local function onSceneTouch( event ) if event.phase == "began" and imgHome.ready then --MENU BAR if event.x \> 0 and event.y \> 0 and event.x \< 300 and event.y \< 300 then storyboard.gotoScene( "sceneHome" ) end 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 end return true end -- Called when the scene's view does not exist: function scene:createScene( event ) local screenGroup = self.view imgHome = display.newImage( "selectmenu.png" ) screenGroup:insert( imgHome ) imgHome.touch = onSceneTouch imgHome:addEventListener( "touch", onSceneTouch ) 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

dmccuskey · June 14, 2013, 5:23am

hi Warren,

i would try changing the function definition to this, adding ‘self’ to the parameter list.

local function onSceneTouch( self, event )

let me know if that helps.

cheers,
dmc

WarrenW · June 14, 2013, 12:49pm

I had it that way before and it did not work. I’m using the touch event and all just like I do on another scene that works. The only difference is I’m not using a scrollview control on it. So I know all of this has to do with the scrollview and just need to get the code right.

Thanks though!

WarrenW · June 14, 2013, 3:30pm

Instead of using one single image as the background do I need to add images as buttons instead for this? I really wanted to draw the click areas onto the background image and then just get the x/y area of where they clicked and performed the action based on that. Any thoughts?

Thanks

dmccuskey · June 14, 2013, 6:41pm

hi warren,

i tried your original code and it works fine, though i had to create a main.lua and call it from there.

i put your code from above in a file called ‘myscene.lua’ and created ‘main.lua’ with this:

local storyboard = require "storyboard" storyboard.gotoScene( "myscene" )

are you doing that ?

(and, it works without adding ‘self’ to the parameter list)

re: background image button, i would stick with your original plan of placing images/buttons inside of the scrollview. getting x/y coords is bringing me back to the days of imagemaps in HTML. having code based on coordinates is likely to give you problems.

cheers,
dmc

WarrenW · June 14, 2013, 7:29pm

Hi,

I do have another scene in between but i changed my main to call this page directly and still did same thing - nothing when clicked. So I added a button also and an event for it. I ran it and nothing for the button. I must be doing something wrong to disable any events from being called with controls in the scrollView control. This is holding me up so much. Can I see your code? Did you change anything? Are you on windows or a mac?

Thanks for your help!!!

Warren

Here is the code with the button added.

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 = 505 } -- Touch event listener for background image local function onSceneTouch( event ) if event.phase == "began" and imgHome.ready then --MENU BAR if event.x \> 0 and event.y \> 0 and event.x \< 300 and event.y \< 300 then storyboard.gotoScene( "sceneHome" ) end 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 end return true end local function onbtnLunchEvent( event ) local phase = event.phase --if "ended" == phase then native.showAlert( "Good", event.response, { "OK" } ) --end end function scene:createScene( event ) local screenGroup = self.view imgHome = display.newImage( "selectmenu.png" ) screenGroup:insert( imgHome ) imgHome.touch = onSceneTouch imgHome:addEventListener( "touch", onSceneTouch ) scrollView:insert( imgHome ) btnLunch = widget.newButton { left = 20, top = 100, width = 230, height = 60, label = "Play Again", fontSize = 14, id = "button\_1", onEvent = onbtnLunchEvent, } screenGroup:insert( btnLunch ) scrollView:insert( btnLunch ) 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

dmccuskey · June 14, 2013, 7:39pm

hi warren,

i literally copy/pasted your code into a file. i only added a print statement so that i could see if the button handler was firing.

i have attached a zip of my working directory. inside that you’ll see a screenshot of the output in my terminal. you can see all of the being/end/move events from the button clicks/moves.

i’m on a mac.

cheers,
dmc

WarrenW · June 14, 2013, 7:58pm

Weird because this one works! I’ll have to use it for a template and work with it. Thanks! It did not get past printing the event because the imgHome.ready is returning nil. When I removed that check it worked. So I have to resolve that also but I am much closer!!

Thanks again,

Warren

dmccuskey · June 14, 2013, 9:22pm

i’m glad that i could help !
cheers,
dmc

dmccuskey · June 14, 2013, 5:23am

hi Warren,

i would try changing the function definition to this, adding ‘self’ to the parameter list.

local function onSceneTouch( self, event )

let me know if that helps.

cheers,
dmc

WarrenW · June 14, 2013, 12:49pm

I had it that way before and it did not work. I’m using the touch event and all just like I do on another scene that works. The only difference is I’m not using a scrollview control on it. So I know all of this has to do with the scrollview and just need to get the code right.

Thanks though!

WarrenW · June 14, 2013, 3:30pm

Instead of using one single image as the background do I need to add images as buttons instead for this? I really wanted to draw the click areas onto the background image and then just get the x/y area of where they clicked and performed the action based on that. Any thoughts?

Thanks

dmccuskey · June 14, 2013, 6:41pm

hi warren,

i tried your original code and it works fine, though i had to create a main.lua and call it from there.

i put your code from above in a file called ‘myscene.lua’ and created ‘main.lua’ with this:

local storyboard = require "storyboard" storyboard.gotoScene( "myscene" )

are you doing that ?

(and, it works without adding ‘self’ to the parameter list)

re: background image button, i would stick with your original plan of placing images/buttons inside of the scrollview. getting x/y coords is bringing me back to the days of imagemaps in HTML. having code based on coordinates is likely to give you problems.

cheers,
dmc

WarrenW · June 14, 2013, 7:29pm

Hi,

I do have another scene in between but i changed my main to call this page directly and still did same thing - nothing when clicked. So I added a button also and an event for it. I ran it and nothing for the button. I must be doing something wrong to disable any events from being called with controls in the scrollView control. This is holding me up so much. Can I see your code? Did you change anything? Are you on windows or a mac?

Thanks for your help!!!

Warren

Here is the code with the button added.

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 = 505 } -- Touch event listener for background image local function onSceneTouch( event ) if event.phase == "began" and imgHome.ready then --MENU BAR if event.x \> 0 and event.y \> 0 and event.x \< 300 and event.y \< 300 then storyboard.gotoScene( "sceneHome" ) end 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 end return true end local function onbtnLunchEvent( event ) local phase = event.phase --if "ended" == phase then native.showAlert( "Good", event.response, { "OK" } ) --end end function scene:createScene( event ) local screenGroup = self.view imgHome = display.newImage( "selectmenu.png" ) screenGroup:insert( imgHome ) imgHome.touch = onSceneTouch imgHome:addEventListener( "touch", onSceneTouch ) scrollView:insert( imgHome ) btnLunch = widget.newButton { left = 20, top = 100, width = 230, height = 60, label = "Play Again", fontSize = 14, id = "button\_1", onEvent = onbtnLunchEvent, } screenGroup:insert( btnLunch ) scrollView:insert( btnLunch ) 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

dmccuskey · June 14, 2013, 7:39pm

hi warren,

i literally copy/pasted your code into a file. i only added a print statement so that i could see if the button handler was firing.

i have attached a zip of my working directory. inside that you’ll see a screenshot of the output in my terminal. you can see all of the being/end/move events from the button clicks/moves.

i’m on a mac.

cheers,
dmc

WarrenW · June 14, 2013, 7:58pm

Weird because this one works! I’ll have to use it for a template and work with it. Thanks! It did not get past printing the event because the imgHome.ready is returning nil. When I removed that check it worked. So I have to resolve that also but I am much closer!!

Thanks again,

Warren

dmccuskey · June 14, 2013, 9:22pm

i’m glad that i could help !
cheers,
dmc