GUI improvements:

Make a beautiful tool menu.
Choose a standard font for the text tool: Arial.

client-data/board.css

@@ -43,16 +43,43 @@ html, body, svg {
 	margin:0;
 }
 
+#menu ul {
+	list-style-type:none;
+	padding:0;
+}
+
 #menu li {
 	width:150px;
-}
-
-#menu li a {
-	color:#111;
+	font-size:1.5em;
+	list-style-position:inside;
+	width:100%;
+	color:#335;
 	border:0;
+	text-decoration:none;
+	width:100%;
+	transition-duration:0.5s;
 }
 
-
 #menu li:hover {
-	text-shadow: 0px 0px 3px white;
+	color:black;
+	transition-duration:0.5s;
+}
+
+#menu li.curTool {
+	box-shadow: 0 0 2px white;
+	background-color:rgba(0,100,255,1);
+	text-shadow: 0px 0px 3px white;
+	transition-duration:0.5s;
+}
+
+#chooseColor {
+	width:5em;
+	border:1px solid black;
+	border-radius:3px;
+	color:black;
+	text-shadow: 0 0 5px white;
+}
+
+#chooseSize {
+	width:5em;
 }

client-data/board.html

@@ -28,9 +28,7 @@
 	<div id="menuItems">
 		<h3>Tools</h3>
 		<ul id="tools">
-			<li class="tool">
-				<a href="#">Tool template</a>
-			</li>
+			<li class="tool">Tool template</li>
 		</ul>
 
 		<h3>Configuration</h3>

client-data/js/board.js

@@ -11,13 +11,18 @@ Tools.HTML = {
 		var callback = function () {
 			Tools.change(toolName);
 		};
-		return this.template.add({
-			"a" : function (elem) {
+		return this.template.add(function (elem) {
 				elem.addEventListener("click", callback);
 				elem.id = "toolID-"+toolName;
 				return toolName;
 			}
-		});
+		);
+	},
+	changeTool : function(oldToolName, newToolName) {
+		var oldTool = document.getElementById("toolID-"+oldToolName);
+		var newTool = document.getElementById("toolID-"+newToolName);
+		if (oldTool) oldTool.classList.remove("curTool");
+		if (newTool) newTool.classList.add("curTool");
 	},
 	addStylesheet : function(href) {
 		//Adds a css stylesheet to the html or svg document
@@ -55,6 +60,11 @@ Tools.change = function (toolName){
 	if (! (toolName in Tools.list)) {
 		throw "Trying to select a tool that has never been added!";
 	}
+
+	//Update the GUI
+	var curToolName = (Tools.curTool) ? Tools.curTool.name : "";
+	Tools.HTML.changeTool(curToolName, toolName);
+
 	var newtool = Tools.list[toolName];
 
 	//There is not necessarily already a curTool

client-data/js/minitpl.js

@@ -1,3 +1,5 @@
+Minitpl = (function(){
+
 function Minitpl(elem, data) {
 	this.elem = (typeof(elem)==="string") ? document.querySelector(elem) : elem;
 	if (!elem) {
@@ -6,19 +8,31 @@ function Minitpl(elem, data) {
 	this.parent = this.elem.parentNode;
 	this.parent.removeChild(this.elem);
 }
+
+function transform (element, transformer) {
+	if (typeof(transformer)==="function") {
+		element.textContent = transformer(element);
+	} else {
+		element.textContent = transformer;
+	}
+}
+
 Minitpl.prototype.add = function(data) {
 	var newElem = this.elem.cloneNode(true);
-	for (var key in data) {
-		var val = data[key];
-		var matches = newElem.querySelectorAll(key);
-		for (var i=0; i<matches.length; i++) {
-			if (typeof(val)==="function") {
-				matches[i].textContent = val(matches[i]);
-			} else {
-				matches[i].textContent = val;
+	if (typeof (data) === "object") {  
+		for (var key in data) {
+			var matches = newElem.querySelectorAll(key);
+			for (var i=0; i<matches.length; i++) {
+				transform(matches[i], data[key]);
 			}
 		}
+	} else {
+		transform(newElem, data);
 	}
 	this.parent.appendChild(newElem);
 	return newElem;
 }
+
+return Minitpl;
+}());
+

client-data/tools/text/text.css

@@ -1,4 +1,5 @@
 span.t_textField {
 	position:absolute;
 	white-space: pre;
+	font-family:Arial;
 }

client-data/tools/text/text.js

@@ -38,7 +38,6 @@
 	
 	function fieldBlurHandler (evt) {
 		var field = evt.target;
-		console.log("blur", field);
 		if (field.textContent.trim() === "") {
 			Tools.drawAndSend({
 				"type" : "delete",