martin/mdot_server
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git synced 2025-02-10 20:59:16 +00:00
Code Issues Projects Releases Wiki Activity

Tidying up and reverting graph to working version

Browse Source
This commit is contained in:
Martin Donnelly 2016-08-25 10:44:49 +01:00
parent 18bb981551
commit c682618d91
7 changed files with 19473 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
app/graph.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<link rel="stylesheet"
href="https://www.amcharts.com/lib/3/plugins/export/export.css"
type="text/css" media="all"/>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="js/staticdata.js"></script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 700px;"></div>
<script>
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "lib/images/";
chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
categoryAxesSettings.minPeriod = '5mm';
categoryAxesSettings.parseDates = true;
categoryAxesSettings.axisColor = 'rgba(255,255,255,0.8)';
categoryAxesSettings.minorGridEnabled = true;
categoryAxesSettings.gridColor = '#556374';
categoryAxesSettings.maxSeries = 0;
chart.categoryAxesSettings = categoryAxesSettings;
var dataSetLux = new AmCharts.DataSet();
dataSetLux.title = "Lux";
dataSetLux.fieldMappings = [
{
fromField: "lux", toField: "value"
}, {
fromField: "co2", toField: "co2"
}, {
fromField: "humid", toField: "humid"
}, {
fromField: "temp", toField: "temp"
}
];
dataSetLux.dataProvider = chartData;
dataSetLux.categoryField = "date";
// set data sets to the chart
chart.dataSets = [dataSetLux];
var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = false;
stockPanel1.title = "Sensor Readings";
stockPanel1.percentHeight = 60;
// LUX
var valueAxisLux = new AmCharts.ValueAxis();
stockPanel1.addValueAxis(valueAxisLux);
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.position = "right";
stockPanel1.addValueAxis(valueAxis2);
var valueAxis3 = new AmCharts.ValueAxis();
valueAxis3.offset = '-50';
stockPanel1.addValueAxis(valueAxis3);
var valueAxis4 = new AmCharts.ValueAxis();
valueAxis4.position = "right";
stockPanel1.addValueAxis(valueAxis4);
var graphLux = new AmCharts.StockGraph();
graphLux.title = "Light";
graphLux.valueField = "value";
graphLux.lineThickness = 1;
graphLux.lineColor = "#00cc00";
graphLux.useDataSetColors = false;
graphLux.stackable = false;
stockPanel1.addStockGraph(graphLux);
// CO2
var graph2 = new AmCharts.StockGraph();
graph2.title = "Co2";
graph2.valueField = "co2";
// graph2.type = "column";
graph2.showBalloon = false;
graph2.valueAxis = valueAxis2;
stockPanel1.addStockGraph(graph2);
var graph3 = new AmCharts.StockGraph();
graph3.title = "Humidity";
graph3.valueField = "humid";
graph3.lineThickness = 1;
graph3.lineColor = "#ffcc00";
graph3.useDataSetColors = false;
graph3.stackable = false;
graph3.valueAxis = valueAxis3;
stockPanel1.addStockGraph(graph3);
var graph4 = new AmCharts.StockGraph();
graph4.title = "Temp";
graph4.valueField = "temp";
graph4.lineColor = "#00ffcc";
// graph2.type = "column";
graph4.showBalloon = false;
graph4.valueAxis = valueAxis4;
stockPanel1.addStockGraph(graph4);
stockPanel1.stockLegend = new AmCharts.StockLegend();
chart.panels = [stockPanel1];
chart.write('chartdiv');
</script>
</body>
</html>

123
app/js/mdot.js
View File

@ -14,21 +14,25 @@
};
var sendAuthentication = function(xhr) {
var user = 'a-qz0da4-dfwwdkmkzr'; // Your actual username
var pass = '9txJEf3Cjy7hkSOvkv'; // Your actual password
var user = mqttConfig.userName; // Your actual username
var pass = mqttConfig.appKey; // Your actual password
var token = user.concat(':', pass);
xhr.setRequestHeader('Authorization', ('Basic '.concat(btoa(token))));
console.log('Auth:', ('Basic '.concat(btoa(token))));
};
/*
__ __ ___ ___ ___ _ ___
| \/ |/ _ \| \| __| | / __|
| |\/| | (_) | |) | _|| |__\__ \
|_| |_|\___/|___/|___|____|___/
*/
var MainModel = Backbone.Model.extend({});
var EventsModel = Backbone.Model.extend({
initialize: function() {
_.bindAll(this, 'processAdded');
this.on('all', function(d) {
console.log('model:all', d);
this.temporal = {low: 0, high: 0};
});
this.on('remove', function() {
$('#output').empty();
});
@ -43,11 +47,13 @@
Get a branch from the date tree and see if the reduced set of records has a matching timestamp..
*/
let count = 0;
let tsDate = new Date(ts);
let tsMS = tsDate.getTime();
let branch = this.dateTree[tsDate.getFullYear().toString()][tsDate.getMonth().toString()][tsDate.getDate().toString()];
const tsDate = new Date(ts);
const tsMS = tsDate.getTime();
const branch = this.dateTree[tsDate.getFullYear().toString()][tsDate.getMonth().toString()][tsDate.getDate().toString()];
if (typeof branch === 'undefined') {return count;}
if (typeof branch === 'undefined') {
return count;
}
_(branch).each(function(item) {
if ((tsMS >= item.startMS) && (tsMS <= item.endMS)) {
count = item.count;
@ -63,9 +69,9 @@
*/
var _tree = {};
_(occupancy).each(function(item) {
let newItem = item;
const newItem = item;
let day, month,year;
let _date = new Date(item.start);
const _date = new Date(item.start);
newItem.startMS = new Date(item.start).getTime();
newItem.endMS = new Date(item.end).getTime();
@ -102,8 +108,6 @@
processAdded: function() {
console.log('Model:ProcessAdded');
console.time('processAdd');
var skipOccupancy = false;
var tempCollection = new Backbone.Collection();
@ -174,31 +178,31 @@
}
});
/*
___ ___ _ _ ___ ___ _____ ___ ___ _ _ ___
/ __/ _ \| | | | | __/ __|_ _|_ _/ _ \| \| / __|
| (_| (_) | |__| |__| _| (__ | | | | (_) | .` \__ \
\___\___/|____|____|___\___| |_| |___\___/|_|\_|___/
*/
var mDotCollection = Backbone.Collection.extend({
model: EventsModel,
url: 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/',
initialize: function() {
this.on('update', function() {
// Nothing
});
}
});
var ItemView = Backbone.View.extend({
tagName: 'div', className: 'item mui-container', initialize: function() {
this.template = _.template($('#item-template').html());
console.log('ItemView:Init');
}, render: function() {
console.log('ItemView:Render');
_(this.model.events).each(function(i) {
this.$el.append(this.template({item: i}));
}, this);
return this;
}
});
/*
__ _____ _____ _____
\ \ / /_ _| __\ \ / / __|
\ V / | || _| \ \/\/ /\__ \
\_/ |___|___| \_/\_/ |___/
*/
var MDOT = Backbone.View.extend({
model: EventsModel, el: $('#output'),
@ -213,49 +217,41 @@
}, refresh: function() {
}, update: function() {
console.log('MDOT:update');
this.collection.each(function(model) {
this.collection.each(function() {
});
}, render: function() {
console.log('MDOT:render');
$('#output').empty();
return this;
}
});
var MainModel = Backbone.Model.extend({});
var MainView = Backbone.View.extend({
el: $('#main'), template: _.template($('#main-template').html()), events: {
'change select#device': 'changeDevice',
'click button#refresh': 'updateDevice',
submit: function(event) {}
submit: function() {
// Catch the submit
}
}, initialize: function() {
_.bindAll(this, 'render', 'changeDevice', 'updateDevice');
this.model.on('change', this.updateDevice);
console.log('MainView:', this);
this.render();
}, render: function() {
$(this.el).html(this.template());
return this;
}, changeDevice: function() {
var newDevice;
console.log('MainView:ChangeDevice');
newDevice = this.$el.find('#device')[0].value;
this.model.set('device', newDevice);
}, updateDevice: function() {
var fetchObj = {beforeSend: sendAuthentication};
console.log('MainView:Updatedevice');
notification.clearAll();
if (this.model.has('device')) {
this.collection.url = '/apiv2/mdot/' + this.model.get('device');
$('#output').empty();
notification.notify('info', 'Loading...');
this.collection.fetch(fetchObj);
@ -281,18 +277,15 @@
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
this.dataSet = new AmCharts.DataSet();
console.log('GraphView!');
_.bindAll(this, 'render', 'updateGraphV2', 'setupChart');
this.collection.on('update', function(d) {
console.log('GraphView Collection update trigger!!');
this.collection.on('update', function() {
// Trigger the redraw
this.updateGraphV2();
}, this);
}, events: {
'change select#displaymode': 'changeMode'
}, setupChart: function() {
console.log('chart:SetupChart');
this.categoryAxesSettings.minPeriod = 'mm';
this.chart.categoryAxesSettings = this.categoryAxesSettings;
@ -352,18 +345,8 @@
offset: 50,
position: 'right',
gridColor: '#556374'
}/*,
},
{
id: 'noise',
axisColor: 'rgb(99, 157, 189)',
axisThickness: 2,
gridAlpha: 0,
offset: 100,
axisAlpha: 1,
position: 'left',
gridColor: '#556374'
}*/
,{
id: 'occupancy',
axisColor: '#aaaaaa',
axisThickness: 2,
@ -376,7 +359,7 @@
],
graphs: [{id: 'occ',
valueAxis: 'occupancy',
type: 'column',
type: 'line',
clustered: false,
columnWidth: 1,
lineColor: '#aaaaaa',
@ -413,14 +396,7 @@
title: 'Humidity',
valueField: 'humid',
fillAlphas: 0
}/*,
{
valueAxis: 'noise',
lineColor: 'rgb(99, 157, 189)',
title: 'Sound',
valueField: 'noise',
fillAlphas: 0
}*/
}
],
chartScrollbar: {
graph: 'occ',oppositeAxis: false,
@ -476,9 +452,7 @@
});
});
console.timeEnd('chartData');
console.log('Record count:',chartData.length);
// Console.log(chartData);
self.doChartV2(chartData);
console.timeEnd('updateGraphV2');
}
@ -489,17 +463,16 @@
stacking: false
});
var DeviceCollection = new Backbone.Collection;
var OccupancyCollection = new Backbone.Collection;
var mdotCollection = new mDotCollection();
var mainSettings = new MainModel();
var mainview = new MainView({
var views = {};
views.mainview = new MainView({
collection: mdotCollection, model: mainSettings
});
var mdot = new MDOT({collection: mdotCollection});
views.mdot = new MDOT({collection: mdotCollection});
var grapher = new GraphView({collection: DeviceCollection});
views.grapher = new GraphView({collection: DeviceCollection});
})(jQuery);

19161
app/js/staticdata.js Normal file
View File

File diff suppressed because it is too large Load Diff

15
app/test.html
View File

@ -5,19 +5,19 @@
<title>Graph</title>
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- build:css -->
<link href="css/mui.css" rel="stylesheet" type="text/css"/>
<link href="css/test.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script src="lib/mui.js"></script>
<script src="lib/notification.js"></script>
<link rel="stylesheet" href="css/notification.css">
<!-- endbuild -->
</head>
<body style="background-color:#171d25">
<div class="mui-container">
<div class='mui-row'>
<div class="mui-col-md-3 panel">
<div class='mui-panel' id="main"></div>
<!--<div class='mui-panel' id="graph"></div>-->
<div id="output"></div>
</div>
<div class="mui-col-md-9">
@ -26,8 +26,6 @@
</div>
</div>
</div>
<!--<div id="main"></div>-->
<!--<div id="graph"></div>-->
<script type="text/template" id="loaded-template">
<div
style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
@ -183,6 +181,10 @@
</div>
</div>
</script>
<!-- build:vendor -->
<script src="lib/mui.js"></script>
<script src="lib/notification.js"></script>
<script src="lib/jquery.js"
integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
crossorigin="anonymous"></script>
@ -194,6 +196,9 @@
<script src="lib/amcharts.js"></script>
<script src="lib/serial.js"></script>
<script src="lib/amstock.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script src="js/mdot.js"></script>
<!-- endbuild -->
</body>
</html>

124
gulpfile.js Normal file
View File

@ -0,0 +1,124 @@
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var cssnano = require('gulp-cssnano');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var htmlmin = require('gulp-htmlmin');
var inject = require('gulp-inject');
var del = require('del');
var htmlreplace = require('gulp-html-replace');
var stripDebug = require('gulp-strip-debug');
var filePath = {
build_dir: './dist'
};
var fontOptions = { };
gulp.task('appJS', function() {
return gulp.src(['app/js/mdot.js'])
.pipe(stripDebug())
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('app.js'))
.pipe(uglify({mangle: false}))
.pipe(gulp.dest('www/js'));
});
gulp.task('vendor', function() {
return gulp.src(['src/bower_modules/mui/packages/cdn/js/mui.min.js',
'src/bower_modules/jquery/dist/jquery.min.js',
'src/bower_modules/base64/base64.min.js',
'src/bower_modules/underscore/underscore-min.js',
'src/bower_modules/backbone/backbone-min.js',
'src/bower_modules/sugarjs-date/sugar-date.min.js',
'src/bower_modules/notification-js/build/notification.min.js',
'src/bower_modules/amstock3/amcharts/amcharts.js',
'src/bower_modules/amstock3/amcharts/serial.js',
'src/bower_modules/amstock3/amcharts/amstock.js'
])
.pipe(concat('vendor.js'))
.pipe(uglify({mangle: false}))
.pipe(gulp.dest('www/libs'));
});
gulp.task('styles', function() {
return gulp.src(['src/bower_modules/mui/packages/cdn/css/mui.min.css','app/css/test.css','app/css/style.css','src/bower_modules/notification-js/build/notification.min.js'])
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(cssnano())
.pipe(concat('app.css'))
.pipe(gulp.dest('www/css'));
});
gulp.task('index', function() {
return gulp.src(['app/index.html'])
.pipe(htmlreplace({
mui: 'css/custom.css',
css: 'css/app.css',
js: 'js/app.js',
vendor: 'libs/vendor.js'
}))
.pipe(htmlmin({removeComments: true, collapseWhitespace: true, keepClosingSlash: true}))
.pipe(gulp.dest('www/'));
});
gulp.task('partials', function() {
gulp.src(['app/partials/**/*']).pipe(gulp.dest('www/partials'));
// gulp.src(['app/libs/ejs_production.js']).pipe(gulp.dest('dist/libs'));
// gulp.src(['app/libs/microevent.js']).pipe(gulp.dest('dist/libs'));
//gulp.src(['app/fav/**/*']).pipe(size({title: 'Partials'})).pipe(gulp.dest('dist/fav'));
gulp.src(['app/img/logo.png']).pipe(gulp.dest('www/img'));
});
gulp.task('copy', function() {
return gulp.src(['app/**/*'])
.pipe(gulp.dest('www'));
});
gulp.task('buildJS', function() {
gulp.start('appJS','vendor');
});
gulp.task('clean', function() {
return del(['www']);
});
gulp.task('normal', ['clean'], function() {
'use strict';
gulp.start('copy', 'sloc','watch');
});
gulp.task('default', ['clean'], function() {
gulp.start('buildJS','styles','index');
});
gulp.task('watch',function() {
gulp.watch('app/**/*',['copy']);
});
gulp.task('MUIWatcher', function() {
'use strict';
gulp.start('customMUI','watchMUI');
});
gulp.task('watchMUI',function() {
gulp.watch('app/css/custom.scss',['customMUI']);
});

4
lib/mdot/apiv2.js
View File

@ -11,7 +11,7 @@ module.exports = function(app) {
var mdotRouter = express.Router();
mdotRouter.get('/:id', function(req, res) {
console.log(req.headers);
logger.debug(req.headers);
var data = {};
logger.debug('mDot-GetData');
@ -25,7 +25,7 @@ module.exports = function(app) {
return;
}
if (req.query.hasOwnProperty('start') && req.query.hasOwnProperty('start')) {
if (req.query.hasOwnProperty('start') && req.query.hasOwnProperty('end')) {
data.start = req.query.start;
data.end = req.query.end;
}

8
lib/server/db-mdot.js
View File

@ -70,7 +70,7 @@ module.exports = function(db) {
_obj.deviceID = module.deviceIds.indexOf(params.id);
room = _obj.deviceID;
if (params.hasOwnProperty('start') && params.hasOwnProperty('start')) {
if (params.hasOwnProperty('start') && params.hasOwnProperty('end')) {
logger.debug('params.start',params.start);
logger.debug('params.start',Sugar.Date.create(params.start));
@ -83,10 +83,8 @@ module.exports = function(db) {
.then(function(d) {
self.sqlGetMeetingByRoom(room)
.then(function(mrd) {
console.log('d:',d);
console.log('mrd:',mrd);
.then(function() {
// nothing done
})
.catch(function(e) {
logger.error(e);