move javascript code out of html file.

3 files changed, 255 insertions, 228 deletions

diff --git a/munia.html b/munia.html
index 2a833eb..2dc3099 100644
--- a/munia.html
+++ b/munia.html
@@ -35,234 +35,7 @@ background-color:yellow;
 <input type="button" value="submit" onclick="submit()"/>
 <div id="wslm_lastmsg"></div>
 </div>
-<script>
-var BrowserDetect = {
-  init: function () {
-    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
-    this.version = this.searchVersion(navigator.userAgent)
-      || this.searchVersion(navigator.appVersion)
-      || "an unknown version";
-    this.OS = this.searchString(this.dataOS) || "an unknown OS";
-  },
-  searchString: function (data) {
-    for (var i=0;i<data.length;i++)  {
-      var dataString = data[i].string;
-      var dataProp = data[i].prop;
-      this.versionSearchString = data[i].versionSearch || data[i].identity;
-      if (dataString) {
-        if (dataString.indexOf(data[i].subString) != -1)
-          return data[i].identity;
-      }
-      else if (dataProp)
-        return data[i].identity;
-    }
-  },
-  searchVersion: function (dataString) {
-    var index = dataString.indexOf(this.versionSearchString);
-    if (index == -1) return;
-    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
-  },
-  dataBrowser: [{  string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
-                {  string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" },
-                {  string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" },
-                { prop: window.opera, identity: "Opera", versionSearch: "Version" },
-                {  string: navigator.vendor, subString: "iCab", identity: "iCab" },
-                {  string: navigator.vendor, subString: "KDE", identity: "Konqueror" },
-                {  string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },
-                {  string: navigator.vendor, subString: "Camino", identity: "Camino" },
-                // for newer Netscapes (6+)
-                { string: navigator.userAgent, subString: "Netscape", identity: "Netscape" },
-                {  string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" },
-                { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" },
-                // for older Netscapes (4-)
-                { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" }
-  ],
-  dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" },
-             { string: navigator.platform, subString: "Mac", identity: "Mac" },
-             { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" },
-             { string: navigator.platform, subString: "Linux", identity: "Linux" }
-  ]
-
-};
-</script>
-<script>
-//document.cursor = crosshair;
-
-
-BrowserDetect.init();
-
-function get_appropriate_ws_url()
-{
-  var pcol;
-  var u = document.URL;
-
-  /*
-   * We open the websocket encrypted if this page came on an
-   * https:// url itself, otherwise unencrypted
-   */
-
-  if (u.substring(0, 5) == "https") {
-    pcol = "wss://";
-    u = u.substr(8);
-  } else {
-    pcol = "ws://";
-    if (u.substring(0, 4) == "http")
-      u = u.substr(7);
-  }
-
-  u = u.split('/');
-
-  return pcol + u[0];
-}
-
-
-//document.getElementById("create_task").style.display = '';
-
-/* lws-task protocol */
-
-var down = 0;
-var no_last = 1;
-var last_x = 0, last_y = 0;
-var ctx;
-var socket_lm;
-var color = "#000000";
-var dragged = "";
-
-if (BrowserDetect.browser == "Firefox") {
-  socket_lm = new MozWebSocket(get_appropriate_ws_url(), "lws-task-protocol");
-} else {
-  socket_lm = new WebSocket(get_appropriate_ws_url(),  "lws-task-protocol");
-}
-
-try {
-  socket_lm.onopen = function() {
-    document.getElementById("wslm_status").style.backgroundColor = "#40ff40";
-    document.getElementById("wslm_status").textContent = " websocket connection opened ";
-    document.getElementById("box").style.display = "none";
-  } 
-
-  socket_lm.onmessage = function got_packet(msg) {
-    document.getElementById("wslm_lastmsg").textContent = msg.data;
-    
-    j = msg.data.split(';');
-    f = 0;
-    while (f < j.length - 1) {
-      i = j[f].split(' ');
-      if (i[0] == 'd') {
-        ctx.strokeStyle = i[1];
-        ctx.beginPath();
-        ctx.moveTo(+(i[2]), +(i[3]));
-        ctx.lineTo(+(i[4]), +(i[5]));
-        ctx.stroke();
-      }
-      else if (i[0] == 'c') {
-        ctx.strokeStyle = i[1];
-        ctx.beginPath();
-        ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true); 
-        ctx.stroke();
-      }
-      else if (i[0] == "del") {
-        var task = document.getElementById("task_" + i[1]);
-//        task.style.display = "none";
-        document.body.removeChild(task);
-      }
-      else if (i[0] == "move") {
-        var task = document.getElementById("task_" + i[1]);
-        task.style.left = i[2] + "px";
-        task.style.top = i[3] + "px";
-      }
-      else if (i[0] == "add") {
-        var task = document.createElement("div");
-        task.name = "task";
-	task.setAttribute("class", "task");
-        task.id = "task_" + i[1];
-
-        var taskText = document.createTextNode(i[2] + ": " + i[3] + " :" + task.id);
-        task.appendChild(taskText);
-
-        task.style.position = "absolute";
-        task.style.left = i[4] + "px";
-        task.style.top = i[5] + "px"; 
-	task.setAttribute("onMouseDown", "dragged = '" + i[1] + "';");
-
-        var dlButton = document.createElement("input");
-        dlButton.type = "button";
-        dlButton.value = "Remove";
-//        dlButton.onclick = "deleteTask(document.getElementById(" + task.id + ").id";
-        dlButton.setAttribute("onclick", "deleteTask(" + i[1] +")");
-        task.appendChild(dlButton);
-
-        document.body.appendChild(task);
-      }
-      f++;
-//      document.getElementById("box").style.top = i[3] + "px";
-//      document.getElementById("box").style.left = i[2] + "px";
-//      document.getElementById("box").style.display = "block";
-    }
-  }
-
-  socket_lm.onclose = function(){
-    document.getElementById("wslm_status").style.backgroundColor = "#ff4040";
-    document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
-  }
-} catch(exception) {
-  alert('<p>Error' + exception + '</p>');
-}
-
-var canvas = document.createElement('canvas');
-canvas.height = 600;
-canvas.width = 800;
-ctx = canvas.getContext("2d");
-
-document.addEventListener('mousemove', ev_mousemove, false);
-document.addEventListener('mouseup', ev_mouseup, false);
-/*
-canvas.addEventListener('mousedown', ev_mousedown, false);
-//cancas.addEventListener('dragend', ev_mousemove, false);
-*/
-
-offsetX = offsetY = 0;
-element = canvas;
-if (element.offsetParent) {
-  do {
-    offsetX += element.offsetLeft;
-    offsetY += element.offsetTop;
-  } while ((element = element.offsetParent));
-}
- 
-function update_color() {
-  color = document.getElementById("color").value;
-}
-
-function ev_mouseup(ev) {
-  dragged = '';
-}
-
-function ev_mousemove (ev)
-{
-  if(dragged == '') return;
-
-  var x, y;
-  x = ev.clientX;
-  y = ev.clientY;
-
-  socket_lm.send("move " + dragged + " " + x + " " + y);
-}
-
-function submit() {
-  var data = document.getElementById("input_data").value;
-  socket_lm.send(data);
-}
-
-function clear() {
-  document.getElementById("input_data").value = "";
-}
-
-function deleteTask(id) {
-  socket_lm.send("del " + id + ";");
-}
-
-</script>
+<script type="text/javascript" charset="utf-8" src="/proto.js"></script>
 
 </body>
 </html>
diff --git a/proto.js b/proto.js
new file mode 100644
index 0000000..2d5e9c0
--- /dev/null
+++ b/proto.js
@@ -0,0 +1,245 @@
+/* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set et sw=2 ts=2: */
+
+var BrowserDetect = {
+  init: function () {
+    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
+    this.version = this.searchVersion(navigator.userAgent)
+      || this.searchVersion(navigator.appVersion)
+      || "an unknown version";
+    this.OS = this.searchString(this.dataOS) || "an unknown OS";
+  },
+  searchString: function (data) {
+    for (var i=0;i<data.length;i++)  {
+      var dataString = data[i].string;
+      var dataProp = data[i].prop;
+      this.versionSearchString = data[i].versionSearch || data[i].identity;
+      if (dataString) {
+        if (dataString.indexOf(data[i].subString) != -1)
+          return data[i].identity;
+      }
+      else if (dataProp)
+        return data[i].identity;
+    }
+  },
+  searchVersion: function (dataString) {
+    var index = dataString.indexOf(this.versionSearchString);
+    if (index == -1) return;
+    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
+  },
+  dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" },
+                 { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/",
+                   identity: "OmniWeb" },
+                 { string: navigator.vendor, subString: "Apple", identity: "Safari",
+                   versionSearch: "Version" },
+                 { prop: window.opera, identity: "Opera", versionSearch: "Version" },
+                 { string: navigator.vendor, subString: "iCab", identity: "iCab" },
+                 { string: navigator.vendor, subString: "KDE", identity: "Konqueror" },
+                 { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" },
+                 { string: navigator.vendor, subString: "Camino", identity: "Camino" },
+                 // for newer Netscapes (6+)
+                 { string: navigator.userAgent, subString: "Netscape", identity: "Netscape" },
+                 { string: navigator.userAgent, subString: "MSIE", identity: "Explorer",
+                   versionSearch: "MSIE" },
+                 { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla",
+                   versionSearch: "rv" } ,
+                 // for older Netscapes (4-)
+                 { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape",
+                   versionSearch: "Mozilla" }
+  ],
+  dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" },
+             { string: navigator.platform, subString: "Mac", identity: "Mac" },
+             { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" },
+             { string: navigator.platform, subString: "Linux", identity: "Linux" }
+  ]
+
+};
+
+//document.cursor = crosshair;
+
+BrowserDetect.init();
+
+function get_appropriate_ws_url()
+{
+    var pcol;
+    var u = document.URL;
+
+  /*
+   * We open the websocket encrypted if this page came on an
+   * https:// url itself, otherwise unencrypted
+   */
+
+  if (u.substring(0, 5) == "https") {
+    pcol = "wss://";
+    u = u.substr(8);
+  } else {
+    pcol = "ws://";
+    if (u.substring(0, 4) == "http")
+      u = u.substr(7);
+  }
+
+  u = u.split('/');
+
+  return pcol + u[0];
+}
+
+
+//document.getElementById("create_task").style.display = '';
+
+/* lws-task protocol */
+
+var down = 0;
+var no_last = 1;
+var last_x = 0, last_y = 0;
+var ctx;
+var socket_lm;
+var color = "#000000";
+var dragged = "";
+
+if (BrowserDetect.browser == "Firefox") {
+  socket_lm = new MozWebSocket(get_appropriate_ws_url(), "lws-task-protocol");
+} else {
+  socket_lm = new WebSocket(get_appropriate_ws_url(),  "lws-task-protocol");
+}
+
+try {
+  socket_lm.onopen = function() {
+    document.getElementById("wslm_status").style.backgroundColor = "#40ff40";
+    document.getElementById("wslm_status").textContent = " websocket connection opened ";
+    document.getElementById("box").style.display = "none";
+  } 
+
+  socket_lm.onmessage = function got_packet(msg) {
+    document.getElementById("wslm_lastmsg").textContent = msg.data;
+    /*
+    m = '';
+    escape = false;
+    for(i = 0; i < msg.data.length; i++) {
+      if(msg.data[i] == '\\' && escape == false) {
+        escape = true;
+        continue;
+      }
+      if(escape) m += msg.data[i];
+      else {
+        if(m += msg.data[i])
+      }
+    }
+    j = m.split(';');
+    */
+    j = msg.data.split(';');
+    f = 0;
+    while (f < j.length - 1) {
+      i = j[f].split(' ');
+      if (i[0] == 'd') {
+        ctx.strokeStyle = i[1];
+        ctx.beginPath();
+        ctx.moveTo(+(i[2]), +(i[3]));
+        ctx.lineTo(+(i[4]), +(i[5]));
+        ctx.stroke();
+      }
+      else if (i[0] == 'c') {
+        ctx.strokeStyle = i[1];
+        ctx.beginPath();
+        ctx.arc(+(i[2]), +(i[3]), +(i[4]), 0, Math.PI*2, true); 
+        ctx.stroke();
+      }
+      else if (i[0] == "del") {
+        var task = document.getElementById("task_" + i[1]);
+//        task.style.display = "none";
+        document.body.removeChild(task);
+      }
+      else if (i[0] == "move") {
+        var task = document.getElementById("task_" + i[1]);
+        task.style.left = i[2] + "px";
+        task.style.top = i[3] + "px";
+      }
+      else if (i[0] == "add") {
+        var task = document.createElement("div");
+        task.name = "task";
+	task.setAttribute("class", "task");
+        task.id = "task_" + i[1];
+
+        var taskText = document.createTextNode(i[2] + ": " + i[3] + " :" + task.id);
+        task.appendChild(taskText);
+
+        task.style.position = "absolute";
+        task.style.left = i[4] + "px";
+        task.style.top = i[5] + "px"; 
+	task.setAttribute("onMouseDown", "dragged = '" + i[1] + "';");
+
+        var dlButton = document.createElement("input");
+        dlButton.type = "button";
+        dlButton.value = "Remove";
+//        dlButton.onclick = "deleteTask(document.getElementById(" + task.id + ").id";
+        dlButton.setAttribute("onclick", "deleteTask(" + i[1] +")");
+        task.appendChild(dlButton);
+
+        document.body.appendChild(task);
+      }
+      f++;
+//      document.getElementById("box").style.top = i[3] + "px";
+//      document.getElementById("box").style.left = i[2] + "px";
+//      document.getElementById("box").style.display = "block";
+    }
+  }
+
+  socket_lm.onclose = function(){
+    document.getElementById("wslm_status").style.backgroundColor = "#ff4040";
+    document.getElementById("wslm_status").textContent = " websocket connection CLOSED ";
+  }
+} catch(exception) {
+  alert('<p>Error' + exception + '</p>');
+}
+
+var canvas = document.createElement('canvas');
+canvas.height = 600;
+canvas.width = 800;
+ctx = canvas.getContext("2d");
+
+document.addEventListener('mousemove', ev_mousemove, false);
+document.addEventListener('mouseup', ev_mouseup, false);
+/*
+canvas.addEventListener('mousedown', ev_mousedown, false);
+//cancas.addEventListener('dragend', ev_mousemove, false);
+*/
+
+offsetX = offsetY = 0;
+element = canvas;
+if (element.offsetParent) {
+  do {
+    offsetX += element.offsetLeft;
+    offsetY += element.offsetTop;
+  } while ((element = element.offsetParent));
+}
+ 
+function update_color() {
+  color = document.getElementById("color").value;
+}
+
+function ev_mouseup(ev) {
+  dragged = '';
+}
+
+function ev_mousemove (ev)
+{
+  if(dragged == '') return;
+
+  var x, y;
+  x = ev.clientX;
+  y = ev.clientY;
+
+  socket_lm.send("move " + dragged + " " + x + " " + y);
+}
+
+function submit() {
+  var data = document.getElementById("input_data").value;
+  socket_lm.send(data);
+}
+
+function clear() {
+  document.getElementById("input_data").value = "";
+}
+
+function deleteTask(id) {
+  socket_lm.send("del " + id + ";");
+}
diff --git a/src/http.cc b/src/http.cc
index 3dff64e..c755442 100644
--- a/src/http.cc
+++ b/src/http.cc
@@ -51,6 +51,15 @@ int callback_http(struct libwebsocket_context * context,
 			break;
 		}
 
+    // script
+		if(in && strcmp((const char *)in, "/proto.js") == 0) {
+			if(libwebsockets_serve_http_file(wsi,
+                                       LOCAL_RESOURCE_PATH"/proto.js",
+                                       "text/javascript"))
+				fprintf(stderr, "Failed to send javascript\n");
+			break;
+		}
+
 
 		/* send the script... when it runs it'll start websockets */
 		if(libwebsockets_serve_http_file(wsi,