Web Development Tutorial

Web Based HMI using OPC Systems .NET

Page 2 of 20

Table of Contents

INTRODUCTION
Intended Audience, and Assumptions Made

3
3

WEB APPLICATION WE WILL CREATE IN THIS TUTORIAL CREATING OUR WEB APPLICATION IN VISUAL STUDIO .NET CREATING OUR MASTER PAGE
Creating Content Pages Incorporating Navigation into our Master Page

4 5 7
8 10

TRENDING PAGES ALARM PAGE SIMPLE DATA DISPLAY PAGE

14 17 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:

Create a new ASP.NET Web Application

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.

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:

Select a Master Page

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

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:

Enter your company name on 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.

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.

Right-click in here.

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.

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

Our 3 Content Pages

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.

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.

Click this arrow

Pick <New data source>

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

Page 13 of 20

c.

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

Select a Site Map

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:

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:

Click the Pens option to open the Browser

Specify the title for the chart.

a. Find the TitleText and specify a value of My First Chart.

Page 15 of 20

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

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.

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:

Page 16 of 20

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

The refresh rate specifies the frequency of the polling engine obtaining the values of the tags.

5. Were done. You can now save and close the form.

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 will then be visible in the form, already selected: component into the form. The label

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: sales@softwaretoolbox.com Knowledgebase: http://support.softwaretoolbox.com/ Technical Support: support@softwaretoolbox.com