NextUI Thermometer Panel

Steve-Low-NextwaveSoft

Rate me:

3.56/5 (15 votes)

23 Oct 20073 min read

32.3K

2.8K

a thermometer like display

Introduction

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

Background

This control provides a thermometer like panel that is easy to use and configured .

Using the code

This Control has few property to be configured

	Name	Description
	Alignment	Set the alignment , it can be left ,right or center
	BackGrdColor	Use this to set the background , for example , you can set the background to solid color by setting this image to solid color image
	BackGroundImage	Use this to set the background Image , for example , you can set the background to solid color by setting this image to solid color image
	Flip	The direction of the label , it can be left, which means the label will display on the left hand side , or right , which mean label will be displayed on the right hand side.
	IndicatorColor	The color of the indicator
	Label	return the collection of MeterLabel
	LabelFont	The font that will be used to display the label
	LabelFontColor	The color of the Font label
	Marking	This property is used to set the marking. Line will display a line as a marking using the color of the font Cont will provide a color shade between 2 marking using the "color" property of MeterLabel Both will display Line as well as the shade None will not display anything
	Number	The Value to be shown in the control , the minimum and maximum depends on the "Value" property of Meterlabel.

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.
	MainColor	This is used to determined 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 calculated the position of the pointer .

Example 1:

The Code snippet below is extracted from the sample code , and will generated a control
that looks like the one on the left
The Marking is set to both , so you can see both line as well as a shade
which depends on the "Color" property of meterLabel.

this.thermoDisplay1.Alignment = NextUI.Display.ThermoPanel.Alignment.left;

this.thermoDisplay1.BackGrdColor = System.Drawing.Color.Black;

this.thermoDisplay1.BackGroundImage = global::MeterDemo.Properties.Resources.themo1;

this.thermoDisplay1.Flip = NextUI.Display.ThermoPanel.Flip.right;

this.thermoDisplay1.IndicatorColor = System.Drawing.Color.Red;

this.thermoDisplay1.LabelFont = new System.Drawing.Font("Courier New", 7F, System.Drawing.FontStyle.Bold);

this.thermoDisplay1.LabelFontColor = System.Drawing.Color.White;

this.thermoDisplay1.Marking = NextUI.Display.ThermoPanel.Marking.BOTH;

this.thermoDisplay1.Number = 0;

MeterLabel m1 = new MeterLabel(-10, "-10");

m1.MainColor = Color.AliceBlue;

MeterLabel m2 = new MeterLabel(-5, "-5");

m2.MainColor = Color.LightBlue;<img style="border: 2px solid rgb(0, 0, 0); margin: 5px; float: left;" src="NextUIThemoPanel/thermodemo1.jpg" />

MeterLabel m3 = new MeterLabel(0, "0");

m3.MainColor = Color.Blue;

MeterLabel m4 = new MeterLabel(5, "5");

MeterLabel m5 = new MeterLabel(10, "10");

MeterLabel m6 = new MeterLabel(15, "15");

MeterLabel m7 = new MeterLabel(20, "20");

MeterLabel m8 = new MeterLabel(30, "30");

MeterLabel m9 = new MeterLabel(40, "40");

MeterLabel m10 = new MeterLabel(50, "50");

m10.MainColor = Color.LightYellow;

MeterLabel m11 = new MeterLabel(60, "60");

m11.MainColor = Color.Yellow;

MeterLabel m12 = new MeterLabel(70, "70");

m12.MainColor = Color.Orange;

this.thermoDisplay1.Label.Add(m1);

this.thermoDisplay1.Label.Add(m2);

this.thermoDisplay1.Label.Add(m3);

this.thermoDisplay1.Label.Add(m4);

this.thermoDisplay1.Label.Add(m5);

this.thermoDisplay1.Label.Add(m6);

this.thermoDisplay1.Label.Add(m7);

this.thermoDisplay1.Label.Add(m8);

this.thermoDisplay1.Label.Add(m9);

this.thermoDisplay1.Label.Add(m10);

this.thermoDisplay1.Label.Add(m11);

this.thermoDisplay1.Label.Add(m12);

Example 2:

The Code snippet below is extracted from the sample code ,
The Marking is set to Cont, so there is only shading but no line

this.thermoDisplay2.Alignment = NextUI.Display.ThermoPanel.Alignment.left;

this.thermoDisplay2.BackGrdColor = System.Drawing.Color.LightGray;

this.thermoDisplay2.BackGroundImage = null;

this.thermoDisplay2.Flip = NextUI.Display.ThermoPanel.Flip.right;

this.thermoDisplay2.IndicatorColor = System.Drawing.Color.DarkBlue;

this.thermoDisplay2.LabelFont = new System.Drawing.Font("Courier New", 7F);

this.thermoDisplay2.LabelFontColor = System.Drawing.Color.Black;

this.thermoDisplay2.Marking = NextUI.Display.ThermoPanel.Marking.CONT;

this.thermoDisplay2.Name = "thermoDisplay2";

this.thermoDisplay2.Number = 0;<img style="border: 2px solid rgb(0, 0, 0); margin: 5px; float: left;" src="NextUIThemoPanel/thermodemo2.jpg" />

MeterLabel m1111 = new MeterLabel(-10, "-10");

m1111.MainColor = Color.Blue;

MeterLabel m1211 = new MeterLabel(-5, "-5");

m1211.MainColor = Color.Blue;

MeterLabel m13 = new MeterLabel(0, "0");

m13.MainColor = Color.Blue;

MeterLabel m14 = new MeterLabel(5, "5");

MeterLabel m15 = new MeterLabel(10, "10");

MeterLabel m16 = new MeterLabel(15, "15");

MeterLabel m17 = new MeterLabel(20, "20");

MeterLabel m18 = new MeterLabel(30, "30");

MeterLabel m19 = new MeterLabel(40, "40");

MeterLabel m110 = new MeterLabel(50, "50");

MeterLabel m111 = new MeterLabel(60, "60");

MeterLabel m112 = new MeterLabel(70, "70");

this.thermoDisplay2.Label.Add(m1111);

this.thermoDisplay2.Label.Add(m1211);

this.thermoDisplay2.Label.Add(m13);

this.thermoDisplay2.Label.Add(m14);

this.thermoDisplay2.Label.Add(m15);

this.thermoDisplay2.Label.Add(m16);

this.thermoDisplay2.Label.Add(m17);

this.thermoDisplay2.Label.Add(m18);

this.thermoDisplay2.Label.Add(m19);

this.thermoDisplay2.Label.Add(m110);

this.thermoDisplay2.Label.Add(m111);

this.thermoDisplay2.Label.Add(m112);

Example 3:

This code set Flip to Left and shift the alignment to right , so that the label can be shown .
one thing that is special is the image , which is displayed when you set the "Image" property of MeterLabel.
Another thing to take note is how "0" is being adjusted to align with the other label by setting
"Desc" property of MeterLabel to " 0".

this.thermoDisplay3.Alignment = NextUI.Display.ThermoPanel.Alignment.right;

this.thermoDisplay3.BackGrdColor = System.Drawing.Color.LightGray;

this.thermoDisplay3.BackGroundImage = global::MeterDemo.Properties.Resources.themo6;

this.thermoDisplay3.Flip = NextUI.Display.ThermoPanel.Flip.Left;

this.thermoDisplay3.IndicatorColor = System.Drawing.Color.DarkBlue;

this.thermoDisplay3.LabelFont = new System.Drawing.Font("Courier New", 9F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));

this.thermoDisplay3.LabelFontColor = System.Drawing.Color.White;

this.thermoDisplay3.Marking = NextUI.Display.ThermoPanel.Marking.BOTH;

this.thermoDisplay3.Name = "thermoDisplay3";

this.thermoDisplay3.Number = 0;<img style="border: 2px solid rgb(0, 0, 0); margin: 5px; float: left;" src="NextUIThemoPanel/thermodemo3.jpg" />

MeterLabel m11111 = new MeterLabel(-10, "-10");

m11111.MainColor = Color.Blue;

MeterLabel m12111 = new MeterLabel(-5, "-5");

m12111.MainColor = Color.Blue;

MeterLabel m131 = new MeterLabel(0, "  0");

m131.MainColor = Color.Blue;

MeterLabel m141 = new MeterLabel(5, "5");

MeterLabel m151 = new MeterLabel(10, " 10");

MeterLabel m161 = new MeterLabel(15, "15");

MeterLabel m171 = new MeterLabel(20, " 20");

MeterLabel m181 = new MeterLabel(30, "30");

m11111.Image = global::MeterDemo.Properties.Resources.themo2;

this.thermoDisplay3.Label.Add(m11111);

this.thermoDisplay3.Label.Add(m12111);

this.thermoDisplay3.Label.Add(m131);

m131.Image = global::MeterDemo.Properties.Resources.themo3;

this.thermoDisplay3.Label.Add(m141);

this.thermoDisplay3.Label.Add(m151);

m151.Image = global::MeterDemo.Properties.Resources.themo4;

this.thermoDisplay3.Label.Add(m161);

this.thermoDisplay3.Label.Add(m171);

m171.Image = global::MeterDemo.Properties.Resources.themo5;

this.thermoDisplay3.Label.Add(m181);

Points of Interest

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

History

Initial beta release 0.9

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Steve-Low-NextwaveSoft

Software Developer (Senior) www.nextwavesoft.com

United States

Senior Software Developer at nextwavesoft