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.

View the following video for a quick introduction to OPC Web HMI.NET.


View the following video for detailed steps on using OPC Web HMI.NET.


The following steps can be used to add real-time visualization and operator control to a C#, J#, or Visual Basic.NET web application.  All properties are programmatically accessible.  The following example demonstrates the trend window with no code required.  The OPC Web Controls components can also be used with Visual Studio 2003 web applications with the .NET Framework 1.1 version of OPC Systems.NET.




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.


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

Note: If using Visual Studio 2010 set the Target Framework to 3.5 or 2.0 for easiest deployment.



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

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


You can use Relative or Absolute Positioning with your WebForm.


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

From the .NET Framework Components select all of the OPC Web Controls components and the OPCWebRefresh control and then select OK.


Add one OPCWebRefresh control to the WebForm.

For faster updates set the RefreshRate Property of the OPCWebRefresh1 control.


Add an OPCWebControlsLabel onto the WebForm.

Right click on the OPCWebControlsLabel window and select Properties.

Select the TextOPCSystems_Tag property and use the browse button at the right to set the OPC Systems.NET Tag to Ramp.Value.

Note: All Tag names are case sensitive.  Ramp.Value is valid, ramp.value is not.

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.

Note: You can use the DirectOPC interface to connect directly to OPC Server Items is you just need to gain access to the server items without having to create OPC Systems.NET Tags.


Add an OPCControlsButton to the Form.

Set the TextOPCSystems_Tag to Pump.Value.  If the Pump Tag does not exist create a Boolean Tag using Configure-Tags with the name Pump.

Set the Format fields as defined below..

Set the BackColorOPCSystems_Tag to Pump.Value.

Set the SetValueOPCSystems_Tag to Pump.Value.


Add an OPCWebControlsTextBox to the Form.

Set the TextOPCSystems_Tag property to Pump.Value.  The Format properties for Boolean to Off and On.



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 HMI.NET section in the OPC Systems.NET help file for a list of all controls and their properties.


Continue: Trending