N4 Linear Gauge


  • Drag n' Drop
  • Binds to numeric point or numeric writable
  • Configurable Color Segments
  • Vertical or Horizontal Orientation
  • Shows Tooltip Value
  • Updates in Real-Time
Add to Cart
n4 linear gauge

Overview


The linear gauge shows a numeric value on a spectrum line with coloured segments. Bind the widget to a numeric point/writable. The min/max range are taken from the facets. The segment colours are configurable to different start/end points. Tick marks and labels can also be configured. The triangular needle changes colour based on the value within the spectrum and also includes a tool tip when hovered over with the mouse. You can also set the orientation to vertical by setting the horizontal property to false. The value and needle updates in real-time. The gauge has a number of configurable properties that can be used to modify look, feel, and functionality.

Usage


1. Copy the linearGauge-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.

N4 linear gauge


Properties


bms totals chart properties

The gauge has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required.

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

Changing Widget Properties - most properties are self-explanatory but some require some explaining.

Ord: Main widget ord binding. Absolute or relative ord. Its important the facets are setup correctly on your point. The min/max range of the gauge is taken from the segments.

Segments: You can have up to 7 segments. You can also duplicate a colour if you want it to span over 2 or more segments.

Tick Label: Example: '-150,-100,-50,0,50,100,150', To skip a tick clear the value. For example -150, , -50, 0, 50, 100, 150 would like no tick label after -150.

Tick Interval: How ofter a tick should appear. If you have a min/max range of 300, a value of 50 would place 5 ticks on the gauge. Default if 50.

Background Property.

The canvas background (the area behind the widget) does not go transparent in Workbench View unless you toggle the 'Toggle Browser Preview' button. All browsers are ok.

Height/Width:

Set these values to specify an exact height/width for the gauge canvas.

Maintain Aspect Ratio/Responsive:

Set these value to true or false to scale properly on screen.



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:/../station/shared/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",  // For N4.4 or higher use /module/js/rc/jquery/jquery-3.2.0.min
                    "Promise": "/module/js/rc/bluebird/bluebird",

                    // these are runtime dependencies
                    "hbs": "/module/js/rc/require-handlebars-plugin/hbs", // For N4.4 or higher use /module/js/rc/handlebars/handlebars.min-v4.0.6
                    "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>
        <script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
        <script>
            require(['/module/linearGauge/rc/linearGaugeWidget.run.js'], function (app) {

                app.initialiseLinearGauge({
                    axisWidth: 8,
                    axisColor: '#c5c7cf', // not used if color ranges are used
                    backgroundColor: null, // '#ff0000' format
                    divId: '#widget1',
                    height: null, // use this to override the canvas height
                    horizontal: true, // set to false for vertical
                    fontFamily: 'Poppins, sans-serif',
                    fontColor: '#000000',
                    fontSize: 14,
                    maintainAspectRatio: false,
                    ord: 'station:|slot:/Drivers/NiagaraNetwork/CFM', // use absolute ord for html
                    padding: '10,10,20,120', // Top, bottom, left, right
                    responsive: true,
                    startValue0: 177,
                    endValue0: 187,
                    segmentColor0: '#D3260D',
                    startValue1: 187,
                    endValue1: 197,
                    segmentColor1: '#f46753',
                    startValue2: 197,
                    endValue2: 207,
                    segmentColor2: '#ffd933',
                    startValue3: 207,
                    endValue3: 217,
                    segmentColor3: '#71ca70',
                    startValue4: 217,
                    endValue4: 227,
                    segmentColor4: '#ffd933',
                    startValue5: 227,
                    endValue5: 237,
                    segmentColor5: '#f46753',
                    startValue6: 237,
                    endValue6: 247,
                    segmentColor6: '#D3260D',
                    tickColor: '#ffffff',
                    tickLabels: '177,187,197,207,217,227,237,247', // to skip a tick clear the value. For example -150, , -50, 0, 50, 100, 150 would like no tick label after -150
                    tickInterval: 10, // how ofter a tick should appear. If you have a min/max range of 300, a value of 50 would place 5 ticks on the gauge
                    width: null, // use this to override the canvas width
                });
            });
        </script>
        </head>
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->
                                    

You May Also Like





Spectrum Gauge

niagara status

N4 View Builder™©

tridium bms system

Floor Plan Zoning

niagara floor plan dashboard

back to more widgets...