Improved the Terminal's Hint

README.md

@@ -3,4 +3,25 @@
 Ronin is a web based drawing application and visual language. 
 The repository comes with a script that fires Ronin from within Localhost.
 Launch Ronin and press **:**(colon) to display the command prompt. 
-Enjoy
+Enjoy
+
+  this.collection = {};
+  this.collection["grid"] = {};
+  this.collection["grid"]["glyph"] = "@ 300x300; @ layer=background ; @ #A1A1A1 ; . 15x15 4,4 ; @ layer=main";
+  this.collection["grid"]["icon"] = "@ 360x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
+  this.collection["grid"]["rune"] = "@ 240x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
+
+  this.collection["custom"] = {};
+  this.collection["custom"]["default"] = "@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 2 ; / ../assets/logo.png 35x35 15,355";
+  this.collection["custom"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % grey ; % sharpen ; % sharpen ; % chromatic 2 ; @ layer=icon ; / ../assets/logo.png 35x35 15,355 "; 
+
+  this.collection["photo"] = {};
+  this.collection["photo"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % sharpen 0.2 ; % chromatic 2 ; % grey";
+
+  this.collection["brush"] = {};
+  this.collection["brush"]["radial6"] = "> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'";
+  this.collection["brush"]["radial8"] = "> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'";
+
+  this.collection["vector"] = {};
+  this.collection["vector"]["ronin"] = "+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black";
+  this.collection["vector"]["circle"] = "+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0";

links/main.css

@@ -13,8 +13,9 @@ canvas:hover { cursor: none;}
 #cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; pointer-events: none}
 
 #terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
-#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900;}
-#terminal hint { background:#cc0000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw;}
+#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color: #ff680a;}
+#terminal hint { background:#000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw; color:#777; font-size:10px; white-space: pre;}
+#terminal hint .name { font-family: "input_mono_regular"; color:#999; }
 #terminal logs { display: block;position: absolute;bottom:20px;width:100vw;color:white}
 #terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
 #terminal logs log .rune { color:white; }

scripts/core/init.js

@@ -34,10 +34,10 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
 ronin.terminal.query("~ "+ronin.timestamp());
 ronin.terminal.query("@ "+starting_canvas.render());
 ronin.terminal.query("@ layer=Main");
-ronin.terminal.query("> 0,0");
-ronin.terminal.query("> 1,1");
-ronin.terminal.query("> 2,2");
-ronin.terminal.query("> #ff0000");
+ronin.terminal.query("- 0,0");
+ronin.terminal.query("- 1,1");
+ronin.terminal.query("- 2,2");
+ronin.terminal.query("- #ff0000");
 ronin.terminal.query("~ Ready.");
 
 ronin.terminal.input_element.focus();

scripts/core/keyboard.js

@@ -44,7 +44,6 @@ function Keyboard()
 
     // Passive
     ronin.terminal.passive(ronin.terminal.input_element.value);
-    
     ronin.surface.update_widget();
   };
 
@@ -84,7 +83,9 @@ function Keyboard()
 
   this.key_escape = function()
   {
-    if(ronin.module){ ronin.module.key_escape(); }
+    for(var key in ronin.modules){
+      ronin.modules[key].key_escape();
+    }
   }
 
   this.key_delete = function()

scripts/modules/brush.js

@@ -49,12 +49,14 @@ function Brush(rune)
   {
     this.size -= this.size > 1 ? 1 : 0;
     ronin.surface.update_widget();
+    ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.size));
   }
 
   this.size_down = function()
   {
-     this.size += 1;
-     ronin.surface.update_widget();
+    this.size += 1;
+    ronin.surface.update_widget();
+    ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.size));
   }
   
   this.add_pointer = function(cmd)

scripts/modules/help.js

@@ -53,50 +53,4 @@ function Help(rune)
       ronin.terminal.log(new Log(this,lines[line]));
     }
   }
-  
-  //
-
-
-  this.view_units = function()
-  {
-    html = "<h1>Units</h1>\n\n";
-    html += "<ul>";
-    html += "<li>5 value: 5</li>\n";
-    html += "<li>5,7 position: 5x 7y</li>\n";
-    html += "<li>7x9 rect: 5w 7h</li>\n";
-    html += "<li>#ff0000 color: red</li>\n";
-    html += "<li>45' degree: 45/365</li>\n";
-    html += "<li>rate=10 variable: rate=10</li>\n";
-    html += "</ul>";
-    html += "\n";
-    
-    html += "\n";
-    return "<div class='cat'>"+html+"</div>";
-  }
-
-  this.view_presets = function()
-  {
-    html = "<h1>Presets</h1>\n\n";
-    for(var key in ronin.modules["-"].collection){
-      html += "<h2>"+key+"</h2><ul>";
-      for(var name in ronin.modules["-"].collection[key]){
-        html += "<li>"+name+"</li>"
-      }
-      html += "</ul>\n";
-    }
-
-    return "<div class='cat'>"+html+"</div>";
-  }
-
-  
-  function pad(s,length)
-  {
-    if(!s){ return s; }
-    
-    var new_string = s;
-    while(new_string.length < length){
-      new_string += " ";
-    }
-    return new_string;
-  }
 }

scripts/modules/overlay.js

@@ -111,6 +111,7 @@ function Overlay(rune)
   
   this.context = function()
   {
+    if(!this.layer){ this.create_layer(); }
     return this.layer.context();
   }
   
@@ -128,9 +129,7 @@ function Overlay(rune)
     ronin.overlay.clear();
     ronin.overlay.draw_pointer(position);
     this.live_draw_from = position;
-    commander.show();
-    commander.element_input.focus();
-    commander.element_input.value = "| "+this.live_draw_from.render();
+    ronin.terminal.input_element.value = "| "+this.live_draw_from.render();
   }
   
   this.mouse_move = function(position)
@@ -144,13 +143,15 @@ function Overlay(rune)
     rect.height = position.y - this.live_draw_from.y;
   
     ronin.overlay.draw_rect(this.live_draw_from,rect);
-    commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
+    ronin.terminal.input_element.value = "| "+this.live_draw_from.render()+" "+rect.render();
+
+    ronin.terminal.update_hint();
   }
   
   this.mouse_up = function(position)
   {
     this.live_draw_from = null;
-    commander.element_input.focus();
+    ronin.terminal.input_element.focus();
   }
   
   // Widget
@@ -159,4 +160,9 @@ function Overlay(rune)
   {
     return "Guide";
   }
+
+  this.key_escape = function()
+  {
+    if(this.layer){ this.layer.remove(this); }
+  }
 }

scripts/modules/preset.js

@@ -1,62 +0,0 @@
-function Preset(rune)
-{
-  Module.call(this,rune);
-
-  this.collection = {};
-  this.collection["grid"] = {};
-  this.collection["grid"]["glyph"] = "@ 300x300; @ layer=background ; @ #A1A1A1 ; . 15x15 4,4 ; @ layer=main";
-  this.collection["grid"]["icon"] = "@ 360x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
-  this.collection["grid"]["rune"] = "@ 240x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main";
-
-  this.collection["custom"] = {};
-  this.collection["custom"]["default"] = "@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 2 ; / ../assets/logo.png 35x35 15,355";
-  this.collection["custom"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % grey ; % sharpen ; % sharpen ; % chromatic 2 ; @ layer=icon ; / ../assets/logo.png 35x35 15,355 "; 
-
-  this.collection["photo"] = {};
-  this.collection["photo"]["black"] = "@ 720x405 #ff0000 ; / ../assets/todo.jpg 720x 0,-30 ; % sharpen 0.2 ; % chromatic 2 ; % grey";
-
-  this.collection["brush"] = {};
-  this.collection["brush"]["radial6"] = "> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'";
-  this.collection["brush"]["radial8"] = "> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'";
-
-  this.collection["vector"] = {};
-  this.collection["vector"]["ronin"] = "+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black";
-  this.collection["vector"]["circle"] = "+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0";
-
-  this.active = function(cmd)
-  {
-    var input = cmd.content.join(" ").trim().split(" ")[0];
-    var name  = cmd.content.join(" ").trim().split(" ")[1];
-    var value = this.collection[input][name];
-
-    if(this.collection[input] && this.collection[input][name]){
-      setTimeout(function(){ 
-        commander.element.setAttribute('class','visible');
-        commander.element_input.focus(); 
-        commander.element_input.value = value;
-      }, 100);
-    }
-  }
-
-  this.hint = function(cmd)
-  {
-    var input = cmd.content.join(" ").trim().split(" ")[0];
-    var name  = cmd.content.join(" ").trim().split(" ")[1];
-    var s = this.pad(cmd.content.join(" "));
-
-    if(this.collection[input] && this.collection[input][name]){
-      s += this.collection[input][name];
-    }
-    else if(this.collection[input]){
-      for(key in this.collection[input]) {
-        s += key+" ";
-      }
-    }
-    else{
-      for(key in this.collection) {
-        s += key+" ";
-      }
-    }
-    return s;
-  }
-}

scripts/modules/surface.layer.js

@@ -1,5 +1,6 @@
 function Layer(name,manager = null)
 {
+  this.rune = "@";
   this.name = name;
   this.manager = manager;
   this.element = document.createElement("canvas");
@@ -8,7 +9,7 @@ function Layer(name,manager = null)
 
   this.resize = function(rect)
   {
-    console.log("Resize "+this.name+" to "+rect.render());
+    ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render()));
 
     var pixels_rect   = new Rect(this.element.width+"x"+this.element.height);
     
@@ -27,7 +28,7 @@ function Layer(name,manager = null)
 
   this.remove = function(manager)
   {
-    console.log("Removing layer "+this.name);
+    ronin.terminal.log(new Log(this,"Removing layer "+this.name));
     manager.layer = null;
     ronin.surface.layers[this.name].element.outerHTML = "";
     delete ronin.surface.layers[this.name];
@@ -52,10 +53,9 @@ function Layer(name,manager = null)
 
   this.widget = function()
   {
-    var e_name = "";
-    e_name += this.name;
-
+    var e_name = this.name;
     var e_class = "";
+    
     if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
     if(this.manager != null){ e_class += "managed "; }
 

scripts/modules/terminal.js

@@ -27,11 +27,13 @@ function Terminal(rune)
     var cmd = new Command(content.substring(1).trim().split(" "));
     
     ronin.module = null;
+    this.hint_element.innerHTML = "";
     
     if(ronin.modules[key]){
       ronin.modules[key].passive(cmd);
       ronin.module = ronin.modules[key];
       ronin.cursor.set_mode(ronin.module);
+      this.update_hint(content);
     }
     else{
       ronin.cursor.set_mode(ronin.brush);
@@ -46,6 +48,8 @@ function Terminal(rune)
     return cmd;
   }
 
+  // Queue
+
   this.queue = [];
   
   this.query = function(input_str)
@@ -86,10 +90,41 @@ function Terminal(rune)
     }    
   }
 
+  //
+
   this.log = function(log)
   {
     this.logs_element.appendChild(log.element);
   }
+
+  // Hint
+
+  this.update_hint = function(content = this.input_element.value)
+  {
+    var padding = "";
+    for (var i = 0; i < this.input_element.value.length; i++) {
+      padding += " ";
+    }
+
+    if(content.indexOf(";") > -1){
+      var h = padding+" "+content.split(";").length+" commands";
+    }
+    else{
+      var h = padding+" <span class='name'>"+ronin.module.constructor.name+"</span> ";
+      for(param in ronin.module.parameters){
+        var name = new ronin.module.parameters[param]().constructor.name;
+        h += name+" ";
+      }
+    }
+
+    this.hint_element.innerHTML = h;
+  }
+
+
+  this.key_escape = function()
+  {
+    this.input_element.value = "";
+  }
 }
 
 // Log

scripts/modules/vector.js

@@ -89,6 +89,7 @@ function Vector(rune)
 
     ronin.terminal.input_element.value = "+ "+this.create_path();
     this.passive(ronin.terminal.cmd());
+    ronin.terminal.update_hint();
   }
   
   this.mouse_move = function(position)
@@ -97,6 +98,7 @@ function Vector(rune)
     ronin.terminal.input_element.value = "+ "+this.create_path();
     ronin.terminal.input_element.value += "L"+position.render();
     this.passive(ronin.terminal.cmd());
+    ronin.terminal.update_hint();
   }
   
   this.mouse_up = function(position)
@@ -126,6 +128,7 @@ function Vector(rune)
     ronin.terminal.input_element.value = "+ "+this.create_path();
     this.passive(ronin.terminal.cmd());
     this.last_pos = position;
+    ronin.terminal.update_hint();
   }
 
   this.key_escape = function()