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

Configure Web Services within the OAS Platform. For instructions on how to accomplish this as well as optionally using SSL for secure communications, see the following article:
Configuring OAS Web Services

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: