Skip to content

N
noVNC
Commit c8460b03 authored by Joel Martin's avatar Joel Martin
Browse files
Options

Cleanup canvas and vnc code so they can be used together.

parent f272267b
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 55 deletions
canvas.html
View file @ c8460b03
...@@ -14,4 +14,8 @@ ...@@ -14,4 +14,8 @@
<script src="include/mootools.js"></script> <script src="include/mootools.js"></script>
<script src="include/mootools-more.js"></script> <script src="include/mootools-more.js"></script>
<script src="canvas.js"></script> <script src="canvas.js"></script>
<script>
window.onload = function() { init_canvas('tutorial'); }
</script>
</html> </html>
canvas.js
View file @ c8460b03
window.onload = init;
var img = null;
var c_x = 0;
var c_y = 0;
var c_wx = 0;
var c_wy = 0;
function debug(str) { function debug(str) {
cell = $('debug'); cell = $('debug');
cell.innerHTML += str + "\n"; cell.innerHTML += str + "\n";
...@@ -29,66 +21,73 @@ function dirObj(obj, parent, depth) { ...@@ -29,66 +21,73 @@ function dirObj(obj, parent, depth) {
return msg; return msg;
} }
function mouseDown(e) {
Canvas = {
c_x : 0,
c_y : 0,
c_wx : 0,
c_wy : 0,
mousedown: function (e) {
evt = e.event || window.event; evt = e.event || window.event;
e.stop(); e.stop();
debug('mouse ' + evt.which + '/' + evt.button + ' down:' + debug('mouse ' + evt.which + '/' + evt.button + ' down:' +
(evt.clientX - c_x) + "," + (evt.clientY - c_y)); (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
} },
function mouseUp(e) { mouseUp: function (e) {
evt = e.event || window.event; evt = e.event || window.event;
e.stop(); e.stop();
debug('mouse ' + evt.which + '/' + evt.button + ' up:' + debug('mouse ' + evt.which + '/' + evt.button + ' up:' +
(evt.clientX - c_x) + "," + (evt.clientY - c_y)); (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
} },
function keyDown(e) { keyDown: function (e) {
e.stop(); e.stop();
debug("keydown: " + e.key + "(" + e.code + ")"); debug("keydown: " + e.key + "(" + e.code + ")");
} },
function keyUp(e) { keyUp : function (e) {
e.stop(); e.stop();
debug("keyup: " + e.key + "(" + e.code + ")"); debug("keyup: " + e.key + "(" + e.code + ")");
} },
function ctxDisable(e) { ctxDisable: function (e) {
evt = e.event || window.event; evt = e.event || window.event;
/* Stop propagation if inside canvas area */ /* Stop propagation if inside canvas area */
if ((evt.clientX >= c_x) && (evt.clientX < (c_x + c_wx)) && if ((evt.clientX >= Canvas.c_x) && (evt.clientX < (Canvas.c_x + Canvas.c_wx)) &&
(evt.clientY >= c_y) && (evt.clientY < (c_y + c_wy))) { (evt.clientY >= Canvas.c_y) && (evt.clientY < (Canvas.c_y + Canvas.c_wy))) {
e.stop(); e.stop();
return false; return false;
}; };
} },
function init() { init: function (canvas) {
debug(">> init"); debug(">> init_canvas");
c = $('tutorial'); c = $(canvas);
c.addEvent('mousedown', mouseDown); c.addEvent('mousedown', Canvas.mouseDown);
c.addEvent('mouseup', mouseUp); c.addEvent('mouseup', Canvas.mouseUp);
document.addEvent('keydown', keyDown); document.addEvent('keydown', Canvas.keyDown);
document.addEvent('keyup', keyUp); document.addEvent('keyup', Canvas.keyUp);
/* Work around right and middle click browser behaviors */ /* Work around right and middle click browser behaviors */
document.addEvent('click', ctxDisable); document.addEvent('click', Canvas.ctxDisable);
document.body.addEvent('contextmenu', ctxDisable); document.body.addEvent('contextmenu', Canvas.ctxDisable);
c_x = c.getPosition().x; Canvas.c_x = c.getPosition().x;
c_y = c.getPosition().y; Canvas.c_y = c.getPosition().y;
c_wx = c.getSize().x; Canvas.c_wx = c.getSize().x;
c_wy = c.getSize().y; Canvas.c_wy = c.getSize().y;
//var canvas = document.getElementById('tutorial');
if (! c.getContext) return; if (! c.getContext) return;
var ctx = c.getContext('2d'); var ctx = c.getContext('2d');
/* Border */ /* Border */
ctx.stroke(); ctx.stroke();
ctx.rect(0, 0, 500, 300); ctx.rect(0, 0, Canvas.c_wx, Canvas.c_wy);
ctx.stroke(); ctx.stroke();
/* /*
...@@ -99,7 +98,7 @@ function init() { ...@@ -99,7 +98,7 @@ function init() {
*/ */
/* Test array image data */ /* Test array image data */
img = ctx.createImageData(50, 50); var img = ctx.createImageData(50, 50);
for (y=0; y< 50; y++) { for (y=0; y< 50; y++) {
for (x=0; x< 50; x++) { for (x=0; x< 50; x++) {
img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y); img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y);
...@@ -110,6 +109,8 @@ function init() { ...@@ -110,6 +109,8 @@ function init() {
} }
ctx.putImageData(img, 100, 100); ctx.putImageData(img, 100, 100);
debug("<< init"); debug("<< init_canvas");
} }
};
vnc.html
View file @ c8460b03
<html> <html>
<head><title>VNC Client</title></head>
<body onload="draw();"> <body onload="draw();">
VNC Window:<br> VNC Window:<br>
<canvas id="vnc" width="800" height="600"> <canvas id="vnc" width="800" height="600">
Canvas not supported. Canvas not supported.
</canvas> </canvas>
<br><br> <br>
Debug: Debug:<br>
<div id="debug"></div> <textarea id="debug" style="font-size: 9;" cols=80 rows=25></textarea>
</body> </body>
<script src="include/mootools.js"></script> <script src="include/mootools.js"></script>
<script src="include/mootools-more.js"></script> <script src="include/mootools-more.js"></script>
<script src="include/base64a.js"></script> <script src="include/base64a.js"></script>
<script src="canvas.js"></script>
<script src="vnc.js"></script> <script src="vnc.js"></script>
<script type="text/javascript"> <script>
function connect() { function connect() {
debug(">> connect"); debug(">> connect");
var uri = new URI(window.location); var uri = new URI(window.location);
...@@ -33,7 +34,10 @@ ...@@ -33,7 +34,10 @@
debug("<< connect"); debug("<< connect");
} }
window.onload = connect(); window.onload = function() {
Canvas.init('vnc');
connect();
}
</script> </script>
</html> </html>
vnc.js
View file @ c8460b03
debug("here0");
var ws = null; var ws = null;
var vnc_host = ''; var vnc_host = '';
var vnc_port = 5900; var vnc_port = 5900;
...@@ -45,13 +44,6 @@ Array.prototype.substr = function (start, len) { ...@@ -45,13 +44,6 @@ Array.prototype.substr = function (start, len) {
function (num) { return String.fromCharCode(num); } ).join(''); function (num) { return String.fromCharCode(num); } ).join('');
} }
function debug(str) {
cell = $('debug');
cell.innerHTML += str + "<br/>";
}
/* /*
* Server message handlers * Server message handlers
*/ */
...@@ -175,7 +167,7 @@ function rfb_msg(data) { ...@@ -175,7 +167,7 @@ function rfb_msg(data) {
debug(">> rfb_msg"); debug(">> rfb_msg");
if (rfb_continue >= 0) { if (rfb_continue >= 0) {
var msg_type = rfb_continue; var msg_type = rfb_continue;
} else } else {
var msg_type = data.card8(0); var msg_type = data.card8(0);
} }
switch (msg_type) { switch (msg_type) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment