plotly integration???!

dist/imageboard.css

@@ -1,12 +1,17 @@
 
 body {
   padding: 20px;
+  margin: 0 auto;
+  max-width: 700px;
 }
 
 .header {
   text-align: center;
 }
 
+.panels {
+}
+
 .panel {
   padding: 20px 0;
   margin-bottom: 20px;
@@ -21,8 +26,20 @@ body {
   color: #aaa;
 }
 
-/* ImageSelect styles */
+.log h4 {
+  text-align: center;
+}
 
+.log {
+  margin-top: 20px;
+  padding: 10px;
+  font-size: 9px;
+  font-family: monospace;
+  color: #666;
+  background: #eee;
+}
+
+/* ImageSelect styles */
 
 .mod-image-select #drop {
   background: #efefef;

index.html

@@ -5,6 +5,7 @@
     <title>ImageBoard</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="content-type" content="text/html; charset=UTF8">
 
     <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
@@ -31,7 +32,7 @@
       <div class="panel mod-image-select">
         <div id="drop">Drag image here</div>
         <p class="instructions">Select or drop an image here to begin.</p>
-        <span class="file-select" class="upload"><input type="file" /></span>
+        <input id="file-select" type="file" />
       </div>
 
     </div>
@@ -42,11 +43,16 @@
         <select class="select-module form-control">
           <option value="ndvi-red">NDVI with red filter</option>
           <option value="green-channel">Green channel</option>
+          <option value="plot">Plot with colorbar</option>
         </select> 
         <p><button class="btn btn-default add-step">Add step</button></p>
       </form>
     </div>
 
+    <div class="log">
+      <h4>Log</h4>
+    </div>
+
     <script>
 
       var imageboard;
@@ -62,7 +68,7 @@
 //        });
 
         imageboard.addStep('ndvi-red');
-//        imageboard.addStep('green-channel');
+        imageboard.addStep('plot');
 
         $('.add-step').click(function(e) {
 

package.json

@@ -27,6 +27,7 @@
     "save-pixels": "^2.3.4",
       "base64-stream": "^0.1.3",
       "buffer": "^5.0.2",
+    "plotly.js": "^1.21.2",
 
     "image-filter-threshold": "^0.0.8",
       "babelify": "^7.2.0",

src/ImageBoard.js

@@ -37,14 +37,21 @@ ImageBoard = function ImageBoard(options) {
 
   setup();
 
+  function log(msg) {
+    $('.log').append(msg + ' at ' + new Date());
+    console.log(msg);
+  }
+
   function run() {
 
     var lastImage;
 
+// THIS MUST BE EVENT BASED OR CALLBACKED -- ITS ASYNCHRONOUS
     steps.forEach(function forEachStep(step) {
 
       step.module.run(lastImage, function onComplete(image) {
         lastImage = image;
+        log('completed step "' + step.module.title + '"');
       });
 
     });

src/Modules.js

@@ -37,6 +37,7 @@ module.exports = {
 
   'green-channel': require('./modules/GreenChannel.js'),
   'ndvi-red': require('./modules/NdviRed.js'),
+  'plot': require('./modules/Plot.js'),
 
 /*
   'image-threshold': {

src/modules/ImageSelect.js

@@ -6,6 +6,7 @@ module.exports = function ImageSelect(options) {
 
   options = options || {};
   options.selector = options.selector || "#drop";
+  options.inputSelector = options.inputSelector || "#file-select";
   options.output = options.output || function output(image) {
     return image;
   }
@@ -24,11 +25,14 @@ module.exports = function ImageSelect(options) {
 
   // Drag & Drop behavior
 
-  var onDrop = function(e) {
+  var onImage = function(e) {
     e.preventDefault();
     e.stopPropagation(); // stops the browser from redirecting.
 
-    var files = e.dataTransfer.files;
+    var files;
+    if (e.target && e.target.files) files = e.target.files;
+    else files = e.dataTransfer.files;
+
     for (var i = 0, f; f = files[i]; i++) {
       // Read the File objects in this FileList.
 
@@ -56,7 +60,8 @@ module.exports = function ImageSelect(options) {
   }
 
   $(options.selector).on('dragover', onDragOver, false);
-  $(options.selector)[0].addEventListener('drop', onDrop, false);
+  $(options.selector)[0].addEventListener('drop', onImage, false);
+  $(options.inputSelector).change(onImage);
 
   function getImage() {
     return image;

src/modules/Plot.js

@@ -0,0 +1,79 @@
+/*
+ * Plot image on a graph with color bar
+ */
+module.exports = function Plot(options) {
+
+  options = options || {};
+
+  var image,
+      selector = 'mod-plot',
+      random = options.random || parseInt(Math.random() * (new Date()).getTime() / 1000000),
+      uniqueSelector = selector + '-' + random, 
+      el;
+
+  // should we just run setup on constructor?
+  function setup() {
+
+    $(options.container).append('<div class="panel ' + selector + ' ' + uniqueSelector + '"></div>');
+    el = $('.' + uniqueSelector);
+
+  }
+
+  function run(_image, onComplete, options) {
+
+    options = options || {};
+    options.colorscale = options.colorscale || 'Jet',//'RdBu';
+    options.type = options.type || 'contour'; // or 'heatmap'
+
+    /* https://plot.ly/javascript/heatmap-and-contour-colorscales/#custom-colorscale
+  type: 'contour',
+  colorscale: [[0,    'rgb(166,206,227)'], 
+               [0.25, 'rgb(31,120,180)'], 
+               [0.45, 'rgb(178,223,138)'], 
+               [0.65, 'rgb(51,160,44)'], 
+               [0.85, 'rgb(251,154,153)'], 
+               [1,    'rgb(227,26,28)']]
+    */
+
+    var Plotly = require('plotly.js'),
+        getPixels = require("get-pixels");
+
+    var data = [{
+      z: [],
+      colorscale: options.colorscale,
+      type: 'heatmap'
+    }];
+
+    getPixels(_image.src, function(err, pixels) {
+
+      if(err) {
+        console.log("Bad image path")
+        return
+      }
+
+      for(var y = pixels.shape[1]; y > 0; y--) {
+        data[0].z.push([]);
+        for(var x = 1; x < pixels.shape[0]; x++) {
+
+          data[0].z[data[0].z.length - 1].push(pixels.get(x, y, 0) / 255.00);
+
+        }
+      }
+
+      var layout = { title: '' };
+      el.append('<div id="plot-' + random + '"></div>');
+      Plotly.newPlot('plot-' + random, data, layout);
+
+      // return Plotly.toImage(gd,{format:'jpeg',height:400,width:400});
+
+    });
+
+  }
+
+  return {
+    title: "Plot with colorbar",
+    run: run,
+    setup: setup,
+    image: image
+  }
+}