* Use zoom if present to avoid layout problem with scale

* Create a init.js file that does initialization if wanted (with Cappuccino we do not want to)
* Update the demo files

include/canvas.js

@@ -10,19 +10,8 @@
 /*jslint white: false, bitwise: false */
 /*global window, $, Util */
 
-var Canvas, Canvas_native;
 
-(function () {
+Canvas_native = (typeof(Canvas_native) != "undefined") ? Canvas_native : true;
-    var pre, start = "<script src='", end = "'><\/script>";
-    if (document.createElement('canvas').getContext) {
-        Canvas_native = true;
-    } else {
-        pre = (typeof VNC_uri_prefix !== "undefined") ?
-                            VNC_uri_prefix : "include/";
-        //document.write(start + pre + "excanvas.js" + end);
-        Canvas_native = false;
-    }
-}());
 
 // Everything namespaced inside Canvas
 Canvas = {
@@ -33,6 +22,7 @@ force_canvas : false,
 true_color : false,
 colourMap  : [],
 
+scale: 1,
 c_wx : 0,
 c_wy : 0,
 ctx  : null,
@@ -47,7 +37,7 @@ mouseMove   : null,
 onMouseButton: function(e, down) {
     var evt, pos, bmask;
     evt = (e ? e : window.event);
-    pos = Util.getEventPosition(e, $(Canvas.id));
+    pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale);
     bmask = 1 << evt.button;
     //Util.Debug('mouse ' + pos.x + "," + pos.y + " down: " + down + " bmask: " + bmask);
     if (Canvas.mouseButton) {
@@ -68,7 +58,7 @@ onMouseUp: function (e) {
 onMouseWheel: function (e) {
     var evt, pos, bmask, wheelData;
     evt = (e ? e : window.event);
-    pos = Util.getEventPosition(e, $(Canvas.id));
+    pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale);
     wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
     if (wheelData > 0) {
         bmask = 1 << 3;
@@ -88,7 +78,7 @@ onMouseWheel: function (e) {
 onMouseMove: function (e) {
     var evt, pos;
     evt = (e ? e : window.event);
-    pos = Util.getEventPosition(e, $(Canvas.id));
+    pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale);
     //Util.Debug('mouse ' + evt.which + '/' + evt.button + ' up:' + pos.x + "," + pos.y);
     if (Canvas.mouseMove) {
         Canvas.mouseMove(pos.x, pos.y);
@@ -158,6 +148,8 @@ init: function (id) {
 
     Canvas.clear();
 
+    Canvas.rescale(0.5);
+
     /*
      * Determine browser Canvas feature support
      * and select fastest rendering methods
@@ -248,6 +240,49 @@ resize: function (width, height, true_color) {
 
     Canvas.c_wx = c.offsetWidth;
     Canvas.c_wy = c.offsetHeight;
+
+    Canvas.rescale(Canvas.scale);
+},
+
+rescale: function (factor) {
+    var c, tp, x, y,
+        properties = ['transform', 'WebkitTransform', 'MozTransform', 'oTransform', null];
+        origin = ['transformOrigin', 'WebkitTransformOrigin', 'MozTransformOrigin', 'oTransformOrigin', null];
+        
+    c = $(Canvas.id);
+    
+    x = c.width - c.width * factor;
+    y = c.height - c.height * factor;
+    Canvas.scale = factor;
+    
+    if (c.style.zoom) {
+        c.style.zoom = Canvas.scale;
+        return
+    }
+    
+    while (tp = properties.shift()) {
+        if (typeof c.style[tp] != 'undefined') {
+            break;
+        }
+    }
+    
+    while (tpo = origin.shift()) {
+        if (typeof c.style[tpo] != 'undefined') {
+            break;
+        }
+    }
+
+    if (tp === null) {
+        Util.Debug("No scaling support");
+        return;
+    }
+
+    if (Canvas.scale === factor) {
+        Util.Debug("Canvas already scaled to '" + factor + "'");
+    }
+    
+    c.style[tpo] = "top left";
+    c.style[tp] = "scale(" + Canvas.scale + ")";
 },
 
 stop: function () {

include/default_controls.js

@@ -60,6 +60,13 @@ load: function(target) {
     html += '    onfocus="DefaultControls.clipFocus();"';
     html += '    onblur="DefaultControls.clipBlur();"';
     html += '    onchange="DefaultControls.clipSend();"></textarea>';
+    html += '  <br>';
+    html += '   <input id="VNC_scale" type="text"';
+    html += '    onfocus="DefaultControls.clipFocus();"';
+    html += '    onblur="DefaultControls.clipBlur();"';
+    html += '        value="1">'
+    html += '   <input id="VNC_scale_button" type="button"';
+    html += '        value="Set scale">';
     html += '</div>';
     $(target).innerHTML = html;
 
@@ -93,10 +100,13 @@ sendCtrlAltDel: function() {
 },
 
 updateState: function(state, msg) {
-    var s, c, klass;
+    var s, c, z, klass;
     s = $('VNC_status');
     sb = $('VNC_status_bar');
     c = $('VNC_connect_button');
+    z = $('VNC_scale');
+    zb = $('VNC_scale_button');
+    
     cad = $('sendCtrlAltDelButton');
     switch (state) {
         case 'failed':
@@ -108,9 +118,12 @@ updateState: function(state, msg) {
         case 'normal':
             c.value = "Disconnect";
             c.onclick = DefaultControls.disconnect;
+            zb.onclick = DefaultControls.setScale;
             c.disabled = false;
             cad.disabled = false;
             klass = "VNC_status_normal";
+            alert($('VNC_canvas').width)
+            
             break;
         case 'disconnected':
         case 'loaded':
@@ -186,6 +199,12 @@ clipSend: function() {
     Util.Debug(">> DefaultControls.clipSend: " + text.substr(0,40) + "...");
     RFB.clipboardPasteFrom(text);
     Util.Debug("<< DefaultControls.clipSend");
+},
+
+
+setScale: function() {
+    var scaleFactor = parseFloat($('VNC_scale').value);
+    Canvas.rescale(scaleFactor);
 }
 
 };

include/util.js

@@ -11,7 +11,7 @@
 /*global window, document, navigator, ActiveXObject*/
 
 // Globals defined here
-var Util = {}, $;
+Util = {};
 
 
 // Logging/debug routines
@@ -160,7 +160,7 @@ Util.getPosition = function (obj) {
 };
 
 // Get mouse event position in DOM element
-Util.getEventPosition = function (e, obj) {
+Util.getEventPosition = function (e, obj, scale) {
     var evt, docX, docY, pos;
     //if (!e) evt = window.event;
     evt = (e ? e : window.event);
@@ -174,7 +174,10 @@ Util.getEventPosition = function (e, obj) {
             document.documentElement.scrollTop;
     }
     pos = Util.getPosition(obj);
-    return {'x': docX - pos.x, 'y': docY - pos.y};
+    if (typeof scale === "undefined") {
+        scale = 1;
+    }
+    return {'x': (docX - pos.x) / scale, 'y': (docY - pos.y) / scale};
 };
 
 

include/vnc.js

@@ -10,44 +10,7 @@
 /*jslint white: false, nomen: false, browser: true, bitwise: false */
 /*global window, WebSocket, Util, Canvas, VNC_uri_prefix, Base64, DES */
 
-// Globals defined here
+VNC_native_ws = (typeof(VNC_native_ws) != "undefined") ? VNC_native_ws : true;
-var VNC_native_ws, RFB;
-
-/*
- * Load supporting scripts
- */
-function get_VNC_uri_prefix() {
-    return (typeof VNC_uri_prefix !== "undefined") ? VNC_uri_prefix : "include/";
-}
-
-(function () {
-    var extra = "", start, end;
-
-    start = "<script src='" + get_VNC_uri_prefix();
-    end = "'><\/script>";
-
-    // Uncomment to activate firebug lite
-    //extra += "<script src='http://getfirebug.com/releases/lite/1.2/" + 
-    //         "firebug-lite-compressed.js'><\/script>";
-
-    extra += start + "util.js" + end;
-    extra += start + "base64.js" + end;
-    extra += start + "des.js" + end;
-    extra += start + "canvas.js" + end;
-
-    /* If no builtin websockets then load web_socket.js */
-    if (window.WebSocket) {
-        VNC_native_ws = true;
-    } else {
-        VNC_native_ws = false;
-        WebSocket__swfLocation = get_VNC_uri_prefix() +
-                    "web-socket-js/WebSocketMain.swf";
-        extra += start + "web-socket-js/swfobject.js" + end;
-        extra += start + "web-socket-js/FABridge.js" + end;
-        extra += start + "web-socket-js/web_socket.js" + end;
-    }
-    document.write(extra);
-}());
 
 /*
  * RFB namespace
@@ -120,7 +83,6 @@ sendCtrlAltDel: function() {
 load: function () {
     var i;
     //Util.Debug(">> load");
-
     /* Load web-socket-js if no builtin WebSocket support */
     if (VNC_native_ws) {
         Util.Info("Using native WebSockets");

vnc.html

@@ -10,6 +10,7 @@ noVNC example: simple example using default controls
         <script type='text/javascript' 
             src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
         -->
+        <script src="include/init.js"></script>
         <script src="include/vnc.js"></script>
         <script src="include/default_controls.js"></script>
     </head>

vnc_auto.html

@@ -13,6 +13,7 @@ Connect parameters are provided in query string:
         <script type='text/javascript' 
             src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
         -->
+        <script src="include/init.js"></script>
         <script src="include/vnc.js"></script>
     </head>