Click here to Skip to main content
15,867,488 members
Articles / Multimedia / GDI+

Analog Clock Control

Rate me:
Please Sign up or sign in to vote.
4.58/5 (66 votes)
23 Jan 2010CPOL4 min read 317.8K   30.7K   138   87
The analog clock control is a control that has almost all the functionality that a clock control can have, and it is fully modifiable.

Introduction

Here, an analog clock has been created with a VB.NET control library. It is a clock control which has almost all the functionality that this type of control can have, and it is fully customizable. Since this is a control library, you can use it in C++, C#, J#, and VB.NET projects in the .NET environment.

I created this control to help someone in VB Forums. At the beginning, it was a very simple clock, but then it became somewhat advanced after I added many properties, events, and a functionality that makes the clock very flexible.

Analog_Clock/ClocksImg.png

Adding the Component

To use the control, you just need to add it into the VS.NET Toolbox. Right click in the Toolbox area, and select the "Choose Items" menu item. It will then open the "Choose Toolbox Item" window. You go to the directory that contains the "AnalogClockLib.dll" file and select it, then click the OK button. This will add the control onto the Toolbox.

Finally, you drag and drop the control onto your forms. Also, in order to see the descriptions of the properties or methods in the Code Designer, you should copy the "AnalogClockLib.xml" file into your project's folder.

Background

The clock control is a Windows UserControl. Almost all the elements of the clock have been constructed (the core of the element) with the GraphicsPath data type. They contain a member variable Base-Path which is a GraphicsPath of the element. These Base-Paths are used differently for each element. For example, the marker's Base-Path represents a GraphicsPath constructed at 12 hour position and than rotated using a Matrix object. Since it is rotated only once, there is no need fore any other helper objects. The clock's hands have two member variables of type GraphicsPath: Base-Path and Shift-Path. The Base-Path of the hands are always positioned at 12 o' clock, and only reshaped if the element's shape (width, length, or style) is modified. On the other hand, the Shift-Path is the actual GrapicsPath of the hand at any given time. Shift-Path is the copy of the rotated Base-Path.

Using the Code

Although you can do almost anything with this control, I will show you only how to paint the hour-hand of the clock with a PathGradientBrush. Note, in this fashion, you can paint the elements with any brush.

It is very nice to see the clock hand's gradient, so here is how you can do that. Basically, you set the Brush property of the hands to a newly created gradient brush object in the hands' paint event.

VB.NET
Private Sub Clock1_HourHandPainting(ByVal sender As Object, _
        ByVal e As AnalogClock.PaintEventArgs) Handles Clock1.HourHandPainting
    'Make sure the hour hand's graphics path contains more than 2 points.
    If Me.Clock1.HourHand.Path.PointCount > 2 Then
        'Make the hour hand gradient
        Dim br As New Drawing2D.PathGradientBrush(Me.Clock1.HourHand.Path)
        br.CenterColor = Color.White
        br.SurroundColors = New Color() {Me.Clock1.HourHand.Color}
        e.Brush = br
        br.Dispose()
    End If
End Sub

In some situations, you may need to set the clock time to a start time. For this, we need to do a little bit of calculation and set the UtcOffset property accordingly. Here is how we can do that:

VB.NET
Private Sub Form1_Load(ByVal sender As System.Object, _
	ByVal e As System.EventArgs) Handles MyBase.Load
    Dim cdt As DateTime = CDate("#17:20:35#")  'Some custom start time for the clock.
    Dim utcDt As DateTime = DateTime.UtcNow  'The current UTC dateTime. 
	'This is needed because the clock internal works with UTC dateTime.
    Me.Clock1.UtcOffset = New TimeSpan(0, cdt.Hour - utcDt.Hour, _
                             cdt.Minute - utcDt.Minute, cdt.Second - utcDt.Second)
End Sub

Sometimes people ask me why the clock is one hour off after daylight savings or how we can be sure that clock shows the correct time always. Well, if this is the case with you, then you need to make sure that the clock's UtcOffset is always accurate. This is how you can do it:

VB.NET
Private Sub Form1_Load(ByVal sender As System.Object, _
	ByVal e As System.EventArgs) Handles MyBase.Load
    'Set UTC offset to the system utc offset when the application loads
    Me.Clock1.UtcOffset = TimeZone.CurrentTimeZone.GetUtcOffset(DateTime.Now)
End Sub

Private Sub Clock1_TimeChanged(ByVal sender As System.Object, _
	ByVal e As System.EventArgs) Handles Clock1.TimeChanged
    'Set UTC offset to the system utc offset every time clock time changes. 
    'If the property has the same value it will do nothing.
    Me.Clock1.UtcOffset = TimeZone.CurrentTimeZone.GetUtcOffset(DateTime.Now)
End Sub

For more examples, check the demo project.

Analog Clock Control Information

History

  • 1.0.0.0 -- Original version posted
  • 1.0.2813.38699 -- Some minor changes to the number and marker styles. Also. the UTC offset values range is changed that accepts values from -23:00:00 to 23:00:00.
  • 1.0.2847.27310 -- This update adds a property that can be used to get/set the clock's frame line color. Also, there are some corrections to the clock. The update is recommended.
  • 1.0.2917.23783 -- A small bug fix
  • 1.0.3002.36694 -- Added minute marker width property
  • 1.0.3223.6598 -- This update includes major changes to the implementation of the clock. If you liked the previous versions of the analog clock, then you will love this one. In this version, you can modify every element of the clock at design and run time. There is a lot of good stuff I would like to mention, but it is better you try it yourself. I will remind you to check all the properties of the clock, in particular, the Element category in the Properties window which contains the clock's hands, markers, etc. I hope you will like it.
  • 1.5.0.3 -- Some bug fixes

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) ZipEdTech
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionChange the color of the numbers and the hour and minute scales Pin
Robinson Romero23-Apr-23 3:18
Robinson Romero23-Apr-23 3:18 
QuestionAnalog Clock Control Pin
Antony Interlandi2-Jun-22 17:29
Antony Interlandi2-Jun-22 17:29 
AnswerRe: Analog Clock Control Pin
Member 1492100521-Nov-22 8:02
Member 1492100521-Nov-22 8:02 
QuestionUser Interaction? Pin
pr1mem0ver26-Nov-21 10:42
pr1mem0ver26-Nov-21 10:42 
QuestionSuper project Pin
Member 1506613222-Jul-21 22:00
Member 1506613222-Jul-21 22:00 
QuestionTime zones Pin
Member 1395904923-Aug-18 3:09
Member 1395904923-Aug-18 3:09 
Questionvery cool Pin
alhootti20122-Aug-17 21:57
alhootti20122-Aug-17 21:57 
AnswerRe: very cool Pin
JakeSays3-Oct-17 12:31
JakeSays3-Oct-17 12:31 
QuestionAwesome control thanks! Issue when saving in vb.net VS2010 Framework 4.0 ?¿?¿ Pin
Member 109690861-Jun-15 1:12
Member 109690861-Jun-15 1:12 
AnswerRe: Awesome control thanks! Issue when saving in vb.net VS2010 Framework 4.0 ?¿?¿ Pin
Member 109690861-Jun-15 1:46
Member 109690861-Jun-15 1:46 
QuestionCannot run sample code Pin
hobbitdome15-Jan-14 19:17
hobbitdome15-Jan-14 19:17 
QuestionText at the top and digital clock at the bottom Pin
Anthony Geselle2-Apr-13 4:25
Anthony Geselle2-Apr-13 4:25 
QuestionAbout Analog Clock Control Pin
Rajiv nayan2-Dec-12 23:07
Rajiv nayan2-Dec-12 23:07 
QuestionHow to get it work in .net framework 4.0 Pin
zafar.shakeel5-Nov-12 20:53
zafar.shakeel5-Nov-12 20:53 
QuestionIs there a way I could have one of the hand follow a different input than time based Pin
David Caracciolo24-Oct-12 9:26
David Caracciolo24-Oct-12 9:26 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey23-Feb-12 21:53
professionalManoj Kumar Choubey23-Feb-12 21:53 
GeneralMy vote of 5 Pin
Logeco19-Jun-11 19:05
Logeco19-Jun-11 19:05 
GeneralSuggestions Pin
WomblingFree6-Jun-11 13:50
WomblingFree6-Jun-11 13:50 
Generala 4.0 Framework version? Pin
hedgefundit2-Jun-11 19:04
hedgefundit2-Jun-11 19:04 
QuestionControl crippling forms designer? Pin
Claude St20-Feb-11 13:22
Claude St20-Feb-11 13:22 
AnswerRe: Control crippling forms designer? Pin
Arman Ghazanchyan20-Feb-11 18:55
Arman Ghazanchyan20-Feb-11 18:55 
GeneralRe: Control crippling forms designer? Pin
sunco23-Dec-12 14:42
sunco23-Dec-12 14:42 
Did you found a solution for this issue ?
QuestionIs there any way to fit it to .net 4 client profile? Pin
yanivabo26-Dec-10 6:23
yanivabo26-Dec-10 6:23 
GeneralMy vote of 5 Pin
malcomm8-Dec-10 15:21
malcomm8-Dec-10 15:21 
GeneralAnalogClockControl for framework 4.0 Pin
amit sonkhiya18-Oct-10 21:31
amit sonkhiya18-Oct-10 21:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.