Skinning the Slider Widget

Solar2D Widgets
#1

I am trying to skin the slider widget in 2.0 but am running into some strange behaviour 

I have tried the code below and it works to an extent. The problem is the Handle doesn’t show at the right size that it is in the image sheet.

It is not 105 px wide even thought that is the case in the in the code and the image sheet. Even if I make the frameWidth wider the handle still remains small.

here is the code. I have also attached the whole thing in a test project with the image sheet and png etc.

local imageSheet = require("slider") local sliderSkinningSheet = graphics.newImageSheet( "slider.png", imageSheet:getSheet() ) -- Create a vertical slider local verticalSlider = widget.newSlider { left = 110, top = 270, height = 350, value = 0, id = "Vertical Slider", orientation = "vertical", listener = sliderListener, sheet = sliderSkinningSheet, topFrame = 7, middleVerticalFrame = 1, handleFrame = 6, bottomFrame = 4, fillVerticalFrame = 3, handleFrameWidth = 105, handleFrameHeight = 95, frameWidth = 38, frameHeight = 10 } displayGroup:insert( verticalSlider )

Can you tell me how to make the handle bigger?

Also if I drag the handle down quickly it goes beyond the bottom frame and looks bad. 

Is there a way to fix this? It seems to be a bug.

#2

I changed your code and replaced 

handleFrameWidth = 105, handleFrameHeight = 95, with handleWidth = 105, handleHeight = 95,

and handle was bigger.

#3

Thats Brilliant. Thank you very much.

Seems the API documentation may need an up date.

Any idea what is causing the effect that if you pull the slider down really quickly, the handle goes to the bottom but the bottom frame seems to turn into or is covered by the fill frame?

  02l.jpg

#4

I changed your code and replaced 

handleFrameWidth = 105, handleFrameHeight = 95, with handleWidth = 105, handleHeight = 95,

and handle was bigger.

#5

Thats Brilliant. Thank you very much.

Seems the API documentation may need an up date.

Any idea what is causing the effect that if you pull the slider down really quickly, the handle goes to the bottom but the bottom frame seems to turn into or is covered by the fill frame?

  02l.jpg

#6

Hi @samwit, 

Could you help me, please? :slight_smile: I’m trying to customise my slider, but I have a couple of problems:

  1. How did you define filled ends frames? I don’t see any of that in your widget properties.

  2. Any idea why my middle frame filling the entire slider looks stretched with faded edges?

  3. Any other idea, why my non-filled grey ends are darker that the slider’s non-filled middle frame?
    My guess is that the slider streched the middle frame, and it fades out on the edges like the middle fill frame. But why?

I attach the image to show you the problem and the way I have prepared the assets.

I can’t find any tutorial on skinning a slider, and official docs don’t say anything on that :frowning:

33tquix.jpg

#7

This was already discussed somewhere. It’s a problem of how corona stretches the middle frame. you should make your middle frame  A LOT wider. Make it 200px wide for example or even better make it wider than your widget width will ever be.

#8

Thanks @primoz.cerar, I will do that. 

Maybe you also know how is it possible to make the two slider’s side frames filled? I don’t know what’s the property name, it’s not in doc’s neither. 

#9

Not sure as far as I can see in the widget source code there isn’t one. I guess the fillVerticalFrame will be used to fill the sides as well or the sides aren’t meant to be filled at all. Haven’t tried it.

#10

they are not filled automatically, but in samwit’s example he managed somehow to fill the bottom end of his slider. I wonder how :slight_smile:

#11

Hi @whammy,

When you say “fill the bottom end of the slider”, do you mean (when speaking of a vertical slider) that when you slide the handle up, the part that gets revealed (the bottom frame) is already filled? If so, the “trick” in most cases is to just have that part pre-filled, graphically, and have the handle “cover” it when in the very bottom 0% position. Then, when the user slides up, that part is revealed, but it’s not actually changing the graphic in any way… it’s only being uncovered as the handle is moved up.

Brent

#12

Oh man… that was so obvious. Thanks for realising that to me :slight_smile: Sometimes I my logical thinking doesn’t go right.

#13

Hi @samwit, 

Could you help me, please? :slight_smile: I’m trying to customise my slider, but I have a couple of problems:

  1. How did you define filled ends frames? I don’t see any of that in your widget properties.

  2. Any idea why my middle frame filling the entire slider looks stretched with faded edges?

  3. Any other idea, why my non-filled grey ends are darker that the slider’s non-filled middle frame?
    My guess is that the slider streched the middle frame, and it fades out on the edges like the middle fill frame. But why?

I attach the image to show you the problem and the way I have prepared the assets.

I can’t find any tutorial on skinning a slider, and official docs don’t say anything on that :frowning:

33tquix.jpg

#14

This was already discussed somewhere. It’s a problem of how corona stretches the middle frame. you should make your middle frame  A LOT wider. Make it 200px wide for example or even better make it wider than your widget width will ever be.

#15

Thanks @primoz.cerar, I will do that. 

Maybe you also know how is it possible to make the two slider’s side frames filled? I don’t know what’s the property name, it’s not in doc’s neither. 

#16

Not sure as far as I can see in the widget source code there isn’t one. I guess the fillVerticalFrame will be used to fill the sides as well or the sides aren’t meant to be filled at all. Haven’t tried it.

#17

they are not filled automatically, but in samwit’s example he managed somehow to fill the bottom end of his slider. I wonder how :slight_smile:

#18

Hi @whammy,

When you say “fill the bottom end of the slider”, do you mean (when speaking of a vertical slider) that when you slide the handle up, the part that gets revealed (the bottom frame) is already filled? If so, the “trick” in most cases is to just have that part pre-filled, graphically, and have the handle “cover” it when in the very bottom 0% position. Then, when the user slides up, that part is revealed, but it’s not actually changing the graphic in any way… it’s only being uncovered as the handle is moved up.

Brent

#19

Oh man… that was so obvious. Thanks for realising that to me :slight_smile: Sometimes I my logical thinking doesn’t go right.

#20

Hi!

Newbie here, what would be the code equivalent and for a horizontal slider? If somebody could post a sample imageSheet too that would be awesome!