Improved Source and Terminal queue

links/main.css

@@ -26,5 +26,5 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 #terminal #hint .setting { display: inline-block; color:#fff; font-style: italic }
 
 #modal { position: fixed; bottom:80px; right:20px; width:100px; height:100px; background:#111; border-radius:3px; overflow:hidden; display: block}
-#modal.image img { display: block; max-width: 100%}
+#modal.image img { display: block; max-height: 100%}
 #modal.hidden { display: none }

presets/default.rin

@@ -1,6 +1,7 @@
 frame.resize 300x300 
 frame.select main 
 layer.fill #ff0000 
+render.stencil 45' #000000
 path:line_width 43
 path:line_color #EEEEEE
 path:line_cap square
@@ -10,6 +11,7 @@ type:color white
 type.write 38,262 "RONIN"
 type.write 38,252 "B08"
 brush:color #000000
-brush:size 4
+brush:size 2
 path:line_width 20
 path:line_color #999999
+brush.add_pointer 0,0 #000000 2

presets/template.rabbits.rin

@@ -1,5 +0,0 @@
-~ Rabbits
-
-frame.resize 640x400
-source.load /08.jpg x400
-source.load /hundred.rabbits.logo.white.svg 70x70 0,530

presets/template_rabbits.rin

@@ -0,0 +1,8 @@
+~ Rabbits
+
+frame.resize 795x450
+source.load /01.jpg x450
+source.load /hundred.rabbits.logo.white.svg 70x70 0,380
+source:format jpg
+source:quality 0.9
+source.save

scripts/core/command.js

@@ -13,14 +13,14 @@ function Command(content)
   {
     var module_name = null;
 
-    if(content.indexOf(".") > -1){
-      module_name = content.split(" ")[0].split(".")[0]
+    if(this.parts[0].indexOf(".") > -1){
+      module_name = this.parts[0].split(" ")[0].split(".")[0]
     }
-    else if(content.indexOf(":") > -1){
-      module_name = content.split(" ")[0].split(":")[0]
+    else if(this.parts[0].indexOf(":") > -1){
+      module_name = this.parts[0].split(" ")[0].split(":")[0]
     }
     else{
-      module_name = content.split(" ")[0];
+      module_name = this.parts[0].split(" ")[0];
     }
     return ronin.modules[module_name] ? ronin.modules[module_name] : null;
   }
@@ -36,8 +36,11 @@ function Command(content)
 
   this.setting = function()
   {
+    var content = this.content;
     var module = this.module();
-    if(!module || content.indexOf(":") < 0){ return null; }
+
+    if(!module){ return null;  }
+    if(content.indexOf(":") < 0){ return null; }
 
     var setting_name = this.parts[0].split(":")[1];
     return module.settings[setting_name] ? setting_name : null;

scripts/core/ronin.js

@@ -29,7 +29,7 @@ function Ronin()
 
   this.modules[this.source.name]   = this.source;
   this.modules[this.render.name]   = this.render;
-  // this.modules[this.eye.constructor.name]      = this.eye;
+  this.modules[this.eye.name]      = this.eye;
   this.modules[this.magnet.name]   = this.magnet;
 
   this.modules[this.cursor.name]   = this.cursor;

scripts/filters/chromatic.js

@@ -10,10 +10,7 @@ function Filter_Chromatic()
   {
     var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width,ronin.frame.settings["size"].height);
     var value = cmd.value() ? cmd.value().float : 5;
-
-    ronin.overlay.clear();
     this.draw(this.context(),value,position);
-    ronin.overlay.clear();
   }
 
   this.preview = function(cmd)

scripts/filters/filter.js

@@ -80,4 +80,14 @@ function Filter()
   {
     return ronin.frame.context().getImageData(0,0,ronin.frame.settings["size"].width * 2,ronin.frame.settings["size"].height * 2);
   }
+
+  this.hint = function()
+  {
+    var html = "";
+
+    for(id in this.parameters){
+      html += this.parameters[id]+" ";
+    }
+    return html;
+  }
 }

scripts/filters/stencil.js

@@ -6,10 +6,10 @@ function Filter_Stencil()
   this.render = function(cmd)
   {
     var angle = cmd.angle() ? cmd.angle().degrees : 20;
-    var color = cmd.color() ? cmd.color().hex : "#ffffff";
+    var color = cmd.color() ? cmd.color().hex : "#000000";
 
-    ronin.frame.active_layer.clear();
     this.draw(ronin.frame.context(),angle,color);
+    if(ronin.render.layer){ ronin.render.layer.remove(this); }
 
     return 1, "ok";
   }
@@ -17,9 +17,9 @@ function Filter_Stencil()
   this.preview = function(cmd)
   {
     var angle = cmd.angle() ? cmd.angle().degrees : 20;
-    var color = cmd.color() ? cmd.color().hex : "#ffffff";
+    var color = cmd.color() ? cmd.color().hex : "#000000";
 
-    ronin.render.layer.clear();
+    ronin.render.get_layer().clear();
     this.draw(ronin.render.layer.context(),angle,color);
   }
 

scripts/modules/brush.js

@@ -3,17 +3,19 @@ function Brush(rune)
   Module.call(this,rune);
   
   this.parameters = [];
-  this.settings  = {color:"#000","size":2};
+  this.settings  = {color:"#000000","size":2};
   this.pointers = [new Pointer(new Position("0,0"))];
 
-  this.add_method(new Method("add_pointer",["Position"]));
+  this.add_method(new Method("add_pointer",["Position","Color","Scale"]));
 
-  this.add_pointer = function(params, preview = false)
+  this.add_pointer = function(cmd, preview = false)
   {
     if(preview){ return; }
 
     var pointer = new Pointer();
-    pointer.offset = params.position() ? params.position() : new Position("0,0");
+    pointer.offset = cmd.position() ? cmd.position() : new Position("0,0");
+    pointer.color = cmd.color().hex ? cmd.color().hex : this.settings.color;
+    pointer.scale = cmd.value().float ? cmd.value().float : 1;
     this.pointers.push(pointer);
 
     ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset.render()));
@@ -23,12 +25,12 @@ function Brush(rune)
 
   this.size_up = function()
   {
-    this.settings["size"] += 1; 
+    this.settings["size"] = parseInt(this.settings["size"]) + 1; 
   }
 
   this.size_down = function()
   {
-    this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0;
+    this.settings["size"] -= parseInt(this.settings["size"]) > 1 ? 1 : 0;
   }
 
   // Eraser

scripts/modules/brush.pointer.js

@@ -1,6 +1,9 @@
-function Pointer(offset = new Position())
+function Pointer(offset = new Position(), color = new Color().hex, scale = 1)
 {
   this.offset = offset;
+  this.color = color;
+  this.scale = scale;
+
   this.mirror = null;
   this.position_prev = null;
   this.angle = null;
@@ -16,6 +19,8 @@ function Pointer(offset = new Position())
     ratio = ratio > 1 ? 1 : ratio;
     var target = parseFloat(ronin.brush.settings["size"]) * ratio;
 
+    target = target * this.scale;
+
     if(this.actual_thickness < target){ this.actual_thickness += 0.4; }
     if(this.actual_thickness > target){ this.actual_thickness -= 0.4; }
 
@@ -42,11 +47,9 @@ function Pointer(offset = new Position())
     ronin.frame.context().moveTo(position_prev.x,position_prev.y);
 
     //Choose direct line or curve line based on how many samples available
-    if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){
+    if(this.position_prev.length > 1 && position.distance_to(position_prev) > 5){
 
-      var d =
-      position.distance_to(position_prev)/
-      position_prev.distance_to(this.position_prev[1]);
+      var d = position.distance_to(position_prev)/position_prev.distance_to(this.position_prev[1]);
 
       //caluclate a control point for the quad curve
       var ppx = position_prev.x - (this.position_prev[1].x - position_prev.x);
@@ -64,7 +67,7 @@ function Pointer(offset = new Position())
 
     ronin.frame.context().lineCap="round";
     ronin.frame.context().lineWidth = this.thickness();
-    ronin.frame.context().strokeStyle = ronin.brush.settings.color;
+    ronin.frame.context().strokeStyle = this.color;
     ronin.frame.context().stroke();
     ronin.frame.context().closePath();
 

scripts/modules/cursor.js

@@ -2,7 +2,7 @@ function Cursor(rune)
 {
   Module.call(this,rune);
   
-  this.settings = {color: "#999999"};
+  this.settings = {color: "#000000",color_alt: "#fffffff"};
 
   this.mode = null;
   this.position = new Position();
@@ -98,7 +98,6 @@ function Cursor(rune)
     this.mode.mouse_from = null;
   }
 
-
   this.draw_pointer_arrow = function(position,size = 1)
   {
     if(!this.layer){ this.create_layer(); }
@@ -107,10 +106,9 @@ function Cursor(rune)
 
     this.layer.context().beginPath();
     
-    this.layer.context().moveTo(position.x,position.y);
-    this.layer.context().lineTo(position.x + 5,position.y);
-    this.layer.context().moveTo(position.x,position.y);
-    this.layer.context().lineTo(position.x,position.y + 5);
+    this.layer.context().moveTo(position.x + 10,position.y);
+    this.layer.context().lineTo(position.x,position.y);
+    this.layer.context().lineTo(position.x,position.y + 10);
     
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;
@@ -128,9 +126,7 @@ function Cursor(rune)
     this.pointer_last = this.pointer_last ? this.pointer_last : position;
 
     this.layer.context().beginPath();
-    this.layer.context().moveTo(this.pointer_last.x,this.pointer_last.y);
-    this.layer.context().lineTo(position.x,position.y);
-    this.layer.context().lineCap="round";
+    this.layer.context().arc(position.x, position.y, 0.5, 0, 2 * Math.PI, false);
     this.layer.context().lineWidth = 1;
     this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
@@ -144,7 +140,7 @@ function Cursor(rune)
     this.layer.context().closePath();
 
     this.layer.context().beginPath();
-    this.layer.context().arc(position.x, position.y, (size/2)+1, 0, 2 * Math.PI, false);
+    this.layer.context().arc(position.x, position.y, (size/2)+2, 0, 2 * Math.PI, false);
     this.layer.context().lineWidth = 1;
     this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
@@ -161,12 +157,18 @@ function Cursor(rune)
 
     this.layer.context().beginPath();
 
-    this.layer.context().moveTo(position.x,position.y - 3);
-    this.layer.context().lineTo(position.x,position.y + 3);
-    this.layer.context().moveTo(position.x - 2,position.y - 3);
-    this.layer.context().lineTo(position.x - 2,position.y + 3);
-    this.layer.context().moveTo(position.x + 2,position.y - 3);
-    this.layer.context().lineTo(position.x + 2,position.y + 3);
+    var radius = 5;
+    
+    this.layer.context().moveTo(position.x,position.y - radius);
+    this.layer.context().lineTo(position.x,position.y + radius);
+    this.layer.context().moveTo(position.x - radius/2,position.y - radius);
+    this.layer.context().lineTo(position.x - radius/2,position.y + radius);
+    this.layer.context().moveTo(position.x + radius/2,position.y - radius);
+    this.layer.context().lineTo(position.x + radius/2,position.y + radius);
+    this.layer.context().moveTo(position.x + radius,position.y - radius);
+    this.layer.context().lineTo(position.x + radius,position.y + radius);
+    this.layer.context().moveTo(position.x - radius,position.y - radius);
+    this.layer.context().lineTo(position.x - radius,position.y + radius);
     
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;

scripts/modules/frame.js

@@ -136,12 +136,19 @@ function Frame(rune)
   
   this.mouse_down = function(position)
   {
-    ronin.overlay.get_layer(true).clear();
-    ronin.overlay.draw_pointer(position);
+    ronin.overlay.draw(position);
+  }
+  this.mouse_move = function(position,rect)
+  {
+    ronin.overlay.draw(this.mouse_from,rect);
   }
   
   this.mouse_up = function(position,rect)
   {
+    ronin.overlay.draw(this.mouse_from,rect)+" "+rect.render();
+
+    var line = "frame.resize "+this.mouse_from.render()+" "+rect.render();
+    ronin.terminal.update(line);
   }
 
   this.widget = function()

scripts/modules/module.js

@@ -6,6 +6,7 @@ function Module(rune)
   this.settings  = {};
   this.methods  = {};
   this.layer = null;
+  this.is_locked = false;
 
   this.docs = "Missing documentation.";
   
@@ -76,6 +77,16 @@ function Module(rune)
     return "";
   }
 
+  this.lock = function()
+  {
+    ronin.terminal.is_locked = true;
+  }
+
+  this.unlock = function()
+  {
+    ronin.terminal.is_locked = false;
+  }
+
   // Mouse
 
   this.mouse_mode = function()

scripts/modules/overlay.js

@@ -14,6 +14,8 @@ function Overlay(rune)
     
     if(!position){ position = new Position("0,0"); }
 
+    this.layer.clear();
+    
     if(rect){
       this.draw_rect(position,rect);
     }
@@ -65,7 +67,7 @@ function Overlay(rune)
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
-    this.context().strokeStyle = this.color.hex;
+    this.context().strokeStyle = ronin.cursor.color;
     this.context().stroke();
     this.context().closePath();
   }
@@ -85,7 +87,7 @@ function Overlay(rune)
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
-    this.context().strokeStyle = this.color.hex;
+    this.context().strokeStyle = ronin.cursor.color;
     this.context().stroke();
     this.context().closePath();
   }
@@ -99,7 +101,7 @@ function Overlay(rune)
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
-    this.context().strokeStyle = this.color.hex;
+    this.context().strokeStyle = ronin.cursor.color;
     this.context().stroke();
     this.context().closePath();
   }
@@ -129,7 +131,7 @@ function Overlay(rune)
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
-    this.context().strokeStyle = this.color.hex;
+    this.context().strokeStyle = ronin.cursor.color;
     this.context().stroke();
     this.context().closePath();
   }
@@ -143,7 +145,7 @@ function Overlay(rune)
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
-    this.context().strokeStyle = this.color.hex;
+    this.context().strokeStyle = ronin.cursor.color;
     this.context().stroke();
     this.context().closePath();
   }
@@ -157,7 +159,7 @@ function Overlay(rune)
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
-    this.context().strokeStyle = this.color.hex;
+    this.context().strokeStyle = ronin.cursor.color;
     this.context().stroke();
     this.context().closePath();
   }

scripts/modules/render.js

@@ -2,39 +2,52 @@ function Render(rune)
 {
   Module.call(this,rune);
   
-  this.collection = {};
+  this.filters = {};
 
-  this.collection["balance"] = new Filter_Balance();
-  this.collection["grey"] = new Filter_Grey();
-  this.collection["stencil"] = new Filter_Stencil();
-  this.collection["invert"] = new Filter_Invert();
-  this.collection["chromatic"] = new Filter_Chromatic();
-  this.collection["sharpen"] = new Filter_Sharpen();
-  this.collection["saturate"] = new Filter_Saturate();
-  this.collection["contrast"] = new Filter_Contrast();
+  this.add_method(new Method("balance",["Position","Color","Scale"]));
+  this.add_method(new Method("stencil",["Position","Color","Scale"]));
+  this.add_method(new Method("chromatic",["Position","Color","Scale"]));
 
-  this.hint = function(content)
+  this.filters["balance"] = new Filter_Balance();
+  this.filters["grey"] = new Filter_Grey();
+  this.filters["stencil"] = new Filter_Stencil();
+  this.filters["invert"] = new Filter_Invert();
+  this.filters["chromatic"] = new Filter_Chromatic();
+  this.filters["sharpen"] = new Filter_Sharpen();
+  this.filters["saturate"] = new Filter_Saturate();
+  this.filters["contrast"] = new Filter_Contrast();
+
+  this.stencil = function(cmd,preview = false)
   {
-    var name = content.trim().replace(this.rune,"").trim().split(" ")[0];
+    var f = new Filter_Stencil();
 
-    var h = "";
-    if(this.collection[name]){
-      for (i = 0; i < this.collection[name].parameters.length; i++) {
-        h += this.collection[name].parameters[i].name+" ";
+    if(preview){ f.preview(cmd); }
+    else{ f.render(cmd); }
   }
+
+  this.chromatic = function(cmd,preview = false)
+  {
+    var f = new Filter_Chromatic();
+
+    if(preview){ f.preview(cmd); }
+    else{ f.render(cmd); }
   }
-    else if(name){
-      for (var key in this.collection){
-        if(name != key.substr(0,name.length)){ continue; }
-        h += key.substr(name.length)+" ";
-      }  
+
+  this.hint = function(method)
+  {
+    var html = "";
+    var filter_name = ronin.terminal.input.value.split(" ")[0].split(".")[1];
+
+    if(this.filters[filter_name]){
+      return this.filters[filter_name].hint();
     }
     else{
-      for (var key in this.collection){
-        h += key+" ";
+      for (var key in this.filters){
+        html += key+" ";
       }  
     }
-    return this.pad(content)+h;   
+
+    return html;  
   }
 
 }

scripts/modules/source.js

@@ -4,7 +4,7 @@ function Source(rune)
 
   this.modal_element = null;
 
-  this.settings  = {"format":"png","quality":"1"};
+  this.settings  = {format:"png",quality:"1"};
 
   this.add_method(new Method("save",["name","rect","format"]));
   this.add_method(new Method("load",["path","position","rect"]),"Add point");
@@ -22,11 +22,15 @@ function Source(rune)
     if(!params.filepath()){ return 0, "Path?"; }
     if(!params.rect()){ return 0,"Rect?"; }
 
-    ronin.overlay.draw_rect(position,params.rect());
+    var position = params.position() ? params.position() : new Position("0,0");
+    var rect = params.rect() ? params.rect() : new Rect("50,50");
+
+    ronin.overlay.draw(position,rect);
 
     if(preview){ return; }
+    if(this.is_locked){ console.log("Locked!"); return 0,"The source module is locked."; }
 
-    var position = params.position() ? params.position() : new Position("0,0");
+    this.lock();
 
     base_image = new Image();
     base_image.src = "../assets/"+params.filepath().path;
@@ -46,9 +50,9 @@ function Source(rune)
       height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
       
       ronin.frame.active_layer.context().drawImage(base_image, position.x, position.y, width, height);
-    }
-
       ronin.overlay.clear();
+      ronin.source.unlock();
+    }
 
     return 1,"Loaded "+params.filepath().path+" at "+position.render();
   }
@@ -62,11 +66,11 @@ function Source(rune)
 
     this.modal();
 
-    if(this.settings["format"] == "jpg"){
-      this.modal("image","<img src='"+this.merge().element.toDataURL('image/jpeg',parseFloat(this.settings["quality"]))+"' />");
+    if(this.settings.format == "jpg"){
+      this.modal("image","<img src='"+this.merge().element.toDataURL('image/jpeg',parseFloat(this.settings.quality))+"' />");
     }
     else{
-      this.modal("image","<img src='"+this.merge().element.toDataURL('image/png',parseFloat(this.settings["quality"]))+"'/>");
+      this.modal("image","<img src='"+this.merge().element.toDataURL('image/png')+"'/>");
     }
     /*
     if(params.setting("format") && params.setting("format").value == "svg"){
@@ -82,6 +86,8 @@ function Source(rune)
       */
     
     this.layer.remove(this);
+
+    return 1,"Rendered the "+this.settings.format+" image, quality "+this.settings.quality+"."
   }
 
   this.modal = function(type,content)

scripts/modules/terminal.js

@@ -34,7 +34,7 @@ function Terminal(rune)
     var method  = command.method();
     var setting = command.setting();
 
-    console.info(command.content);
+    console.info(command.content); // Don't remove
 
     if(method){
       method.run(command);
@@ -64,11 +64,13 @@ function Terminal(rune)
 
   this.run_multi = function(lines)
   {
-    lines = lines.split(";")
-    for(id in lines){
-      var cmd = new Command(lines[id]);
-      this.run(cmd);
+    if(!ronin.terminal.is_locked){
+      lines = lines.split(";");
+      target_line = lines.shift();
+      this.run(new Command(target_line));
     }
+
+    if(lines.length > 0){ setTimeout(function(){ ronin.terminal.run_multi(lines.join(";")) }, 250); }
   }
 
   this.hint = function(method)

scripts/modules/type.js

@@ -44,9 +44,6 @@ function Type(rune)
   
   this.mouse_move = function(position,rect)
   {
-    var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder";
-    var line = "type.write "+position.render()+" \""+str+"\"";
-    ronin.terminal.update(line);
   }
   
   this.mouse_up = function(position)

scripts/units/method.js

@@ -32,11 +32,11 @@ function Method(name,params,mouse_event)
 
   this.preview = function(cmd)
   {
-    return this.host[this.name](cmd,true);
+    return this.host[this.name] ? this.host[this.name](cmd,true) : "";
   }
 
   this.run = function(cmd)
   {
-    return ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false)));
+    return this.host[this.name] ? ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false))) : null;
   }
 }