Joule Web App

From C-Aware Project Wiki
Jump to navigationJump to search

< Main Page < Joule

The Joule Web App is the main way to access the data recorded within the building, and explore it.

This App fetches, combines / separates and processes the captured energy data, and then displays the data to the user, within a web browser. It carries out all data processing in-browser which negates the need for specific server software to be installed, and only relies on a standard web server able to serve up the static files needed for the app, and the data JSON files.

App Architecture

The application is split into multiple components, which are responsible for downloading energy data, processing said data, plotting the data and controlling the UI etc. The app uses HTML and CSS for displaying objects in the browser, and uses Twitter Bootstrap to give things a clean design. It also employs a number of Javascript libraries such as JQuery, Date.js for data processing, and Slick Grid and Protovis for the creation of dynamic tables and SVG charts respectively. The sensor and effort information is generated by creating a Javascript object, and displaying it using JSON Report.

On load the app pulls in a configuration JSON file, and uses this to configure itself for things likes the location of the data files, the index file location, the colours available to plot, the data to show on-load and any sensors that are misbehaving and whose data should be ignored etc. Based on the information in this file, it downloads the sensor index file and generates the tree structure that is shown on the left of the app, and also loads and plots the sensor specified to plot on launch, which is currently the overall Computer Lab energy usage.

Selecting a branch of the tree will show branches below it, and clicking a leaf will load the data associated with that leaf, such as individual sensor data or multiple data summed together.

Each sensor that is required to plot the selected information is downloaded through a cache layer to minimise duplicate downloads, and then each plot is processed by identifying the start and end dates of the requested information, and if that data exists historically. If it does not, for example a sensor has come online halfway through the date range selected, the user is notified via an information bar at the top of the app. This bar is also used if there is an error downloading sensor data etc. The data is then sorted through by date, as some data entries for certain times are flagged as errors by the indexing scripts. If this is the case, the sensor or group of sensors plot is flagged, and the chart will show a dotted line between the next and last know good points. Basic statistics are processed over each plot's data, which is used to update the table below the chart, as well as used for the Y-axis scaling options of the chart.

Data processing such as that described above all happens when a new sensor or group of sensors is selected / deselected, and the result is then plotted using the Protovis library to draw SVG graphs directly on the page, as well as updating the slick grid table below.

Clicking the show temperature button fetches data at the current date period displayed by the app from the computer labs weather station and plots it alongside the energy data, albeit with a different Y scale shown on the right of the chart.

Source Code

Source code for the application, including helper scripts etc can be found at .

The scripts directory contains the scripts used to generate the error and index files, and the config directory contains the JSON files needed to configure the app.

The location of the config.json file is hardcoded into the application, and currently points to . This contains information that points to the rest of the data available to the app.

Notable Files

A list of the key files, what they represent and how they are used within the app is included to provide an overview of how the major components of the app work together.


Most of the HTML files are self explanatory, they all include elements of the page to be manipulated by the running javascript.

The pages which feature Protovis plots, currently the line and stacked visualisation pages, have Protovis javascript inline with the document, inside <script type="text/javascript+protovis"> tags. this is because Protovis encourages use of ECMAScript standards that were not fully standardised and thus not interpretable by some browsers, thus it is run via the Protovis library which can only read scripts that are inline with the document.


  • WeatherJSONBridge.js

Class that provides access to the temperature information from the weather station on the Computer Lab roof, in a Javascript object format.

  • caware.ColourPool.js

A class used to set and mange a set of ids and their associated colours. Used to mange the colours of the plot lines.

  • caware.IntValueStore.js

A class to manage id and attributes associated with that id. Used to store ids used in the tree structure of sensors in the app, and the associated sensor(s) related to that id.

  • caware.JSONCache.js

Class that rovides an JSON download object cache, used for downloading files not accessed before, and keeping a cache to speed up data access to energy data files.

  • caware.JouleUIController.js

A class to handle control of the UI of the app which handles user action such as button presses and reported errors and updates the UI elements accordingly, sets up the app and controls the application state.

  • caware.PlotController.js

A class to control the creation, toggle, update and destruction of plots, prior to display. Also handles calculating which sensor files to download depending on the current view size, adding months to the view, flagging data points as erroneous and calculating stats based on the requested sensor information.

  • caware.SensorAccessor.js

A class to provide easy access to sensor data, stats etc from a sensor URL.

  • caware.core.js

A class to provide functions to create the sensor tree based on geographic or functional relationships.