Newer
Older
<!--
Authors:
Lillian Gray 2017-2020
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="image/x-icon" href="images/favicon.png" rel="shortcut icon">
<link rel="stylesheet" href="css/main.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
<script src="js/loader.js"></script>
<script>
google.charts.load('45.2', {packages:['corechart', 'controls']});
google.charts.setOnLoadCallback(onAPILoad);
<a id="pageTitle" href=".">Electrical Energy Consumption</a>
<button class="aboutButton" onclick="changeDashboard('howToUse')">How to Use</button>
<button class="aboutButton" onclick="changeDashboard('about')">About</button>
<div id="closeButton" class="close displayNone" onclick="changeDashboard('close')"></div>
<div id="spinner" class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<div id="lineChart"></div>
<div id="control"></div>
<div id="aboutText" class="displayNone">
<p class="about">
The energy eDisplay is a project between Earlham College's Green Science Hardware Interface Project (or GRIP), and the Maintenance Department.
Magnets around each buildings' main power line collect and store
values in a database which we harvest and visualize here using
Google's Chart and Visualization API.
</p>
<p class="about">
For questions, comments, or display issues please send an email to <nobr>green-science@cs.earlham.edu</nobr>.
</p>
You can click the building buttons below the graph to choose which buildings are displayed in the graph. Move the slider below the graph to view the energy consumption during a period of time. The Download CSV button will download a .csv file of the data currently being shown on the graph. The Get Permalink button will generate a link that will link to the site with the data being currently shown.
</p>
<div id="siteOptions" class="flexParent">
<a href="#" onclick="downloadCSV(this)"><button class="csvButton" type="button">Download CSV</button></a>
<div>
<input id="permalink" type="text" value=""></input>
<button class="getPermalink inactive" type="button" onclick=genPermalink();>Get Permalink</button>
<!-- Add any site details below. Please leave credit in my name (Leif?)-->
<p>
This is a project of Green Science and the Maintenance Department at Earlham College. <br />
Gaps in the graph signify where power went out.
Click the About button to find out more about this project.
</p>
</div> <!-- end site details -->