mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-11 18:32:50 +00:00
Code Issues Releases Wiki Activity

added graphs

Browse Source
This commit is contained in:
mgerb42
2015-12-19 03:53:29 -06:00
parent 78f5e35270
commit 7d3822904d
7 changed files with 182 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bin/www
View File

@@ -12,7 +12,7 @@ var http = require('http');
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
var port = normalizePort(process.env.PORT || '80');
app.set('port', port);
/**

2
public/javascripts/custom.js
View File

@@ -13,5 +13,5 @@ $(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker();
});
});

78
public/javascripts/sensor_information.js Normal file
View File

@@ -0,0 +1,78 @@
$(document).ready(function(){
Chart.defaults.global.responsive = true;
var loc = $("#sensor-location").text();
console.log(loc);
loc = loc.split().join("+");
$.get("/api/sensorbylocation?location=" + loc, function(request){
var json = request;
var data = {labels : [], datasets : []};
data.datasets.push({
label: "Max Temperature",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
},
{
label: "Min Temperature",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: []
});
for (var i in json){
data.labels.push(json[i]._id.month + "/" + json[i]._id.day + "/" + json[i]._id.year);
data.datasets[0].data.push(json[i].max);
data.datasets[1].data.push(json[i].min);
}
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#info-chart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var myLineChart = new Chart(ctx).Line(data);
});
});
var test123 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};

19
routes/api.js
View File

@@ -6,14 +6,14 @@ require("../models/temperature");
var temperature = mongoose.model('temperature');
/* GET sensors page. */
//api to return the max and min temps of each day based on location
router.get('/allsensors', function(req, res, next) {
//var location = req.query.location;
temperature.aggregate([{$group : { _id : {location : "$location", month: {$month: "$updated" }, day: { $dayOfMonth: "$updated" }, year: { $year: "$updated" }},
max : {$max : "$temperature"},
min : {$min : "$temperature"}}},
{$sort : {"_id.month" : -1, "_id.day" : -1, "_id.year" : -1}}]).exec(function(err, info){
{$sort : {"_id.month" : 1, "_id.day" : 1, "_id.year" : 1}}]).exec(function(err, info){
console.log(info);
res.setHeader('Content-Type', 'application/json');
@@ -26,13 +26,20 @@ router.get('/allsensors', function(req, res, next) {
router.get('/sensorbylocation', function(req, res, next) {
var loc = req.query.location;
console.log(loc);
//var location = req.query.location;
temperature.aggregate([ {$match : {location : loc}},
var year = req.query.year;
if (year == null){
var date = new Date();
year = date.getFullYear();
}
//query finds a entries in a collection based on location and the year specified
//they are then grouped by date and sorted by date as well
temperature.aggregate([ {$match : {location : loc, updated : {$gte : new Date('1 Jan, ' + year), $lt : new Date('1 Jan ' + year +1)}}},
{$group : { _id : {location : "$location", month: {$month: "$updated" }, day: { $dayOfMonth: "$updated" }, year: { $year: "$updated" }},
max : {$max : "$temperature"},
min : {$min : "$temperature"}}},
{$sort : {"_id.month" : -1, "_id.day" : -1, "_id.year" : -1}}]).exec(function(err, info){
{$sort : {"_id.month" : 1, "_id.day" : 1, "_id.year" : 1}}]).exec(function(err, info){
console.log(info);
res.setHeader('Content-Type', 'application/json');

26
routes/sensors.js
View File

@@ -11,6 +11,9 @@ router.get('/', function(req, res, next) {
temperature.aggregate( [ {$sort : {location : -1, updated : -1}}, { $group : { _id : "$location", temperature : {$first : "$temperature"}, humidity : {$first : "$humidity"}, updated : {$first : "$updated"}} } ] ).exec(function(err, info){
//get month for each entry and convert 24 hour time to US time
//also check to see if device has sent a data point in past 5 minutes
//if not will show up as disconnected
for (var i = 0; i < info.length; i++){
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
@@ -23,6 +26,17 @@ router.get('/', function(req, res, next) {
var dateString = month + " " + date + ", " + year;
var loc = info[i]._id;
var info_link = "/sensors/information?location="
if (loc != null){
loc = loc.split().join("+");
info_link += loc;
}
info[i].info_link = info_link;
//converting 24 hours time to AM or PM
if (hours < 12){
info[i].lastUpdate = dateString + " - " + hours + ":" + minutes + " AM (ET)";
@@ -36,7 +50,7 @@ router.get('/', function(req, res, next) {
}
//compared current time to last db entry - 1200000 milliseconds is 2 minutes
if(info[i].updated.getTime() > (Date.now() - 120000)){
if(info[i].updated.getTime() > (Date.now() - 350000)){
info[i].connected = true;
}
else {
@@ -53,7 +67,15 @@ router.get('/', function(req, res, next) {
});
router.post('/', function(req, res,next) {
router.get('/information', function(req, res, err){
var sensor_location = req.query.location;
if (sensor_location == null){
res.redirect('/404');
}
res.render('sensor_information', {info : {location : sensor_location}});
});

59
views/sensor_information.ejs Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<% include layout.ejs %>
</head>
<body>
<div class="header"></div>
<% include ../public/html/navbar.html %>
<div class="container">
<br>
<h1 class="text-center" id="sensor-location"><%=info.location%></h1>
<hr>
<br>
<canvas class="center" id="info-chart" width="800" height="400"></canvas>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer class="blog-footer">
<p>Site created and managed by Mitchell Gerber</p>
<span>©2015</span>
<br>
<span>Glyphicons provided by</span><br>
<a href="http://glyphicons.com/" target="_blank"><span>glyphicons.com</span></a>
</footer>
</body>
<% include layoutBottom.ejs %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="/javascripts/sensor_information.js"></script>
</html>

38
views/sensors.ejs
View File

@@ -2,38 +2,13 @@
<html lang="en">
<head>
<title>mitchellg.me</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.icon-large.min.css">
<link href="http://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" type="text/css">
<% include layout.ejs %>
</head>
<body>
<div class="header">
<div class="container">
<% if (query[0] != null) { %>
<div class="lowerLeft">
<span class="colorWhite">ESP8266 With DHT11 Sensor</span>
<br>
<span class="colorWhite">Location: <%=query[0]._id%></span>
<br>
<span class="colorWhite">Temperature: <%=query[0].temperature%>°F</span>
<br>
<span class="colorWhite">Humidity: <%=query[0].humidity%>%</span>
</div>
<%}%>
</div>
</div>
<div class="header"></div>
<% include ../public/html/navbar.html %>
@@ -53,7 +28,9 @@
<%} else {%>
<span class="colorRed">Disconnected</span>
<%}%>
<br>
<br>
<a href="<%=query[i].info_link%>"><button class="btn btn-default">View Graph</button></a>
</div>
<%}%>
@@ -86,10 +63,7 @@
<script src="jquery-1.11.3.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="javascripts/custom.js"></script>
<% include layoutBottom.ejs %>
</html>