Simple Binary Clock using Graphics

• Download sample project - 10.11 KB

Introduction

“There are only 10 people in this world, those who understand binary – and those who don’t”
This little snippet is the result of me playing about with C# drawing. It basicly takes a DateTime, converts each number to a binary string and then draws each binary value as a whole or empty circle to a given pictureBox.

If you're interested in learning more about how it works, check out the attached sample source code which is fully documented

Using the Code

Ensure your windows form makes reference to the following namespaces:

using System.Drawing;
using System.Windows.Forms;

The main BinaryClock function:

/*For a fully documented version of this snippet please see the attached sample code */
private void BinaryClock(PictureBox PicBox, DateTime dtTime)
        {
            int bcSize = 10;   
            int bcSpacing = 15;           
            int bcY = 50;                       
            int bcX = 5;                            

            Color nodeColor = Color.Gray;           
            PicBox.BackColor = Color.White;              

            Graphics gClock = PicBox.CreateGraphics();   
            Pen myPen = new Pen(nodeColor);              
            Brush brsh = new SolidBrush(nodeColor);
            string strTime = dtTime.ToString("hhmmss");

            gClock.Clear(PicBox.BackColor);

            for (int x = 0; x <= strTime.Length - 1; x++)
            {
                int bcAmount = 3; 

                if (x == 2 || x == 4) 
                {
                    bcX += 5;      
                    bcAmount = 2; 
                }
                else if (x == 0)   
                {
                    bcAmount = 1;   
                }



                for (int i = 0; i <= bcAmount; i++)
                {
                    string BinaryString = Convert.ToString(strTime[x], 2);
                    if (BinaryString[BinaryString.Length - (i + 1)] == '1')
                        gClock.FillEllipse(brsh, new Rectangle(bcX + 1 +
                            (x * bcSpacing), bcY - (i * bcSpacing), bcSize, bcSize));
                    else
                        gClock.DrawEllipse(myPen, new Rectangle(bcX + 1 +
                           (x * bcSpacing), bcY - (i * bcSpacing), bcSize, bcSize));

                }
            }
        }

To draw the clock, you simply call the BinaryClock method with the PictureBox you wish to draw to and the DateTime to show:

BinaryClock(pictureBox1, DateTime.Now);

This will then draw the given DateTime to the pictureBox in binary! To have it update in real time, add the above code to a timers Tick event and set the timers interval to 1000 (1 second).

Points of Interest

Play about with the variables at the top of the method to get your desired effect.

• bcSize - Size of each binary dot
• bcSpacing – Space between each binary string
• bcY – pixels from the picture box top
• bcX – Pixels from the picture boxes left edge
• nodeColor - self explanatory
• PicBox.BackColor – self explanatory

History

• 13/AUG/09: Updated with documented sample project
• 12/AUG/09: Initial post