Analog Clock

• Download source files - 14.4 Kb
• Download demo files - 14 Kb

Introduction

I am a software developer working from home. This means that I have to attend to a number of chores while I am working on projects. Very often, when I am busy doing some absorbing piece of programming, I tend to forget some important chores. I therefore decided to develop an analog alarm clock control that could set alarms at specific times as well as alarms that count down time. I decided to implement this control in C#.

When I started working on the application, I was faced with a peculiar problem. You know that in C#, Cosine and Sine functions take their parameters in radians and not in degrees. The question was how to draw a clock face using radians? That meant drawing the 12 digits of the clock each at an angle of 30 degrees from each other, and the clock showing the minute hand, second hand, and the hour hand. I give below the method I used.

The Code

Drawing the Clock Face

To draw the clock, we write the strings 1 through 12 in the appropriate locations. We specify the location as x, y coordinates, imagining them to lie on an imaginary circle. Draw each number on the clock face with the overloaded DrawString method of the Graphics object.

void DrawString(string, Font, Brush, float, float, StringFormat);

How to compute x, y coordinates

The x-coordinate can be found by multiplying the cosine of the angle by the radius. A circle is of 360 degrees. To place 12 numbers on the circle, each number should be placed 30 degrees from the previous number. The C# Cosine and Sine functions take their parameters in radians and not degrees. To convert degrees to radians:

radians = (degrees * PI) / 180

x = GetCos( i * deg + 90) * FaceRadius;
y = GetSin( i * deg + 90) * FaceRadius;

The GetCos and GetSin methods convert the degrees to radians.

private static float GetSin(float degAngle)
{
   return (float) Math.Sin(Math.PI * degAngle / 180);
}
private static float GetCos(float degAngle)
{
   return (float) Math.Cos(Math.PI * degAngle / 180);
}

Drawing the hands (hour, minute, second)

Draw the hands using the Pen object. The EndCap property is of type LineCap. The ArrowAnchor is used in this example (view the code in the Zip file).

Pen hourPen = new (Color.Red);
hourPen.EndCap = LineCap.ArrowAnchor;

Create methods GetSecondRotation() and GetMinuteRotation() to return a floating point number indicating how much to rotate.

private float GetSecondRotation()
{
   return(360f * currentTime.Second / 60f);
}

private float GetMinuteRotation()
{
   return(360f * currentTime.Minute / 60f);
}

The GetHourRotation() method is difficult as we have to set the face to 24 hour mode, and the angle for the hour hand will be different if there are 24 hours around the clock face rather than 12.

private float GetHourRotation()
{
   float deg = b24Hours ? 15 : 30; 
   //30 degrees if 12 hour clock face or 15 degrees 
   //if 24 hr clock face.
   float numHours = b24Hours ? 24 : 12;
   return(360f *currentTime.Hour / numHours + deg*currentTime.Minute / 60f);
}

Drawing the new time

Once the seconds hand, minutes hand and the hours hand is drawn, set the currentTime to new time.

currentTime = newTime;

Finally, I have also declared two properties: AlarmTime which allows you to raise alarm, and countDownTime which allows you to set the count down timer to milliseconds.

Code References

The implementation for the clock face is home grown, but the code for 'How to use the Graphics object' is taken from the article 'Programming .NET Application' by O' Reilly. Complements to O' Reilly, as the classes he developed for drawing the clock face were exceptionally easy to apply and reuse.

Conclusion

This control demonstrates a simple use of the Graphics object in a real world example, which can be combined with other applications requiring alarms. I have included some more functionalities in my control and also included the demo project of how to use it and set the alarm time.