Niagara Toggle Switch Button


  • Drag n' Drop
  • Binds To Enum Writable
  • Renders in all major browsers
  • Clean pristine animation
  • 3 Different States
Add to Cart
n4 charting

Overview


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.

Usage


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.

n4 graphics


Properties


bms toggle switch

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:

enum range



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/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>
                                    

You May Also Like





Alarm Notification Icon

N4 View Builder™©

tridium bms system

Alarm Acknowledge Table

alarm acknowledge table

back to more widgets...