Added functionality for downloading spectrum image (#245)

* Added function for downloading spectrum img

* Adding dropdown for camera switching

* download file and check length

* Update spectral-workbench-demo.spec.js

* Update spectral-workbench-demo.spec.js

* Update spectral-workbench-demo.spec.js

* increase file length test for downloaded image

Co-authored-by: Jeffrey Warren <[email protected]>

Author: waridrox

cypress/integration/spectral-workbench-demo.spec.js

@@ -1,12 +1,12 @@
 /// <reference types="cypress" />
+const path = require('path')
 
 context('Actions', () => {
 
   beforeEach(() => {
     cy.visit('http://127.0.0.1:8080/examples/new-capture/')
   })
 
-
   it('It reach the default landing page', () => {
     cy.get('#landing-page-content').contains('Spectral WorkBench');
     cy.get('#landing-page-content').contains('What is Spectral Workbench?');
@@ -28,5 +28,23 @@ context('Actions', () => {
     cy.get('.bs-stepper-header>div').eq(6).not('have.class', 'active')
   });
 
-  
-})
+  const downloadsFolder = Cypress.config('downloadsFolder')
+
+  it('can be clicked through to begin capturing', () => {
+    cy.get('#landing-page-next').click()
+    cy.get('#setting-page-next').click()
+    cy.get('#download-spectrum').click()
+
+    cy.log('**read downloaded file**')
+
+    // file path is relative to the working folder
+    const filename = path.join(downloadsFolder, 'spectrum_img.png')
+
+    // browser might take a while to download the file,
+    // so use "cy.readFile" to retry until the file exists
+    // and has length - and we assume that it has finished downloading then
+    cy.readFile(filename, { timeout: 15000 })
+    .should('have.length.gt', 50)
+  });
+
+})

examples/capture/capture.js

@@ -161,6 +161,16 @@ $W = {
     this_.getRecentCalibrations("#calibration_id");
   },
 
+  downloadSpectrum: function() {
+  let base64_imgdata = $('#dataurl').val($W.canvas.toDataURL())[0].defaultValue;
+  console.log(base64_imgdata);
+
+  let a = document.createElement('a');
+  a.href = base64_imgdata;
+  a.download = ('spectrum_img.png');
+  a.click();
+  },
+
   getRecentCalibrations: function(selector) {
     $.ajax({
       url: "/capture/recent_calibrations.json?calibration_id=" + $W.calibration_id,

examples/new-capture/index.html

@@ -246,9 +246,14 @@ <h1>
           </div>
         </div>
 
+        <input name="dataurl" type="hidden" id="dataurl" />
+
         <button class="demo-button next" id="capture-page-next">Save Capture</button>
         <p style="margin-top: 0.5em">Once you save the capture, you cannot go back here.</p>
         <img style="display:none;background:#333;" id="spectrum-preview" />
+
+        <button class="demo-button next" id="download-spectrum" onClick="$W.downloadSpectrum();">Download</button>
+
       </div>