<!--
Authors:
Lillian Gray 2017-2020
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Earlham College Electrical Energy Consumptionis</title>
<link type="image/x-icon" href="images/favicon.png" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--Scripts at bottom -->
</head>
<body>
<div id="header">
<div class="flex-parent">
<img src="images/logo.png" title="Logo" border="none"/></img>
<a id="page-title" href=".">Electrical Energy Consumption</a>
<button id = "howToButton" class="aboutBtn" onclick="changeDashboard('howToUse')">How to Use</button>
<button id="aboutButton" class="aboutBtn" onclick="changeDashboard('about')">About</button>
</div>
</div> <!-- end header -->
<div id="dashboard">
<div id="closeButton" class="close displayNone" onclick="changeDashboard('close')"></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> <!-- end dashboard and chart. -->
<div id="site-options" class="flex-parent">
<a id="csvDownload" href="#" onclick="downloadCSV(this)"><button class="csvBtn" type="button">Download CSV</button></a>
<div id="plink-form">
<input id="plink" type="text" value=""></input>
<button class="getPlink inactive" type="button" onclick= genPermalink();>Get Permalink</button>
</div>
</div> <!-- end site options -->
<div id="site-details">
<!-- 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 -->
<!-- scripts -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/loader.js"></script>
<script type="text/javascript">
google.charts.load('45.2', {packages:['corechart', 'controls']});
google.charts.setOnLoadCallback(initializeLineChart);
</script>
</body>
</html>