Rotating vector progress bar?

Just starting out? Need help? Post your questions and find answers here.
oO0XX0Oo
User
User
Posts: 78
Joined: Thu Aug 10, 2017 7:35 am

Rotating vector progress bar?

Post by oO0XX0Oo »

Has anyone ever done something like this that looks a bit like this (the four elements at
the bottom aren't necessary):

https://www.shutterstock.com/de/image-v ... -314990315

Regarding the "rotation" of it, something like this:
https://stackoverflow.com/questions/263 ... h-gif-file

An animated, outer ring at the current cursor position with multiple segments, color variation for the segments
and while the next segment gets opaque, the former one is faded out?

It's not about the inner circle where the progress / time / whatever is displayed but a general spinning progress
"wheel" that's displayed for as long as necessary (because it is unknown for how long it must be displayed
when it is invoked)...
walbus
Addict
Addict
Posts: 929
Joined: Sat Mar 02, 2013 9:17 am

Re: Rotating vector progress bar?

Post by walbus »

User avatar
RSBasic
Moderator
Moderator
Posts: 1218
Joined: Thu Dec 31, 2009 11:05 pm
Location: Gernsbach (Germany)
Contact:

Re: Rotating vector progress bar?

Post by RSBasic »

With ProgressBarGadget:

Code: Select all

If OpenWindow(0,0,0,500,250,"Window",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  ProgressBarGadget(1,10,10,480,20,0,100,8)
  
  SendMessage_(GadgetID(1),#WM_USER+10,1,50)
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
Or with SysAnimate32: http://www.purebasic.fr/german/viewtopi ... =8&t=24780
There is certainly a rotation animation somewhere in a DLL file of Windows.
Image
Image
walbus
Addict
Addict
Posts: 929
Joined: Sat Mar 02, 2013 9:17 am

Re: Rotating vector progress bar?

Post by walbus »

Many different bars you found as GIF
So you can simple output the frames with PB
On screen, as sample, you can output the frames with a defined invisible color as sprite
Both is primary very simple
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: Rotating vector progress bar?

Post by RASHAD »

As a start

Code: Select all

  If CreateImage(0, 200, 200) And StartDrawing(ImageOutput(0))
    Box(0, 0, 400, 400, $F0F0F0)     
    DrawingMode(#PB_2DDrawing_Gradient)     
    BackColor($0000FF)
    GradientColor(0.9, $00FFFF)
    FrontColor($FF0000)     
    LinearGradient(0, 0, 200, 200)   
    Circle(100, 100, 88)
    DrawingMode(#PB_2DDrawing_Default)
    Circle(100, 100, 50 ,$F0F0F0)
    StopDrawing()
  EndIf
 
  LoadFont(0, "Downtown", 20, #PB_Font_Bold)
  
Procedure runCB(par)
  Repeat
    For angle = 360 To 0 Step -10
        StartVectorDrawing(CanvasVectorOutput(0))
          DrawVectorImage(ImageID(0), 255)
          MovePathCursor(100, 100)     
          AddPathCircle(100, 100, 90, 0, angle, #PB_Path_Connected)
          ClosePath() 
          VectorSourceColor($FFF0F0F0)
          FillPath()
          VectorSourceColor($FF000000)
          MovePathCursor(58, 90)
          VectorFont(FontID(0), 16)
          DrawVectorText("Load % " + Str(100-(Angle*100/360)))   
        StopVectorDrawing()
        Delay(200) 
    Next
  ForEver
EndProcedure

  If OpenWindow(0, 0, 0, 400, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 100, 100, 200, 200)
    
    thread = CreateThread(@runCB(),35)
    Repeat
      Select WaitWindowEvent()
        Case #PB_Event_CloseWindow
          Quit = 1          

      EndSelect          
    Until Quit = 1
  EndIf
Egypt my love
User avatar
Fangbeast
PureBasic Protozoa
PureBasic Protozoa
Posts: 4747
Joined: Fri Apr 25, 2003 3:08 pm
Location: Not Sydney!!! (Bad water, no goats)

Re: Rotating vector progress bar?

Post by Fangbeast »

If PB were painting skills, RASHAD would be a master painter. I bow to your constant help and examples.

Now I hope kcc comes in with a fitting master name for you and an animation to illustrate this:)

Snagged!
Amateur Radio, D-STAR/VK3HAF
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: Rotating vector progress bar?

Post by RASHAD »

Hi Fang :P
Thanks for the compliment
Next one is extra just for you

Code: Select all

 If CreateImage(0, 200, 200) And StartVectorDrawing(ImageVectorOutput(0))
      VectorSourceColor($FFF0F0F0)
      FillVectorOutput()
      VectorSourceLinearGradient(-100, 0, 400, 0)
      VectorSourceGradientColor($FF2DD3FE, 0.5)
      MovePathCursor(100, 100)     
      AddPathCircle(100, 100, 88, 0, 360, #PB_Path_Connected)
      FillPath()
      For angle = 0 To 360 Step 15
        MovePathCursor(100,100)
        AddPathCircle(100, 100, 90, angle, angle+4, #PB_Path_Connected)
        ClosePath() 
        VectorSourceColor($FFF0F0F0)
        FillPath()
      Next
      MovePathCursor(100, 100)     
      AddPathCircle(100, 100, 50, 0, 360, #PB_Path_Connected)
      VectorSourceColor($FFF0F0F0)
      FillPath()
    StopVectorDrawing()
  EndIf
 
  LoadFont(0, "Downtown", 20, #PB_Font_Bold)
  
Procedure runCB(par)
  Repeat
    For angle = 360 To 0 Step -15
      StartVectorDrawing(CanvasVectorOutput(0))
        DrawVectorImage(ImageID(0), 255)
        MovePathCursor(100, 100)     
        AddPathCircle(100, 100, 90, 0, angle, #PB_Path_Connected)
        ClosePath() 
        VectorSourceColor($FFF0F0F0)
        FillPath()
        VectorSourceColor($FF000000)
        MovePathCursor(62, 90)
        VectorFont(FontID(0), 16)
        DrawVectorText("Load % " + Str(100-(Angle*100/360)))   
      StopVectorDrawing()
      Delay(200) 
    Next
  ForEver
EndProcedure

  If OpenWindow(0, 0, 0, 400, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 100, 100, 200, 200)
    
    thread = CreateThread(@runCB(),35)
    Repeat
      Select WaitWindowEvent()
        Case #PB_Event_CloseWindow
          Quit = 1          

      EndSelect          
    Until Quit = 1
  EndIf
Egypt my love
User avatar
Fangbeast
PureBasic Protozoa
PureBasic Protozoa
Posts: 4747
Joined: Fri Apr 25, 2003 3:08 pm
Location: Not Sydney!!! (Bad water, no goats)

Re: Rotating vector progress bar?

Post by Fangbeast »

Very, very good master RASHAD.

Now, to complete your jedi training, you have to use pictures of KCC for the progress graphics (Nearly fell off the chair thinking that one up).

Or, please forgive me for saying this but, pictures of the hoff in speedos as the progress graphic. Just to make KCC feel right at home:):)

/me falls right off the chair and through the window, laughing like a lunatic until he hits the grey brick walls and falls blissfully unconscious.
Amateur Radio, D-STAR/VK3HAF
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: Rotating vector progress bar?

Post by RASHAD »

I do not think that there is any one can compete with KCC in such stuff
:mrgreen:
Egypt my love
User avatar
Fangbeast
PureBasic Protozoa
PureBasic Protozoa
Posts: 4747
Joined: Fri Apr 25, 2003 3:08 pm
Location: Not Sydney!!! (Bad water, no goats)

Re: Rotating vector progress bar?

Post by Fangbeast »

RASHAD wrote:I do not think that there is any one can compete with KCC in such stuff
:mrgreen:
True that. But what a fun idea:):)
Amateur Radio, D-STAR/VK3HAF
User avatar
Andre
PureBasic Team
PureBasic Team
Posts: 2056
Joined: Fri Apr 25, 2003 6:14 pm
Location: Germany (Saxony, Deutscheinsiedel)
Contact:

Re: Rotating vector progress bar?

Post by Andre »

Very nice, RASHAD, thank you! :D
Bye,
...André
(PureBasicTeam::Docs & Support - PureArea.net | Order:: PureBasic | PureVisionXP)
Dude
Addict
Addict
Posts: 1907
Joined: Mon Feb 16, 2015 2:49 pm

Re: Rotating vector progress bar?

Post by Dude »

RSBasic wrote:SendMessage_(GadgetID(1),#WM_USER+10,1,50)
This does the same thing:

Code: Select all

SetGadgetState(1,-1)
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: Rotating vector progress bar?

Post by RASHAD »

Egypt my love
User avatar
Zebuddi123
Enthusiast
Enthusiast
Posts: 794
Joined: Wed Feb 01, 2012 3:30 pm
Location: Nottinghamshire UK
Contact:

Re: Rotating vector progress bar?

Post by Zebuddi123 »

Hi to all. Thanks RASHAD excellent as always :) my little variation for searching

Zebuddi. :)

Code: Select all

If CreateImage(0, 200, 200) And StartVectorDrawing(ImageVectorOutput(0))
	VectorSourceColor($FFF0F0F0)
	FillVectorOutput()
	VectorSourceLinearGradient(-100, 0, 400, 0)
	VectorSourceGradientColor($FF2DD3FE, 0.5)
	MovePathCursor(100, 100)     
	AddPathCircle(100, 100, 88, 0, 360, #PB_Path_Connected)
	FillPath()
	For angle = 0 To 360 Step 15
		MovePathCursor(100,100)
		AddPathCircle(100, 100, 90, angle, angle+4, #PB_Path_Connected)
		ClosePath() 
		VectorSourceColor($FFF0F0F0)
		FillPath()
	Next
	MovePathCursor(100, 100)     
	AddPathCircle(100, 100, 50, 0, 360, #PB_Path_Connected)
	VectorSourceColor($FFF0F0F0)
	FillPath()
	StopVectorDrawing()
EndIf

LoadFont(0, "Downtown", 20, #PB_Font_Bold)

Procedure runCB(par)
	Protected sDot.s, iCounter.i, iNbr.i
	Repeat
		For angle = 360 To 0 Step -15 : iCounter + 2
			StartVectorDrawing(CanvasVectorOutput(0))
			DrawVectorImage(ImageID(0), 255)
			MovePathCursor(100, 100)     
			AddPathCircle(100, 100, 90, 0, angle, #PB_Path_Connected)
			ClosePath() 
			VectorSourceColor($FFF0F0F0)
			FillPath()
			VectorSourceColor($FF000000)
			MovePathCursor(58, 90)
			VectorFont(FontID(0), 14)
			;DrawVectorText("Load % " + Str(100-(Angle*100/360)))
			
			;Zebuddi----------------------------------
			If iCounter <= 10 : sDot + "."
			ElseIf iCounter=> 12 And iCounter <= 20
				iNbr + 1 : 	sDot = Mid(sDot, 1, Len(sDot) - iNbr)
				If iCounter = 20 : 	iCounter = 0 : iNbr = 0 : EndIf	
			EndIf
			DrawVectorText("Searching" + sDot )
			;----------------------------------------
			
			StopVectorDrawing()
			Delay(200) 
		Next
	ForEver
EndProcedure

If OpenWindow(0, 0, 0, 400, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	CanvasGadget(0, 100, 100, 200, 200)
	
	thread = CreateThread(@runCB(),35)
	Repeat
		Select WaitWindowEvent()
			Case #PB_Event_CloseWindow
				Quit = 1          
				
		EndSelect          
	Until Quit = 1
EndIf
malleo, caput, bang. Ego, comprehendunt in tempore
Dude
Addict
Addict
Posts: 1907
Joined: Mon Feb 16, 2015 2:49 pm

Re: Rotating vector progress bar?

Post by Dude »

Why anti-clockwise, Zebuddi? Time goes clockwise when you're waiting. :)
Post Reply