Simple 3D look clock

Share your advanced PureBasic knowledge/code with the community.
l1marik
User
User
Posts: 49
Joined: Tue Jun 30, 2020 6:22 am

Simple 3D look clock

Post by l1marik »

Simple 3D look clock - only vectors

I played with vectors to make small 3D look clock, please check it on OSX.

Have a nice day!

Lukas

Image

Code: Select all

; Simple 3D clock by Lukas. Enjoy it :-)

Procedure Draw_3D_Clock(gid)
  
  If StartVectorDrawing(CanvasVectorOutput(gid))
    ScaleCoordinates(DesktopResolutionX(), DesktopResolutionY())
    
    AddPathBox(0, 0, GadgetWidth(gid), GadgetWidth(gid))
    VectorSourceColor(RGBA(255, 255, 255, 255))
    VectorFont(FontID(0), GadgetHeight(gid)/40)
    FillPath()
    
    BeginVectorLayer(255)
    
    ; Dial
    VectorSourceCircularGradient(GadgetWidth(gid)/2, GadgetHeight(gid)/2, GadgetWidth(gid)/2, -GadgetWidth(gid)/2, -GadgetHeight(gid)/2.5)
    VectorSourceGradientColor(RGBA(255, 255, 255, 255), 0.2)
    VectorSourceGradientColor(RGBA(223, 159, 159, 150), 1.0)
    AddPathCircle(GadgetWidth(gid)/2,GadgetHeight(gid)/2,GadgetWidth(gid)/3)
    FillPath()
    ClosePath()
    Text$= "PureBasic Clock"
    VectorSourceColor(RGBA(153, 51, 51, 150))
    MovePathCursor(GadgetHeight(gid)/2 - VectorTextWidth(Text$)/2, GadgetHeight(gid)/2.5) 
    DrawVectorText(Text$)

    ; Shadow
    VectorSourceCircularGradient(GadgetWidth(gid)/2 + GadgetHeight(gid)/100 ,GadgetHeight(gid)/2 + GadgetHeight(gid)/100,GadgetWidth(gid)/2.5)
    VectorSourceGradientColor(RGBA(200, 200, 200, 0), 0.7)
    VectorSourceGradientColor(RGBA(100, 100, 100, 100), 0.8)
    VectorSourceGradientColor(RGBA(200, 200, 200, 0), 0.9)
    AddPathCircle(GadgetWidth(gid)/2 + GadgetHeight(gid)/100,GadgetHeight(gid)/2 + GadgetHeight(gid)/100,GadgetWidth(gid)/3.1)
    StrokePath(GadgetWidth(gid)/15,#PB_Path_RoundEnd )
    
    ; Frame
    VectorSourceCircularGradient(GadgetWidth(gid)/2,GadgetHeight(gid)/2,GadgetWidth(gid)/2.5)
    VectorSourceGradientColor(RGBA(0, 0, 0, 250), 0.65)
    VectorSourceGradientColor(RGBA(153, 51, 51, 255), 0.8)
    VectorSourceGradientColor(RGBA(0, 0, 0, 250), 0.95)
    AddPathCircle(GadgetWidth(gid)/2,GadgetHeight(gid)/2,GadgetWidth(gid)/3.1)
    StrokePath(GadgetWidth(gid)/15,#PB_Path_RoundEnd )
    
    EndVectorLayer()
    
    BeginVectorLayer(180)
    
    VectorSourceColor(RGBA(0,0,0,255))
    loop_step.f = 0 
    While loop_step < 360
      ResetCoordinates()
      MovePathCursor(GadgetWidth(gid)/2, GadgetWidth(gid)/2) 
      RotateCoordinates(GadgetWidth(gid)/2, GadgetHeight(gid)/2, loop_step)
      If Mod(loop_step, 15) = 0
        MovePathCursor(GadgetWidth(gid)/2, GadgetWidth(gid)/3.8) 
        AddPathLine(GadgetWidth(gid)/2, GadgetWidth(gid)/4.5)
        StrokePath(GadgetWidth(gid)/100,#PB_Path_RoundEnd)
        ;add numbers ???
      Else
        MovePathCursor(GadgetWidth(gid)/2, GadgetWidth(gid)/4) 
        AddPathLine(GadgetWidth(gid)/2, GadgetWidth(gid)/4.5)
        StrokePath(GadgetWidth(gid)/400,#PB_Path_RoundEnd)
      EndIf
      loop_step = loop_step + 6
    Wend
    
    EndVectorLayer()
    
    BeginVectorLayer(250)
    
    hours_angle.f = 0
    minutes_angle.f = 0
    hours.f = Hour(Date())
    minutes.f = Minute(Date())
    seconds.f = Second(Date())
    
    If (hours >= 12) 
      hours = hours - 12 
    EndIf
    
    seconds_angle = seconds * 6  
    minutes_angle = minutes * 6  + (seconds_angle/60)
    hours_angle = hours * 30 + (minutes/60) * 30

    ; Minutes
    VectorSourceColor(RGBA(0,0,0,255))
    ResetCoordinates()
    RotateCoordinates(GadgetWidth(gid)/2, GadgetHeight(gid)/2,minutes_angle)
    MovePathCursor(GadgetWidth(gid)/2 + GadgetWidth(gid)/80, GadgetHeight(gid)/2)
    AddPathLine(GadgetWidth(gid)/2 + GadgetWidth(gid)/200, GadgetHeight(gid)/4.1) 
    AddPathLine(GadgetWidth(gid)/2 - GadgetWidth(gid)/200, GadgetHeight(gid)/4.1) 
    AddPathLine(GadgetWidth(gid)/2 - GadgetWidth(gid)/80, GadgetHeight(gid)/2) 
    FillPath(#PB_Path_Winding)
    AddPathCircle(GadgetWidth(gid)/2, GadgetHeight(gid)/2, GadgetWidth(gid)/80)
    FillPath(#PB_Path_Winding)
    
    ; Hours
    VectorSourceColor(RGBA(0,0,0,255))
    ResetCoordinates()
    RotateCoordinates(GadgetWidth(gid)/2, GadgetHeight(gid)/2,hours_angle)
    MovePathCursor(GadgetWidth(gid)/2 + GadgetWidth(gid)/80, GadgetHeight(gid)/2)
    AddPathLine(GadgetWidth(gid)/2 + GadgetWidth(gid)/200, GadgetHeight(gid)/3.5) 
    AddPathLine(GadgetWidth(gid)/2 - GadgetWidth(gid)/200, GadgetHeight(gid)/3.5) 
    AddPathLine(GadgetWidth(gid)/2 - GadgetWidth(gid)/80, GadgetHeight(gid)/2) 
    FillPath(#PB_Path_Winding)
    AddPathCircle(GadgetWidth(gid)/2, GadgetHeight(gid)/2, GadgetWidth(gid)/80)
    FillPath(#PB_Path_Winding)
    
    ; Seconds
    VectorSourceColor(RGBA(150,0,0,255))
    ResetCoordinates()
    RotateCoordinates(GadgetWidth(gid)/2, GadgetHeight(gid)/2,seconds_angle)
    MovePathCursor(GadgetWidth(gid)/2 + GadgetWidth(gid)/100, GadgetHeight(gid)/2)
    AddPathLine(GadgetWidth(gid)/2, GadgetHeight(gid)/4.3) 
    AddPathLine(GadgetWidth(gid)/2 - GadgetWidth(gid)/100, GadgetHeight(gid)/2) 
    FillPath()
    AddPathCircle(GadgetWidth(gid)/2, GadgetHeight(gid)/2, GadgetWidth(gid)/100)
    FillPath()
    
    EndVectorLayer()
    
    StopVectorDrawing()
  EndIf
  
EndProcedure



If OpenWindow(0, 0, 0, 300, 300, "Simple 3D Clock", #PB_Window_SystemMenu | #PB_Window_ScreenCentered| #PB_Window_MaximizeGadget | #PB_Window_SizeGadget)
  
  AddWindowTimer(0, 123,1000)
  CanvasGadget(10, 0, 0, 300, 300)
  LoadFont(0, "Verdana", 10,  #PB_Font_HighQuality)
  Draw_3D_Clock(10)
  
  Repeat 
    
    If Event = #PB_Event_Timer And EventTimer() = 123
      Draw_3D_Clock(10)
    EndIf
    
    If event = #PB_Event_SizeWindow
      ResizeGadget(10, 0, 0, WindowHeight(0), WindowHeight(0))
      Draw_3D_Clock(10)
    EndIf
    
    Event = WaitWindowEvent()
    
  Until Event = #PB_Event_CloseWindow
EndIf
Last edited by l1marik on Fri Jul 24, 2020 1:41 pm, edited 1 time in total.
User avatar
blueb
Addict
Addict
Posts: 1041
Joined: Sat Apr 26, 2003 2:15 pm
Location: Cuernavaca, Mexico

Re: Simple 3D look clock

Post by blueb »

Thanks Lucas :)

PS - It's 7:00 AM here (UTC - 6 hours) and the clock's hour hand is barely past 6:00 A.M., but I haven't looked into the issue.

Sorry it was about 2 minutes before 7:00 AM... as soon as it got past 7... everything's fine. :oops:

I'm guessing the 'hour' hand doesn't gradually reach 7 AM.
- It was too lonely at the top.

System : PB 6.10 Beta 9 (x64) and Win Pro 11 (x64)
Hardware: AMD Ryzen 9 5900X w/64 gigs Ram, AMD RX 6950 XT Graphics w/16gigs Mem
l1marik
User
User
Posts: 49
Joined: Tue Jun 30, 2020 6:22 am

Re: Simple 3D look clock

Post by l1marik »

blueb wrote:Thanks Lucas :)

PS - It's 7:00 AM here (UTC - 6 hours) and the clock's hour hand is barely past 6:00 A.M., but I haven't looked into the issue.

Sorry it was about 2 minutes before 7:00 AM... as soon as it got past 7... everything's fine. :oops:

I'm guessing the 'hour' hand doesn't gradually reach 7 AM.
Updated, my mistake :-)

Lukas
Mindphazer
Enthusiast
Enthusiast
Posts: 340
Joined: Mon Sep 10, 2012 10:41 am
Location: Savoie

Re: Simple 3D look clock

Post by Mindphazer »

Hi,
works fine on Mac OS

I just modified a little your code to have realtime resize :
Add this before your OpenWindow()

Code: Select all

Procedure resize()
  ResizeGadget(10, 0, 0, WindowHeight(0), WindowHeight(0))
  Draw_3D_Clock(10)
EndProcedure
BindEvent(#PB_Event_SizeWindow, @resize(),0)
And comment these lines inside your loop :

Code: Select all

   ; If event = #PB_Event_SizeWindow
   ;   ResizeGadget(10, 0, 0, WindowHeight(0), WindowHeight(0))
   ;   Draw_3D_Clock(10)
   ; EndIf
MacBook Pro 14" M1 Pro - 16 Gb - MacOS 14 - Iphone 15 Pro Max - iPad at home
...and unfortunately... Windows at work...
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Simple 3D look clock

Post by davido »

@l1marik,
Nice clock. With a pleasant 'tick'! :D

Thank you for taking the trouble to make work on my Mac as we'll as PC's.
DE AA EB
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5342
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: Simple 3D look clock

Post by Kwai chang caine »

Very nice
Thanks for sharing 8)
ImageThe happiness is a road...
Not a destination
l1marik
User
User
Posts: 49
Joined: Tue Jun 30, 2020 6:22 am

Re: Simple 3D look clock

Post by l1marik »

Weather station gauges

Image

I extended simple 3D clock to circular gauges for weather station based on ESP8266, they are fully scalable and customisable coloured:
- time
- temperature
- humidity
- pressure


They have simple code and show JSON data from weather station based on ESP8266 + BME280, for more information contact me by PM.

1, please check them on OSX, who has :D
2, does exist way how to make transparent window with image on canvas, it means visible is only image on canvas

Source: http://www.ctvrtky.info/wp-content/uplo ... tation.tar

Lukas
Last edited by l1marik on Mon Jul 27, 2020 7:45 am, edited 2 times in total.
User avatar
blueb
Addict
Addict
Posts: 1041
Joined: Sat Apr 26, 2003 2:15 pm
Location: Cuernavaca, Mexico

Re: Simple 3D look clock

Post by blueb »

Thanks Lukas. Your are quickly becoming a Vector Guru :mrgreen:

A small issue with the light and the gauges.
The light reflection appears as dark spot in the top left corner.
I'm using Win 10 Pro and PB 5.72 x64

Here's a snapshot: https://www.dropbox.com/s/dctmip5plga2i ... r.jpg?dl=0

HTH
Blueb
- It was too lonely at the top.

System : PB 6.10 Beta 9 (x64) and Win Pro 11 (x64)
Hardware: AMD Ryzen 9 5900X w/64 gigs Ram, AMD RX 6950 XT Graphics w/16gigs Mem
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Simple 3D look clock

Post by davido »

@l1marik,
Look fine on my MacBook. Thank you for sharing. :D

I also noted the small black 'triangles', reported by: blueb
DE AA EB
l1marik
User
User
Posts: 49
Joined: Tue Jun 30, 2020 6:22 am

Re: Simple 3D look clock

Post by l1marik »

davido wrote:@l1marik,
Look fine on my MacBook. Thank you for sharing. :D

I also noted the small black 'triangles', reported by: blueb
Updated, was missing one line:

Code: Select all

VectorSourceGradientColor(RGBA(255, 255, 255, 255), 0)
It means that Linux has default color for gradient white, Windows and OSX black. It is good to know.

Lukas
Post Reply