<!--
Authors:
Lillian Gray 2017-2020
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earlham College Electrical Energy Consumptionis</title>
<link type="image/x-icon" href="images/favicon.png" rel="shortcut icon">
<link rel="stylesheet" href="css/main.css" />
<!-- scripts -->
<!--[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);
</script>
</head>
<body>
<header>
<div class="flexParent">
<img src="images/logo.png" title="Logo" border="none"/></img>
<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>
</header> <!-- end header -->
<div id="chart" class="flexParent">
<div id="leftLegend"></div>
<div id="dashboard">
<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>
</div>
<div id="howToUse" class="displayNone">
<p class="about">
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>
</div>
<div id="rightLegend"></div>
</div> <!-- end dashboard and chart. -->
<div class="seriesSelect flexParent">
<div>
<div class="selectTitle">Home</div>
<div class="selectOptionsWrapper">
<div class="selectOption">
<input class="checkbox" type="checkbox"> Total
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Barrett
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Bundy
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Hoerner
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Mills
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> OA
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Warren
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Wilson
</div>
</div>
</div>
<div>
<div class="selectTitle">Work</div>
<div class="selectOptionsWrapper">
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 1
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 2
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 3
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Work 4
</div>
</div>
</div>
<div>
<div class="selectTitle">Play</div>
<div class="selectOptionsWrapper">
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 1
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 2
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 3
</div>
<div class="selectOption">
<input class="checkbox" type="checkbox"> Play 4
</div>
</div>
</div>
</div>
<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>
</div>
</div> <!-- end site options -->
<div id="siteDetails">
<!-- 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 -->
</body>
</html>