2010-09-08 17:39:28 -06:00
|
|
|
function dbg(o) {
|
|
|
|
e = document.getElementById("debug");
|
|
|
|
e.innerHTML = o;
|
|
|
|
}
|
|
|
|
|
|
|
|
function torgba(color, alpha) {
|
|
|
|
var r = parseInt(color.substring(1,3), 16);
|
|
|
|
var g = parseInt(color.substring(3,5), 16);
|
|
|
|
var b = parseInt(color.substring(5,7), 16);
|
|
|
|
|
|
|
|
return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
|
|
|
|
}
|
|
|
|
|
|
|
|
function plot(id, width, height, lines) {
|
2010-03-02 20:45:21 -07:00
|
|
|
var canvas = document.getElementById(id);
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
// We'll let the canvas do all the tricksy math
|
2010-09-08 17:39:28 -06:00
|
|
|
var xscale = canvas.width/width;
|
|
|
|
var yscale = canvas.height/height;
|
|
|
|
var nlines = lines.length;
|
2010-03-02 20:45:21 -07:00
|
|
|
|
|
|
|
function moveTo(x, y) {
|
2010-09-08 17:39:28 -06:00
|
|
|
ctx.moveTo(Math.round(x * xscale), Math.round((height - y) * yscale));
|
2010-03-02 20:45:21 -07:00
|
|
|
}
|
|
|
|
function lineTo(x, y) {
|
2010-09-08 17:39:28 -06:00
|
|
|
ctx.lineTo(Math.round(x * xscale), Math.round((height - y) * yscale));
|
2010-03-02 20:45:21 -07:00
|
|
|
}
|
|
|
|
|
2010-09-08 17:39:28 -06:00
|
|
|
function draw(line) {
|
|
|
|
var color = line[0];
|
|
|
|
var values = line[1];
|
2010-03-02 20:45:21 -07:00
|
|
|
var lasty = 0;
|
2010-09-08 17:39:28 -06:00
|
|
|
|
|
|
|
ctx.strokeStyle = torgba(color, 0.99);
|
|
|
|
ctx.lineWidth = 2;
|
|
|
|
ctx.beginPath();
|
|
|
|
moveTo(values[0][0], 0);
|
2010-03-02 20:45:21 -07:00
|
|
|
for (i in values) {
|
|
|
|
var x = values[i][0];
|
|
|
|
var y = values[i][1];
|
2010-09-08 17:39:28 -06:00
|
|
|
lineTo(x, lasty);
|
|
|
|
lineTo(x, y);
|
2010-03-02 20:45:21 -07:00
|
|
|
lasty = y;
|
|
|
|
}
|
2010-09-08 17:39:28 -06:00
|
|
|
lineTo(width, lasty);
|
|
|
|
ctx.stroke();
|
2010-03-02 20:45:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2010-09-08 17:39:28 -06:00
|
|
|
var cur = 0;
|
2010-03-02 20:45:21 -07:00
|
|
|
|
2010-09-08 17:39:28 -06:00
|
|
|
function update() {
|
|
|
|
var line = lines[cur];
|
|
|
|
|
|
|
|
draw(line);
|
|
|
|
cur = (cur + 1) % nlines;
|
|
|
|
|
|
|
|
if (cur > 0) {
|
|
|
|
setTimeout(update, 66);
|
|
|
|
}
|
2010-03-02 20:45:21 -07:00
|
|
|
}
|
2010-09-08 17:39:28 -06:00
|
|
|
|
|
|
|
|
|
|
|
update()
|
2010-03-02 20:45:21 -07:00
|
|
|
}
|