”2016-09-16”

mdot/mDotServer.censis/mDotServer.censis/app/js/clock.js

@@ -0,0 +1,125 @@
+'use strict';
+/**
+ *
+ * User: Martin Donnelly
+ * Date: 2016-07-27
+ * Time: 09:23
+ *
+ */
+
+var WeatherModel = Backbone.Model.extend({
+  initialize: function() {
+    this.set('url','https://api.forecast.io/forecast/342205f1e6b0281ee3ec89a4eff8a568/' + this.get('lat').toString() + ',' + this.get('long').toString() + '?units=uk2&exclude=minutely,hourly,daily,alerts,flags');
+
+    console.log(this.get('url'));
+    this.update();
+  },
+  update: function() {
+    this.getWeather();
+    var now = new Date;
+    var mod = 1800000 - (now.getTime() % 1800000);
+    var weatherTrigger = function() {
+      this.update();
+    };
+
+    setTimeout(weatherTrigger.bind(this), mod + 10);
+  },
+  getWeather: function() {
+    var self = this;
+    $.ajax({
+            type: 'GET',
+            url: self.get('url'),
+            data: '',
+            dataType: 'jsonp',
+            timeout: 30000,
+            context: $('body'),
+            contentType: ('application/json'),
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
+              'Access-Control-Allow-Headers': 'Content-Type'
+            },
+            success: function(data) {
+              var stored = {
+                temperature: data.currently.temperature,
+                icon: data.currently.icon
+              };
+              self.set('data',stored);
+            },
+            error: function(xhr, type) {
+              console.error('ajax error');
+              console.error(xhr);
+              console.error(type);
+            }
+          });
+  }
+});
+
+var ClockModel = Backbone.Model.extend({
+  initialize: function() {
+    this.set('now',new Date);
+    this.update();
+  },
+  update: function() {
+    var now = new Date;
+    var mod = 60000 - (now.getTime() % 60000);
+    this.set('now',now);
+
+    var clockFn = function() {
+      this.update();
+    };
+
+    setTimeout(clockFn.bind(this), mod + 10);
+  }
+});
+
+var Clock = Backbone.View.extend({
+  tagName: 'div',
+  initialize: function() {
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.$date = $('#date');
+    this.$time = $('#time');
+    this.render();
+  },
+  render: function() {
+    var now = this.model.get('now');
+    var curTime = now.format('<span class="hour">{24hr}</span>{mm}');
+    var curDate = now.format('{yyyy}-{MM}-{dd}');
+    if (this.prevTime !== curTime) {
+      this.$time.html(curTime);
+      this.prevTime = curTime;
+    }
+
+    if (this.prevDate !== curDate) {
+      this.$date.html(now.format(
+        //'<span class="wd-{do}">{Weekday}</span><br><span class="mo mo-{M}">{Month} {dd}</span><br>{yyyy}'));
+        '<span class="wd-{do}">{Weekday}</span><br><span class="mo mo-{M}">{Month} {dd}</span>'));
+      this.prevDate = curDate;
+    }
+  }
+});
+
+var Weather = Backbone.View.extend({
+  tagName: 'div',
+  initialize: function() {
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.$weatherText = $('#weatherText');
+    this.$weatherIcon = $('#weatherIcon');
+  },
+  render: function() {
+    console.log('Weather:Render');
+
+    var data = this.model.get('data');
+    let newElm = $('<i></i>').addClass('wi mui--align-middle');
+    newElm.addClass('wi-forecast-io-'.concat(data.icon));
+    console.log(parseInt(data.temperature) + '&deg;c');
+    this.$weatherText.html(parseInt(data.temperature) + '&deg;c');
+    console.log ('Weather icon should be ',  data.icon);
+    this.$weatherIcon.empty().html(newElm);
+   // skycons.remove('icon1');
+   // skycons.add('icon1', data.icon);
+  }
+
+});

mdot/mDotServer.censis/mDotServer.censis/app/js/mdot.js

@@ -116,6 +116,37 @@
       var skipOccupancy = false;
       console.time('processAdd');
       var tempCollection = new Backbone.Collection();
+      var minmaxes = {
+        '1':{low:578,high:656, mp:617},
+        '2':{low:657,high:709, mp:695},
+        '3':{low:710,high:737, mp:723},
+        '4':{low:738,high:778, mp:752},
+        '5':{low:779,high:824, mp:804},
+        '6':{low:825,high:860, mp:844},
+        '7':{low:861,high:892, mp:876},
+        '8':{low:0,high:0, mp:0},
+        '9':{low:0,high:0, mp:0},
+        '10':{low:0,high:0, mp:0},
+        '11':{low:0,high:0, mp:0},
+        '12':{low:0,high:0, mp:0},
+        '13':{low:0,high:0, mp:0},
+        '14':{low:0,high:0, mp:0},
+        '15':{low:0,high:0, mp:0},
+        '16':{low:0,high:0, mp:0},
+        '17':{low:0,high:0, mp:0},
+        '18':{low:0,high:0, mp:0},
+        '19':{low:0,high:0, mp:0},
+      };
+
+      var minmaxesA = [
+              {low:578,high:656, mp:617, count:1},
+              {low:657,high:709, mp:695, count:2},
+              {low:710,high:737, mp:723, count:3},
+              {low:738,high:778, mp:752, count:4},
+              {low:779,high:824, mp:804, count:5},
+              {low:825,high:860, mp:844, count:6},
+              {low:861,high:892, mp:876, count:7}
+              ];
 
       var events;
 
@@ -134,6 +165,13 @@
 
         if (!skipOccupancy) {
           _occupancy = this.findOccupancy(i.timestamp, events.occupancy);
+        } else {
+          for(let _of=0;_of < 7;_of++)
+          {
+            if ((i.co2 >= minmaxesA[_of].low) && (i.co2 <= minmaxesA[_of].high)) {
+              _occupancy = minmaxesA[_of].count;
+            }
+          }
         }
 
         tempCollection.add({
@@ -145,14 +183,34 @@
           noise: i.sound,
           occupancy: _occupancy
         });
-      }, this);
 
+        if (_occupancy !== 0) {
+          let mm = minmaxes[_occupancy.toString()];
+          if (mm.low === 0 && mm.high === 0) {
+            mm.low = i.co2;
+            mm.high = i.co2;
+          }
+
+          if (mm.low > i.co2) {
+            mm.low = i.co2;
+          }
+
+          if (mm.high < i.co2) {
+            mm.high = i.co2;
+          }
+
+          mm.mp = ~~((mm.low + mm.high) / 2);
+          minmaxes[_occupancy.toString()] = mm;
+        }
+      }, this);
+      console.log(minmaxes);
+      console.log(JSON.stringify(minmaxes));
       DeviceCollection.models = tempCollection.models;
 
       console.timeEnd('processAdd');
       DeviceCollection.trigger('update');
 
-      notification.notify('success', 'Data loaded');
+      // Notification.notify('success', 'Data loaded');
 
     }, decoder: function() {
       return {};
@@ -256,11 +314,11 @@
         this.socketHandler.turnOff();
       }
 
-      notification.clearAll();
+      //  Notification.clearAll();
       if (this.model.has('device')) {
         this.collection.url = '/apiv2/mdot/' + this.model.get('device');
         $('#output').empty();
-        notification.notify('info', 'Loading...');
+        //   Notification.notify('info', 'Loading...');
         this.collection.fetch(fetchObj);
       } else {
         console.error('Nothing to get!');
@@ -287,7 +345,7 @@
       this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
       this.dataSet = new AmCharts.DataSet();
 
-      _.bindAll(this, 'render', 'updateGraphV2', 'setupChart');
+      _.bindAll(this, 'render', 'updateGraphV2', 'setupChart','getLastChunk');
       this.collection.on('update', function() {
         // Trigger the redraw
         this.updateGraphV2();
@@ -512,49 +570,17 @@
       chart.panelsSettings = panelsSettings;
 
 
-      // PERIOD SELECTOR ///////////////////////////////////
-      // var periodSelector = new AmCharts.PeriodSelector();
-      // periodSelector.position = "bottom";
-      // periodSelector.inputFieldsEnabled = false;
-      // periodSelector.width = 20;
-      // //periodSelector.dateFormat = "YYYY-MM-DD JJ:NN"
-      // periodSelector.periods = [
-      // {
-      //     period: "hh",
-      //     count: 1,
-      //     label: "1 hour",
-
-      // },
-      // {
-      //     period: "hh",
-      //     count: 12,
-      //     label: "12 hours",
-
-      // },
-      //     {
-      //         period: "DD",
-      //         count: 5,
-      //         label: "10 days",
-      //         selected: true
-      //     },
-      //];
-      // chart.periodSelector = periodSelector;
-
-      //$('#chartdiv').empty();
       chart.write('chartdiv');
 
-
-
-
       console.timeEnd('doChartV2');
     }, updateGraphV2: function() {
       console.time('updateGraphV2');
       var self = this;
       var chartData = [];
       var filter = [];
-      console.time('chartData');
       var step = 0;
       const max = 20;
+      this.socketHandler.set({data: this.getLastChunk()});
       _(this.collection.models).each(function(i) {
         const co2 = i.get('co2');
         let chunk = {
@@ -572,8 +598,6 @@
         }
         filter.push(co2);
 
-
-        //If (step % 100 === 0) {
         if (filter.length >= max) {
           let sub100 = filter.reduce((prev, cur) => prev + cur);
           chunk.sub100 = sub100 / max;
@@ -582,7 +606,6 @@
         chartData.push(chunk);
         step++;
       });
-      console.timeEnd('chartData');
 
       self.doChartV2(chartData);
       console.timeEnd('updateGraphV2');
@@ -593,7 +616,19 @@
             console.log('Model updated:', this.get('data'));
           });
 
-        }
+        },
+    getLastChunk: function() {
+      let lastItem = this.collection.models[this.collection.models.length - 1];
+      return {
+        date: lastItem.get('dt'),
+        co2: lastItem.get('co2'),
+        humidity: lastItem.get('humid'),
+        lux: lastItem.get('lux'),
+        noise: lastItem.get('noise'),
+        temp: lastItem.get('temp'),
+        occupancy: lastItem.get('occupancy')
+      };
+    }
 
   });
 
@@ -614,11 +649,11 @@
       this.suffix = this.suffixList[this.modes.indexOf(this.widgetMode)];
       this.render();
     }, render: function() {
-      let data = this.model.get('data');
+      let html;
-     // console.log(data);
+      const data = this.model.get('data');
       let value = (typeof data !== 'undefined') ? data[this.widgetMode] : 0;
       value = value.toString().concat(this.suffix);
-      var html = this.template({value: value});
+      html = this.template({value: value});
       this.$el.html(html);
 
       return this;
@@ -637,6 +672,7 @@
 
   var mainSettings = new MainModel();
   var views = {};
+  views.clock = new Clock({model: new ClockModel()});
   views.mainview = new MainView({
     collection: mdotCollection, model: mainSettings
   });
@@ -656,5 +692,15 @@
   views.luxWidget = new Widget({model: webSocketModel, id: 'widget-lux', el: $('#widget-lux')});
 
 
+  navigator.geolocation.getCurrentPosition(function(position) {
+      var latitude = position.coords.latitude;
+      var longitude = position.coords.longitude;
+
+      views.weather = new Weather({model: new WeatherModel({lat: latitude, long: longitude})});
+    },
+        function(e) {console.error(e.code + ' / ' + e.message);});
+
+
+
 
 })(jQuery);

mdot/mDotServer.censis/mDotServer.censis/app/js/socketmanager.js

@@ -27,7 +27,6 @@ var SOCKETMANAGER = (function() {
             }
 
           });
-
         },
     turnOn: function() {
           this.listening = true;
@@ -43,6 +42,7 @@ var SOCKETMANAGER = (function() {
           // Ticks are ignored
         } else {
           if (item.data.deviceid === this.listeningID) {
+            console.log('Updated', item.data);
             this.set({data: item.data});
           }
         }

mdot/mDotServer.censis/mDotServer.censis/views/test.ejs

@@ -10,8 +10,9 @@
   <link href="css/mui.css" rel="stylesheet" type="text/css"/>
   <link href="css/test.css" rel="stylesheet" type="text/css"/>
   <link href="css/style.css" rel="stylesheet" type="text/css"/>
+  <link href="css/weather-icons.css" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" href="css/notification.css">
-  <link href="css/flipclock.css" rel="stylesheet" />
+
     <link href="css/flatWeatherPlugin.css" rel="stylesheet" />
   <!-- endbuild -->
 
@@ -53,6 +54,68 @@
             margin-bottom: 0px;
         }
 
+
+       .item_content {
+         height: 100px;
+         /* border: 1px solid grey;*/
+         min-height: 100px;
+         overflow: hidden;
+         }
+
+       .item_content a.title {
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+         color: #ffffff;
+         }
+
+       .item_content div.body, .item_content div.site, .item_content div.tags {
+         overflow: hidden;
+         text-overflow: ellipsis;
+         white-space: nowrap;
+         color: #313131;
+         }
+
+       .time, .date, .temp, .weather {
+         text-align: center;
+         font-family: 'Ubuntu Condensed', sans-serif;
+         font-size: 40px;
+         color: #ff0063;
+         width:100%;
+         }
+
+
+       .time span.hour:after {
+         content: ":";
+         }
+
+       .time {margin-top:10%;}
+       .date {
+         font-size: 18px;
+         line-height: 1;
+         margin-top:10%;
+         }
+
+       .temp::after {
+         content: "°c";
+         }
+
+       .item_content div.tags {
+         color: blue;
+         }
+
+       .noConnection {
+         color: rgb(244, 150, 26);
+         }
+
+       #caltext {
+         color: #fff;
+         }
+
+      .fourpcNudge {
+        margin-top:4% !important;
+        }
+
     </style>
 
 </head>
@@ -71,24 +134,31 @@
               </div>
 
               <div class="mui-col-md-12 panel" style="height:10%; border-width:10px;border-style:solid;border-color:black; background-color:#404040">
-                  <span id="date_time"></span>
+
+                <!--<div class="mui-row">-->
+                      <div class="mui-col-xs-6 ">
+                        <div id="time" class="mui--text-center time"></div>
+                      </div>
+                      <div class="mui-col-xs-6 item_content">
+                        <div id="date" class="mui--text-center date"></div>
+                      </div>
+
+                    <!--</div>-->
 
                </div>
 
 
+            <div class="mui-col-md-12 panel" style="height:10%; border-width:10px;border-style:solid;border-color:black; background-color:#404040">
 
-              <div class="mui-col-md-12 panel" style="height:30%; border-width:10px;border-style:solid;border-color:black; background-color:#404040">
+              <div id="weather" class="mui--text-center weather">
+                       <div id="weatherIcon" class="mui-col-xs-6  mui--text-center mui--align-middle fourpcNudge">
 
-                  <!--<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=42.3583&lon=-71.0603&name=Downtown Boston&color=#00aaff&units=uk"> </iframe>-->
+                       </div>
-                  <div class="mui-row" style="margin:5%" >
+                       <div class="mui-col-xs-6 mui--text-center mui--align-middle fourpcNudge" id="weatherText"></div>
-
+                     </div>
-                          <div id="example"></div>
+                          </div>
 
 
-                  </div>
-
-
-              </div>
               <div class="mui-col-md-12 panel" style="height:10%; border-width:10px;border-style:solid;border-color:black; background-color:#000">
                   <img src="lib/images/censis_logo_white.png" style="height:70%; width:80%;margin-top:5%;margin-left:10%" />
               </div>
@@ -334,13 +404,12 @@
   <script src="lib/serial.js"></script>
   <script src="lib/amstock.js"></script>
   <script src="lib/themes/dark.js"></script>
-    <script src="lib/dateTime.js"></script>
-    <script src="lib/flipclock.min.js"></script>
 
     <!--<script src="lib/jquery.flatWeatherPlugin.min.js"></script>-->
     <script src="lib/jquery.flatWeatherPlugin.js"></script>
   <!-- endbuild -->
   <!-- build:js -->
+<script src="js/clock.js"></script>
 <script src="js/websocket.js"></script>
 <script src="js/socketmanager.js"></script>
 <script src="js/mdot.js"></script>
@@ -348,30 +417,3 @@
   <!-- endbuild -->
 </body>
 </html>
-
-<script type="text/javascript">window.onload = date_time('date_time');</script>
-
-<script type="text/javascript">
-	    var clock = $('.clock').FlipClock({
-	        clockFace: 'TwentyFourHourClock'
-	    });
-
-	    $(document).ready(function () {
-
-	        //Setup the plugin, see readme for more examples
-	        var example = $("#example").flatWeatherPlugin({
-	            location: "Glasgow, UK", //city and region *required
-	            country: "UK",         //country *required
-	            //optional:
-	            api: "openweathermap", //default: openweathermap (openweathermap or yahoo)
-	            apikey: "72c7b00d1918c6cdd5f2d11a5a6fc0b8",   //optional api key for openweather
-	            view: "full", //default: full (partial, full, simple, today or forecast)
-	            displayCityNameOnly: true, //default: false (true/false) if you want to display only city name
-	            forecast: 4, //default: 5 (0 -5) how many days you want forecast
-	            render: true, //default: true (true/false) if you want plugin to generate markup
-	            loadingAnimation: true //default: true (true/false) if you want plugin to show loading animation
-	            //units : "metric", //or "imperial" default: "auto"
-	        });
-
-	    });
-</script>