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.

NOTE: If you want to visualize your data in a desktop or mobile browser with zero programming, you may be interested in the OAS Open UIEngine .
The UIEngine is a robust no-code web application and HMI builder for developing rich user interfaces in a browser-based development environment.
See the UIEngine Documentation to learn more.

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:

font-awesome.min.css
jquery.dataTables.css
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>

Knowledge Base