Hello,
I want to make some slider widgets for an app. These sliders start at 100 (the bar is full). When you slide the handle at the middle the values of the slider should change to somewhere around 50. Is there a way to save the new value and have it load the next time you run the app? So have the slider start at 50 and not 100.
Thank you in advance,
Axel
The documentation is here: https://docs.coronalabs.com/api/library/widget/newSlider.html
The widget supports a listener function that triggers when values change. In this function you can get the value of the slider. At that point you can store the value in a variable or an attribute in a table. Then you can use whatever means you choose (table saving, writing values out to a file, use the iCloud plugin, store it in a parse.com database, etc.
Rob
OK so I have the listener function update a row in sqlite database where i save the value. I use that for some things in the app. Here’s the thing the database gets updated and the app can run properly even after you close and reopen it, but the slider gets visually reset to whatever value it was before interaction. And that’s exactly what I’m trying to prevent. I would appreciate it if you could give me an example for how that could work. Because anything i try results in the slider starting with a value of 50 (how it would start if you don’t define it).
Well read the values back in from the database and use the slider:setValue() API to set the sliders to what you want.
OK, so i get what i have to do. But not how to do it. Can you give me something, anything? Because the documentation really doesn’t provide mutch. It has one vague sentence that’s it. Thank you in advance.
Without some context or some code that you’ve written, I doubt any one on here can give you much more than vague advice. Provide some code and maybe someone can help out more.
Rob
OK, here is how the code works.
The database:
[lua]
id value
1 100
2 25
3 60
[/lua]
And here is the .lua file
[lua]
local composer = require( “composer” )
local scene = composer.newScene()
local widget = require “widget”
require( “sqlite3” )
local path = system.pathForFile( “data.db”, system.DocumentsDirectory )
local db = sqlite3.open( path )
local masterSdr
local sfxSdr
local musicSdr
local sliders = {} – Begins empty
for row in db:nrows(“SELECT * FROM sound”) do
print( "Row " … row.name )
– Create table at the next available array index
sliders[#sliders+1] =
{
id = row.id
value = row.value
}
end
– Slider listeners
local function sliderMasterSdrListener( event )
print(“Slider at”…event.value…"%")
local q = [[UPDATE sound SET value=’]]…event.value…[[’ WHERE id=1;]]
db:exec( q )
end
local function sliderSfxSdrListener( event )
print(“Slider at”…event.value…"%")
local q = [[UPDATE sound SET value=’]]…event.value…[[’ WHERE id=2;]]
db:exec( q )
end
local function sliderMusicSdrListener( event )
print(“Slider at”…event.value…"%")
local q = [[UPDATE sound SET value=’]]…event.value…[[’ WHERE id=3;]]
db:exec( q )
end
– Image sheet for horizontal slider
local optionsHorizontal = {
frames = {
{ x= 1, y= 40, width= 15, height= 15 },
{ x= 18, y= 40, width= 15, height= 15 },
{ x= 35, y= 40, width= 15, height= 15 },
{ x= 1, y= 1, width=50, height=10 },
{ x= 1, y= 13, width=50, height=25 }
},
sheetContentWidth = 52,
sheetContentHeight = 56
}
local slider1Sheet = graphics.newImageSheet( “Assets/sliderSheet.png”, optionsHorizontal )
– “scene:create()”
function scene:create( event )
local sceneGroup = self.view
– Initialize the scene here.
– Example: add display objects to “sceneGroup”, add touch listeners, etc.
– The background
local background = display.newImageRect( “Backgrounds/OptionsMenu.png”, display.contentWidth, display.contentHeight )
background.anchorX = 0
background.anchorY = 0
background.x, background.y = 0, 0
– Master slider
masterSdr = widget.newSlider {
sheet = slider1Sheet,
leftFrame = 1,
middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 50,
frameHeight = 10,
handleFrame = 5,
handleWidth = 50,
handleHeight = 25,
width = 600,
name = sliders[1].name,
description = sliders[1].description,
value = 100,
orientation = “horizontal”,
listener = sliderMasterSdrListener
}
masterSdr.x = display.contentWidth-950
masterSdr.y = display.contentHeight*0.38
– SFX slider
sfxSdr = widget.newSlider {
sheet = slider1Sheet,
leftFrame = 1,
middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 50,
frameHeight = 10,
handleFrame = 5,
handleWidth = 50,
handleHeight = 25,
width = 600,
name = “SFX”,
description = “SFX Slider”,
value = 100,
orientation = “horizontal”,
listener = sliderSfxSdrListener
}
sfxSdr.x = display.contentWidth-950
sfxSdr.y = display.contentHeight*0.48
– Music slider
musicSdr = widget.newSlider {
sheet = slider1Sheet,
leftFrame = 1,
middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 50,
frameHeight = 10,
handleFrame = 5,
handleWidth = 50,
handleHeight = 25,
width = 600,
name = “Music”,
description = “Music Slider”,
value = 100,
orientation = “horizontal”,
listener = sliderMusicSdrListener
}
musicSdr.x = display.contentWidth-950
musicSdr.y = display.contentHeight*0.58
– Insert display objects into the group
sceneGroup:insert( background )
sceneGroup:insert( masterSdr )
sceneGroup:insert( sfxSdr )
sceneGroup:insert( musicSdr )
end
– “scene:show()”
function scene:show( event )
local sceneGroup = self.view
local phase = event.phase
if ( phase == “will” ) then
– Called when the scene is still off screen (but is about to come on screen).
elseif ( phase == “did” ) then
– Called when the scene is now on screen.
– Insert code here to make the scene come alive.
– Example: start timers, begin animation, play audio, etc.
end
end
– “scene:hide()”
function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
if ( phase == “will” ) then
– Called when the scene is on screen (but is about to go off screen).
– Insert code here to “pause” the scene.
– Example: stop timers, stop animation, stop audio, etc.
elseif ( phase == “did” ) then
– Called immediately after scene goes off screen.
end
end
– “scene:destroy()”
function scene:destroy( event )
local sceneGroup = self.view
– Called prior to the removal of scene’s view (“sceneGroup”).
– Insert code here to clean up the scene.
– Example: remove display objects, save state, etc.
end
– Listener setup
scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )
return scene
[/lua]
This is the code if you can help please do. Thank you in advance.
Something like:
-- "scene:show()" function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Called when the scene is still off screen (but is about to come on screen). masterSdr:setValue( sliders[1] ) sfxSdr:setValue( sliders[2] ) musicSdr:setValue( sliders[3] ) elseif ( phase == "did" ) then -- Called when the scene is now on screen. -- Insert code here to make the scene come alive. -- Example: start timers, begin animation, play audio, etc. end end
or something like that.
My God I’m an idiot! How did i mess this up? Sorry for waisting your time with my idiocy and thank you again.
The documentation is here: https://docs.coronalabs.com/api/library/widget/newSlider.html
The widget supports a listener function that triggers when values change. In this function you can get the value of the slider. At that point you can store the value in a variable or an attribute in a table. Then you can use whatever means you choose (table saving, writing values out to a file, use the iCloud plugin, store it in a parse.com database, etc.
Rob
OK so I have the listener function update a row in sqlite database where i save the value. I use that for some things in the app. Here’s the thing the database gets updated and the app can run properly even after you close and reopen it, but the slider gets visually reset to whatever value it was before interaction. And that’s exactly what I’m trying to prevent. I would appreciate it if you could give me an example for how that could work. Because anything i try results in the slider starting with a value of 50 (how it would start if you don’t define it).
Well read the values back in from the database and use the slider:setValue() API to set the sliders to what you want.
OK, so i get what i have to do. But not how to do it. Can you give me something, anything? Because the documentation really doesn’t provide mutch. It has one vague sentence that’s it. Thank you in advance.
Without some context or some code that you’ve written, I doubt any one on here can give you much more than vague advice. Provide some code and maybe someone can help out more.
Rob
OK, here is how the code works.
The database:
[lua]
id value
1 100
2 25
3 60
[/lua]
And here is the .lua file
[lua]
local composer = require( “composer” )
local scene = composer.newScene()
local widget = require “widget”
require( “sqlite3” )
local path = system.pathForFile( “data.db”, system.DocumentsDirectory )
local db = sqlite3.open( path )
local masterSdr
local sfxSdr
local musicSdr
local sliders = {} – Begins empty
for row in db:nrows(“SELECT * FROM sound”) do
print( "Row " … row.name )
– Create table at the next available array index
sliders[#sliders+1] =
{
id = row.id
value = row.value
}
end
– Slider listeners
local function sliderMasterSdrListener( event )
print(“Slider at”…event.value…"%")
local q = [[UPDATE sound SET value=’]]…event.value…[[’ WHERE id=1;]]
db:exec( q )
end
local function sliderSfxSdrListener( event )
print(“Slider at”…event.value…"%")
local q = [[UPDATE sound SET value=’]]…event.value…[[’ WHERE id=2;]]
db:exec( q )
end
local function sliderMusicSdrListener( event )
print(“Slider at”…event.value…"%")
local q = [[UPDATE sound SET value=’]]…event.value…[[’ WHERE id=3;]]
db:exec( q )
end
– Image sheet for horizontal slider
local optionsHorizontal = {
frames = {
{ x= 1, y= 40, width= 15, height= 15 },
{ x= 18, y= 40, width= 15, height= 15 },
{ x= 35, y= 40, width= 15, height= 15 },
{ x= 1, y= 1, width=50, height=10 },
{ x= 1, y= 13, width=50, height=25 }
},
sheetContentWidth = 52,
sheetContentHeight = 56
}
local slider1Sheet = graphics.newImageSheet( “Assets/sliderSheet.png”, optionsHorizontal )
– “scene:create()”
function scene:create( event )
local sceneGroup = self.view
– Initialize the scene here.
– Example: add display objects to “sceneGroup”, add touch listeners, etc.
– The background
local background = display.newImageRect( “Backgrounds/OptionsMenu.png”, display.contentWidth, display.contentHeight )
background.anchorX = 0
background.anchorY = 0
background.x, background.y = 0, 0
– Master slider
masterSdr = widget.newSlider {
sheet = slider1Sheet,
leftFrame = 1,
middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 50,
frameHeight = 10,
handleFrame = 5,
handleWidth = 50,
handleHeight = 25,
width = 600,
name = sliders[1].name,
description = sliders[1].description,
value = 100,
orientation = “horizontal”,
listener = sliderMasterSdrListener
}
masterSdr.x = display.contentWidth-950
masterSdr.y = display.contentHeight*0.38
– SFX slider
sfxSdr = widget.newSlider {
sheet = slider1Sheet,
leftFrame = 1,
middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 50,
frameHeight = 10,
handleFrame = 5,
handleWidth = 50,
handleHeight = 25,
width = 600,
name = “SFX”,
description = “SFX Slider”,
value = 100,
orientation = “horizontal”,
listener = sliderSfxSdrListener
}
sfxSdr.x = display.contentWidth-950
sfxSdr.y = display.contentHeight*0.48
– Music slider
musicSdr = widget.newSlider {
sheet = slider1Sheet,
leftFrame = 1,
middleFrame = 2,
rightFrame = 3,
fillFrame = 4,
frameWidth = 50,
frameHeight = 10,
handleFrame = 5,
handleWidth = 50,
handleHeight = 25,
width = 600,
name = “Music”,
description = “Music Slider”,
value = 100,
orientation = “horizontal”,
listener = sliderMusicSdrListener
}
musicSdr.x = display.contentWidth-950
musicSdr.y = display.contentHeight*0.58
– Insert display objects into the group
sceneGroup:insert( background )
sceneGroup:insert( masterSdr )
sceneGroup:insert( sfxSdr )
sceneGroup:insert( musicSdr )
end
– “scene:show()”
function scene:show( event )
local sceneGroup = self.view
local phase = event.phase
if ( phase == “will” ) then
– Called when the scene is still off screen (but is about to come on screen).
elseif ( phase == “did” ) then
– Called when the scene is now on screen.
– Insert code here to make the scene come alive.
– Example: start timers, begin animation, play audio, etc.
end
end
– “scene:hide()”
function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
if ( phase == “will” ) then
– Called when the scene is on screen (but is about to go off screen).
– Insert code here to “pause” the scene.
– Example: stop timers, stop animation, stop audio, etc.
elseif ( phase == “did” ) then
– Called immediately after scene goes off screen.
end
end
– “scene:destroy()”
function scene:destroy( event )
local sceneGroup = self.view
– Called prior to the removal of scene’s view (“sceneGroup”).
– Insert code here to clean up the scene.
– Example: remove display objects, save state, etc.
end
– Listener setup
scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )
return scene
[/lua]
This is the code if you can help please do. Thank you in advance.
Something like:
-- "scene:show()" function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Called when the scene is still off screen (but is about to come on screen). masterSdr:setValue( sliders[1] ) sfxSdr:setValue( sliders[2] ) musicSdr:setValue( sliders[3] ) elseif ( phase == "did" ) then -- Called when the scene is now on screen. -- Insert code here to make the scene come alive. -- Example: start timers, begin animation, play audio, etc. end end
or something like that.
My God I’m an idiot! How did i mess this up? Sorry for waisting your time with my idiocy and thank you again.