Custom Widget Slider

Solar2D Widgets
#1

I’ve been working on a custom-look slider, which is pretty difficult to figure out how to do. Anybody want to make a crisp tutorial?

Anyway, I have managed to get an operating slider that has my custom look. However, its ridiculously thin (see attachment) and the handle dimensions are fixed. I would love help with the following:

  1. Increasing the thickness

  2. Editing the handle’s dimension

Thanks

Nathan

#2

Can you post some code?

#3

ooh I knew I forgot something important… Here it is:

local SS = require ( "sliderSprites" ) local sliderSheet = graphics.newImageSheet("sliderSprites.png", SS.sheetData) local sliderWidth = display.contentWidth - 0.3 \* display.contentWidth local slider = widget.newSlider { left = display.contentCenterX - 0.5 \* sliderWidth, top = headerBarGroup.height \* 1.5, width = sliderWidth, value = volume \* 100, sheet = sliderSheet, leftFrame = 3, middleFrame = 4, rightFrame = 5, fillFrame = 1, handleFrame = 2, handleFrameWidth = 95, handleFrameHeight = 95, listener = sliderFunction, } group:insert( slider )

--sliderSprites.lua local M = {} M.sheetData = { frames = { { x = 99, y = 0, width = 95, height = 95, sourceX=0, sourceY=0, sourceWidth=95 , sourceHeight=95 }, { x = 0, y = 68, width = 95, height = 95, sourceX=0, sourceY=0, sourceWidth=95 , sourceHeight=95 }, { x = 135, y = 99, width = 32, height = 64, sourceX=3, sourceY=16, sourceWidth=35 , sourceHeight=95 }, { x = 0, y = 0, width = 95, height = 64, sourceX=0, sourceY=16, sourceWidth=95 , sourceHeight=95 }, { x = 99, y = 99, width = 32, height = 64, sourceX=0, sourceY=16, sourceWidth=35 , sourceHeight=95 }, }, sheetContentWidth = 198, sheetContentHeight = 167 } return M
#4

You need two more parameters apparently:

frameWidth

frameHeight

Rob

#5

Alright! I’m guessing those are used interchangeably depending on your sliders orientation. This solved my first issue! 

Any ideas about the handle dimensions? 

#6

The code loads your image from the image sheet using display.newImageRect() which requires a width and height.  You have the three handle variables;  handleFrame, (the image from the image sheet), handleWidth and handleHeight.

#7

You’re my hero of the day. I really appreciate you help.

I would like to ask one more question. I figured it out months ago, but I’ve forgotten what I did, and I no longer have the code. When I move my handle, the the left side of the fill pops about a pixel to the left. Why does  it do that?

#8

Without creating my own spritesheet, or altering the included graphics at all, I started playing with these params:
 
    sliderDefaults.frameWidth = nil
    sliderDefaults.frameHeight = 16
    sliderDefaults.handleWidth = 85
    sliderDefaults.handleHeight = 85
 
Now, rather than rounded corners, my slider looks boxy, like this:
mySliderWithBoxyEnds.png
When I look at the Corona included tps file, I see that rounded ends images are in fact there.
sectionOf_widget_theme_ios.png
Does anyone know why I’m losing them by setting these width values?
 
also, I noticed these bugs in the latest “widget_theme_ios_sheet.lua” (from github)

    [“silder_middleFrame”] = 43,
    [“silder_middleFrameVertical”] = 44,
 
notice that “slider” is misspelled…

ok, would someone tell me where the TinyMCE upload feature lives??  I’m trying to share from my dropbox and for some reason, you can’t see those images…

#9

Can someone tell me why I have these faded vertical bars at each end of my custom slider??

I’m not speaking of the blue icons bleeding from the top…those are supposed to be there.

I’m referring to the gaps between the elements (left & right frame) of my spritesheet.

2lxe79e.png

#10

I wish I could give you a definite answer, but I really don’t know. I would make sure your params for your sprite sheet table are all accurate. If a number is off by even a pixel it may result in some funniness. 

It looks like you fixed your rounded corner issue. If you did, would you mind sharing how you managed to get round ends?

Nathan

#11

Hi @dgaedcke,

Do you mean how the pink bar has a little “fade out” toward the right side, before it touches the “cap”? This can happen if the image frame that you’re using to “fill the bar” is short (like 10-20 pixels). The way Corona stretches out that image to fill the entire length of the bar can result in some fade off toward each end, when stretched to a much longer distance than the source frame’s pixel width.

The most likely solution is to just make this frame much, much wider in your image editing program… i.e. if it’s 10 or 20 pixels, make it 200-300 pixels.

Best regards,

Brent

#12

@brent – yes, it’s that fade-out that I’m referring to and yes, that image is currently only 20 or 24 px

So your answer is right on point…except what about that similar vertical line on the left side??

You may need to zoom in to see it…it’s a vertical line, rather than a “fade-out”…and it goes away (in mac simulator) once I move the handle either direction…will the same solution fix that as well??

oh, I re-read your answer and you did say “at EACH end” so I believe that should solve it…thanks

@nathan – I did try tweaking the size params both up and down, and it did not help things…but it looks like Brent has seen this before and it’s due to stretching an image too far…

Regarding the rounded corners, I got those when I built my own left and right frame images with rounded corners…so long as I was using the built-in (CL provided) widget assets, I had square corners…your example params above (plus robs answers) got me going on using my own assets…thanks for that to both of you.

#13

Yeah, listen to the staff members. They all know much more than I do.  :) 

I’m glad you’re figuring things out and I could be of some help. 

#14

Can you post some code?

#15

ooh I knew I forgot something important… Here it is:

local SS = require ( "sliderSprites" ) local sliderSheet = graphics.newImageSheet("sliderSprites.png", SS.sheetData) local sliderWidth = display.contentWidth - 0.3 \* display.contentWidth local slider = widget.newSlider { left = display.contentCenterX - 0.5 \* sliderWidth, top = headerBarGroup.height \* 1.5, width = sliderWidth, value = volume \* 100, sheet = sliderSheet, leftFrame = 3, middleFrame = 4, rightFrame = 5, fillFrame = 1, handleFrame = 2, handleFrameWidth = 95, handleFrameHeight = 95, listener = sliderFunction, } group:insert( slider )

--sliderSprites.lua local M = {} M.sheetData = { frames = { { x = 99, y = 0, width = 95, height = 95, sourceX=0, sourceY=0, sourceWidth=95 , sourceHeight=95 }, { x = 0, y = 68, width = 95, height = 95, sourceX=0, sourceY=0, sourceWidth=95 , sourceHeight=95 }, { x = 135, y = 99, width = 32, height = 64, sourceX=3, sourceY=16, sourceWidth=35 , sourceHeight=95 }, { x = 0, y = 0, width = 95, height = 64, sourceX=0, sourceY=16, sourceWidth=95 , sourceHeight=95 }, { x = 99, y = 99, width = 32, height = 64, sourceX=0, sourceY=16, sourceWidth=35 , sourceHeight=95 }, }, sheetContentWidth = 198, sheetContentHeight = 167 } return M
#16

You need two more parameters apparently:

frameWidth

frameHeight

Rob

#17

Alright! I’m guessing those are used interchangeably depending on your sliders orientation. This solved my first issue! 

Any ideas about the handle dimensions? 

#18

The code loads your image from the image sheet using display.newImageRect() which requires a width and height.  You have the three handle variables;  handleFrame, (the image from the image sheet), handleWidth and handleHeight.

#19

You’re my hero of the day. I really appreciate you help.

I would like to ask one more question. I figured it out months ago, but I’ve forgotten what I did, and I no longer have the code. When I move my handle, the the left side of the fill pops about a pixel to the left. Why does  it do that?

#20

Without creating my own spritesheet, or altering the included graphics at all, I started playing with these params:
 
    sliderDefaults.frameWidth = nil
    sliderDefaults.frameHeight = 16
    sliderDefaults.handleWidth = 85
    sliderDefaults.handleHeight = 85
 
Now, rather than rounded corners, my slider looks boxy, like this:
mySliderWithBoxyEnds.png
When I look at the Corona included tps file, I see that rounded ends images are in fact there.
sectionOf_widget_theme_ios.png
Does anyone know why I’m losing them by setting these width values?
 
also, I noticed these bugs in the latest “widget_theme_ios_sheet.lua” (from github)

    [“silder_middleFrame”] = 43,
    [“silder_middleFrameVertical”] = 44,
 
notice that “slider” is misspelled…

ok, would someone tell me where the TinyMCE upload feature lives??  I’m trying to share from my dropbox and for some reason, you can’t see those images…