142 lines
3.7 KiB
JavaScript
142 lines
3.7 KiB
JavaScript
//
|
|
// curr script
|
|
//
|
|
// var mySite = 'http://192.168.1.23' from myip.js
|
|
var url = mySite + '/state';
|
|
var rawData = [];
|
|
var avgData = [];
|
|
var currIndex = 0;
|
|
var axes = {};
|
|
var totalSamples = 400; // Width of the graph
|
|
for (var i = 0; i < totalSamples; i++)
|
|
rawData[i] = avgData[i] = 0;
|
|
setInterval(RefreshStatus, 500);
|
|
|
|
// -------------------------
|
|
|
|
getIt = function (aUrl, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', aUrl, true);
|
|
xhr.responseType = 'text';
|
|
xhr.onload = function (e) {
|
|
if (this.status === 200) {
|
|
callback(this.response);
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
|
|
function RefreshStatus() {
|
|
getIt(url,
|
|
function (data) {
|
|
obj = JSON.parse(data);
|
|
UpdateGraph(obj.raw, obj.sense); // raw and averaged
|
|
document.getElementById('uptime').innerHTML = 'Uptime: ' + obj.uptime;
|
|
document.getElementById('currText').innerHTML = 'raw: ' + obj.raw + ', avg: ' + obj.sense;
|
|
}
|
|
);
|
|
}
|
|
|
|
function CurrInit() {
|
|
var canvas = document.getElementById('curr');
|
|
if (null === canvas || !canvas.getContext)
|
|
return;
|
|
ctx = canvas.getContext('2d');
|
|
axes.w = 0.9 * canvas.width;
|
|
axes.h = 0.8 * canvas.height;
|
|
axes.x0 = 0.07 * canvas.width; // x0 pixels from left to x=0
|
|
axes.y0 = 0.10 * canvas.height; // y0 pixels from top to y=0
|
|
axes.scaleX = totalSamples; // # pixels from x=0 to x=1
|
|
axes.scaleY = 1024;
|
|
axes.doNegativeX = false;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.rect(0, 0, canvas.width - 1, canvas.height - 1);
|
|
ctx.strokeStyle = 'black';
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
showAxes(ctx, axes);
|
|
}
|
|
|
|
function UpdateGraph(rawCurr, avgCurr) {
|
|
var xx, yy;
|
|
var i;
|
|
|
|
if (rawCurr > axes.scaleY) // safety limit
|
|
rawCurr = axes.scaleY;
|
|
else if (rawCurr < 0)
|
|
rawCurr = 0;
|
|
if (avgCurr > axes.scaleY) // safety limit
|
|
avgCurr = axes.scaleY;
|
|
else if (avgCurr < 0)
|
|
avgCurr = 0;
|
|
rawData[currIndex] = rawCurr;
|
|
avgData[currIndex] = avgCurr;
|
|
console.log('UpdateGraph(-' + rawCurr + ')');
|
|
CurrInit();
|
|
|
|
// Draw Raw
|
|
x0 = axes.x0;
|
|
y0 = axes.y0;
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = '#FF8080';
|
|
ctx.lineWidth = 3;
|
|
for (i = 0; i < totalSamples; i++) {
|
|
pi = (currIndex + 1 + i) % totalSamples;
|
|
xx = x0 + i / axes.scaleX * axes.w;
|
|
yy = y0 + axes.h - rawData[pi] / axes.scaleY * axes.h;
|
|
ctx.lineTo(xx, yy);
|
|
}
|
|
ctx.stroke();
|
|
// Circle
|
|
ctx.beginPath();
|
|
ctx.arc(xx, yy, 7, 0, 2 * Math.PI, false);
|
|
ctx.fillstyle = '#FF8080';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#FF0000';
|
|
ctx.stroke();
|
|
|
|
// Draw Average
|
|
x0 = axes.x0;
|
|
y0 = axes.y0;
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = '#8080FF';
|
|
ctx.lineWidth = 3;
|
|
for (i = 0; i < totalSamples; i++) {
|
|
pi = (currIndex + 1 + i) % totalSamples;
|
|
xx = x0 + i / axes.scaleX * axes.w;
|
|
yy = y0 + axes.h - avgData[pi] / axes.scaleY * axes.h;
|
|
ctx.lineTo(xx, yy);
|
|
}
|
|
ctx.stroke();
|
|
// Circle
|
|
ctx.beginPath();
|
|
ctx.arc(xx, yy, 7, 0, 2 * Math.PI, false);
|
|
ctx.fillstyle = '#8080FF';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#0000FF';
|
|
ctx.stroke();
|
|
currIndex++;
|
|
currIndex %= totalSamples;
|
|
}
|
|
|
|
function showAxes(ctx, axes) {
|
|
var x0 = axes.x0, w = axes.w;
|
|
var y0 = axes.y0, h = axes.h;
|
|
var xmin = axes.doNegativeX ? 0 : x0;
|
|
ctx.lineWidth = 1;
|
|
ctx.font = '12px Arial';
|
|
ctx.textAlign = 'end';
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = 'rgb(128,128,128)';
|
|
ctx.moveTo(x0, y0); ctx.lineTo(x0, y0 + h); // Y axis
|
|
for (var y = 0; y <= axes.scaleY; y += 100) {
|
|
yy = axes.y0 + axes.h - y / axes.scaleY * axes.h;
|
|
ctx.moveTo(xmin, yy); ctx.lineTo(x0 + w, yy); // X axis
|
|
ctx.fillText(y, x0 - 3, yy + 3);
|
|
}
|
|
ctx.font = '18px Arial';
|
|
ctx.textAlign = 'start';
|
|
ctx.fillText('Current Graph', axes.x0, axes.y0 - 6);
|
|
ctx.stroke();
|
|
}
|