CodeProject: Industrial Controls. Free source code and programming help

Report Article

Discuss

Send to a friend

16 votes for this Article.

Popularity: 5.25 Rating: 4.36 out of 5

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

Led image

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 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:

Renderer - Custom renderer of the control.
BlinkIsOn - Flag for the current state of the blink state

LBSoft.IndustrialCtrls.Meters

Analog meter image

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 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 an other 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 the design time, and are:

Renderer - Custom renderer of the control.
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 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

Button image

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 is ButtonStyle and the available values are:
- Circular
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

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

Knob image

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 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 is used the keybord
Value - 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 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, 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 methods
- DrawBackground - Method to draw a control background
- DrawLed - Method to draw the led
- DrawLabel - 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 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 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

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

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 :