Improved commander interface.

scripts/commander.js

@@ -0,0 +1,21 @@
+function Commander(element,element_input)
+{
+  this.element = element;
+  this.element_input = element_input;
+  
+  this.show = function()
+  {
+    this.element.setAttribute('class','visible');
+    this.element_input.focus();
+  }
+  
+  this.hide = function()
+  {
+    this.element.setAttribute('class','hidden');
+  }
+  
+  this.validate = function()
+  {
+    console.log(this.element_input.value);
+  }
+}

scripts/keyboard.js

@@ -17,19 +17,30 @@ function Keyboard()
   this.listen = function(event)
   {
     if(this.is_locked === true){ return; }
+    
+    console.log(event.keyCode);
     switch (event.keyCode)
     {
+      case  9: this.key_tab(); break;
       case 13: this.key_enter(); break;
       case 32: this.key_space(); break;
       case 38: this.key_arrow_up(); break;
       case 40: this.key_arrow_down(); break;
       case 37: this.key_arrow_left(); break;
       case 39: this.key_arrow_right(); break;
+      case 186: this.key_colon(); break;
+      case  27: this.key_escape(); break;
     }
   };
 
+  this.key_tab = function()
+  {
+    return;
+  }
+
   this.key_enter = function()
   {
+    commander.validate();
   }
 
   this.key_space = function()
@@ -51,4 +62,14 @@ function Keyboard()
   this.key_arrow_right = function()
   {
   }
+  
+  this.key_colon = function()
+  {
+    commander.show();
+  }
+  
+  this.key_escape = function()
+  {
+    commander.hide();
+  }
 }

scripts/main.js

@@ -2,6 +2,7 @@
 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var brush = new Brush();
+var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
 
 canvas.addEventListener('mousemove', function(e) {
   brush.draw(e);
@@ -23,4 +24,7 @@ var mirror_test2 = new Pointer(new Position(0,10));
 mirror_test2.mirror = new Position(200,0);
 brush.add_pointer(mirror_test2);
 
-brush.add_pointer(new Pointer(new Position(0,10)));
+brush.add_pointer(new Pointer(new Position(0,10)));
+
+var keyboard = new Keyboard();
+document.onkeydown = function myFunction(){ keyboard.listen(event); };