update

edgecollective · Apr 9, 2020 · 7ad4db0 · 7ad4db0
1 parent d96704f
commit 7ad4db0
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 83 deletions.
diff --git a/node_soil/plotting/get.js b/node_soil/plotting/get.js
@@ -1,23 +1,21 @@
-
-function connectTheDots(data){
-  var c = [];
-  for(i in data) {
-      var x = data[i].latitude;
-      var y = data[i].longitude;
-      if (x>0) {
-      c.push([x, y]);
-      }
-  }
-  return c;
+function timeConverter(UNIX_timestamp){
+  var a = new Date(UNIX_timestamp * 1000);
+  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  var year = a.getFullYear();
+  var month = months[a.getMonth()];
+  var date = a.getDate();
+  var hour = a.getHours();
+  var min = a.getMinutes();
+  var sec = a.getSeconds();
+  var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
+  return time;
 }
 
-
 // streaming reference
 var interval = setInterval(function() {
 
 //fetch('http://localhost:8000/api/users/')
-//fetch('http://localhost:8000/api/user/latest')
-fetch('http://157.245.241.239:8100/api/user/latest')
+fetch('http://64.227.0.108:8200/api/user/latest')
   .then((response) => {
     return response.json();
   })
@@ -26,67 +24,170 @@ fetch('http://157.245.241.239:8100/api/user/latest')
     //console.log(myJson);
 
 var data = myJson.data;
+          console.log(data);
+var xvals = [];	  
 var timestamp = [];
-var latitude = [];
-var longitude = [];
-var altitude = [];
-var temperature = [];
-var xvals = [];
+var vwc = [];
+var temp = [];
+var permit = [];
+var bulk = [];
+var pore = [];
+var batt = [];
+var deviceName = [];
+var rssi = [];
+
 
 // get the data
 for (i in data) {
   //xvals.push(i);
-  xvals.push(data[i].id);
-  timestamp.push(data[i].timestamp);
-  latitude.push(data[i].latitude);
-  longitude.push(data[i].longitude);
-  altitude.push(data[i].altitude);
-  temperature.push(data[i].temperature);
+  //xvals.push(data[i].id);
+//  xvals.push(data[i].id);
+  xvals.push(timeConverter(data[i].dateTime));
+  timestamp.push(data[i].dateTime);
+  vwc.push(data[i].vwc);
+  temp.push(data[i].temp);
+  permit.push(data[i].permit);
+  bulk.push(data[i].bulk);
+  pore.push(data[i].pore);
+  batt.push(data[i].batt);
+   rssi.push(data[i].rssi);
 }
 
-
-
-
-var mymap = L.map('mapid').setView([42.376, -71.0988], 15);
-
-
-
-L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
-  maxZoom: 18,
-  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
-    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
-    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-  id: 'mapbox/streets-v11'
-}).addTo(mymap);
-
-var pathCoords = connectTheDots(data);
-console.log(pathCoords);
-
-var pathLine = L.polyline(pathCoords).addTo(mymap);
-
-for (var i = 0; i < xvals.length; i++) {
-
-  var lat = latitude[i];
-  var lon = longitude[i];
-  var temp = temperature[i];
-  var alt = altitude[i];
-
-  if (lat>0) {
-  L.circle([lat, lon], 30, {
-    color: 'red',
-    fillColor: 'green',
-    fillOpacity: 0.1
-    }).addTo(mymap).bindPopup("Turtle: Bob");
+// flip b/c of way we got the data form sql:
+
+xvals=xvals.reverse();
+timestamp=timestamp.reverse();
+vwc=vwc.reverse();
+temp=temp.reverse();
+permit=permit.reverse();
+bulk=bulk.reverse();
+pore=pore.reverse();
+batt=batt.reverse();
+rssi=rssi.reverse();
+
+//console.log(xvals);
+
+// reference for plotly graphing: https://plot.ly/javascript/line-and-scatter/
+// example for plotly graphing in a page: https://codepen.io/pen/?&editable=true
+// reference for styles: https://plot.ly/javascript/line-and-scatter/
+
+var temp_trace = {
+  //x: xvals.reverse(),
+  x: xvals,  
+ // x: timestamp,
+  y: temp, 
+  //mode: 'markers',
+  mode: 'lines+markers',
+  type: 'scatter',
+  //marker: { size: 6, color: 'red'}
+};
+
+var rssi_trace = {
+  //x: xvals.reverse(),
+  x: xvals,
+ // x: timestamp,
+  y: rssi,
+  //mode: 'markers',
+  mode: 'lines+markers',
+  type: 'scatter',
+  //marker: { size: 6, color: 'red'}
+};
+
+
+var vwc_trace = {
+  //x: xvals.reverse(),
+  x: xvals,
+ // x: timestamp,
+  y: vwc,
+  //mode: 'markers',
+  mode: 'lines+markers',
+  type: 'scatter',
+  //marker: { size: 6, color: 'red'}
+};
+
+
+var layout_temp = {
+/*   xaxis: {
+    range: [ 15, 25 ]
+  },
+  
+  yaxis: {
+    range: [15, 25]
+  }, 
+*/
+  title:'Temperature',
+  yaxis: {
+    title: {
+      text: 'Temp (C)',
+    },
+	  //range: [15,32]
+  },
+  xaxis: {
+    title: {
+      text: 'Time',
+    }
   }
-}
+};
+
+var layout_rssi = {
+/*   xaxis: {
+    range: [ 15, 25 ]
+  },
   
+  yaxis: {
+    range: [15, 25]
+  }, 
+*/
+  title:'Signal Strength',
+  yaxis: {
+    title: {
+      text: 'RSSI',
+    },
+          //range: [15,32]
+  },
+  xaxis: {
+    title: {
+      text: 'Time',
+    }
+  }
+};
+
+
+var layout_vwc = {
+/*   xaxis: {
+    range: [ 15, 25 ]
+  },
+
+  yaxis: {
+    range: [15, 25]
+  },
+*/
+  title:'Volumetric Water Content',
+  yaxis: {
+    title: {
+      text: 'VWC (%)',
+    },
+          //range: [15,32]
+  },
+  xaxis: {
+    title: {
+      text: 'Time',
+    }
+  }
+};
+
 
-mymap.on('click', onMapClick);
+var temp_traces = [temp_trace];
+var vwc_traces = [vwc_trace];
+var rssi_traces = [rssi_trace];
 
+Plotly.newPlot('myDiv_b', temp_traces,layout_temp);
+Plotly.newPlot('myDiv_a', vwc_traces,layout_vwc);
+Plotly.newPlot('myDiv_c', rssi_traces,layout_rssi);
 
   });
 
   if(++cnt === 100) clearInterval(interval);
-}, 1000);
+}, 300);
 
 
diff --git a/node_soil/plotting/index.html b/node_soil/plotting/index.html
@@ -1,29 +1,16 @@
-<!DOCTYPE html>
 <html>
-<head>
-
-	<title>Quick Start - Leaflet</title>
-
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
-
-    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
-
-
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
-    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
-
-
-
-</head>
+    <head>
+        <!-- Load plotly.js into the DOM -->
+        <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
+      </head>
+
 <body>
 
-
   <script src="get.js"></script>
+  <div id='myDiv_c'></div>
+  <div id='myDiv_a'></div>
+  <div id='myDiv_b'><!-- Plotly chart will be drawn inside this DIV --></div>
 
-<div id="mapid" style="width: 80%; height: 600px;"></div>
 
-</body>
+  </body>
 </html>