Industrial Controls 2

Luca Bonotto

4.92/5 (131 votes)

May 1, 2009

CPOL

10 min read

248398

30045

A library of controls with a custon renderer for use in the controls processes panel display

Introduction

In my previous article, I created the first version of this library with basic controls and functionalities. Now, I thought of adding more controls to the library in order to be able to use it in the creation of form to control process or for several reasons.

To compile this demo, you need .NET 2.0. which is available here. The project is developed with SharpDevelop, a free IDE per .NET, but it is possible to use the VCS 2008 express edition.

Controls Description

In this version of the library, I include these types of controls:

Visualization controls:
- Leds
- Display
- Meters
Commands controls:
- Buttons
- Knobs

All controls are derived from LBSoft.IndustrialCtrls.Base.LBIndustrialCtrlBase, and have a category where you can edit the properties, as well as those by default. Normally all the classes have a default renderer class that are used to draw all parties, but it is possible to set a custom renderer to draw a single part, or the entire control.

Library Namespaces

LBSoft.IndustrialCtrls.Base

In this namespace, there are the base classes to create all the controls and the renderers in the library. The base classes are:

LBIndustrialCtrlBase is the base class for the controls
LBRendererBase is the base class for the renderers

LBIndustrialCtrlBase

This class is derived from UserControl. This class contains various virtual methods and properties to manage the data and the events in the control. The virtual methods in the class are:

IRenderer CreateDefaultRenderer() - This method is called from the constructor to create the default renderer af the control.
void CalculateDimensions() - This method is called from the constructor to update the data in the associated renderer class or the default renderer.

The properties of the class are:

IRenderer DefaultRenderer - Get the default renderer of the control
IRenderer Renderer - Get or set the custom renderer of the control

LBRendererBase

This class is the base class for the renderers and implements the ILBRenderer interface. This class contains various virtual methods and properties to draw the control. The virtual methods in the class are:

void Draw( Graphics gr ) - This method is called when the paint message requires the control redraw.
void Update() - This method is called from the CalculateDimensions() method of the control to update the drawing data in the renderer.

The properties of the class are:

object Control - Get or set the control associated to the renderer

LBSoft.IndustrialCtrls.Leds

In this namespace, there are the controls that simulate a led for the visualization of a state and a 7 segments display to view a value.

LBLed

Led image

For this class, you can set the following properties at design time:

Led Properties

LedColor- Color of the led. The code modifies the color to simulate the dark side.
LedSize- Size of the led. You can set different width and height to change the appearance of control.
Style- Style of the led. The type of this property is LedStyle and the available values are:
- Circular
- Rectangular
State - State of the led. The type of this property is LedState and the available values are:
- Off
- On
- Blink
LabelPosition - Position of the label of the control. The type of this property is LedLabelPosition and the available values are:
- Left
- Top
- Right
- Bottom
Label - Text of the label of the control
BlinkInterval - Interval in milliseconds for the blink state change

There are two properties that are not visible at the design time, and are:

BlinkIsOn - Flag for the current state of the blink state

LB7SegmentDisplay

For this class, you can set the following properties at a design time:

Display Properties

ShowDP - Show or hide the point of the display
Value - Set the value of the display

To change the colors of the controls, use the BackColor and the ForeColor properties.

LBSoft.IndustrialCtrls.Meters

In this namespace, there are the controls that simulate meters (analog or digital) to view a value

LBDigitalMeter

For this class, you can set the following properties at design time:

Digital Meter Properties

Signed - Set the sign of the display. If it is set to true, the display views signed values
Format - Set the format of the value to display. An example of this format is 0000.00. In this mode, the display value is like the image.
Value - Set the value of the meter.

Like the LB7SegmentDisplay, to change the colors of the controls, use the BackColor and the ForeColor properties.

LBAnalogMeter

For this class, you can set the following properties at design time:

Analog Meter Properties:

MeterStyle - Style of the control. The type of this property is AnalogMeterStyle and the available values are:
- Circular
BodyColor - Color of the body of the control
NeedleColor - Color of the needle of the control
ScaleColor - Color of the thicks of the control scale
ScaleDivisions - Number of main division of the scale
ScaleSubDivisions - Number of the sub-division between a main division to another of the scale
ViewGlass - Flag for the visualization of the glass effect
Value - Current value of the control
MinValue - Minimum value of the control
MaxValue - Maximum value of the control

There are two properties that are not visible at design time, and are:

Thresholds - Collection of LBMeterThreshold objects.

The class LBMeterThreshold is used to draw the threshold in the meters control, for viewing when the measure has a critical value. This class has the following properties:

Color - Color of the threshold
StartValue - Value from the threshold start
EndValue - Value to the threshold end

This is an example of how to set the threshold in the meters controls:

	...
	
	public void SetThresholds()
	{
		LBMeterThreshold threshold = new LBMeterThreshold();
		threshold.Color = Color.Yellow;
		threshold.StartValue = 50;
		threshold.EndValue = 70;
		this.lbAnalogMeter1.Thresholds.Add ( threshold );
		
		threshold = new LBMeterThreshold();
		threshold.Color = Color.Red;
		threshold.StartValue = 70;
		threshold.EndValue = 100;
		this.lbAnalogMeter1.Thresholds.Add ( threshold );
	}
	
	...

LBSoft.IndustrialCtrls.Buttons

In this namespace, there are the controls that simulate a button to send a command. At the moment, there is only the class LBButton.For this class, you can set the following properties at design time:

Button Properties

Style - Style of the control. The type of this property is ButtonStyle and the available values are:
- Circular
- Rectangular
- Elliptical
ButtonColor - Color of the button
Label - Label of the button
State - State of the button. The type of this property is ButtonState and the available values are:
- Normal
- Pressed
RepeatState - Repeat state of the button. With this state set to true, the button sends an event every interval set to the repeat properties
StartRepeatInterval - The first repeat interval in milliseconds
RepeatInterval - The repeat interval in milliseconds

Events

This control, when the state changes, fires up an event to inform the connected class. This event is:

ButtonChangeState ( object sender, LBButtonEventArgs e );

The property State of the event arguments is the current state of the button.

LBSoft.IndustrialCtrls.Knobs

In this namespace, there are the controls that simulate knob to change a value (like a slider). At the moment, there is only the class LBKnob. For this class, you can set the following properties at design time.

Knob Properties

Style - Style of the control. The type of this property is KnobStyle and the available values are:
- Circular
KnobColor - Color of the knob
ScaleColor - Color of the scale of the knob
IndicatorColor - Color of the indicator of the current value
IndicatorOffset - Offset of the indicator behind the edge of the knob
MinValue - Minimum value of the knob
MaxValue - Maximum value of the knob
StepValue - Step value when the keyboard is used
Value - Current value of the knob

Like the previous controls, there are properties that are not visible at design time:

KnobCenter - Center point of the control.

Events

This control, when the state changes, fires up an event to inform the connected class. This event is:

KnobChangeValue ( object sender, LBKnobEventArgs e );

The property Value of the event arguments is the current value of the knob.

LBSoft.IndustrialCtrls.Utils

In this namespace, there are two classes with only static members for common use:

LBColorManager - Class for handling colors
LBMath - Class for mathematical functions used in the library

Renderers Description

Now is the time to explain how to create the custom renderers. Any control has a base renderer class, the default renderer. All the default renderer classes are derived from LBRendererBase. All the methods for drawing a part of the control in the renderer class are virtual and if you want to change the aspect of the control, it is possible to override one or all methods. The schema of the renderers classes is this:

The renderers available for the controls are:

LBLedRenderer - This class allows you to be able to redesign the appearance of control LBLed and has the following methods:

DrawBackground - Method to draw a control background
DrawLed - Method to draw the led
DrawLabel - Method to draw the label of the control

LB7SegmentDisplayRenderer - This class allows you to be able to redesign the appearance of control LB7SegmentDisplay and has the following methods:

DrawBackground - Method to draw a control background
DrawOffSegments - Method to draw the off segments
DrawValue - Method to draw the value of the control

LBDigitalMeterRenderer - This class allows you to be able to redesign the appearance of control LBDigitalMeterRenderer and has the following methods:

DrawBackground - Method to draw a control background
DrawBorder - Method to draw the border of the control (Not yet implemented)

LBAnalogMeterRenderer - This class allows you to be able to redesign the appearance of control LBAnalogMeter and has the following methods:
- DrawBackground - Method to draw a control background
- DrawBody - Method to draw the body of the analog meter
- DrawThresholds - Method to draw the thresholds sections
- DrawDivisions - Method to draw the scale
- DrawUM - Method to draw the label of the unit (not yet implemented)
- DrawValue - Method to draw the label of the current value (not yet implemented)
- DrawNeedle - Method to draw the needle
- DrawNeedleCover - Method to draw the needle cover
- DrawGlass - Method to draw the glass effect
LBButtonRenderer - This class allows you to be able to redesign the appearance of control LBButton and has the following methods:
- DrawBackground - Method to draw a control background
- DrawBody - Method to draw the body of the control
- DrawText - Method to draw the label of the control
LBKnobRenderer - This class allows you to be able to redesign the appearance of control LBKnob and has the following methods:

DrawBackground - Method to draw a control background
DrawScale - Method to draw the scale of the knob
DrawKnob - Method to draw the body of the knob
DrawKnobIndicator - Method to draw the indicator of the current value

To create a custom renderer, you follow these steps:

Create a class derived from a base class renderer (Example: LBLedRenderer)
Override one or all methods (Example: DrawLed)
Create an instance of the custom renderer in the main form
Set the renderer to the control with the property Renderer

Example:

namespace TestApp
{
	///
	/// Class for custom renderer
	///
	public class LBCustomLedRenderer : LBLedRenderer
	{
		///
		/// Draw a rectangular led
		///
		public virtual bool DrawLed( Graphics Gr, RectangleF rc )
		{
			if ( this.Led == null )
				return false;
	
			Color c = this.Led.LedColor;
			SolidBrush br = new SolidBrush ( c );
			Pen pen = new Pen ( c );
			
			Gr.DrawRectangle ( pen, rc );
			Gr.FillRectangle ( br, rc );
			
			br.Dispose();
			pen.Dispose();
			
			return true;
		}
	}
	
	public partial class MainForm : Form
	{
		private LBCustomLedRenderer myRenderer = null;
		
		public MainForm()
		{
			InitializeComponent();
			
			this.myRenderer = new LBCustomLedRenderer();
			this.lbLed1.Renderer = this.myRenderer;
		}
		
		...
	}			
}

Conclusion

Like the first version of the library, many features have yet to be implemented, and I hope to do so soon. Any suggestions/comments/feedback are highly appreciated.

For this article, I use the code and the idea of the following articles:

History

1.0 (09 Apr 2008)
- Initial release
2.0 (02 May 2009)
- Created a base class LBIndustrialCtrlBase to derive all the controls classes.
- Created a base class LBRendererBase to derive all the renderers classes. This class has a ILBRenderer interface.
- Inserted two new controls:
  - LB7SegmentDisplay
  - LBDigitalMeter
- Rewrote all the controls and renderers classes to use the base classes
- Defined a new state 'Rectangular' for the led
- Defined new states 'Rectangular' ad 'Elliptical' for the button
2.1 (21 Feb 2010)
- Inserted new features for the button controls. Now it is possible to get a repetition event when the button is pressed.
- Corrected the off color of the LB7SegmentDisplay for a better visualization