Create Station HTML Pages

Niagara has a built in web server allowing you to serve up html files and pull in data from station objects, e.g. numeric points, booleans, etc. For this example, I will use the Simple Line Chart as an example. The chart binds to a point and runs a history BQL query to bring in data.

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/simpleLineChart/rc/simpleLineChartWidget.run.js'],
        function (app) {

            app.initialiseSimpleChart({
                backgroundColor: '#3D3D3D',
                borderColor: '#727272',
                borderThickness: 4,
                dateFormat: 'd/M/yy',
                divId: '#widget1',
                historyBql: "|bql:select timestamp,value as 'Kw' order by timestamp DESC",
                legendLocation: '100,120',
                limit: 10,
                lineColor: '#1f77b4',
                offset: 0,
                ord: 'station:|slot:/Drivers/NiagaraNetwork/AHU2',
                padding: '60,80,60,80',
                titleFontColor: '#fff',
                titleFontSize: '16px',
                titleFontWeight: 'bold',
                titleXOffset: 50,
                titleYOffset: 40,
                title: 'Chart 1',
            });
        });
</script>

</head>  
<!--Rest of your html below...-->

4. Change the above configuration values as required.

Add your own CSS file

1. Using the demo1.html file created above, you can also use your own CSS for further customisation. Add the following before the closing head section to bring in your css. (Note: the following href points to the default css file within the module):

    <link rel="stylesheet" href="/module/simpleLineChart/rc/simpleLineChartWidget.css" type="text/css" />
                                

2. The default CSS file is as follows. Modify as needed:

 
    .demo1 {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        float: left;
    }

    .bajaux-widget-max {
        background-color: white;
        overflow: hidden;
        height: 300px;
        width: 300px;
        display: inline-block;
    }

    .bajaux-max {
        overflow: hidden;
        height: 100%;
        width: 100%;
        display: inline-block;
    }

    .SimpleLineChartWidgetOuter {
        overflow: hidden;
        height: 100%;
    }

    .bajaux-widget-outer {
        overflow: hidden;
        height: 100%;
    }

    .bajaux-widget-outer > div.SimpleLineChartWidgetOuter.bajaux-widget {
        overflow: hidden;
        height: 100%;
    }

    .SimpleLineChartWidget .title text, .SimpleLineChartWidget .valueText text {
        font-size: 16px;
        font-weight: 100;
    }

    .SimpleLineChartWidget .label text {
        font-size: 13px;
    }