Scada Alarm Widget

Scada Alarm


The Scada Alarm Widget overlays any color over any PNG image to show it in a different color. This color filter applies a matrix transformation on the RGBA color and alpha values of every pixel on the input graphics to produce a result with a new set of RGBA color and alpha values. Also check out the Alarm View Template.


1. Copy the scadaAlarmWidget-ux file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.

Scada Alarm Widget

Widget Properties


The widget has a few configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:

Main Ord - Widget Binding

Set this to an absolute ord, e.g. station:|slot:/Drivers/NiagaraNetwork/AHU5
relativized ORD e.g. slot:AHU5
This property should point to an appropriate point that has an appropriate alarm extension.

Alarm States Besides no alarm, the Niagara alarm mechanism has 3 other states that you should be wary of.

1. Unacknowledged

An alarm has occured but is un-cleared and unacknowledged by the system. Usually RED in color. Image

2. Acknowledged Uncleared

An alarm has occured and has been acknowledged by the system but still in an alarm state. Usually ORANGE/YELLOW in Color. Image

3. Cleared

An alarm is no longer in an alarm state, has been recently cleared, but waiting an acknowledgement by the system. Usually GREEN in Color. Image

In order to properly apply the color to the image, this property must be in the correct format. The matrix has five columns and four rows. Each row represents one of the output numbers: R,G,B,A. The columns represent your input RGBA and a constant 1. You calculate the output value for each row by adding up each of the values in the row multiplied by the corresponding input value.

1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0

Use an online editor to set up your colors:

Alarm Icon You can overlay any PNG image to use as the alarm image. Use an image with a transparent background. The image must exist in the appropriate station directory. If no image is set, the default image embedded in the widget is used (indicator.png).

Background Color The default is transparent. If your px/html page has a different color, set this property to match it.

Viewing in Workbench Because of the advanced HTML5 features this widget uses, you must set niagara.jxbrowser.disable=true in your file.

Using in your HTML Page

You can now use the widget in your custom html page as long as the html file is in a appropriate station directory.
E.g. C:/../stationName/shared/webfiles/demo1.html

1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:

<script type="text/javascript">

    var require = {
        paths: {
            "nmodule": "/module",
            "baja": "/module/bajaScript/rc/plugin/baja",
            "bajaScript": "/module/bajaScript/rc",
            "bajaux": "/module/bajaux/rc",
            "lex": "/module/js/rc/lex/lexplugin",
            "css": "/module/js/com/tridium/js/ext/require/css",

            "jquery": "/module/js/rc/jquery/jquery-2.1.1",
            "Promise": "/module/js/rc/bluebird/bluebird",

            // these are runtime dependencies
            "hbs": "/module/js/rc/require-handlebars-plugin/hbs",
            "i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
            "json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
            "underscore": "/module/js/rc/underscore/underscore",

        hbs: {
            disableI18n: true
<script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
    require(['/module/scadaAlarmWidget/rc/'], function (app) {

            backgroundColor: 'transparent',
            ord: 'station:|slot:/Drivers/NiagaraNetwork/last',  // use aboslute ord
            imageOrd: null, // e.g.: 'file:^Congestion.png'
            alarmUnackFeColor: '0.95 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0',
            alarmAckUnclearedFeColor: '0.97 0 0 0 0 0 0.54 0 0 0 0 0 0 0 0 0 0 0 1 0',
            alarmAckClearedFeColor: '0.15 0 0 0 0 0 0.74 0 0 0 0 0 0 0 0 0 0 0 1 0',
            divId: '#widget',
<div id="widget" style="width:50px;height:50px;"></div>
<!--Rest of your html below...-->


Widgets and drivers must be licensed with us. Licenses are bound to the stations host Id. You will be provided access to the Software and Licensing Portal where you can manage your own licenses. Here you can add, update, or delete licenses as needed.

There are few ways to get a license file:

1. Add our licensing module to your station services. This module automatically retrieves the license from our servers and saves it to your stations shared folder directory.

2. Alternatively, Login to the Software and Licensing Portal (link provided in Order Confirmation) and add your host id's as needed. Copy the license file to the stations shared directory.

Finally, make sure the station user has access to WLicenseService in the user management and category service section.

Niagara Licensing

Niagara Dashboard

Niagara IOT technologies and modern toolsets allow you to build a powerful Niagara dashboard which is real time, data-driven, and cost effective. Our widgets are purpose-built by providing information with faster communication through real-time, data-driven, dashboards for web, desktop and mobile devices. You can now create a cutting-edge display of conventional HVAC system graphics, Dashboards, Alarms & Scheduling, Historical Data, and Analytics.

You May Also Like

Time Schedule Widget

Toggle Switch Button

Alarm Acknowledge Table

back to more widgets...