Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
334 lines (252 sloc) 10.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Remote Garden Sensor" content="">
<meta name="GeekSkunk" content="">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<link rel="shortcut icon" href="favicon.ico">
<title>MyGardenSpy</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Charts -->
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(initCharts);
var chart1; //garden air temp
var chart2; //garden ground temp
var chart3; //soil moisture
var data1;
var data2;
var data3;
function displayData1(point) {
data1.setValue(0, 0, 'Air');
data1.setValue(0, 1, point);
chart1.draw(data1, options1);
}
function loadData1() {
// variable for the data point
var p;
$.getJSON('https://api.xively.com/v2/feeds/1824193320/datastreams/air_temp.json?&key=hKcMzj9z2zXxwSKr8pvvyCdrsKnhdajFA7ocUt8xWLJOjsA8&callback=?', function(data) {
// get the data point from Xively
p = data.current_value;
if (p) {
p = (p/1);
displayData1(p);
}
});
}
function initChart1() {
data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Label');
data1.addColumn('number', 'Value');
data1.addRows(1);
chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));
//air temps chart options
options1 = {
redFrom: 0,
redTo: 30,
yellowFrom: 30,
yellowTo: 38,
greenFrom: 38,
greenTo: 100,
minorTicks: 10,
min: 0,
max: 120,
animation: {
duration: 400,
easing: 'out',
},
};
loadData1();
setInterval('loadData1()', 1210000);
}
function displayData2(point) {
data2.setValue(0, 0, 'Soil');
data2.setValue(0, 1, point);
chart2.draw(data2, options2);
}
function loadData2() {
// variable for the data point
var p;
$.getJSON('https://api.xively.com/v2/feeds/1824193320/datastreams/soil_temp.json?&key=hKcMzj9z2zXxwSKr8pvvyCdrsKnhdajFA7ocUt8xWLJOjsA8&callback=?', function(data) {
// get the data point from Xively
p = data.current_value;
if (p) {
p = (p/1);
displayData2(p);
}
});
}
function initChart2() {
data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Label');
data2.addColumn('number', 'Value');
data2.addRows(1);
chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
/*
soil temp chart options
green/yellow/red yet to be determined, these values estimates at this point
*/
options2 = {
redFrom: 0,
redTo: 34,
yellowFrom: 34,
yellowTo: 40,
greenFrom: 40,
greenTo: 110,
minorTicks: 10,
min: 0,
max: 110,
animation: {
duration: 400,
easing: 'out',
},
};
loadData2();
setInterval('loadData2()', 1220000);
}
function initCharts() {
initChart1();
initChart2();
initChart3();
}
function displayData3(point) {
data3.setValue(0, 0, 'Humidity');
data3.setValue(0, 1, point);
chart3.draw(data3, options3);
}
function loadData3() {
// variable for the data point
var p;
$.getJSON('https://api.xively.com/v2/feeds/1824193320/datastreams/soil_moist.json?&key=hKcMzj9z2zXxwSKr8pvvyCdrsKnhdajFA7ocUt8xWLJOjsA8&callback=?', function(data) {
// get the data point from Xively
p = data.current_value;
if (p) {
p = (p/1);
displayData3(p);
}
});
}
function initChart3() {
data3 = new google.visualization.DataTable();
data3.addColumn('string', 'Label');
data3.addColumn('number', 'Value');
data3.addRows(1);
chart3 = new google.visualization.Gauge(document.getElementById('chart_div3'));
/*
Soil Moisture chart options
green/yellow/red based on my model Solar charge controller
*/
options3 = {
redFrom: 0,
redTo: 20,
yellowFrom: 20,
yellowTo: 30,
greenFrom: 30,
greenTo: 100,
minorTicks: 10,
min: 0,
max: 100,
animation: {
duration: 400,
easing: 'out',
},
};
loadData3();
setInterval('loadData3()', 1230000);
}
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MyGardenSpy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html">Current Conditions</a></li>
<li><a href="historical.html">Historical Data</a></li>
<li><a href="hardware.html">Hardware Status</a></li>
<li><a href="about.html">About</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="index.html">Current Conditions</a></li>
<li><a href="historical.html">Historical Data</a></li>
<li><a href="hardware.html">Hardware Status</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Current Conditions at the Garden</h1>
<span class="text-muted">Latest weather report below. Raw data can be found
<a href="https://xively.com/feeds/1824193320" target="_blank">at Xively</a>
</span>
<!-- Might be nice to reflect the last time the results were updated date/time-->
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<div id="chart_div1"></div>
<h4>Air Temp °F</h4>
<span class="text-muted">DS18B20 Sensor</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<div id="chart_div2"></div>
<h4>Soil Temp °F</h4>
<span class="text-muted">DS18B20 Sensor</span>
</div>
<!-- Using prior battery temp monitor now as soil sensor -->
<div class="col-xs-6 col-sm-3 placeholder">
<div id="chart_div3"></div>
<h4>Air Humidity %</h4>
<span class="text-muted">SHT11 Sensor</span>
</div>
</div>
<!-- PNG Xively Calls -->
<img src=https://api.xively.com/v2/feeds/1824193320/datastreams/air_temp.png?w=800&h=200&c=2188c5&g=true&t=Last%2024Hrs%20Air%20Temperature%20History&b=true&duration=1day&scale=Datastream&timezone=-05&l=Air%20Temperature%20%C2%B0F>
<!-- Now using soil sensor for air Humidity -->
<img src=https://api.xively.com/v2/feeds/1824193320/datastreams/soil_moist.png?w=800&h=200&c=2188c5&g=true&t=Last%207%20Days%20Humidity&b=true&duration=1week&scale=Datastream&timezone=-05&l=Humidity%20Percentage>
<!-- Button to trigger modal -->
<!-- PNG Xively Calls -->
<a class="twitter-timeline" href="https://twitter.com/MyGardenSpy" data-widget-id="463009005879558145">Tweets by @MyGardenSpy</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2526212-6', 'mygardenspy.com');
ga('send', 'pageview');
</script>
</body>
</html>