HTML Visualization
James Johnson
Tridium – Sales Engineer
Agenda
• Serving HTML from the station
• RequireJS config
• BajaScript
• Velocity templates
• Bajaux
• Embedding external web server content
• HTTP Header Providers – Content Security Policy
• Cloud dashboards and Niagara APIs
Serving HTML from the Station’s File System
• Files can be edited by anyone with write access, without any
source control or changelogs.
• Files are not versioned, so they cannot easily be upgraded or
distributed to multiple stations.
• Files are not relativized, so not easily used as views on
components.
• The HTML5 profile automatically provides the latest API
improvements.
• HTML files bypass the profile, so they are more vulnerable to
breaking when upgrading Niagara versions
Accessing HTML Files
• The file servlet provides access to files under the station’s shared file
space.
[Link]
• The file ORD scheme with the File Download View.
[Link]
ew
noSnoop
• The Niagara web server snoops content being served and potentially
modifies the HTML or CSS content such as replacing module ORD
schemes with module servlet requests.
• Snooping can be disabled in HTML by adding syntax to the top of the
file.
<!-- @noSnoop -->
• Snooping can be disabled in CSS by adding syntax to the top of the file.
/* @noSnoop */
Using JavaScript Libraries
• When serving HTML content from the station’s file system it may be
necessary to load JavaScript libraries such as BajaScript, d3, jQuery,
underscore and others.
• RequireJS from [Link] uses the Asynchronous Module
Definition (AMD) method of loading JavaScript code, which is a modular
script loader and will likely improve the speed and quality of your code.
• RequireJS can be loaded in an HTML page using script tags.
<script src="/requirejs/[Link]"></script>
<script
src="/module/js/com/tridium/js/ext/require/[Link]"></script>
local:|module://docDeveloper/doc/[Link]
HTML Example File
<!DOCTYPE html>
<!-- @noSnoop -->
<html>
<head>
<title>This is a BajaScript test page</title>
<script type='text/javascript' src='/requirejs/[Link]'></script>
<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/[Link]?'></script>
</head>
<body>
<h1>BajaScript test page!</h1>
<script>
require(["baja!"], function (baja) {
[Link]('station:|slot:/').get()
.then((station) => {
alert('Station name: ' + [Link]('stationName'));
});
});
</script>
</body>
</html>
BajaScript
• A framework for building web applications which includes
JavaScript APIs for getting data from the station
local:|module://docDeveloper/doc/jsdoc/bajaScript-
ux/[Link]
• Getting started with BajaScript tutorial
local:|module://docDeveloper/doc/jsdoc/bajaScript-
ux/[Link]
• The docDeveloper palette includes examples
Apache Velocity
• An open-source Java-based web template engine
[Link]
• Uses markup statements in an HTML document which reference
methods defined in Java code.
• The Velocity Template Language (VTL) is meant to provide the easiest,
simplest, and cleanest way to incorporate dynamic content in a web
page.
• VTL statements begin with the # character followed by a directive and
use variables stored in the Velocity context that begin with the $
character.
• module://docDeveloper/doc/velocity/[Link]
Velocity Servlet (axvelocity module)
• The servlet allows configuring the
servlet name (URL path) and
provides a manager view for
Velocity documents.
• The Velocity Doc maps to a Velocity
*.vm file.
• The Velocity Context elements
define the variable names used in
the *.vm file and bind the variable
to a component in the station.
AHU Velocity Example
Json Schema – History Query
Google Chart Velocity Example
Web Service – HTTP Header Providers
• Headers pass additional information with an HTTP request or
response between client and server.
• Consists of a case-insensitive name followed by a colon, then by its
value.
• Information ensures authenticity of the messages providing security
against click-jacking and other threats.
• [Link]
Content-Security-Policy (CSP)
• Response headers which control resources the user agent is allowed to
load for a given web page.
• Policies mostly involve specifying origins and script endpoints.
• Helps protect against cross-site scripting (XSS) and data injection
attacks.
• The default-src directive applies to other directives which are not
explicitly configured.
• Violation Text displays information when a browser client reports as
CSP violation to the station’s web server.
Google Chart Example 2
Google Gauge Example
Bajaux
• A framework that enables developers to create widgets for
Niagara using HTML5 and JavaScript
local:|module://docDeveloper/doc/jsdoc/bajaux-
ux/[Link]
• Getting started with Bajaux tutorial
local:|module://docDeveloper/doc/jsdoc/bajaux-ux/tutorial-
[Link]
• The docDeveloper palette includes examples
docDeveloper Linear Gauge Example
[Link] Example
[Link] Example
Embedding External Web Page Using Px
API Data Access
• oBIX
• Niagara Analytics web API
• Json Toolkit Json Schema
• HTTP Client driver String Servlet
• Custom Servlet
• Niagara Cloud Suite (NCS) using Niagara Data Service (NDS)
oBIX History Query
Niagara Analytics GetTrend
Json Toolkit Json Schema Exporter
HTTP Client String Servlet
Niagara Data Service
Grafana Dashboard Application Using API
Questions