Slider button help

Games
#1

I have looked at the example code for just showing the slider and i’ve looked at the music example code that has sliders and i’m confused on how to do the following.

I can get the vertical slider on screen, that’s easy, but what I need to do is track/produce values from it’s position.

My goal is to use that number value to pick a png file to display.

Help!!! [import]uid: 34179 topic_id: 7314 reply_id: 307314[/import]

#2

Any headway on this? I’m trying to do the same thing. [import]uid: 16420 topic_id: 7314 reply_id: 27445[/import]

#3

Awesome - this helped! I was getting to this point with pseudo code, but this helped get me across the finish line! thanks! [import]uid: 16420 topic_id: 7314 reply_id: 27816[/import]

#4

The key here to getting the slider value to use for whatever purpose you wanted
was to use the slider event’s phase and if it moved then assign it’s value to a variable.
That value is a float, so if you needed it to be an integer, as in my case then you could use
the math.floor to round it off.
local function onSlider( event )
local phase = event.phase
– update all the slider
if “moved” == phase then
local x = event.value – x holds the floating point number / value of the slider
– If the range was from 0 to 100 then the value for x is in that
– range, but its a floating point value.
xPos = (math.floor(x)) – This rounds off float to integer

In my example above, I wanted the raising and lowering of the slider to make an
L.E.D. display show the numbers rising and falling. [import]uid: 34179 topic_id: 7314 reply_id: 27532[/import]

#5

Glad I could help! [import]uid: 34179 topic_id: 7314 reply_id: 27820[/import]

#6

Yes . I’ve made some headway.
Here an L.E.D. example using a slider and grabbing its value in order to pick an L.E.D. value
It’s a little rough yet but check it out.
You will need my png files for it to run.
Here’s a link to the files main.lua and png’s:

https://public.me.com/pursuinglove

Here’s the main.lua
– L.E.D.
require “slider”

local screenW, screenH = display.contentWidth, display.contentHeight

display.setStatusBar(display.HiddenStatusBar)
– Make LED Array to hold pics of 0 thru 9 LED Digits
– Two arrays are needed because the ledDisplay insert can only insert
– one picture on screen from one array. Reusing the same one in a single
– array cause the one of the pictures that is the same not to appear.
– Numbers like 11, 22, 33, 44 etc use the same number twice, so a second array was needed
– If we were using the hundreds column above one hundred then a third array would be needed

ledNumbersOnes = {}

ledNumbersOnes[1] = display.newImage(“LED_0.png”)
ledNumbersOnes[2] = display.newImage(“LED_1.png”)
ledNumbersOnes[3] = display.newImage(“LED_2.png”)
ledNumbersOnes[4] = display.newImage(“LED_3.png”)
ledNumbersOnes[5] = display.newImage(“LED_4.png”)
ledNumbersOnes[6] = display.newImage(“LED_5.png”)
ledNumbersOnes[7] = display.newImage(“LED_6.png”)
ledNumbersOnes[8] = display.newImage(“LED_7.png”)
ledNumbersOnes[9] = display.newImage(“LED_8.png”)
ledNumbersOnes[10] = display.newImage(“LED_9.png”)

ledNumbersTens = {}

ledNumbersTens[1] = display.newImage(“LED_0.png”)
ledNumbersTens[2] = display.newImage(“LED_1.png”)
ledNumbersTens[3] = display.newImage(“LED_2.png”)
ledNumbersTens[4] = display.newImage(“LED_3.png”)
ledNumbersTens[5] = display.newImage(“LED_4.png”)
ledNumbersTens[6] = display.newImage(“LED_5.png”)
ledNumbersTens[7] = display.newImage(“LED_6.png”)
ledNumbersTens[8] = display.newImage(“LED_7.png”)
ledNumbersTens[9] = display.newImage(“LED_8.png”)
ledNumbersTens[10] = display.newImage(“LED_9.png”)

ledNumbersHundreds = {}

ledNumbersHundreds[1] = display.newImage(“LED_0.png”)
ledNumbersHundreds[2] = display.newImage(“LED_1.png”)
ledNumbersHundreds[3] = display.newImage(“LED_2.png”)
ledNumbersHundreds[4] = display.newImage(“LED_3.png”)
ledNumbersHundreds[5] = display.newImage(“LED_4.png”)
ledNumbersHundreds[6] = display.newImage(“LED_5.png”)
ledNumbersHundreds[7] = display.newImage(“LED_6.png”)
ledNumbersHundreds[8] = display.newImage(“LED_7.png”)
ledNumbersHundreds[9] = display.newImage(“LED_8.png”)
ledNumbersHundreds[10] = display.newImage(“LED_9.png”)

– Set layers for button and LED Display
local canvas = display.newGroup()
local ledDisplay = display.newGroup()

local function onSlider( event )
local phase = event.phase
– update a slider
if “moved” == phase then
local x = event.value – Here’s the actual value of the slider in a floating point number

xPos = (math.floor(x)) – This rounds off float to integer
if xPos == 0 then

– Put up three L.E.D. zero’s

ledNumbersHundreds[1].x = 120
ledNumbersHundreds[1].y = 200
ledDisplay:insert((ledNumbersHundreds[1]))

ledNumbersTens[1].x = 150
ledNumbersTens[1].y = 200
ledDisplay:insert((ledNumbersTens[1]))

ledNumbersOnes[1].x = 180
ledNumbersOnes[1].y = 200
ledDisplay:insert((ledNumbersOnes[1]))

elseif xPos > 0 and xPos < 10 then

xPos = xPos + 1

ledNumbersTens[1].x = 150
ledNumbersTens[1].y = 200
ledDisplay:insert((ledNumbersTens[1]))

ledNumbersOnes[xPos].x = 180
ledNumbersOnes[xPos].y = 200
ledDisplay:insert((ledNumbersOnes[xPos]))

elseif xPos > 9 and xPos < 100 then

xTens = xPos / 10 – example 36 / 10 would be 3.6
xTens = (math.floor(xTens)) – this would make it 3 for the Tens position
ledNumbersTens[xTens + 1].x = 150
ledNumbersTens[xTens + 1].y = 200
ledDisplay:insert((ledNumbersTens[xTens+1]))-- The + 1 picks the correct LED from array

xOnes = xPos - (xTens * 10) – this is 36 - (30) for the ones position
ledNumbersOnes[xOnes+1].x = 180
ledNumbersOnes[xOnes+1].y = 200
ledDisplay:insert((ledNumbersOnes[xOnes+1]))-- The + 1 picks the correct LED from array

elseif xPos > 99 and xPos < 200 then

ledNumbersHundreds[2].x = 120 – No math need here as we are not going past 1 in the hundreds position
ledNumbersHundreds[2].y = 200
ledDisplay:insert((ledNumbersHundreds[2]))-- The + 1 picks the correct LED from array

xTens = (xPos-100) / 10 – example 36 / 10 would be 3.6
xTens = (math.floor(xTens)) – this would make it 3 for the Tens position
ledNumbersTens[xTens + 1].x = 150
ledNumbersTens[xTens + 1].y = 200
ledDisplay:insert((ledNumbersTens[xTens+1]))-- The + 1 picks the correct LED from array

xOnes = (xPos - 100) - (xTens * 10) – this is 36 - (30) for the ones position
ledNumbersOnes[xOnes+1].x = 180
ledNumbersOnes[xOnes+1].y = 200
ledDisplay:insert((ledNumbersOnes[xOnes+1]))-- The + 1 picks the correct LED from array

end
end

return true
end

local mySlider2 = slider.newSlider(
{
track = “trackVertical.png”,
thumbDefault = “thumbVertical.png”,
thumbOver = “thumbDragVertical.png”,
isVertical = true,
onPress = press,
onRelease = release,
onEvent = onSlider,
minValue = 200,
maxValue = 0,
value = 10,

}
)

mySlider2.x = 270
mySlider2.y = 210

ledDisplay:insert(mySlider2)

– Set the slider button to bottom of slider . Since minValue is 200 then bottom is not zero
mySlider2.thumbDefault.y = 60
mySlider2.thumbOver.y = 60

–button:addEventListener(“touch”, button ) [import]uid: 34179 topic_id: 7314 reply_id: 27453[/import]