Show Mobile Navigation

Monday, May 23, 2016

, , , , , ,

How To Create An Analog Clock Using C#

Oyetoke Tobi - Monday, May 23, 2016

This tutorial is focused on how to create an Analog clock using C# programming language. So in this tutorial, we are going to use C# to draw the graphics of an analog clock. We also make used of a timer to continuously move our clock’s pointer or hand.

Method

So we will first set some angle values to second, minute, hour hand.

Then use C# code to draw the clock using the graphics class, save it as a bitmap variable and load it to a picturebox.

Then lastly use the timer to move the second hand, minute hand and the hour hand.

Instructions

Open Visual Studio.

Then create a new Windows Form Application Project.

Then add a Picture box to the form.

Now double click on the form to go to code view

Then copy and paste the below code after the "private void Form1_Load(object sender, EventArgs e)" heading right curly bracket "}".


private void t_Tick(object sender, EventArgs e)
        {
            // create an image
            cg = Graphics.FromImage(bmp);

            //get time
            int ss = DateTime.Now.Second;
            int mm = DateTime.Now.Minute;
            int hh = DateTime.Now.Hour;

            int[] handCoord = new int[2];

            //get time
            cg.Clear(Color.Blue);

            //draw a circle
            cg.DrawEllipse(new Pen(Color.Black, 6f), 0, 0, WIDTH, HEIGHT);

            //draw clock numbers
            cg.DrawString("12", new Font("Ariel", 12), Brushes.Black, new PointF(140, 3));
            cg.DrawString("1", new Font("Ariel", 12), Brushes.Black, new PointF(218, 22));
            cg.DrawString("2", new Font("Ariel", 12), Brushes.Black, new PointF(263, 70));
            cg.DrawString("3", new Font("Ariel", 12), Brushes.Black, new PointF(285, 140));
            cg.DrawString("4", new Font("Ariel", 12), Brushes.Black, new PointF(263, 212));
            cg.DrawString("5", new Font("Ariel", 12), Brushes.Black, new PointF(218, 259));
            cg.DrawString("6", new Font("Ariel", 12), Brushes.Black, new PointF(142, 279));
            cg.DrawString("7", new Font("Ariel", 12), Brushes.Black, new PointF(70, 259));
            cg.DrawString("8", new Font("Ariel", 12), Brushes.Black, new PointF(22, 212));
            cg.DrawString("9", new Font("Ariel", 12), Brushes.Black, new PointF(1, 140));
            cg.DrawString("10", new Font("Ariel", 12), Brushes.Black, new PointF(22, 70));
            cg.DrawString("11", new Font("Ariel", 12), Brushes.Black, new PointF(70, 22));

            //draw seconds hand
            handCoord = msCoord(ss, secHAND);
            cg.DrawLine(new Pen(Color.Red, 2f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));

            //draw minutes hand
            handCoord = msCoord(mm, minHAND);
           cg.DrawLine(new Pen(Color.Black, 3f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));

            //draw hours hand
            handCoord = hrCoord(hh % 12, mm, hrHAND);
            cg.DrawLine(new Pen(Color.Black, 3f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));

            //load the bitmap image
            pictureBox1.Image = bmp;

            //display time in the heading
            this.Text = "Analog Clock - " + hh + ":" + mm + ":" + ss;
            cg.Dispose();        
        }

        //coord for minute and second
        private int[] msCoord(int val, int hlen)
        {
            int[] coord = new int[2];
            val *= 6; // note: each minute and seconds make a 6 degree

            if (val >= 0 && val <= 100)
            {
                coord[0] = cx + (int)(hlen * Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            else
            {
                coord[0] = cx - (int)(hlen * -Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            return coord;
        }

        //coord for hour 

        private int[] hrCoord(int hval, int mval, int hlen)
        {
            int[] coord = new int[2];

            //each hour makes 60 degree with min making 0.5 degree
            int val = (int)((hval * 30) + (mval * 0.5));

            if (val >= 0 && val <= 180)
            {
                coord[0] = cx + (int)(hlen * Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            else
            {
                coord[0] = cx - (int)(hlen * -Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            return coord;
        }

Then copy and paste the below code inside the curly bracket {} under the "private void Form1_Load(object sender, EventArgs e)" heading.


// create a new bitmap
            bmp = new Bitmap(WIDTH + 1, HEIGHT + 1);

            // placing in center
            cx = WIDTH / 2;
            cy = HEIGHT / 2;

            //backcolor
            this.BackColor = Color.White;

            //timer

            t.Interval = 1000; // i.e. tick in milisecond
            t.Tick += new EventHandler(this.t_Tick);
            t.Start();
           


Then copy and paste the below code inside the curly bracket {} under the "public partial class Form1 : Form" heading.


Timer t = new Timer();

        int WIDTH = 300, HEIGHT = 300, secHAND = 140, minHAND = 110, hrHAND = 80;

        // in center
        int cy, cx;

        Bitmap bmp;
        Graphics cg;


Below is the full code of the Analog clock application

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace analogClock
{
    public partial class Form1 : Form
    {
        Timer t = new Timer();

        int WIDTH = 300, HEIGHT = 300, secHAND = 140, minHAND = 110, hrHAND = 80;

        // in center
        int cy, cx;

        Bitmap bmp;
        Graphics cg;


        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // create a new bitmap
            bmp = new Bitmap(WIDTH + 1, HEIGHT + 1);

            // placing in center
            cx = WIDTH / 2;
            cy = HEIGHT / 2;

            //backcolor
            this.BackColor = Color.White;

            //timer

            t.Interval = 1000; // i.e. tick in milisecond
            t.Tick += new EventHandler(this.t_Tick);
            t.Start();
           
          }

        private void t_Tick(object sender, EventArgs e)
        {
            // create an image
            cg = Graphics.FromImage(bmp);

            //get time
            int ss = DateTime.Now.Second;
            int mm = DateTime.Now.Minute;
            int hh = DateTime.Now.Hour;

            int[] handCoord = new int[2];

            //get time
            cg.Clear(Color.Blue);

            //draw a circle
            cg.DrawEllipse(new Pen(Color.Black, 6f), 0, 0, WIDTH, HEIGHT);

            //draw clock numbers
            cg.DrawString("12", new Font("Ariel", 12), Brushes.Black, new PointF(140, 3));
            cg.DrawString("1", new Font("Ariel", 12), Brushes.Black, new PointF(218, 22));
            cg.DrawString("2", new Font("Ariel", 12), Brushes.Black, new PointF(263, 70));
            cg.DrawString("3", new Font("Ariel", 12), Brushes.Black, new PointF(285, 140));
            cg.DrawString("4", new Font("Ariel", 12), Brushes.Black, new PointF(263, 212));
            cg.DrawString("5", new Font("Ariel", 12), Brushes.Black, new PointF(218, 259));
            cg.DrawString("6", new Font("Ariel", 12), Brushes.Black, new PointF(142, 279));
            cg.DrawString("7", new Font("Ariel", 12), Brushes.Black, new PointF(70, 259));
            cg.DrawString("8", new Font("Ariel", 12), Brushes.Black, new PointF(22, 212));
            cg.DrawString("9", new Font("Ariel", 12), Brushes.Black, new PointF(1, 140));
            cg.DrawString("10", new Font("Ariel", 12), Brushes.Black, new PointF(22, 70));
            cg.DrawString("11", new Font("Ariel", 12), Brushes.Black, new PointF(70, 22));

            //draw seconds hand
            handCoord = msCoord(ss, secHAND);
            cg.DrawLine(new Pen(Color.Red, 2f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));

            //draw minutes hand
            handCoord = msCoord(mm, minHAND);
           cg.DrawLine(new Pen(Color.Black, 3f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));

            //draw hours hand
            handCoord = hrCoord(hh % 12, mm, hrHAND);
            cg.DrawLine(new Pen(Color.Black, 3f), new Point(cx, cy), new Point(handCoord[0], handCoord[1]));

            //load the bitmap image
            pictureBox1.Image = bmp;

            //display time in the heading
            this.Text = "Analog Clock - " + hh + ":" + mm + ":" + ss;
            cg.Dispose();        
        }

        //coord for minute and second
        private int[] msCoord(int val, int hlen)
        {
            int[] coord = new int[2];
            val *= 6; // note: each minute and seconds make a 6 degree

            if (val >= 0 && val <= 100)
            {
                coord[0] = cx + (int)(hlen * Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            else
            {
                coord[0] = cx - (int)(hlen * -Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            return coord;
        }

        //coord for hour 

        private int[] hrCoord(int hval, int mval, int hlen)
        {
            int[] coord = new int[2];

            //each hour makes 60 degree with min making 0.5 degree
            int val = (int)((hval * 30) + (mval * 0.5));

            if (val >= 0 && val <= 180)
            {
                coord[0] = cx + (int)(hlen * Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            else
            {
                coord[0] = cx - (int)(hlen * -Math.Sin(Math.PI * val / 180));
                coord[1] = cy - (int)(hlen * Math.Cos(Math.PI * val / 180));
            }
            return coord;
        }
    }
}

The result of the application:





0 comments:

Post a Comment