Slider widget image sheet

Solar2D Advanced Graphics
#1

Hello, does anybody have a code sample that uses slider.newWidget with an imagesheet, and also containing the imagesheet file?

I checked the documentation and it is kinda understandable, but an image is worth a 1000 words :slight_smile:

maybe if someone just could post the “slidersheet.png” that is mentioned in the sample code?

local widget = require( "widget" ) -- Slider listener local function sliderListener( event ) print( "Slider at " .. event.value .. "%" ) end -- Image sheet options and declaration local options = { frames = { { x=0, y=0, width=36, height=64 }, { x=40, y=0, width=36, height=64 }, { x=80, y=0, width=36, height=64 }, { x=124, y=0, width=36, height=64 }, { x=168, y=0, width=64, height=64 } }, sheetContentWidth = 232, sheetContentHeight = 64 } local sliderSheet = graphics.newImageSheet( "sliderSheet.png", options ) -- Create the widget local slider = widget.newSlider { sheet = sliderSheet, leftFrame = 1, middleFrame = 2, rightFrame = 3, fillFrame = 4, frameWidth = 36, frameHeight = 64, handleFrame = 5, handleWidth = 64, handleHeight = 64, top = 200, left= 50, orientation = "horizontal", width = 300, listener = sliderListener }

Thank you!

#2

Hi @joedavinci,

I recommend you just copy (right-click and save) the image from the docs page (left image) and then test it out in your project. It will have a white background and the colored “region” overlays, but it should show you how the overall image sheet is being used to assemble a custom-skinned slider.

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

Hope this helps,

Brent

#3

ok, thanks, will try that.

#4

Hi @joedavinci,

I recommend you just copy (right-click and save) the image from the docs page (left image) and then test it out in your project. It will have a white background and the colored “region” overlays, but it should show you how the overall image sheet is being used to assemble a custom-skinned slider.

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

Hope this helps,

Brent

#5

ok, thanks, will try that.