diff options
author | Merritt Boyd <mboyd@mit.edu> | 2011-02-20 18:27:52 -0500 |
---|---|---|
committer | Merritt Boyd <mboyd@mit.edu> | 2011-02-20 18:27:52 -0500 |
commit | 868c8206ac18e07f4e9d2eae32ec804344e31f2b (patch) | |
tree | 4d5b0f3c7076a5ddafdc25a8cfaa01aafbb6b6dd /web | |
parent | c2874a0cefa410aca3fdd33ed701b16bac520440 (diff) |
Websocket renderer and basic page server.
Diffstat (limited to 'web')
-rw-r--r-- | web/smootlight.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/web/smootlight.html b/web/smootlight.html new file mode 100644 index 0000000..5b64a28 --- /dev/null +++ b/web/smootlight.html @@ -0,0 +1,107 @@ +<!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> +</head> + +<body> + <canvas id='canvas' style='margin: 50px 25px;' width='800px' height='500px'></canvas> + <div id='connection'></div> + <div id='framerate'></div> +</body> +</html>
\ No newline at end of file |