-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathserial.html
125 lines (96 loc) · 2.28 KB
/
serial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
position: relative;
margin:0px;
}
canvas {
position: absolute;
}
#c1 {
left:50%;
margin-left: -500px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis path {
display: none;
}
</style>
<body>
<canvas id="c1"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function rotate90(a){
// row reverse
for (i in a){
a[i] = a[i].reverse();
}
// transpose from http://www.codesuck.com/2012/02/transpose-javascript-array-in-one-line.html
a = Object.keys(a[0]).map(function (c) { return a.map(function (r) { return r[c]; }); });
return a;
}
var go = function() {
d3.json("http://localhost:8080", function(error, mat) {
var plotData = []
mat = rotate90(mat.slice(0, -1));
for (var i = 8; i < 16; i++) {
plotData.push(mat[i])
}
for (var i = 0; i < 8; i++) {
plotData.push(mat[i])
}
render(plotData, "#c1")
});
};
setInterval(go, 100);
go();
var width = 1000,
height = 1000;
function render(heatmap, where) {
var dx = heatmap[0].length,
dy = heatmap.length;
// Fix the aspect ratio.
// var ka = dy / dx, kb = height / width;
// if (ka < kb) height = width * ka;
// else width = height / ka;
var x = d3.scale.linear()
.domain([0, dx])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, dy])
.range([height, 0]);
var color = d3.scale.linear()
.domain([682/2, 1364/2, 2046/2, 2728/2, 3410/2, 4096/2])
.range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]);
d3.select(where)
.attr("width", dx)
.attr("height", dy)
.style("width", width + "px")
.style("height", height + "px")
.call(drawImage);
// Compute the pixel colors; scaled by CSS.
function drawImage(canvas) {
var context = canvas.node().getContext("2d"),
image = context.createImageData(dx, dy);
for (var y = 0, p = -1; y < dy; ++y) {
for (var x = 0; x < dx; ++x) {
var c = d3.rgb(color(heatmap[y][x]));
image.data[++p] = c.r;
image.data[++p] = c.g;
image.data[++p] = c.b;
image.data[++p] = 255;
}
}
context.putImageData(image, 0, 0);
}
}
</script>