Widget 2.0: Newslider Not Using Imagesheet Specifications

[mutatron]

I figured out how to get an imageSheet to work with newSlider, sort of, but the problem is, it’s not using the dimensions I’ve specified. Code for the imageSheet and slider are below.

 

The widget 2.0 newSlider seems to not work with what I wanted my sliders to look like. With the old sliders, I was able to make them 50 px tall and 150 px wide, so I could update the value indicator text inside the slider area and not have to waste space having text on the outside. I also had special looking handles to follow the theme of my app.

 

Now it looks like the slider frame is limited to a certain height, like 16px? And the handle is pegged to a certain width? Probably I’m just not doing my image sheet correctly. Is it possible to have sliders with a height different from some standard height, and handles of different widths from some standard width?

 

 

local options = {     -- array of tables representing each frame (required)     frames =     {         -- FRAME 1: Handle Frame         {             x = 0,             y = 0,             width = 9,             height = 54         },         -- FRAME 2: Left Frame         {             x = 9,             y = 0,             width = 2,             height = 50         },         -- FRAME 3: Right Frame         {             x = 9+150-2,             y = 0,             width = 2,             height = 50         },         -- FRAME 4: Middle Frame         {             x = 9,             y = 0,             width = 150,             height = 50         },         -- FRAME 5: Fill Frame         {             x = 9+150,             y = 0,             width = 2,             height = 50         },     },     -- optional params; used for dynamic resolution support     sheetContentWidth = 161,     sheetContentHeight = 54 } local sliderSheet = graphics.newImageSheet( "images/sliderSheet.png", options ) local mySlider = widget.newSlider{             top = firstButtonY, left = 10,             width = 150, height = 50,             value = 1,             listener = mySliderListener,             sheet = sliderSheet,             leftFrame = 2,             middleFrame = 4,             rightFrame = 3,             fillFrame = 5,             handleFrame = 1,             handleFrameWidth = 9,             handleFrameHeight = 54         }         gameGroup:insert( mySlider ) end  

 

 

 

[sjerrett]

Could I take a look at your sliderSheet.png? I don’t think I can help, but I can’t get my slider imagesheet to work at all, so I’d like to see how you did it.

[sjerrett]

Could I take a look at your sliderSheet.png? I don’t think I can help, but I can’t get my slider imagesheet to work at all, so I’d like to see how you did it.

[juliusbangert]

Hi mutatron,
I’m also having trouble trying to use the sheet parameter for widget.newSlider(). Did you ever figure out a solution? It seems problem is that setting handleFrameWidth and handleFrameHeight makes no difference to the way the image is being rendered.
Please could someone at corona do a tutorial or some documentation about how to use image sheets with widget objects.

[sjerrett]

I also had the problem with the handle dimensions. I ended up changing the dimensions in my imageSheet. Essentially, I have transparent space around my handle in the imageSheet file, and then define the sheet dimensions to capture the empty space. So my handle is actually 30x30, but the frame is 75x75.

[sjerrett]

There appears to be another issue too – the slider handle only accepts touch events from the centre to the right. So if you try to grab the left side of the handle, it doesn’t move.

[neilw711]

I’m also having alot of trouble with this.  No matter the size of my widgets in the imagesheet, it still wouldn’t accept any dimension I set it to. It was alot easier in widget 1.0. The good thing about widget 2.0 is the slider works with the multi-touch function. 

[alexf]

Hi guys,

We posted the Widget 2.0 source code on git (coronalabs.com/github), so you can look at the exact way the slider is implemented. If that leaves any question unanswered, don’t hesitate to ask

A great day,

Alex

[sjerrett]

Thanks Alex – this is a massive help.

Just FYI: It’s github.com/coronalabs

-s.

[neilw711]

So I’m not quite understanding this.  What are we supposed to look at? I see the graphics for the sliders but what does that supposed to tell me? 

[rob]

@neilw711, you can go to the repository and drill down through the various folders to find the exact source code being used for each widget. 

From GitHub, click on framework-widgets then widgetLibrary then you will see widget_slider.lua.  Clicking on that will reveal the actual source code.

Then you can examine the code and see what it’s doing.

[juliusbangert]

Hi mutatron,
I’m also having trouble trying to use the sheet parameter for widget.newSlider(). Did you ever figure out a solution? It seems problem is that setting handleFrameWidth and handleFrameHeight makes no difference to the way the image is being rendered.
Please could someone at corona do a tutorial or some documentation about how to use image sheets with widget objects.

[sjerrett]

I also had the problem with the handle dimensions. I ended up changing the dimensions in my imageSheet. Essentially, I have transparent space around my handle in the imageSheet file, and then define the sheet dimensions to capture the empty space. So my handle is actually 30x30, but the frame is 75x75.

[sjerrett]

There appears to be another issue too – the slider handle only accepts touch events from the centre to the right. So if you try to grab the left side of the handle, it doesn’t move.

[neilw711]

I’m also having alot of trouble with this.  No matter the size of my widgets in the imagesheet, it still wouldn’t accept any dimension I set it to. It was alot easier in widget 1.0. The good thing about widget 2.0 is the slider works with the multi-touch function. 

[alexf]

Hi guys,

We posted the Widget 2.0 source code on git (coronalabs.com/github), so you can look at the exact way the slider is implemented. If that leaves any question unanswered, don’t hesitate to ask

A great day,

Alex

[sjerrett]

Thanks Alex – this is a massive help.

Just FYI: It’s github.com/coronalabs

-s.

[neilw711]

So I’m not quite understanding this.  What are we supposed to look at? I see the graphics for the sliders but what does that supposed to tell me? 

[rob]

@neilw711, you can go to the repository and drill down through the various folders to find the exact source code being used for each widget. 

From GitHub, click on framework-widgets then widgetLibrary then you will see widget_slider.lua.  Clicking on that will reveal the actual source code.

Then you can examine the code and see what it’s doing.

[neilw711]

Ok, I’m looking at the code but I’m not quite understanding the code and what it’s doing.  I’m trying to customize a horizontal slider and this is what I see:

local function createHorizontalSlider( slider, options )

    – Create a local reference to our options table

    local opt = options

        

    – Forward references

    local imageSheet, view, viewLeft, viewRight, viewMiddle, viewFill, viewHandle

        

    – Create the view

    if opt.sheet then

        imageSheet = opt.sheet

    else

        local themeData = require( opt.themeData )

        imageSheet = graphics.newImageSheet( opt.themeSheetFile, themeData:getSheet() )

    end

    

    – The view is the slider (group)

    view = slider

    

    – The slider’s left frame

    viewLeft = display.newImageRect( slider, imageSheet, opt.leftFrame, opt.frameWidth, opt.frameHeight )

    

    – The slider’s middle frame

    viewMiddle = display.newImageRect( slider, imageSheet, opt.middleFrame, opt.frameWidth, opt.frameHeight )

    

    – The slider’s right frame

    viewRight = display.newImageRect( slider, imageSheet, opt.rightFrame, opt.frameWidth, opt.frameHeight )

    

    – The slider’s fill

    viewFill = display.newImageRect( slider, imageSheet, opt.fillFrame, opt.frameWidth, opt.frameHeight )

    

    – The slider’s handle

    viewHandle = display.newImageRect( slider, imageSheet, opt.handleFrame, opt.handleWidth, opt.handleHeight )

It’s not stating a specific imageSheet that its using.