Page 1 of 1

Analogue clock

Posted: Wed Oct 23, 2019 7:52 am
by Dirk Geppert
Analogue clock, done with Canvas and VectorDrawing.

Showcase: http://h2717740.stratoserver.net/app/clock/index.html

Code: Select all

; Orignal author #NULL, Changes by Dirk
; German Forum https://www.purebasic.fr/german/viewtopic.php?f=8&t=31685

EnableExplicit
Define ww, wh, style, win, canvas, event, quit

If ExamineDesktops()
  ww = DesktopWidth(0)
  wh = DesktopHeight(0)
EndIf

win = OpenWindow(#PB_Any, 0, 0, ww, wh, "", #PB_Window_BorderLess)
canvas = CanvasGadget(#PB_Any, 0, 0, ww, wh)


Procedure redraw()
  Shared canvas
  Protected now, h, m, s, i
  Protected width, height, size, radius.f, radius2.f, angle.f
 
  now = Date()
  h = Hour(now)
  m = Minute(now)
  s = Second(now)
 
  If StartVectorDrawing(CanvasVectorOutput(canvas))
    width = VectorOutputWidth()
    height = VectorOutputHeight()
    size = width
    If height < size
      size = height
    EndIf
    radius = 0.9 * (size / 2.0)
   
    VectorSourceColor($ff000000)
    FillVectorOutput()
    
    VectorSourceColor($fff0f0f0)
   
    AddPathCircle(width/2, height/2, radius, 0, 360)
    StrokePath(3)
    
    For i = 0 To 59
      angle = -Radian(90) + Radian(360 * i / 60)
      radius2 = radius * 0.95
      MovePathCursor(width/2 + radius2 * Cos(angle), height/2 + radius2 * Sin(angle))
      radius2 = radius * 0.93
      AddPathLine   (width/2 + radius2 * Cos(angle), height/2 + radius2 * Sin(angle), #PB_Path_Default)
      DotPath(5, 20, #PB_Path_RoundEnd) ; gepunkted
      ; StrokePath(2, #PB_Path_RoundEnd)
    Next
    
    For i = 1 To 12
      angle = -Radian(90) + Radian(360 * i / 12)
      radius2 = radius * 0.95
      MovePathCursor(width/2 + radius2 * Cos(angle), height/2 + radius2 * Sin(angle))
      radius2 = radius * 0.90
      AddPathLine   (width/2 + radius2 * Cos(angle), height/2 + radius2 * Sin(angle), #PB_Path_Default)
      StrokePath(5, #PB_Path_RoundEnd)
    Next
   
    angle = -Radian(90) + Radian(360 * h / 12)
    radius2 = radius * 0.45
    MovePathCursor(width/2, height/2)
    AddPathLine(radius2 * Cos(angle), radius2 * Sin(angle), #PB_Path_Relative)
    StrokePath(6, #PB_Path_RoundEnd)
   
    angle = -Radian(90) + Radian(360 * m / 60)
    radius2 = radius * 0.8
    MovePathCursor(width/2, height/2)
    AddPathLine(radius2 * Cos(angle), radius2 * Sin(angle), #PB_Path_Relative)
    StrokePath(4, #PB_Path_RoundEnd)
   
    angle = -Radian(90) + Radian(360 * s / 60)
    radius2 = radius * 0.9
    MovePathCursor(width/2, height/2)
    AddPathLine(radius2 * Cos(angle), radius2 * Sin(angle), #PB_Path_Relative)
    StrokePath(2, #PB_Path_RoundEnd)
   
    StopVectorDrawing()
  EndIf
EndProcedure

Procedure resize()
  Shared win, canvas, ww, wh
  
  If ExamineDesktops()
    ww = DesktopWidth(0)
    wh = DesktopHeight(0)
  EndIf
  
  ResizeWindow(win, 0, 0, ww, wh)
  
  ResizeGadget(canvas, 0, 0, WindowWidth(win), WindowHeight(win))
  redraw()
EndProcedure

BindEvent(#PB_Event_Timer, @ redraw(), win)
BindEvent(#PB_Event_SizeWindow, @ resize(), win)
BindEvent(#PB_Event_SizeDesktop, @ resize())

AddWindowTimer(win, 1, 500)
resize()


Re: Analogue clock

Posted: Wed Oct 23, 2019 3:47 pm
by skywalk
Nice!
Check the perimeter dots for errors and alignment with second hand.
Right side has 2 dots bunched together.

Re: Analogue clock

Posted: Wed Oct 23, 2019 7:22 pm
by Dirk Geppert
Thx skywalk, I've improved the perimeter dots in the first post now.

Re: Analogue clock

Posted: Wed Oct 23, 2019 9:35 pm
by skywalk
Looks very professional with the vector drawing lib. 8-)