Difference between revisions of "UI Slider"
From GiderosMobile
Line 105: | Line 105: | ||
-- | -- | ||
self.maximum = params.maximum | self.maximum = params.maximum | ||
− | |||
self.value = 0 | self.value = 0 | ||
self.isFocus = false | self.isFocus = false | ||
Line 157: | Line 156: | ||
-- check within a range of [0, 100] | -- check within a range of [0, 100] | ||
if value < 0 then value = 0 end | if value < 0 then value = 0 end | ||
− | if value > | + | if value > self.maximum then value = self.maximum end |
− | posX = self.width * value / | + | posX = self.width * value / self.maximum |
self.knob:setPosition(posX, 0) | self.knob:setPosition(posX, 0) | ||
self.value = value | self.value = value | ||
Line 169: | Line 168: | ||
-- a volume slider | -- a volume slider | ||
local volumeslider = Slider2.new({ | local volumeslider = Slider2.new({ | ||
− | maximum= | + | maximum=30, |
slitcolor=0x222222, slitalpha=1, slitw=512 - 64 * 2, slith=32, | slitcolor=0x222222, slitalpha=1, slitw=512 - 64 * 2, slith=32, | ||
knobcolor=0x00ffff, knobalpha=1, knobw=40, knobh=48, | knobcolor=0x00ffff, knobalpha=1, knobw=40, knobh=48, | ||
}) | }) | ||
− | volumeslider:setValue( | + | volumeslider:setValue(15) |
tfsfxvolume = TextField.new(nil, "VOLUME: "..volumeslider.value) | tfsfxvolume = TextField.new(nil, "VOLUME: "..volumeslider.value) | ||
tfsfxvolume:setScale(4) | tfsfxvolume:setScale(4) |
Revision as of 05:33, 28 August 2021
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
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 2
Slider2 = Core.class(Sprite)
function Slider2:init(xparams)
local params = xparams or {}
params.maximum = xparams.maximum or 100
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
--
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)
--
self.width = slit:getWidth()
self:addChild(slit)
self.knob = knob
self:addChild(self.knob)
--
self.maximum = params.maximum
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 Slider2:onMouseDown(event)
if self.knob:hitTestPoint(event.x, event.y) then
self.isFocus = true
self.x0 = event.x
event:stopPropagation()
end
end
function Slider2: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 = self.maximum * self.knob:getX() / self.width // 1
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
local e = Event.new("value_changed")
e.value = self.value
self:dispatchEvent(e)
event:stopPropagation()
end
end
function Slider2:setValue(value)
local value = math.floor(value)
-- check within a range of [0, 100]
if value < 0 then value = 0 end
if value > self.maximum then value = self.maximum end
posX = self.width * value / self.maximum
self.knob:setPosition(posX, 0)
self.value = value
end
--[[
---- usage
-- bg
application:setBackgroundColor(0x333333)
-- a volume slider
local volumeslider = Slider2.new({
maximum=30,
slitcolor=0x222222, slitalpha=1, slitw=512 - 64 * 2, slith=32,
knobcolor=0x00ffff, knobalpha=1, knobw=40, knobh=48,
})
volumeslider:setValue(15)
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 onVolumeValueChanging(ev) tfsfxvolume:setText("VOLUME: "..ev.value) end
function onVolumeValueChanged(ev)
tfsfxvolume:setText("VOLUME: "..ev.value)
g_sfxvolume = ev.value
end
volumeslider:addEventListener("value_changed", onVolumeValueChanged)
volumeslider:addEventListener("value_changed", onVolumeValueChanging)
]]