Progress Bar Evolution

BlitzMax Forums/MaxGUI Module/Progress Bar Evolution

degac (Posted 2009) [#1]

As I'm quite bored of the 'standard' Win32 progress bar - and heavly inspired by the MacOS GUI (and d-bug work for CocoaExt...) - I decided to create my own version of the Progress Bar gadget for MaxGUI. Nothing so exotic - it's all based on standard MaxGUI components, but it seems to work fine (tested only on Win32 at the moment) Here a screenshot of the different progress bar I've implemented edit: 31/08/2009 - Update to version 1.1 Added styles: PBAR_ACTIVE (for rating indicator) PBAR_NOBORDER (for standard progress bar without border) The Rating indicator emits an EVENT_GADGETACTION; EventData() returns the rating (1-5) source code + images http://www.graphio.net/download/proxy_ProgressBar.zip Rem Progress Bar Evolution © degac - 30 ago 2009 require MaxGUI and some images to work at the best 1.1 - 31 ago 2009 ! fixed bug in CleanUp() method + added new style: PBAR_ACTIVE + added new style: PBAR_NOBORDER End Rem SuperStrict Import maxgui.drivers Local window:TGadget window=CreateWindow("Progress Bar",40,40,500,350,,WINDOW_CENTER|WINDOW_TITLEBAR) CreateLabel "Default MaxGui" ,10, 10,180,20,window '0 CreateLabel "Standard" ,10, 40,180,20,window '1 CreateLabel "Standard (personalized)" ,10, 70,180,20,window '2 - NO BORDER + COLORIZED CreateLabel "Standard+Show+indicator" ,10,100,180,20,window '3 CreateLabel "Discrete" ,10,130,180,20,window '4 CreateLabel "Discrete+Alert" ,10,160,180,20,window '5 CreateLabel "Standard+Alert+Indicator" ,10,190,180,20,window '5 CreateLabel "Rating" ,10,220,180,20,window '6 CreateLabel "Rating - interactive" ,10,250,180,20,window '6 Local standard:tgadget= CreateProgBar(210,10,200,20,window) Local prog1:Tgadget= CreatePbar(210,40,200,20,window) Local prog2:Tgadget= CreatePbar(210,70,200,20,window,PBAR_STANDARD|PBAR_NOBORDER) Local prog3:tgadget= CreatePbar(210,100,200,20,window,PBAR_SHOW|PBAR_STANDARD|PBAR_INDICATOR)'|PBAR_NOBORDER) Local prog4:tgadget= CreatePbar(210,130,200,20,window,PBAR_DISCRETE) Local prog5:tgadget= CreatePbar(210,160,200,20,window,PBAR_DISCRETE|PBAR_ALERT) Local prog6:tgadget= CreatePbar(210,190,200,20,window,PBAR_STANDARD|PBAR_ALERT|PBAR_INDICATOR) Local prog7:tgadget= CreatePbar(210,220,14*5,20,window,PBAR_RATING) Local prog8:tgadget= CreatePbar(210,250,14*5,20,window,PBAR_RATING|PBAR_ACTIVE) 'SetGadgetColor PROG8,255,255,255 SetSliderValue prog7,5 'SetGadgetColor standard,255,200,150 'SetGadgetColor standard,200,0,200,False 'SetGadgetColor prog,255,200,150 'SetGadgetColor prog,200,0,200,False SetGadgetPixmap prog2,LoadPixmap("green_bar.png")' here we change the graphical aspect of the progress bar SetSliderRange prog5,4,8 Local mytimer:ttimer=CreateTimer(10) While WaitEvent() Select EventID() Case EVENT_GADGETACTION If EventSource()=prog8 Print "User Rating: "+EventData() End If Case EVENT_WINDOWCLOSE Exit Case EVENT_TIMERTICK Local t:Int=EventData() If t=50 StopTimer(mytimer) UpdateProgBar standard,t/50.0 UpdateProgBar prog1,t/50.0 UpdateProgBar prog2,t/50.0 UpdateProgBar prog3,t/50.0 UpdateProgBar prog4,t/50.0 UpdateProgBar prog5,t/50.0 UpdateProgBar prog6,t/50.0 End Select Wend Print "Closing..." Local tt:Int=MilliSecs() FreeGadget prog1 'Rem FreeGadget prog2 FreeGadget prog3 FreeGadget prog4 FreeGadget prog5 FreeGadget prog6 FreeGadget prog7 FreeGadget prog8 'End Rem Print "End..."+(MilliSecs()-tt) End '------------------------------------------------------------------- Rem bbdoc: Create a Progress Bar gadget about: The Progress Bar gadget has the following styles [ @Style | @Meaning * PBAR_STANDARD | It draws a normal progress bar. * PBAR_DISCRETE | It draws a discrete progress bar. * PBAR_INDICATOR | it draws below the progress bar some position indicators. * PBAR_ALERT | The level reached by the progress bar changes the colour of it. * PBAR_SHOW | In the progress bar is showed the % value. * PBAR_RATING | It draws a rating indicator (1-5 stars) ] You can combine the styles: PBAR_STANDARD|PBAR_SHOW It will shows a standard progress bar and the % value. PBAR_STANDARD|PBAR_SHOW|PBAR_INDICATOR It will shows a standard progress bar, the % value and the indicators. PBAR_ALERT can be used for both PBAR_STANDARD and PBAR_DISCRETE progress bar. The warning and critical value (respectly YELLOW and RED color) are set with SetSliderRange command. PBAR_RATING The user can change the value (number of stars showed) clicking with the mouse on the gadget. You can set the value (0-5) with SetSliderValue command. End Rem Function CreatePbar:tGADGET(x:Int,y:Int,width:Int,height:Int,group:TGadget,flags:Int=PBAR_STANDARD) Return TPbar.Create(x,y,width,height,group,flags) EndFunction Const PBAR_STANDARD:Int =1 Const PBAR_SHOW:Int =2 Const PBAR_DISCRETE:Int =4 Const PBAR_INDICATOR:Int =8 Const PBAR_ALERT:Int =16 Const PBAR_RATING:Int =32 Const PBAR_ACTIVE:Int =64 Const PBAR_NOBORDER:Int =128 Type TPbar Extends TProxygadget Field _void_pixmap:TPixmap Field _green_pixmap:TPixmap Field _RED_pixmap:TPixmap Field _YELLOW_pixmap:TPixmap Field pixmap:TPixmap Field _star_pixmap:TPixmap Field pixmap_flags:Int=PANELPIXMAP_FIT Field panel:tgadget Field panel_value:tgadget Field panels:tgadget[10] Field labels:tgadget[11] Field tcolor:Int[]=[255,255,255] Field _label_P:tgadget,_label_V:tgadget Field _value:Float Field _value_warning:Int=6,_value_critical:Int=8 Field STYLE:Int Field flags:Int Method Cleanup() RemoveHook(EmitEventHook,EventHook,Self) If panel FreeGadget panel If panel_value FreeGadget panel_value If _label_p FreeGadget _label_p If _label_v FreeGadget _label_v If panels For Local ss:Int=0 Until panels.length If panels[ss] FreeGadget panels[ss] panels[ss]=Null Next End If If labels For Local ss:Int=0 Until labels.length If labels[ss] FreeGadget labels[ss] labels[ss]=Null Next End If _void_pixmap=Null _green_pixmap=Null _red_pixmap=Null _yellow_pixmap=Null _star_pixmap=Null free() Super.cleanup() EndMethod Method SetProp(_val:Int=0) _value=_val If flags&PBAR_RATING SetValue(_val) End Method Method SetRange(_min:Int=0,_max:Int=10) If _min<0 _min=0 If _max>10 _max=10 _value_warning=_min _value_critical=_max End Method Method SetEnabled(sta:Int=True) If sta=False DisableGadget panel DisableGadget panel_value If _label_p DisableGadget _label_p If _label_v DisableGadget _label_v If panels For Local ss:Int=0 Until panels.length DisableGadget panels[ss] Next End If Else EnableGadget panel EnableGadget panel_value If _label_p EnableGadget _label_p If _label_v EnableGadget _label_v If panels For Local ss:Int=0 Until panels.length EnableGadget panels[ss] Next End If End If End Method Method SetValue(_val:Float=0) _value=_val Local new_width:Int=_val*GadgetWidth(panel)-2 Local showval:Float=(Float(new_width)/GadgetWidth(panel))*100+1 Local current_pix:TPixmap=_green_pixmap If STYLE=0 'STANDARD SetGadgetShape panel_value,1,1,new_width,GadgetHeight(panel)-6 If flags&PBAR_ALERT If PIXMAP<>Null If (Int(showval)/10)>=_value_warning Then SetGadgetPixmap panel_value,_yellow_pixmap,PANELPIXMAP_FIT If (Int(showval)/10)>=_value_critical Then SetGadgetPixmap panel_value,_red_pixmap,PANELPIXMAP_FIT Else If (Int(showval)/10)>=_value_warning Then SetGadgetColor panel_value,239,212,107 If (Int(showval)/10)>=_value_critical Then SetGadgetColor panel_value,228,75,67 End If End If If _val<.5 If _label_p SetGadgetText _label_p,Int(showval)+" %" HideGadget _label_v ShowGadget _label_p SetGadgetTextColor _label_p,tcolor[0],tcolor[1],tcolor[2] End If Else If _label_v SetGadgetShape _label_v,2,0,GadgetWidth(panel),GadgetHeight(panel)-6 SetGadgetText _label_v,Int(showval)+" %" HideGadget _label_p ShowGadget _label_v SetGadgetTextColor _label_v,tcolor[0],tcolor[1],tcolor[2] End If End If End If '--------------------------------- STANDARD STYLE If STYLE=1 ' DISCRETE Local width:Int=GadgetHeight(panel) Local ww:Int=(width-4)/10-2 Local X1:Int=1 If flags&PBAR_ALERT If (Int(showval)/10)>=_value_warning Then current_pix=_yellow_pixmap If (Int(showval)/10)>=_value_critical Then current_pix=_red_pixmap End If For Local s:Int=0 Until 10 If _void_pixmap SetPanelPixmap panels[s],_void_pixmap,PANELPIXMAP_FIT Else SetGadgetColor panels[s],192,192,192 End If If s<=Int(showval)/10 If current_pix SetPanelPixmap panels[s],current_pix,PANELPIXMAP_FIT Else SetGadgetColor panels[s],149,208,98 End If End If Rem If flags&PBAR_ALERT ' ALERT If (Int(showval)/10)>=_value_warning And s>=_value_warning If _yellow_pixmap SetPanelPixmap panels[s],_yellow_pixmap,PANELPIXMAP_FIT Else SetGadgetColor panels[s],239,212,108 End If End If If (Int(showval)/10)>=_value_critical And s>=_value_critical If _red_pixmap SetPanelPixmap panels[s],_red_pixmap,PANELPIXMAP_FIT Else SetGadgetColor panels[s],242,110,106 End If End If End If End If End Rem Next End If '----------------------------------- DISCRETE STYLE ------------------------------ If style=2 ' RATING For Local s:Int=1 To 5 If s<=_value If _star_pixmap SetPanelPixmap panels[s-1],_star_pixmap,PANELPIXMAP_TILE'PANELPIXMAP_FIT Else SetPanelPixmap panels[s-1],Null End If Next End If End Method Method SetColor(R:Int=255,G:Int=255,B:Int=255) SetGadgetColor panel,r,g,b End Method Method SetTextColor(R:Int=255,G:Int=255,B:Int=255) If PANEL_VALUE SetGadgetColor panel_value,r,g,b tcolor=[r,g,b] End Method Method SetPixmap(pix:TPixmap,flags:Int) pixmap=pix pixmap_flags=flags ?linux If pixmap SetPanelPixmap panel_value,pixmap ? ?win32 If pixmap SetPanelPixmap panel_value,pixmap,PANELPIXMAP_STRETCH ? End Method Function Create:TPbar(x:Int,y:Int,width:Int,height:Int,group:TGadget,flags:Int=PBAR_STANDARD) Local PB:TPBAR=New TPBAR pb._void_pixmap=LoadPixmap("indicator_void.png") pb._green_pixmap=LoadPixmap("indicator_green.png") pb._RED_pixmap=LoadPixmap("indicator_RED.png") pb._YELLOW_pixmap=LoadPixmap("indicator_YELLOW.png") pb._star_pixmap=LoadPixmap("star.png") If flags&PBAR_INDICATOR Local hh:Int=5,cou:Int,x2:Int=x Local sw:Int=width/10 While x2<(x+width+2) If cou=0 Or cou=5 Or cou=10 hh=10 Else hh=5 pb.labels[cou]=CreateLabel("",x2,y+height+1,2,hh,group,label_Separator) x2:+sw cou:+1 Wend End If If FLAGS&PBAR_STANDARD If flags&PBAR_NOBORDER pb.Panel=CreatePanel(x,y,width,height,group) Else pb.Panel=CreatePanel(x,y,width,height,group,PANEL_BORDER) End If pb.panel_value=CreatePanel(1,1,pb._value,height-2,pb.panel) SetGadgetColor PB.PANEL_VALUE,10,36,106 If flags&PBAR_SHOW PB._label_p=CreateLabel("",0,0,width-5,height,pb.panel,LABEL_RIGHT) If PB.PANEL_VALUE pb._label_v=CreateLabel("",0,0,width,height,pb.panel_value,LABEL_LEFT) End If pb.style=0 ' standard End If If flags&PBAR_DISCRETE 'create a discrete progress bar (10 'pieces' of bar) pb.Panel=CreatePanel(x,y,width,height,group)',PANEL_BORDER) SetGadgetColor pb.panel,212,208,200 Local ww:Int=(width-8)/10-1 Local X1:Int=1 For Local s:Int=0 Until 10 pb.panels[s]=CreatePanel(X1,2,ww,height-8,pb.panel)',PANEL_BORDER) X1:+WW+2 If pb._void_pixmap SetPanelPixmap pb.panels[s],pb._void_pixmap,PANELPIXMAP_FIT Else SetGadgetColor pb.panels[s],192,192,192 End If Next pb.style=1 ' discrete End If If flags&PBAR_RATING pb.style=2 pb.Panel=CreatePanel(x,y,width,height,group)',PANEL_ACTIVE|PANEL_BORDER) Local ww:Int=32 Local X1:Int=1 If pb._star_pixmap ww=PixmapWidth(pb._Star_pixmap) For Local s:Int=0 Until 5 pb.panels[s]=CreatePanel(X1,2,ww,height-8,pb.panel,PANEL_ACTIVE) x1:+ww If pb._star_pixmap SetPanelPixmap pb.panels[s],pb._star_pixmap,PANELPIXMAP_FIT End If Next End If pb.flags=flags pb.SetProxy(pb) AddHook(EmitEventHook,EventHook,PB) Return PB EndFunction Function EventHook:Object(id:Int,data:Object,context:Object) Local event:TEvent Local pbar:TPbar Local i:Int event=TEvent(data) If event pbar=TPbar(context) If pbar If PBAR.STYLE=2 If EVENT.id=EVENT_MOUSEDOWN If pbar.flags&PBAR_ACTIVE For Local s:Int=0 Until 5 If event.source=pbar.PANELS[S] PBAR.setProp(s+1) EmitEvent CreateEvent(EVENT_GADGETACTION,pbar,pbar._value) Return Null End If Next End If End If End If EndIf EndIf Return data EndFunction EndType You need the following images (save them in the same folder of the application or change accordangly the path in the source code) - you can change with you like.

Grisu (Posted 2009) [#2]

Like them much. Actually, I was thinking of adding such a rating bar to PRP in the future. ;) The problem is to keep it usable on linux and mac as well.

Grisu (Posted 2010) [#3]

Sorry to bring up this old thread. :) I'm searching for a way to replace the old PRP volume slider with something more modern. Is there a way to make such a progress bar cross-platform? Any alternatives? Thanks Grisu

degac (Posted 2010) [#4]

An idea should be to use a 'panel' to interact with it, drawing a different image based on the position of the mouseX()

Grisu (Posted 2010) [#5]

Yeah, nice idea. Implemented it. You've got mail... :) Last edited 2010