Restored some HTML-Debugging-tools

2025-03-19 09:50:14 +01:00
parent 7aef895462
commit f2b12301ee
10 changed files with 824 additions and 9 deletions
--- a/client/console.html
+++ b/client/console.html
@ -0,0 +1,150 @@
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/x-icon" href="favicon.ico">
+<style>
+.footer {
+    background: #ccc;
+    padding:5px;
+    overflow: auto;
+    height:30px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+</style>
+</head>
+<body>
+<div id="console" class=code>
+<br>
+<br>
+</div>
+<div class=footer>
+<form id="command_form" method="GET">
+<input type=input id=commandline size=80>
+</form>
+</div>
+<script type="text/javascript">
+
+function getJSON(url, successHandler, errorHandler) {
+	var xhr = typeof XMLHttpRequest != 'undefined'
+		? new XMLHttpRequest()
+		: new ActiveXObject('Microsoft.XMLHTTP');
+    console.log("fired JSON request", url)
+	xhr.open('get', url, true);
+	xhr.onreadystatechange = function() {
+	    console.log(xhr)
+		var status;
+		var data;
+		// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
+		if (xhr.readyState == 4) { // `DONE`
+			status = xhr.status;
+			if (status == 200) {
+				data = JSON.parse(xhr.responseText);
+				successHandler && successHandler(data);
+			} else {
+				errorHandler && errorHandler(status);
+			}
+		}
+	};
+	xhr.send();
+};
+
+var historyElement = document.getElementById("console")
+// copy query
+var evtSrc = new EventSource("http://localhost:5000/update");
+
+function htmlEscape(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+var our_id=""
+var oldtop = -1
+
+evtSrc.onmessage = function(e) {
+  var message = JSON.parse(e.data)
+  console.log(message)
+  if (message.type == "id") {
+    our_id = message.id
+    var test = "xxx"
+    getJSON(
+      "http://localhost:5000/console?id="+our_id,
+      function(message) { console.log('msg', message, test); },
+      function(status) { console.log('stat', status); }
+    );
+  } else if (message.type == 'command' || message.type == 'reply') {
+    pre = ""
+    post = ""
+    if (message.type == 'command') {
+      pre += "<font color='blue'><br>"
+      post += "</font>"
+    }
+    if (message.origin == 'self') {
+      pre += "<b>"
+      post = "</b>" + post
+    }
+    historyElement.innerHTML += pre + htmlEscape(message.line) + post + "<br>\n"
+  }
+  /*
+  var doc = document.documentElement
+  var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
+  var h = window.innerHeight || window.clientHeight
+  var d = document.body.scrollHeight
+  */
+  window.scrollTo(0,document.body.scrollHeight)
+  /*
+  var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
+  var h = window.innerHeight
+  var d = document.body.scrollHeight
+  console.log(oldtop + oldh, top + h)
+  */
+};
+
+evtSrc.onerror = function(e) {
+  historyElement.innerHTML += "connection lost"
+  evtSrc.close()
+};
+
+function do_command() {
+    celm = document.getElementById("commandline")
+    cmd = encodeURI(celm.value);
+    celm.value = ""
+    oldtop = -1
+    if (our_id != "") {
+      cmd += "&id=" + our_id
+    }
+    console.log("http://localhost:5000/sendcommand?command="+cmd)
+    getJSON(
+      "http://localhost:5000/sendcommand?command="+cmd,
+      function(message) { console.log('message', message); },
+      function(status) { console.log('status', status); }
+    );
+}
+
+function handle_submit(evt) {
+  evt.preventDefault()
+  do_command()
+}
+
+command_form = document.getElementById("command_form")
+if (command_form.addEventListener) {
+    command_form.addEventListener("submit", handle_submit, true);
+} else {
+    command_form.attachEvent('onsubmit', handle_submit);
+}
+
+window.onbeforeunload = closingCode;
+function closingCode(){
+  console.log("CLOSE")
+  evtSrc.close()
+  return null;
+}
+
+</script>
+</body>
+</html>
--- a/client/cssFiles/SEAWebClientStart.css
+++ b/client/cssFiles/SEAWebClientStart.css
@ -0,0 +1,190 @@
+@CHARSET "UTF-8";
+
+* {
+	box-sizing: border-box;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+meta, body {
+	font-family: sans-serif;
+	font-size: 16px;
+	width: 100vw;
+	height: 100vh;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+}
+
+/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
+/* PANEL */
+.start-panel {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	z-index: 1;
+	color: white;
+	background: #303030;
+	width: 100%;
+	height: 30px;
+	line-height: 30px;
+	padding-left: 30px;
+	text-align: center;
+}
+
+.start-text-wrapper {
+	height: 30px;
+}
+
+/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
+/* CONTENT */
+.start-content {
+	padding: 60px 40px 30px 40px;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+.start-row-links {
+	padding: 4px 0px 4px 0px;
+	width: 100%;
+	min-height: 24px;
+	display: block;
+	border-bottom: dotted darkgray 2px;
+	position: relative;
+}
+
+/* %%%%%%%%%% links %%%%%%%%%%*/
+.start-link {
+	transition: 0.4s;
+	cursor: pointer;
+	color: steelblue;
+	text-decoration: underline;
+}
+
+.start-link:focus {
+	color: orangered;
+	outline: none;
+}
+
+.start-link:hover {
+	color: gray;
+}
+
+.start-link:active {
+	color: orangered;
+}
+
+/* %%%%%%%%%% settings %%%%%%%%%%*/
+.start-settings {
+	color: white;
+	background: #303030;
+	margin-top: 30px;
+	padding: 10px 20px 10px 20px;
+	border-radius: 6px;
+}
+
+.start-settings-label {
+	border-bottom: solid darkgray 2px;
+}
+
+.start-settings-show-hide {
+	float: right;
+	color: lightgray;
+	cursor: pointer;
+}
+
+.start-settings-show-hide:focus {
+	color: orangered;
+	outline: none;
+}
+
+.start-settings-show-hide:hover {
+	color: gray;
+}
+
+.start-settings-show-hide:active {
+	color: orangered;
+}
+
+.start-settings-checkboxes {
+	display: none;
+}
+
+.start-row-checkboxes {
+	border-bottom: dotted darkgray 2px;
+	height: 28px;
+	padding-left: 4px;
+	padding-right: 2px;
+}
+
+.start-left {
+	min-height: 24px;
+	line-height: 24px;
+	float: left;
+}
+
+.start-right {
+	min-height: 24px;
+	line-height: 24px;
+	float: right;
+}
+
+/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
+/* CHECKBOX */
+.start-checkbox {
+	opacity: 0;
+	float: left;
+}
+
+.start-checkbox + .start-label {
+	position: relative;
+	cursor: pointer;
+	float: left;
+}
+
+.start-checkbox:focus+.start-label {
+	opacity: 0.8;
+}
+
+.start-checkbox+.start-label::before {
+	content: ' ';
+	position: absolute;
+	left: -24px;
+	top: 2px;
+	width: 20px;
+	height: 20px;
+	display: block;
+	background: lightgray;
+	border: 2px solid dimgray;
+}
+
+.start-checkbox+.start-label::after {
+	content: ' ';
+	position: absolute;
+	left: -19px;
+	top: 7px;
+	width: 14px;
+	height: 14px;
+	display: block;
+ 	z-index: 1;
+	background-color: dimgray;
+	-ms-transition: all .2s ease;
+	-webkit-transition: all .2s ease;
+	transition: all .3s ease;
+	-ms-transform: scale(0);
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	opacity: 0;
+}
+
+.start-checkbox:checked+.start-label::after {
+	-ms-transform: scale(1);
+	-webkit-transform: scale(1);
+	transform: scale(1);
+	opacity: 1;
+}
--- a/client/group.html
+++ b/client/group.html
@ -0,0 +1,149 @@
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body style='width:400px;'>
+<div id="event"></div>
+<script type="text/javascript">
+
+var blockElement = document.getElementById("event");
+// copy query
+query = window.location.search;
+if (query == "") {
+  query = "?path=main";
+}
+var evtSrc = new EventSource("http://localhost:5000/update");
+
+function getJSON(url, successHandler, errorHandler) {
+	var xhr = typeof XMLHttpRequest != 'undefined'
+		? new XMLHttpRequest()
+		: new ActiveXObject('Microsoft.XMLHTTP');
+    console.log("fired JSON request", url)
+	xhr.open('get', url, true);
+	xhr.onreadystatechange = function() {
+		var status;
+		var data;
+		// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
+		if (xhr.readyState == 4) { // `DONE`
+			status = xhr.status;
+			if (status == 200) {
+				data = JSON.parse(xhr.responseText);
+				successHandler && successHandler(data);
+			} else {
+				errorHandler && errorHandler(status);
+			}
+		}
+	};
+	xhr.send();
+};
+
+
+function htmlEscape(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+function draw(message) {
+    var blk = "<h3>" + message.title + "</h3><table>\n"
+    for (var i=0; i < message.components.length; i++) {
+      var component = message.components[i]
+      var name = component.name
+      var type = component.type
+      if ("title" in component) {
+        var title = component.title
+      } else {
+        var title = name
+      }
+      if (type == "group") {
+        blk += "<tr><td>link</td><td><a href='?path=" + encodeURI(message.path + "," + name) + "'>"+ title + "</a></td></tr>\n"
+      } else if (type == "rdonly") {
+        blk += "<tr><td >" + title + "</td><td id='"+ name +"' __ctype__=rdonly></td></tr>\n"
+      } else if (type == "input") {
+        blk += "<tr><td>" + title + "</td><td><input type=input id='"+ name +"' __ctype__=input></td></tr>\n"
+      } else if (type == "checkbox") {
+        blk += "<tr><td>" + title + "</td><td><input type=checkbox id='"+ name +"' __ctype__=checkbox></td></tr>\n"
+      } else if (type == "radio") {
+        blk += "<tr><td>" + title + "</td><td id='" + name + "' __ctype__=radio>\n"
+        for (var j = 0; j < component.buttons.length; j++) {
+          button = component.buttons[j]
+          var rbname = name + ":" + button.value 
+          if (j != 0) blk+= "<br>"
+          blk += "<input type=radio name='" + name + "' id='"+rbname+"' value='" + button.value + "'>" + button.title + "\n"
+        }
+        blk += "</td></tr>\n"
+      }
+    }
+    blk += "</table>\n"
+    blockElement.innerHTML = blk
+}
+
+function updateblock(id) {
+  getJSON("http://localhost:5000/updateblock"+query+"&id="+id,
+      function(message) { console.log(message); },
+      function(status) { console.log('stat', status); }
+  );
+}
+
+evtSrc.onmessage = function(e) {
+  var message = JSON.parse(e.data)
+  if (message.type == "id") {
+    var id = message.id
+    getJSON("http://localhost:5000/getblock"+query+"&id="+id,
+      function(message) { draw(message); updateblock(id); },
+      function(status) { console.log('stat', status); }
+    );
+  } else if (message.type == "draw") {
+    draw(message);
+  } else if (message.type == "update") {
+    for (var i=0; i < message.updates.length; i++) {
+      var component = message.updates[i]
+      var name = component.name
+      var value = component.value
+      var elm = document.getElementById(name)
+      if (!elm) continue
+      var type = elm.getAttribute("__ctype__")
+      if (type == "rdonly") {
+        elm.innerHTML = htmlEscape(value)
+      } else if (type == "input") {
+        elm.value = value
+      } else if (type == "checkbox") {
+        elm.checked = (value != 0) && (value != "0")
+      } else if (type == "radio") {
+        var elm = document.getElementById(name + ":" + value)
+        if (elm) {
+          elm.checked = true // this will uncheck all radio buttons with the same name
+        } else { // no element with this value: we have to go through all radio buttons
+          var elms = document.getElementsByName(name)
+          for (var j; j < elms.length; j++) {
+            if (elms[j].checked) {
+              elms[j].checked = false
+              break // we have found the victim, we can leave
+            }
+          }
+        }
+      }
+    }
+  } else if (message.type == "close") {
+    evtSrc.close()
+  }
+};
+
+evtSrc.onerror = function(e) {
+  blockElement.innerHTML = "connection lost"
+  evtSrc.close()
+};
+
+window.onbeforeunload = closingCode;
+function closingCode(){
+  console.log("CLOSE")
+  evtSrc.close()
+  return null;
+}
+
+</script>
+</body>
+</html>
--- a/client/jsFiles/SEAWebClientCommunication.js
+++ b/client/jsFiles/SEAWebClientCommunication.js
@ -360,17 +360,19 @@ function successHandler(s, message) {
            } else {
                // In the module-block a parameter was selected
                // -> write parameter-block to grid-element2
-                // If nColumns < 3, hide modules (grid-element1) and show parameters (grid-element2)

-                // Set flag showParams (-> if there are only three columns, hide modules, not parameters)
-                // See also SEAWebClientMain.js
-
-                showParams = 1;
                console.log ('col',nColumns);
                isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message));
-                if(nColumns < 2) {
-                    elements[1].style.display = "none";                 // show modules
-                    elements[2].style.display = "inline-block";         // hide parameters
+                if (nColumns < 2) {
+                    elements[1].style.display       = "none";                 // hide modules
+                    elements[2].style.display       = "inline-block";         // show parameters
+                } else if (nColumns == 2 || nColumns == 3) {
+                    elements[1].style.display       = "none";                 // hide modules
+                    elements[2].style.display       = "inline-block";         // show parameters
+                    elements[2].style.width         = "50vw";                 // 
+                    if (nRows > 1) {
+                        elements[2].style.height    = "50vh";                 // 
+                    }
                }
            }
        }
--- a/client/jsFiles/SEAWebClientMain.js
+++ b/client/jsFiles/SEAWebClientMain.js
@ -18,7 +18,6 @@ var writePermission = false;
 var menuMode = false;
 var panelOn = true;
 var firstState = 0;
-var showParams = 0;

 function Settings() {
    if (debug_main_daniel) {
--- a/client/jsFiles/SEAWebClientStart.js
+++ b/client/jsFiles/SEAWebClientStart.js
@ -0,0 +1,42 @@
+var showSettings = false;
+
+function toggleSettings() {
+	// Shows and hides settings.
+	
+    console.log("toggle settings");
+    if (showSettings) {
+        document.getElementsByClassName("start-settings-checkboxes")[0].style.display = "none";
+        document.getElementsByClassName("start-settings-show-hide")[0].innerHTML = "show";
+        showSettings = false;
+    } else {
+        document.getElementsByClassName("start-settings-checkboxes")[0].style.display = "inline";
+        document.getElementsByClassName("start-settings-show-hide")[0].innerHTML = "hide";
+        showSettings = true;
+    }
+}
+
+function followLink(destination) {
+	// Build query string and load new page.
+	
+    var checkboxes = document.getElementsByClassName("start-checkbox");
+    var query = "";
+    // Loop through settings-checkboxes.
+    for (var i = 0; i < checkboxes.length; i++) {
+      if (checkboxes[i].checked != checkboxes[i].defaultChecked) {
+        if (query === "") {
+            query = "?";
+        } else {
+            query += "&";
+        }
+        query += checkboxes[i].name + "=";
+        if (checkboxes[i].checked) {
+            query += "1";
+        } else {
+            query += "0";
+        }
+      }
+    }
+    destination += query;
+    console.log(destination);
+    window.location = destination;
+}
--- a/client/main.html
+++ b/client/main.html
@ -0,0 +1,68 @@
+<html>
+<body>
+<a href="/console.html" target=console>console</a>
+<a href="/group.html?path=/nv" target=group>group</a>
+<button onclick="action.value='getblock?path=/nv&id=*';">?getblock</button>
+<button onclick="action.value='updateblock?path=/nv&id=*';">?updateblock</button>
+<button onclick="action.value='console?id=*';">?console</button>
+<button onclick="action.value='gettime?time=-1800,0&id=*';">?gettime</button>
+<button onclick="action.value='getvars?time=-1800,0&id=*';">?getvars</button>
+<button onclick="action.value='graph?time=-1800,0&variables=t_mix&id=*';">?graph</button><br>
+<input type=text value="console?id=*" size=120 id=action>
+<button onclick='act();'>Send</button>
+<div id=result>
+</div><p>
+<textarea rows=50 cols=132 id=t>
+</textarea>
+<script type="text/javascript">
+
+var myid = 0
+var result = document.getElementById("result")
+var action = document.getElementById("action")
+
+function getJSON(url, successHandler, errorHandler) {
+	var xhr = typeof XMLHttpRequest != 'undefined'
+		? new XMLHttpRequest()
+		: new ActiveXObject('Microsoft.XMLHTTP');
+    console.log("fired JSON request", url)
+	xhr.open('get', url, true);
+	xhr.onreadystatechange = function() {
+		var status;
+		var data;
+		// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
+		if (xhr.readyState == 4) { // `DONE`
+			status = xhr.status;
+			if (status == 200) {
+				data = JSON.parse(xhr.responseText);
+				successHandler && successHandler(data);
+			} else {
+				errorHandler && errorHandler(status);
+			}
+		}
+	};
+	xhr.send();
+};
+
+function insert(link) {
+  action.value = link
+}
+
+function act() {
+  getJSON("/" + action.value.split("*").join(myid),
+    function(message) { result.innerHTML = JSON.stringify(message); },
+    function(status) { console.log(status); }
+  )
+}
+
+var evtSrc = new EventSource("/update");
+
+evtSrc.onmessage = function(e) {
+  var message = JSON.parse(e.data);
+  if (message.type == "id") {
+    myid = message.id
+  }
+  t.value = t.value + e.data + "\n";
+}
+</script>
+</body>
+</html>
--- a/client/plotex.html
+++ b/client/plotex.html
@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<script src="externalFiles/mjs_plot_0_3_n.js"></script>
+</head>
+<!body>
+<body onresize="draw_graphs()" onload="draw_graphs()">
+<canvas id="democanvas" width="600" height="400"></canvas>
+<script>
+//make a graph object
+time = [0,1,2,3,4,5];
+pot = [2,4,3,4,null,1];
+still = [9,8,7,6,5,4];
+var pressure_graph = mjs_plot.new_graph("pressure_graph","democanvas");
+//give it data
+pressure_graph.set_data([[time,pot],[time,still]]);
+pressure_graph.set_captions(['pot','still']);
+//set up some graphics styling (optional)
+pressure_graph.default_graphics_style.title = "Pressures";
+pressure_graph.default_graphics_style.x_axis_title = "Hours";
+pressure_graph.default_graphics_style.y_axis_title = "pressure mbar";
+pressure_graph.default_graphics_style.color_bg = '#fff';
+//plot the graph
+pressure_graph.reset();
+pressure_graph.mjs_plot();
+tim = 5;
+saved_time = 5;
+live = true;
+function addPoint() {
+  pot.push(pot[tim]+0.1);
+  still.push(still[tim]+0.1);
+  tim += 1;
+  time.push(tim);
+  if (pressure_graph.busy()) {
+    return;
+  }
+  if (live) {
+    if (saved_time > pressure_graph.graphics_style.x_auto_max) {
+      live = false;
+      console.log("live", live);
+      return;
+    }
+    if (tim > pressure_graph.graphics_style.x_auto_max) {
+      pressure_graph.graphics_style.x_scale_auto_max = false;
+      pressure_graph.graphics_style.x_manual_max = tim;
+    }
+  } else if (tim < pressure_graph.graphics_style.x_auto_max) {
+    live = true;
+    console.log("live", live);
+  }
+  saved_time = tim;
+  pressure_graph.set_data([[time,pot],[time,still]]);
+  pressure_graph.mjs_plot();
+}
+
+setInterval(addPoint, 1000);
+
+
+function draw_graphs(){
+  pressure_graph.canvas.width = window.innerWidth - 20;
+  pressure_graph.canvas.height = window.innerHeight - 20;
+  //tell the graph to plot
+  pressure_graph.mjs_plot();
+}
+
+</script>
+</body>
+
+</html>
--- a/client/select.html
+++ b/client/select.html
@ -0,0 +1,61 @@
+<html>
+<body>
+<table>
+<tr><td>
+<a href='http://samenv.psi.ch:8850/'>DMC</a>
+</td><td>
+<a href='http://samenv.psi.ch:8851/'>HRPT</a>
+</td><td>
+<a href='http://samenv.psi.ch:8852/'>ZEBRA</a>
+</td><td>
+<a href='http://samenv.psi.ch:8853/'>POLDI</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8854/'>FOCUS</a>
+</td><td>
+<a href='http://samenv.psi.ch:8855/'>TASP</a>
+</td><td>
+<a href='http://samenv.psi.ch:8856/'>RITA2</a>
+</td><td>
+<a href='http://samenv.psi.ch:8857/'>EIGER</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8854/'>SANS 1</a>
+</td><td>
+<a href='http://samenv.psi.ch:8855/'>SANS 2</a>
+</td><td>
+<a href='http://samenv.psi.ch:8856/'>AMOR</a>
+</td><td>
+<a href='http://samenv.psi.ch:8857/'>BOA</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8801/'>PREP1</a>
+</td><td>
+<a href='http://samenv.psi.ch:8802/'>PREP2</a>
+</td><td>
+<a href='http://samenv.psi.ch:8803/'>PREP3</a>
+</td><td>
+<a href='http://samenv.psi.ch:8804/'>PREP4</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8805/'>PREP5</a>
+</td><td>
+<a href='http://samenv.psi.ch:8806/'>PREP6</a>
+</td><td>
+<a href='http://samenv.psi.ch:8807/'>PREP7</a>
+</td><td>
+<a href='http://samenv.psi.ch:8808/'>PREP8</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8809/'>PREP9</a>
+</td><td>
+<a href='http://samenv.psi.ch:8800/'>PREP0</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8810/'>LAB0</a>
+</td><td>
+<a href='http://samenv.psi.ch:8811/'>LAB1</a>
+</td><td>
+<a href='http://samenv.psi.ch:8812/'>LAB2</a>
+</td><td>
+<a href='http://samenv.psi.ch:8813/'>LAB3</a>
+</td></tr><tr><td>
+<a href='http://samenv.psi.ch:8814/'>LAB4</a>
+</td></tr>
+</table>
+</body>
+</html>
--- a/client/touchtest.html
+++ b/client/touchtest.html
@ -0,0 +1,84 @@
+<html>
+<head>
+<meta name="viewport"
+	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style"
+	content="black-translucent" />
+</head>
+<body>
+<canvas id=inp width='300' height='500'  style="border:1px solid #000000;"></canvas>
+<div id=out style="width: 300px;"></div>
+<script>
+var canvas=document.getElementById("inp");
+var rect = canvas.getBoundingClientRect();
+console.log(rect);
+// Setup canvas and expose context via ctx variable
+ctx=canvas.getContext("2d");
+function strt(touch) {
+  return {i:touch.identifier,x:touch.pageX,y:touch.pageY}
+}
+function stre(event) {
+  if (event.touches) {
+    t = {};
+    for (var i=0; i<event.touches.length;i++) {
+      id=event.touches[i].identifier.toString();
+      t[id] = strt(event.touches[i]);
+    }
+    tc = [];
+    for (var i=0; i<event.changedTouches.length;i++) {
+      id=event.touches[i].identifier.toString();
+      t[id]['changed'] = 1;
+    }
+    for (var i=0; i<event.targetTouches.length;i++) {
+      id=event.touches[i].identifier.toString();
+      t[id]['target'] = 1;
+    }
+  }
+  return {type:event.type,x:event.pageX,y:event.pageY,t:t};
+}
+
+var styles=["rgba(0, 0, 200, 1)", "rgba(0, 255, 0, 1)",  "rgba(255, 0, 0, 1)"]
+canvas.addEventListener('touchstart', function(event) {
+  for (var i = 0; i < event.touches.length; i++) {
+    var touch = event.touches[i];
+    ctx.beginPath();
+    ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 5, 0, 2*Math.PI, true);
+	ctx.lineWidth = 2.0;
+	ctx.strokeStyle = styles[i];
+	ctx.stroke();
+  }
+}, false);
+canvas.addEventListener('touchmove', function(event) {
+  document.getElementById("out").innerHTML = JSON.stringify(stre(event));
+  event.preventDefault();
+  for (var i = 0; i < event.touches.length; i++) {
+    var touch = event.touches[i];
+    ctx.beginPath();
+    ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 1, 0, 2*Math.PI, true);
+	ctx.lineWidth = 2.0;
+	ctx.strokeStyle = styles[i];
+	ctx.stroke();
+  }
+}, false);
+canvas.addEventListener('touchend', function(event) {
+  for (var i = 0; i < event.changedTouches.length; i++) {
+    var touch = event.changedTouches[i];
+    ctx.beginPath();
+    ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 50, 0, 2*Math.PI, true);
+	ctx.lineWidth = 2.0;
+	ctx.strokeStyle = styles[i];
+	ctx.stroke();
+  }
+}, false);
+canvas.addEventListener('click', function(event) {
+    console.log(event);
+    ctx.beginPath();
+    ctx.arc(event.clientX-rect.left, event.clientY - rect.top, 2, 0, 2*Math.PI, true);
+	ctx.lineWidth = 2.0;
+	ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
+	ctx.stroke();
+}, false);
+
+</script>
+</body></html>