Problems with ProgressView

Getting Started Newbie Questions
#1

Hi everybody

I’m trying to set up a progress bar using the images and code provided in corona webpage about creating ProgressView. The native bar shows up as expected but it isn’t really good so I tried the sample image sheet provided on corona website but the results isn’t good!!

I attached the photo of the progress bar I get. Excuse me for it is position and overlying textfield object I’m trying to create objects correctly then place them.

Thanks for your help

#2

Can you post the code where you’re creating the progress bar?

#3

Hi

I copied the code from corona guide on progress view. I only used a timer to update the progress.

–the code is:
local widget = require( “widget” )

– Image sheet options and declaration
– For testing, you can copy/save the image under “Visual Customization” above
local options = {
width = 64,
height = 64,
numFrames = 6,
sheetContentWidth = 384,
sheetContentHeight = 64
}
local progressSheet = graphics.newImageSheet( “widget-progress-view.png”, options )

– Create the widget
local progressView = widget.newProgressView(
{
sheet = progressSheet,
fillOuterLeftFrame = 1,
fillOuterMiddleFrame = 2,
fillOuterRightFrame = 3,
fillOuterWidth = 64,
fillOuterHeight = 64,
fillInnerLeftFrame = 4,
fillInnerMiddleFrame = 5,
fillInnerRightFrame = 6,
fillWidth = 64,
fillHeight = 64,
left = 50,
top = 200,
width = 220,
isAnimated = true
}
)

– Set the progress to 50%
progressView:setProgress( 0.5 )

Thanks

#4

It’s actually working exactly like it should… But the image sheet you downloaded was designed to show you the different parts. If you delete the color backgrounds of the blocks and make them transparent, you will find it’s doing what it supposed to (although with odd colors). That image sheet wasn’t designed to actually be used, but to highlight that you make squares. Two have the end-caps of the outer frame, one has the top and bottom of the outer frame, two more have the end-caps of the fill bar and the last one is the fill bar itself.  I’m going to add the graphic I used after stripping the backgrounds out and maybe that will help you see how it supposed to work.

Rob

#5

It is now working well!!!

I find this progress view widgent and slider widget are difficult due to difficulties in designing a sprite sheet. I’ll try to find a free sprite sheet program

Thanks Rob

#6

I’ve not looked at the slider’s image sheet requirements in a while, but the progress bar is pretty easy to do in any image editing package like Photoshop or The Gimp. It’s 6 squares in a row. Three for the outer frame, three for the inner bar.  I don’t know that spite tool would be any easier.

Rob

#7

Can you post the code where you’re creating the progress bar?

#8

Hi

I copied the code from corona guide on progress view. I only used a timer to update the progress.

–the code is:
local widget = require( “widget” )

– Image sheet options and declaration
– For testing, you can copy/save the image under “Visual Customization” above
local options = {
width = 64,
height = 64,
numFrames = 6,
sheetContentWidth = 384,
sheetContentHeight = 64
}
local progressSheet = graphics.newImageSheet( “widget-progress-view.png”, options )

– Create the widget
local progressView = widget.newProgressView(
{
sheet = progressSheet,
fillOuterLeftFrame = 1,
fillOuterMiddleFrame = 2,
fillOuterRightFrame = 3,
fillOuterWidth = 64,
fillOuterHeight = 64,
fillInnerLeftFrame = 4,
fillInnerMiddleFrame = 5,
fillInnerRightFrame = 6,
fillWidth = 64,
fillHeight = 64,
left = 50,
top = 200,
width = 220,
isAnimated = true
}
)

– Set the progress to 50%
progressView:setProgress( 0.5 )

Thanks

#9

It’s actually working exactly like it should… But the image sheet you downloaded was designed to show you the different parts. If you delete the color backgrounds of the blocks and make them transparent, you will find it’s doing what it supposed to (although with odd colors). That image sheet wasn’t designed to actually be used, but to highlight that you make squares. Two have the end-caps of the outer frame, one has the top and bottom of the outer frame, two more have the end-caps of the fill bar and the last one is the fill bar itself.  I’m going to add the graphic I used after stripping the backgrounds out and maybe that will help you see how it supposed to work.

Rob

#10

It is now working well!!!

I find this progress view widgent and slider widget are difficult due to difficulties in designing a sprite sheet. I’ll try to find a free sprite sheet program

Thanks Rob

#11

I’ve not looked at the slider’s image sheet requirements in a while, but the progress bar is pretty easy to do in any image editing package like Photoshop or The Gimp. It’s 6 squares in a row. Three for the outer frame, three for the inner bar.  I don’t know that spite tool would be any easier.

Rob