joshua
/
websockify
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleanup canvas and vnc code so they can be used together.

This commit is contained in:
Joel Martin 2010-04-04 16:08:55 -05:00
parent f272267bf7
commit c8460b0310
4 changed files with 56 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
canvas.html
View File

@ -14,4 +14,8 @@
<script src="include/mootools.js"></script> <script src="include/mootools.js"></script>
<script src="include/mootools-more.js"></script> <script src="include/mootools-more.js"></script>
<script src="canvas.js"></script> <script src="canvas.js"></script>
<script>
window.onload = function() { init_canvas('tutorial'); }
</script>
</html> </html>

79
canvas.js
View File

@ -1,11 +1,3 @@
window.onload = init;
var img = null;
var c_x = 0;
var c_y = 0;
var c_wx = 0;
var c_wy = 0;
function debug(str) { function debug(str) {
cell = $('debug'); cell = $('debug');
cell.innerHTML += str + "\n"; cell.innerHTML += str + "\n";
@ -29,66 +21,73 @@ function dirObj(obj, parent, depth) {
return msg; return msg;
} }
function mouseDown(e) {
Canvas = {
c_x : 0,
c_y : 0,
c_wx : 0,
c_wy : 0,
mousedown: function (e) {
evt = e.event || window.event; evt = e.event || window.event;
e.stop(); e.stop();
debug('mouse ' + evt.which + '/' + evt.button + ' down:' + debug('mouse ' + evt.which + '/' + evt.button + ' down:' +
(evt.clientX - c_x) + "," + (evt.clientY - c_y)); (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
} },
function mouseUp(e) { mouseUp: function (e) {
evt = e.event || window.event; evt = e.event || window.event;
e.stop(); e.stop();
debug('mouse ' + evt.which + '/' + evt.button + ' up:' + debug('mouse ' + evt.which + '/' + evt.button + ' up:' +
(evt.clientX - c_x) + "," + (evt.clientY - c_y)); (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
} },
function keyDown(e) { keyDown: function (e) {
e.stop(); e.stop();
debug("keydown: " + e.key + "(" + e.code + ")"); debug("keydown: " + e.key + "(" + e.code + ")");
} },
function keyUp(e) { keyUp : function (e) {
e.stop(); e.stop();
debug("keyup: " + e.key + "(" + e.code + ")"); debug("keyup: " + e.key + "(" + e.code + ")");
} },
function ctxDisable(e) { ctxDisable: function (e) {
evt = e.event || window.event; evt = e.event || window.event;
/* Stop propagation if inside canvas area */ /* Stop propagation if inside canvas area */
if ((evt.clientX >= c_x) && (evt.clientX < (c_x + c_wx)) && if ((evt.clientX >= Canvas.c_x) && (evt.clientX < (Canvas.c_x + Canvas.c_wx)) &&
(evt.clientY >= c_y) && (evt.clientY < (c_y + c_wy))) { (evt.clientY >= Canvas.c_y) && (evt.clientY < (Canvas.c_y + Canvas.c_wy))) {
e.stop(); e.stop();
return false; return false;
}; };
} },
function init() { init: function (canvas) {
debug(">> init"); debug(">> init_canvas");
c = $('tutorial'); c = $(canvas);
c.addEvent('mousedown', mouseDown); c.addEvent('mousedown', Canvas.mouseDown);
c.addEvent('mouseup', mouseUp); c.addEvent('mouseup', Canvas.mouseUp);
document.addEvent('keydown', keyDown); document.addEvent('keydown', Canvas.keyDown);
document.addEvent('keyup', keyUp); document.addEvent('keyup', Canvas.keyUp);
/* Work around right and middle click browser behaviors */ /* Work around right and middle click browser behaviors */
document.addEvent('click', ctxDisable); document.addEvent('click', Canvas.ctxDisable);
document.body.addEvent('contextmenu', ctxDisable); document.body.addEvent('contextmenu', Canvas.ctxDisable);
c_x = c.getPosition().x; Canvas.c_x = c.getPosition().x;
c_y = c.getPosition().y; Canvas.c_y = c.getPosition().y;
c_wx = c.getSize().x; Canvas.c_wx = c.getSize().x;
c_wy = c.getSize().y; Canvas.c_wy = c.getSize().y;
//var canvas = document.getElementById('tutorial');
if (! c.getContext) return; if (! c.getContext) return;
var ctx = c.getContext('2d'); var ctx = c.getContext('2d');
/* Border */ /* Border */
ctx.stroke(); ctx.stroke();
ctx.rect(0, 0, 500, 300); ctx.rect(0, 0, Canvas.c_wx, Canvas.c_wy);
ctx.stroke(); ctx.stroke();
/* /*
@ -99,7 +98,7 @@ function init() {
*/ */
/* Test array image data */ /* Test array image data */
img = ctx.createImageData(50, 50); var img = ctx.createImageData(50, 50);
for (y=0; y< 50; y++) { for (y=0; y< 50; y++) {
for (x=0; x< 50; x++) { for (x=0; x< 50; x++) {
img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y); img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y);
@ -110,6 +109,8 @@ function init() {
} }
ctx.putImageData(img, 100, 100); ctx.putImageData(img, 100, 100);
debug("<< init"); debug("<< init_canvas");
} }
};

18
vnc.html
View File

@ -1,25 +1,26 @@
<html> <html>
<head><title>VNC Client</title></head>
<body onload="draw();"> <body onload="draw();">
VNC Window:<br> VNC Window:<br>
<canvas id="vnc" width="800" height="600"> <canvas id="vnc" width="800" height="600">
Canvas not supported. Canvas not supported.
</canvas> </canvas>
<br><br> <br>
Debug: Debug:<br>
<div id="debug"></div> <textarea id="debug" style="font-size: 9;" cols=80 rows=25></textarea>
</body> </body>
<script src="include/mootools.js"></script> <script src="include/mootools.js"></script>
<script src="include/mootools-more.js"></script> <script src="include/mootools-more.js"></script>
<script src="include/base64a.js"></script> <script src="include/base64a.js"></script>
<script src="canvas.js"></script>
<script src="vnc.js"></script> <script src="vnc.js"></script>
<script type="text/javascript"> <script>
function connect() { function connect() {
debug(">> connect"); debug(">> connect");
var uri = new URI(window.location); var uri = new URI(window.location);
@ -33,7 +34,10 @@
debug("<< connect"); debug("<< connect");
} }
window.onload = connect(); window.onload = function() {
Canvas.init('vnc');
connect();
}
</script> </script>
</html> </html>

10
vnc.js
View File

@ -1,4 +1,3 @@
debug("here0");
var ws = null; var ws = null;
var vnc_host = ''; var vnc_host = '';
var vnc_port = 5900; var vnc_port = 5900;
@ -45,13 +44,6 @@ Array.prototype.substr = function (start, len) {
function (num) { return String.fromCharCode(num); } ).join(''); function (num) { return String.fromCharCode(num); } ).join('');
} }
function debug(str) {
cell = $('debug');
cell.innerHTML += str + "<br/>";
}
/* /*
* Server message handlers * Server message handlers
*/ */
@ -175,7 +167,7 @@ function rfb_msg(data) {
debug(">> rfb_msg"); debug(">> rfb_msg");
if (rfb_continue >= 0) { if (rfb_continue >= 0) {
var msg_type = rfb_continue; var msg_type = rfb_continue;
} else } else {
var msg_type = data.card8(0); var msg_type = data.card8(0);
} }
switch (msg_type) { switch (msg_type) {