https://github.com/mroberge/HydroCloud
Tip revision: 4d2f3243b15298d0bffb66db430a02982a638ab4 authored by Martin Roberge on 09 April 2018, 02:46:03 UTC
Merge pull request #123 from mroberge/Feedback
Merge pull request #123 from mroberge/Feedback
Tip revision: 4d2f324
oldindex.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="shortcut icon" href="resources/favicon.ico" />
<meta name="description" content="A light-weight data viewer for hydrologic data" />
<meta name="author" content="Martin Roberge" />
<meta name="keywords" content="HydroCloud, hydrology, stream gauges, USGS, data" />
<link href='https://fonts.googleapis.com/css?family=Vollkorn:700italic' rel='stylesheet' type='text/css'>
<title>HydroCloud hydrograph demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
svg {
font: 10px sans-serif;
}
.axisTitle {
font: 14px serif;
}
.Title {
font: 20px serif;
}
.subTitle {
font: 12px serif;
}
path {
stroke: lightskyblue;
fill: none;
}
path:hover {
stroke: red;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar rect {
fill: lightskyblue;
shape-rendering: crispEdges;
}
.bar text {
fill: black;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<style>
html, body, #map_div {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<style type="text/css">
#pull {
font-family: 'Vollkorn', serif;
font-style: italic;
font-size: 24pt;
color: white;
text-shadow: 3px 3px 10px #002;
}
header h1 {
margin: 0;
padding-left: 16px;
padding-bottom: 5px;
font-family: 'Vollkorn', serif;
font-style: italic;
font-size: 24pt;
color: white;
text-shadow: 3px 3px 10px #002;
background-color: #679;
}
footer {
height: 20px;
clear: both;
margin: 0;
padding: 0;
color: #bbb;
text-align: center;
font-size: 8pt;
}
</style>
<link rel="stylesheet" href="resources/normalize.css">
<style type="text/css">
/* Clearfix */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 700px;/*This was set to 600 to match the instructions for screens under 600px.*/
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('resources/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
#logo {
display: none;
}
}
/*Smartphone*/
@media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
</style>
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="lib/jquery/jquery-2.0.2.js"></script>
<script>
var viewState = "map";
function checkState() {
console.log("checkState: " + viewState);
if (viewState === "hydro") {
d3.select("svg").remove();
hydrograph("Hydrograph");
} else if (viewState === "flow") {
d3.select("svg").remove();
flowduration("Flow Duration");
} else if (viewState === "histo") {
d3.select("svg").remove();
loghistogram("Histogram");
} else {
//don't need to plot a thing if we aren't showing a graph.
}
}
$(function() {
//Menu design from Thoriq Firdaus www.hongkiat.com/blog/responsive-web-nav/
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(showMap).on('click', function(e) {
viewState = "map";
console.log(viewState);
d3.select("svg").remove();
document.getElementById("map_div").style.display = "block";
document.getElementById("aboutText").style.display = "none";
});
$(hydro).on('click', function(e) {
viewState = "hydro";
console.log(viewState);
d3.select("svg").remove();
document.getElementById("map_div").style.display = "none";
document.getElementById("aboutText").style.display = "none";
hydrograph("name");
});
$(flow).on('click', function(e) {
viewState = "flow";
console.log(viewState);
d3.select("svg").remove();
document.getElementById("map_div").style.display = "none";
document.getElementById("aboutText").style.display = "none";
flowduration("name");
});
$(histo).on('click', function(e) {
viewState = "histo";
console.log(viewState);
d3.select("svg").remove();
document.getElementById("map_div").style.display = "none";
document.getElementById("aboutText").style.display = "none";
loghistogram("name");
});
$(download).on('click', function(e) {
console.log("download");
dataCsv("stream");
});
$(about).on('click', function(e) {
viewState = "about";
console.log(viewState);
d3.select("svg").remove();
document.getElementById("map_div").style.display = "none";
document.getElementById("aboutText").style.display = "block";
});
$(window).resize(function() {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
myScreen.width = $(window).width() - 20;
myScreen.height = $(window).height() - (header + 60);
//hydrograph(id);
//checkState();
}
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxmwq7svGGXSeaXHsxfW27LDaXytc3nBY&sensor=false"></script>
<script src="src/initialize.js"></script>
<body>
<header>
<h1 id="logo">HydroCloud</h1>
</header>
<nav class="clearfix">
<ul class="clearfix">
<li>
<a id="showMap" href="#">Map/Select</a>
</li>
<li>
<a id="hydro" href="#">Hydrograph</a>
</li>
<li>
<a id="flow" href="#">Flow Duration</a>
</li>
<li>
<a id="histo" href="#">Histogram</a>
</li>
<li>
<a id="download" href="#">Download</a>
</li>
<li>
<a id="about" href="#">About</a>
</li>
</ul>
<a href="#" id="pull">HydroCloud</a>
</nav>
<script src="lib/d3/d3.min.js"></script>
<script src="src/oldHydroGraph.js"></script>
<script>
function getUSGS(id) {
if (id == "local") {
var filename = "resources/USGSshort.txt";
} else {
var filename = "https://waterservices.usgs.gov/nwis/iv/?format=json&sites=" + id + "&period=P30D¶meterCd=00060";
}
d3.json(filename, function(error, json) {
if (error) {
if (error.status === 0) {
alert("CORS is not enabled.");
}
return console.warn(error);
}
//if (!json.value.timeSeries[0].values[0].value){console.warn("there is no data for this site")};
temp = json.value.timeSeries[0].values[0].value;
//I need to check if this even has a value!!
//MR Create a new array of objects from the JSON.
data = [];
//Clear out the array.
temp.forEach(function(d, index, array) {
d.date = new Date(d.dateTime);
d.value = +d.value;
data[index] = {
date : d.date,
value : d.value
};
});
// target.dispatchEvent(myEvent2);
//d3.select("svg").remove();
//hydrograph(id);
//flowduration(id);
//loghistogram(id);
checkState();
});
}
</script>
<div id="aboutText" style="display:none;">
<h2>Description of the HydroCloud project</h2>
<p>
HydroCloud is a hydrological analysis system consisting of a fast, lightweight mapping and analysis tool and a scalable, distributed database. This page is a partial demonstration of the interface for this project.
Martin Roberge and Michael McGuire are the principle investigators for this project, which has been generously supported with a seed grant from the TU School of Emerging Technology.
</p>
<p>
Learn more about the HydroCloud project:
</p>
<ul>
<li>
Visit our GitHub repository: <a href="https://github.com/mroberge/HydroCloud">https://github.com/mroberge/HydroCloud</a>
</li>
<li>
The Towson University <a href="https://www.towson.edu/set/Projects/HydroCloud.asp">School of Emerging Technologies</a>
</li>
</ul>
<p></p>
<p>
We've made several versions of the layout:
</p>
<ul>
<li>
<a href="https://mroberge.github.io/" >Our first app</a> This site was our first proof-of-concept and was meant for large screens and desktop analysis.
</li>
<li>
<a href="https://mroberge.github.io/HydroCloud/" >Our second app</a> We set this site up to test the feasibility of graphing data on a mobile phone. It uses the <a href="https://d3js.org/">D3 library</a> for graphing.
</li>
<li>
<a href="https://mroberge.github.io/HydroCloud/bootstraplayout.html" >Our latest app</a> This site is set up using <a href="https://getbootstrap.com/">Bootstrap</a> for the styling.
</li>
</ul>
</div>
<div id="target"></div>
<div id="map_div"></div>
<script>
/*
var myEvent = new Event("parsed");//IE doesn't let you create custom events.
var body = document.getElementById('target');
//console.log(body);
body.addEventListener("parsed", function(e) {
alert("parsed!" + e);
}, false);
var myEvent2 = new CustomEvent("parsed2", {
'detail' : "site name"
});
//everytime we load new data, it draws a hydrograph. That's not what we want anymore.
//body.addEventListener("parsed2", function (e){hydrograph(e.detail);}, false);
body.addEventListener("parsed2", function(e) {
console.log("data loaded: site " + e.detail);
}, false);
*/
var data = [];
getUSGS("01646500");
//Initial data request.
</script>
</body>
</html>