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.0
+
-- ButtonToggle v1.1
 
-- Free to modify and use!
 
-- Free to modify and use!
 
-- Matjaž Bravc
 
-- Matjaž Bravc
v1.0 - 19.3.2013 Initial release
+
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.pressed = false
 
 
self.focus = false
 
self.focus = false
 +
self.toggled = false
  
self:updateVisualState(self.pressed)
+
-- 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(event)
+
function ButtonToggle:onMouseDown(ev)
if self:hitTestPoint(event.x, event.y) then
+
if self:hitTestPoint(ev.x, ev.y) then
 
self.focus = true
 
self.focus = true
event:stopPropagation()
+
ev:stopPropagation()
 
end
 
end
 
end
 
end
  
function ButtonToggle:onMouseMove(event)
+
function ButtonToggle:onMouseMove(ev)
 
if self.focus then
 
if self.focus then
if not self:hitTestPoint(event.x, event.y) then
+
if not self:hitTestPoint(ev.x, ev.y) then
 
self.focus = false
 
self.focus = false
 
end
 
end
event:stopPropagation()
+
ev:stopPropagation()
 
end
 
end
 
end
 
end
  
function ButtonToggle:onMouseUp(event)
+
function ButtonToggle:onMouseUp(ev)
 
if self.focus then
 
if self.focus then
 
self.focus = false
 
self.focus = false
self:updateVisualState(not self.pressed)
+
self:updateVisualState(not self.toggled)
self:dispatchEvent(Event.new("clicked"))
+
self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "clicked" event
event:stopPropagation()
+
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(event)
+
function ButtonToggle:onTouchesBegin(ev)
 
if self.focus then
 
if self.focus then
event:stopPropagation()
+
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(event)
+
function ButtonToggle:onTouchesMove(ev)
 
if self.focus then
 
if self.focus then
event:stopPropagation()
+
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(event)
+
function ButtonToggle:onTouchesEnd(ev)
 
if self.focus then
 
if self.focus then
event:stopPropagation()
+
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(event)
+
function ButtonToggle:onTouchesCancel(ev)
 
if self.focus then
 
if self.focus then
 
self.focus = false
 
self.focus = false
 
self:updateVisualState(false)
 
self:updateVisualState(false)
event:stopPropagation()
+
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.pressed = state
+
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
if not self:contains(self.upState) then
+
self.upState:setVisible(true)
self:addChild(self.upState)
 
end
 
 
return
 
return
 
end
 
end
  
if self.pressed then
+
if self.toggled then
if self:contains(self.upState) then
+
if self.downState then
self:removeChild(self.upState)
+
self.upState:setVisible(false)
end
+
self.downState:setVisible(true)
if not self:contains(self.downState) then
+
else
self:addChild(self.downState)
+
self.upState:setVisible(true)
 
end
 
end
 
else
 
else
if self:contains(self.downState) then
+
if self.downState then
self:removeChild(self.downState)
+
self.upState:setVisible(true)
end
+
self.downState:setVisible(false)
if not self:contains(self.upState) then
+
else
self:addChild(self.upState)
+
self.upState:setVisible(true)
 
end
 
end
 
end
 
end
 
end
 
end
  
function ButtonToggle:setPressed(xbool)
+
function ButtonToggle:setToggled(bool)
self:updateVisualState(xbool)
+
self:updateVisualState(bool)
 
end
 
end
  
function ButtonToggle:isPressed()
+
function ButtonToggle:isToggled()
return self.pressed
+
return self.toggled
 
end
 
end
 
</syntaxhighlight>
 
</syntaxhighlight>
Line 128: Line 130:
 
=== ButtonToggle '''Demo''' ===
 
=== ButtonToggle '''Demo''' ===
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
-- button Toggle
+
-- ButtonToggle Demo
 +
-- bg
 +
application:setBackgroundColor(0x6c6c6c)
 
-- textures
 
-- textures
local texoff = Texture.new("gfx/ui/btn_01_disabled.png")
+
local texup = Texture.new("gfx/ui/btn_off.png")
local texon = Texture.new("gfx/ui/btn_01_up.png")
+
local texdown = Texture.new("gfx/ui/btn_on.png")
 
-- buttons
 
-- buttons
local btntoggle = ButtonToggle.new(Bitmap.new(texoff), Bitmap.new(texon))
+
local btntoggle = ButtonToggle.new(Bitmap.new(texup), Bitmap.new(texdown))
local btntoggle2 = ButtonToggle.new(Bitmap.new(texoff), Bitmap.new(texon))
+
local btntoggle2 = ButtonToggle.new(Bitmap.new(texup), Bitmap.new(texdown))
 
-- params
 
-- params
 
btntoggle:setScale(0.5, 0.5)
 
btntoggle:setScale(0.5, 0.5)
btntoggle:setPressed(true)
 
 
btntoggle2:setScale(0.5, 0.5)
 
btntoggle2:setScale(0.5, 0.5)
btntoggle2:setPressed(false)
+
btntoggle2:setToggled(true)
 
-- position
 
-- position
btntoggle:setPosition(16*1, 16*16)
+
btntoggle:setPosition(16*1, 16*4)
btntoggle2:setPosition(16*6, 16*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:isPressed())
+
print("button is toggled: ", btntoggle:isToggled())
 
end)
 
end)
 
btntoggle2:addEventListener("clicked", function()
 
btntoggle2:addEventListener("clicked", function()
print("button2 is: ", btntoggle2:isPressed())
+
print("button2 is toggled: ", btntoggle2:isToggled())
 
end)
 
end)
 
</syntaxhighlight>
 
</syntaxhighlight>

Revision as of 03: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)


UI Buttons