How to View Sparkplug B Data in a Web Browser

Sparkplug B Web User Interface
Sparkplug B Web User Interface


Open Automation Software allows for direct connection to Sparkplug B Edge of Network Node devices, providing the ability to read and write metric data. This data can then be visualized in a web browser through the use of our Web HMI tools. The Web HMI web interface is built on standard technologies, such as Javascript, jQuery, JSON, HTML, and CSS. This tutorial will guide you through the process of downloading and installing OAS, configuring a Sparkplug B driver, setting up tags, and building a web application to access 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. Set Up Sparkplug B Host App to Access EoN Node Data.

Select Configure-Drivers.

Configure Drivers

Enter a meaningful Driver Interface Name that you will refer to this connection and define the properties.

Set the driver to Sparkplug B.

Enter the Host property to the IP Address of the of the host broker or just use localhost for a local broker. 

Set the Port property of the host broker to connect to.  The default port is 1883 or 8883 for SSL.

Note: The OAS MQTT Broker can be used to host data locally.  To use another broker on the default ports on the same computer change the OAS MQTT Broker Port under Configure-Options-MQTT Broker.

Enter the User Name and Password if required.

Set the MQTT Protocol Version to V311 or V500.

Set the Client ID to a unique value, each driver interface must have a specific value different than all other clients connecting to the host.

Set the Mode to Host App for OAS to control the online state of each Edge of Node defined to the shared Host Application ID. Or set to Client App to access EoN Node data without controlling their state.

Set the Host ID to the specific value that the Edge of Nodes will be using as the Host Application ID.

Set the Sparkplug B Version to 2.2 or 3.0.

To automatically add tags for each Metric from the matching Group, Edge of Nodes, and Devices enable the property Add Client Tags Automatically.

When enabled optionally set the Filter Groups, Edge Nodes, and Devices that tags should be added from for each of their Metrics.  Leave the Filter fields blank to include all Edge of Nodes publishing data to the broker.

Select the Add Driver button in the left part of the form to add the Driver Interface as an available selection when defining Tags in the next step.

Add Driver

You are now ready to add tags for specific Sparkplug B EoN Node Metric values.

Note: If the Driver Interface property Add Client Tags Automatically was enabled tags will be created for you, you can skip this step to add tags manually.

Select Configure-Tags.

Menu Configure Tags

Note: You can add organizational Groups as many levels deep as you prefer and add tags to groups.  To do this first add a Group to Tags Group at the root level, then right click on the Group in the right window to add additional Groups or Tags.

Select Add Tag.

Add Tag

Change the Data Source Tag property to Sparkplug B.

Select the correct Driver Interface from the Driver Interface pull down list.

Specify the Client Group IDClient Edge Node IDClient Device ID, and Client Metric Name for the Edge of Node Metric value to read and write.

Select the Data Type of the Tag to match the data type of the Metric.

Select Apply Changes and the current value for the Metric should appear with Good Quality.

Select the Save button from the toolbar to save your configuration.

Save Button

You can view the Getting Started with Sparkplug B Video to familiarize yourself with the above steps to setup OAS as a Sparkplug B Edge of Network Node and a Host Application

  • 00:00 – Introduction
  • 01:10 – Download OAS
  • 01:46 – Quick Start
  • 02:08 – Edge of Network Node
  • 05:52 – EoN Tags
  • 07:04 – Host Application
  • 09:20 – SpB Client Tags
  • 10:22 – Programatic Interface
  • 10:59 – CSV Export / Import
  • 12:27 – Multiple Metric Tags
  • 13:46 – Modbus
  • 16:10 – DCMD Metric Write
  • 17:00 – Data Route
  • 17:58 – Networking
  • 18:17 – Save Configuration
  • 18:56 – OAS Platform

Step 3. 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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View OPC UA Data in a Web Browser

How to View OPC UA Data in a Web Browser

Open Automation Software Tags can be defined to connect to OPC UA Servers with the built in OPC UA Driver Interface. This tutorial walks you though downloading and installing OAS, configuring an OPC UA driver, configuring tags and logging them to a database. 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 OPC UA 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 OPC UA 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 OPC UA 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 OPC UA 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 Siemens 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 OPC UA Data Source.
  7. Define the properties for the desired physical connection.
  8. Click the Add Driver button above the Driver list in the left pane to add the Driver Interface as an available selection when defining Tags in the next step.

For more detailed instructions on configuring your OPC DA data source, click here to see our Getting Started OPC UA 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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View OPC Server Data in a Web Browser

How to View OPC Server Data in a Web Browser

Open Automation Software Tags can be defined to connect to Classic OPC Data Access 2.xx and 3.0 Servers with the built in OPC Interface. Once you have connected to your OPC Server 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 OPC Server 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 OPC Server 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 OPC in the Data Source dropdown box.

  6. Use the Browse button to the right of the OPC Item to browse OPC Servers for the desired OPC Item.

  7. Select Local, the desired OPC Server, branch within the OPC Server, and OPC Item and click OK.

  8. Specify the desired OPC Update Rate for the Tag.
  9. Click Apply Changes at the bottom right of the window.

To add Tags with One Click OPC:

  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. To begin the One Click OPC process select the Group you would like to import to in the Tag configuration. If you want to import to the Root Level, select the Tags Group at the top of the tree.
    Then select the One Click Import button on the top menu bar.

  4. Click on the Import OPC DA 2.XX or 3.0 Items Button in the pop up window.

  5. Use the One Click OPC Wizard to browse for a branch as a starting position within an OPC Server or just select the OPC Server name itself to add all items from the selected OPC Server. For the best networking design select OPC Servers from Local even if you are configuring a remote OAS Service.

  6. Select to enable the options to Get Data Type from OPC Server and optionally the Descriptions.
    Additionally if you want to specify to Trend all of the points select Trend Points.
  7. Click Add Tags and it will automatically add all of the OPC Items from the OPC Server Branch you have selected and all of the sub Branches beneath it.
  8. Select the Save button on the toolbar at the top.

For more detailed instructions on Configuring OPC Server Tags, visit our Getting Started OPC tutorial or the One Click OPC tutorial or watch the video tutorial below:


Step 3. 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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View OPTO Data in a Web Browser

How to View OPTO Data in a 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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View Allen Bradley Data in a Web Browser

How to View Allen Bradley Data in a Web Browser

Open Automation Software Tags can be defined to connect directly to Allen Bradley controllers with the built in ABLogix and ABClassic Driver Interfaces which support communications over Ethernet to ControlLogix, CompactLogix, GuardLogix, and Micro800 with the ABLogix driver, and MicroLogix, SLC 500, and PLC-5 with the ABClassic driver. Once you have connected to your Allen Bradley 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 Allen Bradley 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 Allen Bradley 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 Allen Bradley 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 Allen Bradley 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 either AB Classic for MicroLogix, SLC 500, and PLC-5 or AB Logic for ControlLogix, CompactLogix, GuardLogix, and Micro800 from the Driver dropdown box.

  6. Enter a meaningful Driver Interface Name that you will refer to this physical connection when defining Tags with an Allen Bradley Data Source.
  7. Define the properties for the desired physical connection.
  8. Click the Add Driver button above the Driver list in the left pane to add the Driver Interface as an available selection when defining Tags in the next step.

For more detailed instructions on configuring your Allen Bradley data source, click here to see our Getting Started Allen Bradley 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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View Siemens Data in a Web Browser

How to View Siemens Data in a Web Browser

Open Automation Software can connect directly to Siemens controllers with the built in Siemens Driver Interfaces which support communications over Ethernet to S7-200, S7-300, S7-400, S7-1200, and S7-1500. Once you have connected to your Siemens 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 a Siemens 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 Siemens 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 Siemens 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 Siemens 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 Siemens 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 Siemens Data Source.
  7. Define the properties for the desired physical connection.
  8. Click the Add Driver button above the Driver list in the left pane to add the Driver Interface as an available selection when defining Tags in the next step.

For more detailed instructions on configuring your Siemens data source, click here to see our Getting Started Siemens 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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View MTConnect Data in a Web Browser

How to View MTConnect Data in a Web Browser

Open Automation Software Tags can be defined to connect to MTConnect Servers with the built in MTConnect Driver Interface. Once you have connected to your MTConnect 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 MTConnect 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 MTConnect 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 MTConnect 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 MTConnect 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 MTConnect 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 MTConnect Data Source.
  7. Leave Enable and Add Tags Automatically enabled.
  8. Specify the Live Data Url for the MTConnect stream.
  9. Click the Add Driver button above the Driver list in the left pane to add the Driver Interface as an available selection when defining Tags in the next step.

For more detailed instructions on configuring your MTConnect data source, click here to see our Getting Started MTConnect tutorial or watch the video tutorial below:


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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View Modbus Data in a Web Browser

How to View Modbus Data in a Web Browser

Open Automation Software Tags can be defined to connect directly to Modbus slave devices or host data to Modbus masters with the built in Modbus Driver Interface which supports communications over ethernet and serial interfaces for Modbus TCP, Modbus RTU, and Modbus ASCII protocols. Once you have connected to your Modbus 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 a Modbus 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 Modbus 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 Modbus 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 Modbus 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 Modbus 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 Modbus Data Source.
  7. Specify the Connection as Ethernet or Serial.
  8. Specify the Modbus Type as Master or Slave. Master will be used when communicating to a Modbus device. Slave will be used when other Modbus masters will be communicating to OAS.
  9. When setting up a Slave interface over Ethernet set the IP Address to the computer IPv4 IP address or network node name if the master is on a remote PC. You can also use 127.0.0.1 or localhost if the Modbus master will be on the same computer.

For more detailed instructions on configuring your Modbus data source, click here to see our Getting Started Modbus tutorial or watch the video tutorial below:


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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How to View MQTT Data in a Web Browser

How to View MQTT Data in a Web Browser

Open Automation Software tags can be defined to connect to MQTT devices and software brokers with the built in MQTT Driver Interface as both a client and a broker. Once you have connected to your MQTT 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 MQTT 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 MQTT 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 MQTT 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 MQTT 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 MQTT 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 MQTT Data Source.
  7. Enter the IP Address of the broker. The default port is 1883.
  8. Enter the User Name and Password if required.
  9. Set the Keep Alive Time. The default is 60 Seconds.
  10. Set the Reconnect Time. The default 10 Seconds. If the connection to the broker is lost the Reconnect Time determines how long to wait before attempting to reconnect.

For more detailed instructions on configuring your MQTT data source, click here to see our Getting Started MQTT tutorial or watch the video tutorial below:


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.

OAS Web interfaces are provided for use by both experienced developers and novice users. Use the Web HMI Dashboard to first test the interface to your live data. If you are experienced with HTML and CSS see Code for Developers section after the following HMI Dashboard no code solution.

HMI Dashboard – No Code

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Introduction
  • 00:08 – What’s Web HMI Dashboard
  • 00:20 – Features of a WEB HMI Dashboard
  • 00:23 – Secure Login
  • 00:31 – Modular Design
  • 00:37 – Configurable
  • 00:44 – Customizable
  • 00:49 – Lightweight
  • 01:05 – Demo
  • 01:33 – Alarm Dashboard
  • 01:39 – Trend Dashboard
  • 01:55 – Add a Dashboard
  • 02:04 – Add a Module
  • 02:59 – Built-in Modules
  • 03:04 – Numeric Tag Module Configuration
  • 03:59 – Add another numeric tag module / rewrite module
  • 04:53 – Boolean Tag Module
  • 05:00 – Boolean Tag Configuration
  • 05:56 – Display Multiple Tags with real time values
  • 06:04 – Tag Data Module Configuration
  • 07:09 – Alarms Module
  • 07:17 – Alarms Module Configuration
  • 08:21 – Trends Module
  • 08:28 – Configuration
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 11:47 – Application Set up
  • 12:00 – Open Service Control
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 13:35 – Configuration
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Open a browser to the Web HMI Dashboard at the following address:

http(s)://<server>:<port>/app/home

For example, if you are on the same machine as the OAS Service installation, you are not using SSL, and you are using the default port, the URL will be:

http://localhost:58725/app/home

Once presented with the Web HMI Dashboard login screen, enter in an OAS server credential, or leave blank to use the default server credential and click “Sign In“.

Upon successfully logging in, you will be presented with your personalized Web HMI Dashboard. If the application is in Demo Mode, you will be provided with some demo dashboards and you will see live data flowing into each module.  All modifications to your dashboard will be saved within your login and remembered for your next session.

Additional Configuration Settings

By default, the Web HMI Dashboard will run in Demo Mode which will do the following:

  • All logins no matter the credentials, will be allowed to log into the application and be provided individual dashboard settings
  • New logins will be pre-populated with demo dashboards

To alter any application configurations, locate the Web HMI Dashboard directory located in the installation directory for Open Automation Software. This is typically in C:\Program Files\Open Automation Software\OAS.  The Dashboard directory is labeled “www“.

Within this directory, look in the “js” directory and locate the file app_config.js. This is a JSON file containing application settings.

oas_url : optional hard-coded URL of the OAS server location. Omit this setting and the application will assume the server:port used to connect to the app
show_login_url : <true | false> determines if the OAS url can be supplied by the user in the login screen to point the application to a specific OAS service
session_timeout : <integer> number of minutes of inactivity before the user session is ended and the login screen is displayed
demo_mode : <true | false> enables or disables demo mode
demo_dashboards : a JSON representation of the demo dashboards pre-populated for new users in demo_mode

Code for Developers

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:

How do I show different images from multiple states?

Create 5 tags of the Data Type Boolean and set the Data Source to Calculation. Then in the calculation field you would add the logic to convert the integer value to a Boolean state. For example, if you wanted to set a Calculation to True when an integer tag equals 3, it would look like this:
 
[SomeIntegerTag.Value] = 3
 
Then after setting up the 5 Boolean tags you set them up in a group in the oas-tag-src attribute of the image tag in HTML:
 
<div id=’test’ oas-tag-src='{

    “type”: “group”,
    “all_f”: “DefaultImageUrl”,
    “bad_q”: “BadDataQualityUrl”,
    “group”: [
        {
            “tag”: “SomeTag01.Value”,
            “config”: “SomeImageUrl01”
        },
        {
            “tag”: “SomeTag02.Value”,
            “config”: “SomeImageUrl02”
        },
        {
            “tag”: “SomeTag03.Value”,
            “config”: “SomeImageUrl03”
        },
        {
            “tag”: “SomeTag04.Value”,
            “config”: “SomeImageUrl04”
        },
        {
            “tag”: “SomeTag05.Value”,
            “config”: “SomeImageUrl05”
        }
    ]
}’></div>
 
As long as the 5 states are mutually exclusive and only one can be true at a time, your image will switch to the associated image in the group section of the attribute. If none are true, it will default to the all_f URL, and if any tag in the group has bad data quality, the image will switch to the URLin the bad_q section.
 
For more information on Calculation Tags and how to use them, see the following: