”2016-08-02”

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

@@ -25,7 +25,7 @@
       _.bindAll(this, 'processAdded');
       this.on('all',function(d) {
         console.log('model:all',d);
-
+        this.temporal = {low: 0,high: 0};
       });
 
       this.on('add',function() {
@@ -38,12 +38,27 @@
 
       _.invoke(DeviceCollection.toArray(), 'destroy');
 
+      this.temporal = {low: 0,high: 0};
+
       _(this.get('events')).each(function(i) {
         i.evt.decoded = this.decoder(i.evt.data);
         i.evt.dateTime = this.dateTime(i.timestamp.$date);
+
+        if (this.temporal.low === 0 || this.temporal.low > i.timestamp.$date) {
+          this.temporal.low = i.timestamp.$date;
+        }
+
+        if (this.temporal.high === 0 || this.temporal.high < i.timestamp.$date) {
+          this.temporal.high = i.timestamp.$date;
+        }
+
+
         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;
+      console.log('temporal:', this.temporal);
     },
     decoder: function(data) {
       var _obj = {};
@@ -87,7 +102,7 @@
     tagName: 'div', className: 'item mui-container', initialize: function() {
       this.template = _.template($('#item-template').html());
       console.log('ItemView:Init');
-      this.render();
+      //  This.render();
     }, render: function() {
       console.log('ItemView:Render');
       _(this.model.events).each(function(i) {
@@ -126,7 +141,6 @@
       var that = this;
       this.$el.empty();
       this.collection.each(function(model) {
-
         var events = model.get('events');
         var e = new ItemView({model: model.toJSON()}).render().el;
 
@@ -183,6 +197,7 @@
       $(this.el).html(this.template());
       this.$line = $(this.el).find('#line');
       this.$maxY = $(this.el).find('#maxY');
+      this.$datapoints = $(this.el).find('#datapoints');
 
       return this;
     },
@@ -196,10 +211,14 @@
 
           var ceiling, ceilingLimit;
           var points = [];
+          var data = [];
+
           var getMode = this.modes[this.mode];
 
           _(this.collection.models).each(function(i) {
+            console.log(i);
                 points.push(i.get(getMode));
+                data.push(i.get('dt') + ' / ' + i.get(getMode));
               }, this);
 
           ceiling = points.reduce(function(p, v) {
@@ -211,6 +230,10 @@
             ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
           }
 
+      var xmlns = 'http://www.w3.org/2000/svg';
+      this.$datapoints.empty();
+
+      var $circle;
           var scale = 124 / ceilingLimit;
           // Var xstep = (280 - 46) / 100;
           var xstep = 2.34;
@@ -218,12 +241,31 @@
           var 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');
+            var title = document.createElementNS(xmlns,'title');
+
+
+            circle.setAttributeNS(null,'fill','red');
+            circle.setAttributeNS(null,'cx',(startX + (x * xstep)).toFixed(2).toString());
+            circle.setAttributeNS(null,'cy',(136 - ((points[x]) * scale)).toFixed(2).toString());
+            circle.setAttributeNS(null,'r','2');
+            circle.setAttributeNS(null,'stroke-width','1');
+            circle.setAttributeNS(null,'title','Bob');
+
+            title.textContent = data[x];
+
+            circle.appendChild(title);
+
+            this.$datapoints[0].appendChild(circle);
           }
 
           this.$line[0].setAttribute('points',calcArray.join(' '));
 
           this.$maxY[0].textContent = ceilingLimit;
 
+
+
         }
 
   });

smartoffice/SODashServer/SODashServer/app/test.html

@@ -106,9 +106,11 @@ Co2
               <line x1="46" y1="136" x2="280" y2="136"
                     style="stroke:#004c6d;stroke-width:2;"></line>
               <text id="MinY" x="36" y="139" text-anchor="end">0</text>
+
               <polyline id="line" fill="none" stroke="#2196F3"
-                        text-anchor="end" stroke-width="2"
+                        text-anchor="end" stroke-width="1"
                         points=""></polyline>
+          <g id="datapoints"></g>
             </svg>
       </div>
   </div>