Massive update, incl. dynamic documentation.

README.md

@@ -17,6 +17,13 @@ python -m SimpleHTTPServer 8000   ; Start localhost
 http://localhost:8000/            ; Enjoy Ronin
 ```
 
+#Controls
+```
+CTRL+MOUSE1                       ; Draw guide
+SHIFT+MOUSE1                      ; Draw line
+MOUSE2                            ; Drag canvas
+```
+
 #Modules
 ##Canvas
 ```
@@ -27,16 +34,13 @@ http://localhost:8000/            ; Enjoy Ronin
 
 ##Save File
 ```
-$ new_name                        ; Create a new file with name
-$ 3                               ; Save to temporary storage, accessible with Load
-$ !                               ; Clear temporary storage
+$ new_name.jpg                    ; Create a new file with name
 ```
 
 ##Load File
 ```
 / dir/file_name.jpg 10,10 100x100 ; Load image, at 10,10 with size 100x100
 / dir/file_name.jpg 10,10 100x    ; Load image, at 10,10 with size 100w and auto height
-/ 3                               ; Load temporary storage id
 ```
 
 ##Brush(Pointers)
@@ -51,6 +55,7 @@ $ !                               ; Clear temporary storage
 ```
 
 ##Guides
+Hold the Control key to draw guides with the mouse.
 ```
 | 10,10 100x100                   ; Draw a guide
 | -100,0                          ; Draw a grid at every 100px
@@ -66,7 +71,7 @@ $ !                               ; Clear temporary storage
 
 ##Stroke*
 ```
-- 0,0 0,10 10,10 10,0 0,0         ; Draw a square
+_ 0,0 0,10 10,10 10,0 0,0         ; Draw a square
 ```
 
 ##Filters*
@@ -79,19 +84,6 @@ $ !                               ; Clear temporary storage
 : sharpen 0.5                     ; Sharpen image to 50%
 ```
 
-##Translate*
-```
-^ 0,10                            ; Translate 10px vertically
-^ 20,20 100x100 40,40             ; Translate a specific portion to a specific location
-^ -1280x800                       ; Flip image horizontally
-```
-
-##Zoom*
-```
-= 75                              ; Zoom factor of 75%
-= !                               ; Zoom 100%
-```
-
 #Units
 ```
 5                                 ; value:    5
@@ -100,15 +92,7 @@ $ !                               ; Clear temporary storage
 #ff0000                           ; color:    red
 0..5                              ; random:   0.0-5.0
 45'                               ; degree:   45/365
-rate:10                           ; variable: rate = 10
-"foo"                             ; string:   foo
-{40w}                             ; constant: 120px, 40% canvas width
-```
-
-#Constants
-```
-w                                 ; percentage of canvas width
-h                                 ; percentage of canvas height
+rate=10                           ; variable: rate = 10
 ```
 
 #Presets

index.html

@@ -9,6 +9,8 @@
     <script type="text/javascript" src="scripts/units/value.js"></script>
     <script type="text/javascript" src="scripts/units/filepath.js"></script>
     <script type="text/javascript" src="scripts/units/any.js"></script>
+    <script type="text/javascript" src="scripts/units/variable.js"></script>
+    <script type="text/javascript" src="scripts/units/range.js"></script>
     
     <script type="text/javascript" src="scripts/module.js"></script>
     <script type="text/javascript" src="scripts/modules/canvas.js"></script>
@@ -17,7 +19,9 @@
     <script type="text/javascript" src="scripts/modules/overlay.js"></script>
     <script type="text/javascript" src="scripts/modules/brush.js"></script>
     <script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
-    <script type="text/javascript" src="scripts/modules/file.js"></script>
+    <script type="text/javascript" src="scripts/modules/file.load.js"></script>
+    <script type="text/javascript" src="scripts/modules/file.save.js"></script>
+    <script type="text/javascript" src="scripts/modules/help.js"></script>
     
     <script type="text/javascript" src="scripts/modules/filter.js"></script>
     <script type="text/javascript" src="scripts/modules/filter.saturation.js"></script>

scripts/command.js

@@ -1,37 +1,6 @@
 function Command(content)
 {
-  this.content = raster(content);
-  
-  // Raster
-  
-  function raster(array) // @ {50w}x100
-  {
-    return array;
-    var str = array.join(" ");
-    
-    var m = str.replace(/(\{(.*)\})/g, function(a) {
-      var parts = a.split(/[{}]/);
-      for(var e = 0; e < parts.length; e++) {
-        if(str.indexOf("{"+parts[e]+"}") == -1){ continue; }
-        str = str.replace("{"+parts[e]+"}",converter(parts[e]));
-      }
-    });
-    return str.split(" ");
-  }
-  
-  function converter(str)
-  {
-    var unit  = str.charAt(str.length - 1);
-    var value = parseFloat(str.replace(unit,''));
-    
-    switch(unit) {
-      case "w":
-        return ronin.canvas.element.width * (value/100);
-      case "h":
-        return ronin.canvas.element.height * (value/100);
-    }
-    return str;
-  }
+  this.content = content;
   
   // Parser
   
@@ -109,7 +78,12 @@ function Command(content)
   this.variable = function(name)
   {
     for (i = 0; i < this.content.length; i++) {
-      if(this.content[i].indexOf(name+":") >= 0){ return Variable(this.content[i]); }
+      if(this.content[i].indexOf("=") >= 0){
+        var parts = this.content[i].split("=");
+        if(parts[0] == name){
+          return new Variable(parts[0],parts[1]);
+        }
+      }
     }
     return null;
   }

scripts/commander.js

@@ -51,43 +51,14 @@ function Commander(element,element_input)
     content[0] = content[0].slice(1);
     var cmd = new Command(content);
     
+    if(ronin.modules[key]){
+      ronin.modules[key].active(this.cmd);
+    }
+    
     switch(key) {
       case "~":
         this.always();
         break;
-      case "@":
-        ronin.canvas.active(cmd);
-        break;
-      case "$":
-        ronin.file.save(cmd);
-        break;
-      case "/":
-        ronin.file.active(cmd);
-        break;
-      case ">":
-        ronin.brush.active(cmd);
-        break;
-      case "|":
-        ronin.overlay.active(cmd);
-        break;
-      case "-":
-        ronin.stroke.active(cmd);
-        break;
-      case "^": // TODO
-        ronin.translate.active(cmd);
-        break;
-      case "=": // TODO
-        ronin.zoom.active(cmd);
-        break;
-      case "#": // TODO
-        ronin.layers.active(cmd);
-        break;
-      case ":":
-        ronin.filter.active(cmd);
-        break;
-      case "+":
-        ronin.vector.active(cmd);
-        break;
     }
     this.hide();
   }
@@ -99,42 +70,9 @@ function Commander(element,element_input)
     this.cmd = new Command(content);
     ronin.module = null;
     
-    switch(key) {
-      case "@":
-        ronin.canvas.passive(this.cmd);
-        ronin.module = ronin.canvas;
-        break;
-      case "/":
-        ronin.file.passive(this.cmd);
-        ronin.module = ronin.file;
-        break;
-      case ">":
-        ronin.brush.passive(this.cmd);
-        ronin.module = ronin.brush;
-        break;
-      case "|":
-        ronin.overlay.passive(this.cmd);
-        ronin.module = ronin.overlay;
-        break;
-      case "^": // TODO
-        ronin.translate.passive(this.cmd);
-        ronin.module = ronin.translate;
-        break;
-      case "=": // TODO
-        ronin.zoom.passive(this.cmd);
-        ronin.module = ronin.zoom;
-        break;
-      case "$":
-        ronin.module = ronin.file;
-        break;
-      case ":":
-        ronin.filter.passive(this.cmd);
-        ronin.module = ronin.filter;
-        break;
-      case "+":
-        ronin.vector.passive(this.cmd);
-        ronin.module = ronin.vector;
-        break;
+    if(ronin.modules[key]){
+      ronin.modules[key].passive(this.cmd);
+      ronin.module = ronin.modules[key];
     }
   }
 }

scripts/init.js

@@ -9,17 +9,21 @@ var commander = new Commander(document.getElementById("commander"),document.getE
 
 // Interactive
 
-document.addEventListener('mousemove', function(e)  {
-  if(e.which == 1){ ronin.brush.draw(e); }
-  if(e.which == 2){ ronin.drag(e); }
-}, false);
 document.addEventListener('mousedown', function(e)  {
-  if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
-  if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); }
+  // Canvas Live Draw
+  if(e.which == 1 && e.ctrlKey === true){ ronin.overlay.live_draw_start(e); }
+  else if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
+  else if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); }
+}, false);
+document.addEventListener('mousemove', function(e)  {
+  // Canvas Live Draw
+  if(e.which == 1 && e.ctrlKey === true){ ronin.overlay.live_draw(e); }
+  else if(e.which == 1){ ronin.brush.draw(e); }
+  else if(e.which == 2){ ronin.drag(e); }
 }, false);
 document.addEventListener('mouseup',   function(e)  {
   if(e.which == 1){ ronin.brush.draw_stop(e); }
-  if(e.which == 2){ ronin.drag_stop(e) }
+  else if(e.which == 2){ ronin.drag_stop(e) }
   document.getElementById("commander_input").focus();
 }, false);
 

scripts/module.js

@@ -1,6 +1,9 @@
-function Module()
+function Module(rune)
 {
+  this.rune = rune;
+  this.element = null;
   this.parameters = [];
+  this.variables  = [];
   
   this.active = function(cmd)
   {

scripts/modules/brush.js

@@ -1,6 +1,6 @@
-function Brush()
+function Brush(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Position,Rect,Angle,Color,Value,Bang];
   this.pointers = [new Pointer(new Position())];

scripts/modules/canvas.js

@@ -1,9 +1,8 @@
-function Canvas(element)
+function Canvas(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Rect,Position,Color,Bang];
-  this.element = element;
   
   this.active = function(cmd)
   {

scripts/modules/file.load.js

@@ -1,9 +1,8 @@
-function File()
+function FileLoad(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Filepath,Position,Rect,Bang];
-  this.storage = [];
   
   this.active = function(cmd)
   {
@@ -16,7 +15,7 @@ function File()
     var position = cmd.position() ? cmd.position() : new Position();
     
     base_image = new Image();
-    base_image.src = cmd.value() && this.storage[cmd.value().int] ? this.storage[cmd.value().int] : cmd.filepath().path;
+    base_image.src = cmd.filepath().path;
     base_image.src += '?' + new Date().getTime();
     base_image.crossOrigin = "Anonymous";
     
@@ -49,16 +48,4 @@ function File()
       ronin.overlay.draw(position);
     }
   }
-  
-  this.save = function(cmd)
-  {
-    if(cmd.value() && cmd.value().int > 0){
-      this.storage[cmd.value().int] = ronin.canvas.element.toDataURL("image/png");
-    }
-    else{
-      var d = ronin.canvas.element.toDataURL("image/png");
-      var w = window.open('about:blank','image from canvas');
-      w.document.write("<title>"+(cmd.content[0] ? cmd.content[0] : "Untitled")+"</title><img src='"+d+"' alt='from canvas'/>");
-    }
-  }
 }

scripts/modules/file.save.js

@@ -0,0 +1,19 @@
+function FileSave(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Any];
+  
+  this.active = function(cmd)
+  {
+    var n = cmd.any().string[1];
+    var f = cmd.variable("format");
+    var d = ronin.canvas.element.toDataURL("image/png");
+    var w = window.open('about:blank','image from canvas');
+    w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>");
+  }
+  
+  this.passive = function(cmd)
+  {
+  }
+}

scripts/modules/filter.js

@@ -1,6 +1,6 @@
-function Filter(element)
+function Filter(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Any];
   

scripts/modules/help.js

@@ -0,0 +1,47 @@
+function Help(rune)
+{
+  Module.call(this,rune);
+  
+  this.active = function(cmd)
+  {
+    var w = window.open('about:blank','image from canvas');
+    var html = this.view_modules();
+    w.document.write("<title>Help</title><style>body { font-size:11px;background:#555; color:#ccc; padding:50px}</style><pre>"+html+"</pre>");
+  }
+  
+  //
+  
+  this.view_modules = function()
+  {
+    html = "  Modules\n\n";
+    Object.keys(ronin.modules).forEach(function (key) {
+      html += key+" <b>"+ronin.modules[key].constructor.name+"</b>\n";
+      html += ""
+      for (i = 0; i < ronin.modules[key].parameters.length; i++) {
+        html += "  "+pad(ronin.modules[key].parameters[i].name,14);
+        html += pad(new ronin.modules[key].parameters[i]().example,14)+" \n";
+      }
+      for (i = 0; i < ronin.modules[key].variables.length; i++) {
+        html += "  "+pad(ronin.modules[key].variables[i].key,14)+"= ";
+        for (c = 0; c < ronin.modules[key].variables[i].candidates.length; c++) {
+          html += ronin.modules[key].variables[i].candidates[c]+" ";
+        }
+        html += "\n";
+      }
+      html += "\n"
+    });
+    
+    return html;
+  }
+  
+  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

@@ -1,9 +1,8 @@
-function Overlay(element)
+function Overlay(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Position,Rect];
-  this.element = element;
   
   // Module
   
@@ -102,6 +101,33 @@ function Overlay(element)
     this.context().closePath();
   }
   
+  // Live Draw(Ctrl)
+  
+  this.live_draw_from = null;
+  
+  this.live_draw_start = function(e)
+  {
+    this.clear();
+    
+    this.draw_pointer(ronin.position_in_canvas(e));
+    this.live_draw_from = ronin.position_in_canvas(e);
+    commander.show();
+    commander.element_input.focus();
+    commander.element_input.value = "| "+this.live_draw_from.render();
+  }
+  
+  this.live_draw = function(e)
+  {
+    this.clear();
+    
+    var rect = new Rect();
+    rect.width = ronin.position_in_canvas(e).x - this.live_draw_from.x;
+    rect.height = ronin.position_in_canvas(e).y - this.live_draw_from.y;
+  
+    this.draw_rect(this.live_draw_from,rect);
+    commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
+  }
+  
   this.resize = function(rect)
   {
     this.element.setAttribute('width',rect.width+"px");

scripts/modules/stroke.js

@@ -1,6 +1,6 @@
-function Stroke(element)
+function Stroke(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Any];
   

scripts/modules/vector.js

@@ -1,6 +1,6 @@
-function Vector()
+function Vector(rune)
 {
-  Module.call(this);
+  Module.call(this,rune);
   
   this.parameters = [Any,Position];
   

scripts/ronin.js

@@ -6,21 +6,30 @@ function Ronin()
   this.widget   = new Widget();
   this.surface  = null;
   
-  this.canvas   = new Canvas();
-  this.overlay  = new Overlay();
-  this.brush    = new Brush();
-  this.file     = new File();
-  this.filter   = new Filter();
-  this.stroke   = new Stroke();
-  this.vector   = new Vector();
+  this.canvas   = new Canvas("@");
+  this.overlay  = new Overlay("|");
+  this.brush    = new Brush(">");
+  this.fileload = new FileLoad("/");
+  this.filesave = new FileSave("$");
+  this.filter   = new Filter("%");
+  this.stroke   = new Stroke("_");
+  this.vector   = new Vector("+");
+  this.help     = new Help("?");
   
-  this.modules["@"] = this.canvas;
-  this.modules["|"] = this.overlay;
-  this.modules[">"] = this.brush;
-  this.modules["/"] = this.file;
-  this.modules[":"] = this.filter;
-  this.modules["-"] = this.stroke;
-  this.modules["+"] = this.vector;
+  this.modules[this.canvas.rune] = this.canvas;
+  this.modules[this.overlay.rune] = this.overlay;
+  this.modules[this.brush.rune] = this.brush;
+  this.modules[this.fileload.rune] = this.fileload;
+  this.modules[this.filesave.rune] = this.filesave;
+  this.modules[this.filter.rune] = this.filter;
+  this.modules[this.stroke.rune] = this.stroke;
+  this.modules[this.vector.rune] = this.vector;
+  this.modules[this.help.rune] = this.help;
+  
+  this.position_in_canvas = function(e)
+  {
+    return new Position(e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top));
+  }
   
   // Drag
   
@@ -39,7 +48,7 @@ function Ronin()
     this.surface.style.left = this.surface.style.left ? parseInt(this.surface.style.left) - offset_x : offset_x;
     var offset_y = this.drag_from.y - e.clientY;
     this.surface.style.top = this.surface.style.top ? parseInt(this.surface.style.top) - offset_y : offset_y;
-    this.drag_from = new Position(e.clientX,e.clientY);
+    this.drag_from = position_in_canvas(e);
   }
   
   this.drag_stop = function(e)

scripts/unit.js

@@ -1,5 +1,7 @@
 function Unit()
 {
+  this.example = "unknown";
+  
   this.render = function()
   {
     return "[MISSING]";

scripts/units/angle.js

@@ -1,7 +1,9 @@
-function Angle(angle_str)
+function Angle(angle_str = "0'")
 {
   Unit.call(this);
   
+  this.example = "45'";
+  
   this.degrees = parseFloat(angle_str.replace('\'',''));
   
   this.render = function()

scripts/units/any.js

@@ -2,6 +2,7 @@ function Any(str)
 {
   Unit.call(this);
   
+  this.example = "";
   this.string = str;
   
   this.render = function()

scripts/units/bang.js

@@ -2,6 +2,8 @@ function Bang()
 {
   Unit.call(this);
   
+  this.example = "";
+  
   this.render = function()
   {
     return "BANG";

scripts/units/color.js

@@ -2,6 +2,7 @@ function Color(hex = '#000000')
 {
   Unit.call(this);
   
+  this.example = "#ff0000";
   this.hex = hex;
 
   this.rgb = function()

scripts/units/filepath.js

@@ -2,6 +2,7 @@ function Filepath(path_str)
 {
   Unit.call(this);
   
+  this.example = "assets/demo.png";
   this.path = path_str;
   
   this.render = function()

scripts/units/position.js

@@ -2,6 +2,7 @@ function Position(position_str = "0,0",y = null)
 {
   Unit.call(this);
   
+  this.example = "100,150";
   this.position_str = position_str;
   
   this.x = y ? position_str : parseFloat(this.position_str.split(",")[0]);

scripts/units/range.js

@@ -0,0 +1,15 @@
+function Range(range_str)
+{
+  Unit.call(this);
+  
+  this.example = "10..50";
+  this.range_str = range_str;
+  
+  this.from = parseFloat(this.range_str.split("..")[0]);
+  this.to = parseFloat(this.range_str.split("..")[1]);
+  
+  this.render = function()
+  {
+    return this.from+".."+this.to;
+  }
+}

scripts/units/rect.js

@@ -2,6 +2,7 @@ function Rect(rect_str)
 {
   Unit.call(this);
   
+  this.example = "200x300";
   this.rect_str = rect_str;
   
   this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0;

scripts/units/value.js

@@ -2,6 +2,7 @@ function Value(value_str)
 {
   Unit.call(this);
   
+  this.example = "20";
   this.value = value_str;
   this.float = parseFloat(this.value);
   this.int = parseInt(this.value);

scripts/units/variable.js

@@ -0,0 +1,13 @@
+function Variable(key,value)
+{
+  Unit.call(this);
+  
+  this.candidates = [];
+  this.key = key;
+  this.value = value;
+  
+  this.render = function()
+  {
+    return this.key+"="+this.value;
+  }
+}