diff --git a/app/assets/javascripts/new-capture.js b/app/assets/javascripts/new-capture.js
new file mode 100644
index 000000000..6954fee75
--- /dev/null
+++ b/app/assets/javascripts/new-capture.js
@@ -0,0 +1,724 @@
+//= require graph.js
+// window.webcam.getCameraList()
+
+flotoptions = {"crosshair":{"mode":"x"},"series":{"lines":{"show":true,"lineWidth":1}},"yaxis":{"show":true,"max":100,"min":0},"xaxis":{"show":false},"shadowSize":0,"threshold":{"below":0,"color":"#a00"},"grid":{"clickable":true,"hoverable":true,"borderWidth":0,"color":"#ccc","backgroundColor":"#111"},"colors":["#ffffff","rgba(255,0,0,0.3)","rgba(0,255,0,0.3)","rgba(0,0,255,0.3)","#ffff00"]}
+
+  flotoptions.grid = {
+    clickable: true,
+    hoverable:true,
+    borderWidth: 0,
+    color: "#ccc",
+    backgroundColor: "#111"
+  }
+  flotoptions.colors = [ "#ccc", "#E02130", "#FAB243", "#429867", "#2B5166" ]//, "#482344" ]
+
+$W = {
+  data: null,
+  baseline: null,
+  full_data: [],
+  unflipped_data: [],
+  flipped: false,
+  rotated: false,
+  pos: 0,
+  sample_height: 1,
+  // height and width of the output stream container
+  width: 640,
+  height: 480,
+  waterfall_height: 150,
+  scale_h: 1,
+  scale_w: 1,
+  // width: 1280,
+  // height: 720,
+  frame: 0,
+  defaultConstraints: {
+    audio: false,
+    video: {
+      facingMode: "environment"
+    }
+  },
+
+  getUserMedia: function(options) {
+    AdapterJS.webRTCReady(() => {
+      // The WebRTC API is ready.
+      const container = document.getElementById('webcam'),
+            video = document.createElement('video');
+      
+      container.appendChild(video);
+      video.autoplay = true;
+      video.id = 'webcam-video'
+      
+      const successCallback = stream => {
+        $('#heightIndicator').show()
+        $('#webcam-msg').hide()
+        attachMediaStream(video, stream)
+        if ($W.flipped == true) {
+          $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
+          $W.flip_horizontal();
+        }
+      };
+  
+      const errorCallback = () => console.warn(error);
+  
+      getUserMedia($W.defaultConstraints, successCallback, errorCallback);
+    });
+  },
+
+  initialize: function(args) {
+    this.mobile = args['mobile'] || false
+    this.flipped = args['flipped'] == true || false
+    this.interface = args['interface'] || false
+    this.mode = args['mode'] || 'combined'
+    flotoptions.colors = [ "#ffffff", "rgba(255,0,0,0.3)", "rgba(0,255,0,0.3)", "rgba(0,0,255,0.3)", "#ffff00"]
+    this.calibrated = args['calibrated'] || false
+    this.width = args['width'] || this.width
+    this.height = args['height'] || this.height
+    if (args['height']) {
+      this.options.height = args['height']
+      this.options.width = args['width']
+    }
+
+    if (args.video_row) {
+      this.sample_start_row = args.video_row;
+    } else {
+      // this is camera sample row, not saved image sample row!
+      this.sample_start_row = localStorage.getItem('sw:samplestartrow') || this.width/2;
+    }
+    this.setSampleRow(this.sample_start_row)
+
+    this.getUserMedia(this.options, this.success, this.deviceError)
+
+    this.canvas = document.getElementById("canvas")
+    $('canvas').width = this.width+"px"
+    this.canvas.width = this.width
+    this.canvas.height = this.waterfall_height
+    this.ctx = this.canvas.getContext("2d")
+    this.image = this.ctx.getImageData(0, 0, this.width, this.height);
+
+    // create canvas for the sidebar preview if there's a "preview" canvas element:
+    if ($('#preview').length > 0) {
+      this.preview_ctx = $('#preview')[0].getContext('2d')
+    }
+
+    setInterval($W.alert_overexposure, 500); // every 0.5 seconds
+    setInterval(function() {
+
+      $W.getRecentCalibrations('.select-calibration');
+
+    }, 10000); // every 10 seconds
+    $('.btn-switch-calibration-configure').click(function() {
+      window.location = "/capture?calibration_id=" + $('.select-calibration-configure').val()
+    });
+
+    $('.btn-switch-calibration-capture').click(function() {
+      window.location = "/capture?calibration_id=" + $('.select-calibration-capture').val()
+    });
+
+    $W.data = [{label: "webcam",data:[]}]
+    if ($('video')[0]) {
+      $('video')[0].width = "320"
+      $('video')[0].height = "240"
+    } else {
+      $('video').width = "320"
+      $('video').height = "240"
+    }
+  },
+
+  deviceError: function (error) {
+    //console.log(error)
+  },
+  // Draws the appropriate pixels onto the top row of the waterfall.
+  // Override this if you want a non-linear cross section or somethine
+  // else special! <video> is the video element
+  getCrossSection: function(video) {
+    // draw the new data on the top row of pixels of the canvas, overwriting what's there now
+    if ($W.mobile) {
+      // this is only for the deprecated mobile version
+      $W.ctx.scale(3,1)
+      $W.ctx.translate($('video').height()/2,0)
+      if (!$W.rotated) $W.ctx.rotate(Math.PI/2)
+      $W.ctx.drawImage(video, -$W.sample_start_row/4, -$W.height/2);
+    } else {
+      if ($W.flipped) {
+        $W.ctx.translate($W.width,0)
+        $W.ctx.scale(-1,1)
+      }
+      $W.ctx.scale($W.scale_h,$W.scale_w)
+      if ($W.rotated) {
+
+        // these lines may not be working properly for high-resolution cameras on mobile devices?
+        // or maybe odd aspect ratios. Do we need to be accounting for the incoming video size?
+        $W.ctx.scale($W.width/$W.height,$W.width/$('#canvas').height())
+        $W.ctx.translate($W.height,-$W.sample_start_row)
+
+        $W.ctx.rotate(Math.PI/2)
+        $W.ctx.drawImage(video,0,0)
+      } else {
+        $W.ctx.drawImage(video,0,-$W.sample_start_row)
+      }
+
+      // testing line; go to //spectralworkbench.org/capture?debug=true
+      if ($W.debug_tmp) $W.debug_log = "$W.height="+$W.height+" $W.width="+$W.width+" #canvas height="+$('#canvas').height()
+    }
+  },
+
+  geolocate: function() {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition($W.setGeolocation)
+      return true
+    }
+  },
+  setGeolocation: function(loc) {
+    if (loc.coords) {
+      $('#lat').val(loc.coords.latitude)
+      $('#lon').val(loc.coords.longitude)
+    }
+    else {
+      $('#lat').val(loc.latitude)
+      $('#lon').val(loc.longitude)
+    }
+  },
+
+  auto_detect_sample_row: function() {
+        
+    // We need a separate canvas to draw the snapshot, whenever we try to auto detect the sample row.
+    if ($('#autoDetectCanvas').length == 0) {
+      $('body').append("<canvas style='display:none;' id='autoDetectCanvas'></canvas>")
+    }
+
+    var video = document.getElementsByTagName('video')[0]
+    var canvas = document.getElementById('autoDetectCanvas')
+    canvas.height = $W.height
+    canvas.width = $W.width
+    var context = canvas.getContext('2d')
+
+    context.drawImage(video, 0, 0)
+
+    img = context.getImageData(0,0,$W.width,$W.height)
+
+    var detected = []
+    var max_avg_intensity = 0
+    var selected_row = -1
+
+    for (var row = 0; row < $W.height; row++) {
+
+      var red_vals = {"low":10000, "high": -10000}
+      var green_vals = {"low":10000, "high": -10000}
+      var blue_vals = {"low":10000, "high": -10000}
+      var intensity_vals = {"low":10000, "high": -10000}
+
+      var vals = [red_vals, green_vals, blue_vals, intensity_vals]
+      var sum_intensity = 0
+      var count_intensity = 0
+
+      for (var col = 0; col < $W.width; col++) { 
+        var red = img.data[((row*(img.width*4)) + (col*4)) + 0]
+        var green = img.data[((row*(img.width*4)) + (col*4)) + 1]
+        var blue = img.data[((row*(img.width*4)) + (col*4)) + 2]
+        var intensity = (red+green+blue)/3
+
+        var bands = [red, green, blue, intensity]
+
+        $.each(vals, function(index, val){
+          if (val["low"] > bands[index]) val["low"] = bands[index]
+          if (val["high"] < bands[index]) val["high"] = bands[index]
+        })
+        
+        sum_intensity += intensity
+        count_intensity++
+      }
+
+      // If we need intensity diffs, 
+      // diff = intensity_vals["high"] - intensity_vals["low"]
+      
+      diff = red_vals["high"] - red_vals["low"]
+      
+      //console.log(diff)
+      if (diff > 20) {
+        detected.push(row)
+        var avg_intensity = parseInt(sum_intensity / count_intensity)
+        if (avg_intensity < 255 && max_avg_intensity < avg_intensity) {
+            selected_row = row
+            max_avg_intensity = avg_intensity
+        }        
+      }
+    }
+
+    if (selected_row > -1) $W.setSampleRows(selected_row, selected_row+1);
+    else console.log('AutoDetectSampleRow: Increase light intensity and try again!')
+  },
+
+  toggle_rotation: function() {
+    
+  $W.rotated = !$W.rotated
+  if ($W.rotated == true) $('.btn-rotate').addClass('active');
+  else                    $('.btn-rotate').removeClass('active');
+  var style = $('#heightIndicator')[0].style
+  var stylePrev = $('#heightIndicatorPrev')[0].style
+  if ($W.rotated) {
+    style.marginTop = '0px';
+    style.borderBottomWidth = "0px"
+    style.borderRightWidth = "2px"
+    style.height = "240px"
+    style.width = "0px"
+    stylePrev.marginTop = '0px';
+    stylePrev.borderBottomWidth = "0px"
+    stylePrev.borderRightWidth = "2px"
+    stylePrev.height = "100px"
+    stylePrev.width = "0px"
+    $('#heightIndicator .vertical').show();
+    $('#heightIndicator .horizontal').hide();
+    $('.spectrum-example-horizontal').hide();
+    $('.spectrum-example-vertical').show();
+  } else {
+    style.marginLeft = '0px';
+    style.borderBottomWidth = "2px"
+    style.borderRightWidth = "0px"
+    style.width = "320px"
+    style.height = "0px"
+    stylePrev.marginLeft = '0px';
+    stylePrev.borderBottomWidth = "2px"
+    stylePrev.borderRightWidth = "0px"
+    stylePrev.width = "100%"
+    stylePrev.height = "0px"
+    $('#heightIndicator .vertical').hide();
+    $('#heightIndicator .horizontal').show();
+    $('.spectrum-example-horizontal').show();
+    $('.spectrum-example-vertical').hide();
+  }
+  // reset the indicator to the correct sample row:
+  $W.setSampleRows($W.sample_start_row,$W.sample_start_row)
+  },
+
+  getRow: function() {
+  $W.frame += 1
+  var video = $('video')[0];
+  // Grab the existing canvas:
+  var saved =  $W.excerptCanvas(0,0, $W.width, $W.height, $W.ctx).getImageData(0,0, $W.width, $W.height)
+
+  // manipulate the canvas to get the image to copy onto the canvas in the right orientation
+  $W.ctx.save()
+  $W.getCrossSection(video)
+  $W.ctx.restore()
+
+  // draw old data 1px below new row of data:
+  $W.ctx.putImageData(saved,0,1)
+
+
+  // populate the sidebar preview if there's a "preview" element:
+  if ($('#preview').length > 0) {
+      $W.preview_ctx.canvas.width = $('#preview').width()
+      $W.preview_ctx.canvas.height = $('#preview').width()*0.75
+    $('#preview').height($('#preview').width()*0.75)
+    if ( $W.flipped) {
+        $W.preview_ctx.translate($('#preview').width(),0)
+        $W.preview_ctx.scale(-1,1)
+    }
+      $W.preview_ctx.drawImage($('video')[0],0,0,$('#preview').width(),$('#preview').width()*0.75)
+    if ( $W.rotated != true) $("#heightIndicatorPrev").width($('#sidebar').width())
+      $W.resetHeightIndicators(false)
+  }
+
+  // get the slice of data
+  img =  $W.ctx.getImageData(0,0, $W.canvas.width, $W.sample_height)
+
+  // use it to generate a graph
+  if ( $W.mode == "average") {
+      $W.data[0] = {label: "Webcam",data:[]}
+  } else if ( $W.mode == "rgb") {
+      $W.data[0] = {label: "R",data:[]}
+      $W.data[1] = {label: "G",data:[]}
+      $W.data[2] = {label: "B",data:[]}
+  } else if ( $W.mode == "combined") {
+      $W.data[0] = {label: "Combined",data:[]}
+      $W.data[1] = {label: "R",data:[]}
+      $W.data[2] = {label: "G",data:[]}
+      $W.data[3] = {label: "B",data:[]}
+      $W.data[4] = {label: "Overexposed",data:[]}
+  }
+
+  // store it in the "raw" data store too
+    $W.full_data = []
+  for (var col = 0; col <  $W.canvas.width; col++) {
+    var red = 0
+    for (row=0;row< $W.sample_height;row++) {
+        red += img.data[((row*(img.width*4)) + (col*4)) + 0]
+    }
+    red /=  $W.sample_height
+    var green = 0
+    for (row=0;row< $W.sample_height;row++) {
+        green += img.data[((row*(img.width*4)) + (col*4)) + 1]
+    }
+    green /=  $W.sample_height
+    var blue = 0
+    for (row=0;row< $W.sample_height;row++) {
+        blue += img.data[((row*(img.width*4)) + (col*4)) + 2]
+    }
+    blue /=  $W.sample_height
+    var intensity = (red+blue+green)/3
+      $W.full_data.push([red,green,blue,intensity])
+    if (! $W.calibrated) {
+      if ( $W.mode == "average") {
+          $W.data[0].data.push([col,intensity/2.55])
+      } else if ( $W.mode == "rgb") {
+          $W.data[0].data.push([col,red/2.55])
+          $W.data[1].data.push([col,green/2.55])
+          $W.data[2].data.push([col,blue/2.55])
+      } else if ( $W.mode == "combined") {
+          $W.data[0].data.push([col,intensity/2.55])
+          $W.data[1].data.push([col,red/2.55])
+          $W.data[2].data.push([col,green/2.55])
+          $W.data[3].data.push([col,blue/2.55])
+        if (red == 255 || green == 255 || blue == 255){
+            $W.data[4].data.push([col,100])
+            $W.data[4].data.push([col,100])
+            $W.data[4].data.push([col,100])
+        }
+      }
+    } else {
+      if ( $W.mode == "average") {
+        if ( $W.baseline != null) {
+          var wavelength = parseInt( $W.getWavelength(col))
+            $W.data[0].data.push([wavelength, $W.baseline[wavelength]-intensity/2.55])
+        } else  $W.data[0].data.push([parseInt( $W.getWavelength(col)),intensity/2.55])
+      } else if ( $W.mode == "rgb") {
+        var w =  $W.getWavelength(col)
+          $W.data[0].data.push([w,red/2.55])
+          $W.data[1].data.push([w,green/2.55])
+          $W.data[2].data.push([w,blue/2.55])
+      } else if ( $W.mode == "combined") {
+        if ( $W.baseline != null) {
+          var wavelength = parseInt( $W.getWavelength(col))
+            $W.data[0].data.push([wavelength, $W.baseline[wavelength]-intensity/2.55])
+        } else  $W.data[0].data.push([parseInt( $W.getWavelength(col)),intensity/2.55])
+        var w =  $W.getWavelength(col)
+          $W.data[1].data.push([w,red/2.55])
+          $W.data[2].data.push([w,green/2.55])
+          $W.data[3].data.push([w,blue/2.55])
+        if (red == 255 || green == 255 || blue == 255){ 
+            $W.data[4].data.push([w,100])
+        }
+        
+      }
+    }
+  }
+    $W.plot = $.plot($("#graph"), $W.data,flotoptions);
+    $.each( $W.markers,function(i,m) {
+      $('#graph').append('<div style="position:absolute;left:' + (m[2] + 4) + 'px;top:10px;color:#aaa;font-size:smaller">'+m[0]+': '+parseInt( $W.getIntensity( $W.data[0].data,m[1]))+'%</div>');
+    })
+      $W.unflipped_data =  $W.full_data
+    if ( $W.flipped)  $W.unflipped_data =  $W.unflipped_data.reverse()
+    if ( $W.macro &&  $W.macro.draw) {
+      try {
+          $W.macro.draw()
+      } catch(e) {
+        console.log(e)
+      }
+    }
+  },
+
+  saveSpectrum: function() {
+    var this_ = this;
+    $('#dataurl').val($W.canvas.toDataURL())
+    if ($('#spectrum-preview')) {
+      $('#spectrum-preview')[0].src = $('#dataurl').val()
+      $('#spectrum-preview').show()
+    }
+    $('#video_row').val($W.sample_start_row)
+    if ($('#geotag-toggle').length > 0) $('#geotag').val($('#geotag-toggle')[0].checked)
+    setTimeout(function() { if ($('#geotag').val() == "true") $W.geolocate() },500)
+    this_.getRecentCalibrations("#calibration_id");
+  },
+
+  getRecentCalibrations: function(selector) {
+    $.ajax({
+      url: "/capture/recent_calibrations.json?calibration_id=" + $W.calibration_id,
+      type: "GET",
+      success: function(data) {
+        var html = "<option value='calibration'>[+] New calibration/uncalibrated</option>"
+        $.each(data, function(index, spectrum) {
+          html += "<option "
+          if ($W.calibration_id == spectrum.id) html += "selected "
+          html += "value="+spectrum.id+">#"+spectrum.id+": "+spectrum.title+" (";
+          if (spectrum.forked) html += "forked ";
+          html += spectrum.created_at_in_words+" ago)</option>";
+        });
+        $(selector).html(html);
+      }
+    })
+  },
+
+  cancelSave: function() {
+    $('#geotag').val('false')
+    $('#lon').val('')
+    $('#lat').val('')
+  },
+
+  // deprecate in favor of setSampleRows, or wrap it with a +1
+  setSampleRow: function(row) {
+    $W.setSampleRows(parseInt(row),parseInt(row)+1,false)
+  },
+  
+  setSampleRows: function(start,end,legacy) {
+    $W.sample_start_row = start
+    $W.sample_end_row = end
+    localStorage.setItem('sw:samplestartrow',$W.sample_start_row)
+    localStorage.setItem('sw:sampleendrow',$W.sample_end_row)
+    $W.width_percent = start/$W.width
+    $W.height_percent = start/$W.height
+    $W.resetHeightIndicators(legacy)
+    $('#video_row').val($W.sample_start_row);
+  },
+
+  resetHeightIndicators: function(legacy) {
+    if ($W.rotated) {
+      if (legacy != true) $('#heightIndicator')[0].style.marginLeft = parseInt($W.width_percent*320)+'px';
+      if (legacy != true) $('#heightIndicatorPrev')[0].style.marginLeft = parseInt($W.width_percent*$('#preview').width())+'px';
+    } else {
+      if (legacy != true) $('#heightIndicator')[0].style.marginTop = parseInt($W.height_percent*240)+'px';
+      if (legacy != true) $('#heightIndicatorPrev')[0].style.marginTop = parseInt($W.height_percent*$('#preview').height())+'px';
+    }
+  },
+
+  setSampleRowClickListener: function() {
+    $('#webcam').click(function(e){
+      var offX, offY;
+      if (!(e.offsetX || e.offsetY)) {
+        offX = e.pageX - $(e.target).offset().left;
+        offY = e.pageY - $(e.target).offset().top;
+      } else {
+        offX = e.offsetX;
+        offY = e.offsetY;
+      }
+      var percent, row
+      if ($W.rotated) {
+        percent = offX/$('#webcam').width()
+        if ($W.flipped) {
+          row = $W.width-parseInt(percent*$W.width)
+        } else {
+          row = parseInt(percent*$W.width)
+        }
+      } else {
+        percent = offY/$('#webcam').height()
+        row = parseInt(percent*$W.height)
+      }
+      $W.setSampleRows(row,row);
+    })
+  },
+
+  getWavelength: function(col) {
+    return $W.start_wavelength+(col/$W.width)*($W.end_wavelength-$W.start_wavelength)
+  },
+
+  show_rgb: function() {
+    this.mode = "rgb"
+    $W.oldflotoptionscolors = flotoptions.colors
+    flotoptions.colors = [ "#ff0000", "#00ff00", "#0000ff" ]
+    $W.plot = $.plot($("#graph"),$W.data,flotoptions);
+  },
+  show_average: function() {
+    this.mode = "average"
+    $W.data = [{label: "webcam",data:[]}]
+    flotoptions.colors = $W.oldflotoptionscolors
+    $W.plot = $.plot($("#graph"),$W.data,flotoptions);
+  },
+  toggle_mode: function() {
+    if (this.mode == "rgb") $W.show_average()
+    else $W.show_rgb()
+  },
+  show_combined: function() {
+    this.mode = "combined"
+    flotoptions.colors = [ "#ffffff", "rgba(255,0,0,0.3)", "rgba(0,255,0,0.3)", "rgba(0,0,255,0.3)", "#ffff00"]
+  },
+
+  flip_horizontal: function() {
+    $W.flipped = !$W.flipped
+    if ($W.flipped == true) $('.btn-flip').addClass('active');
+    else                    $('.btn-flip').removeClass('active');
+    $('#spectrum_reversed').val($('#spectrum_reversed').val() == 'false')
+    var style = $('#webcam video')[0].style
+    if ($W.flipped) {
+      style.webkitTransform = "scaleX(-1)"
+      style.mozTransform = "scaleX(-1)"
+      style.oTransform = "scaleX(-1)"
+      style.transform = "scaleX(-1)"
+      style.filter = "FlipH"
+      style.msFilter = "FlipH"
+    } else {
+      style.webkitTransform = "scaleX(1)"
+      style.mozTransform = "scaleX(1)"
+      style.oTransform = "scaleX(1)"
+      style.transform = "scaleX(1)"
+      style.filter = "none"
+      style.msFilter = "none"
+    }
+  },
+
+  is_data_ascending_in_nm: function() {
+    var left_redness = 0, right_redness = 0
+    // sum redness and unblueness for each half
+    // REFACTOR to read from live video
+    if ($W.unflipped_data.length > 0) {
+      $.each($W.unflipped_data,function(index,col) {
+        if (index > $W.unflipped_data.length/2) {
+          left_redness += col[0]
+          left_redness -= col[2]
+        } else {
+          right_redness += col[0]
+          right_redness -= col[2]
+        }
+      })
+      return (left_redness > right_redness)
+    } else {
+      return true
+    }
+  },
+
+  markers: [],
+  mark: function() {
+    var nm = prompt("Enter a wavelength in nanometers","532")
+    var label = prompt("Enter a label","Green laser")
+    var o = $W.plot.pointOffset({ x: nm, y: 90})
+    if (!flotoptions.grid.markings) flotoptions.grid.markings = []
+    flotoptions.grid.markings.push({ color: '#ccc', lineWidth: 1, xaxis: { from: nm, to: nm } })
+    $W.plot = $.plot($("#graph"),$W.data,flotoptions);
+
+    $W.markers.push([label,nm,o.left])
+  },
+
+  add_spectrum: function(id) {
+    $.ajax({
+      url: "/spectra/show/"+id+".json",
+      type: "GET",
+      //context: document.body
+      success: function(result) {
+        var spectrum = JSON.parse(result.data) // probably need to convert from JSON
+        if ($('#baseline-toggle')[0].checked) { // use for subtracting baseline
+          //$('#spectrum_tags').val($('#spectrum_tags').val()+",absorption")
+          $W.baseline = []
+          $.each(spectrum.lines,function(index,line) {
+            if (line.wavelength == null) line.wavelength = index
+            // quite imprecise...
+            $W.baseline[parseInt(line.wavelength)] = line.average/2.55
+          })
+        } else {
+          var label = result.spectrum.title
+          $W.data.push({label:label,data:[]})
+          $.each(spectrum.lines,function(index,line) {
+            if (line.wavelength == null) line.wavelength = index
+            $W.data[$W.data.length-1].data.push([line.wavelength,line.average/2.55])
+          })
+          $W.plot = $.plot($("#graph"),$W.data,flotoptions);
+        }
+      }
+    })
+  },
+
+  overexposure_threshold: 15, // how many pixels of consecutive 100% triggers an overexposure warning
+  /* Inspects a given color channel recursively for sequential
+   * pixels of 100%, which would indicate overexposure. Returns
+   * whether it passed the threshold and the last inspected index.
+
+  },
+
+  overexposure_threshold: 20, // how many pixels of consecutive 100% triggers an overexposure warning
+  /* Inspects a given color channel recursively for sequential
+   * pixels of 100%, which would indicate overexposure. Returns
+   * whether it passed the threshold and the last inspected index.
+   */
+  overexposure_recurse: function(data,i,count,color) {
+    if (count > $W.overexposure_threshold) return [true,i]
+    else {
+      if (data[i][({r:0,g:1,b:2})[color]] >= 250) {
+        return $W.overexposure_recurse(data,i+2,count+2,color)
+      } else return [false,i]
+    }
+  },
+  detect_overexposure: function() {
+    var overexposed = {r: false, g: false, b: false}
+    var colors = ["r","g","b"]
+    // check each channel for plateaus at 100%:
+    $.each(colors,function(index,color) {
+      var i = 0;
+      while (i < $W.full_data.length) {
+        var line = $W.full_data[i]
+        var scan = $W.overexposure_recurse($W.full_data,i,0,color)
+        if (scan[0]) {
+          overexposed[color] = true
+          i = $W.full_data.length
+        } else i = scan[1]+10
+      }
+    })
+    return overexposed
+  },
+  // checks overexposure and displays an alert if it is so, and what channel
+  alert_overexposure: function() {
+    console.log('Checking for overexposure');
+    var oe = $W.detect_overexposure()
+    if (oe.r || oe.g || oe.b) {
+      var msg = "<b>Light source too strong</b>; clipping in channels: "
+      var channels = []
+      if (oe.r) channels.push("red")
+      if (oe.g) channels.push("green")
+      if (oe.b) channels.push("blue")
+      $W.notify(msg+channels.join(', '),"warning")
+      // notify is not working in capture, not sure why...
+      $('.capture-navbar .capture-messages').html(msg + channels.join(', '));
+      $('.capture-navbar').addClass('red');
+    } else {
+      $('.capture-navbar .capture-messages').html('');
+      $('.capture-navbar').removeClass('red');
+    }
+  },
+
+  //setTimeout($W.alert_overexposure,3000)
+  notify: function(msg,type,expire) {
+    if (expire == null) expire = true
+    var id = parseInt(Math.random()*100000)
+    $('#notify').html($('#notify').html()+"<div id='notify_"+id+"' class='notify'></div>")
+    if (type == "warning") $('#notify_'+id).html("<b>Warning:</b> "+msg).addClass('warning')
+    if (type == "error") $('#notify_'+id).html("<b>Error:</b> "+msg).addClass('error')
+    if (expire) {
+      setTimeout(function() {
+        $('#notify_'+id).remove()
+      },2000)
+    }
+  },
+
+  getIntensity: function(data,x) {
+    var i, j
+
+    // find the nearest points, x-wise
+    for (j = 0; j < data.length; ++j)
+      if (data[j][0] > x)
+        break;
+
+    // now interpolate
+    var y, p1 = data[j - 1], p2 = data[j];
+    if (p1 == null)
+      y = p2[1];
+    else if (p2 == null)
+      y = p1[1];
+    else
+      y = p1[1] + (p2[1] - p1[1]) * (x - p1[0]) / (p2[0] - p1[0]);
+
+    return y
+  },
+
+  /**
+    * Returns a canvas object of any rect from the offered canvas
+    */
+  excerptCanvas: function(x1,y1,x2,y2,source) {
+    source = source || $W.canvas
+    var width = x2-x1, height = y2-y1
+    if ($('#excerptCanvas').length == 0) {
+      $('body').append("<canvas style='display:none;' id='excerptCanvas'></canvas>")
+    }
+    var element = $('#excerptCanvas')[0]
+    element.width = width
+    element.height = height
+    var excerptCanvasContext = element.getContext('2d')
+    var sourcedata = source.getImageData(x1,y1,width,height)
+    excerptCanvasContext.putImageData(sourcedata,0,0)
+    return excerptCanvasContext
+  }
+}
\ No newline at end of file
diff --git a/app/views/capture/index2.html.erb b/app/views/capture/index2.html.erb
index 7a22118db..3f9b4217b 100644
--- a/app/views/capture/index2.html.erb
+++ b/app/views/capture/index2.html.erb
@@ -1,93 +1,97 @@
-<link rel="stylesheet" href="spectral-workbench/examples/new-capture/new-capture.css">
+<%= stylesheet_link_tag "new-capture" %>
+<%= javascript_include_tag "new-capture" %>
 
+<head>
     <link rel="apple-touch-icon" href="//spectralworkbench.org/images/spectral-workbench-256.png">
     <link rel="apple-touch-fa-precomposed" href="//spectralworkbench.org/images/spectral-workbench-256.png">
     <link rel="apple-touch-fa-precomposed apple-touch-icon" href="//spectralworkbench.org/images/spectral-workbench-256.png">
     <link rel="shortcut icon" href="//spectralworkbench.org/images/spectral-workbench-256.png" />
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css">
     <script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
 </head>
 
-<% unless logged_in? %>
-<div class="modal fade hide" id="login-prompt-modal">
-  <div class="modal-header" style="text-align: center;">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <b>Log in for full functionality</b>
+<div id="testnav" class="btn-group btn-group-justified" role="group" aria-label="...">
+  <div class="btn-group" role="group">
+    <button type="button" id="homebtn" class="btn btn-default active" onclick="homePage()">Home</button>
   </div>
-  <div class="modal-body">
-    <p>You can use this with some limitations without logging in, but once you set up an account, you'll be able to:</p>
-    <ul>
-      <li>Save and share data</li>
-      <li>Calibrate and process your data</li>
-      <li>Use this interface offline - <a href="http://publiclab.org/wiki/spectral-workbench-usage#Offline">without an internet connection</a></li>
-      <li>Contribute to a growing open source database</li>
-    </ul>
+
+    <script>
+      function homePage() {
+        if ($("#landing-page-content").hide()) {
+          $("#landing-page-content").show();
+
+          $("div#capture-page-content").hide();
+          $("div#capture-settings").hide();
+
+
+        }
+      }
+    </script>
+
+
+  <div class="btn-group" role="group">
+    <button type="button" id="settingsbtn" class="btn btn-default" onclick="settingsPage()">Settings</button>
   </div>
-  <div class="modal-footer">
-    <a onClick="$('#login-prompt-modal').modal('hide');$('#loginmodal').modal('show');" class="btn btn-large btn-primary">Log in</a>
-    <a data-dismiss="modal" onClick="$('#login-prompt-modal').modal('hide');" class="btn btn-large">No thanks</a>
+
+    <script>
+
+      function settingsPage() {
+        $("#heightIndicator").removeClass("capture-settings-hide");
+        $("#heightIndicator").show();
+        $("#webcam").css('pointer-events', '');
+        $("#webcam").css('opacity', '1');
+
+        $("#capture-page-content").css('height','auto');
+        $("#capture-page-content").css('width','auto');
+
+        $("#spectrum-ex").show();
+        $("#capture-option").show();
+
+        $("#landing-page-content").hide();
+        $("div#capture-page-content").show();
+        $("div#capture-settings").hide();
+      }
+    </script>
+
+  <div class="btn-group" role="group">
+    <button type="button" id="capturebtn" class="btn btn-default" onclick="capturePage()">Capture</button>
   </div>
-</div>
-<% end %>
-
-<div id="header" class="navbar navbar-inverse navbar-static-top capture-navbar" style="padding-top:0px;">
-  <div class="navbar-inner" style="padding:0 10px;">
-    <a class="brand" href="/"><img style="padding:-2px;width:20px;" src="/images/logo.png" /></a>
-    <div class="pull-right">
-      <% unless logged_in? %><a onClick="$('#loginmodal').modal('show');" class="btn">Log in</a><% end %>
-      <a class="btn btn-inverse" href="http://publiclab.org/spectral-workbench"><i class="fa fa-white fa-question-circle"></i></a>
-    </div>
-    <p class="capture-messages" style="font-size: 1.2rem;"></p>
+
+    <script>
+      function capturePage() {
+        $("#landing-page-content").hide();
+        $("#capture-option").addClass("capture-settings-hide");
+        $("#heightIndicator").addClass("capture-settings-hide");
+
+        $("div#capture-page-content").show();
+        $("div#capture-settings").show();
+
+        $("#spectrum-ex").hide();
+        $(".capture-settings-hide").hide();
+
+        $("#capture-page-content").width(1).height(1);
+        $("#webcam").css('pointer-events', 'none');
+        $("#webcam").css('opacity', '0.0');
+      }
+    </script>
+
+  <div class="btn-group" role="group">
+    <button type="button" id="plottingbtn" class="btn btn-default" onclick="plottingPage()">Plotting</button>
   </div>
+    <script>
+      function plottingPage() {
+  
+      }
+    </script>
 </div>
 
-<body class="full-strecth-block">
-  
-    <div class="full-strecth-block bs-stepper">
-  
-      <div class="bs-stepper-header" id="nav-fixed" role="tablist">
-        <%# <!-- your steps here --> %>
-        <div class="step" data-target="#landing-page">
-          <button type="button" class="step-trigger" role="tab" aria-controls="landing-page" id="landing-page-trigger">
-            <span class="bs-stepper-label">Home Page</span>
-          </button>
-        </div>
-        <div class="line"></div>
-        <div class="step" data-target="#settings">
-          <button type="button" class="step-trigger" role="tab" aria-controls="setting" id="setting-trigger">
-            <span class="bs-stepper-label">Settings</span>
-          </button>
-        </div>
-        <div class="line"></div>
-        <div class="step" data-target="#capture">
-          <button type="button" class="step-trigger" role="tab" aria-controls="capture" id="capture-trigger">
-            <span class="bs-stepper-label">Capture</span>
-          </button>
-        </div>
-        <div class="line"></div>
-        <div class="step" data-target="#plotting">
-          <button type="button" class="step-trigger" role="tab" aria-controls="plotting" id="plot-trigger">
-            <span class="bs-stepper-label">Plotting</span>
-          </button>
-        </div>
+<div id="landing-page-content">
+    <h1> 
+      <div style="padding-bottom:1rem">
+        <img src="/images/logo.png">
       </div>
-  
-  
-      <div class="capture full-strecth-block bs-stepper-content" id="main-content">
-  
-         <%# <!-- step 0 landing Page   --> %>
-        <div id="landing-page" class="full-strecth-flex-vertical content" role="tabpanel">
-          
-          <div id="landing-page-content">
-            <h1> 
-            <div style="padding-bottom:1rem">
-              <img src="/images/logo.png">
-            </div>
-              Spectral WorkBench <div><small>by Public Lab</small></div></h1>
-            <br><br>
+      Spectral WorkBench <div><small>by Public Lab</small></div>
+    </h1>
+      <br><br>
             <p>What is Spectral Workbench? SpectralWorkbench.org is a web based application to collect, 
               archive, share, and analyze spectral data, for Public Lab DIY spectrometers and other spectrometers. 
               With it, you can: connect your USB Desktop Spectrometry Kit. scan and save samples. Try out the 
@@ -102,18 +106,13 @@
               <a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fspectralworkbench.org%2Fdashboard&ref_src=twsrc%5Etfw&screen_name=SpectralWB&tw_p=followbutton"><i class="fa fa-twitter"></i></a>
               <a href="https://publiclab.org/wiki/spectral-workbench-help"><i class="fa fa-info-circle"></i></a>
             </span>
-  
-          </div>
-  
-        </div>
-  
-  
-        <%# <!--  step 2 setup   --> %>
-        <div id="settings" class="content" role="tabpanel">
-  
-  
-          <div id="capture-page-content" class="full-strecth-flex-vertical center-content">
-             <!-- <h3>Setup</h3> -->
+
+
+</div>
+
+
+<div id="capture-page-content" class="full-strecth-flex-vertical center-content">
+    <!-- <h3>Setup</h3> -->
   
             <div id="webcam-msg"><p><b>Requesting camera access... <br />(<a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox</a>, <a href="https://play.google.com/store/apps/details?id=com.opera.browser">Opera</a> or Chrome on Android, or <a href="https://itunes.apple.com/us/app/bowser/id560478358">Bowser</a> on iOS). Please click "Allow" when prompted, or try the <a href="/upload">Upload interface</a>.</b></p></div>
             <div id="webcam">
@@ -126,7 +125,7 @@
               </div>
             </div>
   
-            <div style="padding-bottom:0px;padding-top:0.5rem;">
+            <div id="spectrum-ex" style="padding-bottom:0px;padding-top:0.5rem;">
               <div class="spectrum-example-vertical" style="display:none;">
                 <p style="margin-top:4px;">Point your spectrometer at a light and click on the video above to choose a cross-section to sample. (<a href="http://publiclab.org/wiki/spectral-workbench-usage">Learn more &raquo;</a>)</p>
                 <img src="/images/example-cfl-vertical.png" style="height:200px; padding-bottom:1rem" id="cfl-resp"/>
@@ -138,9 +137,9 @@
             </div>
   
             
-            <div style="text-align:center;">
+            <div style="text-align:center;" id="capture-option" class="capture-settings-hide">
             <p style="padding-top:5px;">
-              <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-arrows-v" aria-hidden="true"></i><span class="responsive-hide"> Auto-select Sample Row</span></a>
+              <a rel="tooltip" title="Auto detect cross-section" class="btn btn-default" onclick="$W.auto_detect_sample_row()" data-original-title="Auto select sample row"><i class="fa fa-arrows-v" aria-hidden="true"></i><span class="responsive-hide"> Auto-select Sample Row</span></a>
               <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-arrows-h" aria-hidden="true"></i><span class="responsive-hide"> Flip image</span></a>
               <a rel="tooltip" title="Rotate video 90 &deg;" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-rotate-right" aria-hidden="true"></i><span class="responsive-hide"> Rotate</span></a>
             </p>
@@ -149,13 +148,12 @@
             </p>
   
   
-            <a class="btn btn-large btn-primary" href="#capture" onClick="$('#capture-btn').addClass('active');$('#settings-btn').removeClass('active');" data-toggle="tab" id="setting-page-next">Begin capturing &raquo;</a>
+            <button class="btn btn-large btn-primary" data-toggle="tab" id="setting-page-next">Begin capturing &raquo;</button>
             </div>
 
             <hr />
-          </div>
 
-           <script>
+            <script>
               jQuery(document).ready(function() {
                $W.setSampleRowClickListener()
   
@@ -164,18 +162,12 @@
                <% end %>
   
               })
-              </script>
-  
-  
-         <!-- <p><b>Offline use:</b> To use this interface offline, load the offline capture tool <a href="/capture/offline">by clicking here</a>. Once the page loads, you'll be able to access that page even without internet access; it will be stored in your browser.</p> -->
-  
-        </div>
+            </script>
+</div>
 
-        <!--     step 3 capturing phasing-->
-        <div id="capture" class="content center-content" role="tabpanel">
-  
-          <div class="full-strecth-flex-horizontal center-content">
-            <!-- <h3>Capturing Phase</h3> -->
+
+ <div id="capture-settings" class="full-strecth-flex-horizontal center-content">
+    <!-- <h3>Capturing Phase</h3> -->
             <div id="canvas-prev-responsive" class="responsive-hide">
               <div id="sidebar" style="width: 26em; margin: 2rem auto 2rem auto">
                 <div class="hidden-phone" >
@@ -216,44 +208,17 @@
                 <p style="margin-left: 1.8em;margin-top:0rem;width: 96%;">This display shows the last few seconds of data, descending. The top, newest row of pixels is used by default to generate the graph. This can be changed later.</p>
               </div>
             </div>
-          </div>
-
 
+          <div id="test-save-hide">
           <button type="button" class="demo-button next" id="capture-page-next">Save Capture</button>
           <p style="margin-top: 0.5em;text-align: center;">Once you save the capture, you cannot go back here.</p>
-  
-  
 
           <img style="display:none;background:#333;" id="spectrum-preview" />
-        </div>
-  
-  
-  
-  
-        <!--  step 4 Plotting phasing-->
-        <div id="plotting" class="content center-content" role="tabpanel">
-          Here Is the result plot
-          <div class="swb-graphing center-content">
-            <div id="graph1"></div>
           </div>
+</div>
+<body>
   
-          <div id="plotting-note">
-            Use the bottom graph as the navigator to zoom into any section of the plot by dragging
-            to select the target region span. User could also move the span in the navigator
-          </div>
-  
-          <button class="demo-button" id="restart" style="margin-top: 1em">Restart</button>
-  
-          <script>
-            jQuery(document).ready(function() {
-              $("#restart").on('click', function (params) {
-                location.reload();
-              });
-            })
-          </script>
-        </div>
-      </div>
-    </div>
+  <!--  step 4 Plotting phasing-->
   
     <script>
       (function() {
@@ -275,89 +240,31 @@
       })();
     </script>
 </body>
-  
-<script>
-$(document).ready(function () {
-    var stepper = new Stepper($('.bs-stepper')[0], {
-    linear: false,
-    animation: true,
-    selectors: {
-        steps: '.step',
-        trigger: '.step-trigger',
-        stepper: '.bs-stepper'
-    }
-    });
-    $("#landing-page-trigger").on('click', function (params) {
-    stepper.to(1);
-    });
-    $("#landing-page-next").on('click', function (params) {
-    stepper.to(2);
-    });
 
-    
-    $("#setting-trigger").on('click', function (params) {
-    stepper.to(2);
-    });
-    $("#setting-page-next").on('click', function (params) {
-    stepper.to(3);
-    });
-
-
-    $("#capture-trigger").on('click', function (params) {
-    stepper.to(3);
-    });
 
-    var imageData;
-    $("#plot-trigger").on('click', function (params) {
-    stepper.to(4);
-    stepper.to(4);  //is this even needed here!!!
-    $("#capture-trigger").prop('disabled', true);
-    $("#setting-trigger").prop('disabled', true);
-    $("#landing-page-trigger").prop('disabled', true);
 
-    $W.saveSpectrum();
-    imageData = $W.full_data;
-    console.log('what is my image data like', JSON.stringify($W.full_data));
 
-    graph = new SpectralWorkbench.Graph({
-        selector: '#graph1' // defaults to "#graph" using jQuery selector syntax
-    });
+<script>
+    $(document).ready(function () {
 
-    var imageDataFormatted = [];
-    imageData.forEach((item, index) => {
-        var formattedItem = [index, item[item.length-1]]
-        imageDataFormatted.push(formattedItem)
-    })
+$("div#capture-page-content").hide();
+$("div#capture-settings").hide();
 
-    var spectrum = new SpectralWorkbench.Spectrum(imageDataFormatted, graph);
-    // console.log('spectrum', spectrum.getJSON())
-    graph.load(spectrum);
-    });
 
+$('#testnav .btn-group button').on('click', function () {
+	$('#testnav .btn-group' ).find('button.active').removeClass('active');
+	$(this).addClass('active');
+});
 
-    $("#capture-page-next").on('click', function (params) {
-    stepper.to(4);
-    $("#capture-trigger").prop('disabled', true);
-    $("#setting-trigger").prop('disabled', true);
-    $("#landing-page-trigger").prop('disabled', true);
+$("button#landing-page-next").on('click', function () {
+  $('#settingsbtn').trigger('click');
+});
 
-    $W.saveSpectrum();
-    imageData = $W.full_data;
-    console.log('what is my image data like', JSON.stringify($W.full_data));
 
-    graph = new SpectralWorkbench.Graph({
-        selector: '#graph1' // defaults to "#graph" using jQuery selector syntax
-    });
+  $("button#setting-page-next").on('click', function () {
+  $('#capturebtn').trigger('click');
+});
 
-    var imageDataFormatted = [];
-    imageData.forEach((item, index) => {
-        var formattedItem = [index, item[item.length-1]]
-        imageDataFormatted.push(formattedItem)
-    })
 
-    var spectrum = new SpectralWorkbench.Spectrum(imageDataFormatted, graph); 
-    // console.log('spectrum', spectrum.getJSON())
-    graph.load(spectrum);
     });
-})
-</script>
\ No newline at end of file
+      </script>