EDisplay Code

Current Documentation

Version 4 of the site was started on Gitlab at https://gitlab.cluster.earlham.edu/green-science/eDisplay. Current and future documentation will be located there.

Energy Display Scripts Outline version 1.0

1. Java scripts harvest data directly from Modbus
2. Perl scripts collects this data and put it in the Postgress database "energy" under the table "electrical_energy"
   • electrical_energy attributes:
     • area - what building.
     • preal - kW hours for that instant.
     • date - date of harvest.
3. A final perl script (display/production|development/js-file-gen.pl) accesses this data and generates a .png graph using the Google graph API
   • This script takes one parameter for either the production or development branches.
4. The images generated (day, week, month, year) are put in a html frame on a page to display the data.
   • This page refreshes every 5 minutes

Energy Display Scripts Outline version 2.0

Postgres db

• Data stored in databse 'energy' under table 'electrical_energy'
• 'electrical energy' has the following attributes:
  • area - which building.
  • preal - kW hours for that instant.
  • date - date of harvest.

data_gen.py

• generates a JSON file filled with data from a sql call to the database.
• requires Python 2.5
• file run by cron

• Main(building_file)
  • Called from main loop.
  • Calls CreateBuildingList(), ConnectToDatabase(), GetAllData(), EncodeData(), DisconnectFromDatabase()

• CreateBuildingList(building_file)
  • Called by Main().
  • For each building in building_file add to a python list.
  • return that list.

• ConnectToDatabase()
  • Called by Main().
  • connects to 'energy' databse in Postgres
  • returns database connection and the current name of database.

• GetAllData(db connection, building list)
  • Called by Main().
  • makes a python dict of all data
  • calls GetBuildingData()
  • replace unwanted dates from older buildings
  • calls EqualizeDataValues()

• GetBuildingData(dbconnection, building)
  • called from GetAllData()
  • calls SetSQLQuery()
  • returns rows from sql call and row count

• SetSQLQuery(building)
  • called from GetBuildingData()
  • Makes a sql call to the databse energy from the table electrical_energy
  • returns rows from sql call and row count

• EqualizeDataValues(all_data, dates)
  • fills null values for dates of newer buildings.
  • returns all data

• EncodeData(all_data, dates)
  • Called by Main().
  • sorts all_data by date
  • dumps data in JSON file, note: columns are organized alphabetically.
  • initializes gviz metadata
  • calls LoadData().
  • writes JSON file which JS reads from.

• LoadData()
  • Called by EncodeData()
  • gviz api call
  • encodes data to JSON file with headers.

• DisconnectFromDatabase()
  • Called by Main().
  • disconnects from database 'energy'.

main.js

• non-function
  • creates several global variables.
    • whichBiuldings: an array of booleans signifying which buildings get drawn
    • buildingColors: an array of colors for each of the buttons and colors on the graph, change them here and only here.
    • startDate, endDate: range on the graph, by default they are one week ago and today respectively, if the page was reached through a permalink these get modified.
    • lineChartJSONData: this is the json file which data_gen.py makes, it's placed as a global so it doesn't have to be reloaded everytime a building is checked or unchecked.

• flipAndRedraw
  • called when a button is pressed
  • flips values in the global whichBuildings[]
  • calls drawLineChart() provided whichBuildings has at least 1 true value.

• flip(val)
  • takes a boolean and returns its opposite.

• redrawVis(values[])
  • Takes an array of booleans
  • calls DrawLineChart()

• drawLineChart(buildingArray[], colors[])
  • called when index.html loads and when RedrawVis() is called.
  • takes an array of booleans processed by RedrawVis()
  • creates a Dashboard
  • creates a data table with the data source as the json file data-gen.py makes.
  • creates a chart wrapper, this is where you can adjust basic settings about the main chart.
  • creates a control wrapper, this creates the controling bar on the bottom. This is where you can adjust the starting range for the control wrapper.
  • creates a listener for the 'statechange' event on the controlWrapper, when the control range is updated the dates are saved. When a building is unchecked and the graph redrawn, the selection stays the same.
  • creates a listener for the 'ready' event on the chartWrapper. When chartWrapper is ready (all drawn) resizeControls is called.
  • deletes columns in data table depending on the booleans that are in values[], the more columns that are deleted the better the performance.
  • binds the chart wrapper and the control wrapper together, draws the chart.

• equalArrays(arr1, arr2)
  • checks if the contents of arr1 are equal to arr2, returns true if they are, false otherwise.

• parseDate(urlArg[])
  • takes the array of strings from a permalink and returns them as a date object

• parseInts(strArray[])
  • takes the array of strings from a permalink and returns them as an array of integers.

• parseButtons()
  • Takes button arguments from the permalink and unchecks the buttons on index.html accordingly using jQuery's removeClass medthod.

• removeIndices()
  • processes and array to return containing indices of which columns delete and therefore not draw.

• genPermalink()
  • generates a permalink to the chart's state and which buttons are checked. The format of the permalink is (url)/?(startDate, yyyy-mm-dd)%(endDate, yyyy-mm-dd)%(buttons, 0123)
  • writes permalink to text box on index.html

• redrawControls()
  • Accesses where the svg paths for the control are using getElementByTagName() and sets them using jQuery's attr method.
  • This is called every time the graph sends a 'ready' event.

HTML+CSS

• index.html, the file people load.
  • A small script detecting browser type adds the chrome class to #page-title. Without this page-title in chrome draws incorrectly, this is a chrome specific bug the tag draws correctly in all other browsers.
• includes jquery.minm.1.7.2, for gviz api
• main.js, draws graphs, handles data.
• bootratp-button.js, enables buttons to behave like checkboxes. Toggling these buttons updates a global array of booleans held in main.js, and then redraws the graph depending on which are selected.
• main.css, styling (some css3).
  • there are several blank css elements for the buttons in the beginning, keep these lines where they are as main.js accesses them by an index and gives them a background-color attribute.

Improvements and Bugs

• Performance
  • More resolution in the graph will come at the expense of performance, right now points on the graph are averaged values from each hour. It would be better for graph readability if points were every, let's say, two minutes, however the graph would be unusable. Already the control chart is graphing every 30 lines of data, perhaps as the data range expands there could be less points on the chart itself and when the range is small it could show more resolution.

Energy Display Scripts Outline version 3.0

Version 3 of the site was not documented. This version added the beginnings of a switch between normalized and raw data. We will consider adding this switch again in the future once we’re able to calculate normalized data using our weather station data.