From 1fb61dff92c2797a9d752d41f2b322bce1a3a929 Mon Sep 17 00:00:00 2001 From: Martin Donnelly Date: Wed, 3 Aug 2016 16:45:02 +0100 Subject: [PATCH] =?UTF-8?q?=E2=80=9D2016-08-03=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SODashServer/SODashServer/app/js/mdot.js | 71 +++++++++++++------ .../SODashServer/SODashServer/app/test.html | 43 ++++++++++- 2 files changed, 90 insertions(+), 24 deletions(-) diff --git a/smartoffice/SODashServer/SODashServer/app/js/mdot.js b/smartoffice/SODashServer/SODashServer/app/js/mdot.js index 7ad12db..fa138ee 100644 --- a/smartoffice/SODashServer/SODashServer/app/js/mdot.js +++ b/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; } - - 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}); - + 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}); }, 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 points = []; - var data = []; - - var getMode = this.modes[this.mode]; + var calcArray; + var startX; + var xstep; + var scale; + 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; - var scale = 124 / ceilingLimit; + scale = 124 / ceilingLimit; // Var xstep = (280 - 46) / 100; - var xstep = 2.34; - var startX = 46 + (100 - points.length) * xstep; - var calcArray = []; + xstep = 2.34; + startX = 46 + (100 - points.length) * xstep; + 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 = document.createElementNS(this.xmlns,'circle'); + 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}); diff --git a/smartoffice/SODashServer/SODashServer/app/test.html b/smartoffice/SODashServer/SODashServer/app/test.html index f372858..4af9835 100644 --- a/smartoffice/SODashServer/SODashServer/app/test.html +++ b/smartoffice/SODashServer/SODashServer/app/test.html @@ -13,13 +13,45 @@