Niagara Toggle Switch Button
- Drag n' Drop
- Binds To Enum Writable
- Renders in all major browsers
- Clean pristine animation
- 3 Different States
The Tri State Switch binds to an EnumWritable and can control up to 3 different states. For example, On/Off/Hand. Switch between states easily for quick control. Its completely configurable and easy to use.
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 triStateSwitch-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 widget has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required.
Main Ord Binding:
Set this to an absolute ord, e.g.
station:|slot:/Drivers/NiagaraNetwork/EnumWritable or relativized ORD e.g.
slot:EnumWritable
The ord should point to a enum writable.
Example Enum Range:
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/triStateSwitch/rc/triStateSwitchWidget.run.js'], function (app) {
app.initialiseTriStateSwitchWidget({
backgroundColor: '#ececec',
buttonHeight: '27px',
buttonWidth: '103px',
fontColor: '#929292',
fontFamily: 'Poppins, sans-serif', // e.g, Helvetica, Arial, sans-serif
fontSize: '16px',
divId: '#widget1',
height: '32px',
labelHeight: '30px',
labelWidth: '100px',
ord: 'station:|slot:/Drivers/NiagaraNetwork/EnumWritable', // use absolute ord
width: '318px',
});
});
</script>
</head>
<!--Rest of your html below...-->
<!--widget to go here-->
<div id="widget1" style="width:300px;height:300px;"></div>
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
