Skip to content
Browse files

Web UI now has fancy graphs and jQuery magic

-the charts and motion log start hidden.
-range chart will appear once range data is received.
-weather chart will appear when a parameter is selected.
-motion log will appear once motion is detected.
  • Loading branch information...
1 parent 58c6e0d commit 7b0563b61104a2c8ab8a4fa97aa6a40bda034447 @theterg theterg committed Jan 3, 2012
Showing with 134 additions and 9 deletions.
  1. +21 −0 RemoteMonDemoAPI/web/css/shared.css
  2. +12 −9 RemoteMonDemoAPI/web/index.html
  3. +101 −0 RemoteMonDemoAPI/web/js/remotemon.js
View
21 RemoteMonDemoAPI/web/css/shared.css
@@ -110,6 +110,27 @@ ul#logos li {
div#motionlog{
height: 40%;
overflow: scroll;
+ display: none;
+}
+div#rangeplot{
+ display: inline-block;
+ text-align:center;
+ width: 700px;
+ height: 300px;
+}
+div#weatherplot{
+ display: inline-block;
+ text-align:center;
+ width: 700px;
+ height: 300px;
+}
+
+table#weather{
+ display: inline-block;
+ text-align:center;
+}
+th{
+ padding: 5px 20px;
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
View
21 RemoteMonDemoAPI/web/index.html
@@ -3,6 +3,7 @@
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width" />
<script type="text/javascript" src="http://cdn.buglabs.net/swarm/swarm-v0.3.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/jquery.flot.js"></script>
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/shared.css" type="test/css">
</head>
@@ -30,21 +31,23 @@
</div> <!-- end of header div -->
<div id="content" class=center>
<h1>Remote Monitoring Solution Kit</h1>
- <div id=weather>
- Temperature: <span id=temperature>-</span><br />
- Humidity: <span id=humidity>-</span><br />
- Dew Point: <span id=dewpoint>-</span><br />
- Pressure: <span id=pressure>-</span><br />
- Light Level: <span id=light>-</span><br />
- <br />
- </div>
+ <div id=weather><table id=weather>
+ <tr><th>Parameter</th><th>Current Value</th><th>Add to Graph</th></tr>
+ <tr><td class=data>Temperature: </td><td><span id=temperature>-</span></td><td><input id=graphselect type=checkbox name=graph value=temp /></td></tr>
+ <tr><td class=data>Humidity: </td><td><span id=humidity>-</span></td><td><input id=graphselect type=checkbox name=graph value=humidity /></td></tr>
+ <tr><td class=data>Dew Point: </td><td><span id=dewpoint>-</span></td><td><input id=graphselect type=checkbox name=graph value=dewpoint /></td></tr>
+ <tr><td class=data>Pressure: </td><td><span id=pressure>-</span></td><td><input id=graphselect type=checkbox name=graph value=pressure /></td></tr>
+ <tr><td class=data>Light Level: </td><td><span id=light>-</span></td><td><input id=graphselect type=checkbox name=graph value=light /></td></tr>
+ </table></div><br />
+ <div id=weatherplot class=active></div><br /><br />
<div id=range>
Current range: <span id=range>-</span><br />
+ <div id=rangeplot></div><br /><br />
<br />
</div>
<div id=motion>
Motion Log: <br />
- <div id=motionlog></div>
+ <div id=motionlog></div><br />
</div>
</div>
</body>
View
101 RemoteMonDemoAPI/web/js/remotemon.js
@@ -2,20 +2,80 @@ var API_KEY = "dd370eabf1fde6beeab83ec9c288e0abb4639654";
var SWARM_ID = "82bf3639e5d52500bd3384efe6e9892b42ff6c0c";
var RESOURCE_ID = "a010cd6407de897e41b2d0acfe8943dca0d8b666";
+var rangedata = new Array();
+var tempdata = new Array();
+var humiditydata = new Array();
+var dewdata = new Array();
+var pressuredata = new Array();
+var lightdata = new Array();
+var weatherDataSets = new Array();
+var startTime = 0;
+var xAxisLength = 30;
+var plot, weatherplot;
+var plotOptions = {
+ series: { shadowSize: 0 }, // drawing is faster without shadows
+ grid: { color: "#FFF" },
+ legend: { backgroundColor: "#5C5D60" },
+ yaxes: [ { position: "left"}, { position: "right"} ]
+ };
+var checkedList = new Array();
+var range = false;
+var motion = false;
+
function onPresence(presence) {
//console.log('presence -> ' + presence);
}
function onMessage(message) {
var payload = JSON.parse(message).message.payload;
//console.log('Got data '+JSON.stringify(payload));
+ var currentTime = (new Date()).getTime();
if (payload.protocol == "com.buglabs.xbee.protocol.SparkfunWeatherboard") {
$.each(payload, function(key, value) {
$('span#'+key).text(value);
+ if (key == "Temperature"){
+ tempdata.push([(currentTime-startTime)/1000,value]);
+ if (tempdata.length > xAxisLength)
+ tempdata.shift();
+ }
+ if (key == "Humidity"){
+ humiditydata.push([(currentTime-startTime)/1000,value]);
+ if (humiditydata.length > xAxisLength)
+ humiditydata.shift();
+ }
+ if (key == "Dewpoint"){
+ dewdata.push([(currentTime-startTime)/1000,value]);
+ if (dewdata.length > xAxisLength)
+ dewdata.shift();
+ }
+ if (key == "Pressure"){
+ pressuredata.push([(currentTime-startTime)/1000,value]);
+ if (pressuredata.length > xAxisLength)
+ pressuredata.shift();
+ }
+ if (key == "Light"){
+ lightdata.push([(currentTime-startTime)/1000,value]);
+ if (lightdata.length > xAxisLength)
+ lightdata.shift();
+ }
});
+ updateWeatherPlot();
} else if (payload.protocol == "com.buglabs.xbee.protocol.MaxbotixRangefinder") {
+ if (!range){
+ range = true;
+ $('div#rangeplot').show();
+ }
$('span#range').text(payload.Range);
+ rangedata.push([(currentTime-startTime)/1000,payload.Range]);
+ if (rangedata.length > xAxisLength)
+ rangedata.shift();
+ //console.log(rangedata);
+ plot = $.plot($('#rangeplot'),[ rangedata ], plotOptions);
} else if (payload.protocol == "com.buglabs.xbee.protocol.PIRMotion") {
+ if (!motion){
+ motion = true;
+ $('div#motionlog').show();
+ }
var now = new Date();
$('div#motionlog').prepend('Motion at '+(now.getMonth()+1)+'/'+now.getDate()+'/'+
now.getFullYear()+' '+now.getHours()+':'+((now.getMinutes()<10)?'0':'')+
@@ -27,7 +87,48 @@ function onError(error) {
}
function onConnect() {
console.log('connected');
+ startTime = (new Date()).getTime();
+ (new Date()).getTime();
+ $('div#rangeplot').hide();
+ plot = $.plot($('#rangeplot'),[ rangedata ], plotOptions);
+ $('div#weatherPlot').hide();
+ updateWeatherPlot();
+ $('input#graphselect').on('change', function() {
+ checkedList.push(this);
+ if ($('input#graphselect:checked').length > 2){
+ var first = checkedList.shift();
+ first.checked = false;
+ }
+ updateWeatherAxes();
+ });
+}
+
+function updateWeatherAxes() {
+ weatherDataSets = new Array();
+ var idx = 1;
+ if ($('input#graphselect:checked').length == 0)
+ $('div#weatherPlot').hide();
+ else
+ $('div#weatherPlot').show();
+ $.each($('input#graphselect:checked'),function () {
+ if (this.value == "temp"){
+ weatherDataSets.push({label:"temperature",data:tempdata,yaxis:idx++});
+ } else if (this.value == "humidity"){
+ weatherDataSets.push({label:"humidity",data:humiditydata,yaxis:idx++});
+ } else if (this.value == "dewpoint"){
+ weatherDataSets.push({label:"dew point",data:dewdata,yaxis:idx++});
+ } else if (this.value == "pressure"){
+ weatherDataSets.push({label:"pressure",data:pressuredata,yaxis:idx++});
+ } else if (this.value == "light"){
+ weatherDataSets.push({label:"light",data:lightdata,yaxis:idx++});
+ }
+ });
}
+
+function updateWeatherPlot() {
+ weatherplot = $.plot($('#weatherplot.active'),weatherDataSets, plotOptions);
+}
+
SWARM.connect({ apikey: API_KEY,
resource: RESOURCE_ID,
swarms: [SWARM_ID],

0 comments on commit 7b0563b

Please sign in to comment.
Something went wrong with that request. Please try again.