Click here to Skip to main content
15,867,686 members
Articles / Multimedia / GDI+
Article

A thermometer control

Rate me:
Please Sign up or sign in to vote.
4.85/5 (63 votes)
9 Jul 2007CPOL2 min read 244.6K   6.6K   149   33
Creating an analog-style thermometer

Screenshot - Thermometer_demo.jpg

Introduction

This article demonstrates a complex analog-style thermometer control in C#. The control is in pure managed code. Most visual elements can be adjusted through the control's properties.

Layout

Due to the flexibility of the control, it can be used to display all sorts of data and not just degrees as used in this example.

Screenshot - Layouts.jpg

Architecture

The control consists of 2 classes: ManometerBase and Thermometer.

Screenshot - architecture.jpg

The implementation is done in the Thermometer class.

Code

All painting is done in the OnPaint method of the Thermometer class. Every element has its own Paint method and the methods are marked protected virtual.

C#
protected override void OnPaint(PaintEventArgs e)
{
    // Set smoothingmode to AntiAlias
    e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
    // Shadow
    PaintShadow(e.Graphics);
    // Background
    PaintBackground(e.Graphics);
    // Border
    PaintBorder(e.Graphics);
    // Inner shadow
    PaintInnerShadow(e.Graphics);
    // Bars
    PaintBars(e.Graphics);
    // Numbers
    PaintNumbers(e.Graphics);
    // Paint the text(s)
    PaintText(e.Graphics);
    // Paint the Arrows
    PaintArrows(e.Graphics);
    // Reflex
    PaintReflex(e.Graphics);
    // Reset smoothingmode
    e.Graphics.SmoothingMode = SmoothingMode.Default;
}

Painting the numbers

Most methods are straightforward, but aligning the numbers in the ellipse is somewhat tricky.

C#
protected virtual void PaintNumbers(Graphics g)
{
    double tmpAngle = StartAngle;
    for (double d = Min; d<= Max; d+= Interval)
    {
        String text = Math.Round(d, Decimals).ToString();
        PointF p = 
            CalcTextPosition(
            tmpAngle, MeasureText(g, text, Font, (int)numberRect.Width));
        if (ClockWise)
            tmpAngle -= NumberSpacing;
        else
            tmpAngle += NumberSpacing;
            g.DrawString(text, Font, new SolidBrush(ForeColor), p);
    }
}

The solution is to find the center point of the text and then calculate the offset based on the text's position in the ellipse and its dimensions.

C#
private PointF CalcTextPosition(double a, SizeF size)
{
    PointF p = PointInEllipse(numberRect, a);
    p.X -= (float)((size.Width/2)*(1 + Math.Cos(Convert.ToRadians(a))));
    p.Y -= (float)((size.Height/2)*(1 - Math.Sin(Convert.ToRadians(a))));
    return p;
}

The private method CalcTextPosition makes a call to PointInEllipse. This method calculates a point in an ellipse based on the angle and the size of the ellipse, which is simple math.

C#
private static PointF PointInEllipse(RectangleF rect , double angle)
{
    double r1 = rect.Width/2;
    double r2 = rect.Height/2;
    double x = 
        (float)(r1 * Math.Cos(Convert.ToRadians(angle))) + r1 + rect.X;
    double y = 
        -(float)(r2 * Math.Sin(Convert.ToRadians(angle))) + r2 + rect.Y;
    return new PointF((float)x, (float)y);
}

Using the code

To test the control, download the demo project and then build and run it. To change the appearance of the control, use the properties:

  • Interval - The interval between each number on the control; this is a floating point number.
  • Max - The maximum on the scale.
  • Min - The minimum on the scale.
  • StartAngle - The starting point in degrees.
  • StoreMax - Show the maximum stored value (red arrow).
  • StoredMax - The stored maximum.
  • TextDescription - Set the lower text displayed on the control.
  • TextUnit - Set the text to describe the Units used.
  • Value - The value and point of the arrow.
  • ArrowColor - The color of the arrow.
  • BackColor - The inner color of the control.
  • BarsBetweenNumbers - The number of lines between two displayed numbers. Note that the alignment of the lines is dependent on the properties NumberSpacing and Interval.
  • BorderWidth - The width of the outer border.
  • ClockWise - Lay the numbers out clockwise or counter-clockwise.
  • Decimals - The number of decimals displayed; default is 0.
  • NumberSpacing - The spacing between the numbers in degrees.

History

  • June 09, 2007: Initial release.
  • July 08, 2007:
    • Fixed missing dispose on some objects.
    • Fixed a bug where the designer would hang if the control was added from the toolbar.
    • Changed default text on Unit and Description property.
    • Added the layout section in this document.
    • Added a demo download.
    • Removed solution from source control.

License

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


Written By
Architect
Denmark Denmark
Name: Niel Morgan Thomas
Born: 1970 in Denmark
Education:
Dataengineer from Odense Technical University.
More than 20 years in IT-business.
Current employment:
Cloud architect at University College Lillebaelt

Comments and Discussions

 
Questionmfc version? Pin
Jason.LYJ20-Sep-15 23:19
professionalJason.LYJ20-Sep-15 23:19 
AnswerRe: mfc version? Pin
Niel M.Thomas21-Sep-15 0:10
professionalNiel M.Thomas21-Sep-15 0:10 
QuestionLicense Pin
Member 1031127231-Dec-13 1:51
Member 1031127231-Dec-13 1:51 
AnswerRe: License Pin
Niel M.Thomas31-Dec-13 2:15
professionalNiel M.Thomas31-Dec-13 2:15 
You can use the code (Control) for whatever purpose you may have.
You can not use the content of the article, but you may refer to it.
[With best regards ]
[Niel M. Thomas ]



Generalvery very useful Pin
batsword7-Nov-10 18:41
batsword7-Nov-10 18:41 
GeneralRe: very very useful Pin
Niel M.Thomas7-Nov-10 19:17
professionalNiel M.Thomas7-Nov-10 19:17 
GeneralRe: very very useful Pin
batsword11-Nov-10 15:02
batsword11-Nov-10 15:02 
GeneralRe: very very useful Pin
Jason.LYJ20-Sep-15 23:22
professionalJason.LYJ20-Sep-15 23:22 
GeneralMy vote of 4 Pin
Member 366671421-Jul-10 1:39
Member 366671421-Jul-10 1:39 
GeneralKudos, and more kudos Pin
jon_sigler30-Dec-08 16:42
jon_sigler30-Dec-08 16:42 
GeneralVisual Studio 6 Pin
CodeHead27-Feb-08 3:13
CodeHead27-Feb-08 3:13 
GeneralRe: Visual Studio 6 Pin
The Cake of Deceit14-Sep-08 2:31
The Cake of Deceit14-Sep-08 2:31 
GeneralPrograming style suggestions! Pin
Martin#16-Jul-07 23:53
Martin#16-Jul-07 23:53 
AnswerRe: Programing style suggestions! Pin
Niel M.Thomas18-Jul-07 1:06
professionalNiel M.Thomas18-Jul-07 1:06 
GeneralRe: Programing style suggestions! Pin
Martin#18-Jul-07 1:13
Martin#18-Jul-07 1:13 
GeneralRe: Programing style suggestions! Pin
Michal Brylka19-Jul-07 9:31
Michal Brylka19-Jul-07 9:31 
GeneralMessage Closed Pin
24-Jun-08 2:32
Jani MK24-Jun-08 2:32 
GeneralRe: Programing style suggestions! Pin
Martin#24-Jun-08 7:04
Martin#24-Jun-08 7:04 
QuestionAm I doing something wrong? Pin
rob.iles29-Jun-07 11:36
rob.iles29-Jun-07 11:36 
GeneralRe: Am I doing something wrong? Pin
rob.iles30-Jun-07 12:44
rob.iles30-Jun-07 12:44 
QuestionVery cool, but... Pin
The Marshal20-Jun-07 19:28
The Marshal20-Jun-07 19:28 
AnswerRe: Very cool, fixed Pin
Niel M.Thomas20-Jun-07 20:43
professionalNiel M.Thomas20-Jun-07 20:43 
AnswerRe: Very cool, but... Pin
Kevin Gallagher21-Jun-07 6:03
Kevin Gallagher21-Jun-07 6:03 
GeneralGood control Pin
nitikin19-Jun-07 1:20
nitikin19-Jun-07 1:20 
GeneralGreat Control Pin
merlin98112-Jun-07 3:14
professionalmerlin98112-Jun-07 3:14 

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

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