399 lines
8.9 KiB
JavaScript
399 lines
8.9 KiB
JavaScript
/**
|
|
*
|
|
* User: Martin Donnelly
|
|
* Date: 2016-05-20
|
|
* Time: 10:32
|
|
*
|
|
*/
|
|
|
|
/* global inheritsFrom */
|
|
/* jshint browser: true , devel: true*/
|
|
|
|
'use strict';
|
|
var capabilityManager = {
|
|
capabilityList: [],
|
|
register: function(details) {
|
|
console.log('Registered:', details);
|
|
this.capabilityList.push(details);
|
|
},
|
|
discover: function(id) {
|
|
|
|
var wanted = this.capabilityList.filter(function(obj) {
|
|
return obj.id === id;
|
|
});
|
|
|
|
return wanted.length === 1 ? wanted[0].module : null;
|
|
}
|
|
};
|
|
|
|
|
|
var CAPABILITY = function(p) {
|
|
this.name = '-CAPABILITY-';
|
|
this.capabilityID = p.capabilityID || null;
|
|
this.state = '';
|
|
this.serviceDef = p.service || null;
|
|
|
|
this.internalID = null;
|
|
this.frameID = null;
|
|
this.$id = null;
|
|
|
|
this.deviceID = null;
|
|
|
|
this.data = [];
|
|
this.ctx = null;
|
|
this.first = false;
|
|
|
|
this.target = null;
|
|
this.$frame = null;
|
|
this.maxLength = 99;
|
|
|
|
this.previousCeil = 0;
|
|
|
|
capabilityManager.register({id: this.capabilityID, module: this});
|
|
};
|
|
|
|
CAPABILITY.prototype.setFrame = function() {
|
|
this.$frame = (this.target !== null) ? $('#' + this.target) : null;
|
|
};
|
|
|
|
CAPABILITY.prototype.setInternalID = function() {
|
|
this.internalID = (Math.floor(Math.random() * 60000) + 1).toString(36);
|
|
this.frameID = 'f-' + this.internalID;
|
|
};
|
|
|
|
CAPABILITY.prototype.setDeviceID = function(dID) {
|
|
this.deviceID = dID;
|
|
};
|
|
|
|
CAPABILITY.prototype.getDeviceID = function() {
|
|
return this.deviceID ;
|
|
};
|
|
|
|
CAPABILITY.prototype.insertFrame = function() {
|
|
|
|
this.setInternalID();
|
|
|
|
console.log('FrameID: ' , this.frameID);
|
|
|
|
var title = [this.name, ' - ', this.deviceID].join(' ');
|
|
|
|
var frame = $('<div />', {
|
|
class: 'mui-panel',
|
|
id: this.frameID});
|
|
|
|
$('<div />', { class: 'mui-row'}).append($('<div />', { class: 'mui-col-xs-12 mui--text-title', text: title})).appendTo(frame);
|
|
|
|
this.$frame.append(frame);
|
|
this.$id = $('#' + this.frameID);
|
|
};
|
|
|
|
|
|
CAPABILITY.prototype.inherits = function(a, b) {
|
|
var C = function() {};
|
|
C.prototype = b.prototype;
|
|
a.superClass_ = b.prototype;
|
|
a.prototype = new C;
|
|
a.prototype.constructor = a;
|
|
};
|
|
|
|
CAPABILITY.prototype.onError = function(e) {
|
|
console.error(e);
|
|
};
|
|
|
|
/**
|
|
*
|
|
* @param data
|
|
* @param alt
|
|
* @returns {*}
|
|
*/
|
|
|
|
CAPABILITY.prototype.storeData = function(data, alt) {
|
|
|
|
if (!this.first) {
|
|
this.first = true;
|
|
return [];
|
|
}
|
|
var target = alt || this.data;
|
|
|
|
if (target.length === this.maxLength) {
|
|
target = target.slice(1);
|
|
}
|
|
|
|
target.push(data);
|
|
if (alt) {
|
|
return target;
|
|
} else {
|
|
this.data = target;
|
|
}
|
|
|
|
|
|
};
|
|
|
|
CAPABILITY.prototype.startGraph = function(id) {
|
|
|
|
var c;
|
|
c = id[0].getContext('2d');
|
|
this.ctx = c;
|
|
|
|
this.ctx.fillStyle = '#ffffff';
|
|
this.ctx.fillRect(0,0,300,150);
|
|
};
|
|
|
|
|
|
|
|
|
|
CAPABILITY.prototype.generateBlankGraphBase = function(subID) {
|
|
|
|
var _subID = subID || '';
|
|
var xmlns = 'http://www.w3.org/2000/svg';
|
|
|
|
var svgID = this.frameID + _subID + '-svg';
|
|
var text1ID = this.frameID + _subID + '-txt1';
|
|
|
|
var svg = document.createElementNS(xmlns,'svg');
|
|
|
|
svg.setAttributeNS(xmlns,'id',svgID);
|
|
svg.setAttributeNS(xmlns,'width','300');
|
|
svg.setAttributeNS(xmlns,'height','150');
|
|
svg.setAttributeNS(xmlns,'fill', 'blue');
|
|
|
|
|
|
svg = this.graphAddXAxis(svg,{y: 12, colour: '#004c6d', id: text1ID});
|
|
svg = this.graphAddXAxis(svg,{y: 136, colour: '#004c6d', text: '0'});
|
|
|
|
return svg;
|
|
|
|
};
|
|
|
|
CAPABILITY.prototype.graphAddXAxis = function(svg, settings) {
|
|
var xmlns = 'http://www.w3.org/2000/svg';
|
|
var _svg = svg;
|
|
var y = settings.y || 0;
|
|
var y2 = y + 3;
|
|
var x2 = settings.x2 || 280;
|
|
var colour = settings.colour || '#ff0000';
|
|
var id = settings.id;
|
|
var textContent = settings.text || '-';
|
|
var lineStyle = ['stroke:',colour,';stroke-width:2;'].join('');
|
|
var textStyle = ['font-family:"Ubuntu Condensed",sans-serif;font-size:12;fill: ',colour,';text-align:right;'].join('');
|
|
|
|
var line = document.createElementNS(xmlns,'line');
|
|
|
|
line.setAttributeNS(null,'x1','46');
|
|
line.setAttributeNS(null,'y1', y);
|
|
line.setAttributeNS(null,'x2', x2);
|
|
line.setAttributeNS(null,'y2', y);
|
|
line.setAttributeNS(null,'style',lineStyle);
|
|
|
|
_svg.appendChild(line);
|
|
|
|
var text = document.createElementNS(xmlns,'text');
|
|
|
|
if (id !== null) {
|
|
text.setAttributeNS(null,'id',id);
|
|
}
|
|
text.setAttributeNS(null,'x','36');
|
|
text.setAttributeNS(null,'y', y2);
|
|
text.setAttributeNS(null,'text-anchor', 'end');
|
|
text.setAttributeNS(null,'style',textStyle);
|
|
text.textContent = textContent;
|
|
|
|
_svg.appendChild(text);
|
|
|
|
return _svg;
|
|
};
|
|
|
|
CAPABILITY.prototype.graphAddLine = function(svg, lineId, colour) {
|
|
var xmlns = 'http://www.w3.org/2000/svg';
|
|
var _svg = svg;
|
|
|
|
var polyline = document.createElementNS(xmlns,'polyline');
|
|
|
|
polyline.setAttributeNS(null,'id',lineId);
|
|
polyline.setAttributeNS(null,'fill','none');
|
|
// Proper '#2196F3'
|
|
polyline.setAttributeNS(null,'stroke',colour);
|
|
// #e5f7fd
|
|
// old #B5C7FF
|
|
polyline.setAttributeNS(null,'text-anchor', 'end');
|
|
polyline.setAttributeNS(null,'stroke-width','2');
|
|
|
|
_svg.appendChild(polyline);
|
|
|
|
return _svg;
|
|
|
|
};
|
|
|
|
|
|
CAPABILITY.prototype.generateBlankGraph = function(subID) {
|
|
|
|
var _subID = subID || '';
|
|
var lineID = this.frameID + _subID + '-line';
|
|
|
|
var svg = this.generateBlankGraphBase(_subID);
|
|
|
|
svg = this.graphAddLine(svg, lineID, '#2196F3');
|
|
|
|
return svg;
|
|
|
|
};
|
|
|
|
CAPABILITY.prototype.animateGraph = function() {
|
|
// This.simpleGraph(this.data);
|
|
};
|
|
|
|
|
|
CAPABILITY.prototype.polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {
|
|
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
|
|
|
|
return {
|
|
x: centerX + (radius * Math.cos(angleInRadians)),
|
|
y: centerY + (radius * Math.sin(angleInRadians))
|
|
};
|
|
};
|
|
|
|
|
|
CAPABILITY.prototype.describeArc = function(x, y, radius, startAngle, endAngle) {
|
|
|
|
var start = this.polarToCartesian(x, y, radius, endAngle);
|
|
var end = this.polarToCartesian(x, y, radius, startAngle);
|
|
|
|
var arcSweep = endAngle - startAngle <= 180 ? '0' : '1';
|
|
|
|
var d = [
|
|
'M', start.x, start.y,
|
|
'A', radius, radius, 0, arcSweep, 0, end.x, end.y
|
|
].join(' ');
|
|
|
|
return d;
|
|
};
|
|
|
|
CAPABILITY.prototype.setArc = function(percent) {
|
|
return (240 / 100) * percent;
|
|
};
|
|
|
|
CAPABILITY.prototype.updateArc = function(data, subID, elmID, suffix, limiter) {
|
|
|
|
|
|
var ceilingLimit;
|
|
var ceiling;
|
|
var _subID;
|
|
var _data;
|
|
var _limiter = limiter || null;
|
|
var _suffix = suffix || '';
|
|
var label;
|
|
|
|
_data = data || this.data;
|
|
|
|
_subID = subID || '';
|
|
label = '#' + this.frameID + _subID + '-label';
|
|
|
|
if (_data.length > 0) {
|
|
|
|
if (_limiter === null) {
|
|
ceiling = _data.reduce(function(p, v) {
|
|
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
|
|
});
|
|
|
|
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 10) * 10);
|
|
if (ceilingLimit > 1000) {
|
|
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
|
|
}
|
|
|
|
} else {
|
|
ceilingLimit = _limiter;
|
|
}
|
|
|
|
var latest = _data[_data.length - 1];
|
|
var scale = 100 / ceilingLimit;
|
|
var arcP = scale * latest;
|
|
|
|
document.getElementById(elmID).setAttribute('d', this.describeArc(150, 150, 100, 0, this.setArc(arcP)));
|
|
$(label).text(latest.toFixed(2) + _suffix);
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
CAPABILITY.prototype.simpleGraph = function(data, subID) {
|
|
|
|
var ceilingLimit;
|
|
var ceiling;
|
|
var _subID;
|
|
var _data;
|
|
var text1ID;
|
|
var lineID;
|
|
|
|
_data = data || this.data;
|
|
|
|
_subID = subID || '';
|
|
|
|
lineID = [this.frameID , _subID , '-line'].join('');
|
|
text1ID = [this.frameID , _subID , '-txt1'].join('');
|
|
|
|
if (_data.length > 0) {
|
|
|
|
ceiling = _data.reduce(function(p, v) {
|
|
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
|
|
});
|
|
|
|
|
|
/* Var floor = _data.reduce(function(p, v) {
|
|
return (p < v ? p : v);
|
|
});
|
|
*/
|
|
|
|
var calcArray = [];
|
|
|
|
/*
|
|
Var ceilingLimit = Math.floor(ceiling / 10) * 10;
|
|
if (ceilingLimit < ceiling) {
|
|
ceilingLimit = Math.floor((ceiling + (ceiling * 0.25)) / 10) * 10;
|
|
}
|
|
|
|
if (ceilingLimit < 30) {
|
|
ceilingLimit = 30;
|
|
}
|
|
*/
|
|
|
|
|
|
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 10) * 10);
|
|
if (ceilingLimit > 1000) {
|
|
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
|
|
}
|
|
|
|
var scale = 124 / ceilingLimit;
|
|
// Var xstep = (280 - 46) / 100;
|
|
var xstep = 2.34;
|
|
var startX = 46 + (100 - _data.length) * xstep;
|
|
|
|
for (var x = 0;x < _data.length;x++) {
|
|
|
|
calcArray.push((startX + (x * xstep)).toFixed(2) + ',' + (136 - ((_data[x]) * scale)).toFixed(2));
|
|
|
|
}
|
|
|
|
var elm = document.getElementById(lineID);
|
|
|
|
elm.setAttribute('points',calcArray.join(' '));
|
|
|
|
elm = document.getElementById(text1ID);
|
|
|
|
elm.textContent = ceilingLimit;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
var inheritsFrom = function(a, b) {
|
|
var C = function() {};
|
|
C.prototype = b.prototype;
|
|
a.superClass_ = b.prototype;
|
|
a.prototype = new C;
|
|
a.prototype.constructor = a;
|
|
a.prototype.superClass_ = b.prototype;
|
|
};
|