aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Benjamin Barenblat <bbaren@mit.edu>2011-02-20 19:09:10 -0500
committerGravatar Benjamin Barenblat <bbaren@mit.edu>2011-02-20 19:10:08 -0500
commit2b2b8ffc0d9978778aa38525a55cdddf2942cef7 (patch)
tree45b636608857ab9d2af383905c2fe3443b4aaccf
parentfd13edeeb2f277ee78af6d8ced1fba81a67ed1ba (diff)
Moved websocket renderer code into standalone JavaScript file
-rw-r--r--web/js/smootCanvas.js94
-rw-r--r--web/smootlight.html97
2 files changed, 95 insertions, 96 deletions
diff --git a/web/js/smootCanvas.js b/web/js/smootCanvas.js
new file mode 100644
index 0000000..9b7121c
--- /dev/null
+++ b/web/js/smootCanvas.js
@@ -0,0 +1,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);
+}
diff --git a/web/smootlight.html b/web/smootlight.html
index 5b64a28..b52a7e2 100644
--- a/web/smootlight.html
+++ b/web/smootlight.html
@@ -1,102 +1,7 @@
<!DOCTYPE html>
<head>
<title>SmootLight</title>
-<script>
-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);
-}
-</script>
+<script type='text/javascript' src='js/smootCanvas.js'></script>
</head>
<body>