Joule Web App: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
< [[Main Page]] < [[Joule]] | < [[Main Page]] < [[Joule]] | ||
---- | ------ | ||
The Joule [http://www.cl.cam.ac.uk/meters/ Web App] is the main way to access the data recorded within the building, and explore it. | The Joule [http://www.cl.cam.ac.uk/meters/ Web App] is the main way to access the data recorded within the building, and explore it. | ||
| Line 9: | Line 9: | ||
==App Architecture== | ==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 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 [http://twitter.github.com/bootstrap/ Twitter Bootstrap] to give things a clean design. It also employs a number of Javascript libraries such as [http://jquery.com JQuery], [http://www.datejs.com Date.js] for data processing, and [https://github.com/mleibman/SlickGrid Slick Grid] and [http://mbostock.github.com/protovis/ 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 [http://ajaxstack.com/jsonreport/ 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. | 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. | |||
* JS File list? | * JS File list? | ||
Revision as of 17:26, 12 February 2013
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.
- JS File list?
- Frameworks etc used within the app, such as Protovis for graphing, Bootstrap for HTML layout.
- Description of data-flow through app from JSON -> graphics
* Explanation of javascript classes * What is need to set-up, test code etc.
- link to code on Github
