UI Slider

From GiderosMobile

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

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

Slider

-- UI Slider class
Slider = Core.class(Sprite)

function Slider:init(slit, knob)
	self.slit = slit
	self.width = self.slit:getWidth()
	self:addChild(self.slit)

	self.knob = knob
	self:addChild(self.knob)

	self.value = 0
	self.isFocus = false

	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
	self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
	self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
end

function Slider:onMouseDown(event)
	if self.knob:hitTestPoint(event.x, event.y) then
		self.isFocus = true
		self.x0 = event.x
		event:stopPropagation()
	end
end

function Slider:onMouseMove(event)
	if self.isFocus then
		local dx = event.x - self.x0
		self.knob:setX(self.knob:getX() + dx)
		self.x0 = event.x
		
		-- keep the knob position within its range
		if self.knob:getX() < 0 then self.knob:setX(0) end
		if self.knob:getX() > self.width then self.knob:setX(self.width) end
		self.value = math.floor(100 * self.knob:getX() / self.width)
		event:stopPropagation()
	end
end

function Slider:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false
		event:stopPropagation()
	end
end

function Slider:setValue(value)
	local value = math.floor(value)
	-- check within a range of [0, 100]
	if value < 0 then value = 0 end
	if value > 100 then value = 100 end
	local posX = self.width * value / 100
	self.knob:setPosition(posX, 0)
	self.value = value
end

function Slider:getValue()
	return self.value
end

---- USAGE
--local slit = Bitmap.new(Texture.new("Images/slit.png"))
--slit:setAnchorPoint(0, 0.5)
--local knob = Bitmap.new(Texture.new("Images/knob.png"))
--knob:setAnchorPoint(0.5, 0.5)
--local myslider = Slider.new(slit, knob)
--stage:addChild(myslider)
--slider:setValue(75)

Slider with Increments

Slider2 = Core.class(Sprite)

function Slider2:init(xparams)
	local params = xparams or {}
	params.maximum = xparams.maximum or 100
	params.steps = xparams.steps or params.maximum
	params.slitcolor = xparams.slitcolor or 0x0
	params.slitalpha = xparams.slitalpha or 1
	params.slitw = xparams.slitw or 64
	params.slith = xparams.slith or 64
	params.knobcolor = xparams.knobcolor or 0xffffff
	params.knobalpha = xparams.knobalpha or 1
	params.knobw = xparams.knobw or 32
	params.knobh = xparams.knobh or 32
	-- parametrable slit and knob
	local slit = Pixel.new(params.slitcolor, params.slitalpha, params.slitw, params.slith)
	slit:setAnchorPoint(0, 0.5)
	local knob = Pixel.new(params.knobcolor, params.knobalpha, params.knobw, params.knobh)
	knob:setAnchorPoint(0.5, 0.5)
	-- order
	self.width = slit:getWidth()
	self:addChild(slit)
	self.knob = knob
	self:addChild(self.knob)
	-- class variables
	self.maximum = params.maximum
	self.steps = params.steps
	self.value = 0
	self.isFocus = 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)
end

-- events
function Slider2:onMouseDown(event)
	if self:hitTestPoint(event.x, event.y) then
		local x, y = self:globalToLocal(event.x, event.y)
		self.isFocus = true
		self.knob:setX(self:setRange(x, self.steps))

		self.value = self:round(self.maximum * self.knob:getX() / self.width)
		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)

		event:stopPropagation()
	end
end

function Slider2:onMouseMove(event)
	if self.isFocus then
		local x, y = self:globalToLocal(event.x, event.y)
		self.knob:setX(self:setRange(x, self.steps))

		self.value = self:round(self.maximum * self.knob:getX() / self.width)
		local e = Event.new("value_changed")
		e.value = self.value
		self:dispatchEvent(e)

		event:stopPropagation()
	end
end

function Slider2:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false
		event:stopPropagation()
	end
end

-- functions
function Slider2:setValue(value)
	local value = math.floor(value)
	-- check within a range of [0, max]
	if value < 0 then value = 0 end
	if value > self.maximum then value = self.maximum end
	local posX = self.width * value / self.maximum
	self.knob:setPosition(posX, 0)
	self.value = value
end

function Slider2:setRange(x, xstep)
	for s = 0, self.width do
		if x <= 0 then
			return 0
		elseif x >= s * self.width / xstep and x <= (s + 1) * self.width / xstep then
			return s * self.width / xstep
		elseif x >= self.width then
			return self.width
		end
	end
end

function Slider2:round(num)
	return num + (2^52 + 2^51) - (2^52 + 2^51)
end

--[[
---- usage
-- bg
application:setBackgroundColor(0x333333)
-- a volume slider
local volumeslider = Slider2.new({
	maximum=20, steps=4,
	slitcolor=0x330033, slitalpha=1, slitw=512 - 64 * 2, slith=48,
	knobcolor=0xff00ff, knobalpha=0.7, knobw=40, knobh=30,
})
volumeslider:setValue(10)
tfsfxvolume = TextField.new(nil, "VOLUME: "..volumeslider.value)
tfsfxvolume:setScale(4)
tfsfxvolume:setTextColor(0xffffff)
-- positions
tfsfxvolume:setPosition(64, 128)
volumeslider:setPosition(64, 196)
-- order
stage:addChild(tfsfxvolume)
stage:addChild(volumeslider)
-- listeners
function onVolumeValueChanged(ev)
	tfsfxvolume:setText("VOLUME: "..ev.value)
	g_sfxvolume = ev.value
end
volumeslider:addEventListener("value_changed", onVolumeValueChanged)
]]

Slider with Text (Increments)

You can rotate it as well (0 and 90° work best) 

--[[
-- ASlider
-- mokalux, cc0
-- Slith, Knob, steps, text, ...
v 0.0.1: 2024-04-23 my take on a ui slider
]]

-- Class
ASlider = Core.class(Sprite) -- integers only slider

local floor = math.floor

function ASlider:init(xparams)
	local params = xparams or {}
	params.initialvalue = xparams.initialvalue or 0
	params.maximum = xparams.maximum or 100
	params.steps = xparams.steps or params.maximum
	params.slitcolor = xparams.slitcolor or 0x0
	params.slitalpha = xparams.slitalpha or 1
	params.slitw = xparams.slitw or 64
	params.slith = xparams.slith or 64
	params.knobcolor = xparams.knobcolor or 0xffffff
	params.knobalpha = xparams.knobalpha or 1
	params.knobw = xparams.knobw or 32
	params.knobh = xparams.knobh or 32
	params.text = xparams.text or nil
	params.font = xparams.font or nil
	params.textscale = xparams.textscale or 1
	params.textcolor = xparams.textcolor or 0xffffff
	params.textoffsetx = xparams.textoffsetx or 0
	params.textoffsety = xparams.textoffsety or 0
	params.textrotation = xparams.textrotation or 0
	params.id = xparams.id or nil
	-- slit and knob
	self.slit = Pixel.new(params.slitcolor, params.slitalpha, params.slitw, params.slith)
	self.slit:setAnchorPoint(0, 0.5)
	self.knob = Pixel.new(params.knobcolor, params.knobalpha, params.knobw, params.knobh)
	self.knob:setAnchorPoint(0.5, 0.5)
	-- textfield
	self.textfield = TextField.new(params.font, params.text or params.maximum) -- if no text then maximum
	self.textfield:setRotation(params.textrotation)
	self.textfield:setScale(params.textscale)
	self.textfield:setTextColor(params.textcolor)
	-- position
	self.textfield:setPosition(self.slit:getX() + params.textoffsetx, self.slit:getY() + params.textoffsety)
	-- order
	self:addChild(self.slit)
	self:addChild(self.knob)
	self:addChild(self.textfield)
	-- class variables
	self.value = params.initialvalue
	self.maximum = params.maximum
	self.steps = params.steps
	self.width = self.slit:getWidth()
	self.text = params.text
	self.isFocus = false
	self.id = params.id
	-- let's go!
	self:setValue(self.value)
	-- 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)
end

-- helper function
function ASlider:setRange(x, xstep)
	for s = 0, self.width do
		if x <= 0 + (self.width / xstep)/2 then
			return 0
		elseif x >= s * self.width / xstep and x <= (s + 1) * self.width / xstep - (self.width / xstep)/2 then
			return s * self.width / xstep
		elseif x >= (s + 1) * self.width / xstep - (self.width / xstep)/2 and x <= (s + 1) * self.width / xstep then
			return (s + 1) * self.width / xstep
		elseif x >= self.width - (self.width / xstep)/2 then
			return self.width
		end
	end
end

-- events
function ASlider:onMouseDown(event)
	if self.slit:hitTestPoint(event.x, event.y) or self.knob:hitTestPoint(event.x, event.y) then
		local function round(val, n)
			if (n) then return floor( (val * 10^n)+0.5 ) / (10^n) 
			else return floor(val+0.5)
			end
		end
		local x, _y = self:globalToLocal(event.x, event.y)
		self.isFocus = true
		self.knob:setX(self:setRange(x, self.steps))
		self.value = round(self.maximum * self.knob:getX() / self.width, 3)
		local e = Event.new("value_just_changed")
		e.value = self.value
		e.id = self.id
		self:dispatchEvent(e)
		event:stopPropagation()
	end
end

function ASlider:onMouseMove(event)
	if self.isFocus then
		local function round(val, n)
			if (n) then return floor( (val * 10^n)+0.5 ) / (10^n)
			else return floor(val+0.5)
			end
		end
		local x, _y = self:globalToLocal(event.x, event.y)
		self.knob:setX(self:setRange(x, self.steps))
		self.value = round(self.maximum * self.knob:getX() / self.width, 3)
		local e = Event.new("value_changing")
		e.value = self.value
		e.id = self.id
		self:dispatchEvent(e)
		event:stopPropagation()
	end
end

function ASlider:onMouseUp(event)
	if self.isFocus then
		self.isFocus = false
		local e = Event.new("value_changed")
		e.value = self.value
		e.id = self.id
		self:dispatchEvent(e)
		event:stopPropagation()
	end
end

-- function
function ASlider:setValue(xvalue)
	-- check within range [0, max]
	if xvalue < 0 then xvalue = 0 end
	if xvalue > self.maximum then xvalue = self.maximum end
	local posX = self.width * xvalue / self.maximum
	self.knob:setPosition(posX, 0)
	self.value = xvalue
	if self.text then self.textfield:setText(self.text.."\e[color=#ddc]"..self.value.."\e[color]") -- value is themed ;-)
	else self.textfield:setText("\e[color=#ddc]"..self.value.."\e[color]") -- value is themed ;-)
	end
end

--[[
---- usage
Options = Core.class(Sprite)

function Options:init()
	-- bg
	application:setBackgroundColor(0x232a35)
	-- global var
	g_bgmvolume = 10
	g_difficulty = 1
	-- SLIDERS
	local slitcolor, knobcolor = 0x3a1d20, 0x8d595d
	self.bgmvolumeslider = ASlider.new({
		initialvalue=g_bgmvolume, maximum=100, --steps=2,
		slitcolor=slitcolor, slitalpha=1, slitw=5*myappwidth/10, slith=24,
		knobcolor=knobcolor, knobalpha=0.6, knobw=12, knobh=26,
		text="BGM VOLUME: ", textscale=2, textoffsetx=-26*8, textoffsety=7,
		id=1,
	})
	self.difficultyslider = ASlider.new({
		initialvalue=g_difficulty, maximum=2, --steps=2,
		slitcolor=slitcolor, slitalpha=1, slitw=5*myappwidth/10, slith=24,
		knobcolor=knobcolor, knobalpha=0.6, knobw=12, knobh=26,
		text="DIFFICULTY: ", textscale=2, textoffsetx=-26*8, textoffsety=7, textrotation=0,
		id=3,
	})
	-- position
	self.bgmvolumeslider:setPosition(29*8, 2.5*myappheight/10)
	self.difficultyslider:setPosition(29*8, 4.5*myappheight/10)
	-- order
	self:addChild(self.bgmvolumeslider)
	self:addChild(self.difficultyslider)
	-- sliders listeners
	self.bgmvolumeslider:addEventListener("value_just_changed", self.onValueJustChanged, self)
	self.bgmvolumeslider:addEventListener("value_changing", self.onValueChanging, self)
	self.bgmvolumeslider:addEventListener("value_changed", self.onValueChanged, self)
	self.difficultyslider:addEventListener("value_just_changed", self.onValueJustChanged, self)
	self.difficultyslider:addEventListener("value_changing", self.onValueChanging, self)
	self.difficultyslider:addEventListener("value_changed", self.onValueChanged, self)
	-- let's go!
	self:difficulty(g_difficulty)
	-- scenes listeners
	self:addEventListener("enterBegin", self.onTransitionInBegin, self)
	self:addEventListener("enterEnd", self.onTransitionInEnd, self)
	self:addEventListener("exitBegin", self.onTransitionOutBegin, self)
	self:addEventListener("exitEnd", self.onTransitionOutEnd, self)
end

-- sliders
function Options:difficulty(x)
	if x >= 2 then self.difficultyslider.textfield:setText("DIFFICULTY: \e[color=#ddc]HARD\e[color]")
	elseif x >= 1 then self.difficultyslider.textfield:setText("DIFFICULTY: \e[color=#ddc]MEDIUM\e[color]")
	else self.difficultyslider.textfield:setText("DIFFICULTY: \e[color=#ddc]EASY\e[color]")
	end
end
function Options:onValueJustChanged(e)
	if e.id == 1 then
		g_bgmvolume = e.value -- keep actual value, change in setVolume()
		self.bgmvolumeslider:setValue(g_bgmvolume)
	elseif e.id == 3 then
		g_difficulty = e.value
		self:difficulty(g_difficulty)
	end
end
function Options:onValueChanging(e)
	if e.id == 1 then -- bgm volume
		g_bgmvolume = e.value -- keep actual value, change in setVolume()
		self.bgmvolumeslider:setValue(g_bgmvolume)
	elseif e.id == 3 then
		self:difficulty(e.value)
	end
end
function Options:onValueChanged(e)
	if e.id == 1 then
		g_bgmvolume = e.value -- keep actual value, change in setVolume()
		local audio = Sound.new("audio/sfx/sfx_wpn_laser4.wav") -- feedback
		local channel = audio:play()
		channel:setVolume(g_bgmvolume)
		self.bgmvolumeslider:setValue(g_bgmvolume)
	elseif e.id == 3 then
		g_difficulty = e.value
		self:difficulty(g_difficulty)
	end
--	mySavePrefs(g_configfilepath)
end

-- KEYS HANDLER
function Options:myKeysPressed()
	self:addEventListener(Event.KEY_DOWN, function(e)
		-- mobile and desktop
		if e.keyCode == KeyCode.BACK or e.keyCode == KeyCode.ESC then self:back() end
	end)
end

-- scene transitions
function Options:onTransitionInBegin() end
function Options:onTransitionInEnd() self:myKeysPressed() end
function Options:onTransitionOutBegin() self:removeAllListeners() end
function Options:onTransitionOutEnd() end

-- scenes navigation
function Options:back() scenemanager:changeScene("menu", 1, transitions[1], easings[2]) end


Retrieved from ‘https://wiki.gideros.rocks/index.php?title=UI_Slider&oldid=23457’