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

c8460b03 · Joel Martin · f272267b · c8460b03 · c8460b03 · c8460b03
Commit c8460b03 authored Apr 04, 2010 by Joel Martin
Show whitespace changes
Inline Side-by-side

Showing with 56 additions and 55 deletions

canvas.html canvas.html +4 -0

canvas.js canvas.js +40 -39

vnc.html vnc.html +11 -7

vnc.js vnc.js +1 -9

No files found.
--- a/canvas.html
+++ b/canvas.html
@@ -14,4 +14,8 @@
    <script src="include/mootools.js"></script>
    <script src="include/mootools-more.js"></script>
    <script src="canvas.js"></script>
+
+    <script>
+        window.onload = function() { init_canvas('tutorial'); }
+    </script>
 </html>
--- a/canvas.js
+++ b/canvas.js
-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");
 }

+};
+
--- a/vnc.html
+++ b/vnc.html
 <html>

+    <head><title>VNC Client</title></head>
+
    <body onload="draw();">

        VNC Window:<br>
-
        <canvas id="vnc" width="800" height="600">
            Canvas not supported.
        </canvas>

-        <br><br>
-        Debug:
-        <div id="debug"></div>
-
+        <br>
+        Debug:<br>
+        <textarea id="debug" style="font-size: 9;" cols=80 rows=25></textarea>
    </body>

    <script src="include/mootools.js"></script>
    <script src="include/mootools-more.js"></script>
    <script src="include/base64a.js"></script>
+    <script src="canvas.js"></script>
    <script src="vnc.js"></script>

-    <script type="text/javascript">
+    <script>
        function connect() {
            debug(">> connect");
            var uri = new URI(window.location);
@@ -33,7 +34,10 @@
            debug("<< connect");
        }

-        window.onload = connect();
+        window.onload = function() {
+            Canvas.init('vnc');
+            connect();
+        }
    </script>

 </html>
--- a/vnc.js
+++ b/vnc.js
-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 + "<br/>";
-}
-
-
 /*
 * 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) {