Difference between revisions of "UI Buttons"

From GiderosMobile
(changed button with text class)
m (update buttontext)
Line 129: Line 129:
 
<source lang="lua">
 
<source lang="lua">
 
--[[
 
--[[
A Button class with text and/or images
+
A Button class with text and/or image
 
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
 
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
mokalux
+
github: mokalux
v.1: 2020-03-02
+
v 0.1.1: 2020-03-07 added optional mouse hover effect params (mouse hover effect default is true)
 +
v 0.1.0: 2020-03-02 init (based on the initial gideros generic button class)
 +
]]
 +
--[[
 +
-- sample usage
 +
local button = ButtonText.new(
 +
{
 +
text="01", textscalex=4, textcolorup=0x0, textcolordown=0xffff00,
 +
imgdown="gfx/ui/Blue.png", nohover=true,
 +
}
 +
)
 +
button:setPosition(128, 128)
 +
self:addChild(button)
 +
button:addEventListener("click", function()
 +
-- your code here
 +
end)
 
]]
 
]]
 
ButtonText = Core.class(Sprite)
 
ButtonText = Core.class(Sprite)
Line 139: Line 154:
 
-- the params
 
-- the params
 
self.params = xparams or {}
 
self.params = xparams or {}
self.params.upstate = xparams.upstate or nil -- img path
+
self.params.imgup = xparams.imgup or nil -- img up path
self.params.downstate = xparams.downstate or nil -- img path
+
self.params.imgdown = xparams.imgdown or self.params.imgup -- img down path
self.params.imgscalex = xparams.imagescalex or nil -- number
+
self.params.imgscalex = xparams.imgscalex or nil -- number or nil = autoscale
self.params.imgscaley = xparams.imagescaley or nil -- number
+
self.params.imgscaley = xparams.imgscaley or nil -- number or nil = autoscale
self.params.text = xparams.text or nil -- text
+
self.params.text = xparams.text or nil -- string
 
self.params.font = xparams.font or nil -- ttf font path
 
self.params.font = xparams.font or nil -- ttf font path
 
self.params.fontsize = xparams.fontsize or 16 -- number
 
self.params.fontsize = xparams.fontsize or 16 -- number
Line 150: Line 165:
 
self.params.textscalex = xparams.textscalex or 1 -- number
 
self.params.textscalex = xparams.textscalex or 1 -- number
 
self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
 
self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
 +
self.params.nohover = xparams.nohover or nil -- boolean
 
-- let's go
 
-- let's go
 
self.sprite = Sprite.new()
 
self.sprite = Sprite.new()
 
self.sprite:setAnchorPoint(0.5,0.5)
 
self.sprite:setAnchorPoint(0.5,0.5)
 
self:addChild(self.sprite)
 
self:addChild(self.sprite)
-- button has image?
+
-- button has up state image?
if self.params.upstate ~= nil then
+
if self.params.imgup ~= nil then
self.upstate = Bitmap.new(Texture.new(self.params.upstate))
+
self.bmpup = Bitmap.new(Texture.new(self.params.imgup))
self.downstate = Bitmap.new(Texture.new(self.params.downstate or self.params.upstate))
+
self.bmpup:setAnchorPoint(0.5, 0.5)
self.upstate:setAnchorPoint(0.5, 0.5)
+
self.bmpupwidth = self.bmpup:getWidth()
self.downstate:setAnchorPoint(0.5, 0.5)
+
self.bmpupheight = self.bmpup:getHeight()
self.bmpwidth = self.upstate:getWidth()
+
self.sprite:addChild(self.bmpup)
self.bmpheight = self.upstate:getHeight()
+
self.hasbmpup = true
self.sprite:addChild(self.upstate)
+
else
self.sprite:addChild(self.downstate)
+
self.hasbmpup = false
self.hasbmp = true
+
end
 +
-- button has down state image?
 +
if self.params.imgdown ~= nil then
 +
self.bmpdown = Bitmap.new(Texture.new(self.params.imgdown))
 +
self.bmpdown:setAnchorPoint(0.5, 0.5)
 +
self.bmpdownwidth = self.bmpdown:getWidth()
 +
self.bmpdownheight = self.bmpdown:getHeight()
 +
self.sprite:addChild(self.bmpdown)
 +
self.hasbmpdown = true
 
else
 
else
self.hasbmp = false
+
self.hasbmpdown = false
 
end
 
end
 
-- button has text?
 
-- button has text?
Line 176: Line 200:
 
end
 
end
 
-- warnings
 
-- warnings
if not self.hasbmp and not self.hastext then
+
if not self.hasbmpup and not self.hasbmpdown and not self.hastext then
print("*** WARNING: BUTTONTEXT NEEDS AT LEAST SOME TEXT OR SOME BITMAP! ***")
+
print("*** WARNING: BUTTONTEXT NEEDS AT LEAST SOME TEXT OR SOME BITMAPS! ***")
 
end
 
end
 
-- update visual state
 
-- update visual state
 
self.focus = false
 
self.focus = false
if self.hasbmp then
+
self:updateVisualState(false)
self:updateVisualState(false)
 
end
 
 
-- event listeners
 
-- event listeners
 
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
 
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
Line 189: Line 211:
 
self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
 
self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
 
self:addEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
 
self:addEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
 +
if self.params.nohover then
 +
-- print("*** no mouse hover effect ***")
 +
self:removeEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
 +
end
 
-- mobile
 
-- mobile
 
self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
 
self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
Line 201: Line 227:
 
self.font = TTFont.new(self.params.font, self.params.fontsize)
 
self.font = TTFont.new(self.params.font, self.params.fontsize)
 
end
 
end
if self.text == nil then
+
if self.text ~= nil then
 +
self.text:setText(xtext)
 +
else
 
self.text = TextField.new(self.font, xtext, xtext)
 
self.text = TextField.new(self.font, xtext, xtext)
else
 
self.text:setText(xtext)
 
 
end
 
end
 
self.text:setAnchorPoint(0.5, 0.5)
 
self.text:setAnchorPoint(0.5, 0.5)
Line 213: Line 239:
 
self.sprite:addChild(self.text)
 
self.sprite:addChild(self.text)
 
-- scale image
 
-- scale image
if self.hasbmp then
+
if self.hasbmpup then
local sx = self.params.imgscalex or (self.textwidth/self.bmpwidth * 1.25)
+
local sx, sy = 1, 1
local sy = self.params.imgscaley or (self.textheight/self.bmpheight * 2)
+
if self.bmpupwidth < self.textwidth then
self.upstate:setScale(sx, sy)
+
sx = self.params.imgscalex or (self.textwidth/self.bmpupwidth * 1.25)
self.downstate:setScale(sx, sy)
+
sy = self.params.imgscaley or (self.textheight/self.bmpupheight * 2)
 +
end
 +
self.bmpup:setScale(sx, sy)
 +
end
 +
if self.hasbmpdown then
 +
local sx, sy = 1, 1
 +
if self.bmpdownwidth < self.textwidth then
 +
sx = self.params.imgscalex or (self.textwidth/self.bmpdownwidth * 1.25)
 +
sy = self.params.imgscaley or (self.textheight/self.bmpdownheight * 2)
 +
end
 +
self.bmpdown:setScale(sx, sy)
 
end
 
end
 
end
 
end
Line 227: Line 263:
 
-- VISUAL STATE
 
-- VISUAL STATE
 
function ButtonText:updateVisualState(xisdown)
 
function ButtonText:updateVisualState(xisdown)
if self.hasbmp then
+
if xisdown then
if xisdown then
+
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
self.upstate:setVisible(false)
+
if self.params.imgdown ~= nil then self.bmpdown:setVisible(true) end
self.downstate:setVisible(true)
+
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
self.text:setTextColor(self.params.textcolordown)
+
else
else
+
if self.params.imgup ~= nil then self.bmpup:setVisible(true) end
self.upstate:setVisible(true)
+
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
self.downstate:setVisible(false)
+
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
self.text:setTextColor(self.params.textcolorup)
 
end
 
 
end
 
end
 
end
 
end
Line 253: Line 287:
 
self.focus = true
 
self.focus = true
 
self:updateVisualState(true)
 
self:updateVisualState(true)
 +
event:stopPropagation()
 
end
 
end
 
if not self:hitTestPoint(event.x, event.y) then
 
if not self:hitTestPoint(event.x, event.y) then
 
self.focus = false
 
self.focus = false
 
self:updateVisualState(false)
 
self:updateVisualState(false)
 +
event:stopPropagation()
 
end
 
end
event:stopPropagation()
 
 
end
 
end
 
function ButtonText:onMouseUp(event)
 
function ButtonText:onMouseUp(event)
Line 272: Line 307:
 
self.focus = true
 
self.focus = true
 
self:updateVisualState(true)
 
self:updateVisualState(true)
 +
event:stopPropagation()
 
else
 
else
 
self.focus = false
 
self.focus = false
 
self:updateVisualState(false)
 
self:updateVisualState(false)
 +
event:stopPropagation()
 
end
 
end
event:stopPropagation()
 
 
end
 
end
 
-- mobile
 
-- mobile
Line 301: Line 337:
 
end
 
end
 
end
 
end
--[[
 
-- usage
 
local btn1 = ButtonText.new(
 
{text="Hello -- World", textcolorup=0xff00ff, textscalex=4,
 
upstate="gfx/btns/mid_up.png", downstate="gfx/btns/mid_down.png"}
 
)
 
btn1:setText("START")
 
btn1:setPosition(128,128)
 
stage:addChild(btn1)
 
local x=0
 
btn1:addEventListener("click", function()
 
x+=1
 
print("clicked: "..x)
 
end)
 
]]
 
 
</source>
 
</source>
  

Revision as of 01:59, 7 March 2020

Here you will find various resources to help you create buttons in Gideros Studio.

note:You may have to provide your own assets (fonts, gfx, …).

Simple Button

--[[
A generic button class

This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
(C) 2010 - 2011 Gideros Mobile 
]]

Button = Core.class(Sprite)

function Button:init(upState, downState) -- upstate and downstate are bitmaps
	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.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 Button:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self:updateVisualState(true)
		event:stopPropagation()
	end
end

function Button:onMouseMove(event)
	if self.focus then
		if not self:hitTestPoint(event.x, event.y) then	
			self.focus = false
			self:updateVisualState(false)
		end
		event:stopPropagation()
	end
end

function Button:onMouseUp(event)
	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

-- if button is on focus, stop propagation of touch events
function Button:onTouchesBegin(event)
	if self.focus then
		event:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function Button:onTouchesMove(event)
	if self.focus then
		event:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function Button:onTouchesEnd(event)
	if self.focus then
		event:stopPropagation()
	end
end

-- if touches are cancelled, reset the state of the button
function Button:onTouchesCancel(event)
	if self.focus then
		self.focus = false;
		self:updateVisualState(false)
		event:stopPropagation()
	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

---- USAGE
---- clickable button (arrow button)
--local arrow = Texture.new("gfx/arrow_right.png")
--local arrow_pressed = Texture.new("gfx/arrow_right_down.png")
--local button = Button.new(Bitmap.new(arrow), Bitmap.new(arrow_pressed))
--button:addEventListener("click", function()
--	-- your code here
--end)

Button with Text and/or Images

--[[
A Button class with text and/or image
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
github: mokalux
v 0.1.1: 2020-03-07 added optional mouse hover effect params (mouse hover effect default is true)
v 0.1.0: 2020-03-02 init (based on the initial gideros generic button class)
]]
--[[
-- sample usage
	local button = ButtonText.new(
		{
			text="01", textscalex=4, textcolorup=0x0, textcolordown=0xffff00,
			imgdown="gfx/ui/Blue.png", nohover=true,
		}
	)
	button:setPosition(128, 128)
	self:addChild(button)
	button:addEventListener("click", function() 
		-- your code here
	end)
]]
ButtonText = Core.class(Sprite)

function ButtonText:init(xparams)
	-- the params
	self.params = xparams or {}
	self.params.imgup = xparams.imgup or nil -- img up path
	self.params.imgdown = xparams.imgdown or self.params.imgup -- img down path
	self.params.imgscalex = xparams.imgscalex or nil -- number or nil = autoscale
	self.params.imgscaley = xparams.imgscaley or nil -- number or nil = autoscale
	self.params.text = xparams.text or nil -- string
	self.params.font = xparams.font or nil -- ttf font path
	self.params.fontsize = xparams.fontsize or 16 -- number
	self.params.textcolorup = xparams.textcolorup or 0x0 -- color
	self.params.textcolordown = xparams.textcolordown or self.params.textcolorup -- color
	self.params.textscalex = xparams.textscalex or 1 -- number
	self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
	self.params.nohover = xparams.nohover or nil -- boolean
	-- let's go
	self.sprite = Sprite.new()
	self.sprite:setAnchorPoint(0.5,0.5)
	self:addChild(self.sprite)
	-- button has up state image?
	if self.params.imgup ~= nil then
		self.bmpup = Bitmap.new(Texture.new(self.params.imgup))
		self.bmpup:setAnchorPoint(0.5, 0.5)
		self.bmpupwidth = self.bmpup:getWidth()
		self.bmpupheight = self.bmpup:getHeight()
		self.sprite:addChild(self.bmpup)
		self.hasbmpup = true
	else
		self.hasbmpup = false
	end
	-- button has down state image?
	if self.params.imgdown ~= nil then
		self.bmpdown = Bitmap.new(Texture.new(self.params.imgdown))
		self.bmpdown:setAnchorPoint(0.5, 0.5)
		self.bmpdownwidth = self.bmpdown:getWidth()
		self.bmpdownheight = self.bmpdown:getHeight()
		self.sprite:addChild(self.bmpdown)
		self.hasbmpdown = true
	else
		self.hasbmpdown = false
	end
	-- button has text?
	if self.params.text ~= nil then
		self:setText(self.params.text)
		self.hastext = true
	else
		self.hastext = false
	end
	-- warnings
	if not self.hasbmpup and not self.hasbmpdown and not self.hastext then
		print("*** WARNING: BUTTONTEXT NEEDS AT LEAST SOME TEXT OR SOME BITMAPS! ***")
	end
	-- update visual state
	self.focus = false
	self:updateVisualState(false)
	-- event listeners
	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.MOUSE_HOVER, self.onMouseHover, self)
	if self.params.nohover then
--		print("*** no mouse hover effect ***")
		self:removeEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
	end
	-- mobile
	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

-- FUNCTIONS
function ButtonText:setText(xtext)
	if self.params.font ~= nil then
		self.font = TTFont.new(self.params.font, self.params.fontsize)
	end
	if self.text ~= nil then
		self.text:setText(xtext)
	else
		self.text = TextField.new(self.font, xtext, xtext)
	end
	self.text:setAnchorPoint(0.5, 0.5)
	self.text:setScale(self.params.textscalex, self.params.textscaley)
	self.text:setTextColor(self.params.textcolorup)
	self.textwidth = self.text:getWidth()
	self.textheight = self.text:getHeight()
	self.sprite:addChild(self.text)
	-- scale image
	if self.hasbmpup then
		local sx, sy = 1, 1
		if self.bmpupwidth < self.textwidth then
			sx = self.params.imgscalex or (self.textwidth/self.bmpupwidth * 1.25)
			sy = self.params.imgscaley or (self.textheight/self.bmpupheight * 2)
		end
		self.bmpup:setScale(sx, sy)
	end
	if self.hasbmpdown then
		local sx, sy = 1, 1
		if self.bmpdownwidth < self.textwidth then
			sx = self.params.imgscalex or (self.textwidth/self.bmpdownwidth * 1.25)
			sy = self.params.imgscaley or (self.textheight/self.bmpdownheight * 2)
		end
		self.bmpdown:setScale(sx, sy)
	end
end

function ButtonText:setTextColor(xcolor)
	self.text:setTextColor(xcolor or 0x0)
end

-- VISUAL STATE
function ButtonText:updateVisualState(xisdown)
	if xisdown then
		if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
		if self.params.imgdown ~= nil then self.bmpdown:setVisible(true) end
		if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
	else
		if self.params.imgup ~= nil then self.bmpup:setVisible(true) end
		if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
		if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
	end
end

-- BUTTON LISTENERS
-- mouse
function ButtonText:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self:updateVisualState(true)
		event:stopPropagation()
	end
end
function ButtonText:onMouseMove(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self:updateVisualState(true)
		event:stopPropagation()
	end
	if not self:hitTestPoint(event.x, event.y) then
		self.focus = false
		self:updateVisualState(false)
		event:stopPropagation()
	end
end
function ButtonText:onMouseUp(event)
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		self:dispatchEvent(Event.new("click"))
		event:stopPropagation()
	end
end
function ButtonText:onMouseHover(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		self:updateVisualState(true)
		event:stopPropagation()
	else
		self.focus = false
		self:updateVisualState(false)
		event:stopPropagation()
	end
end
-- mobile
function ButtonText:onTouchesBegin(event)
	if self.focus then
		event:stopPropagation()
	end
end
function ButtonText:onTouchesMove(event)
	if self.focus then
		event:stopPropagation()
	end
end
function ButtonText:onTouchesEnd(event)
	if self.focus then
		event:stopPropagation()
	end
end
function ButtonText:onTouchesCancel(event)
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		event:stopPropagation()
	end
end

Toggle Button

--[[
ToggleButton v1.0
 
v1.0 - 19.3.2013
Initial release
 
Free to modify and use!
Matjaž Bravc
]]

ToggleButton = Core.class(Sprite)

function ToggleButton:init(upState, downState)
	self.upState = upState
	self.downState = downState

	self.pressed = false
	self.focus = false

	self:updateVisualState(self.pressed)

	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 ToggleButton:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		self.focus = true
		event:stopPropagation()
	end
end

function ToggleButton:onMouseMove(event)
	if self.focus then
		if not self:hitTestPoint(event.x, event.y) then
			self.focus = false
		end
		event:stopPropagation()
	end
end

function ToggleButton:onMouseUp(event)
	if self.focus then
		self.focus = false
		self:updateVisualState(not self.pressed)
		self:dispatchEvent(Event.new("click"))
		event:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function ToggleButton:onTouchesBegin(event)
	if self.focus then
		event:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function ToggleButton:onTouchesMove(event)
	if self.focus then
		event:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function ToggleButton:onTouchesEnd(event)
	if self.focus then
		event:stopPropagation()
	end
end

-- if touches are cancelled, reset the state of the button
function ToggleButton:onTouchesCancel(event)
	if self.focus then
		self.focus = false
		self:updateVisualState(false) -- XXX
		event:stopPropagation()
	end
end

-- if state is true show downState else show upState
function ToggleButton:updateVisualState(state)
	self.pressed = state

	-- Modification to allow single state buttons (checkboxes etc)
	if not self.downState then
		if not self:contains(self.upState) then
			self:addChild(self.upState)
		end
		return
	end

	if self.pressed 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

function ToggleButton:isPressed()
	return self.pressed
end

---- USAGE
--local btntoggle = ToggleButton.new(Bitmap.new(Texture.new("gfx/off.png", true)), Bitmap.new(Texture.new("gfx/on.png", true)))
--stage:addChild(btntoggle)
--btntoggle:addEventListener("click", function()
--	print(btntoggle:isPressed())
--end)

Template:Welcome!