Click here to Skip to main content
15,867,686 members
Articles / Multimedia / GDI+
Article

Industrial Controls

Rate me:
Please Sign up or sign in to vote.
4.61/5 (29 votes)
11 Apr 2008CPOL7 min read 87.7K   6.1K   130   13
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

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:

C#
...

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

License

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


Written By
Software Developer (Senior) Promax Srl
Italy Italy
Software developer with over 16 years of experience, specializing on MFC/C++, C# and software architecture


Company : Promax S.r.l.


Comments and Discussions

 
QuestionButton Click ? Pin
Member 1073646811-Apr-14 4:03
Member 1073646811-Apr-14 4:03 
GeneralLooking Nice Pin
Khaniya27-Aug-10 21:09
professionalKhaniya27-Aug-10 21:09 
GeneralLitte Bug in GetValueFromPosition() function Pin
BCsoftware198914-May-10 6:19
BCsoftware198914-May-10 6:19 
GeneralRe: Litte Bug in GetValueFromPosition() function Pin
Luca Bonotto14-May-10 11:28
Luca Bonotto14-May-10 11:28 
GeneralOttimo lavoro Pin
Member 319201119-Mar-09 7:07
Member 319201119-Mar-09 7:07 
GeneralRe: Ottimo lavoro Pin
Luca Bonotto22-Mar-09 6:11
Luca Bonotto22-Mar-09 6:11 
GeneralKeep going Pin
Yves13-Nov-08 5:12
Yves13-Nov-08 5:12 
GeneralSei un grande Pin
Kemes20-Oct-08 2:48
Kemes20-Oct-08 2:48 
GeneralRe: Sei un grande Pin
Luca Bonotto20-Oct-08 3:02
Luca Bonotto20-Oct-08 3:02 
QuestionCompact Framework? Pin
marco.villa14-Apr-08 21:14
marco.villa14-Apr-08 21:14 
GeneralRe: Compact Framework? Pin
Luca Bonotto14-Apr-08 22:01
Luca Bonotto14-Apr-08 22:01 
GeneralLED in on state Pin
mmansf11-Apr-08 16:55
mmansf11-Apr-08 16:55 
I hope that you don't mind a little criticism. All of the controls look very nice, however the LEDs in the ON state look flat. This is not normal. The color or brightness of the color should change as you have done, but the shape appears to flatten and in my opinion should be fixed. Other than that, the project is excellent. Maybe the dial could use some optional scale settings.
GeneralRe: LED in on state Pin
Luca Bonotto11-Apr-08 20:12
Luca Bonotto11-Apr-08 20:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.