Getting Started – Web HMI

The following content will get you started with Web HMI, building your own web user interfaces with real time data. If you are interested in visualizing your data in a desktop or mobile browser with zero programming, you may be interested in Getting Started with the Web HMI Dashboard.

For full reference information on Web HMI visit Programming Reference – Web HMI

Step 1

To use the Web HMI interface you must first register the Web HMI libraries. This is done with the OAS Service Control utility with the Web HMI Registration.

Define the exclusive Node Name and Port Number  that is to be supported. The Node Name should be set to the Network Node Name, IP Address, or registered domain name that all client applications will browse to. This will be the serverURL that all HTML clients will specify. Unless you are using a server with multiple network interfaces, keep the Node Name set to localhost.

Using SSL with Web HMI is fully supported.
Read more about Configuring OAS to use SSL for Web and REST API products.

NOTE: Networking to other OAS Services is easily supported by defining the IP Address, Network Node Name, or registered domain name in the HTML code for the client. Use the Web HMI Wizard to define the remote networking nodes to multiple remote services relative to where the web project is hosted.

Step 2

Create a project directory. (Example C:\myWebHMI)

Step 3

Copy the 4 supplied files from C:\Program Files (x86)Open Automation Software\OPC Systems.NET\HTML_HMI, js and css subdirectories to your project directory keeping the directory structure just the same.

Web HMI Getting Started 2
Directories
1. js/lib/jquery-1.8.3.min.js
2. js/lib/json2.js
3. js/opc-lib-min.js
4. css/opc-style.css

Note: You can use any version of jQuery as long as it is v1.8 or greater, and the json2 library is only necessary for older browsers such as IE 8.

Step 4

Open/create a new text document and add the following minimum code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/opc-lib-min.js"></script>
        <script type="text/javascript" src="js/lib/json2.js"></script>
        <link rel="stylesheet" stype="text/css" href="css/opc-style.css"/>
        <script type="text/javascript">
            OPC_config = {
                token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
                serverURL: 'http://localhost:58725'
            };
        </script>
    </head>
    <body>
    </body>
</html>

NOTE: Specify the serverURL that includes the Node Name and Port Number that has been registered by the OAS Service Control Manager.

Step 5

If you are new to HTML code use the HTML Wizard code generator at http://opcweb.com/wizard/ to generate the code for you.

HTML Wizard
HTML Wizard

In the body add the following code to display the Ramp tag value:

<div>Ramp Value =  <label id="txt1" opc-tag-txt='{"tag":"Ramp.Value","config":{"formats":{"bad_q":"?????","float":"0.0"}}}' ></label></div>

Step 6

Below the Ramp code add the following code to display the Pump tag Value:

<div>Pump Value = <label id="txt2" opc-tag-txt='{"tag":"Pump.Value","config":{"formats":{"bad_q":"?????"}}}' ></label></div>

Step 7

Finally below the Pump code add the following to create a button that will allow you to “Toggle” the Pump Value.

<div><button id="tog2" opc-tag-set='{"tag":"Pump.Value","config":{"evt":"click","offset":0,"set":"toggle","set_src":""}}'>Toggle Pump</button></div>

NOTE: To be able to set a value (write to it) it must first be setup to read in the web application.

Step 8

Save your file as myWebHMI.html

Web HMI Getting Started 3

Step 9

From the Control Panel > Administrative Tools, open Internet Information Services (IIS) Manager

Step 10

If you do not find the IIS Manager under administrative tools please add IIS to you operating system using add remove programs.

Step 11

Right click on the default web site and add a virtual directory linking to your project directory.

Step 12

Use myWebHMI as the alias name. Then browse to your project directory for the physical path.

Step 13

Hit OK.

Step 14

To see the results open a browser and enter: http://localhost/myWebHMI/myWebHMI.html

Step 15

Your final code should look like this:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/opc-lib-min.js"></script>
        <script type="text/javascript" src="js/lib/json2.js"></script>
        <link rel="stylesheet" stype="text/css" href="css/opc-style.css"/>
        <script type="text/javascript">
            OPC_config = {
                token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
                serverURL: 'http://localhost:58725'
            };
        </script>
    </head>
    <body>
    <div>Ramp Value =  <label id="txt1" opc-tag-txt='{"tag":"Ramp.Value","config":{"formats":{"bad_q":"?????","float":"0.0"}}}' ></label></div>
    <div>Pump Value = <label id="txt2" opc-tag-txt='{"tag":"Pump.Value","config":{"formats":{"bad_q":"?????"}}}' ></label></div>
    <div><button id="tog2" opc-tag-set='{"tag":"Pump.Value","config":{"evt":"click","offset":0,"set":"toggle","set_src":""}}'>Toggle Pump</button></div>
    </body>
</html>

NOTE: To be able to set a value (write to it) it must first be setup to read in the web application.

Open Automation Software provides a tool for automatically creating the HTML code to read and write to Open Automation Software Tags using the HTML HMI Wizard.



More: