Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating an Analog & Digital Clock in VB.net.

Author: DevASP
Download Source Code : 644_Clock.zip

This article is about how you can create an analog clock in vb.net. Along with analog clock in this application there is also a digital clock at the bottom of the analog clock.

 

 This application uses the timer control. On great thing is that no images are used to represent the needles of the clock. System.Drawing namespace is used to draw the lines which represent the needles of the clock.

 

Steps you will do.

 

 

Start visual studio and create a new window application.

 

Add a new module to this project from the project menu and add the following lines of code in it. Here some variables are declared so that they can be available throughout the project.

 

 

Module Module1

 

    Public TimeNow As Date = Date.Now

    Public mySec As Integer = TimeNow.Second

    Public myMin As Integer = TimeNow.Minute

    Public myHour As Integer = TimeNow.Hour

    Public FirstMin As Boolean = True

    Public FirstHour As Boolean = True

 

    Public myxAngel, myyAngel, myxMinAngel, myyMinAngel, myxHourAngel, myyHourAngel As Double

 

    Public myxLength, myyLength, myxMinLength, myyMinLength, myxHourLength, myyHourLength As Double

 

    Public MinTick = True

    Public HourTick = False

    Public FirstDamnedTick As Boolean = True

 

End Module  

 

 

Now design the user interface as describe below.

 

 

Set the following properties of the form object.

 

Name = “Form1”

Text = “Clock”

StartPosition = “CenterScreen”

 

 Now draw a panel control on the form and set the following properties.

 

 

Name = “plClock”

Size = “416, 416”

TabIndex = “0”

  

In the panel created above drop a label control and set its following properties.

 

 

Name = “Label1”

Size = “64, 40”

Font = “Microsoft Sans Serif, 26.25pt, style=Bold’

Text = “12”

TextAlign = “MiddleCenter”

 

Below the panel drop five label controls and set their following properties. These label controls are used to display the hours, minutes and seconds.

 

First label control

 

Name = “lblHour”

Text = “”

Font = “Microsoft Sans Serif, 26.25pt, style=Bold”

Size = “56, 40”

 

Second label control

 

  

Name = “Label2”

Text = “:”

Size = “20,40”

Font = “Microsoft Sans Serif, 26.25pt, style=Bold”

 

Third label control

 

 

Name = “lblMin”

Text = “”

Font = “Microsoft Sans Serif, 26.25pt, style=Bold”

Size = “56, 40”

 

 

Fourth label control

 

 

Name = “Label3”

Text = “:”

Size = “20,40”

Font = “Microsoft Sans Serif, 26.25pt, style=Bold”

 

Fifth label control

 

 

Name = “lblSec”

Text = “”

Font = “Microsoft Sans Serif, 26.25pt, style=Bold”

Size = “56, 40”

 

 

This is what you will do to create the user interface of clock.Now drop three timer controls and set their properties as below.

 

First timer control

 

 

Name = “tmrHour”

Interval = “3600000”

Enabled = “False”

 

Second timer control

 

 

Name = “tmrMin”

Interval = “60000”

Enabled = “False”

 

 

Third timer control

 

 

Name = “tmrSec”

Interval = “1000”

Enabled = “False”

 

 

Open the code window of form and write the following code in the paint event of the pClock panel.

 

 

Dim g As Graphics = e.Graphics

Dim myPen As New Pen(Brushes.Tomato, 1)

Dim myBigPen As New Pen(Brushes.White, 4)

      

g.DrawArc(myPen, Integer.Parse(plClock.Width / 2) - 200, Integer.Parse(plClock.Height / 2) - 200, 400, 400, 0, 360)

      

g.DrawString("3", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) + 170, Integer.Parse(plClock.Height / 2) - 20)

 

g.DrawString("2", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) + 147, Integer.Parse(plClock.Height / 2) - 30 - 80)

 

g.DrawString("1", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) + 80, Integer.Parse(plClock.Height / 2) - 35 - 138)

 

g.DrawString("12", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 20, Integer.Parse(plClock.Height / 2) - 20 - 180)

 

g.DrawString("11", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 114, Integer.Parse(plClock.Height / 2) - 30 - 138)

 

g.DrawString("10", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 177, Integer.Parse(plClock.Height / 2) - 20 - 80)

 

g.DrawString("9", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 190, Integer.Parse(plClock.Height / 2) - 20)

 

g.DrawString("8", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 177, Integer.Parse(plClock.Height / 2) - 20 + 80)

 

g.DrawString("7", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 114, Integer.Parse(plClock.Height / 2) - 20 + 150)

 

g.DrawString("6", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 20, Integer.Parse(plClock.Height / 2) - 20 + 180)

 

g.DrawString("5", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) - 20 + 94, Integer.Parse(plClock.Height / 2) - 20 + 158)

 

g.DrawString("4", Label1.Font, Brushes.Tomato, Integer.Parse(plClock.Width / 2) + 147, Integer.Parse(plClock.Height / 2) - 30 + 105)

 

 

myxAngel = ((90 - (6 * mySec)) * Math.PI) / 180

myxLength = Math.Cos(myxAngel) * 160

myyAngel = ((90 - (6 * mySec)) * Math.PI) / 180

myyLength = Math.Sin(myyAngel) * 160

 

g.DrawLine(myPen, Integer.Parse(plClock.Width / 2), Integer.Parse(plClock.Height / 2),

Integer.Parse(plClock.Width / 2) + CInt(myxLength), Integer.Parse(plClock.Height / 2) - CInt(myyLength))

 

If FirstDamnedTick = True Then

 

myxHourAngel = ((90 - ((6 * (myMin - (myMin Mod (12))) / 12) + 30 * myHour)) * Math.PI) / 180

 

myxHourLength = Math.Cos(myxHourAngel) * 90

 

myyHourAngel = ((90 - ((6 * (myMin - (myMin Mod (12))) / 12) + 30 * myHour)) * Math.PI) / 180

 

myyHourLength = Math.Sin(myyHourAngel) * 90

 

g.DrawLine(myPen, Integer.Parse(plClock.Width / 2), Integer.Parse(plClock.Height / 2), Integer.Parse(plClock.Width / 2) + CInt(myxHourLength), Integer.Parse(plClock.Height / 2) - CInt(myyHourLength))

 

FirstDamnedTick = False

 

End If

 

If MinTick = True Then

 

myxMinAngel = ((90 - (6 * myMin)) * Math.PI) / 180

 

myxMinLength = Math.Cos(myxMinAngel) * 140

 

myyMinAngel = ((90 - (6 * myMin)) * Math.PI) / 180

myyMinLength = Math.Sin(myyMinAngel) * 140

 

g.DrawLine(myPen, Integer.Parse(plClock.Width / 2), Integer.Parse(plClock.Height / 2), Integer.Parse(plClock.Width / 2) + CInt(myxMinLength), Integer.Parse(plClock.Height / 2) - CInt(myyMinLength))

 

MinTick = False

End If

 

If HourTick = True Then

 

myxHourAngel = ((90 - ((6 * (myMin - (myMin Mod (12))) / 12) + 30 * myHour)) * Math.PI) / 180

 

myxHourLength = Math.Cos(myxHourAngel) * 90

 

myyHourAngel = ((90 - ((6 * (myMin - (myMin Mod (12))) / 12) + 30 * myHour)) * Math.PI) / 180

 

myyHourLength = Math.Sin(myyHourAngel) * 90

 

g.DrawLine(myPen, Integer.Parse(plClock.Width / 2), Integer.Parse(plClock.Height / 2), Integer.Parse(plClock.Width / 2) + CInt(myxHourLength), Integer.Parse(plClock.Height / 2) - CInt(myyHourLength))

 

HourTick = False

 

End If

 

g.DrawLine(myBigPen, Integer.Parse(plClock.Width / 2), Integer.Parse(plClock.Height / 2), Integer.Parse(plClock.Width / 2) + CInt(myxMinLength),

Integer.Parse(plClock.Height / 2) - CInt(myyMinLength))

 

g.DrawLine(myBigPen, Integer.Parse(plClock.Width / 2), Integer.Parse(plClock.Height / 2), Integer.Parse(plClock.Width / 2) + CInt(myxHourLength), Integer.Parse(plClock.Height / 2) - CInt(myyHourLength))

 

 

 

 Write the following code in the load event of the form

 

lblSec.Text = mySec

lblMin.Text = myMin

lblHour.Text = myHour

If myHour > 12 Then

myHour = myHour Mod 12

lblHour.Text = myHour

End If 

 

 

Write following code in the tick event of the tmrSec timer control.

 

mySec = mySec + 1

lblSec.Text = mySec

plClock.Refresh()

 

If mySec > 59 Then

            mySec = 0

            lblSec.Text = 0

            MinTick = True

           If FirstMin = True Then

                myMin = myMin + 1

                lblMin.Text = myMin

                tmrMin.Enabled = True

                FirstMin = False

            End If

End If

 

Write following code in the tick event of the tmrMin timer control.

 

 

myMin = myMin + 1

lblMin.Text = myMin

 

If myMin Mod (12) = 0 Then

      HourTick = True

End If

 

If myMin > 59 Then

       myMin = 0

       lblMin.Text = 0

       If FirstHour = True Then

           myHour = myHour + 1

           lblHour.Text = myHour

           tmrHour.Enabled = True

           FirstHour = False

        End If

        If myHour > 12 Then

           myHour = myHour Mod 12

           lblHour.Text = myHour

        End If

 End If

 

 

Write the following code in the tick event of the tmeHour timer control.

 

myHour = myHour + 1

lblHour.Text = myHour

 

If myHour > 12 Then

      myHour = 1

      lblHour.Text = 1

End If

 

Run you application and see the analog clock. Its needles are smooth. Along with analog clock there is also a digital clock in the bottom of the form.

Article Comments
Even though it looks simple it needs lot of brains to develop such kind of applications. I appreciate your patience. Keep posting this kind of applications. Thank you. -Soori.

Posted on 5/16/2007 7:54:29 PM by Surendra

Very nice work from Surendra. Thanks so much. U made it very easy that even beginners can do it without asking questions.

But there is still one problem, the hours, minutes and seconds lines are not moving constantly, they only change at form load, they don't change continuously. please can do tell me what to do else to make it work continuously?

Posted on 12/6/2007 12:05:49 PM by Chukwuma Patrick Chidalu

hey its a goood code... analog clock is running fine ... but digital clock's min and is not showng any when i run the program first time..after 1 sec min is updating ...and after 60 min the hour is getting value....plz help dude...i need it

Posted on 9/19/2008 4:30:20 AM by Soumyadip Ghosh

I'd resisted the urge to google a tut for this for a few weeks, wanted to work it all out myseld, but almost on the point of tearing out my hair, I did, and this tut really helped me so much I can't explain! You really need a 'Donate' button on your tutorials.. I was looking for it!
Thankyou again.

Posted on 11/28/2009 12:18:27 PM by Daschell Cartwright

very very nice.....send example to me

Posted on 12/10/2009 11:55:59 PM by Thakur Shivpratap Singh

Hi Thakur Shivpratap Singh,

Sample is attached with article.

http://www.devasp.net/net/articles/display/644.html

Posted on 12/14/2009 4:12:13 AM by zunnair

Great tut. Just one Q, is it possible to change the colour of the hands and clock face? Please rply thanx!

Posted on 12/30/2009 1:13:10 PM by Alok Kumar

it is very nice send many more to me

Posted on 5/6/2010 2:49:14 PM by hamid

v. good

Posted on 11/22/2010 8:32:25 AM by akram

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Creating a Roaming cursor on a Web Page.

Disclaimer - Privacy
© 2002-2017 DevASP.net