Added color picker.

index.html

@@ -14,7 +14,6 @@
     
     <script type="text/javascript" src="scripts/modules/module.js"></script>
     <script type="text/javascript" src="scripts/modules/canvas.js"></script>
-    <script type="text/javascript" src="scripts/modules/planner.js"></script>
     <script type="text/javascript" src="scripts/modules/stroke.js"></script>
     <script type="text/javascript" src="scripts/modules/vector.js"></script>
     <script type="text/javascript" src="scripts/modules/overlay.js"></script>
@@ -26,6 +25,7 @@
     <script type="text/javascript" src="scripts/modules/history.js"></script>
     <script type="text/javascript" src="scripts/modules/eraser.js"></script>
     <script type="text/javascript" src="scripts/modules/surface.js"></script>
+    <script type="text/javascript" src="scripts/modules/eye.js"></script>
     
     <script type="text/javascript" src="scripts/modules/filter.js"></script>
     <script type="text/javascript" src="scripts/modules/filter.saturation.js"></script>
@@ -50,7 +50,6 @@
       <div id='surface' style='left:0px;top:0px'>
         <canvas id='overlay' width="1480" height="800"></canvas>
         <canvas id="workspace" width="1480" height="800"></canvas>
-        <canvas id="planner" width="1480" height="800"></canvas>
         <div id='widget'>Loading..</div>
       </div>
       <div id ='commander'>

scripts/core/cursor.js

@@ -6,9 +6,9 @@ function Cursor()
   this.update = function(event)
   {
     if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */  }
-    else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.planner);  }
+    else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.eye); }
-    else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.canvas);  }
+    else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.canvas); }
-    else if(event.ctrltKey === true && event.altKey === true){ /* */  }
+    else if(event.ctrltKey === true && event.altKey === true){ this.set_mode(ronin.eye);  }
     else if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
     else if(event.altKey === true){ this.set_mode(ronin.surface); }
     else if(event.shiftKey === true){ this.set_mode(ronin.eraser); }

scripts/core/ronin.js

@@ -15,8 +15,8 @@ function Ronin()
   this.help     = new Help("?");
   this.history  = new History("^");
   this.eraser   = new Eraser(".");
-  this.planner  = new Planner("*");
   this.surface  = new Surface("#");
+  this.eye      = new Eye("*");
   
   this.cursor   = new Cursor();
   
@@ -31,8 +31,8 @@ function Ronin()
   this.modules[this.help.rune] = this.help;
   this.modules[this.history.rune] = this.history;
   this.modules[this.eraser.rune] = this.eraser;
-  this.modules[this.planner.rune] = this.planner;
   this.modules[this.surface.rune] = this.surface;
+  this.modules[this.eye.rune] = this.eye;
   
   this.cursors = [];
   

scripts/modules/eye.js

@@ -0,0 +1,45 @@
+function Eye(rune)
+{
+  Module.call(this,rune);
+  
+  // Module
+  
+  this.active = function(cmd)
+  {
+  }
+  
+  this.passive = function(cmd)
+  {
+  }
+  
+  this.widget_cursor = function()
+  {
+    return "Eye";
+  }
+  
+  this.color_picker = function(position)
+  {
+    var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data;
+    var c = new Color();
+    commander.show();
+    commander.element_input.focus();
+    commander.element_input.value = "> "+(c.rgb_to_hex(imgData));
+  }
+  
+  // Cursor
+  
+  this.mouse_down = function(position)
+  {
+    this.color_picker(position);
+  }
+  
+  this.mouse_move = function(position)
+  {
+    this.color_picker(position);
+  }
+  
+  this.mouse_up = function(position)
+  {
+    this.color_picker(position);
+  }
+}

scripts/modules/planner.js

@@ -1,9 +0,0 @@
-function Planner(rune)
-{
-  Module.call(this,rune);
-  
-  this.widget_cursor = function()
-  {
-    return "Planner";
-  }
-}

scripts/units/color.js

@@ -24,4 +24,9 @@ function Color(hex = '#000000')
   {
     return this.hex;
   }
+  
+  this.rgb_to_hex = function(rgb)
+  {
+    return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
+  }
 }