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
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.
Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?
Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Copy the modules file to your modules directory. Restart BOTH station and Workbench.
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.
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.
Vertical/Horizontal:
For vertical placement, set horizontal widget setting to false. Maintain aspect ratio to false, and responsive to true. Padding should be 10,10,10,10. Also set the height value. On the actual point make sure the facets are setup correctly. e.g. min/max.
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...-->
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
