How to make image sheet for Slider Widget?

Solar2D Widgets
#1

in the API ( http://docs.coronalabs.com/api/library/widget/newSlider.html ) visually customizing a slider widget is discussed but it does not go into depth on how to create the image sheet. I’m made a simple one and it yielded results, but I can’t get it to look like the example in the API.

Attached is my source code, image sheet lua file, and the image sheet png ; the whole mini project zipped up!

 

I made the image sheet in Texture Packer.

Below is a screenshot of what the slider looks like with my customization.

Does anyone understand what the left and right colors are for, they sort of act as limits for the handle as well. Also, how do produce the border around the slider bar?

Thanks!! Isiah.

#2

The slider requires 5 total images:

  1. Frame Left cap

  2. Frame Right cap

  3. Frame middle

These three frames construct the outside of the slider.  The end caps are drawn at the size they are in the frame.  The frame middle is stretched to fit the size of the slider.  Generally these three images should be the same width.

  1. The fill frame

This is the image that will fill the middle of the frame.  If the height of that image is shorter than the gap between the frame edges you should get some white space.

5.  The handle.  It’s pretty straight forward.

If you use something like texturePacker to pack the images into a sheet, it should spit out the right Lua code that you can simply require it in and pass it’s data to the graphic.newImageSheet() and get a sheet object that the slider will be happy with.  You will need to figure out the frame numbers of each of the 5 parts to pass into the slider widget.  In the case of the example at:
 

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

we hand-packed the image file, so we knew where each frame started and stopped.

Rob

#3

The slider requires 5 total images:

  1. Frame Left cap

  2. Frame Right cap

  3. Frame middle

These three frames construct the outside of the slider.  The end caps are drawn at the size they are in the frame.  The frame middle is stretched to fit the size of the slider.  Generally these three images should be the same width.

  1. The fill frame

This is the image that will fill the middle of the frame.  If the height of that image is shorter than the gap between the frame edges you should get some white space.

5.  The handle.  It’s pretty straight forward.

If you use something like texturePacker to pack the images into a sheet, it should spit out the right Lua code that you can simply require it in and pass it’s data to the graphic.newImageSheet() and get a sheet object that the slider will be happy with.  You will need to figure out the frame numbers of each of the 5 parts to pass into the slider widget.  In the case of the example at:
 

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

we hand-packed the image file, so we knew where each frame started and stopped.

Rob