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
|
var websocket_address = "ws://localhost:8000";
var circular_pixels = true; /* False for square */
var canvas;
var ctx;
var ws;
var frameCount;
var lastTime;
window.onload = function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
blank();
frameCount = 0;
lastTime = (new Date).getTime();
connect();
};
function connect() {
ws = new WebSocket(websocket_address);
ws.onopen = function() {
document.getElementById('connection').innerHTML = 'Status: connected';
}
ws.onmessage = function(e) {
var data = JSON.parse(e.data);
if (data['status'] == 'ok') {
blank();
var size = data['size'];
var frame = data['frame'];
var xo = size[0];
var xf = canvas.width / (size[2]-size[0]);
var yo = size[1];
var yf = canvas.height / (size[3]-size[1]);
var pixelWidth = xf;
var pixelHeight = yf;
var pixelRadius = Math.min(xf, yf) / 2.0;
for (var i = 0; i < frame.length; i++) {
var pos = frame[i][0];
var clr = frame[i][1];
var x = (pos[0] - xo) * xf;
var y = (pos[1] - yo) * yf;
ctx.fillStyle = clr;
ctx.strokeStyle = clr;
if (circular_pixels) {
ctx.beginPath();
ctx.arc(x, y, pixelRadius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
} else {
ctx.fillRect(x, y, pixelWidth, pixelHeight);
}
}
if (frameCount == 30) {
frameCount = 0;
var t = (new Date).getTime();
var dt = t - lastTime;
var fr = 30 / (dt / 1000.0);
document.getElementById('framerate').innerHTML = 'Framerate: ' + fr.toFixed(2) + ' fps';
lastTime = t;
}
frameCount += 1;
} else if (data['status'] == 'exiting') {
document.getElementById('framerate').innerHTML = '';
ws.close();
}
};
ws.onclose = function() {
document.getElementById('connection').innerHTML = 'Status: disconnected';
blank();
setTimeout(connect, 2000);
}
}
function blank() {
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
|
