Viewport clip/drag for mobile/touchscreen devices.

API changes (forward compatible):

- Display: add 'viewport' conf option to turn on and off viewport
  mode.
- RFB: add 'viewportDrag' option to enable/disable viewport dragging
  mode.

Other:

- Add clip mode setting to default UI. For touch devices, clipping is
  forced on.
- Use CSS media queries to adjust visual elements based on screen
  size. Especially disconnected logo size/position and button text size.
- Catch page unload while connected and give a confirm dialog.
- Change mouse button selector to a single button that changes between
  ' ', 'L', 'M', 'R' when clicked (empty means mouse is just being
  moved and doesn't send clicks).
- include/ui.js:setViewClip() routine sets the clipping of the
  viewport to the current size of the viewport area (if clipping is
  enabled).
- include/ui.js:setViewDrag() toggles/enables/disables viewport
  dragging mode.
- Add several images for the UI and for Apple devices:
    - images/clipboard.png: clipboard menu icon
    - images/connect.png: connect menu icon
    - images/disconnect.png: disconnect button icon
    - images/keyboard.png: show keyboard button
    - images/move.png: viewport drag/move toggle button
    - images/settings.png: settings menu icon
    - images/screen_320x460.png: iOS app/desktop link start image
    - images/screen_57x57.png: iOS app icon
    - images/screen_700x700.png: full size noVNC image

include/base.css

@@ -65,21 +65,27 @@ html {
   z-index:200;
 } 
 
+#noVNC_view_drag_button {
+  display: none;
+}
+#sendCtrlAltDelButton {
+  display: none;
+}
 #noVNC_mobile_buttons {
   display: none;
 }
 
 .noVNC-buttons-left {
-  position:fixed;
+  float: left;
   padding-left:10px;
-  padding-top:9px;
+  padding-top:4px;
 }
 
 .noVNC-buttons-right {
   float:right;
   right: 0px;
   padding-right:10px;
-  padding-top:9px;
+  padding-top:4px;
 }
 
 #noVNC_status_bar {
@@ -93,10 +99,6 @@ html {
   width:100%;
 }
 
-.noVNC_status_button, #clipboardbutton, #connectbutton {
-  font-size: 14px;
-}
-
 #noVNC_status {
   height:20px;
   text-align: center;
@@ -141,8 +143,14 @@ html {
   border-bottom-right-radius: 800px 600px;
   /*border-top-left-radius: 800px 600px;*/
 }
-#VNC_canvas {
-  background: #eee;
+
+#noVNC_container, #noVNC_canvas {
+    margin: 0px;
+    padding: 0px;
+}
+
+#noVNC_canvas {
+  left: 0px;
 }
 
 #VNC_clipboard_clear_button {
@@ -152,10 +160,6 @@ html {
   font-size: 11px;
 }
 
-#noVNC_Settings {
-  width:200px;
-}
-
 #noVNC_clipboard_clear_button {
   float:right;
 }
@@ -211,32 +215,36 @@ html {
 }
 
 /*Bubble contents divs*/
-#noVNC_Settings {
+#noVNC_settings {
+  display:none; 
   margin-top:72px;
+  right:10px;
   position:fixed;
-  right:100px;
-  display:none; 
 }
 
 #noVNC_controls {
   margin-top:72px;
-  position:fixed;
   right:10px;
+  position:fixed;
+}
+#noVNC_controls.top:after  {
+  right:15px;
 }
 
 #noVNC_clipboard {
   display:none; 
   margin-top:72px;
+  right:20px;
   position:fixed;
-  right:180px;
+}
+#noVNC_clipboard.top:after {
+  right:85px;
 }
 
 /*Default noVNC logo.*/
 #noVNC_logo {
-  width:400px;
-  margin-left:auto;
-  margin-right:auto;
-  font-size:160px;
+  margin-top: 170px;
+  margin-left: 10px;
   color:yellow;
   text-align:left;
   font-family: 'Orbitron', sans-serif;
@@ -249,17 +257,80 @@ html {
        1px 1px 0 #000;
 }
 
+
 #noVNC_logo span{
   color:green;
 }
 
 #keyboardinput {
-  width:0px;
-  height:0px;
-  background-color:#313131;
+  width:1px;
+  height:1px;
+  background-color:#6d84a2;
   border:0;
 }
 
 .noVNC_status_warn {
   background-color:yellow;
 }
+
+/* ----------------------------------------
+ * Media sizing
+ * ----------------------------------------
+ */
+
+
+.noVNC_status_button {
+  font-size: 12px;
+  padding: 2px;
+  vertical-align: middle;
+}
+#noVNC_clipboard_text {
+  width: 500px;
+  border-color: red;
+}
+
+#noVNC_logo {
+  font-size: 180px;
+}
+
+@media screen and (min-width: 481px) and (max-width: 640px) {
+  .noVNC_status_button {
+    font-size: 10px;
+    padding: 1px;
+  }
+  #noVNC_clipboard_text {
+    width: 410px;
+    border-color: yellow;
+  }
+  #noVNC_logo {
+    font-size: 150px;
+  }
+}
+
+@media screen and (min-width: 321px) and (max-width: 480px) {
+  .noVNC_status_button {
+    font-size: 10px;
+    padding: 0px;
+  }
+  #noVNC_clipboard_text {
+    width: 250px;
+    border-color: green;
+  }
+  #noVNC_logo {
+    font-size: 110px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .noVNC_status_button {
+    font-size: 9px;
+    padding: 0px;
+  }
+  #noVNC_clipboard_text {
+    width: 220px;
+    border-color: blue;
+  }
+  #noVNC_logo {
+    font-size: 90px;
+  }
+}

include/black.css

@@ -19,3 +19,8 @@
   background:#000;
   color:#fff;
 }
+
+#keyboardinput {
+  background-color:#000;
+}
+

include/blue.css

@@ -20,3 +20,8 @@
   background:#04073d;
   color:#fff;
 }
+
+#keyboardinput {
+  background-color:#04073d;
+}
+

include/display.js

@@ -45,6 +45,7 @@ Util.conf_defaults(conf, that, defaults, [
     ['true_color',  'rw', 'bool', true, 'Use true-color pixel data'],
     ['colourMap',   'rw', 'arr',  [], 'Colour map array (when not true-color)'],
     ['scale',       'rw', 'float', 1.0, 'Display area scale factor 0.0 - 1.0'],
+    ['viewport',    'rw', 'bool', false, 'Use a viewport set with viewportChange()'],
     ['width',       'rw', 'int', null, 'Display area width'],
     ['height',      'rw', 'int', null, 'Display area height'],
 
@@ -245,6 +246,14 @@ that.viewportChange = function(deltaX, deltaY, width, height) {
     var c = conf.target, v = viewport, cr = cleanRect,
         saveImg = null, saveStyle, x1, y1, vx2, vy2, w, h;
 
+    if (!conf.viewport) {
+        Util.Debug("Setting viewport to full display region");
+        deltaX = -v.w; // Clamped later if out of bounds
+        deltaY = -v.h; // Clamped later if out of bounds
+        width = fb_width;
+        height = fb_height;
+    }
+
     if (typeof(deltaX) === "undefined") { deltaX = 0; }
     if (typeof(deltaY) === "undefined") { deltaY = 0; }
     if (typeof(width) === "undefined") { width = v.w; }
@@ -269,7 +278,10 @@ that.viewportChange = function(deltaX, deltaY, width, height) {
         v.h = height;
 
 
-        if (v.w > 0 && v.h > 0) {
+        if (v.w > 0 && v.h > 0 && c.width > 0 && c.height > 0) {
+            console.log("here1:",
+                    ((c.width < v.w) ? c.width : v.w),
+                    ((c.height < v.h) ? c.height : v.h));
             saveImg = c_ctx.getImageData(0, 0,
                     (c.width < v.w) ? c.width : v.w,
                     (c.height < v.h) ? c.height : v.h);
@@ -406,6 +418,13 @@ that.getCleanDirtyReset = function() {
                  'x2': v.x + v.w - 1, 'y2': v.y + v.h - 1};
 
     return {'cleanBox': cleanBox, 'dirtyBoxes': dirtyBoxes};
+};
+
+that.absX = function(x) {
+    return x + viewport.x;
+}
+that.absY = function(y) {
+    return y + viewport.y;
 }
 
 
@@ -454,11 +473,9 @@ that.clear = function() {
 
     if (conf.logo) {
         that.resize(conf.logo.width, conf.logo.height);
-        that.viewportChange(0, 0, conf.logo.width, conf.logo.height);
         that.blitStringImage(conf.logo.data, 0, 0);
     } else {
         that.resize(640, 20);
-        that.viewportChange(0, 0, 640, 20);
         c_ctx.clearRect(0, 0, viewport.w, viewport.h);
     }
 
@@ -551,7 +568,15 @@ imageDataCreate = function(width, height) {
 };
 
 rgbxImageData = function(x, y, width, height, arr, offset) {
-    var img, i, j, data;
+    var img, i, j, data, v = viewport;
+    /*
+    if ((x - v.x >= v.w) || (y - v.y >= v.h) ||
+        (x - v.x + width < 0) || (y - v.y + height < 0)) {
+        //console.log("skipping, out of bounds: ", x, y);
+        // Skipping because outside of viewport
+        return;
+    }
+    */
     img = c_imageData(width, height);
     data = img.data;
     for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) {
@@ -560,7 +585,7 @@ rgbxImageData = function(x, y, width, height, arr, offset) {
         data[i + 2] = arr[j + 2];
         data[i + 3] = 255; // Set Alpha
     }
-    c_ctx.putImageData(img, x - viewport.x, y - viewport.y);
+    c_ctx.putImageData(img, x - v.x, y - v.y);
 };
 
 // really slow fallback if we don't have imageData

include/rfb.js

@@ -118,7 +118,9 @@ var that           = {},  // Public API methods
 
     /* Mouse state */
     mouse_buttonMask = 0,
-    mouse_arr        = [];
+    mouse_arr        = [],
+    viewportDragging = false,
+    viewportDragPos  = {};
 
 // Configuration attributes
 Util.conf_defaults(conf, that, defaults, [
@@ -133,6 +135,8 @@ Util.conf_defaults(conf, that, defaults, [
     ['connectTimeout',     'rw', 'int', def_con_timeout, 'Time (s) to wait for connection'],
     ['disconnectTimeout',  'rw', 'int', 3,    'Time (s) to wait for disconnection'],
 
+    ['viewportDrag',       'rw', 'bool', false, 'Move the viewport on mouse drags'],
+
     ['check_rate',         'rw', 'int', 217,  'Timing (ms) of send/receive check'],
     ['fbu_req_rate',       'rw', 'int', 1413, 'Timing (ms) of frameBufferUpdate requests'],
 
@@ -547,7 +551,7 @@ function flushClient() {
 // overridable for testing
 checkEvents = function() {
     var now;
-    if (rfb_state === 'normal') {
+    if (rfb_state === 'normal' && !viewportDragging) {
         if (! flushClient()) {
             now = new Date().getTime();
             if (now > last_req_time + conf.fbu_req_rate) {
@@ -572,13 +576,43 @@ mouseButton = function(x, y, down, bmask) {
     } else {
         mouse_buttonMask ^= bmask;
     }
-    mouse_arr = mouse_arr.concat( pointerEvent(x, y) );
+
+    if (conf.viewportDrag) {
+        if (down && !viewportDragging) {
+            viewportDragging = true;
+            viewportDragPos = {'x': x, 'y': y};
+
+            // Skip sending mouse events
+            return;
+        } else {
+            viewportDragging = false;
+        }
+    }
+
+    mouse_arr = mouse_arr.concat(
+            pointerEvent(display.absX(x), display.absY(y)) );
     flushClient();
 };
 
 mouseMove = function(x, y) {
     //Util.Debug('>> mouseMove ' + x + "," + y);
-    mouse_arr = mouse_arr.concat( pointerEvent(x, y) );
+    var deltaX, deltaY;
+
+    if (viewportDragging) {
+        //deltaX = x - viewportDragPos.x; // drag viewport
+        deltaX = viewportDragPos.x - x; // drag frame buffer
+        //deltaY = y - viewportDragPos.y; // drag viewport
+        deltaY = viewportDragPos.y - y; // drag frame buffer
+        viewportDragPos = {'x': x, 'y': y};
+
+        display.viewportChange(deltaX, deltaY);
+
+        // Skip sending mouse events
+        return;
+    }
+
+    mouse_arr = mouse_arr.concat(
+            pointerEvent(display.absX(x), display.absY(y)) );
 };
 
 
@@ -778,7 +812,6 @@ init_msg = function() {
 
         display.set_true_color(conf.true_color);
         display.resize(fb_width, fb_height);
-        display.viewportChange(0, 0, fb_width, fb_height);
         keyboard.grab();
         mouse.grab();
 
@@ -1309,7 +1342,6 @@ encHandlers.DesktopSize = function set_desktopsize() {
     fb_width = FBU.width;
     fb_height = FBU.height;
     display.resize(fb_width, fb_height);
-    display.viewportChange(0, 0, fb_width, fb_height);
     timing.fbu_rt_start = (new Date()).getTime();
     // Send a new non-incremental request
     ws.send(fbUpdateRequests());

tests/viewport.html

 <!DOCTYPE html>
 <html>
     <head><title>Viewport Test</title>
-        <link rel="stylesheet" href="../include/mobile.css">
+        <link rel="stylesheet" href="viewport.css">
         <!--
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -166,23 +166,35 @@
                     "," + (p.offsetHeight - padH) + "]");
             display.viewportChange(0, 0,
                 p.offsetWidth - padW, p.offsetHeight - padH);
+            /*
+            var pos, new_w, new_h;pos
+            pos = Util.getPosition($D('canvas').parentNode);
+            new_w = window.innerWidth - pos.x;
+            new_h = window.innerHeight - pos.y;
+            display.viewportChange(0, 0, new_w, new_h);
+            */
         }
 
         window.onload = function() {
             detectPad();
+
             display = new Display({'target': $D('canvas')});
             display.resize(1600, 1024);
-            //display.resize(800, 600);
+            display.set_viewport(true);
             ctx = display.get_context();
+
             mouse    = new Mouse({'target': $D('canvas'),
                                 'onMouseButton': mouseButton,
                                 'onMouseMove': mouseMove});
+            mouse.grab();
+
 
             Util.addEvent(window, 'resize', doResize);
-            //doResize();
+            // Shrink viewport for first resize call so that the
+            // scrollbars are disabled
+            display.viewportChange(0, 0, 10, 10);
             setTimeout(doResize, 1);
             setInterval(dirtyRedraw, 50);
-            mouse.grab();
 
             message("Display initialized");
         };

vnc.html

@@ -15,12 +15,19 @@
                 Remove this if you use the .htaccess -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <meta name="viewport" content="user-scalable=1" />
+    <!-- Apple iOS Safari settings -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <!-- App Start Icon  -->
+    <link rel="apple-touch-startup-image" href="images/screen_320x460.png" /> 
+    <!-- For iOS devices set the icon to use if user bookmarks app on their homescreen -->
+    <link rel="apple-touch-icon" href="images/screen_57x57.png">
     <!--
-    <meta name="viewport" content="width=device-width,height=device-height" />
+    <link rel="apple-touch-icon-precomposed" href="images/screen_57x57.png" /> 
     -->
 
+    
     <!-- Stylesheets -->
     <link rel="stylesheet" href="include/base.css" />
     <link rel="alternate stylesheet" href="include/black.css" TITLE="Black" />
@@ -28,13 +35,6 @@
 
     <!-- Google web fonts -->
     <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Nova+Square|Orbitron:400,500,700,900|Nova+Round|Nova+Mono|Nova+Slim|Nova+Oval|Nova+Flat|Nova+Cut' rel='stylesheet' type='text/css'>       
-    <!-- App Start Icon  -->
-    <link rel="apple-touch-startup-image" href="images/screen_640x435.png" /> 
-
-    <!-- For iOS devices set the icon to use if user bookmarks app on their homescreen -->
-    <link rel="apple-touch-icon" href="images/mobileicon.png">
-    <link rel="apple-touch-icon-precomposed" href="images/mobileicon.png" /> 
-
     <!--
     <script type='text/javascript'  
         src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
@@ -48,43 +48,60 @@
 <body>
     <div id="noVNC-control-bar">
         <!--noVNC Mobile Device only Buttons-->
-        <div id="noVNC_mobile_buttons" class="noVNC-buttons-left">
-            <nobr>
-                <span class="noVNC_mouse_buttons">
+        <div class="noVNC-buttons-left">
+            <input type="image" src="images/move.png"
+                id="noVNC_view_drag_button" class="noVNC_status_button"
+                value="Move" title="Move/Drag Viewport"
+                onclick="UI.setViewDrag();">
+            <div id="noVNC_mobile_buttons">
                 <input type="button" class="noVNC_status_button"
-                        id="noVNC_mouse_button1" value="L"
+                    id="noVNC_mouse_button0" value=" "
                     onclick="UI.setMouseButton(1);">
                 <input type="button" class="noVNC_status_button"
-                        id="noVNC_mouse_button2" value="M"
+                    id="noVNC_mouse_button1" value="L"
                     onclick="UI.setMouseButton(2);">
                 <input type="button" class="noVNC_status_button"
-                        id="noVNC_mouse_button4" value="R"
+                    id="noVNC_mouse_button2" value="M"
                     onclick="UI.setMouseButton(4);">
-                    <input type="button" id="showKeyboard"
-                        value="Keyboard" class="noVNC_status_button"
+                <input type="button" class="noVNC_status_button"
+                    id="noVNC_mouse_button4" value="R"
+                    onclick="UI.setMouseButton(0);">
+                <input type="image" src="images/keyboard.png"
+                    id="showKeyboard" class="noVNC_status_button" 
+                    value="Keyboard" title="Show Keyboard"
                     onclick="UI.showKeyboard()"/>
-                </span>
-            </nobr>
+                <input type="text"
+                    id="keyboardinput" class="noVNC_status_button"
+                    onKeyDown="onKeyDown(event);"/>
+            </div>
         </div>
 
         <!--noVNC Buttons-->
         <div class="noVNC-buttons-right">
             <input type="button" class="noVNC_status_button"
                 value="CtrlAltDel" id="sendCtrlAltDelButton"
-                onclick="UI.sendCtrlAltDel();">
-            <input type="button" id="clipboardbutton" value="Clipboard"
-                onclick="UI.showClipboard();"/>
-            <input type="button" class="noVNC_status_button"
-                value="Settings" id="menuButton"
-                onclick="UI.clickSettingsMenu();">
-            <input type="button" id="connectPanelbutton"
-                value="Connection" class="noVNC_status_button"
+                onclick="UI.sendCtrlAltDel();" />
+            <input type="image" src="images/clipboard.png"
+                id="clipboardButton" class="noVNC_status_button"
+                value="Clipboard" title="Clipboard"
+                onclick="UI.showClipboard();" />
+            <input type="image" src="images/settings.png"
+                id="menuButton" class="noVNC_status_button"
+                value="Settings" title="Settings"
+                onclick="UI.clickSettingsMenu();" />
+            <input type="image" src="images/connect.png"
+                id="connectPanelbutton" class="noVNC_status_button"
+                value="Connect" title="Connect"
                 onclick="UI.connectPanelbutton()" />
+            <input type="image" src="images/disconnect.png"
+                id="disconnectButton" class="noVNC_status_button"
+                value="Disconnect" title="Disconnect"
+                onclick="UI.disconnect()" />
         </div>
 
         <!-- Clipboard Panel -->
         <div id="noVNC_clipboard" class="triangle-right top">
-            <textarea id="noVNC_clipboard_text" cols=88 rows=5
+            <textarea id="noVNC_clipboard_text" rows=5
                 onfocus="UI.displayBlur();" onblur="UI.displayFocus();"
                 onchange="UI.clipSend();">
             </textarea>
@@ -94,13 +111,14 @@
         </div>
 
         <!-- Settings Panel -->
-        <div id="noVNC_Settings" class="triangle-right top">
+        <div id="noVNC_settings" class="triangle-right top">
             <span id="noVNC_settings_menu" onmouseover="UI.displayBlur();"
                                            onmouseout="UI.displayFocus();">
                 <ul>
                     <li><input id="noVNC_encrypt" type="checkbox"> Encrypt</li>
                     <li><input id="noVNC_true_color" type="checkbox" checked> True Color</li>
                     <li><input id="noVNC_cursor" type="checkbox"> Local Cursor</li>
+                    <li><input id="noVNC_clip" type="checkbox"> Clip to window</li>
                     <li><input id="noVNC_shared" type="checkbox"> Shared Mode</li>
                     <li><input id="noVNC_connectTimeout" type="input"> Connect Timeout (s)</li>
                     <hr>
@@ -143,13 +161,15 @@
                 <div id="noVNC_status">Loading</div>
         </div>
         
-        <!-- HTML5 Canvas -->
         <h1 id="noVNC_logo"><span>no</span><br />VNC</h1>
+
+        <!-- HTML5 Canvas -->
+        <div id="noVNC_container">
             <canvas id="noVNC_canvas" width="640px" height="20px">
                         Canvas not supported.
             </canvas>
+        </div>
 
-        <input id="keyboardinput" type="text" onKeyDown="onKeyDown(event);"/>
     </div>
   
     <script>