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;
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.