Click here to Skip to main content
Click here to Skip to main content

NextUI Meter Panel

, 23 Oct 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
A speedometer like control
Screenshot - speedodemo.jpg

Introduction

Presentation layer is always an important aspect of a software, NextUI provides a list of unique controls in the hope that it is useful to someone.

Background

This control provides a speedometer like panel that is easy to use and configure.

Using the Code

This control has a few properties to be configured:

Name Description
Public property BackGrdColor Set the background color of the control, the color is used to paint the back ground as a linear gradient brush.
To fill a solid color, consider using an image
Public property BackGroundImage Use this to set the background, for example, you can set the background to solid color by setting this image to solid color image
Public property DisplayFont The font that is used to display the label
Public property GapWidth Determine how wide the gap is in angle.
Public property InnerBorderRing Set to true will show an inner circle border, by default it is true
Public property LabelFontColor Use this to set the color of the font, the font is used to display the label
Public property Labels It returns a collection that allows user to add a meterlabel. "Image" property for this control is currently not supported.
Public property Number The Value to be shown in the control, the
minimum and maximum depends on the "Value" property of Meterlabel.
Public property PointerColor The color of the pointer, by default it is red.
Public property PointerHandleColor The color of the pointer base.
Public property StartGapAngle Provides the starting angle of gap, measure from the positive x axis.

MeterLabel class defines the property of each label.

Name Description
Public property Desc This property is used for the actual text display for a label. You can set Desc to "Hello", but Value to 10, so this label will be displayed as Hello but the numerical 10 will be the actual representation of the label.
Public property Image Used to show an Image for the label, Note: This control
does not support Image and thus setting this value has no effect.
Public property MainColor This is used to determine the color of the shade between label
Public property Value Value is the actual numeric value of the label. It is the actual value that will be raised when meter label is used for control like knob. It is also the actual value that is used to calculate the position of the pointer.

Example 1

The code snippet below is extracted from the sample code, and will generate a control that looks like the one below. Take note that this control does not support "Image" property of meterlabel, so setting the Image property will have no effect.

this.pointerMeter1.BackGrdColor = System.Drawing.Color.LightGray;
this.pointerMeter1.BackGroundImage = null;
this.pointerMeter1.DisplayFont = new System.Drawing.Font("Courier New", 9.75F, 
System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.pointerMeter1.GapWidth = 20F ; 
this.pointerMeter1.InnerBorderRing = true;
this.pointerMeter1.LabelFontColor = System.Drawing.Color.RosyBrown;
this.pointerMeter1.Number = 0;
this.pointerMeter1.PointerColor = System.Drawing.Color.RosyBrown;
this.pointerMeter1.PointerHandleColor = System.Drawing.Color.DimGray;
this.pointerMeter1.StartGapAngle = 80F;
MeterLabel m0 = new MeterLabel(0, "0");
m0.MainColor = Color.Blue;
MeterLabel m1 = new MeterLabel(1000,"1");
m1.MainColor = Color.Blue;
MeterLabel m2 = new MeterLabel(2000,"2");
m2.MainColor = Color.Blue;
MeterLabel m3 = new MeterLabel(3000,"3");
m3.MainColor = Color.Blue;
MeterLabel m4 = new MeterLabel(4000,"4");
m4.MainColor = Color.Blue;
MeterLabel m5 = new MeterLabel(5000, "5");
m5.MainColor = Color.Blue;
MeterLabel m6 = new MeterLabel(6000,"6");
MeterLabel m7 = new MeterLabel(7000,"7");
MeterLabel m8 = new MeterLabel(8000,"8");
MeterLabel m9 = new MeterLabel(9000,"9");
this.pointerMeter1.Labels.Add(m0);
this.pointerMeter1.Labels.Add(m1);
this.pointerMeter1.Labels.Add(m2);
this.pointerMeter1.Labels.Add(m3);
this.pointerMeter1.Labels.Add(m4);
this.pointerMeter1.Labels.Add(m5);
this.pointerMeter1.Labels.Add(m6);
this.pointerMeter1.Labels.Add(m7);
this.pointerMeter1.Labels.Add(m8);
this.pointerMeter1.Labels.Add(m9);

Example 2

The code snippet below is extracted from the sample code. See how a background Image can affect the look and feel of the control. Another thing to take note is the StartGapAngle and GapWidth. In this case, you can notice a small gap within the inner circle, starting from 80 degree from x axis, with 20 degree wide gaps.

this.pointerMeter2.BackGrdColor = System.Drawing.Color.Gray;
this.pointerMeter2.BackGroundImage = 
	global::SpeedometerDemo.Properties.Resources.speeddemo3;
this.pointerMeter2.DisplayFont = new System.Drawing.Font("Courier New", 8.25F, 
<bsystem.drawing.fontstyle.bold>
this.pointerMeter2.GapWidth = 20F; 
this.pointerMeter2.InnerBorderRing = true;
this.pointerMeter2.LabelFontColor = System.Drawing.Color.White;
this.pointerMeter2.Number = 0;
this.pointerMeter2.PointerColor = System.Drawing.Color.White;
this.pointerMeter2.PointerHandleColor = System.Drawing.Color.White;
this.pointerMeter2.StartGapAngle = 80F;
MeterLabel m0 = new MeterLabel(0, "0");
m0.MainColor = Color.Blue;
MeterLabel m1 = new MeterLabel(1000,"1");
m1.MainColor = Color.Blue;
MeterLabel m2 = new MeterLabel(2000,"2");
m2.MainColor = Color.Blue;
MeterLabel m3 = new MeterLabel(3000,"3");
m3.MainColor = Color.Blue;
MeterLabel m4 = new MeterLabel(4000,"4");
m4.MainColor = Color.Blue;
MeterLabel m5 = new MeterLabel(5000, "5");
m5.MainColor = Color.Blue;
MeterLabel m6 = new MeterLabel(6000,"6");
MeterLabel m7 = new MeterLabel(7000,"7");
MeterLabel m8 = new MeterLabel(8000,"8");
MeterLabel m9 = new MeterLabel(9000,"9");
this.pointerMeter2.Labels.Add(m0);
this.pointerMeter2.Labels.Add(m1);
this.pointerMeter2.Labels.Add(m2);
this.pointerMeter2.Labels.Add(m3);
this.pointerMeter2.Labels.Add(m4);
this.pointerMeter2.Labels.Add(m5);
this.pointerMeter2.Labels.Add(m6);
this.pointerMeter2.Labels.Add(m7);
this.pointerMeter2.Labels.Add(m8);
this.pointerMeter2.Labels.Add(m9);

Example 3

The code snippet below is extracted from the sample code. Notice how the control turns into a half circle by setting StartGapAngle = 0 and GapWidth = 180.
By setting InnerBorderRing = FALSE, it turns off the inner border.

this.pointerMeter4.BackGrdColor = System.Drawing.Color.LightGray;
this.pointerMeter4.BackGroundImage = 
	global::SpeedometerDemo.Properties.Resources.speeddemo4;
this.pointerMeter4.DisplayFont = new System.Drawing.Font("Courier New", 8F);
this.pointerMeter4.GapWidth = 180F;
this.pointerMeter4.InnerBorderRing = false;
this.pointerMeter4.LabelFontColor = System.Drawing.Color.RosyBrown;
this.pointerMeter4.Number = 0;
this.pointerMeter4.PointerColor = System.Drawing.Color.RosyBrown;
this.pointerMeter4.PointerHandleColor = System.Drawing.Color.DimGray;
this.pointerMeter4.StartGapAngle = 0F;
MeterLabel m0 = new MeterLabel(0, "0");
m0.MainColor = Color.Blue;
MeterLabel m1 = new MeterLabel(1000,"1");
m1.MainColor = Color.Blue;
MeterLabel m2 = new MeterLabel(2000,"2");
m2.MainColor = Color.Blue;
MeterLabel m3 = new MeterLabel(3000,"3");
m3.MainColor = Color.Blue;
MeterLabel m4 = new MeterLabel(4000,"4");
m4.MainColor = Color.Blue;
MeterLabel m5 = new MeterLabel(5000, "5");
m5.MainColor = Color.Blue;
MeterLabel m6 = new MeterLabel(6000,"6");
MeterLabel m7 = new MeterLabel(7000,"7");
MeterLabel m8 = new MeterLabel(8000,"8");
MeterLabel m9 = new MeterLabel(9000,"9");
this.pointerMeter4.Labels.Add(m0);
this.pointerMeter4.Labels.Add(m1);
this.pointerMeter4.Labels.Add(m2);
this.pointerMeter4.Labels.Add(m3);
this.pointerMeter4.Labels.Add(m4);
this.pointerMeter4.Labels.Add(m5);
this.pointerMeter4.Labels.Add(m6);
this.pointerMeter4.Labels.Add(m7);
this.pointerMeter4.Labels.Add(m8);
this.pointerMeter4.Labels.Add(m9);

Points of Interest

This control is still in development. If you have any cool enhancements that you would like to suggest, please send me an email at sllow@nextwavesoft.com.

History

  • Initial beta release 0.9

License

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

Share

About the Author

Steve-Low-NextwaveSoft
Software Developer (Senior) www.nextwavesoft.com
United States United States
Senior Software Developer at nextwavesoft

Comments and Discussions

 
GeneralThanks Pinmembernmbal5-Jan-14 4:28 

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
Web02 | 2.8.1411023.1 | Last Updated 24 Oct 2007
Article Copyright 2007 by Steve-Low-NextwaveSoft
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid