Click here to Skip to main content
11,490,408 members (43,644 online)
Click here to Skip to main content

A Fine-looking Segmented LED Control

, 12 May 2008 CPOL 102.9K 7.1K 215
Rate this:
Please Sign up or sign in to vote.
This article describes an approach to constructing a segmented LED displayer
Screenshot - screen_shot.png

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.

Figure 1 - 7 segments

Figure 1: Segmented character

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.

Figure 2 - 1 segment

Figure 2: Properties of each segment

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.

Figure 3 - Algorithm

Figure 3: Drawing one character

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:

BorderWidth int Get or set the width of the border around the control.
BorderColor System.Color Get or set the color of the border around the control.
HighlightOpaque byte Get or set the opaque value of the highlight. 0 implies that the highlight will end transparent, while 100 implies that the highlight will keep its transparency from the beginning.
ShowHighlight bool Get or set a value indicating whether to show the highlight area on the control. If it is set to false, the value of the HighlightOpaque property is ignored.
CornerRadius int Get or set the corner radius for the control. If RoundCorner equals false, the value of this property is ignored. The valid value is from 1 to 10.
GradientBackground bool Get or set a value indicating whether the background was filled in gradient colors.
BackColor_1 System.Color Get or set the first background color. If GradientBackground equals true, this color will be the color at the top of the background rectangle. Otherwise, this color will be the solid background color.
BackColor_2 System.Color Get or set the second background color. If GradientBackground equals true, this color will be the color at the bottom of the background rectangle. Otherwise, this color will be ignored.
RoundCorner bool Get or set the border style. If it is true, the border of the control will be a round rectangle. Otherwise, the border is a normal rectangle.
SegmentIntervalRatio int Get or set the segment-interval ratio. The larger this value is, the wider the gaps between segments are.
TextAlignment Alignment Get or set the alignment style of the text.
SegmentWidthRatio int Get or set the segment-width ratio. The larger this value is, the wider the segments are.
TotalCharCount int Get or set the total number of characters to display. If the number of characters contained in the displaying text is larger than this value, the displaying character will be truncated.
BevelRate float Get or set the bevel rate of each segment. Please refer to Figure 2 for further information.
FadedColor System.Color Get or set the color of faded background characters.
Text string Get or set the text of the control.

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

  • 15th July, 2007 -- Original version posted
  • 20th July, 2007 -- Downloads updated
  • 7th 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
  • 12th 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Liu Xia
Software Developer
China China
A guy who is a software developer now and hopes to become a Chief Software Architect in the future Smile | :) . Now study in Beijing University of Aeronautics & Astronautics for the master's degree.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Sougata Das8-Mar-13 23:06
memberSougata Das8-Mar-13 23:06 
GeneralMy vote of 5 Pin
spidergeuse7-Jan-13 5:20
memberspidergeuse7-Jan-13 5:20 
GeneralMy vote of 5 Pin
ezekjh27-Apr-11 11:32
memberezekjh27-Apr-11 11:32 
GeneralMy vote of 5 Pin
Antoine Megens13-Mar-11 7:44
memberAntoine Megens13-Mar-11 7:44 
GeneralThanx great control Pin
Poul_L5-Nov-10 8:18
memberPoul_L5-Nov-10 8:18 
GeneralGreat control! Pin
blandwehr13-Nov-08 8:10
memberblandwehr13-Nov-08 8:10 
GeneralThis is great Pin
Nicholas Piasecki28-Aug-08 8:52
memberNicholas Piasecki28-Aug-08 8:52 
GeneralLastest code on CodePlex Pin
Liu Xia10-May-08 23:12
memberLiu Xia10-May-08 23:12 
GeneralBut it's user hostile! Pin
PIEBALDconsult8-May-08 14:58
memberPIEBALDconsult8-May-08 14:58 
GeneralRe: But it's user hostile! Pin
Liu Xia8-May-08 22:45
memberLiu Xia8-May-08 22:45 
GeneralRe: But it's user hostile! Pin
PIEBALDconsult9-May-08 13:28
memberPIEBALDconsult9-May-08 13:28 
GeneralRe: But it's user hostile! Pin
Liu Xia9-May-08 18:55
memberLiu Xia9-May-08 18:55 
AnswerRe: But it's user hostile! Pin
Liu Xia9-May-08 20:10
memberLiu Xia9-May-08 20:10 
GeneralRe: But it's user hostile! Pin
Bruce Munck11-Jul-08 3:18
memberBruce Munck11-Jul-08 3:18 
GeneralSome letters don't render Pin
Manster8-May-08 12:39
memberManster8-May-08 12:39 
GeneralRe: Some letters don't render Pin
Liu Xia8-May-08 22:43
memberLiu Xia8-May-08 22:43 
QuestionPassword? Pin
KnightRohan11-Jan-08 2:34
memberKnightRohan11-Jan-08 2:34 
AnswerRe: Password? Pin
Liu Xia30-Jan-08 16:10
memberLiu Xia30-Jan-08 16:10 
Generalsuperb Pin
erdm7-Dec-07 1:48
membererdm7-Dec-07 1:48 
GeneralGreat documentation Pin
MAEI29-Nov-07 13:16
memberMAEI29-Nov-07 13:16 
GeneralBUG in setter of Text Pin
KenGuru4-Sep-07 3:54
memberKenGuru4-Sep-07 3:54 
GeneralRe: BUG in setter of Text Pin
Liu Xia7-Sep-07 19:01
memberLiu Xia7-Sep-07 19:01 
Generalawesome Pin
Antom1-Sep-07 14:50
memberAntom1-Sep-07 14:50 
GeneralVery Nice Pin
SpiveyC#23-Aug-07 5:59
memberSpiveyC#23-Aug-07 5:59 
GeneralDefine char with table Pin
NicolaBitonto26-Jul-07 18:59
memberNicolaBitonto26-Jul-07 18:59 
GeneralRe: Define char with table Pin
YouMiss27-Nov-07 15:52
memberYouMiss27-Nov-07 15:52 
GeneralRe: Define char with table Pin
jinfd12-May-08 8:55
memberjinfd12-May-08 8:55 
GeneralLED Control Pin
moegoe24-Jul-07 3:17
membermoegoe24-Jul-07 3:17 
GeneralRe: LED Control Pin
Liu Xia27-Jul-07 2:08
memberLiu Xia27-Jul-07 2:08 
GeneralGood work...! Pin
Chamadness24-Jul-07 1:35
memberChamadness24-Jul-07 1:35 
GeneralGood work! Pin
Khazbak23-Jul-07 22:09
memberKhazbak23-Jul-07 22:09 
GeneralReduce computation Pin
Horia Tudosie23-Jul-07 15:45
memberHoria Tudosie23-Jul-07 15:45 
GeneralRe: Reduce computation Pin
Liu Xia27-Jul-07 1:59
memberLiu Xia27-Jul-07 1:59 
GeneralUpdated version Pin
Liu Xia19-Jul-07 18:56
memberLiu Xia19-Jul-07 18:56 
GeneralVery Slick Pin
Paul Conrad17-Jul-07 20:20
memberPaul Conrad17-Jul-07 20:20 
GeneralRe: Very Slick Pin
Liu Xia18-Jul-07 0:07
memberLiu Xia18-Jul-07 0:07 
GeneralOptimisation Technique Pin
Ed.Poore17-Jul-07 11:47
memberEd.Poore17-Jul-07 11:47 
GeneralRe: Optimisation Technique [modified] Pin
Liu Xia17-Jul-07 16:59
memberLiu Xia17-Jul-07 16:59 
GeneralRe: Optimisation Technique Pin
sermit24-Dec-07 23:00
membersermit24-Dec-07 23:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 12 May 2008
Article Copyright 2007 by Liu Xia
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid