Building_a_Website_that_Trends_Alarms_and_Displays_OPC_Data.pdf

8/14/2019 Building_a_Website_that_Trends_Alarms_and_Displays_OPC_Data.pdf

1/20

Web Development Tutorial

Web Based HMI using OPC Systems .NET


2/20

Page 2 of 20

Table of Contents

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


3/20

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


4/20

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.


5/20

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 Weboption under the Project types(left side of the window) and choose

ASP.NET Web Applicationfrom the right-side of the screen.

b. Lets name the project WebHMI.

Create a new

ASP.NET WebApplication


6/20

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.


7/20

Page 7 of 20

Creating our Master Page

The Master Page is our templatethat we will use to give all of our pages a common look and feel.

1. The Solution Exploreris found to the right of the environment, right click on the WebHMIproject

and open the Addmenu, and choose theNew Item option. The following dialog will open:

a. Pick Master Pagefrom the options. Then click the Addbutton.

2. You will then see the Markupfor the page. We will switch to the Designview instead by clicking the

Designoption below the markup:

Click

Design

Select a

Master Page


8/20

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.


9/20

Page 9 of 20

1. While in the design-view of the Master Page, simply click within the Content Place Holderand

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.aspxand then choose the Renameoption. Name the page

Trends.aspx.

Right-click in

here.

Choose Add

Content Page


10/20

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 Addfollowed by New Item.

Our 3 Content

Pages


11/20

Page 11 of 20

2. Choose Site Mapfrom the dialog and click the Addbutton:

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

5. Go to the Site1.Masterpage, specifically the Designview.


12/20

Page 12 of 20

6. Using the toolbox, expand the Navigationgroup and then drag and drop a Menuinto 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 Sourcedrop down and choose .

Click this arrow

Pick


13/20

Page 13 of 20

c. Then select the Site Mapoption 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


14/20

Page 14 of 20

Trending Pages

1. Open the design view of the Trends.aspxweb page.

2. Drag and drop the OPCWebTrendcomponent from the Toolbox onto the design surface.

3. Press F4 to open the Properties window:

a. Find the TitleTextand specify a value of My First Chart.

Specify the title

for the chart.

Click the Pens

option to open

the Browser


15/20

Page 15 of 20

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

c. Pick the Ramp.Valuetag value, and click the Add Pensbutton. Do the same for the

Random.Valuetag. Click the OKbutton when done.

Now if you ran the page now, you would not see any data. Why? Because the timing mechanismthat is

used behind the scenesto 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

Pento pick the

item for

trending.


16/20

Page 16 of 20

a. Locate the RefreshRateproperty 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.


17/20

Page 17 of 20

Alarm Page

1. Open the design view of the Trends.aspxweb page.

2. Drag and drop the component from the Toolbox onto the design

surface. You do notneed 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

RefreshRateproperty as we configured it previously.

4. Save and close the form.


18/20


19/20

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:


20/20

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]

Documents

Building_a_Website_that_Trends_Alarms_and_Displays_OPC_Data.pdf