”2016-08-03”

smartoffice/SODashServer/SODashServer/app/js/mdot.js

@@ -36,8 +36,12 @@
     processAdded: function() {
       console.log('Model:ProcessAdded');
 
+      var tempCollection = new Backbone.Collection();
+
+      //_.invoke(DeviceCollection.toArray(), 'destroy');
       _.invoke(DeviceCollection.toArray(), 'destroy');
 
+
       this.temporal = {low: 0,high: 0};
 
       _(this.get('events')).each(function(i) {
@@ -52,12 +56,13 @@
           this.temporal.high = i.timestamp.$date;
         }
 
-
+        tempCollection.add({dt: i.evt.dateTime.dateTime,lux: i.evt.decoded.light, temp: i.evt.decoded.temp, co2: i.evt.decoded.co2, humid: i.evt.decoded.humid, noise: i.evt.decoded.noise});
-        DeviceCollection.add({dt: i.evt.dateTime.dateTime,lux: i.evt.decoded.light, temp: i.evt.decoded.temp, co2: i.evt.decoded.co2, humid: i.evt.decoded.humid, noise: i.evt.decoded.noise});
-
       }, this);
 
       DeviceCollection.temporal = this.temporal;
+
+      DeviceCollection.models = tempCollection.models;
+      DeviceCollection.trigger('update');
       console.log('temporal:', this.temporal);
     },
     decoder: function(data) {
@@ -154,15 +159,21 @@
   });
 
 
+  var MainModel = Backbone.Model.extend({});
 
   var MainView = Backbone.View.extend({
     el: $('#main'),
     template: _.template($('#main-template').html()),
     events: {
-            'change select#device': 'changeDevice'
+            'change select#device': 'changeDevice',
+            'click button#refresh': 'updateDevice',
+            submit: function(event) {}
           },
     initialize: function() {
-          _.bindAll(this, 'render','changeDevice');
+          _.bindAll(this, 'render','changeDevice', 'updateDevice');
+
+          this.model.on('change',this.updateDevice);
+          console.log('MainView:', this);
           this.render();
         },
     render: function() {
@@ -174,10 +185,15 @@
       console.log('MainView:ChangeDevice');
       newDevice = this.$el.find('#device')[0].value;
 
-      this.collection.url =  'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + newDevice;
+      this.model.set('device', newDevice);
+    },
+    updateDevice: function() {
+      console.log('MainView:Updatedevice');
+      this.collection.url =  'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + this.model.get('device');
       this.collection.fetch({beforeSend: sendAuthentication});
 
     }
+
   });
 
   var GraphView = Backbone.View.extend({
@@ -186,8 +202,16 @@
     initialize: function() {
           this.modes = ['','lux','temp','co2','humid','noise'];
           this.mode = 0;
+          this.xmlns = 'http://www.w3.org/2000/svg';
+
           console.log('GraphView!');
           _.bindAll(this, 'render', 'changeMode', 'updateGraph');
+          this.collection.on('update',function(d) {
+            if (this.mode > 0) {
+              this.updateGraph();
+            }
+          }, this);
+
           this.render();
         },
     events: {
@@ -209,14 +233,18 @@
         },
     updateGraph: function() {
 
-          var ceiling, ceilingLimit;
+          var calcArray;
-          var points = [];
+          var startX;
-          var data = [];
+          var xstep;
-
+          var scale;
-          var getMode = this.modes[this.mode];
+          let ceiling, ceilingLimit;
+          let points = [];
+          let data = [];
+          let circle, title;
+          let getMode = this.modes[this.mode];
 
           _(this.collection.models).each(function(i) {
-            console.log(i);
+                // Console.log(i);
                 points.push(i.get(getMode));
                 data.push(i.get('dt') + ' / ' + i.get(getMode));
               }, this);
@@ -230,20 +258,18 @@
             ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
           }
 
-      var xmlns = 'http://www.w3.org/2000/svg';
+          this.$datapoints.empty();
-      this.$datapoints.empty();
 
-      var $circle;
+          scale = 124 / ceilingLimit;
-          var scale = 124 / ceilingLimit;
           // Var xstep = (280 - 46) / 100;
-          var xstep = 2.34;
+          xstep = 2.34;
-          var startX = 46 + (100 - points.length) * xstep;
+          startX = 46 + (100 - points.length) * xstep;
-          var calcArray = [];
+          calcArray = [];
           for (var x = 0;x < points.length;x++) {
             calcArray.push((startX + (x * xstep)).toFixed(2) + ',' + (136 - ((points[x]) * scale)).toFixed(2));
 
-            var circle  = document.createElementNS(xmlns,'circle');
+            circle  = document.createElementNS(this.xmlns,'circle');
-            var title = document.createElementNS(xmlns,'title');
+            title = document.createElementNS(this.xmlns,'title');
 
 
             circle.setAttributeNS(null,'fill','red');
@@ -274,7 +300,8 @@
 
   var mdotCollection = new mDotCollection();
 
-  var mainview = new MainView({collection: mdotCollection});
+  var mainSettings = new MainModel();
+  var mainview = new MainView({collection: mdotCollection, model: mainSettings});
 
   var mdot = new MDOT({collection: mdotCollection});
 

smartoffice/SODashServer/SODashServer/app/test.html

@@ -13,13 +13,45 @@
 <div id="output"></div>
 <script type="text/template" id="main-template">
   <div class="mui-container">
-      <form>
+
         <div class="mui-row">
+
           <div class="mui-select mui-col-md-6">
             <select id="device" name="device">
               <option>
 
                             </option>
+              <option>
+                HIE-mobile-1
+              </option>
+              <option>
+                HIE-demo
+              </option>
+              <option>
+                HIE-mobile-2
+              </option>
+              <option>
+                HIE-smart-campus-1
+              </option>
+              <option>
+                HIE-smart-campus-2
+              </option>
+              <option>
+                HIE-smart-campus-3
+              </option>
+              <option>
+                HIE-smart-campus-4
+              </option>
+              <option>
+                HIE-smart-campus-5
+              </option>
+              <option>
+                HIE-smart-campus-6
+              </option>
+              <option>
+                HIE-smart-campus-7
+              </option>
+
               <option>
                 CENSIS-LoRa-1
               </option>
@@ -35,6 +67,10 @@
               <option>
                 CENSIS-LoRa-4
               </option>
+              <option>
+                HIE-mDot-1
+              </option>
+
             </select> <label>Device</label>
           </div>
 
@@ -50,7 +86,10 @@
             </div>
           </div>
         </div>
-      </form>
+    <div class="mui-row">
+      <button id='refresh' class="mui-btn mui-btn--small mui-btn--primary">Refresh</button>
+    </div>
+
     </div>
 
 </script>