Merge latest main to gh-pages (#264)

* Update README.md

* Update README.md

* Bump jasmine from 3.6.1 to 3.7.0 (#216)

Bumps [jasmine](https://github.com/jasmine/jasmine-npm) from 3.6.1 to 3.7.0.
- [Release notes](https://github.com/jasmine/jasmine-npm/releases)
- [Commits](jasmine/jasmine-npm@v3.6.1...v3.7.0)

Signed-off-by: dependabot-preview[bot] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* Bump tape from 5.2.0 to 5.2.2 (#211)

Bumps [tape](https://github.com/substack/tape) from 5.2.0 to 5.2.2.
- [Release notes](https://github.com/substack/tape/releases)
- [Commits](tape-testing/tape@v5.2.0...v5.2.2)

Signed-off-by: dependabot-preview[bot] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Security] Bump ini from 1.3.5 to 1.3.8 (#198)

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8. **This update includes a security fix.**
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](npm/ini@v1.3.5...v1.3.8)

Signed-off-by: dependabot-preview[bot] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* bump to v0.2.0 (#238)

* Camera switching in a dropdown list (#247)

* Added camera switching in a dropdown

* Added dropdown element for camera switching on old and new interface

Added dropdown element on old interface

* bump to v0.2.1

* Bump moment from 2.10.6 to 2.19.3 (#230)

Bumps [moment](https://github.com/moment/moment) from 2.10.6 to 2.19.3.
- [Release notes](https://github.com/moment/moment/releases)
- [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md)
- [Commits](moment/moment@2.10.6...2.19.3)

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump jquery from 3.5.1 to 3.6.0 (#232)

Bumps [jquery](https://github.com/jquery/jquery) from 3.5.1 to 3.6.0.
- [Release notes](https://github.com/jquery/jquery/releases)
- [Commits](jquery/jquery@3.5.1...3.6.0)

Signed-off-by: dependabot-preview[bot] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* Bump grunt-cli from 1.3.2 to 1.4.3 (#234)

Bumps [grunt-cli](https://github.com/gruntjs/grunt-cli) from 1.3.2 to 1.4.3.
- [Release notes](https://github.com/gruntjs/grunt-cli/releases)
- [Changelog](https://github.com/gruntjs/grunt-cli/blob/main/CHANGELOG.md)
- [Commits](gruntjs/grunt-cli@v1.3.2...v1.4.3)

Signed-off-by: dependabot-preview[bot] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* Bump cypress from 5.1.0 to 8.1.0 (#244)

Bumps [cypress](https://github.com/cypress-io/cypress) from 5.1.0 to 8.1.0.
- [Release notes](https://github.com/cypress-io/cypress/releases)
- [Changelog](https://github.com/cypress-io/cypress/blob/develop/.releaserc.base.js)
- [Commits](https://github.com/cypress-io/cypress/compare/@cypress/react-v5.1.0...v8.1.0)

Signed-off-by: dependabot-preview[bot] <[email protected]>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* Bump path-parse from 1.0.6 to 1.0.7 (#246)

Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Upgrade to GitHub-native Dependabot (#226)

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* Bump cypress from 8.1.0 to 8.3.0 (#253)

Bumps [cypress](https://github.com/cypress-io/cypress) from 8.1.0 to 8.3.0.
- [Release notes](https://github.com/cypress-io/cypress/releases)
- [Changelog](https://github.com/cypress-io/cypress/blob/develop/.releaserc.base.js)
- [Commits](cypress-io/cypress@v8.1.0...v8.3.0)

---
updated-dependencies:
- dependency-name: cypress
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump grunt from 1.3.0 to 1.4.1 (#252)

Bumps [grunt](https://github.com/gruntjs/grunt) from 1.3.0 to 1.4.1.
- [Release notes](https://github.com/gruntjs/grunt/releases)
- [Changelog](https://github.com/gruntjs/grunt/blob/main/CHANGELOG)
- [Commits](gruntjs/grunt@v1.3.0...v1.4.1)

---
updated-dependencies:
- dependency-name: grunt
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump jquery.steps from 1.1.1 to 1.1.2 (#250)

Bumps [jquery.steps](https://github.com/oguzhanoya/jquery-steps) from 1.1.1 to 1.1.2.
- [Release notes](https://github.com/oguzhanoya/jquery-steps/releases)
- [Commits](oguzhanoya/jquery-steps@v1.1.1...v1.1.2)

---
updated-dependencies:
- dependency-name: jquery.steps
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump tape from 5.2.2 to 5.3.1 (#249)

Bumps [tape](https://github.com/substack/tape) from 5.2.2 to 5.3.1.
- [Release notes](https://github.com/substack/tape/releases)
- [Commits](tape-testing/tape@v5.2.2...v5.3.1)

---
updated-dependencies:
- dependency-name: tape
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump jasmine from 3.7.0 to 3.9.0 (#248)

Bumps [jasmine](https://github.com/jasmine/jasmine-npm) from 3.7.0 to 3.9.0.
- [Release notes](https://github.com/jasmine/jasmine-npm/releases)
- [Commits](jasmine/jasmine-npm@v3.7.0...v3.9.0)

---
updated-dependencies:
- dependency-name: jasmine
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump moment from 2.19.3 to 2.29.1 (#257)

Bumps [moment](https://github.com/moment/moment) from 2.19.3 to 2.29.1.
- [Release notes](https://github.com/moment/moment/releases)
- [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md)
- [Commits](moment/moment@2.19.3...2.29.1)

---
updated-dependencies:
- dependency-name: moment
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump cypress from 8.3.0 to 8.3.1 (#259)

Bumps [cypress](https://github.com/cypress-io/cypress) from 8.3.0 to 8.3.1.
- [Release notes](https://github.com/cypress-io/cypress/releases)
- [Changelog](https://github.com/cypress-io/cypress/blob/develop/.releaserc.base.js)
- [Commits](cypress-io/cypress@v8.3.0...v8.3.1)

---
updated-dependencies:
- dependency-name: cypress
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump http-server from 0.12.3 to 13.0.1 (#258)

Bumps [http-server](https://github.com/http-party/http-server) from 0.12.3 to 13.0.1.
- [Release notes](https://github.com/http-party/http-server/releases)
- [Commits](http-party/http-server@v0.12.3...v13.0.1)

---
updated-dependencies:
- dependency-name: http-server
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* 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]>

* Bump http-server from 13.0.1 to 13.0.2 (#260)

Bumps [http-server](https://github.com/http-party/http-server) from 13.0.1 to 13.0.2.
- [Release notes](https://github.com/http-party/http-server/releases)
- [Commits](http-party/http-server@v13.0.1...v13.0.2)

---
updated-dependencies:
- dependency-name: http-server
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: Mohammad Warid <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 4 people

.github/dependabot.yml

@@ -0,0 +1,35 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: cypress
+    versions:
+    - 6.3.0
+    - 6.4.0
+    - 6.5.0
+    - 6.6.0
+    - 6.7.1
+    - 6.8.0
+    - 7.0.0
+    - 7.0.1
+    - 7.1.0
+  - dependency-name: d3
+    versions:
+    - 6.5.0
+    - 6.6.0
+    - 6.6.1
+    - 6.6.2
+  - dependency-name: tape
+    versions:
+    - 5.1.1
+    - 5.2.1
+  - dependency-name: jasmine
+    versions:
+    - 3.6.4
+  - dependency-name: flot
+    versions:
+    - 4.2.1

README.md

@@ -21,6 +21,8 @@ Try a demo of the newly rewritten capture interface here: https://publiclab.gith
 
 ****
 
+![screenshot](https://publiclab.org/i/42828.png)
+
 
 ## Installation
 

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)
+  });
+
+})

dist/capture.dist.js

@@ -265,20 +265,98 @@ $W.getUserMedia = function(options) {
     container.appendChild(video);
     video.autoplay = true;
     video.id = 'webcam-video'
+
+    var videoElement = document.getElementById('webcam-video');
+    var videoSelect = document.querySelector('select#videoSource');
+    var selectors = [videoSelect];
 
-    const successCallback = stream => {
+    successCallback = stream => {
       $('#heightIndicator').show()
       $('#webcam-msg').hide()
-      attachMediaStream(video, stream)
+
+      window.stream = stream;
+      videoElement = attachMediaStream(videoElement, stream)
       if ($W.flipped == true) {
         $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
         $W.flip_horizontal();
       }
+      return getVidDevices();
     };
 
     const errorCallback = () => console.warn(error);
 
     getUserMedia($W.defaultConstraints, successCallback, errorCallback);
+
+    gotVidDevices = (deviceInfos) => {
+      let values = selectors.map(function(select) {
+        return select.value; 
+      });
+    
+      selectors.forEach(function(select) {
+        while (select.firstChild) {
+          select.removeChild(select.firstChild);
+        }
+      });
+      for (let i = 0; i !== deviceInfos.length; ++i) {
+        let deviceInfo = deviceInfos[i];
+        let option = document.createElement('option');
+        option.value = (deviceInfo.id || deviceInfo.deviceId);
+        if (deviceInfo.kind === 'videoinput' || deviceInfo.kind === 'video') {
+          console.log(deviceInfo.label);
+          option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
+          videoSelect.appendChild(option);
+        } 
+      }
+      
+      selectors.forEach(function(select, selectorIndex) {
+        if (Array.prototype.slice.call(select.childNodes).some(function(n) {
+          return n.value === values[selectorIndex];
+        })) {
+          select.value = values[selectorIndex];
+        }
+      });
+    }
+  
+    getVidDevices = () => {
+      if (typeof Promise === 'undefined') {
+        return MediaStreamTrack.getSources(gotVidDevices);
+      } else {
+        return navigator.mediaDevices.enumerateDevices()
+        .then(gotVidDevices)
+        .catch((error) => {
+          console.error(error);
+        });
+      }
+    }
+  
+    getVidDevices();
+  
+    start = () => {
+      if (window.stream) {
+        window.stream.getTracks().forEach(function(track) {
+          track.stop(); //stopping the current video stream
+        });
+      }
+  
+      var videoSource = videoSelect.value;
+      var constraints = {
+        video: {
+          deviceId: videoSource ? {exact: videoSource} : undefined //Taking device ids as the video source 
+        }
+      };
+  
+      if (typeof Promise === 'undefined') {
+      navigator.getUserMedia(constraints, successCallback, function(){}); 
+      } 
+      else {
+      navigator.mediaDevices.getUserMedia(constraints)
+      .then(successCallback);
+      } 
+    }
+  
+    videoSelect.onchange = start; //repeating the process for source change
+  
+    start();
   });
 };
 

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/capture/index.html

@@ -174,6 +174,10 @@
         <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i></a>
         <a rel="tooltip" title="Scale video" class="btn btn-default" onClick="$W.scale_h = parseFloat(prompt('Enter a horizontal scaling factor (default is 1):'))"><i class="fa fa-white fa-expand"></i></a>
       </div>
+
+      <div class="select" style="padding-top:5px;">
+        <label for="videoSource">Camera source: </label><select id="videoSource"></select>
+      </div>
 
       <p><small><b>TOOLS</b></small></p>
       <div class="btn-group toolbar" style="margin-bottom:5px;">

examples/new-capture/index.html

@@ -170,8 +170,12 @@ <h1>
             <a rel="tooltip" title="" class="btn btn-default" onclick="$W.auto_detect_sample_row()" data-original-title="Auto select sample row"><i class="fa fa-white fa-arrows-v"></i> Auto-select Sample Row</a>
             <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i> Flip image</a>
             <a rel="tooltip" title="Rotate video 90 &deg;" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-white fa-rotate-right"></i> Rotate</a>
-
           </p>
+
+          <div class="select" style="padding-top:5px;">
+            <label for="videoSource">Camera source: </label><select id="videoSource"></select>
+          </div>
+          
           <p style="padding-top:5px;">
             Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
           </p>
@@ -242,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>