summaryrefslogtreecommitdiff
path: root/munia.html
diff options
context:
space:
mode:
authorJonas Suhr Christensen <jsc@umbraculum.org>2012-02-23 10:34:23 +0100
committerJonas Suhr Christensen <jsc@umbraculum.org>2012-02-23 10:34:23 +0100
commit3cbbce9bbe2e63554d253bca8c313e27a16c9b12 (patch)
treebda12b8eb1164606baac9367fe720cc172c6a481 /munia.html
parent93890eace0b7a35cb597272e7449b1e0ee533a73 (diff)
Implemented add and remove.
Implemented task list on new connection.
Diffstat (limited to 'munia.html')
-rw-r--r--munia.html284
1 files changed, 284 insertions, 0 deletions
diff --git a/munia.html b/munia.html
new file mode 100644
index 0000000..74f5e75
--- /dev/null
+++ b/munia.html
@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>Munia</title>
+</head>
+<body id="body">
+<select id="color" onchange="update_color();">
+ <option value="#000000">Black</option>
+ <option value="#0000ff">Blue</option>
+ <option value="#20ff20">Green</option>
+ <option value="#802020">Dark Red</option>
+</select>
+<div id="wslm_status">Not initialized</div>
+<div id="wslm_lastmsg"></div>
+<div id="wslm_drawing"></div>
+<div id="box" style="position: absolute;">Hello World</div>
+<input type="text" id="input_data" value="Do magic here" onfocus="clear()"/>
+<input type="button" value="submit" onclick="submit()"/>
+</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-mirror 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 = 0;
+
+// alert(BrowserDetect.browser);
+if (BrowserDetect.browser == "Firefox") {
+ socket_lm = new MozWebSocket(get_appropriate_ws_url(), "lws-mirror-protocol");
+} else {
+ socket_lm = new WebSocket(get_appropriate_ws_url(), "lws-mirror-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) {
+// alert(msg.data);
+ 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") {
+// alert("Deleting task");
+ var task = document.getElementById("task_" + i[1]);
+// task.style.display = "none";
+ document.body.removeChild(task);
+ }
+ else if (i[0] == "add") {
+ var task = document.createElement("div");
+ task.name = "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.style.backgroundColor = "grey";
+ task.style.borderStyle= "solid";
+ task.style.borderWidth= "medium";
+ task.style.borderRadius= "15px";
+ task.style.padding = "4px";
+
+ 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.getElementById('wslm_drawing').appendChild(canvas);
+
+canvas.addEventListener('mousemove', ev_mousemove, false);
+canvas.addEventListener('mousedown', ev_mousedown, false);
+canvas.addEventListener('mouseup', ev_mouseup, 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_mousedown (ev) {
+ down = 1;
+
+ var x, y;
+
+ if (ev.offsetX) {
+ x = ev.offsetX;
+ y = ev.offsetY;
+ } else {
+ x = ev.layerX - offsetX;
+ y = ev.layerY - offsetY;
+ }
+}
+
+function ev_mouseup(ev) {
+ down = 0;
+ no_last = 1;
+}
+
+function ev_mousemove (ev) {
+ var x, y;
+
+ if (ev.offsetX) {
+ x = ev.offsetX;
+ y = ev.offsetY;
+ } else {
+ x = ev.layerX - offsetX;
+ y = ev.layerY - offsetY;
+
+ }
+
+ if (!down)
+ return;
+ if (no_last) {
+ no_last = 0;
+ last_x = x;
+ last_y = y;
+ return;
+ }
+ socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y + ';');
+
+ last_x = x;
+ last_y = y;
+}
+
+function submit() {
+ var data = document.getElementById("input_data").value;
+ alert(data);
+ socket_lm.send(data);
+}
+
+function clear() {
+ alert('asd');
+ document.getElementById("input_data").value = "";
+}
+
+function deleteTask(id) {
+// alert(id);
+ socket_lm.send("del " + id + ";");
+}
+
+</script>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-25 23:22:10 +0000