Getting Started – Web HMI Dashboard

NOTE: The OAS Open UIEngine is a more feature-rich, no-code HMI and application development platform for your automations than the Web HMI Dashboard, which is a basic set of tools for visualization.
See the UIEngine Documentation to learn more.

View the following video demonstrating the Web HMI Dashboard.

  • 00:00 – Features of a WEB HMI Dashboard
  • 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
  • 04:53 – Boolean Tag Module
  • 05:56 – Display Multiple Tags with real time values
  • 07:09 – Alarms Module
  • 08:21 – Trends Module
  • 10:28 – Custom Module
  • 10:34 – Configuration
  • 11:16 – Demo Module
  • 11:43 – Getting Started
  • 12:58 – Open OAS Configuration App
  • 13:20 – Static Files
  • 14:46 – Removing a Module
  • 16:25 – Deploying to IIS
  • 18:41 – Conclusion

Step 1

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

Step 2

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

Step 3

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

Overview – Web HMI Dashboard

NOTE: The OAS Open UIEngine is a more feature-rich, no-code HMI and application development platform for your automations than the Web HMI Dashboard, which is a basic set of tools for visualization.
See the UIEngine Documentation to learn more.

The Web HMI Dashboard is a an application that utilizes Web HMI, Web Trend, and Web Alarm and comes included at no cost with any of these products.  It allows you to visualize real time and historical data from within desktop and mobile browsers without the need for any HTML coding to deploy it.

Since it is built upon the Web HMI product, it requires the installation and licensing of Web HMI.  However, it can be accessed without the installation of an additional web server, or you are free to install it on a web server of your choosing.

If you wish to integrate data into an existing web interface or your own application please see Getting Started WEb HMI, Web HMI Wizard, Web Trend, and Web Alarm for full flexibility to update any HTML element dynamically based on OAS live and historical data.

Log Buffered Data from a PLC or Controller

Getting Started-Data Logging 15

For high speed applications with data frequency up to 100 nanoseconds, or remote systems with intermittent connectivity data can be buffered in the device and logged easily using Open Automation Software with the following guide. OAS can log this buffered data in a wide table format to a database or CSV file.  This can be done with arrays or data queues in the controller.

View the following video for a complete demonstration on how to log 1 millisecond data from a controller:

This feature can be used with all data sources including Allen Bradley, Siemens, Modbus, OPC and OPC UA servers, .NET applications, and Universal Driver Interfaces running locally or remote.

When to use buffered data logging

  • Desired logging frequency is faster than communication rate to PLC or controller
  • Communication to the PLC or controller is intermittent

This guide will focus logging 3 values with 3 data arrays and 1 timestamp array.

The following simulation program will help easily simulate a controller data processing with the following application.
It is not to be used in for your final operation of logging buffered from a controller. It will help automated the tag setup and simulate data coming from a controller.
Array Data Emulator – Simulation of logging buffered data from a controller.
Download Array Data Emulator Sample Code
Note: The Array Data Emulator program you will need a license of the .NET Data Connector and Data Logging for an additional 4,007 Tags or in Demo Mode. If you need to test this feature on a production license and do not have these products contact our support team at support@oasiot.com.
You only need a Data Logging license and a Driver if using a controller as a data source.

Step 1

Create Handshaking Logic in Controller
In the controller or PLC define the following variables if they do not already exist. These variables and logic are simulated in the Array Data Emulator program.
Note: You can skip this step if you are using the Array Data Emulator in your first trial of buffered logging.

  • Values: Arrays containing queued values to be logged. The data type of the array can be anything you desire including Double Float, Single Float, Long Integer, Integer, Short Integer, Boolean, or Strings.
  • Timestamp: Optionally specify a String array containing queued timestamps for each sample in the value arrays. The values in each element would either be a date value or a string that would represent a date including milliseconds if desired.
  • Ready: Boolean variable that controller will set to true when the array values are all loaded and ready.
  • Confirmation: Boolean variable that will receive a confirmation that the values in the data array are received to be logged. When this value is set to true the controller will set this variable back to false, reset the array of values, and fill the array of the next set of data to be logged.
  • Error: Integer variable that will be set to an error code if there is a problem with the logging of data values.
  • Timeout: Internal time period the controller will wait for either the Confirmation bit or Error Integer after the Ready bit is set to true. If the time elapses without either Confirmation or Error after the Ready is set the controller will abort the logging and not reset the array and try the sequence again and post an error to the operator that logging has halted.

Create the following logic routines in the controller if they do not already exist.

  • Fill the Values array with the sequential values to be logged.
  • Set the Error integer to 0.
  • Set the Confirmation bit to false.
  • Set the Ready bit to true.
  • If the Confirmation feedback bit goes to true.
    • Clear the Values array.
    • Return back to the first step
  • If the Error feedback integer goes to non zero.
    • Inform operations that logging has halted.
    • Return back to the first step
  • If the Confirmation bit or Error integer are never received within the timeout period.
    • Inform operations that logging has halted.
    • Return back to the first step

Step 2

Create Tags
If testing without a controller run the ArrayDataEmulator.exe application from the bin/Release directory.


Click on the Create Tags button.

Run the Configure OAS application.
Select Configure-Tags and click on the Select button to the right of Network Node.

There you will see the Tags created by the Array Data Emulator program automatically which will be the same type of tags you can reuse or add manually for the controller communications. The Data Source is just set a Value for this emulation where you would set the Data Source to your controller’s communication driver.

  • Confirmation
    Data Type: Boolean
  • DateArray
    Data Type: Array String
  • Error
    Data Type: Integer
  • Ready
    Data Type: Boolean
  • ValueArray1
    Data Type: Double
  • ValueArray2
    Data Type: Double
  • ValueArray3
    Data Type: Double

Step 3

Setup Data Logging
From the Configure OAS application select Configure-Data Logging and click on the Select button next to the network node field.

Getting Started-Data Logging 1

Select the Local OAS Service by selecting the Select button or the Local node in the service tree to the left.

Getting Started-Tags 3

Getting Started-Tags 4

Enter the Logging Group Name of Test in the field in the upper right.

Check Logging Active in the Common Properties Tab.

Getting Started-Data Logging 3

Set the Logging Type to Event Driven.

Use the Browse button to set the Trigger Tag to “Buffer Test.Ready.Value”

Set the Confirmation Tag to “Buffer Test.Confirmation.Value”

Set the Error Tag to “Buffer Test.Error.Value”

Note: For the fastest transaction processing enable the property “Confirm With Success Immediately Before Database Write”.  This will send the confirmation back to the controller before logging the values to the database.  You can rely on the Data Buffer feature under Configure-Options to buffer the records to disk if there is a database engine error.

Step 4

Define Date and Time to Log
Select the Tags tab in the logging group.

Uncheck the property to Include Date and Time Field.

Note: If you want to include timestamps for your date the time should come from the controller. All OAS Data Sources receive the timestamp with the value source, but in this Event Logging time the Date and Time come from the Trigger Tag value, not the array values in the controller.

Select the Add Field button.

Getting Started-Data Logging 4

If you want to log timestamps with your values select the Tag Parameter Buffer Test.DateArray.Value.

Add [0] to the end of the tag name to log the first element and specify the number of elements to add, the same size of the array in the controller. If using the Array Data Emulator simulation enter 1000 as the Number of Elements to Add.
Click OK

Change the field name in the next dialog to DateAndTime or to the database column name you desire for the timestamps.

Note: If each individual sample needs to be accessed as individual tags you can use the Add Tag button to add additional tags.

Change the Data Type to Date/Time.
Click OK

Step 5

Define Values to Log
Select the Add Field button again to select the data arrays.

Getting Started-Data Logging 4

Select the Tag Parameter Buffer Test.ValuesArray1.Value.

Add [0] to the end of the tag name and specify the number of elements to add, the same size of the array in the controller or 1000 if using the Array Data Emulator.
Click OK

Change the field name in the next dialog to Value1 or to the database column name you desire for this array.

Note: If each individual sample needs to be accessed as individual tags you can use the Add Tag button to add additional tags.

Click OK

Repeat Step 5 for Value2 and Value3 or as many additional fields you wish to add. All should have the same array size by setting the Number of Elements to Add the same.

Step 6

Specify Database Table or CSV File
Select the Database tab of CSV Logging tab to define where the data will be logged. In this example we will log the data to SQL Server.

Getting Started-Data Logging 15

Logging to SQL Server or SQL Server Express
Use the following configuration for SQL Server. The Database and Table will automatically be created for you.

Note: You can download a free version of SQL Server Express from https://www.microsoft.com/en-us/sql-server/sql-server-editions-express.
When installing SQL Server Express also select the option at the end to install SSMS (SQL Server Management Studio) which you can use to set security Logins and to view the data that is being logged.

Check Log To Database

The Server name may need to be adjusted from localhost to the proper Server name of the SQL Server engine you wish to log to. This Server name can be found when first bringing up the Connect dialog of the SQL Server Management Studio.

Also the login method can be with Windows Authentication or SQL Server mode. Contact your database administrator if you are unsure of what login type to use.

Set the Database name to OASSimulation

Set the Table name to DataBufferTest

Log Array Data to SQL Server

Click the Add button at the bottom to add the data logging group to the OAS service.

Logging to Microsoft Azure

Use the SQL Server Provider and view the following guide to setup Microsoft Azure:

/knowledge-base/windows-azure-setup/

Logging to Oracle

If you are using Oracle you must first create the database. All other steps are the same as SQL Server except the provider should be set to Oracle.  Oracle does not create the database so you will have create the database manually.

If you do not have a TNSNAMES.ORA file or need to log to a remote database engine refer to the Frequently Asked Questions in this Data Logging topic.

Logging to mySQL, MariaDB, SQLite, MongoDB, PostgreSQL

All steps are the same as using SQL Server except the provider should be set to you desired provider.

Logging to Cassandra

Cassandra requires a primary key on the Date and Time and event logging without the Date and Time included is not permitted.

Logging to Comma Separated Variable Files

Use the following configuration for CSV text logging.

Make sure to create the directory OASSimulation on your C drive or specify a different file path that will exist.

Step 7

Activate Controller Logic or Data Emulator
After completing the above steps you can enable your controller logic or click on view the data in your database or CSV file.

If running the Array Data Emulator select Run Simulation.

The data is now ready to be viewed in your destination.
If logging to SQL Server use the SQL Server Management studio to view the contents of the table DataBufferTest under the OASSimulation database.

Here you will see all of the records at the sample rate you desire with continuous data from the date and time and values. Using the Array Data Emulator the sample rate is 1 millisecond. It can be even faster if your controller has a cycle time or can process sensor data and queue it into an array at a faster rate.
The source code of the Array Data Emulator is provided in the download so you can testing logging at a faster rate or change the size of the arrays to log.

Step 8

Save Configuration for Loading
Select the Save button on the toolbar at the top under Configure-Data Logging to save a file.
Select the Save button on the toolbar at the top under Configure-Tags to save a save the tag configuration file.
Go to Configure-Options and set the default Tag and Data Logging Configuration files you just saved.

Step 9

Data Buffer to Disk on Database Engine or CSV File Lock
Important: Enable Data Buffer To Disk under Configure-Options-Data Buffering on all data source Tag servers and data logging servers to retain data on a network failure, database engine failure, or if Excel has a CSV file open as it locks it for exclusive use.
Without this property enabled data buffering on failure will use up RAM of the operating system.

For more detailed information on each data logging parameter view the Data Logging section of this Knowledge Base.

How to Log Data to an Azure IoT Hub

This guide shows how to log data to an Azure IoT hub in three easy steps. 

 

STEPS

Follow the links to the OAS Help articles:

Make sure Open Automation Software is installed and the OAS Service is running

Configure your data source

Configure Azure data logging – this consists of three sub-steps covered in the article:

  • Create an Azure IoT Hub (Windows Azure website)
  • Create an IoT Driver
  • Route Live Data to your Azure IoT Hub

 

SEE ALSO:

How to Log Data From an AWS IoT Hub to a Database

How to Log Data From an AWS IoT Hub to a Database

Open Automation Software Tags can be defined to interface with AWS IoT Gateway with the built in AWS IoT Gateway Driver Interface. This tutorial walks you though downloading and installing OAS, configuring an AWS IoT Gateway driver, configuring tags and logging them to a database. Supported databases include SQL Server, Oracle, Access, PostgreSQL, Cassandra, MongoDB, MariaDB, SQLite, InfluxDB, MySQL, SQL Azure, Amazon Aurora, Amazon RDS, Amazon Redshift, Google Firebase, and CSV files.

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

The OAS Service Control application will appear when the installation finishes on Windows.  Use this application to start the 3 Services. Run the Configure OAS application on Windows and select Configure-Tags; if the first time running, the AdminCreate utility will run to create an Administrator login as shown in Step 1 of Getting Started – Security.


Step 2. Configure Your AWS IoT Gateway 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 AWS IoT 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 AWS IoT 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 AWS IoT Gateway 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 AWS IoT 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 AWS IoT Gateway data source, click here to see our Getting Started AWS IoT Gateway 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. Configure Data Logging

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


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


  3. A Logging Group screen will appear.


  4. In the Common Tab, you will determine your table format and type of logging you wish to implement.

  5. In the Tags Tab, you will select the tags you wish to log.

  6. In the Database Tab, you will select what type of database you will be logging to and enter the connection parameters. OAS can log to SQL Server, Oracle, Access, PostgreSQL, Cassandra, MongoDB, MariaDB, SQLite, InfluxDB, and MySQL.

  7. If you wish to log to CSV, you would configure that in the CVS Logging tab.

For more detailed instructions on Configuring Data Logging, visit our Getting Started Data Logging tutorial or watch the video tutorial below:


How to Create Visualizations/HMIs Using .NET WPF

This guide shows how to create .NET visualizations/HMIs in three easy steps. 

 

STEPS

Follow the links to the OAS Help articles:

Make sure Open Automation Software is installed and the OAS Service is running

Configure your data source

 

SEE ALSO:

How to Send Email Alarm Notifications for IoT

This guide shows how to send email alarm notifications for IoT events in three easy steps. 

 

STEPS

Follow the links to the OAS Help articles:

Make sure Open Automation Software is installed and the OAS Service is running

Configure your data source

 

SEE ALSO:

How to Create Web-Based Visualizations/HMIs

This guide shows how to create web based visualizations/HMIs using the OAS Web HMI product. 

 

STEPS

Follow the links to the OAS Help articles:

Make sure Open Automation Software is installed and the OAS Service is running

Configure your data source

Create web pages to display HMI. Use the Web HMI Wizard to quickly generate HTML code.

 

SEE ALSO:

How to Automatically Import OPC Tags

Open Automation Software One-Click OPC feature let’s you quickly and easily create tags by browsing an OPC Server 

STEPS

Follow the links to the OAS Help articles:

Make sure Open Automation Software is installed and the OAS Service is running

Tags can be automatically setup by using the One Click OPC feature that browses OPC Servers automatically and creates tags based on the OPC Items defined in the OPC Server. You can then delete tags from the configuration that you do not want.

 

SEE ALSO:

How to Log OPC Server Data to a Database

How to Log OPC Server Data to a Database

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. This tutorial walks you though downloading and installing OAS, configuring tags from your OPC Server and logging them to a database. Supported databases include SQL Server, Oracle, Access, PostgreSQL, Cassandra, MongoDB, MariaDB, SQLite, InfluxDB, MySQL, SQL Azure, Amazon Aurora, Amazon RDS, Amazon Redshift, Google Firebase, and CSV files.

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

The OAS Service Control application will appear when the installation finishes on Windows.  Use this application to start the 3 Services. Run the Configure OAS application on Windows and select Configure-Tags; if the first time running, the AdminCreate utility will run to create an Administrator login as shown in Step 1 of Getting Started – Security.


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. Configure Data Logging

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

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

  3. A Logging Group screen will appear.

  4. In the Common Tab, you will determine your table format and type of logging you wish to implement.
  5. In the Tags Tab, you will select the tags you wish to log.
  6. In the Database Tab, you will select what type of database you will be logging to and enter the connection parameters. OAS can log to SQL Server, Oracle, Access, PostgreSQL, Cassandra, MongoDB, MariaDB, SQLite, InfluxDB, and MySQL.
  7. If you wish to log to CSV, you would configure that in the CVS Logging tab.

For more detailed instructions on Configuring Data Logging, visit our Getting Started Data Logging tutorial or watch the video tutorial below: