Getting Started – Web Alarm

The HTML Alarm feature is included with the OAS Web Alarm product feature.

For full reference information visit Programming Reference – Web Alarm

Example: Simple Web Alarm

The following sample illustrates how to display real time web alarms as well as enabling a feature to switch between real time and historical alarms.

Step 1

To use the HML Alarm control you must first register the Web HMI libraries.  This is done with the OAS Service control manager with the Web HMI Registration.

Define the exclusive port number and Node Name 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.

Using SSL with Web Alarm is fully supported.
Read more about Configuring OAS to use SSL for Web and REST API products.

IoT Web HMI Dashboard start services dialog

Note: The Node Name should be set to the Network Node Name, IP Address, or registered domain name that all client applications will browse to.  This will be the serverURL that all HTML clients will specify.

Note: Networking to other OAS Services is easily supported by defining the IP Address, Network Node Name, or registered domain name in the HTML code for the client.  Use the HTML HMI Wizard to define the remote networking nodes to multiple remote services relative to where the web project is hosted.

Step 2

Be sure to follow instructions for configuring Web HMI as the Alarm Control is an extension of that library.

In addition to the 3 previous script libraries (jQuery, json2, and opc-lib-min) copy one additional file from the same source location (C:Program Files (x86)Open Automation SoftwareOPC Systems.NETHTML_HMIjs) to the same destination as the others, placing it a datatables directory:

  1. jquery.dataTables.min.js

Step 3

In the head section of the HTML file, add the following script library reference:

Step 4

Next, copy 3 additional css files into the css directory:

  1. font-awesome.min.css
  2. jquery.dataTables.css
  3. opc-alarm-style.css

Step 5

In the head section of the HTML file, add the following script references:

Step 6

Once you have an HTML file set up and successfully running HTML, modify the OPC_config script to look like the following:

Note: As with the Web HMI configuration, you must specify the serverURL that includes the Node Name and Port Number that has been registered by the OAS Service Control Manager.

Step 7

In the body of your HTML, add an element where the alarm control will be drawn, using the following bit of HTML:

Note: The id of the div element is “alarm1“, which matches the alarmid configured in the previous step.

Step 8

Save the HTML file and add it to your application in the same way as other Web HMI web pages. The complete file should look like the following: