Merge pull request #35 from jywarren/spectrum-images

images now belong to spectra, spectra can be created from images

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectral-workbench",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "description": "Framework for spectrometric data management & analysis by Public Lab",
   "main": "dist/spectral-workbench.js",
   "scripts": {

spec/javascripts/graph_spec.js

@@ -75,7 +75,7 @@ describe("Graph", function() {
       calibrated: true, // 269.089 to 958.521
       range: [400, 800],
       onComplete: callback,
-      onImageComplete: function() { done(); } // fires when graph.image is loaded, so that later tests can run
+      onImageComplete: function() { done(); } // fires when graph.datum.image is loaded, so that later tests can run
 
     });
 
@@ -107,7 +107,7 @@ describe("Graph", function() {
     // expect(graph.width).toBe(600); // this prob depends on the container
     expect(graph.zooming).toBe(false);
     expect(graph.el.html()).toBeDefined();
-    expect(graph.image.el.html()).toBeDefined();
+    expect(graph.datum.image.el.html()).toBeDefined();
     expect(graph.svg).toBeDefined();
 
     expect(graph.svg).toBeDefined();
@@ -122,19 +122,19 @@ describe("Graph", function() {
     expect(graph.extent).toBeDefined();
     expect(graph.fullExtent).toBeDefined();
     expect(graph.fullExtent[1] - graph.fullExtent[0]).toBeGreaterThan(graph.extent[1] - graph.extent[0]);
-    expect(graph.image).toBeDefined();
-    expect(graph.image.el).toBeDefined();
-    expect(graph.image.width).toBeDefined();
+    expect(graph.datum.image).toBeDefined();
+    expect(graph.datum.image.el).toBeDefined();
+    expect(graph.datum.image.width).toBeDefined();
 
   });
 
 
   var originalPxPerNm;
 
   it("imagePxToDisplayPx() converts an x-coordinate pixel value from image space to a display space pixel value", function() {
-    originalPxPerNm = originalPxPerNm = graph.image.width / (graph.fullExtent[1] - graph.fullExtent[0]);
+    originalPxPerNm = originalPxPerNm = graph.datum.image.width / (graph.fullExtent[1] - graph.fullExtent[0]);
 
-    // image 800px wide (graph.image.width), normally displayed at 800px, 
+    // image 800px wide (graph.datum.image.width), normally displayed at 800px, 
     // but with 400-800 range limiting pushing it wider; 1189.27px
     // source spectrum goes from 269.089nm to 958.521nm, or a range of 689.432nm
     // so, 130.911nm between start and range start (400)
@@ -143,14 +143,14 @@ describe("Graph", function() {
     // and pxPerNm should be 1.1603754975109946
     // margins make displayed image width more difficult to calculate:
     // default margin = { top: 10, right: 30, bottom: 20, left: 70 }; but right margin is not used in image display
-    // but we can use graph.image.el.width() for the final displayed width:
+    // but we can use graph.datum.image.el.width() for the final displayed width:
 
     // 130 nm in original image pixels; 
     expect(Math.round(graph.imagePxToDisplayPx(originalPxPerNm * 130.911))).toBeCloseTo(0);
     // graph.width is 690px, displayed image, cropped
 
     var rightEdgeNm = 689.432 - 158.521; // full range in nm minus hidden right side should be right edge in nm
-    expect(Math.round(graph.imagePxToDisplayPx(originalPxPerNm * rightEdgeNm))).toBeCloseTo(Math.round(graph.image.container.width())); 
+    expect(Math.round(graph.imagePxToDisplayPx(originalPxPerNm * rightEdgeNm))).toBeCloseTo(Math.round(graph.datum.image.container.width())); 
 
   });
 
@@ -166,7 +166,7 @@ describe("Graph", function() {
       so 500/800 = 0.625, times 680 = 425
     */
 
-    expect(graph.image.container.width()).toBe(680);
+    expect(graph.datum.image.container.width()).toBe(680);
     expect(graph.imagePxToDisplayPx(500)).toBeCloseTo(425);
 
     graph.range = range;
@@ -225,7 +225,7 @@ describe("Graph", function() {
 
     expect(Math.round(graph.imagePxToDisplayPx(originalPxPerNm * 130.911))).toBeCloseTo(-1); // rounding error; toBeCloseTo(0, 1) syntax doesn't seem to work for precision?
     var rightEdgeNm = 689.432 - 158.521; // displayed range in nm (~400) minus hidden right side should be right edge in nm
-    expect(Math.round(graph.imagePxToDisplayPx(originalPxPerNm * rightEdgeNm))).toBeCloseTo(graph.image.container.width() + 1); // rounding error
+    expect(Math.round(graph.imagePxToDisplayPx(originalPxPerNm * rightEdgeNm))).toBeCloseTo(graph.datum.image.container.width() + 1); // rounding error
     expect(Math.round(graph.imagePxToDisplayPx(500))).toBeCloseTo(675);
 
     expect(graph.displayPxToNm(0)).toBeCloseTo(graph.extent[0]);

spec/javascripts/image_spec.js

@@ -8,19 +8,21 @@ describe("Image", function() {
 
   });
 
+
   it("should not be undefined even if it has no graph or DOM element", function(done) {
 
     image = new SpectralWorkbench.Image(
       false,
       {
-        callback: done // options
+        onLoad: done // options
       }
     );
 
     expect(image).toBeDefined();
 
   });
 
+
   it("has defined width and height", function() {
 
     expect(image.width).toBeDefined();
@@ -30,15 +32,34 @@ describe("Image", function() {
 
   });
 
+
   it("has a canvas element and context", function() {
 
     expect(image.canvasEl).toBeDefined();
-    expect(image.canvasEl.length).toBeGreaterThan(1);
+    expect(image.canvasEl.length).toEqual(1);
     expect(image.canvasEl.width()).toEqual(image.width);
     expect(image.canvasEl.height()).toEqual(image.height);
     expect(image.ctx.canvas.width).toEqual(image.width);
     expect(image.ctx.canvas.height).toEqual(image.height);
 
   });
 
+
+  it("can be constructed from an image url", function(done) {
+
+    var imageFromUrl = new SpectralWorkbench.Image(false, {
+      url: 'spec/javascripts/fixtures/test-spectrum-9.png',
+      onLoad: function onLoad() {
+
+        expect(imageFromUrl.obj).not.toBeUndefined();
+        expect(imageFromUrl.width).not.toBeUndefined();
+
+        done();
+
+      }
+    });
+
+  });
+
+
 });

spec/javascripts/spectrum_spec.js

@@ -8,7 +8,7 @@ describe("Spectrum", function() {
   // {"average":64.3333,"r":69,"g":46,"b":78,"wavelength":269.089},
   // {"average":31,"r":33,"g":19,"b":41,"wavelength":958.521}
 
-  var spectrum = new SpectralWorkbench.Spectrum(data)
+  var spectrum = new SpectralWorkbench.Spectrum(data);
 
   it("is not undefined when initialized with spectrum json", function() {
 
@@ -283,19 +283,31 @@ describe("Spectrum", function() {
 
   });
 
-  // test spectrum.image, which the following method uses; here, we don't have an image. 
-
-
   /* ======================================
    * Overwrite spectrum.json.data.lines, the raw JSON of the spectrum
    * <y> is the y-position of the cross section of pixels, where 0 is the top row
    * <keepCalibrated> is a boolean which indicates whether to keep or flush the calibration
    * spectrum.imgToJSON = function(y, keepCalibrated) {
    */
-  xit("imgToJSON() extracts JSON data from an image", function() {
+  it("imgToJSON() extracts JSON data from an image", function(done) {
+
+    var image = new SpectralWorkbench.Image(false, {
+      url: 'spec/javascripts/fixtures/test-spectrum-9.png',
+      onLoad: function onLoad() {
+
+        var spectrumFromImage = new SpectralWorkbench.Spectrum(image, false, { y: 10 });
+
+        expect(spectrumFromImage.image).toBeDefined();
+
+        // check that we can extract image data
+        expect(spectrumFromImage.imgToJSON(1)[0].average).toBe(64.33);
+        expect(spectrumFromImage.imgToJSON(1)[0].pixel).toBe(0);
+        expect(spectrumFromImage.imgToJSON(1)[0].wavelength).toBeUndefined();
+
+        done();
 
-    // check that we can extract image data
-    expect(graph.datum.imgToJSON(1)).toBe(64.3333);
+      }
+    });
 
   });
 

src/SpectralWorkbench.Datum.js

@@ -2,17 +2,17 @@ SpectralWorkbench.Datum = Class.extend({
 
   init: function(args, _graph) {
 
-    this.args = args;
-
-    this.json  = args;
-    this.title = args.title;
-    this.id    = args.id;
-    this.graph = _graph;
-    this.tags = [];
-    this.powertags = [];
-
     var _datum = this;
 
+    _datum.args = args;
+
+    if (_datum.args.data || _datum.args.spectra) _datum.json  = args;
+    _datum.title = args.title;
+    _datum.id    = args.id;
+    _datum.graph = _graph;
+    _datum.tags  = [];
+    _datum.powertags = [];
+
 
     /* ======================================
      * Turns <a> link with specified selector into a download

src/SpectralWorkbench.Graph.js

@@ -27,15 +27,6 @@ SpectralWorkbench.Graph = Class.extend({
 
       _graph.dataType = "spectrum";
 
-      // Create an image and canvas element to display and manipulate image data. 
-      // We could have this non-initialized at boot, and only create it if asked to.
-      _graph.image = new SpectralWorkbench.Image(_graph, {
-        callback:   _graph.onImageComplete,
-        selector:   _graph.args.imageSelector,
-        url:        _graph.args.imgSrc,
-        sample_row: _graph.args.sample_row
-      });
-
     } else if (_graph.args.hasOwnProperty('set_id')) {
 
       _graph.dataType = "set";
@@ -121,9 +112,9 @@ SpectralWorkbench.Graph = Class.extend({
     _graph.imagePxToDisplayPx = function(x) {
 
       // what proportion of the full image is being displayed?
-      var proportion = x / _graph.image.width, // x position as a percent of original image
-          scaledX = proportion * _graph.image.el.width(), // that proportion of the displayed DOM image element;
-          displayPxPerNm = _graph.image.el.width() / (_graph.fullExtent[1] - _graph.fullExtent[0]), 
+      var proportion = x / _graph.datum.image.width, // x position as a percent of original image
+          scaledX = proportion * _graph.datum.image.el.width(), // that proportion of the displayed DOM image element;
+          displayPxPerNm = _graph.datum.image.el.width() / (_graph.fullExtent[1] - _graph.fullExtent[0]), 
           leftXOffsetInDisplayPx = (_graph.extent[0] - _graph.fullExtent[0]) * displayPxPerNm;
 
       return scaledX - leftXOffsetInDisplayPx;
@@ -138,11 +129,11 @@ SpectralWorkbench.Graph = Class.extend({
     _graph.displayPxToImagePx = function(x) {
 
       // what proportion of the full image is being displayed?
-      var displayPxPerNm = _graph.image.el.width() / (_graph.fullExtent[1] - _graph.fullExtent[0]), 
+      var displayPxPerNm = _graph.datum.image.el.width() / (_graph.fullExtent[1] - _graph.fullExtent[0]), 
           leftXOffsetInDisplayPx = (_graph.extent[0] - _graph.fullExtent[0]) * displayPxPerNm,
           fullX = x + leftXOffsetInDisplayPx, // starting from true image DOM element zero
-          proportion = fullX / _graph.image.el.width(), // x position as a percent of DOM image
-          scaledX = proportion * _graph.image.width; // that proportion of the original image
+          proportion = fullX / _graph.datum.image.el.width(), // x position as a percent of DOM image
+          scaledX = proportion * _graph.datum.image.width; // that proportion of the original image
 
       return scaledX;
 
@@ -267,6 +258,15 @@ SpectralWorkbench.Graph = Class.extend({
 
       if (_graph.dataType == "spectrum") {
 
+        // Create an image and canvas element to display and manipulate image data. 
+        _graph.datum.image = new SpectralWorkbench.Image(_graph, {
+          onLoad:   _graph.onImageComplete,
+          selector:   _graph.args.imageSelector,
+          // plus optionals:
+          url:        _graph.args.imgSrc,
+          sample_row: _graph.args.sample_row
+        });
+
         _graph.UI = new SpectralWorkbench.UI.Spectrum(_graph);
 
         // scan for helper tips
@@ -553,7 +553,7 @@ SpectralWorkbench.Graph = Class.extend({
 
       _graph.el.height(100); // this isn't done later because we mess w/ height, in, for example, calibration
 
-      if (_graph.image) _graph.image.updateSize(); // adjust image element and image.container element
+      if (_graph.datum && _graph.datum.image) _graph.datum.image.updateSize(); // adjust image element and image.container element
 
       if (_graph.datum) {
 

src/SpectralWorkbench.Image.js

@@ -46,7 +46,7 @@ SpectralWorkbench.Image = Class.extend({
 
         // We're in a browser; build a canvas element, but hide it.
         $('body').append('<canvas id="spectral-workbench-canvas" style="display:none;"></canvas>;');
-        image.canvasEl = $('canvas#spectral-workbench-canvas');
+        image.canvasEl = $('canvas#spectral-workbench-canvas:last');
         image.canvasEl.width(image.width);
         image.canvasEl.height(image.height);
         image.ctx = image.canvasEl[0].getContext("2d");
@@ -59,7 +59,7 @@ SpectralWorkbench.Image = Class.extend({
 
       if (image.options.sample_row) image.setLine(image.options.sample_row);
 
-      if (image.options.callback) image.options.callback(); // since image loading is asynchronous
+      if (image.options.onLoad) image.options.onLoad(); // since image loading is asynchronous
 
     }