Web Development Tutorial

Web Based HMI using OPC Systems .NET

Page 2 of 20

Table of Contents
INTRODUCTION 3
Intended Audience, and Assumptions Made 3
WEB APPLICATION WE WILL CREATE IN THIS TUTORIAL 4
CREATING OUR WEB APPLICATION IN VISUAL STUDIO .NET 5
CREATING OUR MASTER PAGE 7
Creating Content Pages 8
Incorporating Navigation into our Master Page 10
TRENDING PAGES 14
ALARM PAGE 17
SIMPLE DATA DISPLAY PAGE 18

Page 3 of 20

Introduction
Web Based HMIs are becoming more and more the norm. Once perceived as a gimmick for the early
adopters and those with big budgets, web-based HMIs have demonstrated their value as more and more
people need more access to their data, be they inside or outside of their corporate network.
This document shows some ways in which you can get started building your own web-based HMI using the
OPC Systems .NET development tools. Furthermore, youll see how you can develop a web-based
application without having to create any lines of code, a concept known as code-less development.
Intended Audience, and Assumptions Made
This document is intended for anyone who has a need to see what is involved in developing a web-based
HMI.
No development knowledge is expected or assumed. The following assumptions are made, however:
What an HMI/SCADA is
What OPC is
You have access to Visual Studio .NET
Page 4 of 20

Web Application we will create in this tutorial
We are going to create a web-based HMI that you will be able to use as a foundation for your own web HMI
project.
We will be using the tools provided by the OPC Systems .NET platform. For more information about this
tool please visit the product-focus website at: http://www.softwaretoolbox.com/opcsystems/
We will use Visual Studio .NET 2008 to build our application. For more information about this development
tool, and to download your own personal copy for free, please visit: http://www.microsoft.com/express/
Our application will be built using Master Pages, a technique whereby all pages have a common look and
feel. These are the equivalent of a template. We will create a very simple application with the following
pages:
Trending page
Alarm display and acknowledgement page
Simple data-display page
All of our web pages will show live data, dynamically within the web page, without the end-user being
required to refresh the page. This will be thanks to the AJAX technology that will be in use behind the
scenes.
In our example, we will simply acquire the default data that is installed with the OPC Systems .NET service
by default. This eliminates any need for an OPC Server for the sake of following this tutorial.
Page 5 of 20

Creating our Web Application in Visual Studio .NET
1. Open Visual Studio .NET 2008.
2. Click FILE, NEW, PROJECT. The following dialog will open:

a. Click on the Web option under the Project types (left side of the window) and choose
ASP.NET Web Application from the right-side of the screen.
b. Lets name the project WebHMI.
Create a new
ASP.NET Web
Application
Page 6 of 20

3. Wait a moment while Visual Studio .NET creates the necessary files you will then see:

4. We are now ready to start developing our web-HMI.
Page 7 of 20

Creating our Master Page
The Master Page is our template that we will use to give all of our pages a common look and feel.
1. The Solution Explorer is found to the right of the environment, right click on the WebHMI project
and open the Add menu, and choose the New Item option. The following dialog will open:

a. Pick Master Page from the options. Then click the Add button.
2. You will then see the Markup for the page. We will switch to the Design view instead by clicking the
Design option below the markup:

Click
Design
Select a
Master Page
Page 8 of 20

3. Once in design-mode, click within the design-surface and then press CTRL+HOME to go to the
beginning of the document. Press ENTER to create a new line. Then put your company name at
the first line:

Creating Content Pages
Now that weve created our master page, we are going to create some child-pages. But for now, we are not
concerned with content.
Enter your company
name on the first
line.
Page 9 of 20

1. While in the design-view of the Master Page, simply click within the Content Place Holder and
then right-click, choose Add content page.

2. A new web-page will be created and will be visible in the solution explorer:

3. Just right-click on WebForm1.aspx and then choose the Rename option. Name the page
Trends.aspx.
Right-click in
here.
Choose Add
Content Page
Page 10 of 20

4. Now go back to the master page, and add 2 more content pages naming them:
a. Alarms.aspx
b. DataDisplay.aspx

Incorporating Navigation into our Master Page
We will now modify our Master page so that a navigation menu will be displayed along the top of each web
page.
1. In the Solution Explorer right-click on the WebHMI project, and choose Add followed by New Item.
Our 3 Content
Pages
Page 11 of 20

2. Choose Site Map from the dialog and click the Add button:

3. When the code opens, you will see the markup for the page. Modify the file to make links to our 3
files as follows:

4. Save and close the Web.sitemap file.
5. Go to the Site1.Master page, specifically the Design view.
Page 12 of 20

6. Using the toolbox, expand the Navigation group and then drag and drop a Menu into the design
space.

a. Then click on the arrow that will be shown at the upper-right of the component.
b. Then click the Choose Data Source drop down and choose <New data source>.
Click this arrow
Pick <New data
source>
Page 13 of 20

c. Then select the Site Map option from the wizard dialog, clicking OK:

d. Optional: When you return back to the design view, you can right-click on the menu and
choose the AutoFormat option to make the menu look nice. The finished page should look
like this:

Select a Site
Map
Page 14 of 20

Trending Pages
1. Open the design view of the Trends.aspx web page.
2. Drag and drop the OPCWebTrend component from the Toolbox onto the design surface.
3. Press F4 to open the Properties window:

a. Find the TitleText and specify a value of My First Chart.
Specify the title
for the chart.
Click the Pens
option to open
the Browser
Page 15 of 20

b. Locate the Pens property, click on it, and then click on the button:

c. Pick the Ramp.Value tag value, and click the Add Pens button. Do the same for the
Random.Value tag. Click the OK button when done.
Now if you ran the page now, you would not see any data. Why? Because the timing mechanism that is
used behind the scenes to poll for the latest value, has not been added yet.
4. On the toolbox, find the icon on the toolbar and drag and drop it into the
web page. Once on the form, we need to highlight it so we can adjust its properties:
Find the Tag, and then
specify the attribute you
want to Trend, which is
typically the Value.
Click OK to save and
close this dialog.
Click the Add
Pen to pick the
item for
trending.
Page 16 of 20

a. Locate the RefreshRate property and change the value from the default of 3000, to 1000:

5. Were done. You can now save and close the form.
The refresh rate specifies the
frequency of the polling
engine obtaining the values
of the tags.
Page 17 of 20

Alarm Page
1. Open the design view of the Trends.aspx web page.
2. Drag and drop the component from the Toolbox onto the design
surface. You do not need to modify the properties of this component.
3. On the toolbox, find the icon on the toolbar and drag and drop it into the
web page. Once on the form, we need to highlight it so we can adjust its properties, specifically the
RefreshRate property as we configured it previously.
4. Save and close the form.
Page 18 of 20

Simple Data Display Page
Now for the last page of our website, this will take a little longer to configure as there will be more
components in use on our form. But to keep things simple, we will use just a small number of the overall
number of controls available.
1. Open the DataDisplay.aspx form in the Design view.
2. Drag and drop the component into the form. The label
will then be visible in the form, already selected:

a. We will now bind a tag to the control so that the value is displayed within the label:
i. Locate the TextOPCSystems_Tag property, and click the button to open the
Tag browser dialog, and then pick the Ramp.Value tag.
3. Now drag and drop onto the form, displayed below:

a. Locate the CheckedOPCSystems_Tag property, click the button and then bind the
Mixer.Value tag to the property.
This particular property is merely controlling the checkbox by displaying the tag value only.
b. Locate the SetValueOPCSystems_Tag property, click the button and then bind the
Mixer.Value tag to the property.
This particular property is for writing any changes the user makes back to the server.
Page 19 of 20

Running the Web Application
Now that we have built our web application, we can now run it. Simply press CTRL+F5 to run the
application without the debugger attached.
Here are some screenshots of how your application should look:

Page 20 of 20

More information
This tutorial used the following software:
OPC Systems .NET
Product-focus website at: http://www.softwaretoolbox.com/opcsystems/
Visual Studio .NET 2008
Please visit: http://www.microsoft.com/express/
To speak to a person:
Tel: +1 (704) 849-2773
Sales: [email protected]
Knowledgebase: http://support.softwaretoolbox.com/
Technical Support: [email protected]