Draw Progressbar
Posted: Sun Sep 19, 2010 10:28 pm
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 

http://www.purebasic.com
https://www.purebasic.fr/english/
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
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
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
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))
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)
@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?WilliamL wrote:Your code works great if you reverse these lines:
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
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
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 wrote: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.