How To Articles > How to View OPTO Data in a Web Browser

How to View OPTO Data in a Web Browser

OPTO<<-->>Open Automation Software<<-->>Web Browser

Open Automation Software Tags can be defined to connect directly to OPTO controllers with the built in OPTO Driver Interfaces which support communications over Ethernet. Once you have connected to your OPTO data, you can use our Web HMI tools to visualize your data in a Web Browser. The Web HMI web interface is based on standard technologies including Javascript, jQuery, JSON, HTML and CSS. This tutorial walks you though downloading and installing OAS, configuring an OPTO driver, configuring tags and building a Web Application for your data.

Step 1. Download and Install the Open Automation Software and Start the OAS Service

If you have not already done so, you will need to download and install the OAS platform.  Fully functional trial versions of the software are available for Windows, Windows IoT Core, Linux, Raspberry Pi and Docker on our downloads page.

On Windows run the downloaded Setup.exe file to install one or more of the Open Automation Software features. Select the default Typical installation if you are not sure what features to use or the Custom installation if you want to save disk space on the target system.  When prompted agree to the End User License Agreement to continue the installation.

For more detailed instructions and video tutorials, visit the installation guide for your system:
Windows Installation | Linux Installation | Raspberry Pi Installation | Dockers Installation

When the installation is finished the OAS Service Control application will appear.  Use this application to start the 4 Services. If this is the first time installing the software it will automatically enter Runtime with an example Tag Configuration.


Step 2. Configure Your OPTO Data Source

  1. First, you will need to open the Configure OAS application from the program group Open Automation Software.

  2. Select Configure >> License from the top menu and verify that OPTO is one of the available Drivers in the lower left of the form. The demo license will have this by default. If you do not see OPTO available, contact support@openautomationsoftware.com to update your license.

  3. Select Configure >> Drivers from the top menu.


  4. Select localhost or the remote service you wish to modify with the Select button to the right of the Network Node list.


  5. The Configure Drivers Screen will appear. Select OPTO from the Driver dropdown box.


  6. Enter a meaningful Driver Interface Name that you will refer to this physical connection when defining Tags with a OPTO Data Source.

  7. Define the properties for the desired physical connection.

  8. Click Add Driver at the the top of the left portion of the window.

For more detailed instructions on configuring your OPTO data source, click here to see our Getting Started OPTO tutorial.


Step 3. Configure Your Tags

OAS provides multiple ways to add and define tags:

To add a Tag manually:

  1. In the OAS Configure Application, select Configure >> Tags from the top menu.


  2. Select localhost or the remote service you wish to modify with the Select button to the right of the Network Node list.


  3. Click on the Add Tag button located at the top of the Tag browser on the left portion of the screen.


  4. A dialog box will appear. Enter a name for your new tag and click ok.

  5. A configuration screen will appear for your new tag. Select your data source type in in the Data Source dropdown box.


  6. Specify the correct data type in the Data Type dropdown box.

  7. Click Apply Changes at the bottom right of the window.

For more detailed instructions on configuring your tags, click here to see our Getting Started Tags tutorial.


Step 4. View in Web Browser

Configure Web Services on OAS

Open the OAS Configuration application and select Configure > Options, then select the network node (localhost if working on the local machine) and click Select. Under the Networking tab, locate the field for REST API/WebHMI Port Number. The default is 58725 but can be changed. If you are accessing the server from a remote client, you will also need to make sure your machine and/or company firewalls allow TCP traffic on the selected port. If you are using SSL we suggest using a different port number such as 58726 to avoid port conflicts. You can find more detailed information in our knowledge base article Configuring OAS Web Services.

Create a Project Directory and Copy External Libraries

Create a project directory. (Example C:\myWebHMI). Then copy the following files from your OAS installation directory (Likely: C:\Program Files\Open Automation Software\OAS\HTML_HMI) into the appropriate 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

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.

Enter Basic HTML Code

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

<!DOCTYPE html>
     <head>
          <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>

Change the serverURL in the script tag above to the IP Address, Network Node Name, or registered domain name of the Linux or Windows devices where the OAS Engine is located.

HTML to Display Tag Data

In the body add the following code to display the Ramp tag value, Pump tag value and a button to toggle the Pump Tag:

<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","set":"toggle","set_src":""}}'>Toggle Pump</button></div>

If a tag is in a group, preface it with the group name in your markup. For example: BuildingA.Pump.Value. If the tag is located on a different system than the serverURL or you want to host data from multiple OAS Engines use the Remote Tag Access syntax. You can learn more about that here: Getting Started – Networking.

OAS Web HMI Wizard

If you are not super comfortable with HTML, you can use our Web HMI Wizard to help you create the markup to display your tag data. There is a tutorial about it here: Web HMI Wizard Tutorial.



Save your file. Deploy your application to any web server. This can be IIS on Windows, or any HTTP server on Linux, and even cloud hosting services. To see the results open a browser to the location of your HTML file.

Your final code should look like this:

<!DOCTYPE html>
     <head>
          <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","set":"toggle","set_src":""}}'>Toggle Pump</button></div>
     </body>
</html>

Also see: