jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move controls to vnc.js, make vnc.html very simple.

This commit is contained in:
Joel Martin 2010-05-06 17:08:53 -05:00
parent fc7d416ee4
commit 97bfe5ba25
2 changed files with 136 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
vnc.html
View File

@ -1,84 +1,12 @@
<html> <html>
<head><title>VNC Client</title></head> <head>
<title>VNC Client</title>
<script src="vnc.js"></script>
</head>
<body> <body>
<div id='vnc'>Loading</div>
Host: <input id='host' style='width:100'>&nbsp;
Port: <input id='port' style='width:50'>&nbsp;
Password: <input id='password' type='password' style='width:80'>&nbsp;
Encrypt: <input id='encrypt' type='checkbox'>&nbsp;
<input id='connectButton' type='button' value='Loading'
style='width:100px' disabled>&nbsp;
<br><br>
<div id='status'>Loading</div>
<canvas id="vnc" width="640" height="20"
style="border-style: dotted; border-width: 1px;">
Canvas not supported.
</canvas>
<br><br>
VNC Clipboard:
<input id='clearButton' type="button" value="Clear"
onclick="RFB.clipboardClear();"><br>
<textarea id="clipboard" style="font-size:9;" cols=80 rows=5
onchange="RFB.clipboardPasteFrom();"
onfocus="RFB.clipboardFocus=true;"
onblur="RFB.clipboardFocus=false;"></textarea>
</body> </body>
<!-- Uncomment to activate firebug lite -->
<!--
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
-->
<script src="include/mootools.js"></script>
<script src="include/base64.js"></script>
<script src="include/des.js"></script>
<script src="include/util.js"></script>
<script src="canvas.js"></script>
<script src="vnc.js"></script>
<script>
var native_ws = true;
/* If no builtin websockets then load web_socket.js */
if (! window.WebSocket) {
var extra = "<script src='include/web-socket-js/swfobject.js'><\/script>";
extra += "<script src='include/web-socket-js/FABridge.js'><\/script>";
extra += "<script src='include/web-socket-js/web_socket.js'><\/script>";
document.write(extra);
native_ws = false;
}
window.onload = function() {
console.log("onload");
if (native_ws) {
console.log("Using native WebSockets");
RFB.updateState('disconnected', 'Disconnected');
} else {
console.log("Using web-socket-js flash bridge");
if ((! Browser.Plugins.Flash) ||
(Browser.Plugins.Flash.version < 9)) {
RFB.updateState('failed', "WebSockets or Adobe Flash is required");
} else if (location.href.substr(0, 7) == "file://") {
RFB.updateState('failed', "'file://' URL is incompatible with Adobe Flash");
} else {
WebSocket.__swfLocation = "include/web-socket-js/WebSocketMain.swf";
RFB.use_seq = true;
RFB.updateState('disconnected', 'Disconnected');
}
}
if (RFB.state == 'disconnected') {
var url = document.location.href;
$('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
$('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
$('password').value = (url.match(/password=([^&#]*)/) || ['',''])[1];
$('encrypt').checked = (url.match(/encrypt=([^&#]*)/) || ['',''])[1];
}
}
</script>
</html> </html>

159
vnc.js
View File

@ -1,3 +1,107 @@
/*
* HTML5 VNC client. To use, include this script and define a div with
* id of 'vnc'. For example:
* <html><body>
* <script src='vnc.js'></script>
* <div id='vnc'>Loading</div>
* </body></html>
*
* This script defines the following globals:
* VNC_scripts, VNC_native_ws, FBU, RFB,
* RQ, RQ_reorder, RQ_seq_num, SQ
*/
/*
* Load supporting scripts
*/
VNC_scripts = "";
// Uncomment to activate firebug lite
//VNC_scripts += "<script src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'><\/script>";
VNC_scripts += "<script src='include/mootools.js'><\/script>";
VNC_scripts += "<script src='include/base64.js'><\/script>";
VNC_scripts += "<script src='include/des.js'><\/script>";
VNC_scripts += "<script src='include/util.js'><\/script>";
VNC_scripts += "<script src='canvas.js'><\/script>";
/* If no builtin websockets then load web_socket.js */
if (window.WebSocket) {
VNC_native_ws = true;
} else {
VNC_native_ws = false;
VNC_scripts += "<script src='include/web-socket-js/swfobject.js'><\/script>";
VNC_scripts += "<script src='include/web-socket-js/FABridge.js'><\/script>";
VNC_scripts += "<script src='include/web-socket-js/web_socket.js'><\/script>";
}
document.write(VNC_scripts);
/*
* Load the controls
*/
window.onload = function () {
console.log("onload");
/* Populate the 'vnc' div */
var html = "";
html += '<div id="controls">';
html += 'Host: <input id="host" style="width:100">&nbsp;';
html += 'Port: <input id="port" style="width:50">&nbsp;';
html += 'Password: <input id="password" type="password" style="width:80">&nbsp;';
html += 'Encrypt: <input id="encrypt" type="checkbox">&nbsp;';
html += '<input id="connectButton" type="button" value="Loading"';
html += 'style="width:100px" disabled>&nbsp;';
html += '</div>';
html += '<br>';
html += '<div id="status">Loading</div>';
html += '<canvas id="canvas" width="640" height="20"';
html += ' style="border-style: dotted; border-width: 1px;">';
html += ' Canvas not supported.';
html += '</canvas>';
html += '<br><br>';
html += 'VNC Clipboard:';
html += '<input id="clearButton" type="button" value="Clear"';
html += ' onclick="RFB.clipboardClear();"><br>';
html += '<textarea id="clipboard" style="font-size:9;" cols=80 rows=5';
html += ' onchange="RFB.clipboardPasteFrom();"';
html += ' onfocus="RFB.clipboardFocus=true;"';
html += ' onblur="RFB.clipboardFocus=false;"></textarea>';
$('vnc').innerHTML = html;
/* Load web-socket-js if no builtin WebSocket support */
if (VNC_native_ws) {
console.log("Using native WebSockets");
RFB.updateState('disconnected', 'Disconnected');
} else {
console.log("Using web-socket-js flash bridge");
if ((! Browser.Plugins.Flash) ||
(Browser.Plugins.Flash.version < 9)) {
RFB.updateState('failed', "WebSockets or Adobe Flash is required");
} else if (location.href.substr(0, 7) == "file://") {
RFB.updateState('failed', "'file://' URL is incompatible with Adobe Flash");
} else {
WebSocket.__swfLocation = "include/web-socket-js/WebSocketMain.swf";
RFB.use_seq = true;
RFB.updateState('disconnected', 'Disconnected');
}
}
/* Populate the controls if defaults are provided in the URL */
if (RFB.state == 'disconnected') {
var url = document.location.href;
$('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
$('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
$('password').value = (url.match(/password=([^&#]*)/) || ['',''])[1];
$('encrypt').checked = (url.match(/encrypt=([^&#]*)/) || ['',''])[1];
}
}
/*
* Make arrays quack
*/
Array.prototype.shift8 = function () { Array.prototype.shift8 = function () {
return this.shift(); return this.shift();
} }
@ -67,15 +171,6 @@ FBU = {
subencoding : -1, subencoding : -1,
background: null}; background: null};
/*
* Mouse state
*/
Mouse = {
buttonmask : 0,
arr : []
};
/* /*
* RFB namespace * RFB namespace
*/ */
@ -88,6 +183,7 @@ SQ = ""; // Send Queue
RFB = { RFB = {
ws : null, // Web Socket object ws : null, // Web Socket object
scheme : "ws://",
sendID : null, sendID : null,
use_seq : false, use_seq : false,
@ -114,6 +210,10 @@ fb_name : "",
fb_Bpp : 4, fb_Bpp : 4,
rre_chunk : 100, rre_chunk : 100,
/* Mouse state */
mouse_buttonmask : 0,
mouse_arr : [],
/* /*
* Server message handlers * Server message handlers
@ -266,7 +366,7 @@ init_msg: function () {
var name_length = RQ.shift32(); var name_length = RQ.shift32();
RFB.fb_name = RQ.shiftStr(name_length); RFB.fb_name = RQ.shiftStr(name_length);
Canvas.init('vnc', RFB.fb_width, RFB.fb_height, Canvas.init('canvas', RFB.fb_width, RFB.fb_height,
RFB.keyDown, RFB.keyUp, RFB.keyDown, RFB.keyUp,
RFB.mouseDown, RFB.mouseUp, RFB.mouseMove); RFB.mouseDown, RFB.mouseUp, RFB.mouseMove);
@ -676,10 +776,10 @@ keyEvent: function (keysym, down) {
}, },
pointerEvent: function (x, y) { pointerEvent: function (x, y) {
//console.log(">> pointerEvent, x,y: " + x + "," + y + " , mask: " + Mouse.buttonMask); //console.log(">> pointerEvent, x,y: " + x + "," + y + " , mask: " + RFB.mouse_buttonMask);
var arr; var arr;
arr = [5]; // msg-type arr = [5]; // msg-type
arr.push8(Mouse.buttonMask); arr.push8(RFB.mouse_buttonMask);
arr.push16(x); arr.push16(x);
arr.push16(y); arr.push16(y);
//console.log("<< pointerEvent"); //console.log("<< pointerEvent");
@ -815,14 +915,14 @@ DES: function (password, challenge) {
flushClient: function () { flushClient: function () {
var arr = []; var arr = [];
if (Mouse.arr.length > 0) { if (RFB.mouse_arr.length > 0) {
//RFB.send_array(Mouse.arr.concat(RFB.fbUpdateRequest(1))); //RFB.send_array(RFB.mouse_arr.concat(RFB.fbUpdateRequest(1)));
RFB.send_array(Mouse.arr) RFB.send_array(RFB.mouse_arr)
setTimeout(function() { setTimeout(function() {
RFB.send_array(RFB.fbUpdateRequest(1)); RFB.send_array(RFB.fbUpdateRequest(1));
}, 50); }, 50);
Mouse.arr = []; RFB.mouse_arr = [];
return true; return true;
} else { } else {
return false; return false;
@ -868,8 +968,8 @@ mouseDown: function(e) {
x = (evt.clientX - Canvas.c_x); x = (evt.clientX - Canvas.c_x);
y = (evt.clientY - Canvas.c_y); y = (evt.clientY - Canvas.c_y);
//console.log('>> mouseDown ' + evt.which + '/' + evt.button + " " + x + "," + y); //console.log('>> mouseDown ' + evt.which + '/' + evt.button + " " + x + "," + y);
Mouse.buttonMask |= 1 << evt.button; RFB.mouse_buttonMask |= 1 << evt.button;
Mouse.arr = Mouse.arr.concat( RFB.pointerEvent(x, y) ); RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
RFB.flushClient(); RFB.flushClient();
}, },
@ -880,8 +980,8 @@ mouseUp: function(e) {
x = (evt.clientX - Canvas.c_x); x = (evt.clientX - Canvas.c_x);
y = (evt.clientY - Canvas.c_y); y = (evt.clientY - Canvas.c_y);
//console.log('>> mouseUp ' + evt.which + '/' + evt.button + " " + x + "," + y); //console.log('>> mouseUp ' + evt.which + '/' + evt.button + " " + x + "," + y);
Mouse.buttonMask ^= 1 << evt.button; RFB.mouse_buttonMask ^= 1 << evt.button;
Mouse.arr = Mouse.arr.concat( RFB.pointerEvent(x, y) ); RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
RFB.flushClient(); RFB.flushClient();
}, },
@ -892,7 +992,7 @@ mouseMove: function(e) {
x = (evt.clientX - Canvas.c_x); x = (evt.clientX - Canvas.c_x);
y = (evt.clientY - Canvas.c_y); y = (evt.clientY - Canvas.c_y);
//console.log('>> mouseMove ' + x + "," + y); //console.log('>> mouseMove ' + x + "," + y);
Mouse.arr = Mouse.arr.concat( RFB.pointerEvent(x, y) ); RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) );
}, },
clipboardCopyTo: function (text) { clipboardCopyTo: function (text) {
@ -958,11 +1058,7 @@ updateState: function(state, statusMsg) {
init_ws: function () { init_ws: function () {
console.log(">> init_ws"); console.log(">> init_ws");
var scheme = "ws://"; var uri = RFB.scheme + RFB.host + ":" + RFB.port + "/?b64encode";
if ($('encrypt').checked) {
scheme = "wss://";
}
var uri = scheme + RFB.host + ":" + RFB.port + "/?b64encode";
if (RFB.use_seq) { if (RFB.use_seq) {
uri += "&seq_num"; uri += "&seq_num";
} }
@ -1025,8 +1121,8 @@ init_vars: function () {
FBU.subrects = 0; // RRE and HEXTILE FBU.subrects = 0; // RRE and HEXTILE
FBU.lines = 0, // RAW FBU.lines = 0, // RAW
FBU.tiles = 0, // HEXTILE FBU.tiles = 0, // HEXTILE
Mouse.buttonmask = 0; RFB.mouse_buttonmask = 0;
Mouse.arr = []; RFB.mouse_arr = [];
}, },
@ -1035,6 +1131,11 @@ connect: function () {
RFB.host = $('host').value; RFB.host = $('host').value;
RFB.port = $('port').value; RFB.port = $('port').value;
RFB.password = $('password').value; RFB.password = $('password').value;
if ($('encrypt').checked) {
RFB.scheme = "wss://";
} else {
RFB.scheme = "ws://";
}
if ((!RFB.host) || (!RFB.port)) { if ((!RFB.host) || (!RFB.port)) {
console.log("must set host and port"); console.log("must set host and port");
return; return;
@ -1071,6 +1172,6 @@ disconnect: function () {
RFB.updateState('disconnected', 'Disconnected'); RFB.updateState('disconnected', 'Disconnected');
} }
console.log("<< disconnect"); console.log("<< disconnect");
} },
}; /* End of RFB */ }; /* End of RFB */