Real Time and Historical Alarms

With very little code and configuration, you can embed an active real time Alarm Control in your web application. Features of the Alarm Control include:
  • Configurable column selection and labeling
  • Pagination and Sorting
  • Fast, client-side filtering for ad-hoc searches
  • CSS customizable color schemes to indicate alarm status
  • Double-click alarm acknowledgement
  • Real time and historical modes
  • Optional server-side filtering to limit bandwidth
  • Client-side callbacks for customizing behavior and event handling

<!-- 
Setting up an Alarm Control is very simple and at its most basic form only requires:
1) A placeholder HTML element
2) Additions to the OPC_config object to determine the behavior

The following is the bare minimum HTML required to create the Alarm Control.  The inline style of "width:100%" is just used to ensure that the rendered grid of alarms fits the width of the container, no matter what the size is.
-->

<div id="trend1" style='width:100%;'></div>
      

/*
Configuring the Alarm Control
In the OPC_config object, an alarm_binding must be included.
The alarmid corresponds to the HTML element id in which the control will be rendered.
To use all of the default settings, no other entries need to be included.
*/

OPC_config = {
  token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
  serverURL: 'http://your.server.address:58725/',
  alarm_bindings:[ { alarmid:"alarm1" } ]
};

/*
Below is an example of an alarm_binding that defines the visible columns and overrides some default settings
*/

OPC_config = {
  token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
  serverURL: 'http://your.server.address:58725/',
  alarm_bindings:[ 
    {
      alarmid:"alarm1", 
      showHistory:false,
      filter: {
        alarmtypes : ["Digital", "High", "High High", "Low", "Low Low"]
      },
      columns: [
        { name: "AlarmDateTime", text: "Alarm Date/Time", type: "datetime", visible: true, sort: 'desc', width: '130px', searchable: false }, 
        { name: "Active", text: "Active", type: "boolean", visible: true, width: '50px', align: 'center' }, 
        { name: "AlarmValue", text: "Alarm Value", type: "string", visible: false, align: 'right' }, 
        { name: "Text", text: "Text", type: "string", visible: true }, 
        { name: "AlarmType", text: "Alarm Type", type: "string", visible: true }, 
        { name: "Acked", text: "Acked", type: "boolean", visible: false }
      ]
    }
  ]
};