Energy Wars Display

Details the infrastructure we're using for the Energy Wars eDisplay.

links

These are the eDisplays.

• [Buildings]
• [College Avenue]
• [National Road]

RPNL

This is how we're getting data from RPNL.

1. RPNL sends an email containing CSV to testcs128@cs.earlham.edu
2. testcs128 forwards it to ghcrows13@cs.earlham.edu from its .forward file
3. ghcrows13@cs.earlham.edu receives the email and does the following:
   1. appended to mail_longterm.csv
   2. mail.store overwrites mail.tmp
   3. mail.py does the lionshare of the work

mail.py does the following:

1. scrapes off CSV attachments
2. scrapes data from the CSV
3. generates formatted data for long-term storage
4. copies formatted data to ghcrows13@proto.cs.earlham.edu:/home/users/energy/contest/daily/tmp.csv
   • uses RSA keys to bypass passwords
   • usernames must be the same for RSA keys to work
5. executes ghcrows13@proto.cs.earlham.edu:/home/users/energy/contest/daily/rpnl_store.bash
   • uses RSA keys to bypass passwords
   • the script is executed by ghcrows13 on Proto
   • this user must have the correct permissions (must be in the energy group)
6. rpnl_store.bash copies the tmp.csv into the electrical_energy_rpnl database
   • we do it this way so that permissions are less of a hassle (local permissions are simpler than remote permissions)

Display

The display is written using html, javascript, and google charts. It displays average daily consumption when compared to a baseline. It's intended to represent smaller datasets.

Data

Overview

• Data is generated by ~energy/contest/daily/execute.bash
  • executed daily by energy's crontab
• Temporary csv files are stored in ~energy/contest/daily/tmp_data/
  • useful for desktop testing
• final csv files are stored in ~energy/public_html/development/EnergyWars/
• execute.bash has some options that you can change, including:
  • start and end dates for the baseline and the contest
  • the target database
  • name -- the prefix for CSV files
  • street -- that's the string that RPNL uses

Specifics

• execute.bash generates the daily, baseline, cumulative, and cumulative baseline
• each of these are a different .bash script
• it does this for buildings, national road, and college avenue
• an overview of what each script does:
  1. generates appropriate file names
  2. executes a dynamic SQL statement that's based on arguments
  3. stores the SQL response in a file
  4. reformats the data using ~energy/contest/daily/reformat.py
  5. stores the reformatted data in ~energy/contest/daily/tmp_data/
  6. copies the reformatted data to the destination

JavaScript

• the javascript isn't as organized as it could be
• visualization.js contains functions that create objects (charts)
• css.js contains functions for manipulating the classes of HTML objects
• chart.js, NationalRoad.js, and CollegeAvenue.js are very similar
  1. download daily power readings
  2. download baseline power readings
  3. create container object hip.data.building for building names, baselines, and power
  4. create a new dashboard with appropriate options
  5. download cumulative power readings
  6. download cumulative baseline power readings
  7. create container object hip.data.building for building names, baselines, and power
  8. create a new dashboard with appropriate options
  9. set the window resize function to redraw the chart
  10. draw the chart and intialize buttons
  • setDisplay() changes which buildings are enabled
  • setViewInterval() is for previous week / next week
  • flipViewZoom() is for zooming in / out
• gc_zoom.js changes the interval to switch between zoomed in / zoomed out
• global.js is used to intialize global namespaces and variables
• html_helper has a bunch of functions for getting and modifying the html
  • used to emulate buttons
• interval.js controls what interval is displayed
  • it's just an iterator
  • provides functions for changing instantly or gradually
  • can have its state stored/restored
  • can setView() to the interval
• hip.js contains:
  • get csv / csv to array functions
  • the animation class (for setting a chart's animation to a preset)
  • dashboard creator for this project
  • building container class

HTML

• the order in which javascript files are included is important
• make_chart() is executed on start up
• column 1
  • the display_buttons are generated in code
  • names are from the buildings / houses
• column 2
  • contains dashboard and chart
    • date_slider has to exist; it's a bug
    • not sure about cumulative
  • menubar contains the previous/zoom/next buttons
• column 3
  • contains the cumulative dashboard and chart

CSS

It's magic.