Getting Started – Web Alarm

The following content will get you started with Web Alarm, building your own web user interfaces with real time and historical alarm data. If you are interested in visualizing your data in a desktop or mobile browser with zero programming, you may be interested in Getting Started with the Web HMI Dashboard.

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

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

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\Open Automation Software\OAS\HTML_HMI\js) to the same destination as the others, placing it a datatables directory:

jquery.dataTables.min.js

Step 3

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

<script type="text/javascript" src="js/datatables/jquery.dataTables.min.js”></script>

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:

<link rel="stylesheet" stype="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" stype="text/css" href="css/jquery.dataTables.css"/>
<link rel="stylesheet" stype="text/css" href="css/opc-alarm-style.css"/>

Step 6

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

OAS_config = {
    token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
    serverURL: 'http://localhost:58725/',
    alarm_bindings:[
      {
        alarmid:"alarm1", 
        showDelete: true,
        showHistory: true
      }
    ]
  };

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:

<div id="alarm1"></div>

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:

<html>
    <head>
      <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="js/opc-lib-min.js"></script>
      <script type="text/javascript" src="js/datatables/jquery.dataTables.min.js"></script>
      <link rel="stylesheet" stype="text/css" href="css/opc-style.css"/>
      <link rel="stylesheet" stype="text/css" href="css/font-awesome.min.css"/>
      <link rel="stylesheet" stype="text/css" href="css/jquery.dataTables.css"/>
      <link rel="stylesheet" stype="text/css" href="css/opc-alarm-style.css"/>
      <script type="text/javascript">
        OAS_config = {
          token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
          serverURL: 'http://localhost:58725/',
          alarm_bindings:[
            {
              alarmid:"alarm1",
              showDelete:true,
              showHistory:true
            }
          ]       
        };
      </script>
    </head>
    <body>
      <div id="alarm1"></div>   
    </body>
</html>


More: