We have a HTML5 project with and one of the requirements is to be able to click on an alarm in the alarm control and move to a specific page based on the alarm. Is that possible or would the alarm control need to be modified?

In the alarmbinding, add the following config field:

rowClickCallback : yourFunction

The callback passes one argument that represents the data in the row that was clicked.  You could then parse the data, which is just an array of all the fields in the alarm.

Web HMI Dashboard Modules

Modules are each self-contained, and files relative to each can be found in the installation directory under the modules folder.
At a minimum, under each module folder you fill find a module.js file and a style.css file. The module.js file is the core module executable, and the style.css contains specific stylesheet rules used by the module.  Some modules may contain other assets, such as the Demo Module.

Removing Modules
To remove a module from the application, you simply need to remove the reference to the module script and stylesheet within the index.html file. These references are found in the <head> element of the index.html file.  Once you remove these references, the module will no longer appear in the list of  of modules for users to select.

See lines 31 – 51 in the code below to locate the module references.

If you are interested in modifications to the Web HMI Dashboard, or would like to speak with us about creating a module specific to your application, Contact Us today!


Demo Module

The Demo Module is an example of an interactive, visual representation of a physical system, with pumps, valves, and fluid level sensors. You can click or tap on each of the valves and pumps to simulate fluid flowing into or out of the two tanks. The corresponding tags in the OAS server can be found under the WPF/New Tanks Demo structure that is present in the demo tags included with each installation.


Numeric Tag Module

This module allows you to display a real time numeric value rendered as a gauge. As values change, the needle will animate, indicating the current value.can be configured

Configuration settings

Tag Name: the tag to be visualized – click the icon to browse or manually enter the tag
Label: the text label displayed below the current value
Min/Max: the range that determines the needle position (default: 0/100)
Gain/Offset: optional multiplier and value offset applied to the raw value
Decimals/Units: number of decimal places to display, and unit suffix added to the value
Read/Write: when checked, displays an input field, allowing users to set the tag’s value


Boolean Tag Module

This module displays the current live value of a Boolean Tag. When configured to allow for read/write access, the display icon becomes a switch. If the switch is clicked or tapped, the server value will be toggled between True and False.  The display can also be customized so that True and False text can be replaced with text of your choosing.


Configuration settings

Tag Name: the tag to be visualized – click the icon to browse or manually enter the tag
Label: 
the text label displayed with the current value
False/True: optional text to display when the value is false or true, respectively
Gain/Offset: optional multiplier and value offset applied to the raw value
Text Scale: optional scaling % applied to text
Read/Write: when checked, changes the indicator to a switch icon and allows the user o toggle the value


Tag Data Module

This modules allows for the display of multiple server Tags along with their data type and real time values. This is very useful for checking the raw data coming from the server within a single tabular format. This module also allows the end user to modify Tag values when the Read/Write option is enabled.

Configuration settings

Label: the text label displayed above the grid
Tags: the list of tags to display – click the icon to choose one or more tags
Read/Write: when checked, adds an edit button next to each tag, allowing the user to set the tag’s current value


Alarm Module

This module encapsulates the Web Alarm viewer and allows the end-user to configure it to display the columns desired. It also allows users to configure the viewer to filter alarms by type, group, status, and priority. Because it is based on the Web Alarm product, it retains all functionality. See the following for more information on Web Alarm.

Configuration settings

Label: the text label displayed above the alarms
Show Search/History: when checked, display the inline search and historical input fields
Alarm Types: list of Alarm Types to include in the display
Alarm Groups: a comma-delimited list of Alarm Groups to include in the display, defaulting to all if left blank
Network Nodes: a comma-delimited list of Network Nodes to include in the display, defaulting to localhost if left blank
Columns: list of Alarm fields to display in the grid
Include Alarms: list of Alarm statuses to include in the display
Priorities: the min and max priorities to include in the display


Trend Module

This module encapsulates the Web Trend viewer and allows the end-user to configure it to display a chart plotting both real time and historical trends. Because it is based on the Web Trend product, it retains all functionality, but requires no programming to configure. See the following for more information on Web Trend.

Configuration settings

Label: the text label displayed above the chart
Sample Rate: the frequency (in seconds) for each data point to be acquired
Timeframe: the number of seconds in the initial data set
Retain: The number of data points to retain in client memory – as more data is received, the chart will animate as it flushes non-retained values
History Data: when checked, allows users to select start and end dates for displaying historical data
Pens: click Add Tag to add a pen linked to a server tag. Each tag will include settings for Name, Label, Line style, and Y-axis range and position


Custom Module

This module allows you to specify any web URL so you may embed your custom code into the Web HMI Dashboard. You can either host the contents of a Custom module on any web server, or you may also add it to the modules folder in the application itself.

The module has a single parameter of a URL. When you use an absolute URL (containing the full URL such as “http://someurl.com/page”), the module will load from the source.  If you use a relative URL (e.g. “somepage.html”) it will be loaded from the Web HMI Dashboard www folder. For example, if you create an HTML page titled index.html and you put it in a folder titled “newModule” under the modules folder, set the URL parameter to “modules/newModule/index.html”.


If you are interested in modifications to the Web HMI Dashboard, or would like to speak with us about creating a module specific to your application, Contact Us today!

Web HMI Dashboard Deployment

Default installation – No web server required

Once you have configured the Web HMI Registration host and port within the steps defined in Getting Started, you can now access the Web HMI Dashboard from your browser.
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

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 (x86)\Open Automation Software\OPC Systems.NET.  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

Standalone web server deployment

If you choose to host the Web HMI Dashboard on your own web server, simply copy the contents of the www directory (described above) to the web server like any other static files. Be sure to include all files and folders within the www directory.

NOTE: when hosting the Dashboard on a separate server, you must alter the app_config.js setting for oas_url. This must be the server:port of the OAS server hosting the live data. This setting must be in the form:

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

 

Getting Started – Web HMI Dashboard

Step 1

To use the Web HMI Dashboard you must first register the Web HMI libraries. This is done with the OAS Service Control Manager with the Web HMI Registration (highlighted below).

Define the exclusive Node Name and Port Number  that is to be supported. The Node Name should be the registered domain name, IP address, or network node name that all clients will connect to from their browsers. It can also be left as localhost.

The Port number is set to 58725 by default, but can be changed to any available port on the server.  You may also select Use SSL if you choose to require an SSL connection for all Web HMI communications, including the Web HMI Dashboard.  If you choose to use SSL, you must select which SSL Certificate to use with the service. SSL requires that a server certificate be present and installed on the server where the OAS Services are installed.

Once you have configured the Web HMI Registration fields using your desired settings, click Register to set the server registration. If your services are running, you will be asked if you would like the services to be stopped, as it is required for the registration to be completed.

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 (x86)\Open Automation Software\OPC Systems.NET.  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