Scada Alarm Widget

  • Applies Color over PNG Image
  • Updates in Real-time
  • Use Any Image
  • Modify Colors to Your Style
  • Works in Workbench and Modern Browser
Add to Cart
n4 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.jar 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


Scada Alarm Widget

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.:

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',
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->

You May Also Like

Advanced Alarm Table

N4 View Builder™©

tridium bms system

Alarm Acknowledge Table

back to more widgets...