Question on custom slider

[helloworld2013d]

Hi everyone…

Thanks for all your help.

I would like to have a slider but with my own graphics.

I don’t really understand the Corona page Custom Vizualitation.

“The slider widget can be visually customized using an image sheet. As shown in the following example, 5 frames” ?

how does that really works? Is there a sample code that I can see? Where?

the left cap (red), – what is this?

( “sliderSheet.png”, options ) – where is the image sliderSheet.png to test this code?

And I don’t really understand the frames…

middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 36,

---

 I test the sample code

– Slider listener
local function sliderListener( event )
    print( "Slider at " … event.value … “%” )
    audio.play(n45)
end

just play a file, and it’s playing it twice

touch - began

and ended

---

And also how to actually use it. Once I have the value… at 65%

how do I do this

        if p3 == 20 then
            tempo = tempo/50*100
        end

something like that…

but I want to have the tempo from 0% to 100%

let’s say 50% is 1000

tempo = 1000

100% I wanted to be

tempo = 300 ( so tempo goes really fast )

and at 2% should be

tempo = 1600 goes slower…

how do I get the slider recognize that when is at 34% the number should be {?}

whay kind of math. should I use, I need some help thanks…

[bjsorrentino]

Hi @helloworld2013d,

This is a lot of questions in one post. Let me try to answer them in series:

1. On the documentation page (link below), you can save the example image (left-side image) under “Visual Customization” for testing with the example code. If you’re on Mac OS X, for example, right-click the image, select “Save Image As…”, and save it as “sliderSheet.png” in your project. It will not have a transparent background, and the colored regions will overlay things, but that will help you see how the frames are actually used within the widget.

http://docs.coronalabs.com/api/library/widget/newSlider.html

2. Sliders are always based on a percentage 0-100. If you need to convert this percentage for use within another range of values, just do the basic percentage based math. For example, if your actual value range is 0-2000, then convert the slider value to a decimal percentage value and multiply it by 2000:

[lua]

(event.value/100) * 2000

[/lua]

Hope this helps,

Brent

[helloworld2013d]

I got the image part thanks… that works really good.

now when I move the slider, it may land at 59% or 23% ( anywhere from 0% to 100%)

I have a function like this

-- Slider listener local function sliderListener( event )     print( "Slider at " .. event.value .. "%" )          local donde = event.value         if donde == 20 then             tempo = tempo/80\*100         end         if donde == 40 then             tempo = tempo/100\*100         end         if donde == 60 then             tempo = tempo/130\*100         end         if donde == 80 then             tempo = tempo/150\*100         end         if donde == 100 then             tempo = tempo/160\*100         end end

this gives me different speed, and it works, but I have to move the slider and look in the terminal

to land exactly at 80% or 40%

if I land at 41% the code would not work…

Do I have to use

if donde == 1 then

if donde == 2 then

if donde == 3 then

if donde == 4 then

and so on 100 of those?

or how do I make it work for each number?

[bjsorrentino]

So you would like the tempo change to occur within “ranges” instead of on a specific number? For example, from 0-19, the tempo is a certain value. From 20-39, it’s something else. And so forth on 40-59, 60-79, and 80-100? If so, just detect ranges in your conditional checks like so:

[lua]

if ( donde < 20 ) then

    --tempo =

elseif ( donde >= 20 and donde < 40 ) then

    --tempo =

elseif ( donde >= 40 and donde < 60 ) then

    --tempo =

elseif ( donde >= 60 and donde < 80 ) then

    --tempo =

elseif ( donde >= 80 ) then

    --tempo =

end

[/lua]

[helloworld2013d]

Thanks Brent this works really good for me.

Thank you!!!

I guess the last thing on slider…

How do I remove it when going to another scene on Composer

I use this on scene:hide

    if slider then
        remove:self()
        slider = nil
    end

is not working

[helloworld2013d]

can someone help me please, in letting me know

how do I remove the slider widget when I go to another scene?

I still can not figure that out.

Thanks for all your time and help.

Victor

[bjsorrentino]

Hi Victor,

This call is not valid (at least not as a built-in API for Corona):

[lua]

remove:self()

[/lua]

The proper calls for removing objects are:

[lua]

display.remove( object )

–OR

object:removeSelf()

[/lua]

[helloworld2013d]

Thanks Brent this display.remove( object )

works, I put it right before the

composer.gotoScene( “gear” )

and it works

Thanks

[bjsorrentino]

Hi @helloworld2013d,

This is a lot of questions in one post. Let me try to answer them in series:

1. On the documentation page (link below), you can save the example image (left-side image) under “Visual Customization” for testing with the example code. If you’re on Mac OS X, for example, right-click the image, select “Save Image As…”, and save it as “sliderSheet.png” in your project. It will not have a transparent background, and the colored regions will overlay things, but that will help you see how the frames are actually used within the widget.

http://docs.coronalabs.com/api/library/widget/newSlider.html

2. Sliders are always based on a percentage 0-100. If you need to convert this percentage for use within another range of values, just do the basic percentage based math. For example, if your actual value range is 0-2000, then convert the slider value to a decimal percentage value and multiply it by 2000:

[lua]

(event.value/100) * 2000

[/lua]

Hope this helps,

Brent

[helloworld2013d]

I got the image part thanks… that works really good.

now when I move the slider, it may land at 59% or 23% ( anywhere from 0% to 100%)

I have a function like this

-- Slider listener local function sliderListener( event )     print( "Slider at " .. event.value .. "%" )          local donde = event.value         if donde == 20 then             tempo = tempo/80\*100         end         if donde == 40 then             tempo = tempo/100\*100         end         if donde == 60 then             tempo = tempo/130\*100         end         if donde == 80 then             tempo = tempo/150\*100         end         if donde == 100 then             tempo = tempo/160\*100         end end

this gives me different speed, and it works, but I have to move the slider and look in the terminal

to land exactly at 80% or 40%

if I land at 41% the code would not work…

Do I have to use

if donde == 1 then

if donde == 2 then

if donde == 3 then

if donde == 4 then

and so on 100 of those?

or how do I make it work for each number?

[bjsorrentino]

So you would like the tempo change to occur within “ranges” instead of on a specific number? For example, from 0-19, the tempo is a certain value. From 20-39, it’s something else. And so forth on 40-59, 60-79, and 80-100? If so, just detect ranges in your conditional checks like so:

[lua]

if ( donde < 20 ) then

    --tempo =

elseif ( donde >= 20 and donde < 40 ) then

    --tempo =

elseif ( donde >= 40 and donde < 60 ) then

    --tempo =

elseif ( donde >= 60 and donde < 80 ) then

    --tempo =

elseif ( donde >= 80 ) then

    --tempo =

end

[/lua]

[helloworld2013d]

Thanks Brent this works really good for me.

Thank you!!!

I guess the last thing on slider…

How do I remove it when going to another scene on Composer

I use this on scene:hide

    if slider then
        remove:self()
        slider = nil
    end

is not working

[helloworld2013d]

can someone help me please, in letting me know

how do I remove the slider widget when I go to another scene?

I still can not figure that out.

Thanks for all your time and help.

Victor

[bjsorrentino]

Hi Victor,

This call is not valid (at least not as a built-in API for Corona):

[lua]

remove:self()

[/lua]

The proper calls for removing objects are:

[lua]

display.remove( object )

–OR

object:removeSelf()

[/lua]

[helloworld2013d]

Thanks Brent this display.remove( object )

works, I put it right before the

composer.gotoScene( “gear” )

and it works

Thanks