Added working pixels example

desktop/sources/links/main.css

@@ -9,5 +9,5 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin #wrapper #commander div#status { position: absolute; bottom: 0px; }
 #ronin #wrapper #commander.hidden { margin-left:-331px; }
 
-#ronin canvas#surface,#ronin canvas#guide { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }
+#ronin canvas#surface,#ronin canvas#guide { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%;}
 #ronin canvas#guide { background:none; }

desktop/sources/scripts/lib/controller.js

@@ -16,7 +16,9 @@ function Controller () {
     if (!this.menu[mode]) { this.menu[mode] = {} }
     if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
     this.menu[mode][cat][label] = { fn: function (_menuItem, browserWindow) {
-      browserWindow.webContents.focus()
+      if (browserWindow) {
+        browserWindow.webContents.focus()
+      }
       fn.apply(this, arguments)
     },
     accelerator: accelerator }

desktop/sources/scripts/library.js

@@ -31,10 +31,6 @@ function Library (ronin) {
     return rect
   }
 
-  this.select = (rect = this.frame()) => {
-    return ronin.surface.select(rect)
-  }
-
   this.exit = () => {
     // TODO: Closes Ronin
   }
@@ -193,8 +189,28 @@ function Library (ronin) {
   }
 
   this.theme = (variable, el = document.documentElement) => {
-    // ex. styleprop('--f_high') to get css variable value
-    return getComputedStyle(el).getPropertyValue(variable)
+    return getComputedStyle(el).getPropertyValue(variable) // ex. styleprop('--f_high') to get css variable value
+  }
+
+  // Pixels
+
+  this.pixels = (rect, fn, q) => {
+    const img = ronin.surface.context.getImageData(0, 0, rect.w, rect.h)
+    for (let i = 0, loop = img.data.length; i < loop; i += 4) {
+      const pixel = { r: img.data[i], g: img.data[i + 1], b: img.data[i + 2], a: img.data[i + 3] }
+      const processed = fn(pixel, q)
+      img.data[i] = processed[0]
+      img.data[i + 1] = processed[1]
+      img.data[i + 2] = processed[2]
+      img.data[i + 3] = processed[3]
+    }
+    ronin.surface.context.putImageData(img, 0, 0)
+    return rect
+  }
+
+  this.saturation = (pixel, q = 1) => {
+    var color = 0.2126 * pixel.r + 0.7152 * pixel.g + 0.0722 * pixel.b
+    return [color, color, color, pixel.a]
   }
 
   // Math

desktop/sources/scripts/surface.js

@@ -4,6 +4,8 @@ function Surface (ronin) {
   this._guide = document.createElement('canvas')
   this._guide.id = 'guide'
   this.ratio = window.devicePixelRatio
+
+  // Contexts
   this.context = this.el.getContext('2d')
   this.guide = this.el.getContext('2d')
 
@@ -14,6 +16,8 @@ function Surface (ronin) {
     this._guide.addEventListener('mousedown', ronin.commander.onMouseDown, false)
     this._guide.addEventListener('mousemove', ronin.commander.onMouseMove, false)
     this._guide.addEventListener('mouseup', ronin.commander.onMouseUp, false)
+    this.context.scale(this.ratio, this.ratio)
+    this.guide.scale(this.ratio, this.ratio)
   }
 
   this.start = function () {
@@ -25,15 +29,6 @@ function Surface (ronin) {
 
   }
 
-  this.select = function (rect) {
-    const img = this.context.getImageData(rect.x, rect.y, rect.w, rect.h)
-    const pixels = []
-    for (let i = 0, loop = img.data.length; i < loop; i += 4) {
-      pixels.push({ r: img.data[i], g: img.data[i + 1], b: img.data[i + 2], a: img.data[i + 3] })
-    }
-    return pixels
-  }
-
   // Shape
 
   this.stroke = (shape, width, color, context = this.context) => {

examples/pixels.lisp

@@ -1,10 +1,21 @@
 ; pixels
 
-((clear)
+(
+  (clear)
+
+  ; Filter
+
+  (def filter-action 
+    (lambda () (pixels 
+      (rect 0 0 500 500)
+      saturation
+      0.5)
+    ))
 
   ; Draw photo 
   
-  (draw "../../PREVIEW.jpg"
-  (frame)
-  (lambda () (echo (select (rect 660 344 10 10))))
-))
+  (draw 
+    "../../PREVIEW.jpg" 
+    (frame) 
+    filter-action)
+)