Industrial Controls






4.61/5 (28 votes)
A library of controls with a custon renderer for use in the controls processes panel display
Introduction
In my previous article , I created an analog meter with a custom renderer. Now I thought to add more controls to the library in order to be able to use it for the creation of forms to control a process or for other various 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.
Controls Decription
In this version of the library, I include these types of control:
- Visualization controls:
- Leds
- Meters
- Commands controls:
- Buttons
- Knobs
All controls are derived from System.Windows.Forms.UserControl
, 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 is used for draw all parties, but is possible to set a custom renderer to draw a single part, or the entire control.
Library Namespaces
LBSoft.IndustrialCtrls.Leds
In this namesapace there are the controls that simulate a led for the visualization of a state. At the moment, there is only the class LBLed.
For this class you can set the following properties at a design time:
Led Properties
LedColor
- Color of the led. The code modify 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.State
- State of the led. The type of this property isLedState
and the available values are:Off
On
Blink
LabelPosition
- Position of the label of the control. The type of this property isLedLabelPosition
and the available values are:Left
Top
Right
Bottom
Label
- Text of the label of the controlBlinkInterval
- Interval in milliseconds for the blink state change
There are two properties that are not visible at the design time, and are:
Renderer
- Custom renderer of the control.BlinkIsOn
- Flag for the current state of the blink state
LBSoft.IndustrialCtrls.Meters
In this namesapace there are the controls that simulate a meters (analog or digital) to view a value. At the moment, there is only the class LBAnalogMeter.
For this class you can set the following properties at a design time:
Analog Meter Properties
MeterStyle
- Style of the control. The type of this property isAnalogMeterStyle
and the available values are:Circular
BodyColor
- Color of the body of the control.NeedleColor
- Color of the needle of the controlScaleColor
- Color of the thicks of the control scaleScaleDivisions
- Number of main division of the scaleScaleSubDivisions
- Number of the sub-division between a main division to an other of the scaleViewGlass
- Flag for the visualization of the glass effectValue
- Current value of the controlMinValue
- Minimum value of the controlMaxValue
- Maximum value of the control
There are two properties that are not visible at the design time, and are:
Renderer
- Custom renderer of the control.Thresholds
- Collection ofLBMeterThreshold
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 thresholdStartValue
- Value from the threshold startEndValue
- Value to the threshold end
This is an example that how to set the thresold 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 namesapace there are the controls that simulate the button to send a command. At the moment, there is only the class LBButton
. For this class you can set the following properties at a design time:
Button properties:
Style
- Style of the control. The type of this property isButtonStyle
and the available values are:Circular
ButtonColor
- Color of the buttonLabel
- Label of the buttonState
- State of the button. The type of this property isButtonState
and the available values are:Normal
Pressed
Like the previous controls there are properties that are not visible at the design time:
Renderer
- Custom renderer of the control.
Events
This control, when the state change, fire 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 namesapace there are the controls that simulate knobs 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 a design time:
Knob Properties
Style
- Style of the control. The type of this property isKnobStyle
and the available values are:Circular
KnobColor
- Color of the knobScaleColor
- Color of the scale of the knobIndicatorColor
- Color of the indicator of the current valueIndicatorOffset
- Offset of the indicator behind the edge of the knobMinValue
- Minimum value of the knobMaxValue
- Maximum value of the knobStepValue
- Step value when is used the keybordValue
- Current value of the knob
Like the previous controls there are properties that are not visible at the design time:
Renderer
- Custom renderer of the control.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 class with only static members for common use:
LBColorManager
- Class for handling colorsLBMath
- 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, and any renderer class has a property to set the control. All the methods in the renderer class are virtual and if you want to change the aspect of the control, is possible to override one or all methods. 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 methodsDrawBackground
- Method to draw a control backgroundDrawLed
- Method to draw the ledDrawLabel
- Method to draw the label of the control
LBAnalogMeterRenderer
- This class allows you to be able to redesign the appearance of control LBAnalogMeter and has the following methodsDrawBackground
- Method to draw a control backgroundDrawBody
- Method to draw the body of the analog meterDrawThresholds
- Method to draw the thresholds sectionsDrawDivisions
- Method to draw the scaleDrawUM
- 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 needleDrawNeedleCover
- Method to draw the needle coverDrawGlass
- 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 methodsDrawBackground
- Method to draw a control backgroundDrawBody
- Method to draw the body of the controlDrawText
- 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 methodsDrawBackground
- Method to draw a control backgroundDrawScale
- Method to draw the scale of the knobDrawKnob
- Method to draw the body of the knobDrawKnobIndicator
- Method to draw the indicator of the current value
To create a custom renderer, you following these steps:
- Create a class derived from a base class renderer (Example:
LBLedRenderer
) - Override one or all method (Example:
DrawLed
) - Create an instance of the custom renderer in the main form
- Set the renderer to the control with the property
Renderer
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
This is the initial 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, because I only started using C# 2 weeks ago, and I don't know if the code that I wrote is the best way to do things.
For this article, I used the code and the ideas of these articles :History
- 1.0 (09 Apr 2008)
- Initial release