Draw Progressbar

[Krisko]

Hello everyone. I want to please you for some help. Can some one help me with progressbar drawing. I want some simple example. How can I draw my own progress bar

[STARGÅTE]

More Infomation plz!

Basic Progressbar:

Code: Select all

InitSprite()

OpenWindow(0, 0, 0, 800, 600, "Example", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
OpenWindowedScreen(WindowID(0), 0, 0, WindowWidth(0), WindowHeight(0), 0, 0, 0)

    
Repeat

  ClearScreen(0)
 
  Time = ElapsedMilliseconds()%1000
 
  StartDrawing(ScreenOutput())
    DrawingMode(1)
    Box(100, 100, 500, 50, $808080)
    Box(100, 100, Time/2, 50, $FFFFFF)
  StopDrawing()

  FlipBuffers()

Until WindowEvent() = #PB_Event_CloseWindow

[Krisko]

Well this is what I want basically. Just something to begin with. Because drawing is a little bit hard for me yet.Thanks for the code

[criobot]

Basic progressbar I've been using in one of my projects.

Code: Select all

Procedure SetProgress(State, Idle = #False)
  ProgressImage = CreateImage(#PB_Any, GadgetWidth(0), GadgetHeight(0))
  ActiveWidth = (ImageWidth(ProgressImage) / 100) * State
  InactiveWidth = ImageWidth(ProgressImage) - ActiveWidth
  StartDrawing(ImageOutput(ProgressImage))
  DrawingMode(#PB_2DDrawing_Gradient)
  LinearGradient(0, ImageHeight(ProgressImage), 0, 0)
  BackColor($CFCFCF)
  GradientColor(0.33, $DFDFDF)
  FrontColor($F2F2F2)
  Box(0,0, ActiveWidth, ImageHeight(ProgressImage))
  ResetGradientColors()
  BackColor($D0D0D0)
  FrontColor($AFAFAF)
  LinearGradient(0,  ImageHeight(ProgressImage), 0, 0)
  Box(ActiveWidth,0, InactiveWidth, ImageHeight(ProgressImage))
  If Idle = 1
    DrawingMode(#PB_2DDrawing_Transparent)
    TextWidth = TextWidth(Str(state) + "%")
    TextHeight = TextHeight(Str(state) + "%")
    DrawingFont(FontID(0))
    If TextWidth + 8 < InactiveWidth
      FrontColor($666666)
      DrawText(ActiveWidth + 4, ImageHeight(ProgressImage)/2 - TextHeight/2, Str(State) + "%")
    Else
      FrontColor($999999)
      DrawText(ActiveWidth - (TextWidth + 6), ImageHeight(ProgressImage)/2 - TextHeight/2, Str(State) + "%") 
    EndIf
  EndIf
  DrawingMode(#PB_2DDrawing_Outlined)
  FrontColor($888888)
  Box(0,0,ImageWidth(ProgressImage), ImageHeight(ProgressImage))
  If state > 0 And state < 100
    LineXY(ActiveWidth,0, ActiveWidth,ImageHeight(ProgressImage))
  EndIf
  StopDrawing()
  SetGadgetState(0, ImageID(ProgressImage))
  FreeImage(ProgressImage)
EndProcedure

OpenWindow(0, 0, 0, 270, 80, "",  #PB_Window_TitleBar | #PB_Window_SystemMenu)

ImageGadget(0, 10, 10, 200, 30, 0)
CheckBoxGadget(1, 220, 10, 40, 20, "Idle")
TrackBarGadget(2, 10, 40, 250, 20, 0, 100)
LoadFont(0, "Tahoma", 11)
SetProgress(GetGadgetState(2), 1-GetGadgetState(1))
Repeat
  Event = WaitWindowEvent()
  Select Event
    Case #PB_Event_CloseWindow
      End
    Case #PB_Event_Gadget
      Select EventGadget()
        Case 1
          SetProgress(GetGadgetState(2), 1-GetGadgetState(1))
        Case 2
          SetProgress(GetGadgetState(2), 1-GetGadgetState(1))
      EndSelect
  EndSelect
ForEver

[Demivec]

Here's another one that's a variation of STARGÅTE's.

Code: Select all

Procedure updateProgressBar(barNum, imageNum, amount, max, fColor, bColor)
  StartDrawing(ImageOutput(imageNum))
    Box(0, 0, ImageWidth(imageNum), ImageHeight(imageNum), fColor)
    Box(0, 0, amount / (max / ImageWidth(imageNum)), ImageHeight(imageNum), bColor)
  StopDrawing()
  SetGadgetState(barNum, ImageID(imageNum))
EndProcedure

OpenWindow(0, 0, 0, 800, 600, "Example", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
CreateImage(0, 500, 20)
ImageGadget(0, 100, 100, 0, 0, ImageID(0))
updateProgressBar(0, 0, 0, 1000, $808080, $FFFFFF)

CreateImage(1, 100, 10)
ImageGadget(1, 100, 150, 0, 0, ImageID(1))
updateProgressBar(1, 1, 0, 1000, $008080, $004040)

AddWindowTimer(0,0,20)
Repeat
  time = ElapsedMilliseconds() % 1000
  event = WindowEvent()
  If event = #pb_event_timer
    updateProgressBar(0, 0, time, 1000, $808080, $FFFFFF) 
    updateProgressBar(1, 1, time, 1000, $00FFFF, $008080) 
  EndIf 
Until event = #PB_Event_CloseWindow

The updateProgressBar() procedure can be updated to include the required complexities that you need. It is drawing on an image and then setting an ImageGadget to display that image. Ask if you have additional questions.


@Edit: Corrected the order of the ImageGadget's initial creation/update according to WilliamL's helpful debugging. Also removed the dimensions from the ImageGadget's creation because it will receive the dimensions of the image it contains (they contradicted each other anyway in the former code).

[WilliamL]

Hi Demivec,

Your code works great if you reverse these lines:

Code: Select all

updateProgressBar(0, 0, 0, 1000, $808080, $FFFFFF)
ImageGadget(0, 100, 100, 500, 50, ImageID(0))

CreateImage(1, 100, 10)
updateProgressBar(1, 1, 0, 1000, $008080, $004040)
ImageGadget(1, 100, 150, 500, 50, ImageID(1))

to

Code: Select all

ImageGadget(0, 100, 100, 500, 50, ImageID(0))
updateProgressBar(0, 0, 0, 1000, $808080, $FFFFFF)

CreateImage(1, 100, 10)
ImageGadget(1, 100, 150, 500, 50, ImageID(1))
updateProgressBar(1, 1, 0, 1000, $008080, $004040)

I'm sure everyone already figured that out.
I like this simple solution but why not just use the ProgressBarGadget?

[Demivec]

Your code works great if you reverse these lines:

@WilliamL: When I wrote the code I noticed that it would virtually be identical either way. I personally can tell any difference. What did you notice by before you changed it?

The examples are to answer Krisko's question about drawing his 'own progress bar'. It would be simpler to just use the progress bar in the first place. Drawing it oneself does allow a bit of variety in how things are done. For instance, you can draw a text value over the top that displays a percentage amount, or something similar. When customization is needed it is frequently done with API, however, the previous examples were done in a way that should be cross-platform.

[WilliamL]

Hey Demivec,

If I don't reverse the lines I get an error of Gadget not initialized in line 6 (SetGadgetState(barNum....) of the Procedure updateProgressBar.

Yes, yes, I agree, a custom progress bar is worthwhile. I looked carefully to see if Krisko was asking for something more than a simple progress bar and he just said he wanted a simple one. I've been using my own progress bar for years (my older Basic didn't have one like pb does!) and I used your method. I like your idea of using text over the bar (like a percentage), I haven't tried that.

[Demivec]

@WilliamL: You're right about the gadget not being initialized, it only shows when debugging. I've made the correction to the previous code.

Since this was probably before your time, here's a link to a discussion on Progress Bar's and text : http://www.purebasic.fr/english/viewtop ... 1&p=232589. Krisko may find it useful as well.


Here's a way to do text percentages using my previous example and a small addition:

Code: Select all

Procedure updateProgressBar(barNum, imageNum, amount, max, fColor, bColor, tColor, txt.s = "Progress bar")
  Protected iw = ImageWidth(imageNum), ih = ImageHeight(imageNum), tw, th
  StartDrawing(ImageOutput(imageNum))
    Box(0, 0, iw, ih, fColor)
    Box(0, 0, amount / (max / iw), ih, bColor)
    DrawingMode(#PB_2DDrawing_Transparent)         
    txt + " " + LSet(Str(amount * 100/max), 2, "0") + "%"
    tw = TextWidth(txt)
    th = TextHeight(txt)         
    DrawText((iw - tw) >> 1, (ih - th) >> 1, txt, tColor)
  StopDrawing()
  SetGadgetState(barNum, ImageID(imageNum))
EndProcedure

OpenWindow(0, 0, 0, 800, 600, "Example", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
CreateImage(0, 500, 20)
ImageGadget(0, 100, 100, 0, 0, ImageID(0))
updateProgressBar(0, 0, 0, 1000, $808080, $FFFFFF, $0, "")


CreateImage(1, 100, 15)
ImageGadget(1, 100, 150, 0, 0, ImageID(1))
updateProgressBar(1, 1, 0, 1000, $008080, $004040, $0, "")


AddWindowTimer(0,0,20)
Repeat
  time = ElapsedMilliseconds() % 1000
  event = WindowEvent()
  If event = #pb_event_timer
    updateProgressBar(0, 0, time, 1000, $808080, $FFFFFF, $0000FF) 
    updateProgressBar(1, 1, time, 1000, $00FFFF, $008080, $E0E000, "Completed") 
  EndIf 
Until event = #PB_Event_CloseWindow

[WilliamL]

@Demivec, I read the other thread and I'm glad to see that we are using cross-platform code here and I think that is all that is necessary for a good progress bar.

I'm using the same constant for the Image/Gadget/Font since they different groups (a shortcut).

Code: Select all

Enumeration 1
    #progbarone
    #progbartwo
EndEnumeration

Procedure updateProgressBar(barNum, imageNum, amount, max, fColor, bColor, tColor, txt.s = "Progress bar")
  Protected iw = ImageWidth(imageNum), ih = ImageHeight(imageNum), tw, th
  StartDrawing(ImageOutput(imageNum))
    Box(0, 0, iw, ih, fColor)
    Box(0, 0, amount / (max / iw), ih, bColor)
    DrawingMode(#PB_2DDrawing_Transparent)
    DrawingFont(FontID(barNum))
    txt + " " + LSet(Str(amount * 100/max), 2, "0") + "%"
    tw = TextWidth(txt)
    th = TextHeight(txt)         
    DrawText((iw - tw) >> 1, (ih - th) >> 1, txt, tColor)
  StopDrawing()
  SetGadgetState(barNum, ImageID(imageNum))
EndProcedure

OpenWindow(0, 0, 0, 800, 600, "Example", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
CreateImage(#progbarone, 500, 20)
ImageGadget(#progbarone, 100, 100, 0, 0, ImageID(#progbarone))
LoadFont(#progbarone,"Arial",ImageHeight(#progbarone)-4)
updateProgressBar(#progbarone, #progbarone, 0, 1000, $808080, $FFFFFF, $0, "")


CreateImage(#progbartwo, 100, 15)
ImageGadget(#progbartwo, 100, 150, 0, 0, ImageID(#progbartwo))
LoadFont(#progbartwo,"Arial",ImageHeight(#progbartwo)-4)
updateProgressBar(#progbartwo, #progbartwo, 0, 1000, $008080, $004040, $0, "")


AddWindowTimer(0,0,20)
Repeat
  time = ElapsedMilliseconds() % 1000
  event = WindowEvent()
  If event = #PB_Event_Timer
    updateProgressBar(#progbarone, #progbarone, time, 1000, $808080, $FFFFFF, $0000FF) 
    updateProgressBar(#progbartwo, #progbartwo, time, 1000, $00FFFF, $008080, $E0E000, "Completed") 
  EndIf 
Until event = #PB_Event_CloseWindow

[Demivec]

I added an adjustment for font height. I don't like loading the font each time but if there are several progress bars it would be necessary.

You can do away with loading the font each time by loading it at the time the progress bar is created (i.e. when its image is first created) and then passing the fontNum to the update procedure as a parameter. The update procedure would then just select the font using DrawingFont(FontID(fontNum)).

[WilliamL]

Yeah, that's a good way to do it. I'd do it that way in my program.

I changed my/your code in my post above to show the loading of the font at the time the progress bar is created.