mirror of
https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git
synced 2025-02-05 04:50:14 +00:00
new graph
This commit is contained in:
Martin Donnelly
parent
a77d458eac
commit
3afe833595
397
app/js/mdot.js
397
app/js/mdot.js
@ -3,7 +3,6 @@
|
|||||||
/* global mainview */
|
/* global mainview */
|
||||||
/* jshint browser: true , devel: true*/
|
/* jshint browser: true , devel: true*/
|
||||||
|
|
||||||
|
|
||||||
(function($) {
|
(function($) {
|
||||||
|
|
||||||
var mqttConfig = {
|
var mqttConfig = {
|
||||||
@ -25,27 +24,26 @@
|
|||||||
var EventsModel = Backbone.Model.extend({
|
var EventsModel = Backbone.Model.extend({
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
_.bindAll(this, 'processAdded');
|
_.bindAll(this, 'processAdded');
|
||||||
this.on('all',function(d) {
|
this.on('all', function(d) {
|
||||||
console.log('model:all',d);
|
console.log('model:all', d);
|
||||||
this.temporal = {low: 0,high: 0};
|
this.temporal = {low: 0, high: 0};
|
||||||
});
|
});
|
||||||
this.on('remove', function(){
|
this.on('remove', function() {
|
||||||
$('#output').empty();
|
$('#output').empty();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.on('add',function() {
|
this.on('add', function() {
|
||||||
this.processAdded();
|
this.processAdded();
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
}, processAdded: function() {
|
||||||
processAdded: function() {
|
|
||||||
console.log('Model:ProcessAdded');
|
console.log('Model:ProcessAdded');
|
||||||
|
|
||||||
var tempCollection = new Backbone.Collection();
|
var tempCollection = new Backbone.Collection();
|
||||||
|
|
||||||
_.invoke(DeviceCollection.toArray(), 'destroy');
|
_.invoke(DeviceCollection.toArray(), 'destroy');
|
||||||
|
|
||||||
this.temporal = {low: 0,high: 0};
|
this.temporal = {low: 0, high: 0};
|
||||||
|
|
||||||
_(this.get('events')).each(function(i) {
|
_(this.get('events')).each(function(i) {
|
||||||
if (this.temporal.low === 0 || this.temporal.low > i.timestamp) {
|
if (this.temporal.low === 0 || this.temporal.low > i.timestamp) {
|
||||||
@ -56,7 +54,14 @@
|
|||||||
this.temporal.high = i.timestamp;
|
this.temporal.high = i.timestamp;
|
||||||
}
|
}
|
||||||
|
|
||||||
tempCollection.add({dt: i.timestamp,lux: i.lux, temp: i.temp, co2: i.co2, humid: i.humidity, noise: i.sound});
|
tempCollection.add({
|
||||||
|
dt: i.timestamp,
|
||||||
|
lux: i.lux,
|
||||||
|
temp: i.temp,
|
||||||
|
co2: i.co2,
|
||||||
|
humid: i.humidity,
|
||||||
|
noise: i.sound
|
||||||
|
});
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
DeviceCollection.temporal = this.temporal;
|
DeviceCollection.temporal = this.temporal;
|
||||||
@ -64,26 +69,33 @@
|
|||||||
DeviceCollection.models = tempCollection.models;
|
DeviceCollection.models = tempCollection.models;
|
||||||
DeviceCollection.trigger('update');
|
DeviceCollection.trigger('update');
|
||||||
console.log('temporal:', this.temporal);
|
console.log('temporal:', this.temporal);
|
||||||
},
|
}, decoder: function(data) {
|
||||||
decoder: function(data) {
|
|
||||||
var _obj = {};
|
var _obj = {};
|
||||||
var _data = window.atob(data).split('');
|
var _data = window.atob(data).split('');
|
||||||
|
|
||||||
var bytes = _data.map(i => i.charCodeAt());
|
var bytes = _data.map(i => i.charCodeAt());
|
||||||
|
|
||||||
_obj.light = parseInt('0x' + ('0' + bytes[0]).substr(-2) + ('0' + bytes[1]).substr(-2));
|
_obj.light = parseInt('0x' + ('0' + bytes[0]).substr(-2) + ('0' + bytes[1]).substr(
|
||||||
_obj.co2 = parseInt(_data[2] + _data[3] + _data[4] + _data[5] + _data[6], 10);
|
-2));
|
||||||
_obj.temp = (parseInt(_data[7] + _data[8] + _data[9] + _data[10] + _data[11], 10) - 1000) / 10;
|
_obj.co2 = parseInt(_data[2] + _data[3] + _data[4] + _data[5] + _data[6],
|
||||||
_obj.humid = (parseInt(_data[12] + _data[13] + _data[14] + _data[15] + _data[16], 10) / 10);
|
10);
|
||||||
_obj.noise = parseInt('0x' + ('0' + bytes[17]).substr(-2) + ('0' + bytes[18]).substr(-2));
|
_obj.temp = (parseInt(_data[7] + _data[8] + _data[9] + _data[10] + _data[11],
|
||||||
|
10) - 1000) / 10;
|
||||||
|
_obj.humid = (parseInt(_data[12] + _data[13] + _data[14] + _data[15] + _data[16],
|
||||||
|
10) / 10);
|
||||||
|
_obj.noise = parseInt('0x' + ('0' + bytes[17]).substr(-2) + ('0' + bytes[18]).substr(
|
||||||
|
-2));
|
||||||
_obj.binData = bytes;
|
_obj.binData = bytes;
|
||||||
return _obj;
|
return _obj;
|
||||||
},
|
}, dateTime: function($date) {
|
||||||
dateTime: function($date) {
|
|
||||||
var dateTime = new Date.create($date);
|
var dateTime = new Date.create($date);
|
||||||
var date = dateTime.format('{yyyy}-{MM}-{dd}');
|
var date = dateTime.format('{yyyy}-{MM}-{dd}');
|
||||||
var time = dateTime.format('{HH}:{mm}:{ss}');
|
var time = dateTime.format('{HH}:{mm}:{ss}');
|
||||||
return {dateTime: dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'), date: date, time: time};
|
return {
|
||||||
|
dateTime: dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'),
|
||||||
|
date: date,
|
||||||
|
time: time
|
||||||
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -114,8 +126,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var MDOT = Backbone.View.extend({
|
var MDOT = Backbone.View.extend({
|
||||||
model: EventsModel, el: $('#output'),
|
model: EventsModel, el: $('#output'),
|
||||||
|
|
||||||
@ -125,9 +135,9 @@
|
|||||||
_.bindAll(this, 'render', 'refresh', 'update');
|
_.bindAll(this, 'render', 'refresh', 'update');
|
||||||
this.collection.bind('change reset add remove', this.render, this);
|
this.collection.bind('change reset add remove', this.render, this);
|
||||||
|
|
||||||
//this.template = _.template($('#list-template').html());
|
//This.template = _.template($('#list-template').html());
|
||||||
this.template = _.template($('#loaded-template').html());
|
this.template = _.template($('#loaded-template').html());
|
||||||
//this.render();
|
//This.render();
|
||||||
}, refresh: function() {
|
}, refresh: function() {
|
||||||
|
|
||||||
}, update: function() {
|
}, update: function() {
|
||||||
@ -144,63 +154,56 @@
|
|||||||
var that = this;
|
var that = this;
|
||||||
that.$el.append(this.template);
|
that.$el.append(this.template);
|
||||||
|
|
||||||
/* var that = this;
|
/* Var that = this;
|
||||||
this.$el.empty();
|
this.$el.empty();
|
||||||
this.collection.each(function(model) {
|
this.collection.each(function(model) {
|
||||||
var events = model.get('events');
|
var events = model.get('events');
|
||||||
var e = new ItemView({model: model.toJSON()}).render().el;
|
var e = new ItemView({model: model.toJSON()}).render().el;
|
||||||
|
|
||||||
console.log('render:done:');
|
console.log('render:done:');
|
||||||
that.$el.append(e);
|
that.$el.append(e);
|
||||||
|
|
||||||
});
|
});
|
||||||
console.log('bah');*/
|
console.log('bah');*/
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
var MainModel = Backbone.Model.extend({});
|
var MainModel = Backbone.Model.extend({});
|
||||||
|
|
||||||
var MainView = Backbone.View.extend({
|
var MainView = Backbone.View.extend({
|
||||||
el: $('#main'),
|
el: $('#main'), template: _.template($('#main-template').html()), events: {
|
||||||
template: _.template($('#main-template').html()),
|
'change select#device': 'changeDevice',
|
||||||
events: {
|
'click button#refresh': 'updateDevice',
|
||||||
'change select#device': 'changeDevice',
|
'change input#from': 'changeDate',
|
||||||
'click button#refresh': 'updateDevice',
|
'change input#to': 'changeDate',
|
||||||
'change input#from': 'changeDate',
|
submit: function(event) {}
|
||||||
'change input#to': 'changeDate',
|
|
||||||
submit: function(event) {}
|
|
||||||
|
|
||||||
},
|
}, initialize: function() {
|
||||||
initialize: function() {
|
_.bindAll(this, 'render', 'changeDevice', 'updateDevice');
|
||||||
_.bindAll(this, 'render','changeDevice', 'updateDevice');
|
|
||||||
|
|
||||||
this.model.on('change',this.updateDevice);
|
this.model.on('change', this.updateDevice);
|
||||||
console.log('MainView:', this);
|
console.log('MainView:', this);
|
||||||
this.render();
|
this.render();
|
||||||
},
|
}, render: function() {
|
||||||
render: function() {
|
|
||||||
$(this.el).html(this.template());
|
$(this.el).html(this.template());
|
||||||
return this;
|
return this;
|
||||||
},changeDate: function(elm) {
|
}, changeDate: function(elm) {
|
||||||
console.log('ChangeDate', elm);
|
console.log('ChangeDate', elm);
|
||||||
|
|
||||||
if (elm.currentTarget.valueAsDate === null) {
|
if (elm.currentTarget.valueAsDate === null) {
|
||||||
this.model.unset(elm.currentTarget.id);
|
this.model.unset(elm.currentTarget.id);
|
||||||
} else {
|
} else {
|
||||||
this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsDate);
|
this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsDate);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
}, changeDevice: function() {
|
||||||
changeDevice: function() {
|
|
||||||
var newDevice;
|
var newDevice;
|
||||||
console.log('MainView:ChangeDevice');
|
console.log('MainView:ChangeDevice');
|
||||||
newDevice = this.$el.find('#device')[0].value;
|
newDevice = this.$el.find('#device')[0].value;
|
||||||
|
|
||||||
this.model.set('device', newDevice);
|
this.model.set('device', newDevice);
|
||||||
},
|
}, updateDevice: function() {
|
||||||
updateDevice: function() {
|
|
||||||
var fetchObj = {beforeSend: sendAuthentication};
|
var fetchObj = {beforeSend: sendAuthentication};
|
||||||
var rangeObj = {start: null, end: null};
|
var rangeObj = {start: null, end: null};
|
||||||
console.log('MainView:Updatedevice');
|
console.log('MainView:Updatedevice');
|
||||||
@ -213,9 +216,10 @@
|
|||||||
// FetchObj.data = $.param({key:'"'+ this.model.get('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');
|
// this.collection.url = 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + this.model.get('device');
|
||||||
// this.collection.url = '/api/mdot/' + this.model.get('device');
|
// this.collection.url = '/api/mdot/' + this.model.get('device');
|
||||||
this.collection.url = '/apiv2/mdot/' + this.model.get('device');
|
this.collection.url = '/apiv2/mdot/' + this.model.get('device');
|
||||||
// this.collection.url = 'http://127.0.0.1:5984/mdot/_design/getDevice/_view/getDevice';
|
// this.collection.url = 'http://127.0.0.1:5984/mdot/_design/getDevice/_view/getDevice';
|
||||||
|
|
||||||
|
$('#output').empty();
|
||||||
this.collection.fetch(fetchObj);
|
this.collection.fetch(fetchObj);
|
||||||
} else {
|
} else {
|
||||||
console.error('Nothing to get!');
|
console.error('Nothing to get!');
|
||||||
@ -229,32 +233,31 @@
|
|||||||
el: $('#graph'),
|
el: $('#graph'),
|
||||||
template: _.template($('#AMChart-template').html()),
|
template: _.template($('#AMChart-template').html()),
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.modes = ['','lux','temp','co2','humid','noise'];
|
this.modes = ['', 'lux', 'temp', 'co2', 'humid', 'noise'];
|
||||||
this.mode = 0;
|
this.mode = 0;
|
||||||
|
|
||||||
// Config AMChart
|
// Config AMChart
|
||||||
this.chart = new AmCharts.AmStockChart();
|
this.chart = new AmCharts.AmStockChart();
|
||||||
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
|
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
|
||||||
this.dataSet = new AmCharts.DataSet();
|
this.dataSet = new AmCharts.DataSet();
|
||||||
|
|
||||||
console.log('GraphView!');
|
console.log('GraphView!');
|
||||||
_.bindAll(this, 'render', 'changeMode', 'updateGraph','setupChart');
|
_.bindAll(this, 'render', 'changeMode', 'updateGraph', 'setupChart');
|
||||||
this.collection.on('update',function(d) {
|
this.collection.on('update', function(d) {
|
||||||
if (this.mode > 0) {
|
if (this.mode > 0) {
|
||||||
this.updateGraph();
|
this.updateGraph();
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
// This.setupChart();
|
// This.setupChart();
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'change select#displaymode': 'changeMode'
|
'change select#displaymode': 'changeMode'
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
$(this.el).html(this.template());
|
$(this.el).html(this.template());
|
||||||
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
setupChart: function() {
|
setupChart: function() {
|
||||||
@ -270,119 +273,164 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
changeMode: function() {
|
changeMode: function() {
|
||||||
this.mode = this.$el.find('#displaymode')[0].value;
|
this.mode = this.$el.find('#displaymode')[0].value;
|
||||||
this.updateGraph();
|
this.updateGraph();
|
||||||
console.log('new mode:', this.mode);
|
console.log('new mode:', this.mode);
|
||||||
|
|
||||||
},
|
},
|
||||||
updateGraph: function() {
|
updateGraph: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
let getMode = this.modes[this.mode];
|
let getMode = this.modes[this.mode];
|
||||||
|
|
||||||
var chartData = [];
|
var chartData = [];
|
||||||
|
|
||||||
var temporal = {high:0, low:0};
|
var temporal = {high: 0, low: 0};
|
||||||
var HL = {high:0,low:0};
|
var HL = {high: 0, low: 0};
|
||||||
|
|
||||||
_(this.collection.models).each(function(i) {
|
var mode = parseInt(this.mode);
|
||||||
var dt = i.get('dt');
|
console.log('mode:', mode, this.mode);
|
||||||
var value = i.get(getMode);
|
debugger;
|
||||||
if (temporal.low === 0 || dt < temporal.low) {
|
_(this.collection.models).each(function(i) {
|
||||||
temporal.low = dt;
|
var dt = i.get('dt');
|
||||||
}
|
var obj;
|
||||||
if (temporal.high === 0 || dt > temporal.high) {
|
var value, valueB;
|
||||||
temporal.high = dt;
|
if (mode < 6) {
|
||||||
}
|
value = i.get(getMode);
|
||||||
|
} else {
|
||||||
|
if (mode === 6) {
|
||||||
|
value = i.get(this.modes[1]);
|
||||||
|
valueB = i.get(this.modes[3]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (HL.low === 0 || value < HL.low) {
|
if (temporal.low === 0 || dt < temporal.low) {
|
||||||
HL.low = value;
|
temporal.low = dt;
|
||||||
}
|
}
|
||||||
if (HL.high === 0 || value > HL.high) {
|
if (temporal.high === 0 || dt > temporal.high) {
|
||||||
HL.high = value;
|
temporal.high = dt;
|
||||||
}
|
}
|
||||||
|
|
||||||
chartData.push({
|
if (HL.low === 0 || value < HL.low) {
|
||||||
date: dt,
|
HL.low = value;
|
||||||
value: value
|
}
|
||||||
});
|
if (HL.high === 0 || value > HL.high) {
|
||||||
|
HL.high = value;
|
||||||
|
}
|
||||||
|
|
||||||
}, this);
|
obj = {date: dt, value: value};
|
||||||
|
|
||||||
|
if (mode => 6) {
|
||||||
|
obj.valueB = valueB;
|
||||||
|
}
|
||||||
|
chartData.push(obj);
|
||||||
|
|
||||||
console.log('this.temporal', this.temporal);
|
}, this);
|
||||||
console.log('temporal', temporal);
|
|
||||||
console.log(chartData);
|
|
||||||
|
|
||||||
|
console.log(chartData);
|
||||||
|
|
||||||
console.log('Doing chart now');
|
console.log('Doing chart now');
|
||||||
|
|
||||||
//debugger;
|
//Debugger;
|
||||||
// SERIAL CHART
|
// SERIAL CHART
|
||||||
self.chart = new AmCharts.AmSerialChart();
|
self.chart = new AmCharts.AmSerialChart();
|
||||||
|
|
||||||
//"2016-08-10T23:04:31.000Z"
|
//"2016-08-10T23:04:31.000Z"
|
||||||
self.chart.dataProvider = chartData;
|
self.chart.dataProvider = chartData;
|
||||||
self.chart.dataDateFormat = "YYYY-MM-DDTHH:NN:SS.QQQ";
|
self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
|
||||||
self.chart.categoryField = "date";
|
self.chart.categoryField = 'date';
|
||||||
|
|
||||||
|
// AXES
|
||||||
|
// category
|
||||||
|
var categoryAxis = self.chart.categoryAxis;
|
||||||
|
categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true
|
||||||
|
categoryAxis.minPeriod = 'mm'; // Our data is daily, so we set minPeriod to DD
|
||||||
|
categoryAxis.gridAlpha = 0.1;
|
||||||
|
categoryAxis.minorGridAlpha = 0.1;
|
||||||
|
categoryAxis.axisAlpha = 0;
|
||||||
|
categoryAxis.minorGridEnabled = true;
|
||||||
|
categoryAxis.inside = true;
|
||||||
|
|
||||||
|
// Value
|
||||||
|
var valueAxis = new AmCharts.ValueAxis();
|
||||||
|
valueAxis.tickLength = 0;
|
||||||
|
valueAxis.axisAlpha = 0;
|
||||||
|
valueAxis.showFirstLabel = false;
|
||||||
|
valueAxis.showLastLabel = false;
|
||||||
|
self.chart.addValueAxis(valueAxis);
|
||||||
|
|
||||||
|
if (mode === 6) {
|
||||||
|
var co2Axis = new AmCharts.ValueAxis();
|
||||||
|
co2Axis.tickLength = 0;
|
||||||
|
co2Axis.axisAlpha = 0;
|
||||||
|
co2Axis.showFirstLabel = false;
|
||||||
|
co2Axis.showLastLabel = false;
|
||||||
|
co2Axis.position = 'right';
|
||||||
|
self.chart.addValueAxis(co2Axis);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// AXES
|
// GRAPH
|
||||||
// category
|
var graph = new AmCharts.AmGraph();
|
||||||
var categoryAxis = self.chart.categoryAxis;
|
graph.dashLength = 3;
|
||||||
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
|
graph.lineColor = '#00CC00';
|
||||||
categoryAxis.minPeriod = "mm"; // our data is daily, so we set minPeriod to DD
|
graph.valueField = 'value';
|
||||||
categoryAxis.gridAlpha = 0.1;
|
graph.dashLength = 3;
|
||||||
categoryAxis.minorGridAlpha = 0.1;
|
graph.bullet = 'round';
|
||||||
categoryAxis.axisAlpha = 0;
|
graph.balloonText = '[[category]]<br><b><span style=\'font-size:14px;\'>value:[[value]]</span></b>';
|
||||||
categoryAxis.minorGridEnabled = true;
|
self.chart.addGraph(graph);
|
||||||
categoryAxis.inside = true;
|
|
||||||
|
|
||||||
// value
|
|
||||||
var valueAxis = new AmCharts.ValueAxis();
|
|
||||||
valueAxis.tickLength = 0;
|
|
||||||
valueAxis.axisAlpha = 0;
|
|
||||||
valueAxis.showFirstLabel = false;
|
|
||||||
valueAxis.showLastLabel = false;
|
|
||||||
self.chart.addValueAxis(valueAxis);
|
|
||||||
|
|
||||||
// GRAPH
|
|
||||||
var graph = new AmCharts.AmGraph();
|
|
||||||
graph.dashLength = 3;
|
|
||||||
graph.lineColor = "#00CC00";
|
|
||||||
graph.valueField = "value";
|
|
||||||
graph.dashLength = 3;
|
|
||||||
graph.bullet = "round";
|
|
||||||
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>";
|
|
||||||
self.chart.addGraph(graph);
|
|
||||||
|
|
||||||
// CURSOR
|
|
||||||
var chartCursor = new AmCharts.ChartCursor();
|
|
||||||
chartCursor.valueLineEnabled = true;
|
|
||||||
chartCursor.valueLineBalloonEnabled = true;
|
|
||||||
self.chart.addChartCursor(chartCursor);
|
|
||||||
|
|
||||||
// SCROLLBAR
|
|
||||||
var chartScrollbar = new AmCharts.ChartScrollbar();
|
|
||||||
self.chart.addChartScrollbar(chartScrollbar);
|
|
||||||
|
|
||||||
// HORIZONTAL GREEN RANGE
|
|
||||||
var guide = new AmCharts.Guide();
|
|
||||||
guide.value = 525;
|
|
||||||
guide.toValue = 575;
|
|
||||||
guide.fillColor = "#00CC00";
|
|
||||||
guide.inside = true;
|
|
||||||
guide.fillAlpha = 0.2;
|
|
||||||
guide.lineAlpha = 0;
|
|
||||||
valueAxis.addGuide(guide);
|
|
||||||
|
|
||||||
|
|
||||||
// WRITE
|
if (mode === 6) {
|
||||||
|
var co2graph = new AmCharts.AmGraph();
|
||||||
|
co2graph.valueField = 'valueB';
|
||||||
|
co2graph.title = 'Co2';
|
||||||
|
co2graph.type = 'line';
|
||||||
|
co2graph.valueAxis = co2Axis; // Indicate which axis should be used
|
||||||
|
co2graph.lineColor = '#786c56';
|
||||||
|
co2graph.lineThickness = 1;
|
||||||
|
co2graph.legendValueText = '[[description]]/[[value]]';
|
||||||
|
|
||||||
|
co2graph.bullet = 'round';
|
||||||
|
co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
|
||||||
|
co2graph.bulletBorderColor = '#786c56';
|
||||||
|
co2graph.bulletBorderAlpha = 1;
|
||||||
|
co2graph.bulletBorderThickness = 2;
|
||||||
|
co2graph.bulletColor = '#000000';
|
||||||
|
//Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
|
||||||
|
co2graph.labelPosition = 'right';
|
||||||
|
//Co2graph.balloonText = "latitude:[[value]]";
|
||||||
|
co2graph.showBalloon = true;
|
||||||
|
co2graph.dashLengthField = 'dashLength';
|
||||||
|
self.chart.addGraph(co2graph);
|
||||||
|
|
||||||
|
}
|
||||||
|
// CURSOR
|
||||||
|
var chartCursor = new AmCharts.ChartCursor();
|
||||||
|
chartCursor.valueLineEnabled = true;
|
||||||
|
chartCursor.valueLineBalloonEnabled = true;
|
||||||
|
self.chart.addChartCursor(chartCursor);
|
||||||
|
|
||||||
|
// SCROLLBAR
|
||||||
|
var chartScrollbar = new AmCharts.ChartScrollbar();
|
||||||
|
self.chart.addChartScrollbar(chartScrollbar);
|
||||||
|
|
||||||
|
/* // HORIZONTAL GREEN RANGE
|
||||||
|
var guide = new AmCharts.Guide();
|
||||||
|
guide.value = 525;
|
||||||
|
guide.toValue = 575;
|
||||||
|
guide.fillColor = '#00CC00';
|
||||||
|
guide.inside = true;
|
||||||
|
guide.fillAlpha = 0.2;
|
||||||
|
guide.lineAlpha = 0;
|
||||||
|
valueAxis.addGuide(guide);*/
|
||||||
|
|
||||||
|
// WRITE
|
||||||
|
|
||||||
$('#chartdiv').empty();
|
$('#chartdiv').empty();
|
||||||
self.chart.write("chartdiv");
|
self.chart.write('chartdiv');
|
||||||
|
|
||||||
|
}
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -391,7 +439,10 @@ var self = this;
|
|||||||
var mdotCollection = new mDotCollection();
|
var mdotCollection = new mDotCollection();
|
||||||
|
|
||||||
var mainSettings = new MainModel();
|
var mainSettings = new MainModel();
|
||||||
var mainview = new MainView({collection: mdotCollection, model: mainSettings});
|
var mainview = new MainView({
|
||||||
|
collection: mdotCollection,
|
||||||
|
model: mainSettings
|
||||||
|
});
|
||||||
|
|
||||||
var mdot = new MDOT({collection: mdotCollection});
|
var mdot = new MDOT({collection: mdotCollection});
|
||||||
|
|
||||||
|
|||||||
383
app/test.html
383
app/test.html
@ -3,248 +3,203 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Title</title>
|
<title>Title</title>
|
||||||
<link href="css/mui.css" rel="stylesheet"
|
<link href="css/mui.css" rel="stylesheet" type="text/css"/>
|
||||||
type="text/css"/>
|
<link href="css/style.css" rel="stylesheet" type="text/css"/>
|
||||||
<link href="css/style.css" rel="stylesheet"
|
|
||||||
type="text/css"/>
|
|
||||||
|
|
||||||
<script src="lib/notification.js"></script>
|
<script src="lib/notification.js"></script>
|
||||||
<link rel="stylesheet" href="css/notification.css">
|
<link rel="stylesheet" href="css/notification.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="mui-container">
|
<div class="mui-container">
|
||||||
<div class='mui-row'>
|
<div class='mui-row'>
|
||||||
<div class="mui-col-md-3" >
|
<div class="mui-col-md-3">
|
||||||
<div id="main">
|
<div id="main"></div>
|
||||||
</div>
|
<div id="graph"></div>
|
||||||
|
<div id="output"></div>
|
||||||
<div id="graph">
|
</div>
|
||||||
</div>
|
|
||||||
<div id="output"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="mui-col-md-9">
|
<div class="mui-col-md-9">
|
||||||
<div class="mui-container">
|
<div class="mui-container">
|
||||||
<div id="chartdiv" style="width:100%; height:600px;"></div>
|
<div id="chartdiv" style="width:100%; height:600px;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!--<div id="main"></div>-->
|
||||||
|
<!--<div id="graph"></div>-->
|
||||||
|
|
||||||
|
|
||||||
<!--<div id="main"></div>-->
|
|
||||||
<!--<div id="graph"></div>-->
|
|
||||||
|
|
||||||
<script type="text/template" id="loaded-template">
|
<script type="text/template" id="loaded-template">
|
||||||
<div style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded</div>
|
<div
|
||||||
</script>
|
style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
|
||||||
<script type="text/template" id="main-template">
|
</div>
|
||||||
<div class="mui-container">
|
</script>
|
||||||
|
<script type="text/template" id="main-template">
|
||||||
<div class="mui-row">
|
<div class="mui-container">
|
||||||
|
<div class="mui-row">
|
||||||
<div class="mui-select">
|
<div class="mui-select">
|
||||||
<select id="device" name="device">
|
<select id="device" name="device">
|
||||||
<option>
|
<option></option>
|
||||||
|
<option>
|
||||||
</option>
|
HIE-mobile-1
|
||||||
<option>
|
</option>
|
||||||
HIE-mobile-1
|
<option>
|
||||||
</option>
|
HIE-demo
|
||||||
<option>
|
</option>
|
||||||
HIE-demo
|
<option>
|
||||||
</option>
|
HIE-mobile-2
|
||||||
<option>
|
</option>
|
||||||
HIE-mobile-2
|
<option>
|
||||||
</option>
|
HIE-smart-campus-1
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-1
|
<option>
|
||||||
</option>
|
HIE-smart-campus-2
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-2
|
<option>
|
||||||
</option>
|
HIE-smart-campus-3
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-3
|
<option>
|
||||||
</option>
|
HIE-smart-campus-4
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-4
|
<option>
|
||||||
</option>
|
HIE-smart-campus-5
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-5
|
<option>
|
||||||
</option>
|
HIE-smart-campus-6
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-6
|
<option>
|
||||||
</option>
|
HIE-smart-campus-7
|
||||||
<option>
|
</option>
|
||||||
HIE-smart-campus-7
|
<option>
|
||||||
</option>
|
CENSIS-LoRa-1
|
||||||
|
</option>
|
||||||
<option>
|
<option>
|
||||||
CENSIS-LoRa-1
|
CENSIS-LoRa-2
|
||||||
</option>
|
</option>
|
||||||
|
<option>
|
||||||
<option>
|
CENSIS-LoRa-3
|
||||||
CENSIS-LoRa-2
|
</option>
|
||||||
</option>
|
<option>
|
||||||
|
CENSIS-LoRa-4
|
||||||
<option>
|
</option>
|
||||||
CENSIS-LoRa-3
|
<option>
|
||||||
</option>
|
HIE-mDot-1
|
||||||
|
</option>
|
||||||
<option>
|
</select> <label>Device</label>
|
||||||
CENSIS-LoRa-4
|
</div>
|
||||||
</option>
|
</div>
|
||||||
<option>
|
<div class="mui-row">
|
||||||
HIE-mDot-1
|
<div class="mui-col-md-6">
|
||||||
</option>
|
<div class="mui-textfield">
|
||||||
|
<input type="date" placeholder="" id='from' name="from"/>
|
||||||
</select> <label>Device</label>
|
<label>From</label>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="mui-row">
|
|
||||||
<div class="mui-col-md-6">
|
|
||||||
<div class="mui-textfield">
|
|
||||||
<input type="date" placeholder="" id='from' name="from" /> <label>From</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mui-col-md-6">
|
|
||||||
<div class="mui-textfield">
|
|
||||||
<input type="date" placeholder="" id='to' name="to" /> <label>To</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mui-col-md-6">
|
||||||
|
<div class="mui-textfield">
|
||||||
|
<input type="date" placeholder="" id='to' name="to"/>
|
||||||
|
<label>To</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mui-row">
|
<div class="mui-row">
|
||||||
<button id='refresh' class="mui-btn mui-btn--small mui-btn--primary">Refresh</button>
|
<button id='refresh'
|
||||||
|
class="mui-btn mui-btn--small mui-btn--primary">Refresh
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</script>
|
||||||
</script>
|
<script type="text/template" id="list-template">
|
||||||
|
<ul></ul>
|
||||||
|
</script>
|
||||||
|
<script type="text/template" id="item-template">
|
||||||
<script type="text/template" id="list-template">
|
<div class="mui-row">
|
||||||
<ul></ul>
|
<div class="mui-col-md-2"><%= item.timestamp %></div>
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/template" id="item-template">
|
|
||||||
<div class="mui-row">
|
|
||||||
<div class="mui-col-md-2"><%= item.timestamp %></div>
|
|
||||||
<div class="mui-col-md-2"><%= item.lux %></div>
|
<div class="mui-col-md-2"><%= item.lux %></div>
|
||||||
<div class="mui-col-md-2"><%= item.co2 %></div>
|
<div class="mui-col-md-2"><%= item.co2 %></div>
|
||||||
<div class="mui-col-md-2"><%= item.temp %></div>
|
<div class="mui-col-md-2"><%= item.temp %></div>
|
||||||
<div class="mui-col-md-2"><%= item.humidity %></div>
|
<div class="mui-col-md-2"><%= item.humidity %></div>
|
||||||
<div class="mui-col-md-2"><%= item.sound %></div>
|
<div class="mui-col-md-2"><%= item.sound %></div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
<script type="text/template" id="AMChart-template">
|
||||||
<script type="text/template" id="AMChart-template">
|
<div class="mui-container">
|
||||||
<div class="mui-container">
|
|
||||||
<div class="mui-row">
|
<div class="mui-row">
|
||||||
<div class="mui-select mui-col-md-12">
|
<div class="mui-select mui-col-md-12">
|
||||||
<select id="displaymode" name="displaymode">
|
<select id="displaymode" name="displaymode">
|
||||||
<option value="0"></option>
|
<option value="0"></option>
|
||||||
<option value="1">
|
<option value="1">
|
||||||
Light
|
Light
|
||||||
</option>
|
</option>
|
||||||
|
<option value="2">
|
||||||
<option value="2">
|
Temp
|
||||||
Temp
|
</option>
|
||||||
</option>
|
<option value="3">
|
||||||
<option value="3">
|
Co2
|
||||||
Co2
|
|
||||||
</option>
|
</option>
|
||||||
|
|
||||||
<option value="4">
|
<option value="4">
|
||||||
Humidity
|
Humidity
|
||||||
</option>
|
</option>
|
||||||
<option value="5">
|
<option value="5">
|
||||||
Noise
|
Noise
|
||||||
|
</option>
|
||||||
|
<option value="6">
|
||||||
|
Light & Co2
|
||||||
|
</option>
|
||||||
|
<option value="7">
|
||||||
|
Temperature & Humidity
|
||||||
</option>
|
</option>
|
||||||
|
|
||||||
</select> <label>Graph</label>
|
</select> <label>Graph</label>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/template" id="graph-template">
|
|
||||||
<div class="mui-container">
|
|
||||||
<div class="mui-row">
|
|
||||||
<div class="mui-select mui-col-md-6">
|
|
||||||
<select id="displaymode" name="displaymode">
|
|
||||||
<option value="0"></option>
|
|
||||||
<option value="1">
|
|
||||||
Light
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="2">
|
|
||||||
Temp
|
|
||||||
</option>
|
|
||||||
<option value="3">
|
|
||||||
Co2
|
|
||||||
</option>
|
|
||||||
|
|
||||||
<option value="4">
|
|
||||||
Humidity
|
|
||||||
</option>
|
|
||||||
<option value="5">
|
|
||||||
Noise
|
|
||||||
</option>
|
|
||||||
|
|
||||||
</select> <label>Graph</label>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="mui-col-md-6">
|
|
||||||
<svg id="graphSVG" width="300" height="150" fill="blue">
|
|
||||||
<line x1="46" y1="12" x2="280" y2="12"
|
|
||||||
style="stroke:#004c6d;stroke-width:2;"></line>
|
|
||||||
<text id="maxY" x="36" y="15" text-anchor="end">--</text>
|
|
||||||
<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="1"
|
|
||||||
points=""></polyline>
|
|
||||||
<g id="datapoints"></g>
|
|
||||||
<g id="baseline">
|
|
||||||
|
|
||||||
</g>
|
|
||||||
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</script>
|
||||||
|
<script type="text/template" id="graph-template">
|
||||||
</script>
|
<div class="mui-container">
|
||||||
|
<div class="mui-row">
|
||||||
|
<div class="mui-select mui-col-md-6">
|
||||||
<script src="lib/jquery.js"
|
<select id="displaymode" name="displaymode">
|
||||||
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
|
<option value="0"></option>
|
||||||
crossorigin="anonymous"></script>
|
<option value="1">
|
||||||
<script src="lib/base64.js"></script>
|
Light
|
||||||
<script src="lib/underscore.js"></script>
|
</option>
|
||||||
<script src="lib/backbone.js"></script>
|
<option value="2">
|
||||||
<script src="lib/sugar-date.js"></script>
|
Temp
|
||||||
|
</option>
|
||||||
<script src="lib/amcharts.js"></script>
|
<option value="3">
|
||||||
<script src="lib/serial.js"></script>
|
Co2
|
||||||
<script src="lib/amstock.js"></script>
|
</option>
|
||||||
|
<option value="4">
|
||||||
|
Humidity
|
||||||
<script src="js/mdot.js"></script>
|
</option>
|
||||||
|
<option value="5">
|
||||||
|
Noise
|
||||||
|
</option>
|
||||||
|
</select> <label>Graph</label>
|
||||||
|
</div>
|
||||||
|
<div class="mui-col-md-6">
|
||||||
|
<svg id="graphSVG" width="300" height="150" fill="blue">
|
||||||
|
<line x1="46" y1="12" x2="280" y2="12"
|
||||||
|
style="stroke:#004c6d;stroke-width:2;"></line>
|
||||||
|
<text id="maxY" x="36" y="15" text-anchor="end">--</text>
|
||||||
|
<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="1" points=""></polyline>
|
||||||
|
<g id="datapoints"></g>
|
||||||
|
<g id="baseline"></g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
<script src="lib/jquery.js"
|
||||||
|
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="lib/base64.js"></script>
|
||||||
|
<script src="lib/underscore.js"></script>
|
||||||
|
<script src="lib/backbone.js"></script>
|
||||||
|
<script src="lib/sugar-date.js"></script>
|
||||||
|
<script src="lib/amcharts.js"></script>
|
||||||
|
<script src="lib/serial.js"></script>
|
||||||
|
<script src="lib/amstock.js"></script>
|
||||||
|
<script src="js/mdot.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user