*Web Trending

If you do not have a copy of Visual Studio you can download a free version of the Web Designer Express from www.microsoft.com/express.  No programming is required to use OPC Web HMI.NET.

The following steps can be used to add a trend window to a C#, C++, or Visual Basic.NET web application.  All properties are programmatically accessible.  The following example demonstrates the trend window with no code required with Visual Studio 2005, 2008, and 2010.  The trend window can also be used with Visual Studio 2003 web applications.

View the following videos or follow the steps listed below.

View the following quick video presentation on using OPC Web Trend.NET in an ASP.NET web application.


View the following detailed video presentation on use OPC Web Trend.NET in an ASP.NET web application.






Start Visual Studio 2005, 2008, or 2010 and select File->New->Web Site to create a new C#, J#, or VB ASP.NET web application.  When using Visual Studio 2010 set the Target Framework to 2.0 or 3.5.


Select ASP.NET Web Site and specify your desired Language in the lower right.


Expand the Default.aspx web page in the Solution Explorer and select View Designer.

If the default page is a master page delete it and Add Item to add a new Web Form.

Note: If you do not see the Solution Explorer select View->Solution Explorer.


From the VS menu select Layout->Position->Auto-position Options.


Under the HTML Designer set the CSS Positioning to Absolutely positioned.

Note: You are welcome to use any positioning style you desire, this simply pointed out for new web developers.


From the Toolbox if OPCWebTrend and OPCWebRefresh is not available right click in the Toolbox and select Choose Items.  If it is available to step 4.

From the .NET Framework Components select OPCWebTrend and OPCWebRefresh and then select OK.


Add one OPCWebRefresh control to the WebForm.

To make sure your web.config file is modified for proper AJAX runtime add one OPCWebControlsLabel to the WebForm and then delete it.


Add the OPCWebTrend component onto the WebForm.

Resize the trend window to the desired size.


Right click on the trend window and select Properties.


Set the Layout style to the desired setting.


Set the SampleRate and TimeFrame properties to the desired settings.  The default is 60 seconds at a 1 second sample rate..


Select the Pens property and click on the small grey square with the 3 dots at the right.


Select the Local OPC Systems Service to display a list of available Tags to

Note: If you do not see the desired Tag in this list go back to Configure-Tags and enable the Trend Point property for the Tags you wish to trend.

Note: If you want the web application to be deployed across a network to remote PCs select the Network Node or enter an IP Address in the NetworkNode field and use the Select button to include the network node or IP Address of the OPC Systems Service source.  If the web application will be running on the local system and simply need access to the web application through remote browsers use the Local service.


Expand the Ramp Tag and select Value.

Select the Add Pen button or right click on Value and select Add Pen.

Note: You can also use the DirectOPC interface to connect to OPC Server Items directly without having to create OPC Systems.NET Tags.


The pen Ramp.Value will appear in the lower left list of pens.  You can select the pen to change of the pen properties that appear to the right.  The YAxisRangeHigh and YAxisRangeLow properties are important when the trend windows YAxis.ScaleMode property is set to PercentOfPenRanges.


Select OK from the Pens dialog.


Set the TrendType property to the desired setting.


Right click on the WebForm and select View in Browser.


Set the application for Release mode and build your application.  Typically the application files are under the Inetpub\wwwroot directory.

Refer to the OPC Web Trend.NET section in the OPC Systems.NET help file for Special considerations and Deployment steps if you encounter any issues.

Continue: *Alarming