Niagara Px Tooltip

Overview

The px tooltip widget allows you to show a px page as a tooltip. When the px page appears as a tooltip, you have full interaction of its content. This widget has multiple options such as position, style, click or hover, timing, etc. This widget works best in browser mode. Before you start, copy the .jar file to your modules directory. Restart the station and Workbench.

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 pxTooltip-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.

Because the widget is transparent, it best to layer it in the widget properties as so:

Tridium px tooltip

Note: it won't appear in the px editor, but when you browse to it in browser you can see it is transparent. Or you can toggle the browser preview in workbench > 4.7. :
px tooltip

Properties

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

Tooltip Ord:

The is the web url of the px page. Its best to log into the station via web browser and navigate to the px you want and then copy it into this setting. Examples:
Fullscreen:
/ord/station:%7Cslot:/Drivers/Graphics/Widgets/Niagara$20History$20Chart|view:?fullScreen=true

Without Fullscreen:
/ord/station:%7Cslot:/Drivers/Graphics/Widgets/Niagara$20History$20Chart
Note: depending on your niagara version, the url might vary slightly.

Height, Width:

Size of the transparent box on screen. In pixels.

Tooltip Height, Tooltip Width:

When the tooltip appears on screen, the size it will appear. In pixels.

Trigger:

click or hover.

Id:

Change this if you have other px tooltips on the px page. This will allow them to have different colours etc.

Position:

Tooltip Position. Possible values are: right, left, top, top-right, top-left, bottom, bottom-right, bottom-left

Close Delay:

When the tooltip appears on screen, the delay before it closes by itself. In milliseconds. Default is 5000 (5 seconds)

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: {
                    //pointing nmodule at /module is a Niagara convention, allowing us to
                    //refer to module resources without having RequireJS get hung up on
                    //the use of absolute paths everywhere.
                    "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-3.4.1.min",
                    "Handlebars": "/module/js/rc/handlebars/handlebars.min",
                    "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",
                    "dialogs": "/module/js/rc/dialogs/dialogs",
                    "theme": "/module/themeZebra/ux/theme",
                    "pikaday": "/module/js/rc/pikaday/pikaday",
                    'log': '/module/js/rc/log/logPlugin',
                },
        
                hbs: {
                    disableI18n: true
                },
            }
        </script>
        <script type="text/javascript" src="/module/js/com/tridium/js/ext/require/require.min.js"></script>
        <script>
            require(['/module/pxTooltip/rc/pxTooltipWidget.run.js'], function (app) {
        
                app.initialiseValue({
                    divId: '#widget1',
                    cursor: 'pointer', // e.g. pointer, auto, help, grab, or leave blank
                    height: 50, // of the transparent object
                    width: 50,
                    id: 'my-tooltip1', // change this if you have other px tooltips on the px page. This will allow them to have different colours etc.
                    tooltipOrd: '/ord/station:%7Cslot:/Drivers/Graphics/Widgets/Niagara$20History$20Chart|view:?fullScreen=true',
                    tooltipBackgroundColor: 'transparent',
                    tooltipBorderColor: 'grey',
                    tooltipHeight: 500,
                    tooltipWidth: 500,
                    interactive: true,
                    closeDelay: 2000,
                    trigger: 'click', // hover or click
                    position: 'right', // right, left, top, top-right, top-left, bottom, bottom-right, bottom-left
                });
            });
        </script>
        </head>
        <!--html to go here-->
        <div id="widget1" style="width:300px;height:300px;"></div>
        <!--Rest of your html below...-->