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.
This commit is contained in:
daniel kho
parent
91287cfd27
commit
14f745f57b
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
102
include/ui.js
102
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);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
3
vnc.html
3
vnc.html
|
|
@ -28,7 +28,8 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
window.onresize=function() {UI.resize();};
|
||||
window.onresize=function() {UI.rfb.get_display().resize(); UI.rfb.get_display().refresh();};
|
||||
//window.onresize=function() {UI.rfb.get_display().resize();};
|
||||
window.onload=function() {UI.load('vnc');};
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue