Added sharpen filter

index.html

@@ -37,7 +37,8 @@
     <script type="text/javascript" src="scripts/filters/invert.js"></script>
     <script type="text/javascript" src="scripts/filters/chromatic.js"></script>
     <script type="text/javascript" src="scripts/filters/balance.js"></script>
-    <script type="text/javascript" src="scripts/filters/saturation.js"></script>
+    <script type="text/javascript" src="scripts/filters/grey.js"></script>
+    <script type="text/javascript" src="scripts/filters/sharpen.js"></script>
 
     <script type="text/javascript" src="scripts/core/keyboard.js"></script>
     <script type="text/javascript" src="scripts/core/command.js"></script>

scripts/core/commander.js

@@ -7,35 +7,34 @@ function Commander(element,element_input)
   this.storage_index = 0;
   this.always_show = false;
 
-  var queue = [];
+  this.queue = [];
   
   this.query = function(input_str)
   {
     if(input_str.indexOf(";") > 0){
-      queue = input_str.split(";");
+      this.queue = input_str.split(";");
     }
     else{
-      queue = [];
-      queue.push(input_str)
+      this.queue = [];
+      this.queue.push(input_str)
     }
-    run();
+    this.run();
     this.hide();
   }
 
-  function run()
+  this.run = function()
   {
-    if(!queue[0]){ return; }
-    
-    active(queue[0].trim());
+    if(!commander.queue[0]){ console.log("Finished queue"); return; }
 
-    queue.shift();
-    if(queue.length > 0){
-      setTimeout(function(){ run(); }, 100);
-    }
+    active(commander.queue[0].trim());
+    commander.queue.shift();
+
+    setTimeout(function(){ commander.run(); }, 100);
   }
 
   function active(content)
   {
+    console.info(content);
     var key = content[0];
     var cmd = new Command(content.substring(1).trim().split(" "));
     
@@ -49,7 +48,7 @@ function Commander(element,element_input)
   this.passive = function(content)
   {
     var key = content[0];
-    var cmd = new Command(content.substring(1).split(" "));
+    var cmd = new Command(content.substring(1).trim().split(" "));
     
     ronin.module = null;
     
@@ -68,7 +67,7 @@ function Commander(element,element_input)
   {
     var content = this.element_input.value.trim();
     var key = content[0];
-    var cmd = new Command(content.substring(1).split(" "));
+    var cmd = new Command(content.substring(1).trim().split(" "));
     return cmd;
   }
   

scripts/filters/chromatic.js

@@ -64,5 +64,4 @@ function Filter_Chromatic()
     ronin.surface.active_layer.clear();
     context.putImageData(imageData, 0, 0);
   }
-
 }

scripts/filters/filter.js

@@ -13,6 +13,29 @@ function Filter()
     console.log("render: Nothing here.");
   }
 
+  this.get_neighbors = function(pixels,x,y)
+  {
+    return [
+      this.get_color(pixels,x-1,y-1),this.get_color(pixels,x,y-1),this.get_color(pixels,x+1,y-1),
+      this.get_color(pixels,x-1,y),this.get_color(pixels,x,y),this.get_color(pixels,x+1,y),
+      this.get_color(pixels,x-1,y+1),this.get_color(pixels,x,y+1),this.get_color(pixels,x+1,y+1),
+    ];
+  }
+
+  this.get_neighbors_average = function(pixels,x,y,weight_map = [1,1,1,1,1,1,1,1,1])
+  {
+    var n = this.get_neighbors(pixels,x,y);
+    var r = 0;
+    var g = 0;
+    var b = 0;
+    for (var i = 0; i < n.length; i++){
+      r += n[i].r * weight_map[i];
+      g += n[i].g * weight_map[i];
+      b += n[i].b * weight_map[i];
+    }
+    return {r:r/n.length,g:g/n.length,b:b/n.length}
+  }
+
   this.set_color = function(pixels, color, x, y)
   {
     x = Math.max(0,Math.min(x,pixels.width-1));

scripts/filters/grey.js

@@ -1,4 +1,4 @@
-function Filter_Saturation()
+function Filter_Grey()
 {
   Filter.call(this);
 

scripts/filters/sharpen.js

@@ -0,0 +1,51 @@
+function Filter_Sharpen()
+{
+  Filter.call(this);
+  
+  this.parameters = [];
+
+  this.render = function(cmd)
+  {
+    var imageObj = new Image();
+    imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
+
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+    var context = ronin.surface.active_layer.context();
+
+    var originalData = context.getImageData(0, 0, w*2, h*2);
+    var data = originalData.data;
+    var newImage = context.getImageData(0, 0, w*2, h*2);
+
+    var weight_map = [ 
+       -2, 0,  -2,
+      0, 16, 0,
+       -2, 0,  -2
+    ];
+
+    for(var i = 0; i < data.length; i += 4) {
+      var p = i / 4;
+      var x = (p % originalData.width);
+      var y = parseInt(p/originalData.width);
+
+      var average = this.get_neighbors_average(originalData,x,y,weight_map);
+      newImage.data[i] = parseInt(average.r);
+      newImage.data[i+1] = parseInt(average.g);
+      newImage.data[i+2] = parseInt(average.b);
+    }
+
+    ronin.surface.active_layer.clear();
+    context.putImageData(newImage, 0, 0);
+  }
+
+  this.preview = function(cmd)
+  {
+    
+  }
+
+  this.draw = function(context = this.context(), value, position)
+  {
+    
+  }
+
+}

scripts/modules/module.js

@@ -22,12 +22,10 @@ function Module(rune)
 
   this.active = function(cmd)
   {
-    console.log("Nothing to do.");
   }
   
   this.passive = function(cmd)
   {
-    console.log("Nothing to do.");
   }
   
   this.update_variables = function(cmd)

scripts/modules/preset.js

@@ -7,8 +7,12 @@ function Preset(rune)
   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["watermark"] = {};
-  this.collection["watermark"]["default"] = "@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 2 ; / ../assets/logo.png 35x35 15,355";
+  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 ; % grey % 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'";
@@ -22,9 +26,14 @@ function Preset(rune)
   {
     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]){
-      commander.query(this.collection[input][name]);
+      setTimeout(function(){ 
+        commander.element.setAttribute('class','visible');
+        commander.element_input.focus(); 
+        commander.element_input.value = value;
+      }, 100);
     }
   }
 

scripts/modules/render.js

@@ -7,10 +7,11 @@ function Render(rune)
 
   this.collection["rotate"] = new Filter_Rotate();
   this.collection["balance"] = new Filter_Balance();
-  this.collection["saturation"] = new Filter_Saturation();
+  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.active = function(cmd)
   {
@@ -28,7 +29,8 @@ function Render(rune)
     if(!this.layer){ this.create_layer(); }
     
     var name = cmd.content[0];
-    if(!this.collection[name]){ return; }
+
+    if(!this.collection[name]){ console.log("unknown ",name); return; }
 
     return this.collection[name].preview(cmd);
   }
@@ -51,4 +53,5 @@ function Render(rune)
 
     return s;
   }
+
 }

scripts/units/position.js

@@ -32,10 +32,10 @@ function Position(position_str = "0,0",y = null)
   
   this.normalize = function(rect)
   {
-    if(this.x < 0){
+    if(this.x == null){
       this.x = ronin.canvas.element.width - rect.width - Math.abs(this.x);
     }
-    if(this.y < 0){
+    if(this.y == null){
       this.y = ronin.canvas.element.height - rect.height - Math.abs(this.y);
     }
   }