From 14f745f57bd985238fed235fc214a3279ea44855 Mon Sep 17 00:00:00 2001 From: daniel kho Date: Tue, 6 Sep 2011 12:19:54 +0800 Subject: [PATCH] resize feature, and screen refresh feature. Screen refresh is still buggy - need to resize the browser window multiple times before the canvas can be refreshed. Will clean up commented-out code in next commit. --- include/display.js | 131 ++++++++++++++++++++++++++++++++++++++++++++- include/rfb.js | 14 ++++- include/ui.js | 102 ++++++++++++++++------------------- vnc.html | 3 +- 4 files changed, 189 insertions(+), 61 deletions(-) diff --git a/include/display.js b/include/display.js index d7aa43f4..5f697611 100644 --- a/include/display.js +++ b/include/display.js @@ -265,7 +265,7 @@ setFillColor = function(color) { // Public API interface functions // -that.resize = function(width, height) { +/* that.resize1 = function(width, height) { var c = conf.target; c_prevStyle = ""; @@ -277,10 +277,137 @@ that.resize = function(width, height) { c_height = c.offsetHeight; rescale(conf.scale); +}; */ + +/* Test graphics (repeating pattern). */ +that.drawArea = function(x, y, w, h) { + UI.message("draw "+x+","+y+" ("+w+","+h+")"); + var imgData = ctx.createImageData(w, h), + data = imgData.data, pixel, realX, realY; + + for (var i = 0; i < w; i++) { + realX = viewport.x + x + i; + for (var j = 0; j < h; j++) { + realY = viewport.y + y + j; + pixel = (j * w * 4 + i * 4); + data[pixel + 0] = ((realX * realY) / 13) % 256; + data[pixel + 1] = ((realX * realY) + 392) % 256; + data[pixel + 2] = ((realX + realY) + 256) % 256; + data[pixel + 3] = 255; + } + } + //UI.message("i: " + i + ", j: " + j + ", pixel: " + pixel); + ctx.putImageData(imgData, x, y); +}; + +that.resize = function() { + //UI.message("width: "+width+"; height: "+height); + //alert("width: "+width+"; height: "+height); + + /* Save current image data. */ + var d = c_ctx.getImageData(0, 0, conf.target.width,conf.target.height); + + //if (!width && !height) { + //var v = viewport, + // cw = $D('vnc').offsetWidth, + // ch = $D('vnc').offsetHeight; + var c=$D('vnc'); + //conf.target=c; + var v = viewport, + cw = c.offsetWidth, + ch = c.offsetHeight; + + UI.message("container: " + cw + "," + ch); + + if (cw > fb_width) { + cw = fb_width; + } + if (ch > fb_height) { + ch = fb_height; + } + if ((cw !== v.w) || (ch !== v.h)) { + v.w = cw; + v.h = ch; + UI.message("new viewport: " + v.w + "," + v.h); + //$D('VNC_canvas').resize(v.w, v.h); + //UI.canvas.resize(v.w, v.h); + //UI.rfb.get_display().resize(v.w, v.h); + //that.resize1(v.w, v.h); + //UI.rfb.get_display().get_context().updateState + //UI.updateState("loaded"); + //UI.drawArea(0, 0, v.w, v.h); + + c = conf.target; + + //c_prevStyle = ""; + + c.width = v.w; + c.height = v.h; + + //c_width = c.offsetWidth; + //c_height = c.offsetHeight; + + rescale(conf.scale); + //that.refresh(); + //that.clear(); + //c_ctx.putImageData(d, 0, 0); + //c_rgbxImage(0, 0, v.w, v.h, c.data, 0); + //rgbxImageData(0, 0, v.w, v.h, c.data, 0); + } + UI.message("framebuffer: "+fb_width+","+fb_height+"; viewport: "+v.w+","+v.h); + //} else { + /* var c = conf.target; + + c_prevStyle = ""; + + c.width = width; + c.height = height; + + c_width = c.offsetWidth; + c_height = c.offsetHeight; + + rescale(conf.scale); */ + //} +}; + +/* Screen refresh. */ +that.refresh = function() { + //that=new Display({'target': conf.target}); + //c_rgbxImage = rgbxImageData; + //c_rgbxImage(0, 0, conf.target.width, conf.target.height); //,conf.target.data,0); + //if (UI.rfb) { + //UI.rfb.disconnect(); + //UI.message("host: "+UI.rfb.rfb_host+", port: "+UI.rfb.rfb_port+", password: "+UI.rfb.rfb_password+", uri: "+UI.rfb.rfb_uri); + //UI.rfb.connect(UI.rfb.rfb_host, UI.rfb.rfb_port, UI.rfb.rfb_password, UI.rfb.rfb_uri); + //} + UI.message("host: "+UI.host+", port: "+UI.port+", password: "+UI.password); + //UI.message(UI.connect); + //UI.connect(); + //if (UI.rfb) {UI.message('rfb.connect: '+UI.rfb.connect);} + //UI.message(typeof(UI.rfb.connect)); + //UI.connect(); + + //if (UI.rfb && UI.rfb.connect) { + //UI.disconnect(); + + if (UI.rfb) { + //alert('about to refresh...'); + UI.rfb.refresh(); + //UI.rfb.connect(UI.host,UI.port,UI.password); + //UI.rfb.sendPassword(UI.password); + } + + //var d = c_ctx.getImageData(0, 0, conf.target.width,conf.target.height); + //c_ctx.putImageData(d, 0, 0); + //if(conf.logo) { + //that.blitStringImage(conf.logo.data, 0, 0); + //} + + UI.message('screen refreshed.'); + Util.Debug('screen refreshed.'); }; that.clear = function() { - if (conf.logo) { that.resize(conf.logo.width, conf.logo.height); that.blitStringImage(conf.logo.data, 0, 0); diff --git a/include/rfb.js b/include/rfb.js index feccc160..144cda18 100644 --- a/include/rfb.js +++ b/include/rfb.js @@ -428,7 +428,6 @@ updateState = function(state, statusMsg) { case 'connect': - connTimer = setTimeout(function () { fail("Connect timeout"); }, conf.connectTimeout * 1000); @@ -1505,6 +1504,19 @@ that.sendPassword = function(passwd) { setTimeout(init_msg, 1); }; +that.refresh = function() { + //that.disconnect(); + /* updateState('connect','refreshing...'); + if (rfb_state!=='normal') { + //setTimeout(function () {that.refresh();}, conf.connectTimeout * 1000); + setTimeout(function () {that.refresh();}, 1000); + } */ + + setTimeout(function () {updateState('connect','refreshing...');}, 10); + if (rfb_state!=='normal') {that.refresh();} + UI.message('state: '+rfb_state); +}; + that.sendCtrlAltDel = function() { if (rfb_state !== "normal") { return false; } Util.Info("Sending Ctrl-Alt-Del"); diff --git a/include/ui.js b/include/ui.js index 41b69d94..350f792f 100644 --- a/include/ui.js +++ b/include/ui.js @@ -23,10 +23,15 @@ var msg_cnt = 0, iterations, var newline = "\n"; + var UI = { settingsOpen : false, +host: '', +port: '', +password: '', + // Render default UI and initialize settings menu load: function(target) { if (Util.Engine.trident) { @@ -347,7 +352,7 @@ settingsApply: function() { //Util.Debug("scale: " + scale); //UI.rfb.get_display().set_scale(UI.getSetting('scale')); //UI.rfb.get_mouse().set_scale(UI.getSetting('scale')); - UI.resize(); + UI.rfb.get_display().resize(); } WebUtil.selectStylesheet(UI.getSetting('stylesheet')); WebUtil.init_logging(UI.getSetting('logging')); @@ -394,8 +399,8 @@ setMouseButton: function(num) { }, updateState: function(rfb, state, oldstate, msg) { - var link, host, port, password, html; - var s, sb, cad, klass; + //var link, host, port, password; + var html, s, sb, cad, klass; s = $D('VNC_status'); sb = $D('VNC_status_bar'); cad = $D('sendCtrlAltDelButton'); @@ -481,7 +486,7 @@ connect: function() { var host, port, password; UI.closeSettingsMenu(); - + host = $D('VNC_host').value; port = $D('VNC_port').value; password = $D('VNC_password').value; @@ -497,13 +502,46 @@ connect: function() { UI.rfb.connect(host, port, password); - UI.message("resizing..."); - UI.resize(); - return false; }, +/* connect: function() { + UI.closeSettingsMenu(); + //UI.rfb.disconnect(); + + // Reconnect using existing credentials when they are available, otherwise set credentials and connect. + // Upon disconnect or on page load, the credentials will not be available, and user will be shown a login screen, + // where the proper credentials must be supplied. + UI.message("!password? "+!UI.password); + if (!UI.host || !UI.port || !UI.password) { + //if ($D('VNC_host').value.length>0 && $D('VNC_port').value.length>0 && $D('VNC_password').value.length>0) { + UI.host = $D('VNC_host').value; + UI.port = $D('VNC_port').value; + UI.password = $D('VNC_password').value; + if ((!UI.host) || (!UI.port)) { + throw("Must set host and port"); + } + UI.message("password: "+UI.password); + + UI.rfb.set_encrypt(UI.getSetting('encrypt')); + UI.rfb.set_true_color(UI.getSetting('true_color')); + UI.rfb.set_local_cursor(UI.getSetting('cursor')); + UI.rfb.set_shared(UI.getSetting('shared')); + UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout')); + + //UI.rfb.disconnect(); + UI.rfb.connect(UI.host, UI.port, UI.password); + + //UI.message("resizing..."); + //UI.rfb.get_display().resize(); + //} + } + + return false; +}, */ + disconnect: function() { + UI.password=null; UI.closeSettingsMenu(); UI.rfb.disconnect(); }, @@ -537,55 +575,5 @@ message: function(str) { cell.innerHTML += msg_cnt + ": " + str + newline; cell.scrollTop = cell.scrollHeight; msg_cnt++; -}, - -/* Test graphics (repeating pattern). */ -drawArea: function(x, y, w, h) { - this.message("draw "+x+","+y+" ("+w+","+h+")"); - var imgData = ctx.createImageData(w, h), - data = imgData.data, pixel, realX, realY; - - for (var i = 0; i < w; i++) { - realX = viewport.x + x + i; - for (var j = 0; j < h; j++) { - realY = viewport.y + y + j; - pixel = (j * w * 4 + i * 4); - data[pixel + 0] = ((realX * realY) / 13) % 256; - data[pixel + 1] = ((realX * realY) + 392) % 256; - data[pixel + 2] = ((realX + realY) + 256) % 256; - data[pixel + 3] = 255; - } - } - //message("i: " + i + ", j: " + j + ", pixel: " + pixel); - ctx.putImageData(imgData, x, y); -}, - -resize: function() { - var v = viewport, - cw = $D('vnc').offsetWidth, - ch = $D('vnc').offsetHeight; - //cw = target.offsetWidth, - //ch = target.offsetHeight; - - this.message("container: " + cw + "," + ch); - - if (cw > fb_width) { - cw = fb_width; - } - if (ch > fb_height) { - ch = fb_height; - } - if ((cw !== v.w) || (ch !== v.h)) { - v.w = cw; - v.h = ch; - this.message("new viewport: " + v.w + "," + v.h); - //$D('VNC_canvas').resize(v.w, v.h); - //UI.canvas.resize(v.w, v.h); - UI.rfb.get_display().resize(v.w, v.h); - //UI.rfb.get_display().get_context().updateState - //UI.updateState("loaded"); - //UI.drawArea(0, 0, v.w, v.h); - } - this.message("framebuffer: "+fb_width+","+fb_height+"; viewport: "+v.w+","+v.h); } }; diff --git a/vnc.html b/vnc.html index 9b91a149..a02cbd2d 100644 --- a/vnc.html +++ b/vnc.html @@ -28,7 +28,8 @@