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

Industrial Controls 2

, 21 Feb 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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

LBIndustrialCtrls_6.png

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

LBIndustrialCtrls_7.png

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

LBIndustrialCtrls_3.png

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

LBIndustrialCtrls_4.png

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

LBIndustrialCtrls_5.png

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:

LBIndustrialCtrls_8.png

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

License

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

Share

About the Author

Luca Bonotto
Software Developer (Senior)
Italy Italy
Software developer with over 10 years of experience, specializing in GUI designs in MFC/C++ and C#.


Company : Promax S.r.l.


Comments and Discussions

 
GeneralMy vote of 3 PinmemberMario M.10-Sep-13 7:18 
GeneralMy vote of 5 Pinmemberclaudiotronic29-May-13 12:40 
QuestionSeems to crash VS2010 Pinmemberjbmckim8-May-13 14:01 
QuestionCompact Framework PinmemberJochen1980NEU25-Mar-13 23:40 
GeneralMy vote of 5 PinmemberJochen1980NEU25-Mar-13 23:37 
QuestionGreat job, some suggestions Pinmembers6carlo18-Feb-13 6:05 
QuestionThe controls are brilliant ... but is there a Web Forms version available? PinmemberReg Hammond31-Dec-12 0:19 
QuestionDrawValue code [modified] PinmemberKD0YU15-Dec-12 3:41 
GeneralMy vote of 5 PinmemberKD0YU15-Dec-12 3:22 
QuestionC++ Version in need for greedy programmers like me PinmemberMember 870962119-Nov-12 21:48 
AnswerRe: C++ Version in need for greedy programmers like me PinmemberLuca Bonotto24-Nov-12 2:00 
GeneralRe: C++ Version in need for greedy programmers like me Pinmemberlanmanck21-Jul-13 15:41 
QuestionGreat Library, but I found a bug PinmemberDLChambers3-Oct-12 17:16 
GeneralMy vote of 5 PinmemberVitaly Tomilov10-Jun-12 8:57 
QuestionInvokeRequired not working... PinmemberIntelMacDeveloper27-Feb-12 13:52 
GeneralMy vote of 5 Pinmemberbearking781123-Dec-11 19:06 
QuestionASP Version Pinmemberbchen21-Jun-11 10:48 
Very nice control! Do you have ASP version?
Generalthank you,my vote of 5 Pinmemberyardloun4-Apr-11 17:12 
GeneralRotary Encoder Knob Pinmembert8r5-Feb-11 11:25 
GeneralMy vote of 5 PinmemberFishbox31-Jan-11 10:47 
Questioncompatible to .NET Compact Framework ? PinmemberReinhard Bosch15-Sep-10 23:28 
AnswerRe: compatible to .NET Compact Framework ? PinmemberLuca Bonotto18-Sep-10 3:05 
QuestionUse of Custom Renderer for AnalogMeter PinmemberArchman42013-Aug-10 1:29 
AnswerRe: Use of Custom Renderer for AnalogMeter PinmemberArchman42013-Aug-10 1:49 
Questiondoubt PinmemberArchman42029-Jul-10 6:40 

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
Web03 | 2.8.141223.1 | Last Updated 21 Feb 2010
Article Copyright 2009 by Luca Bonotto
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid