diff --git a/mdot/mdot_server/mdot_server/app/js/mdot.js b/mdot/mdot_server/mdot_server/app/js/mdot.js
index af08b79..48382e7 100644
--- a/mdot/mdot_server/mdot_server/app/js/mdot.js
+++ b/mdot/mdot_server/mdot_server/app/js/mdot.js
@@ -37,16 +37,63 @@
this.processAdded();
});
- }, processAdded: function() {
- console.log('Model:ProcessAdded');
+ },
+ splitOccupancy: function(item) {
+ var start = new Date(item.start);
+ var msStart = ~~(start.getTime() / 300000);
+
+ var end = new Date(item.end);
+ var msEnd = ~~(end.getTime() / 300000);
+
+ var newArray = [];
+
+ for (var t = 0; t < (msEnd - msStart);t++) {
+ newArray.push({date: new Date((msStart * (300000)) + (t * 300000)), count: item.count});
+ }
+ return newArray;
+
+ },
+ findOccupancy: function(ts, occupancy)
+ {
+ let tsMS = new Date(ts).getTime();
+
+ // console.log(new Date(ts).getTime());
+ // console.log(ts);
+ _(occupancy).each(function(item) {
+
+ // console.log(new Date(item.start).getTime(), new Date(item.start).getTime());
+ // console.log(item.start, item.end);
+ if ((ts >= new Date(item.start).getTime()) && (ts <= new Date(item.end).getTime()))
+ {
+ // console.log('Occupancy', item.count);
+ return item.count;
+ }
+
+ }, this);
+ return 0;
+ },
+ processAdded: function() {
+ console.log('Model:ProcessAdded');
+ var self = this;
var tempCollection = new Backbone.Collection();
+ var occuCollection = new Backbone.Collection();
+ var occupancy = [];
+
+ var events;
_.invoke(DeviceCollection.toArray(), 'destroy');
+ // _.invoke(OccupancyCollection.toArray(), 'destroy');
+
+ // console.log(this);
this.temporal = {low: 0, high: 0};
+ events = this.get('events');
+
+ //_(this.get('events')).each(function(i) {
+ _(events.data).each(function(i) {
+ let _occupancy;
- _(this.get('events')).each(function(i) {
if (this.temporal.low === 0 || this.temporal.low > i.timestamp) {
this.temporal.low = i.timestamp;
}
@@ -55,19 +102,32 @@
this.temporal.high = i.timestamp;
}
+ // _occupancy = this.findOccupancy(i.timestamp, events.occupancy);
+
tempCollection.add({
dt: i.timestamp,
lux: i.lux,
temp: i.temp,
co2: i.co2,
humid: i.humidity,
- noise: i.sound
+ noise: i.sound/*,
+ occupancy: _occupancy*/
});
}, this);
+ /* _(events.occupancy).each(function(item) {
+
+ occupancy = occupancy.concat(this.splitOccupancy(item));
+
+ }, this);*/
+
+ console.log('occupancy:', occupancy);
+
DeviceCollection.temporal = this.temporal;
+ //DeviceCollection.occupancy = occupancy;
DeviceCollection.models = tempCollection.models;
+
DeviceCollection.trigger('update');
console.log('temporal:', this.temporal);
}, decoder: function(data) {
@@ -145,8 +205,6 @@
console.log('MDOT:update');
this.collection.each(function(model) {
- // Var events = model.get('events');
- // var e = new ItemView({model: model.toJSON()});
});
}, render: function() {
@@ -155,17 +213,6 @@
var that = this;
that.$el.append(this.template);
- /* 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;
-
- console.log('render:done:');
- that.$el.append(e);
-
- });
- console.log('bah');*/
return this;
}
});
@@ -176,8 +223,6 @@
el: $('#main'), template: _.template($('#main-template').html()), events: {
'change select#device': 'changeDevice',
'click button#refresh': 'updateDevice',
- 'change input#from': 'changeDate',
- 'change input#to': 'changeDate',
submit: function(event) {}
}, initialize: function() {
@@ -189,15 +234,6 @@
}, render: function() {
$(this.el).html(this.template());
return this;
- }, changeDate: function(elm) {
- console.log('ChangeDate', elm);
-
- if (elm.currentTarget.valueAsDate === null) {
- this.model.unset(elm.currentTarget.id);
- } else {
- this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsDate);
- }
-
}, changeDevice: function() {
var newDevice;
console.log('MainView:ChangeDevice');
@@ -206,13 +242,7 @@
this.model.set('device', newDevice);
}, updateDevice: function() {
var fetchObj = {beforeSend: sendAuthentication};
- var rangeObj = {start: null, end: null};
console.log('MainView:Updatedevice');
- if (this.model.has('from') && this.model.has('to')) {
- rangeObj.start = this.model.get('from');
- rangeObj.end = this.model.get('to');
- fetchObj.data = $.param(rangeObj);
- }
if (this.model.has('device')) {
// FetchObj.data = $.param({key:'"'+ this.model.get('device') + '"'});
// this.collection.url = 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + this.model.get('device');
@@ -231,41 +261,30 @@
});
GraphView = Backbone.View.extend({
- el: $('#graph'),
- template: _.template($('#AMChart-template').html()),
- initialize: function() {
+ el: $('#graph'), initialize: function() {
this.modes = ['', 'lux', 'temp', 'co2', 'humid', 'noise'];
this.titles = [
'', 'Light Levels', 'Temperature', 'Co2 Levels', 'Humidity', 'Sound'
];
- this.otherTitles = ['Co2 Levels', 'Humidity'];
+
this.mode = 0;
// Config AMChart
- this.chart = new AmCharts.AmStockChart();
+ this.chart = {};
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
this.dataSet = new AmCharts.DataSet();
console.log('GraphView!');
- _.bindAll(this, 'render', 'changeMode', 'updateGraph', 'setupChart');
+ _.bindAll(this, 'render', 'updateGraph', 'setupChart');
this.collection.on('update', function(d) {
- if (this.mode > 0) {
- this.updateGraph();
- }
+ console.log('GraphView Collection update trigger!!');
+ this.updateGraphV2();
}, this);
- this.render();
// This.setupChart();
- },
- events: {
+ }, events: {
'change select#displaymode': 'changeMode'
- },
- render: function() {
- $(this.el).html(this.template());
-
- return this;
- },
- setupChart: function() {
+ }, setupChart: function() {
console.log('chart:SetupChart');
this.categoryAxesSettings.minPeriod = 'mm';
@@ -277,248 +296,122 @@
// This.chart.write('chartdiv');
},
- changeMode: function() {
- this.mode = this.$el.find('#displaymode')[0].value;
- this.updateGraphV2();
- console.log('new mode:', this.mode);
-
- },
- makeAxis: function(params) {
- let title = params.title || 'Missing title';
- let color = params.color || '#ff0000';
- let position = params.position || 'left';
-
- var newAxis = new AmCharts.ValueAxis();
- newAxis.tickLength = 0;
- newAxis.axisAlpha = 0;
- newAxis.showFirstLabel = false;
- newAxis.showLastLabel = false;
- newAxis.title = title;
- newAxis.position = position;
- newAxis.gridColor = '#FFFFFF';
- newAxis.axisColor = '#cccccc';
- newAxis.color = color;
-
- return newAxis;
- },
- makeGraph: function(params) {
-
- if (!params.hasOwnProperty('valueField')) {
- console.error('MakeGraph - missing required field');
- }
-
- let lineColor = params.lineColor || 'rgba(46,255,0,1)';
- let valueField = params.valueField;
- let title = params.title || 'Missing title';
-
- let valueAxis = params.valueAxis || null;
- let labelPosition = params.labelPosition || 'left';
-
- var graph = new AmCharts.AmGraph();
-
- graph.lineColor = lineColor;
- graph.labelColor = lineColor;
- graph.valueField = valueField;
- graph.balloonText = title + ':[[value]]';
-
- graph.title = title;
-
- if (valueAxis) {
- graph.valueAxis = valueAxis;
- }
- graph.legendValueText = '[[description]]/[[value]]';
-
- graph.labelPosition = labelPosition;
- graph.showBalloon = true;
-
- return graph;
- },
doChartV2: function(chartData) {
var self = this;
self.chart = AmCharts.makeChart('chartdiv', {
- type: 'serial',
- theme: 'light', legend: {
- useGraphSettings: true
- },
- color:'#ffffff',
- dataProvider: chartData,
- dataDateFormat: 'YYYY-MM-DDTHH:NN:SS.QQQ',
- synchronizeGrid: true,
- valueAxes: [{
- id: 'lux',
- axisColor: '#FFC802',
- axisThickness: 2,
- axisAlpha: 1,
- position: 'left'
- }, {
- id: 'co2',
- axisColor: 'rgba(0,191,255,1)',
- axisThickness: 2,
- axisAlpha: 1,
- position: 'right'
- }, {
- id: 'temp',
- axisColor: 'rgba(46,255,0,1)',
- axisThickness: 2,
- gridAlpha: 0,
- offset: 50,
- axisAlpha: 1,
- position: 'left'
- }, {
- id: 'humid',
- axisColor: 'rgba(255,0,99,1)',
- axisThickness: 2,
- axisAlpha: 1,
+ type: 'serial',
+ theme: 'light',
+ dataSets: [
+
+ ],
+
+ legend: {
+ useGraphSettings: true
+ },
+ color: '#ffffff',
+ dataProvider: chartData,
+ dataDateFormat: 'YYYY-MM-DDTHH:NN:SS.QQQ',
+ synchronizeGrid: true,
+ valueAxes: [
+ {
+ id: 'lux',
+ axisColor: '#FFC802',
+ axisThickness: 2,
+ axisAlpha: 1,
+ position: 'left'
+ },
+ {
+ id: 'co2',
+ axisColor: 'rgba(0,191,255,1)',
+ axisThickness: 2,
+ axisAlpha: 1,
+ position: 'right'
+ },
+ {
+ id: 'temp',
+ axisColor: 'rgba(46,255,0,1)',
+ axisThickness: 2,
+ gridAlpha: 0,
offset: 50,
- position: 'right'
- }, {
- id: 'noise',
- axisColor: 'rgb(99, 157, 189)',
- axisThickness: 2,
- gridAlpha: 0,
- offset: 100,
- axisAlpha: 1,
- position: 'left'
- }],
- graphs: [{
- valueAxis: 'lux',
- lineColor: '#FFC802',
- title: 'Light Level',
- valueField: 'lux',
- fillAlphas: 0
- }, {
- valueAxis: 'co2',
- lineColor: 'rgba(0,191,255,1)',
- title: 'Co2',
- valueField: 'co2',
- fillAlphas: 0
- }, {
- valueAxis: 'temp',
- lineColor: 'rgba(46,255,0,1)',
- title: 'Temperature',
- valueField: 'temp',
- fillAlphas: 0
- },{
- valueAxis: 'humid',
- lineColor: 'rgba(255,0,99,1)',
- title: 'Humidity',
- valueField: 'humid',
- fillAlphas: 0
- },{
- valueAxis: 'noise',
- lineColor: 'rgb(99, 157, 189)',
- title: 'Sound',
- valueField: 'noise',
- fillAlphas: 0
- }],
- chartScrollbar: {},
- chartCursor: {
- cursorPosition: 'mouse'
- },
- categoryField: 'date',
- categoryAxis: {
- minPeriod:'mm',
- parseDates: true,
- axisColor: '#ff0000',
- minorGridEnabled: true
- },
- export: {
- enabled: true,
- position: 'bottom-right'
+ axisAlpha: 1,
+ position: 'left'
+ },
+ {
+ id: 'humid',
+ axisColor: 'rgba(255,0,99,1)',
+ axisThickness: 2,
+ axisAlpha: 1,
+ offset: 50,
+ position: 'right'
+ },
+ {
+ id: 'noise',
+ axisColor: 'rgb(99, 157, 189)',
+ axisThickness: 2,
+ gridAlpha: 0,
+ offset: 100,
+ axisAlpha: 1,
+ position: 'left'
}
- });
-
+ ],
+ graphs: [
+ {
+ valueAxis: 'lux',
+ lineColor: '#FFC802',
+ title: 'Light Level',
+ valueField: 'lux',
+ fillAlphas: 0
+ },
+ {
+ valueAxis: 'co2',
+ lineColor: 'rgba(0,191,255,1)',
+ title: 'Co2',
+ valueField: 'co2',
+ fillAlphas: 0
+ },
+ {
+ valueAxis: 'temp',
+ lineColor: 'rgba(46,255,0,1)',
+ title: 'Temperature',
+ valueField: 'temp',
+ fillAlphas: 0
+ },
+ {
+ valueAxis: 'humid',
+ lineColor: 'rgba(255,0,99,1)',
+ title: 'Humidity',
+ valueField: 'humid',
+ fillAlphas: 0
+ },
+ {
+ valueAxis: 'noise',
+ lineColor: 'rgb(99, 157, 189)',
+ title: 'Sound',
+ valueField: 'noise',
+ fillAlphas: 0
+ }
+ ],
+ chartScrollbar: {},
+ chartCursor: {
+ cursorPosition: 'mouse'
+ },
+ categoryField: 'date',
+ categoryAxis: {
+ minPeriod: 'mm',
+ parseDates: true,
+ axisColor: '#ff0000',
+ minorGridEnabled: true
+ },
+ export: {
+ enabled: true, position: 'bottom-right'
+ }
+ });
$('#chartdiv').empty();
self.chart.write('chartdiv');
-
- },
- doChart: function(mode, chartData) {
- var chartScrollbar;
- var chartCursor;
- var graph;
- var valueAxis;
- var categoryAxis;
- var self = this;
- var otherAxis;
- console.log(chartData);
-
- console.log('Doing chart now');
-
- //Debugger;
- // SERIAL CHART
- self.chart = new AmCharts.AmSerialChart();
-
- //"2016-08-10T23:04:31.000Z"
- self.chart.dataProvider = chartData;
- self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
- self.chart.categoryField = 'date';
- self.chart.color = '#ffffff';
- self.chart.marginLeft = 0;
-
- // AXES
- // category
- categoryAxis = self.chart.categoryAxis;
- categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true
- categoryAxis.minPeriod = 'mm';
- categoryAxis.gridAlpha = 0.2;
- categoryAxis.minorGridAlpha = 0;
- categoryAxis.axisAlpha = 0.5;
- categoryAxis.minorGridEnabled = true;
- categoryAxis.gridColor = '#FFFFFF';
- categoryAxis.axisColor = '#cccccc';
- categoryAxis.inside = true;
-
- valueAxis = self.makeAxis({
- title: this.titles[this.mode], color: 'rgba(46,255,0,1)'
- });
- self.chart.addValueAxis(valueAxis);
-
- if (mode > 5) {
-
- otherAxis = self.makeAxis({
- title: this.otherTitles[mode - 6],
- color: 'rgba(0,191,255,1)',
- position: 'right'
- });
- self.chart.addValueAxis(otherAxis);
- }
-
- graph = self.makeGraph({
- valueField: 'value', title: this.titles[this.mode]
- });
- self.chart.addGraph(graph);
-
- if (mode > 5) {
- var otherGraph = self.makeGraph({
- lineColor: 'rgba(0,191,255,1)',
- valueField: 'valueB',
- title: this.otherTitles[mode - 6],
- valueAxis: otherAxis,
- labelPosition: 'right'
- });
- self.chart.addGraph(otherGraph);
-
- }
-
- // CURSOR
- chartCursor = new AmCharts.ChartCursor();
- chartCursor.valueLineEnabled = true;
- chartCursor.valueLineBalloonEnabled = true;
- self.chart.addChartCursor(chartCursor);
-
- // SCROLLBAR
- chartScrollbar = new AmCharts.ChartScrollbar();
- chartScrollbar.graph = graph;
- chartScrollbar.position = 'bottom';
- self.chart.addChartScrollbar(chartScrollbar);
-
- $('#chartdiv').empty();
- self.chart.write('chartdiv');
- },
- updateGraphV2: function() {
+ }, updateGraphV2: function() {
var self = this;
var chartData = [];
_(this.collection.models).each(function(i) {
@@ -531,10 +424,9 @@
temp: i.get('temp')
});
});
- console.log(chartData);
+ // Console.log(chartData);
self.doChartV2(chartData);
- },
- updateGraph: function() {
+ }, updateGraph: function() {
var self = this;
let getMode = this.modes[this.mode];
@@ -587,20 +479,20 @@
}, this);
- self.doChart(mode, chartData);
+ self.doChartV2(mode, chartData);
}
});
var DeviceCollection = new Backbone.Collection;
+ var OccupancyCollection = new Backbone.Collection;
var mdotCollection = new mDotCollection();
var mainSettings = new MainModel();
var mainview = new MainView({
- collection: mdotCollection,
- model: mainSettings
+ collection: mdotCollection, model: mainSettings
});
var mdot = new MDOT({collection: mdotCollection});
diff --git a/mdot/mdot_server/mdot_server/app/meeting.html b/mdot/mdot_server/mdot_server/app/meeting.html
index 7c08a21..7f91725 100644
--- a/mdot/mdot_server/mdot_server/app/meeting.html
+++ b/mdot/mdot_server/mdot_server/app/meeting.html
@@ -71,6 +71,6 @@
-