Industrial Controls

• Download demo - 17.85 KB
• Download source project - 37.06 KB

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

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

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

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 :

• A Cool Vista Style CPUInfo Control!
• Aqua Gauge
• CKnobControlST v1.0

History

• 1.0 (09 Apr 2008)
  • Initial release