NextUI Meter Panel

• Download NextUI demo source - 230.98 KB
• Download Speedometer demo - 147.24 KB

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
	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
	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
	DisplayFont	The font that is used to display the label
	GapWidth	Determine how wide the gap is in angle.
	InnerBorderRing	Set to true will show an inner circle border, by default it is true
	LabelFontColor	Use this to set the color of the font, the font is used to display the label
	Labels	It returns a collection that allows user to add a meterlabel. "Image" property for this control is currently not supported.
	Number	The Value to be shown in the control, the minimum and maximum depends on the "Value" property of Meterlabel.
	PointerColor	The color of the pointer, by default it is red.
	PointerHandleColor	The color of the pointer base.
	StartGapAngle	Provides the starting angle of gap, measure from the positive x axis.

MeterLabel class defines the property of each label.

	Name	Description
	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.
	Image	Used to show an Image for the label, Note: This control does not support Image and thus setting this value has no effect.
	MainColor	This is used to determine the color of the shade between label
	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