A Fine-looking Segmented LED Control

• Download demo project and preview - 154.64 KB
• Download source - 162.7 KB

Introduction

This article describes an approach to constructing a cool segmented LED displayer that is similar to the LEDs used in alarm clocks and industry monitors. This control can be used to display time, numerical values and even some English characters. I hope it will be helpful in programs such as hardware simulators.

Background

In this section, I would like to give a brief introduction to the ideas behind this control. In a 7-segment LED displayer, one character is composed of at most 7 segments, as in the picture shown below.

Each segment has the following properties: the width of the segment, the bevel rate of the corners in the segment and the interval between segments.

If we mark those 7 segments with numbers, as the picture shows in Figure 1, then we can use indices to represent different characters. For example, the character "1" can be represented as (2, 3) and the character "5" can be represented as (1, 6, 7, 3, 4). To draw the whole scene, we should first calculate the bound rectangles where a certain character is drawn. Then the segments in each specified bound rectangle should be drawn. The algorithm for drawing a 7-segmented LED character in a specified bound rectangle is shown in Figure 3.

Using the code

This control is quite easy to use. Just drag it from the toolbox to your form in design mode. Then adjust its provided properties in the designer or at runtime to modify its appearance. The properties are listed in the table below:

Points of Interest

A control at presentation level may do lots of painting. Most of the time, the control has to be repainted when one of its properties is changed. This may cause multiple invalidating if several properties of the control are changed in quick succession. In order to avoid multiple painting, we can implement the ISupportInitialize interface in our control. First, we set a member variable in the BeginInit() method.

private bool m_bIsInitializing = false;
void ISupportInitialize.BeginInit()
{
    m_bIsInitializing = true;
}

Then we rewrite our properties in the following manner:

public Color FadedColor
{
    get
    {
        return m_colFadedColor;
    }
    set
    {
        if (m_colFadedColor == value)
        return;
        m_colFadedColor = value;
        // check if the control is in initializing mode
        if (!m_bIsInitializing)
        {
            Invalidate();
        }
    }
}

At last, in the EndInit() method, we turn off the initialization mode and repaint the control.

void ISupportInitialize.EndInit()
{
    m_bIsInitializing = false;
    Invalidate();
}

Now we can use batch initialization to prevent successive painting of the control.

((System.ComponentModel.ISupportInitialize)mycontrol).BeginInit();
mycontrol.BackColor = System.Drawing.Color.Transparent;
mycontrol.BackColor_1 = System.Drawing.Color.Black;
mycontrol.BackColor_2 = System.Drawing.Color.Transparent;
mycontrol.BevelRate = 0.5F;
mycontrol.BorderColor = System.Drawing.Color.White;
mycontrol.FadedColor = System.Drawing.Color.Black;
((System.ComponentModel.ISupportInitialize)mycontrol).EndInit();

History

• 15^th July, 2007 -- Original version posted
• 20^th July, 2007 -- Downloads updated
• 7^th May, 2008 -- Downloads updated
  1. User can now turn on smooth drawing mode to make the control look better
  2. Italic text style supported
  3. Bug fixed: The bottom and right bounds are invisible if the bound rectangle is a regular one
• 12^th May, 2008 -- Downloads updated
  1. The user can copy text on the control when the control got focus.
  2. The color of border will change (Defined by user) when the control got and lost focus.
  3. Bug fixed: the anti-alias effect will disappear when the bound is a regulare rect.