Niagara Value Tooltip (FREE)


  • Binds to Value
  • Shows Tooltip
  • Updates in Real-time
  • Use Your Styling
  • Works in Workbench and Modern Browser
Add to Cart
show Value Tooltip

Overview


The value tooltip widget shows the current value of a numeric point. When a cursor is positioned over the value a tooltip is displayed. The widget 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?

Usage


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 valueTooltip-ux 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.

Tridium value tooltip


Properties


niagara value tooltip properties

The widget has a few configurable properties that can be used to modify look, feel, and functionality.

Ord Binding
Set this to an absolute ord, e.g.
station:|slot:/Drivers/NiagaraNetwork/AHU5 or relativized ORD e.g.
slot:AHU5

Location:

Location of tooltip, e.g. top, right, bottom, left

Height, PositionLeft, PositionLeft:

Use in conjunction together to place anywhere on screen.

Colors:

When changing colors, all tooltips on screen are affected.



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",
                    "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>
        <script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
        <script>
            require(['/module/valueTooltip/rc/valueTooltipWidget.run.js'], function (app) {

                app.initialiseValue({
                    divId: '#widget1',
                    height: '', // set with height, position left, and position right
                    ord: 'station:|slot:/Drivers/NiagaraNetwork/Temp', // use absolute ord
                    location: 'right',
                    padding: '0.8em 1em',
                    positionLeft: '',  // set with height, position left, and position right
                    positionRight: '', // set with height, position left, and position right
                    textPadding: '0 0 0 0',
                    tooltipColor: '#050505',
                    tooltipFontColor: '#ffffff',
                    tooltipFontFamily: 'Poppins, sans-serif',
                    tooltipFontSize: '14px',
                    tooltipFontWeight: 'normal',
                    valueFontColor: '#4d4d4d',
                    valueFontFamily: 'Poppins, sans-serif',
                    valueFontSize: '16px',
                    valueFontWeight: 'normal'
                });
            });
        </script>
        </head>
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->
                                    

You May Also Like





Floor Plan Zoning

N4 View Builder™©

tridium bms system

Icons Buttons

alarm messenger

back to more widgets...