Author Topic: Adding Custom Controls (Aqua Gage)  (Read 14614 times)

Archie

  • Administrator
  • Hero Member
  • *****
  • Posts: 5322
    • View Profile
    • AdvancedHMI
Adding Custom Controls (Aqua Gage)
« on: September 04, 2013, 08:55:26 PM »
Creating custom controls for AdvancedHMI from scratch can be an advanced exercise requiring some extensive knowledge of .NET.  However, incorporating an existing .NET control into AdvancedHMI may be easier than you think.

All AdvancedHMI visual controls start out as a standard .NET WinForm control that is inherited into a new control that adds the functionality that links it to the communication driver. The following is a walk-through showing how to take the attached AquaGage control and incorporate it into an AdvancedHMI project.

Adding The Class Library to AdvancedHMI
1) Download and unzip the attached Visual Studio Solution (AquaGageDemo.zip). The solution includes a class library with a single custom control.
2) Open an AdvancedHMI project
3) In the Solution Explorer right click the Support directory in the AdvancedHMI project
4) Add->Existing Item
5) When the Add Item window opens, change the file filter to All Files(*.*)
6) Browse to where you unzipped the AquaGage project and browse to and select \AquaGage\bin\Debug\AquaGage.dll
7) Click the Add button to add this file to the AdvancedHMI project

Adding a Reference To The Class Libary
1) Now the DLL class library file should be in the Support directory
2) In Solution Explorer, right click AdvancedHMI project and select Add Reference
3) When the Add Reference window opens, select the Browse tab
4) Browse into the Support directory and select the AquaGage.dll file
« Last Edit: September 13, 2015, 09:32:43 PM by Archie »

Archie

  • Administrator
  • Hero Member
  • *****
  • Posts: 5322
    • View Profile
    • AdvancedHMI
Adding Custom Controls
« Reply #1 on: September 04, 2013, 09:13:20 PM »
Making the AquaGage and AdvancedHMI Control
Now that we have the standard windows control of AquaGage in the project and referenced, it is now time to make an AdvancedHMI control out of it. The trick to making this easy, is to use an existing control as a template. We are going to use the Meter2 as our reference because it is very close in functionality as the AquaGage.

1) Expand down the Controls directory in the AdvancedHMI project
2) Find the Meter2.vb and Right Click->Copy
3) Right Click the Controls folder and select Paste
4) You should now have a new file "Copy of Meter2.vb"
5) Right Click the new file and select Rename
6) Change the name to AquaGage.vb
7) Right Click AquaGage.vb and select View Code
8 ) In the code change "Public Class Meter2" to "Public Class AquaGageHMI"
9) Change "MfgControl.AdvancedHMI.Controls.Meter2" to "Inherits AquaGage.AquaGage"
10) Build the project

After the build, you should have 3 errors. These errors are items from Meter2 that is not part of AquaGage. To resolve this discrepancy, we will comment out (or delete) all of the code associated with the Text property shown below. After commenting out all of that code, you should be able to build with no more errors.
Code: [Select]
    '******************************************************************************************
    '* Use the base control's text property and make it visible as a property on the designer
    '******************************************************************************************
    <System.ComponentModel.Browsable(True)> _
<System.ComponentModel.DesignerSerializationVisibility(System.ComponentModel.DesignerSerializationVisibility.Visible)> _
    Public Overrides Property Text() As String
        Get
            Return MyBase.Text
        End Get
        Set(ByVal value As String)
            If m_Format <> "" And (Not DesignMode) Then
                Try
                    MyBase.Text = Format(CSng(value) * ValueScaleFactor, m_Format)
                Catch ex As Exception
                    MyBase.Text = "Check NumericFormat and variable type"
                End Try
            Else
                '* Highlight in red if an exclamation mark is in text
                If InStr(value, "!") > 0 Then
                    If MyBase.BackColor <> _Highlightcolor Then SavedBackColor = MyBase.BackColor
                    MyBase.BackColor = _Highlightcolor
                Else
                    If SavedBackColor <> Nothing Then MyBase.BackColor = SavedBackColor
                End If

                If ValueScaleFactor = 1 Then
                    MyBase.Text = value
                Else
                    MyBase.Text = value * ValueScaleFactor
                End If
            End If
        End Set
    End Property

The AquaGageHMI is now a usable control within AdvancedHMI. You should see it in your Toolbox in the AdvancedHMI Controls group. Add on to the form and use it like any other control.
« Last Edit: September 23, 2013, 09:42:46 AM by Archie »

malt_master

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: Adding Custom Controls
« Reply #2 on: July 10, 2014, 07:27:20 PM »
Archie,
I'm an older newbie and love the program. But in the step-by-step instructions for this tutorial the following steps are killing me:

3) In the Solution Explorer right click the Support directory in the AdvancedHMI project
     I do not see the option to right click the Support Directory"
     I've opened an existing sln created a new sln and I still do not see that option.

Please humor me and point me in the right direction.

Thanks
Malt

Archie

  • Administrator
  • Hero Member
  • *****
  • Posts: 5322
    • View Profile
    • AdvancedHMI
Re: Adding Custom Controls
« Reply #3 on: July 10, 2014, 09:50:25 PM »
Does this attached screen shot help

malt_master

  • Newbie
  • *
  • Posts: 11
    • View Profile
Re: Adding Custom Controls
« Reply #4 on: July 16, 2014, 02:18:26 AM »
DOH.. I bet it is the one labeled " Support Directory" http://127.0.0.1/smf/Smileys/default/embarrassed.gif

MrPike

  • Sr. Member
  • ****
  • Posts: 297
    • View Profile
Re: Adding Custom Controls
« Reply #5 on: December 14, 2014, 10:22:34 PM »
Hi Archie, Im having trouble adding this control.  I followed the steps but when I get to step 9) changing to "Inherits Aquagage.Aquagage, I get 18 errors and AquaGage.AquaGage is underlined with the squiggled lines(error). 

DougLyons

  • Jr. Member
  • **
  • Posts: 68
    • View Profile
Adding Custom Controls
« Reply #6 on: December 14, 2014, 10:55:42 PM »
MrPike,

I was able to do this, but I had to change the statement #9 to the following:

9) Change "Inherits MfgControl.AdvancedHMI.Controls.Meter2" to "Inherits AquaGage"

In other words the whole statement changes and you have to take out the dot and the AquaGage extension.
See if this fixes your problems.

MrPike

  • Sr. Member
  • ****
  • Posts: 297
    • View Profile
Re: Adding Custom Controls
« Reply #7 on: December 16, 2014, 08:38:37 PM »
I just tried this and unfortuneately it did not fix my issue. I tried Aquagage.Aquagage and AguagageHMI as well and same results. I attached some screenshots that may help determine what I did wrong.  Thanks for the help.

Archie

  • Administrator
  • Hero Member
  • *****
  • Posts: 5322
    • View Profile
    • AdvancedHMI
Re: Adding Custom Controls
« Reply #8 on: December 16, 2014, 08:48:32 PM »
This will change a little with version 3.80 or later. In the later version, you will add the dll to the Support folder in AdvancedHMIControls project and add the reference to the AdvancedHMIControls project.

MrPike

  • Sr. Member
  • ****
  • Posts: 297
    • View Profile
Re: Adding Custom Controls
« Reply #9 on: December 16, 2014, 09:37:29 PM »
That cleared up alot of errors.  I still have 7 errors when i add this control to the form. 

Archie

  • Administrator
  • Hero Member
  • *****
  • Posts: 5322
    • View Profile
    • AdvancedHMI
Re: Adding Custom Controls
« Reply #10 on: December 16, 2014, 09:42:21 PM »
Try to right click the AdvancedHMI project in Solution Explorer and select Add Reference, then browse to the AdvancedHMIControls\Support folder and select the AquaGage dll

MrPike

  • Sr. Member
  • ****
  • Posts: 297
    • View Profile
Re: Adding Custom Controls
« Reply #11 on: December 16, 2014, 10:13:40 PM »
The error box automatically referenced that .dll so i just clicked add reference and it works now.  Thanks 

Mvlawn

  • Jr. Member
  • **
  • Posts: 60
    • View Profile
Re: Adding Custom Controls (Aqua Gage)
« Reply #12 on: February 19, 2016, 10:08:49 AM »
I believe I missed a step. Can someone point me in the right direction?

Mvlawn

  • Jr. Member
  • **
  • Posts: 60
    • View Profile
Re: Adding Custom Controls (Aqua Gage)
« Reply #13 on: February 19, 2016, 10:23:09 AM »
Disregard. I didn't add it to my Purchased folder. Seems to be OK now.