Widget Button release outside dont work

Games
#1

I haven been reading other posts , i have tried detect “ended” and “cancelled” but i can’t make it work. Can anyone add me a little light please. Move and press work great but i can’t detect when it finish outside the button
The idea is create a temporal semitransparent graphic which is dragged until the release position,but i can’t detected that moment. Sorry about my english.
Version 2012.746 (2012.12.8)
local function createItem(event)

if event.phase == “press” then
tempB = movieclip.newAnim{“temp.png”}
tempB.x = event.target.x
tempB.y = event.target.y

end

if event.phase == “moved” then
tempB.x=event.x
tempB.y=event.y

end

if event.phase == “ended” then

–display.remove( tempB )
tempB:removeSelf()

tempB = nil

print(event.phase)

end

return true
end
bottombar1= widget.newButton{

default=“image.png”,
over=“image.png”,
width=86, height=79,

onEvent=createItem

} [import]uid: 113117 topic_id: 22243 reply_id: 322243[/import]

#2

The button is working the way it’s designed to work, so that players who accidentally touch a button and notice can slide their finger away to avoid activating it. That said, there’s one hook that might work for what you want, which it looks like you haven’t tried yet, and that’s the “onDrag” function.

From the documentation: This is an optional function to be called while user is moving their finger on-screen, after they have already pressed the button. This callback function does not require you to test for an event.phase (as it only has one) and should return true.

I haven’t tried it out to see exactly how it works, but it seems like your best bet short of creating your own button class with the features the way you need them. [import]uid: 14598 topic_id: 22243 reply_id: 88625[/import]

#3

I found an alternative way to do it. I hide the button, and i started to drag the own button, so at the moment when i release the dragging the button is just in the place, so i can detect when it is released, then i put again the button in its previous position.
It is just an idea, perhaps helps to others. [import]uid: 113117 topic_id: 22243 reply_id: 88627[/import]

#4

noeguer , that’s a nice trick! Do you have to drag the button slowly for it to work, or can you zip your finger around the screen quickly and it keeps up with you? [import]uid: 14598 topic_id: 22243 reply_id: 88629[/import]

#5

I havent tested it on real device, only in simulator with the mouse, i move the fast i can the cursor and works anyway.

craterItem()

…

if event.phase == “moved” then
tempB.x=event.x
tempB.y=event.y
event.target.x=event.x
event.target.y=event.y

end

…

tempB is a temporal semitransparent image that i drag
event.target.x is the position of the parent button
event.x is the x of the dragging process.

So i make me sure the button which launched the function is always in the dragging position. [import]uid: 113117 topic_id: 22243 reply_id: 88633[/import]

#6

having a cancelled event phase triggered when user released outside of button extents or when os cancelled tracking of the button is what I modified ui.lua to do.

Now that the widget source code is hidden… how am I supposed to get the cancelled message (out of bounds or cancelled by OS?)… Hopefully you guys will add this to widget or have added it already (I am using b. 704)

e.g. these are the last few lines of the newButtonHandler function in my modded ui.lua file from build 704… see how they pass cancelled in two scenarios?

[snip] . . .  
  
 elseif "ended" == phase or "cancelled" == phase then   
 if over then   
 default.isVisible = true  
 over.isVisible = false  
 end  
  
 if "ended" == phase then  
 -- Only consider this a "click" if the user lifts their finger inside button's contentBounds  
 if isWithinBounds then  
 if onEvent then  
 buttonEvent.phase = "release"  
 result = onEvent( buttonEvent )  
 elseif onRelease then  
 result = onRelease( event )  
 end  
 else  
 if onEvent then  
 buttonEvent.phase = "cancelled"  
 result = onEvent ( buttonEvent )  
 end  
 end  
 else   
 buttonEvent.phase = "cancelled"  
 result = onEvent ( buttonEvent )  
 end  
  
 -- Allow touch events to be sent normally to the objects they "hit"  
 display.getCurrentStage():setFocus( self, nil )  
 self.isFocus = false  
 end  
 end  
  
 return result  
end

PS I also added support for @2x retina images, passing of button dimensions, and the ability to pass x,y values on drag if a draggable property is set (useful if you drag and slide to set a value for example). If you like I can post the full source to my modified portions of UI.lua for build 704.

Cheers,

Gary [import]uid: 106887 topic_id: 22243 reply_id: 89027[/import]

#7

I had the same exact issue after switching my buttons from the ui.lua paradigm over to the widget button. I was banging my head for half a day before getting this to work by extracting a small bit of the ui.lua code. It works by checking to see if the user has dragged his/her finger outside the button. Try this:

[blockcode]
local widget = require “widget”

local buttonPress = false --this is our marker to determine if the button is being pressed down

local function pushButton(event)
local btn = event.target
local bounds = btn.contentBounds
local x,y = event.x,event.y
local isWithinBounds = bounds.xMin <= x and bounds.xMax >= x and bounds.yMin <= y and bounds.yMax >= y

if event.phase == “press” then
buttonPress = “true”
–do your button-press activities…

elseif event.phase == “moved” then
if not isWithinBounds then
– button is still pushed down, but the touch location has moved
– outside the boundary of the button
buttonPress = “false”
– stop your button-press activities…
– and stop tracking the location of the touch event
display.getCurrentStage():setFocus(nil)
end

elseif event.phase == “release” then
buttonPress = “false”
–stop your button-press activities…
end
end

local button = widget.newButton{
default = “x.png”,
over = “xOver.png”,
onEvent = pushButton,
font = “Denmark”,
fontSize = 24,
label = “Push Button”,
labelColor = { default={ 255, 255, 255, 255 }, over={ 0 } }
}

local function buttonCall()
if buttonPress == “true” then
– activities to continuously take place while button is pressed
– down AND inside the button boundary
end
end

Runtime:addEventListener( “enterFrame”, buttonCall)

[/blockcode]

Note that the “moved” event phase now allows the user to move his/her finger around inside the button, and nothing will change until the finger goes outside the boundary. (in my case, the thrust for a ship’s engines will continue to push until the user either lets go or drags his/her finger outside the button)

Cheers!
Jerry Palmroos
Charlotte [import]uid: 151653 topic_id: 22243 reply_id: 114113[/import]

#8

@jerrypalmroos, sounds really cool - and thank you for sharing. I switched from ui.lua to widget in my new project. I’m sure your code will come in handy at some point. Thanks again.

Naomi [import]uid: 67217 topic_id: 22243 reply_id: 114141[/import]