simple Buttons

gyrosp

Hi,

I've looked in the docs but found nothing so far.
How can I create a simple button with gideros and change its picture when pressed?

ar2rsawseen

Here is more information about Button class

http://appcodingeasy.com/Gideros-Mobile/Gideros-mobile-button-class

You need to download library, add it to project and use it as described

gyrosp

Thanks .

It seems as tutorials and docs for Gideros are spread throughout the whole internet .

ar2rsawseen

Here is one resource that tried to combine them all:
http://giderostutorials.com/

MauMau

I am just playing around with the button sample and wonder why it registers BOTH, mouse and touch events to the button. The touch events seem to be useless in this example.

Wouldn't it be enough to use mouse events only to create a button -like this?

Button = Core.class(Sprite)   function Button:init(upState, downState) self.upState = upState self.downState = downState   self.focus = false   -- set the visual state as "up" self:updateVisualState(false)   -- register to all mouse and touch events self:addEventListener(Event.MOUSE_DOWN, self.onTouch, self) self:addEventListener(Event.MOUSE_MOVE, self.onTouch, self) self:addEventListener(Event.MOUSE_UP, self.onTouch, self) end   function Button:onTouch(event) local phase = event.type   -- MOUSE DOWN if phase == "mouseDown" then if self:hitTestPoint(event.x, event.y) then self.focus = true self:updateVisualState(true) event:stopPropagation() end elseif phase == "mouseMove" then if self.focus then if not self:hitTestPoint(event.x, event.y) then self.focus = false self:updateVisualState(false) end event:stopPropagation() end elseif phase == "mouseUp" then if self.focus then self.focus = false self:updateVisualState(false) self:dispatchEvent(Event.new("click")) -- button is clicked, dispatch "click" event event:stopPropagation() end end end   -- if state is true show downState else show upState function Button:updateVisualState(state) if state then if self:contains(self.upState) then self:removeChild(self.upState) end   if not self:contains(self.downState) then self:addChild(self.downState) end else if self:contains(self.downState) then self:removeChild(self.downState) end   if not self:contains(self.upState) then self:addChild(self.upState) end end end

ar2rsawseen

@MauMau I think that was for historical purpose/reference, when Gideros was first released, mouse events were only dispatched on Desktop, and touch events only dispatched on mobiles (or something like that, I can't even remember now), so in most cases you needed to handle them both

OZApps

@maumau there is a glaring error in your code. Since using Lua frameworks touch handlers is the most common routines, this stood out immediately.

in the phase == "mouseMove" you are checking for if self.focus and if the touch is outside of the button, you set self.focus to false, but now the user can *NEVER* comback on to the object in that touch lifetime.

so you might have to separate that into when the touch is outside and when the touch is inside but not alter the self.focus and similarly in the mouseUp check again for where the touch was inside or outside.

MauMau

Thanks for pointing that out, OZApps. I modified and shortened the code as below and it seems to work fine now:

Button = Core.class(Sprite)   function Button:init(upState, downState) self.upState = upState self.downState = downState   self:addChild(self.upState) self:addChild(self.downState) self.downState:setVisible(false)   self.focus = false   -- register to all mouse and touch events self:addEventListener(Event.MOUSE_DOWN, self.onTouch, self) self:addEventListener(Event.MOUSE_MOVE, self.onTouch, self) self:addEventListener(Event.MOUSE_UP, self.onTouch, self) end   function Button:onTouch(event) local phase = event.type local hit = self:hitTestPoint(event.x, event.y) -- MOUSE DOWN if phase == "mouseDown" then if hit then self.focus = true self.downState:setVisible(true) event:stopPropagation() end elseif phase == "mouseMove" then if self.focus then self.downState:setVisible(hit) event:stopPropagation() end elseif phase == "mouseUp" then if self.focus and hit then self.focus = false self.downState:setVisible(false) self:dispatchEvent(Event.new("click")) -- button is clicked, dispatch "click" event event:stopPropagation() end end end

MauMau

Hm, while still playing around with the button code, I wonder if we need to check for a "cancelled" touch, too -as we did with the "big C" SDK:

elseif event.phase == "ended" or event.phase == "cancelled" then

If so, when does a "cancelled" event type occur and will event.type then named "cancelled"? And does this apply for both, mouse and touch events then?

ar2rsawseen

@MauMau yes certainly, it's called touchesCancel
http://docs.giderosmobile.com/reference/gideros/Sprite/Event.TOUCHES_CANCEL#Event.TOUCHES_CANCEL