”2016-08-04”

This commit is contained in:
Martin Donnelly 2016-08-04 16:45:01 +01:00
parent 1fb61dff92
commit 38872a52ce
2 changed files with 73 additions and 5 deletions

View File

@ -38,7 +38,6 @@
var tempCollection = new Backbone.Collection();
//_.invoke(DeviceCollection.toArray(), 'destroy');
_.invoke(DeviceCollection.toArray(), 'destroy');
@ -87,7 +86,6 @@
}
});
var mDotCollection = Backbone.Collection.extend({
model: EventsModel,
url: 'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/',
@ -222,6 +220,7 @@
this.$line = $(this.el).find('#line');
this.$maxY = $(this.el).find('#maxY');
this.$datapoints = $(this.el).find('#datapoints');
this.$baseline = $(this.el).find('#baseline');
return this;
},
@ -242,6 +241,7 @@
let data = [];
let circle, title;
let getMode = this.modes[this.mode];
var occupied;
_(this.collection.models).each(function(i) {
// Console.log(i);
@ -259,25 +259,34 @@
}
this.$datapoints.empty();
this.$baseline.empty();
scale = 124 / ceilingLimit;
// Var xstep = (280 - 46) / 100;
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));
circle = document.createElementNS(this.xmlns,'circle');
title = document.createElementNS(this.xmlns,'title');
if (parseInt(this.mode) === 5) {
occupied = (points[x] > 920) ? 'purple' : 'red';
} else if (parseInt(this.mode) === 3) {
occupied = (points[x] > 579) ? 'purple' : 'red';
}
else {
occupied = 'red';
}
circle.setAttributeNS(null,'fill','red');
circle.setAttributeNS(null,'fill',occupied);
circle.setAttributeNS(null,'cx',(startX + (x * xstep)).toFixed(2).toString());
circle.setAttributeNS(null,'cy',(136 - ((points[x]) * scale)).toFixed(2).toString());
circle.setAttributeNS(null,'r','2');
circle.setAttributeNS(null,'stroke-width','1');
circle.setAttributeNS(null,'title','Bob');
title.textContent = data[x];
@ -286,6 +295,61 @@
this.$datapoints[0].appendChild(circle);
}
console.log('This.mode = ', this.mode);
if (parseInt(this.mode) === 3 || parseInt(this.mode) === 5) {
var avgLine = (parseInt(this.mode) === 3) ? 526 : 852;
var bline = document.createElementNS(this.xmlns,'line');
bline.setAttributeNS(null,'x1',46);
bline.setAttributeNS(null,'y1',(136 - (avgLine * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'x2',280);
bline.setAttributeNS(null,'y2',(136 - (avgLine * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'stroke','#00ff00');
bline.setAttributeNS(null,'stroke-width','1');
this.$baseline[0].appendChild(bline);
bline = document.createElementNS(this.xmlns,'line');
bline.setAttributeNS(null,'x1',46);
bline.setAttributeNS(null,'y1',(136 - (4884 * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'x2',280);
bline.setAttributeNS(null,'y2',(136 - (4884 * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'stroke','#00ff55');
bline.setAttributeNS(null,'stroke-width','1');
this.$baseline[0].appendChild(bline);
}
if (parseInt(this.mode) === 3)
{
var bline = document.createElementNS(this.xmlns,'line');
bline.setAttributeNS(null,'x1',46);
bline.setAttributeNS(null,'y1',(136 - (632 * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'x2',280);
bline.setAttributeNS(null,'y2',(136 - (632 * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'stroke','yellow');
bline.setAttributeNS(null,'stroke-width','1');
this.$baseline[0].appendChild(bline);
var bline = document.createElementNS(this.xmlns,'line');
bline.setAttributeNS(null,'x1',46);
bline.setAttributeNS(null,'y1',(136 - (1045 * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'x2',280);
bline.setAttributeNS(null,'y2',(136 - (1045 * scale)).toFixed(2).toString());
bline.setAttributeNS(null,'stroke','red');
bline.setAttributeNS(null,'stroke-width','1');
this.$baseline[0].appendChild(bline);
}
this.$line[0].setAttribute('points',calcArray.join(' '));
this.$maxY[0].textContent = ceilingLimit;

View File

@ -149,7 +149,11 @@ Co2
<polyline id="line" fill="none" stroke="#2196F3"
text-anchor="end" stroke-width="1"
points=""></polyline>
<g id="datapoints"></g>
<g id="datapoints"></g>
<g id="baseline">
</g>
</svg>
</div>
</div>