Joule Web App: Difference between revisions
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
---- | ---- | ||
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. | ||
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. | |||
On load the app pulls in a configuration JSON file, and uses this to configure itself | |||
* Frameworks etc used within the app, such as Protovis for graphing, Bootstrap for HTML layout. | * Frameworks etc used within the app, such as Protovis for graphing, Bootstrap for HTML layout. | ||
Revision as of 17:26, 11 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.
On load the app pulls in a configuration JSON file, and uses this to configure itself
- 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
