diff --git a/canvas.html b/canvas.html index dd19592f..7815f246 100644 --- a/canvas.html +++ b/canvas.html @@ -14,4 +14,8 @@ + + diff --git a/canvas.js b/canvas.js index 90f20993..1a365b89 100644 --- a/canvas.js +++ b/canvas.js @@ -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) { cell = $('debug'); cell.innerHTML += str + "\n"; @@ -29,66 +21,73 @@ function dirObj(obj, parent, depth) { 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; e.stop(); 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; e.stop(); 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(); debug("keydown: " + e.key + "(" + e.code + ")"); -} +}, -function keyUp(e) { +keyUp : function (e) { e.stop(); debug("keyup: " + e.key + "(" + e.code + ")"); -} +}, -function ctxDisable(e) { +ctxDisable: function (e) { evt = e.event || window.event; /* Stop propagation if inside canvas area */ - if ((evt.clientX >= c_x) && (evt.clientX < (c_x + c_wx)) && - (evt.clientY >= c_y) && (evt.clientY < (c_y + c_wy))) { + if ((evt.clientX >= Canvas.c_x) && (evt.clientX < (Canvas.c_x + Canvas.c_wx)) && + (evt.clientY >= Canvas.c_y) && (evt.clientY < (Canvas.c_y + Canvas.c_wy))) { e.stop(); return false; }; -} +}, -function init() { - debug(">> init"); +init: function (canvas) { + debug(">> init_canvas"); - c = $('tutorial'); - c.addEvent('mousedown', mouseDown); - c.addEvent('mouseup', mouseUp); - document.addEvent('keydown', keyDown); - document.addEvent('keyup', keyUp); + c = $(canvas); + c.addEvent('mousedown', Canvas.mouseDown); + c.addEvent('mouseup', Canvas.mouseUp); + document.addEvent('keydown', Canvas.keyDown); + document.addEvent('keyup', Canvas.keyUp); /* Work around right and middle click browser behaviors */ - document.addEvent('click', ctxDisable); - document.body.addEvent('contextmenu', ctxDisable); + document.addEvent('click', Canvas.ctxDisable); + document.body.addEvent('contextmenu', Canvas.ctxDisable); - c_x = c.getPosition().x; - c_y = c.getPosition().y; - c_wx = c.getSize().x; - c_wy = c.getSize().y; + Canvas.c_x = c.getPosition().x; + Canvas.c_y = c.getPosition().y; + Canvas.c_wx = c.getSize().x; + Canvas.c_wy = c.getSize().y; - //var canvas = document.getElementById('tutorial'); if (! c.getContext) return; var ctx = c.getContext('2d'); /* Border */ ctx.stroke(); - ctx.rect(0, 0, 500, 300); + ctx.rect(0, 0, Canvas.c_wx, Canvas.c_wy); ctx.stroke(); /* @@ -99,7 +98,7 @@ function init() { */ /* Test array image data */ - img = ctx.createImageData(50, 50); + var img = ctx.createImageData(50, 50); for (y=0; y< 50; y++) { for (x=0; x< 50; x++) { img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y); @@ -110,6 +109,8 @@ function init() { } ctx.putImageData(img, 100, 100); - debug("<< init"); + debug("<< init_canvas"); } +}; + diff --git a/vnc.html b/vnc.html index 6d90e16d..e97a32ed 100644 --- a/vnc.html +++ b/vnc.html @@ -1,25 +1,26 @@ + VNC Client + VNC Window:
- Canvas not supported. -

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