”2016-08-03”

This commit is contained in:
Martin Donnelly 2016-08-03 16:45:02 +01:00
parent 20eebb8088
commit 1fb61dff92
2 changed files with 90 additions and 24 deletions

View File

@ -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});

View File

@ -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>