Difference between revisions of "ButtonToggle class"
From GiderosMobile
(Created page with "__TOC__ '''A Button you can toggle on and off''' === ButtonToggle '''Class''' === <syntaxhighlight lang="lua"> -- -- ButtonToggle v1.0 -- Free to modify and use! -- Matja...") |
|||
Line 6: | Line 6: | ||
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> | ||
--[[ | --[[ | ||
− | -- ButtonToggle v1. | + | -- ButtonToggle v1.1 |
-- Free to modify and use! | -- Free to modify and use! | ||
-- Matjaž Bravc | -- Matjaž Bravc | ||
− | v1.0 - 19 | + | v1.1 - 2023-11-30 update to use setVisible |
+ | v1.0 - 2013-03-19 Initial release | ||
]] | ]] | ||
Line 17: | Line 18: | ||
self.upState = upState | self.upState = upState | ||
self.downState = downState | self.downState = downState | ||
+ | self:addChild(self.upState) | ||
+ | if self.downState then self:addChild(self.downState) end | ||
− | |||
self.focus = false | self.focus = false | ||
+ | self.toggled = false | ||
− | self:updateVisualState(self. | + | -- set the visual state as on ("toggled") |
+ | self:updateVisualState(self.toggled) | ||
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self) | self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self) | ||
Line 33: | Line 37: | ||
end | end | ||
− | function ButtonToggle:onMouseDown( | + | function ButtonToggle:onMouseDown(ev) |
− | if self:hitTestPoint( | + | if self:hitTestPoint(ev.x, ev.y) then |
self.focus = true | self.focus = true | ||
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
− | function ButtonToggle:onMouseMove( | + | function ButtonToggle:onMouseMove(ev) |
if self.focus then | if self.focus then | ||
− | if not self:hitTestPoint( | + | if not self:hitTestPoint(ev.x, ev.y) then |
self.focus = false | self.focus = false | ||
end | end | ||
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
− | function ButtonToggle:onMouseUp( | + | function ButtonToggle:onMouseUp(ev) |
if self.focus then | if self.focus then | ||
self.focus = false | self.focus = false | ||
− | self:updateVisualState(not self. | + | self:updateVisualState(not self.toggled) |
− | self:dispatchEvent(Event.new("clicked")) | + | self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "clicked" event |
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
-- if button is on focus, stop propagation of touch events | -- if button is on focus, stop propagation of touch events | ||
− | function ButtonToggle:onTouchesBegin( | + | function ButtonToggle:onTouchesBegin(ev) |
if self.focus then | if self.focus then | ||
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
-- if button is on focus, stop propagation of touch events | -- if button is on focus, stop propagation of touch events | ||
− | function ButtonToggle:onTouchesMove( | + | function ButtonToggle:onTouchesMove(ev) |
if self.focus then | if self.focus then | ||
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
-- if button is on focus, stop propagation of touch events | -- if button is on focus, stop propagation of touch events | ||
− | function ButtonToggle:onTouchesEnd( | + | function ButtonToggle:onTouchesEnd(ev) |
if self.focus then | if self.focus then | ||
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
-- if touches are cancelled, reset the state of the button | -- if touches are cancelled, reset the state of the button | ||
− | function ButtonToggle:onTouchesCancel( | + | function ButtonToggle:onTouchesCancel(ev) |
if self.focus then | if self.focus then | ||
self.focus = false | self.focus = false | ||
self:updateVisualState(false) | self:updateVisualState(false) | ||
− | + | ev:stopPropagation() | |
end | end | ||
end | end | ||
Line 90: | Line 94: | ||
-- if state is true show downState else show upState | -- if state is true show downState else show upState | ||
function ButtonToggle:updateVisualState(state) | function ButtonToggle:updateVisualState(state) | ||
− | self. | + | self.toggled = state |
-- Modification to allow single state buttons (checkboxes etc) | -- Modification to allow single state buttons (checkboxes etc) | ||
if not self.downState then | if not self.downState then | ||
− | + | self.upState:setVisible(true) | |
− | |||
− | |||
return | return | ||
end | end | ||
− | if self. | + | if self.toggled then |
− | if | + | if self.downState then |
− | self: | + | self.upState:setVisible(false) |
− | + | self.downState:setVisible(true) | |
− | + | else | |
− | self: | + | self.upState:setVisible(true) |
end | end | ||
else | else | ||
− | if | + | if self.downState then |
− | self: | + | self.upState:setVisible(true) |
− | + | self.downState:setVisible(false) | |
− | + | else | |
− | + | self.upState:setVisible(true) | |
end | end | ||
end | end | ||
end | end | ||
− | function ButtonToggle: | + | function ButtonToggle:setToggled(bool) |
− | self:updateVisualState( | + | self:updateVisualState(bool) |
end | end | ||
− | function ButtonToggle: | + | function ButtonToggle:isToggled() |
− | return self. | + | return self.toggled |
end | end | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Line 128: | Line 130: | ||
=== ButtonToggle '''Demo''' === | === ButtonToggle '''Demo''' === | ||
<syntaxhighlight lang="lua"> | <syntaxhighlight lang="lua"> | ||
− | -- | + | -- ButtonToggle Demo |
+ | -- bg | ||
+ | application:setBackgroundColor(0x6c6c6c) | ||
-- textures | -- textures | ||
− | local | + | local texup = Texture.new("gfx/ui/btn_off.png") |
− | local | + | local texdown = Texture.new("gfx/ui/btn_on.png") |
-- buttons | -- buttons | ||
− | local btntoggle = ButtonToggle.new(Bitmap.new( | + | local btntoggle = ButtonToggle.new(Bitmap.new(texup), Bitmap.new(texdown)) |
− | local btntoggle2 = ButtonToggle.new(Bitmap.new( | + | local btntoggle2 = ButtonToggle.new(Bitmap.new(texup), Bitmap.new(texdown)) |
-- params | -- params | ||
btntoggle:setScale(0.5, 0.5) | btntoggle:setScale(0.5, 0.5) | ||
− | |||
btntoggle2:setScale(0.5, 0.5) | btntoggle2:setScale(0.5, 0.5) | ||
− | btntoggle2: | + | btntoggle2:setToggled(true) |
-- position | -- position | ||
− | btntoggle:setPosition(16*1, 16* | + | btntoggle:setPosition(16*1, 16*4) |
− | btntoggle2:setPosition(16*6, 16* | + | btntoggle2:setPosition(16*6, 16*4) |
-- order | -- order | ||
stage:addChild(btntoggle) | stage:addChild(btntoggle) | ||
Line 148: | Line 151: | ||
-- listeners | -- listeners | ||
btntoggle:addEventListener("clicked", function() | btntoggle:addEventListener("clicked", function() | ||
− | print("button is: ", btntoggle: | + | print("button is toggled: ", btntoggle:isToggled()) |
end) | end) | ||
btntoggle2:addEventListener("clicked", function() | btntoggle2:addEventListener("clicked", function() | ||
− | print("button2 is: ", btntoggle2: | + | print("button2 is toggled: ", btntoggle2:isToggled()) |
end) | end) | ||
</syntaxhighlight> | </syntaxhighlight> |
Revision as of 02:24, 30 November 2023
A Button you can toggle on and off
ButtonToggle Class
--[[
-- ButtonToggle v1.1
-- Free to modify and use!
-- Matjaž Bravc
v1.1 - 2023-11-30 update to use setVisible
v1.0 - 2013-03-19 Initial release
]]
ButtonToggle = Core.class(Sprite)
function ButtonToggle:init(upState, downState)
self.upState = upState
self.downState = downState
self:addChild(self.upState)
if self.downState then self:addChild(self.downState) end
self.focus = false
self.toggled = false
-- set the visual state as on ("toggled")
self:updateVisualState(self.toggled)
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
end
function ButtonToggle:onMouseDown(ev)
if self:hitTestPoint(ev.x, ev.y) then
self.focus = true
ev:stopPropagation()
end
end
function ButtonToggle:onMouseMove(ev)
if self.focus then
if not self:hitTestPoint(ev.x, ev.y) then
self.focus = false
end
ev:stopPropagation()
end
end
function ButtonToggle:onMouseUp(ev)
if self.focus then
self.focus = false
self:updateVisualState(not self.toggled)
self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "clicked" event
ev:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function ButtonToggle:onTouchesBegin(ev)
if self.focus then
ev:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function ButtonToggle:onTouchesMove(ev)
if self.focus then
ev:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function ButtonToggle:onTouchesEnd(ev)
if self.focus then
ev:stopPropagation()
end
end
-- if touches are cancelled, reset the state of the button
function ButtonToggle:onTouchesCancel(ev)
if self.focus then
self.focus = false
self:updateVisualState(false)
ev:stopPropagation()
end
end
-- if state is true show downState else show upState
function ButtonToggle:updateVisualState(state)
self.toggled = state
-- Modification to allow single state buttons (checkboxes etc)
if not self.downState then
self.upState:setVisible(true)
return
end
if self.toggled then
if self.downState then
self.upState:setVisible(false)
self.downState:setVisible(true)
else
self.upState:setVisible(true)
end
else
if self.downState then
self.upState:setVisible(true)
self.downState:setVisible(false)
else
self.upState:setVisible(true)
end
end
end
function ButtonToggle:setToggled(bool)
self:updateVisualState(bool)
end
function ButtonToggle:isToggled()
return self.toggled
end
ButtonToggle Demo
-- ButtonToggle Demo
-- bg
application:setBackgroundColor(0x6c6c6c)
-- textures
local texup = Texture.new("gfx/ui/btn_off.png")
local texdown = Texture.new("gfx/ui/btn_on.png")
-- buttons
local btntoggle = ButtonToggle.new(Bitmap.new(texup), Bitmap.new(texdown))
local btntoggle2 = ButtonToggle.new(Bitmap.new(texup), Bitmap.new(texdown))
-- params
btntoggle:setScale(0.5, 0.5)
btntoggle2:setScale(0.5, 0.5)
btntoggle2:setToggled(true)
-- position
btntoggle:setPosition(16*1, 16*4)
btntoggle2:setPosition(16*6, 16*4)
-- order
stage:addChild(btntoggle)
stage:addChild(btntoggle2)
-- listeners
btntoggle:addEventListener("clicked", function()
print("button is toggled: ", btntoggle:isToggled())
end)
btntoggle2:addEventListener("clicked", function()
print("button2 is toggled: ", btntoggle2:isToggled())
end)