Widget 2.0: Event.phase Broken For Movable Buttons

Hey everyone, 

first time post as I’ve been able to use the search button for the majority of my answers but the new Widget 2.0 has seemingly broken functionality of my event.phase for all things. I wasn’t happy to upgrade to say the least and appending “File” to everything.  I’m posting this specific issue first to get the major one of out of the way.

I have paired down the code to a manageable level,  basically I had multiple buttons in my game that you could move around the screen and they would stay there… well now they do nothing. =(  

Thanks,

Matt

----------------------------------------------------------------------------------------- -- level007.lua ----------------------------------------------------------------------------------------- local storyboard = require( "storyboard" ) local scene = storyboard.newScene() local widget = require( "widget" ) local function onbackBtnRelease() -- go to levels.lua scene storyboard.purgeScene("levels.level006") storyboard.gotoScene( "levels", "slideRight", 200 ) return true -- indicates successful touch end local backSound = audio.loadSound( "click\_back.wav" ) local function onbackBtnPress() audio.play( backSound ) end ----------------------------------------------------------------------------------------- -- BEGINNING OF YOUR IMPLEMENTATION ----------------------------------------------------------------------------------------- function scene:createScene( event ) local group = self.view local backBtn = widget.newButton{ defaultFile="lvl\_bar.png", width=678, height=64, onPress = onbackBtnPress, onRelease = onbackBtnRelease -- event listener function } backBtn:setReferencePoint( display.CenterReferencePoint ) backBtn.x = display.contentWidth \* 0.5 backBtn.y = 65 --Answer boxes local answerBox1 = widget.newButton{ label= "1", id = "answer1", font = "Berlin Sans FB Demi", defaultFile="answerbox.png", labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } }, fontSize = 60, width=74, height=74 } answerBox1:setReferencePoint( display.CenterReferencePoint ) answerBox1.x = 120 answerBox1.y = 240 answerBox1.rotation = -3 -- touch listener function function answerBox1:touch( event ) if event.phase == "began" then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true self.markX = self.x -- store x location of object self.markY = self.y -- store y location of object elseif self.isFocus then if event.phase == "moved" then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = x, y -- move object based on calculations above elseif event.phase == "ended" or event.phase == "cancelled" then -- end focus display.getCurrentStage():setFocus( self, nil ) self.isFocus = false end end return true end answerBox1:addEventListener( "touch", answerBox1 ) -- all display objects must be inserted into group group:insert( backBtn ) group:insert( answerBox1 ) end -- Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view end -- Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view storyboard.purgeScene( "level007" ) end -- If scene view is removed, scene:destroyScene() will be called just prior to: function scene:destroyScene( event ) local group = self.view if backBtn then backBtn:removeSelf() -- widgets must be manually removed backBtn = nil end if answerBox1 then answerBox1:removeSelf() -- widgets must be manually removed answerBox1 = nil end end scene:addEventListener( "createScene", scene ) scene:addEventListener( "enterScene", scene ) scene:addEventListener( "exitScene", scene ) scene:addEventListener( "destroyScene", scene ) ----------------------------------------------------------------------------------------- return scene

Hey everyone, 

first time post as I’ve been able to use the search button for the majority of my answers but the new Widget 2.0 has seemingly broken functionality of my event.phase for all things. I wasn’t happy to upgrade to say the least and appending “File” to everything.  I’m posting this specific issue first to get the major one of out of the way.

I have paired down the code to a manageable level,  basically I had multiple buttons in my game that you could move around the screen and they would stay there… well now they do nothing. =(  

Thanks,

Matt

----------------------------------------------------------------------------------------- – level007.lua ----------------------------------------------------------------------------------------- local storyboard = require( “storyboard” ) local scene = storyboard.newScene() local widget = require( “widget” ) local function onbackBtnRelease() – go to levels.lua scene storyboard.purgeScene(“levels.level006”) storyboard.gotoScene( “levels”, “slideRight”, 200 ) return true – indicates successful touch end local backSound = audio.loadSound( “click_back.wav” ) local function onbackBtnPress() audio.play( backSound ) end ----------------------------------------------------------------------------------------- – BEGINNING OF YOUR IMPLEMENTATION ----------------------------------------------------------------------------------------- function scene:createScene( event ) local group = self.view local backBtn = widget.newButton{ defaultFile=“lvl_bar.png”, width=678, height=64, onPress = onbackBtnPress, onRelease = onbackBtnRelease – event listener function } backBtn:setReferencePoint( display.CenterReferencePoint ) backBtn.x = display.contentWidth * 0.5 backBtn.y = 65 --Answer boxes local answerBox1 = widget.newButton{ label= “1”, id = “answer1”, font = “Berlin Sans FB Demi”, defaultFile=“answerbox.png”, labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } }, fontSize = 60, width=74, height=74 } answerBox1:setReferencePoint( display.CenterReferencePoint ) answerBox1.x = 120 answerBox1.y = 240 answerBox1.rotation = -3 – touch listener function function answerBox1:touch( event ) if event.phase == “began” then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true self.markX = self.x – store x location of object self.markY = self.y – store y location of object elseif self.isFocus then if event.phase == “moved” then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = x, y – move object based on calculations above elseif event.phase == “ended” or event.phase == “cancelled” then – end focus display.getCurrentStage():setFocus( self, nil ) self.isFocus = false end end return true end answerBox1:addEventListener( “touch”, answerBox1 ) – all display objects must be inserted into group group:insert( backBtn ) group:insert( answerBox1 ) end – Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view end – Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view storyboard.purgeScene( “level007” ) end – If scene view is removed, scene:destroyScene() will be called just prior to: function scene:destroyScene( event ) local group = self.view if backBtn then backBtn:removeSelf() – widgets must be manually removed backBtn = nil end if answerBox1 then answerBox1:removeSelf() – widgets must be manually removed answerBox1 = nil end end scene:addEventListener( “createScene”, scene ) scene:addEventListener( “enterScene”, scene ) scene:addEventListener( “exitScene”, scene ) scene:addEventListener( “destroyScene”, scene ) ----------------------------------------------------------------------------------------- return scene

You should be using the onEvent listener with widget buttons.

See the below working example:

----------------------------------------------------------------------------------------- -- level007.lua ----------------------------------------------------------------------------------------- local widget = require( "widget" ) local backBtn = widget.newButton{ --defaultFile="lvl\_bar.png", width=678, height=64, onPress = onbackBtnPress, onRelease = onbackBtnRelease -- event listener function } backBtn:setReferencePoint( display.CenterReferencePoint ) backBtn.x = display.contentWidth \* 0.5 backBtn.y = 65 -- touch listener function local function answerBox1Touch( event ) local target = event.target if event.phase == "began" then display.getCurrentStage():setFocus( target, event.id ) target.isFocus = true target.markX = target.x -- store x location of object target.markY = target.y -- store y location of object elseif target.isFocus then if event.phase == "moved" then local x = (event.x - event.xStart) + target.markX local y = (event.y - event.yStart) + target.markY target.x, target.y = x, y -- move object based on calculations above elseif event.phase == "ended" or event.phase == "cancelled" then -- end focus display.getCurrentStage():setFocus( target, nil ) target.isFocus = false end end return true end --Answer boxes local answerBox1 = widget.newButton{ label= "1", id = "answer1", font = "Berlin Sans FB Demi", --defaultFile="answerbox.png", labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } }, fontSize = 60, onEvent = answerBox1Touch, width=74, height=74 } answerBox1:setReferencePoint( display.CenterReferencePoint ) answerBox1.x = 120 answerBox1.y = 240 answerBox1.rotation = -3

It Works! Thanks. It all makes sense now

One thing I noticed is that you commented out the image,  why if I add it back for the button it kills the functionality ?

Really? I only commented it out because I didn’t have the assets. Feel free to email me the example and I’ll take a look: danny[at]coronalabs[dot]com

Edit: Ok so the problem is that you don’t need to set focus on the button in your touch handler as the widget library already sets focus on the button internally. Removing the set focus lines makes everything work as expected.

Hey everyone, 

first time post as I’ve been able to use the search button for the majority of my answers but the new Widget 2.0 has seemingly broken functionality of my event.phase for all things. I wasn’t happy to upgrade to say the least and appending “File” to everything.  I’m posting this specific issue first to get the major one of out of the way.

I have paired down the code to a manageable level,  basically I had multiple buttons in my game that you could move around the screen and they would stay there… well now they do nothing. =(  

Thanks,

Matt

----------------------------------------------------------------------------------------- – level007.lua ----------------------------------------------------------------------------------------- local storyboard = require( “storyboard” ) local scene = storyboard.newScene() local widget = require( “widget” ) local function onbackBtnRelease() – go to levels.lua scene storyboard.purgeScene(“levels.level006”) storyboard.gotoScene( “levels”, “slideRight”, 200 ) return true – indicates successful touch end local backSound = audio.loadSound( “click_back.wav” ) local function onbackBtnPress() audio.play( backSound ) end ----------------------------------------------------------------------------------------- – BEGINNING OF YOUR IMPLEMENTATION ----------------------------------------------------------------------------------------- function scene:createScene( event ) local group = self.view local backBtn = widget.newButton{ defaultFile=“lvl_bar.png”, width=678, height=64, onPress = onbackBtnPress, onRelease = onbackBtnRelease – event listener function } backBtn:setReferencePoint( display.CenterReferencePoint ) backBtn.x = display.contentWidth * 0.5 backBtn.y = 65 --Answer boxes local answerBox1 = widget.newButton{ label= “1”, id = “answer1”, font = “Berlin Sans FB Demi”, defaultFile=“answerbox.png”, labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } }, fontSize = 60, width=74, height=74 } answerBox1:setReferencePoint( display.CenterReferencePoint ) answerBox1.x = 120 answerBox1.y = 240 answerBox1.rotation = -3 – touch listener function function answerBox1:touch( event ) if event.phase == “began” then display.getCurrentStage():setFocus( self, event.id ) self.isFocus = true self.markX = self.x – store x location of object self.markY = self.y – store y location of object elseif self.isFocus then if event.phase == “moved” then local x = (event.x - event.xStart) + self.markX local y = (event.y - event.yStart) + self.markY self.x, self.y = x, y – move object based on calculations above elseif event.phase == “ended” or event.phase == “cancelled” then – end focus display.getCurrentStage():setFocus( self, nil ) self.isFocus = false end end return true end answerBox1:addEventListener( “touch”, answerBox1 ) – all display objects must be inserted into group group:insert( backBtn ) group:insert( answerBox1 ) end – Called immediately after scene has moved onscreen: function scene:enterScene( event ) local group = self.view end – Called when scene is about to move offscreen: function scene:exitScene( event ) local group = self.view storyboard.purgeScene( “level007” ) end – If scene view is removed, scene:destroyScene() will be called just prior to: function scene:destroyScene( event ) local group = self.view if backBtn then backBtn:removeSelf() – widgets must be manually removed backBtn = nil end if answerBox1 then answerBox1:removeSelf() – widgets must be manually removed answerBox1 = nil end end scene:addEventListener( “createScene”, scene ) scene:addEventListener( “enterScene”, scene ) scene:addEventListener( “exitScene”, scene ) scene:addEventListener( “destroyScene”, scene ) ----------------------------------------------------------------------------------------- return scene

You should be using the onEvent listener with widget buttons.

See the below working example:

----------------------------------------------------------------------------------------- -- level007.lua ----------------------------------------------------------------------------------------- local widget = require( "widget" ) local backBtn = widget.newButton{ --defaultFile="lvl\_bar.png", width=678, height=64, onPress = onbackBtnPress, onRelease = onbackBtnRelease -- event listener function } backBtn:setReferencePoint( display.CenterReferencePoint ) backBtn.x = display.contentWidth \* 0.5 backBtn.y = 65 -- touch listener function local function answerBox1Touch( event ) local target = event.target if event.phase == "began" then display.getCurrentStage():setFocus( target, event.id ) target.isFocus = true target.markX = target.x -- store x location of object target.markY = target.y -- store y location of object elseif target.isFocus then if event.phase == "moved" then local x = (event.x - event.xStart) + target.markX local y = (event.y - event.yStart) + target.markY target.x, target.y = x, y -- move object based on calculations above elseif event.phase == "ended" or event.phase == "cancelled" then -- end focus display.getCurrentStage():setFocus( target, nil ) target.isFocus = false end end return true end --Answer boxes local answerBox1 = widget.newButton{ label= "1", id = "answer1", font = "Berlin Sans FB Demi", --defaultFile="answerbox.png", labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } }, fontSize = 60, onEvent = answerBox1Touch, width=74, height=74 } answerBox1:setReferencePoint( display.CenterReferencePoint ) answerBox1.x = 120 answerBox1.y = 240 answerBox1.rotation = -3

It Works! Thanks. It all makes sense now

One thing I noticed is that you commented out the image,  why if I add it back for the button it kills the functionality ?

Really? I only commented it out because I didn’t have the assets. Feel free to email me the example and I’ll take a look: danny[at]coronalabs[dot]com

Edit: Ok so the problem is that you don’t need to set focus on the button in your touch handler as the widget library already sets focus on the button internally. Removing the set focus lines makes everything work as expected.

Hi Danny,

if I add the defaultFile to the widget button, it’s can’t move when touch event!

–defaultFile=“answerbox.png”,

regards,

ray

Hi Ray,

Can you show your entire code here (for the widget)? And also, which Build # of Corona are you using?

Thanks,

Brent

Hi Brent,
 
I using  - CoronaSDK 2013.1154 ,[lua]-- touch listener function
local function answerBox1Touch( event )
local target = event.target

if event.phase == “began” then
display.getCurrentStage():setFocus( target, event.id )
target.isFocus = true
target.markX = target.x – store x location of object
target.markY = target.y – store y location of object

elseif target.isFocus then
if event.phase == “moved” then
local x = (event.x - event.xStart) + target.markX
local y = (event.y - event.yStart) + target.markY
target.x, target.y = x, y – move object based on calculations above

elseif event.phase == “ended” or event.phase == “cancelled” then – end focus
display.getCurrentStage():setFocus( target, nil )
target.isFocus = false
end
end
return true
end

–Answer boxes
local answerBox1 = widget.newButton{
label= “1”,
id = “answer1”,
font = “Berlin Sans FB Demi”,
defaultFile=“answerbox.png”,
labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } },
fontSize = 60,
onEvent = answerBox1Touch,
width=74, height=74
}
answerBox1:setReferencePoint( display.CenterReferencePoint )
answerBox1.x = 120
answerBox1.y = 240
answerBox1.rotation = -3[/lua]

just remove the comment  defaultFile=“answerbox.png”   --any image file

thanks!

Hi Danny,

if I add the defaultFile to the widget button, it’s can’t move when touch event!

–defaultFile=“answerbox.png”,

regards,

ray

Hi Ray,

Can you show your entire code here (for the widget)? And also, which Build # of Corona are you using?

Thanks,

Brent

Hi Brent,
 
I using  - CoronaSDK 2013.1154 ,[lua]-- touch listener function
local function answerBox1Touch( event )
local target = event.target

if event.phase == “began” then
display.getCurrentStage():setFocus( target, event.id )
target.isFocus = true
target.markX = target.x – store x location of object
target.markY = target.y – store y location of object

elseif target.isFocus then
if event.phase == “moved” then
local x = (event.x - event.xStart) + target.markX
local y = (event.y - event.yStart) + target.markY
target.x, target.y = x, y – move object based on calculations above

elseif event.phase == “ended” or event.phase == “cancelled” then – end focus
display.getCurrentStage():setFocus( target, nil )
target.isFocus = false
end
end
return true
end

–Answer boxes
local answerBox1 = widget.newButton{
label= “1”,
id = “answer1”,
font = “Berlin Sans FB Demi”,
defaultFile=“answerbox.png”,
labelColor = { default = { 0, 0, 0, 255 }, over={ 0 } },
fontSize = 60,
onEvent = answerBox1Touch,
width=74, height=74
}
answerBox1:setReferencePoint( display.CenterReferencePoint )
answerBox1.x = 120
answerBox1.y = 240
answerBox1.rotation = -3[/lua]

just remove the comment  defaultFile=“answerbox.png”   --any image file

thanks!