Merge pull request #22 from mangoliou/scale-and-quality

Toolbar with scale and quality.

noVNC/custom.css

@@ -0,0 +1,116 @@
+.custom_toolbar {
+    position: absolute;
+    width: 52px;
+    height: 99.5%;
+    top: 0px;
+    left: -65px;
+    z-index: 100;
+    padding: 2px;
+    background-color: #EEEEEE;
+    box-shadow: 1px 0 5px #000000;
+}
+
+.custom_toolbar_divider1 {
+    width: 40px;
+    height: 1px;
+    margin: 5px;
+    background-color: #000;
+    opacity: 0.1;
+}
+
+.custom_toolbar_divider2 {
+    width: 40px;
+    height: 1px;
+    margin: 5px;
+    background-color: #000;
+    opacity: 0.0;
+}
+
+.custom_toolbar_clicker {
+    position: absolute;
+    width: 43px;
+    height: 36px;
+    margin-top: -2px;
+    margin-left: 54px;
+    line-height: 60px;
+    text-align: center;
+    opacity: 1.0;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(images/pop_more.png);
+}
+
+.custom_toolbar_btn {
+    width: 40px;
+    height: 20px;
+
+    font-family: "Anonymous Pro", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+    margin: 15px 5px 15px 5px;
+
+    border: 1px solid #bbbbbb;
+    border-radius: 4px;
+    color: #33444E;
+    background-color: #EEEEEE;
+    box-shadow: 0px 0px 3px #bbbbbb;
+    cursor: pointer;
+}
+
+.custom_toolbar_btn_hover {
+    -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.3);
+    box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.3);
+}
+
+.custom_toolbar_btn_selected {
+    background-color: #bfbfbf;
+}
+
+.custom_mask {
+    top: 0px;
+    left: 0px;
+    display: none;;
+    position: absolute;
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 200;
+}
+
+.custom_pause_icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("images/pause.png");
+}
+
+.custom_resume_icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("images/resume.png");
+}
+
+.custom_scale_icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("images/scale.png");
+}
+
+.custom_not_scale_icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("images/not_scale.png");
+}
+
+.custom_quality_icon {
+    margin: 3px 0px 0px 8px;
+    width: 24px;
+    height: 14px;
+    border-radius: 12px;
+    color: #fff;
+    background-color: #4d4d4d;
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: bolder;
+}

noVNC/include/rfb.js

@@ -35,28 +35,6 @@ var RFB;
         this._rfb_tightvnc = false;
         this._rfb_xvp_ver = 0;
 
-        // In preference order
-        this._encodings = [
-            ['COPYRECT',            0x01 ],
-            ['TIGHT',               0x07 ],
-            ['TIGHT_PNG',           -260 ],
-            ['HEXTILE',             0x05 ],
-            ['RRE',                 0x02 ],
-            ['RAW',                 0x00 ],
-            ['DesktopSize',         -223 ],
-            ['Cursor',              -239 ],
-
-            // Psuedo-encoding settings
-            //['JPEG_quality_lo',    -32 ],
-            ['JPEG_quality_med',     -26 ],
-            //['JPEG_quality_hi',    -23 ],
-            //['compress_lo',       -255 ],
-            ['compress_hi',         -247 ],
-            ['last_rect',           -224 ],
-            ['xvp',                 -309 ],
-            ['ExtendedDesktopSize', -308 ]
-        ];
-
         this._encHandlers = {};
         this._encNames = {};
         this._encStats = {};
@@ -131,7 +109,6 @@ var RFB;
             'wsProtocols': ['binary', 'base64'],    // Protocols to use in the WebSocket connection
             'repeaterID': '',                       // [UltraVNC] RepeaterID to connect to
             'viewportDrag': false,                  // Move the viewport on mouse drags
-
             // Callback functions
             'onUpdateState': function () { },       // onUpdateState(rfb, state, oldstate, statusMsg): state update/change
             'onPasswordRequired': function () { },  // onPasswordRequired(rfb): VNC password is required
@@ -144,6 +121,53 @@ var RFB;
             'onXvpInit': function () { },           // onXvpInit(version): XVP extensions active for this connection
         });
 
+        try{
+            // Use my custom 'jpeg_quality'.
+            this._encodings = [
+                // ['COPYRECT',            0x01 ],
+                ['TIGHT',               0x07 ],
+                ['TIGHT_PNG',           -260 ],
+                ['HEXTILE',             0x05 ],
+                ['RRE',                 0x02 ],
+                ['RAW',                 0x00 ],
+                ['DesktopSize',         -223 ],
+                ['Cursor',              -239 ],
+
+                // Psuedo-encoding settings
+                ['JPEG_quality_lo',    -32 + jpeg_quality ],
+                // ['JPEG_quality_med',     -28 ],
+                // ['JPEG_quality_hi',    -23 ],
+                // ['compress_lo',       -255 ],
+                ['compress_hi',         -247 ],
+                ['last_rect',           -224 ],
+                ['xvp',                 -309 ],
+                ['ExtendedDesktopSize', -308 ]
+            ];
+        }
+        catch(e){
+            // If my custom 'jpeg_quality' is not defined, just use default setting.
+            this._encodings = [
+                ['COPYRECT',            0x01 ],
+                ['TIGHT',               0x07 ],
+                ['TIGHT_PNG',           -260 ],
+                ['HEXTILE',             0x05 ],
+                ['RRE',                 0x02 ],
+                ['RAW',                 0x00 ],
+                ['DesktopSize',         -223 ],
+                ['Cursor',              -239 ],
+
+                // Psuedo-encoding settings
+                //['JPEG_quality_lo',    -32 ],
+                ['JPEG_quality_med',     -26 ],
+                //['JPEG_quality_hi',    -23 ],
+                //['compress_lo',       -255 ],
+                ['compress_hi',         -247 ],
+                ['last_rect',           -224 ],
+                ['xvp',                 -309 ],
+                ['ExtendedDesktopSize', -308 ]
+            ];
+        }
+
         // main setup
         Util.Debug(">> RFB.constructor");
 

noVNC/include/util.js

@@ -468,7 +468,16 @@ Util.getEventPosition = function (e, obj, scale) {
     var realy = docY - pos.y;
     var x = Math.max(Math.min(realx, pos.width - 1), 0);
     var y = Math.max(Math.min(realy, pos.height - 1), 0);
+
+    try{
+        // Use my custom 'Scale' rate.
+        return {'x': x / Scale.x, 'y': y / Scale.y, 'realx': realx / Scale.x, 'realy': realy / Scale.y};
+    }
+    catch(e){
+        // If my custom 'Scale' is not defined, just use default 'scale'.
         return {'x': x / scale, 'y': y / scale, 'realx': realx / scale, 'realy': realy / scale};
+    }
+
 };
 
 

noVNC/vnc_auto.html

@@ -35,6 +35,7 @@
 
     <!-- Stylesheets -->
     <link rel="stylesheet" href="include/base.css" title="plain">
+    <link rel="stylesheet" href="custom.css" title="plain">
 
      <!--
     <script type='text/javascript'
@@ -45,7 +46,7 @@
 
 <body style="margin: 0px;">
     <div id="noVNC_screen">
-            <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px; height: 0px;">
+            <div id="noVNC_status_bar" class="noVNC_status_bar" style="display: none;margin-top: 0px; height: 0px;">
                 <table border=0 width="100%"><tr>
                     <td><div id="noVNC_status" style="position: relative; height: auto;">
                         Loading
@@ -67,8 +68,25 @@
             <canvas id="noVNC_canvas" width="640px" height="20px">
                 Canvas not supported.
             </canvas>
+            <div id="custom_toolbar" class="custom_toolbar">
+                <div id="custom_toolbar_clicker" class="custom_toolbar_clicker"></div>
+                <div class="custom_toolbar_divider1"></div>
+                <div id="custom_toolbar_autoconnect_btn" class="custom_toolbar_btn"></div>
+                <div class="custom_toolbar_divider1"></div>
+                <div id="custom_toolbar_autoscale_btn" class="custom_toolbar_btn"></div>
+                <div class="custom_toolbar_divider1"></div>
+                <div id="custom_toolbar_quality_1_btn" class="custom_toolbar_btn"><div class="custom_quality_icon">L</div></div>
+                <div class="custom_toolbar_divider2"></div>
+                <div id="custom_toolbar_quality_2_btn" class="custom_toolbar_btn"><div class="custom_quality_icon">M</div></div>
+                <div class="custom_toolbar_divider2"></div>
+                <div id="custom_toolbar_quality_3_btn" class="custom_toolbar_btn"><div class="custom_quality_icon">H</div></div>
+                <div class="custom_toolbar_divider1"></div>
+            </div>
+            <div id="custom_mask" class="custom_mask"></div>
         </div>
 
+    </body>
+    <script src="media/js/jquery.js"></script>
     <script>
         /*jslint white: false */
         /*global window, $, Util, RFB, */
@@ -82,8 +100,212 @@
         var rfb;
         var resizeTimeout;
 
+        // Custom noVNC share varaibles.
+
+        var Scale = {x: 1.0, y: 1.0};       // share with "./include/util.js".
+
+        var jpeg_quality = 4;               // Share with "./include.rfb.js".
+
+        // Custom noVNC query parameters.
+
+        var autoconnect = 0;
+        var autoscale = 0;
+        var quality = 2;
+        var enablelog = 0;
+
+        // Custom toolbar click events.
+
+        $("#custom_toolbar_clicker").click(function(){
+            if (!$("#custom_toolbar").is(':animated')) {
+                if ($("#custom_toolbar" ).position().left < -10) {
+                    $("#custom_toolbar" ).animate({ left: "+=65", }, 500, function() {
+                        $("#custom_toolbar_clicker").css({"background-image": "url(images/pop_less.png)"});
+                    });
+                }
+                else {
+                    $("#custom_toolbar" ).animate({ left: "-=65", }, 500, function () {
+                        $("#custom_toolbar_clicker").css({"background-image": "url(images/pop_more.png)"});
+                    });
+                }
+            }
+        });
+
+        $("#custom_toolbar_autoconnect_btn").click(function(){
+            autoconnect = (autoconnect == 1) ? 0 : 1;
+            window.location = render_redirect_url();
+        });
+
+        $("#custom_toolbar_autoscale_btn").click(function(){
+            autoscale = (autoscale == 1) ? 0 : 1;
+            window.location = render_redirect_url();
+        });
+
+        $("#custom_toolbar_quality_1_btn").click(function(){
+            // low jpeg
+            quality = 1;
+            window.location = render_redirect_url();
+        });
+
+        $("#custom_toolbar_quality_2_btn").click(function(){
+            // mid jpeg
+            quality = 2;
+            window.location = render_redirect_url();
+        });
+
+        $("#custom_toolbar_quality_3_btn").click(function(){
+            // high jpeg
+            quality = 3;
+            window.location = render_redirect_url();
+        });
+
+        $(".custom_toolbar_btn").hover(
+            function() {
+                if (!$(this).hasClass("custom_toolbar_btn_hover_selected"))
+                    $(this).addClass("custom_toolbar_btn_hover");
+            }, function() {
+                $(this).removeClass("custom_toolbar_btn_hover");
+            }
+        );
+
+        // Custom functions
+
+        function mask_fadein () {
+            var width = window.innerWidth;
+            var height = window.innerHeight;
+            $("#custom_mask").css({"width": width.toString() + "px", "height": height.toString() + "px"});
+            $("#custom_mask").fadeIn();
+        }
+
+        function mask_fadeout () {
+            $("#custom_mask").fadeOut();
+        }
+
+        function render_redirect_url() {
+            var new_url = (window.location.href).toString().split("?")[0] + "?";
+
+            // noVNC orign query parameter
+
+            if (WebUtil.getQueryVar('resize', false)) {
+                new_url += "resize=" + WebUtil.getQueryVar('resize', "") + "&";
+            }
+            if (WebUtil.getQueryVar('logging', false)) {
+                new_url += "logging=" + WebUtil.getQueryVar('logging', "") + "&";
+            }
+            if (WebUtil.getQueryVar('title', false)) {
+                new_url += "title=" + WebUtil.getQueryVar('title', "") + "&";
+            }
+            if (WebUtil.getQueryVar('host', false)) {
+                new_url += "host=" + WebUtil.getQueryVar('host', "") + "&";
+            }
+            if (WebUtil.getQueryVar('port', false)) {
+                new_url += "port=" + WebUtil.getQueryVar('port', "") + "&";
+            }
+            if (WebUtil.getQueryVar('token', false)) {
+                new_url += "token=" + WebUtil.getQueryVar('token', "") + "&";
+            }
+            if (WebUtil.getQueryVar('password', false)) {
+                new_url += "password=" + WebUtil.getQueryVar('password', "") + "&";
+            }
+            if (WebUtil.getQueryVar('path', false)) {
+                new_url += "path=" + WebUtil.getQueryVar('path', "") + "&";
+            }
+            if (WebUtil.getQueryVar('encrypt', false)) {
+                new_url += "encrypt=" + WebUtil.getQueryVar('encrypt', "") + "&";
+            }
+            if (WebUtil.getQueryVar('repeaterID', false)) {
+                new_url += "repeaterID=" + WebUtil.getQueryVar('repeaterID', "") + "&";
+            }
+            if (WebUtil.getQueryVar('true_color', false)) {
+                new_url += "true_color=" + WebUtil.getQueryVar('true_color', "") + "&";
+            }
+            if (WebUtil.getQueryVar('cursor', false)) {
+                new_url += "cursor=" + WebUtil.getQueryVar('cursor', "") + "&";
+            }
+            if (WebUtil.getQueryVar('shared', false)) {
+                new_url += "shared=" + WebUtil.getQueryVar('shared', "") + "&";
+            }
+            if (WebUtil.getQueryVar('view_only', false)) {
+                new_url += "view_only=" + WebUtil.getQueryVar('view_only', "") + "&";
+            }
+
+            // custom query parameter
+
+            new_url += "autoconnect=" + autoconnect + "&";
+            new_url += "autoscale=" + autoscale + "&";
+            new_url += "quality=" + quality + "&";
+            if (WebUtil.getQueryVar('enablelog', false)) {
+                new_url += "enablelog=" + WebUtil.getQueryVar('enablelog', "") + "&";
+            }
+
+            return new_url;
+        }
+
+        function render_custom_toolbar() {
+
+            $("#custom_toolbar_autoconnect_btn").removeClass("custom_pause_icon");
+            $("#custom_toolbar_autoconnect_btn").removeClass("custom_resume_icon");
+            if (autoconnect == 1){
+                $("#custom_toolbar_autoconnect_btn").addClass("custom_pause_icon");
+            }
+            else {
+                $("#custom_toolbar_autoconnect_btn").addClass("custom_resume_icon");
+            }
+
+            $("#custom_toolbar_autoscale_btn").removeClass("custom_scale_icon");
+            $("#custom_toolbar_autoscale_btn").removeClass("custom_not_scale_icon");
+            if (autoscale == 1)
+                $("#custom_toolbar_autoscale_btn").addClass("custom_not_scale_icon");
+            else
+                $("#custom_toolbar_autoscale_btn").addClass("custom_scale_icon");
+
+            $("#custom_toolbar_quality_1_btn").removeClass("custom_toolbar_btn_selected");
+            $("#custom_toolbar_quality_2_btn").removeClass("custom_toolbar_btn_selected");
+            $("#custom_toolbar_quality_3_btn").removeClass("custom_toolbar_btn_selected");
+            if (quality == 1)
+                $("#custom_toolbar_quality_1_btn").addClass("custom_toolbar_btn_selected");
+            if (quality == 2)
+                $("#custom_toolbar_quality_2_btn").addClass("custom_toolbar_btn_selected");
+            if (quality == 3)
+                $("#custom_toolbar_quality_3_btn").addClass("custom_toolbar_btn_selected");
+
+            if (enablelog == 1) {
+                console.log("------------- Custom Toolbar Settings -------------");
+                console.log("autoconnect: " + autoconnect);
+                console.log("autoscale: " + autoscale);
+                console.log("quality: " + quality);
+                console.log("enablelog: " + enablelog);
+            }
+        }
+
+        function noVNC_autoscale() {
+            var scaleWidth = window.innerWidth;
+            var scaleHeight = window.innerHeight;
+
+            var originWidth = $("#noVNC_canvas").attr("width");
+            var originHeight = $("#noVNC_canvas").attr("height");
+
+            $("#noVNC_canvas").css({"width": scaleWidth.toString() + "px", "height": scaleHeight.toString() + "px"})
+
+            Scale.x = scaleWidth / originWidth;
+            Scale.y = scaleHeight / originHeight;
+
+            if (enablelog == 1) {
+                console.info("-------------- Resize Canvas --------------");
+                console.log("Origin Width: " + originWidth);
+                console.log("Origin Height: " + originHeight);
+                console.log("Scale Width: " + scaleWidth);
+                console.log("Scale Height: " + scaleHeight);
+                console.log("Scale.x: " + Scale.x);
+                console.log("Scale.y: " + Scale.y);
+            }
+        }
 
         function UIresize() {
+            // Enable autoscale if set 1.
+            if (autoscale == 1) {
+               noVNC_autoscale();
+            }
+
             if (WebUtil.getQueryVar('resize', false)) {
                 var innerW = window.innerWidth;
                 var innerH = window.innerHeight;
@@ -154,15 +376,6 @@
             }
         }
 
-        window.onresize = function () {
-            // When the window has been resized, wait until the size remains
-            // the same for 0.5 seconds before sending the request for changing
-            // the resolution of the session
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(function(){
-                UIresize();
-            }, 500);
-        };
 
         function xvpInit(ver) {
             var xvpbuttons;
@@ -173,8 +386,8 @@
                 xvpbuttons.style.display = 'none';
             }
         }
+        function connect_vnc() {
 
-        window.onscriptsload = function () {
             var host, port, password, path, token;
 
             $D('sendCtrlAltDelButton').style.display = "inline";
@@ -233,10 +446,64 @@
                 UI.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc);
                 return; // don't continue trying to connect
             }
+            if (enablelog == 1) {
+                console.log('------------- noVnc Connect info -------------');
+                console.log('Host: ' + (host).toString());
+                console.log('Port: ' + (port).toString());
+                console.log('Password: ' + (password).toString());
+                console.log('Path: ' + (path).toString());
+                console.log('Url: ' + (window.location.href).toString());
+            }
 
+            // Connect
             rfb.connect(host, port, password, path);
+
+            if (enablelog == 1) {
+                console.log('------------- noVnc RFB Stats -------------');
+                rfb._print_stats();
+            }
+
+            if (enablelog == 1) {
+                console.log('------------- noVnc RFB Encoding -------------');
+                console.log(rfb._encodings);
+            }
+        }
+
+        // Window events
+
+        window.onresize = function () {
+            // When the window has been resized, wait until the size remains
+            // the same for 0.5 seconds before sending the request for changing
+            // the resolution of the session
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(function(){
+                UIresize();
+            }, 100);
+
         };
+
+        window.onload = function () {
+            autoconnect = WebUtil.getQueryVar('autoconnect', 0);
+            autoscale = WebUtil.getQueryVar('autoscale', 0);
+            quality = WebUtil.getQueryVar('quality', 2);
+            enablelog = WebUtil.getQueryVar('enablelog', 0);
+
+            // Change quality will set image level to different level (0 ~ 9)
+            if (quality == 1)
+                jpeg_quality = 0;
+            if (quality == 2)
+                jpeg_quality = 4;
+            if (quality == 3)
+                jpeg_quality = 9;
+
+            // Render the toolbar when loaded.
+            render_custom_toolbar();
+
+            // Connect to VNC.
+            if (autoconnect == 1)
+                connect_vnc();
+        }
+
     </script>
 
-    </body>
 </html>