Add broadway javascript and html part

2 files changed, 313 insertions, 0 deletions

diff --git a/gdk/broadway/broadway.js b/gdk/broadway/broadway.js
new file mode 100644
index 0000000000..de1ac3f0e7
--- /dev/null
+++ b/gdk/broadway/broadway.js
@@ -0,0 +1,302 @@
+
+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();
+
+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()
+  }
+}
+
+function connect(app)
+{
+  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", "/cgi-bin/" + app, true);
+    xhr.onload = handleLoad;
+    xhr.send(null);
+  }
+}
+
+function startClient(app)
+{
+  connect(app);
+}
diff --git a/gdk/broadway/client.html b/gdk/broadway/client.html
new file mode 100644
index 0000000000..0bd4a7f058
--- /dev/null
+++ b/gdk/broadway/client.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
+<title>broadway 2.0</title>
+<script type="text/javascript" src="broadway.js"></script>
+</head>
+
+<body onload="startClient('broadway')">
+</body>
+</html>