diff options
Diffstat (limited to 'munia.html')
| -rw-r--r-- | munia.html | 284 |
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> |