mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-10 19:00:08 +00:00
336 lines
8.2 KiB
JavaScript
336 lines
8.2 KiB
JavaScript
|
|
var base64_val = [
|
|
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
|
|
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
|
|
255,255,255,255,255,255,255,255,255,255,255, 62,255,255,255, 63,
|
|
52, 53, 54, 55, 56, 57, 58, 59, 60, 61,255,255,255, 0,255,255,
|
|
255, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
|
|
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,255,255,255,255,255,
|
|
255, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
|
|
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51,255,255,255,255,255
|
|
]
|
|
|
|
function base64_8(str, index) {
|
|
var v =
|
|
(base64_val[str.charCodeAt(index)]) +
|
|
(base64_val[str.charCodeAt(index+1)] << 6);
|
|
return v;
|
|
}
|
|
|
|
function base64_16(str, index) {
|
|
var v =
|
|
(base64_val[str.charCodeAt(index)]) +
|
|
(base64_val[str.charCodeAt(index+1)] << 6) +
|
|
(base64_val[str.charCodeAt(index+2)] << 12);
|
|
return v;
|
|
}
|
|
|
|
function base64_16s(str, index) {
|
|
var v = base64_16(str, index);
|
|
if (v > 32767)
|
|
return v - 65536;
|
|
else
|
|
return v;
|
|
}
|
|
|
|
function base64_24(str, index) {
|
|
var v =
|
|
(base64_val[str.charCodeAt(index)]) +
|
|
(base64_val[str.charCodeAt(index+1)] << 6) +
|
|
(base64_val[str.charCodeAt(index+2)] << 12) +
|
|
(base64_val[str.charCodeAt(index+3)] << 18);
|
|
return v;
|
|
}
|
|
|
|
function base64_32(str, index) {
|
|
var v =
|
|
(base64_val[str.charCodeAt(index)]) +
|
|
(base64_val[str.charCodeAt(index+1)] << 6) +
|
|
(base64_val[str.charCodeAt(index+2)] << 12) +
|
|
(base64_val[str.charCodeAt(index+3)] << 18) +
|
|
(base64_val[str.charCodeAt(index+4)] << 24) +
|
|
(base64_val[str.charCodeAt(index+5)] << 30);
|
|
return v;
|
|
}
|
|
|
|
function createXHR()
|
|
{
|
|
try { return new XMLHttpRequest(); } catch(e) {}
|
|
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
|
|
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
|
|
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
|
|
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
|
|
|
|
return null;
|
|
}
|
|
|
|
var surfaces = {};
|
|
var outstanding_commands = new Array();
|
|
var input_socket = null;
|
|
|
|
function apply_delta(id, img, x, y)
|
|
{
|
|
var tmp_surface = document.createElement("canvas");
|
|
var w = img.width;
|
|
var h = img.height;
|
|
tmp_surface.width = w;
|
|
tmp_surface.height = h;
|
|
|
|
tmp_context = tmp_surface.getContext("2d");
|
|
tmp_context.drawImage(img, 0, 0);
|
|
|
|
var data = surfaces[id].getImageData(x, y, w, h);
|
|
var d = data.data
|
|
var delta = tmp_context.getImageData(0, 0, w, h).data;
|
|
var imax = w * h * 4;
|
|
for (var i = 0; i < imax; i += 4) {
|
|
d[i ] = (d[i ] + delta[i ]) & 0xff;
|
|
d[i+1] = (d[i+1] + delta[i+1]) & 0xff;
|
|
d[i+2] = (d[i+2] + delta[i+2]) & 0xff;
|
|
d[i+3] = 255;
|
|
}
|
|
surfaces[id].putImageData(data, x, y);
|
|
delete tmp_surface
|
|
}
|
|
|
|
function initContext(canvas, x, y)
|
|
{
|
|
canvas.style["position"] = "absolute"
|
|
canvas.style["top"] = x + "px"
|
|
canvas.style["left"] = y + "px"
|
|
canvas.style["display"] = "none"
|
|
context = canvas.getContext("2d")
|
|
context.globalCompositeOperation = "copy"
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
document.body.appendChild(canvas)
|
|
|
|
return context
|
|
}
|
|
|
|
function handleCommands(cmd_obj)
|
|
{
|
|
var cmd = cmd_obj.data;
|
|
var i = cmd_obj.pos;
|
|
|
|
while (i < cmd.length) {
|
|
var command = cmd[i++];
|
|
switch (command) {
|
|
/* create new surface */
|
|
case 's':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var x = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var y = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var w = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var h = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var surface = document.createElement("canvas");
|
|
surface.width = w;
|
|
surface.height = h;
|
|
surfaces[id] = initContext(surface, x, y);
|
|
break;
|
|
|
|
/* show a surface */
|
|
case 'S':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
surfaces[id].canvas.style["display"] = "inline";
|
|
break;
|
|
|
|
/* hide a surface */
|
|
case 'H':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
surfaces[id].canvas.style["display"] = "inline";
|
|
break;
|
|
|
|
/* delete surface */
|
|
case 'd':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var canvas = surfaces[id].canvas
|
|
delete surfaces[id]
|
|
canvas.parentNode.removeChild(canvas);
|
|
|
|
break;
|
|
|
|
/* move a surface */
|
|
case 'm':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var x = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var y = base64_16(cmd, i);
|
|
i = i + 3;
|
|
surfaces[id].canvas.style["left"] = x + "px";
|
|
surfaces[id].canvas.style["top"] = y + "px";
|
|
break;
|
|
|
|
/* put image data surface */
|
|
case 'i':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var x = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var y = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var size = base64_32(cmd, i);
|
|
i = i + 6;
|
|
var url = cmd.slice(i, i + size);
|
|
i = i + size;
|
|
var img = new Image();
|
|
img.src = url
|
|
if (img.complete) {
|
|
surfaces[id].drawImage(img, x, y);
|
|
} else {
|
|
cmd_obj.pos = i;
|
|
img.onload = function() { surfaces[id].drawImage(img, x, y); handleOutstanding(); }
|
|
return false
|
|
}
|
|
|
|
break;
|
|
|
|
/* put delta image data surface */
|
|
case 'D':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var x = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var y = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var size = base64_32(cmd, i);
|
|
i = i + 6;
|
|
var url = cmd.slice(i, i + size);
|
|
i = i + size;
|
|
var img = new Image();
|
|
img.src = url
|
|
if (img.complete) {
|
|
apply_delta(id, img, x, y);
|
|
} else {
|
|
cmd_obj.pos = i;
|
|
img.onload = function() { apply_delta(id, img, x, y); handleOutstanding(); }
|
|
return false
|
|
}
|
|
|
|
break;
|
|
|
|
/* copy rects */
|
|
case 'b':
|
|
var id = base64_16(cmd, i);
|
|
i = i + 3;
|
|
|
|
var nrects = base64_16(cmd, i);
|
|
i = i + 3;
|
|
|
|
var context = surfaces[id];
|
|
context.save();
|
|
|
|
for (var r = 0; r < nrects; r++) {
|
|
var x = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var y = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var w = base64_16(cmd, i);
|
|
i = i + 3;
|
|
var h = base64_16(cmd, i);
|
|
i = i + 3;
|
|
context.rect(x, y, w, h);
|
|
}
|
|
|
|
context.clip()
|
|
|
|
var dx = base64_16s(cmd, i);
|
|
i = i + 3;
|
|
var dy = base64_16s(cmd, i);
|
|
i = i + 3;
|
|
|
|
context.drawImage(context.canvas, dx, dy, context.canvas.width, context.canvas.height);
|
|
|
|
context.restore();
|
|
break;
|
|
|
|
default:
|
|
alert("Unknown op " + command);
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function handleOutstanding()
|
|
{
|
|
while (outstanding_commands.length > 0) {
|
|
var cmd = outstanding_commands.shift();
|
|
if (!handleCommands(cmd)) {
|
|
outstanding_commands.unshift(cmd);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleLoad(event)
|
|
{
|
|
var cmd_obj = {};
|
|
cmd_obj.data = event.target.responseText;
|
|
cmd_obj.pos = 0;
|
|
|
|
outstanding_commands.push(cmd_obj);
|
|
if (outstanding_commands.length == 1) {
|
|
handleOutstanding()
|
|
}
|
|
|
|
if ("WebSocket" in window) {
|
|
var loc = window.location.toString().replace("http:", "ws:");
|
|
loc = loc.substr(0, loc.lastIndexOf('/')) + "/input";
|
|
var ws = new WebSocket(loc, "broadway");
|
|
ws.onopen = function() {
|
|
input_socket = ws;
|
|
};
|
|
ws.onclose = function() {
|
|
input_socket = null;
|
|
};
|
|
} else {
|
|
alert("WebSocket not supported, input will not work!");
|
|
}
|
|
}
|
|
|
|
function on_mouse_move (ev) {
|
|
if (input_socket != null) {
|
|
input_socket.send("m" + ev.pageX + "," + ev.pageY + "," + ev.timeStamp);
|
|
}
|
|
}
|
|
|
|
function on_mouse_down (ev) {
|
|
if (input_socket != null) {
|
|
input_socket.send("b" + ev.pageX + "," + ev.pageY + "," + ev.button + "," + ev.timeStamp);
|
|
}
|
|
}
|
|
|
|
function on_mouse_up (ev) {
|
|
if (input_socket != null) {
|
|
input_socket.send("B" + ev.pageX + "," + ev.pageY + "," + ev.button + "," + ev.timeStamp);
|
|
}
|
|
}
|
|
|
|
function connect()
|
|
{
|
|
var xhr = createXHR();
|
|
if (xhr) {
|
|
if (typeof xhr.multipart == 'undefined') {
|
|
alert("Sorry, this example only works in browsers that support multipart.");
|
|
return;
|
|
}
|
|
|
|
xhr.multipart = true;
|
|
xhr.open("GET", "/output", true);
|
|
xhr.onload = handleLoad;
|
|
xhr.send(null);
|
|
}
|
|
|
|
document.onmousemove = on_mouse_move;
|
|
document.onmousedown = on_mouse_down;
|
|
document.onmouseup = on_mouse_up;
|
|
}
|