app/views/capture/index2.html.erb
<html lang="en" role="main">
<%= javascript_include_tag "adapterjs/publish/adapter.min.js" %>
<%= javascript_include_tag "spectral-workbench/examples/capture/capture.js" %>
<%= javascript_include_tag "spectral-workbench/dist/capture.dist.js" %>
<%= javascript_include_tag "new-interface" %>
<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" />
<%= stylesheet_link_tag "new-interface" %>
<% unless logged_in? %>
<div class="modal fade" id="login-prompt-modal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" style="text-align: center">Log in for full functionality</h4>
</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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="login-button" onClick="$('#login-prompt-modal').modal('hide');$('#loginmodal').modal('show');">Log in</button>
<button type="button" class="btn btn-default" id="login-dismiss" data-dismiss="modal" onClick="$('#login-prompt-modal').modal('hide');">No thanks</button>
</div>
</div>
</div>
</div>
<% end %>
<nav class="navbar navbar-inverse capture-navbar">
<div class="navbar-inner">
<a class="brand" href="/"><img style="padding:-2px;width:20px;" src="/images/logo.png" alt="Spectral Workbench logo" /></a>
<div class="pull-right">
<% unless logged_in? %><a onClick="$('#loginmodal').modal('show');" class="btn" id="login-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>
<% if logged_in? %><p id="login-status">(logged in as <%=h current_user.login %>)<p><% end %>
<p class="capture-messages" style="float:left;"></p>
</div>
</nav>
<body class="full-strecth-block">
<div class="full-strecth-block bs-stepper">
<div id="testnav" class="bs-stepper-header" role="tablist" style="z-index:150;" role="navigation">
<%# <!-- your steps here --> %>
<div class="step" data-target="#landing-page">
<button type="button" class="step-trigger" role="tab" id="homebtn" onclick="homePage()">
<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" id="settingsbtn" onclick="settingsPage()">
<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" id="capturebtn" onclick="capturePage()">
<span class="bs-stepper-label">Capture</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#save">
<button type="button" class="step-trigger" role="tab" id="savebtn" onclick="savePage()">
<span class="bs-stepper-label">Save</span>
</button>
</div>
</div>
<%# <!-- step 1 Landing Page --> %>
<div id="landing-page-content">
<h1>
<div style="padding-bottom:1rem">
<img src="/images/logo.png" alt="Spectral Workbench logo">
</div>
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
application with upload or capture image.
</p>
<br><br><br>
<button class="demo-button next" id="landing-page-next">Capture Spectra</button>
<br><br><br>
<span>
<a href="https://spectralworkbench.org/dashboard" aria-label="Go to home"><i class="fa fa-home"></i></a>
<a href="https://github.com/publiclab/spectral-workbench.js" aria-label="Checkout the spectral workbench library on github"><i class="fa fa-github"></i></a>
<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" aria-label="Follow spectral workbench on twitter"><i class="fa fa-twitter"></i></a>
<a href="https://publiclab.org/wiki/spectral-workbench-help" aria-label="Click here in case of help regarding spectral workbench"><i class="fa fa-info-circle"></i></a>
</span>
</div>
<%# <!-- step 2 Capture Settings --> %>
<div id="capture-page-content" class="full-strecth-flex-vertical center-content">
<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">
<div id="heightIndicator" style="display:none;position:absolute;margin:0;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin-top:120px;width:320px;font-weight:bold;">
<div class="vertical" style="margin-top:3px;padding:2px;background:black;float:right;display:none; color: #1AA7EC;">BLUE</div>
<div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:right;color: red;">RED</div>
<div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:left;color: #1AA7EC;">BLUE</div>
<div class="vertical" style="margin-top:3px;padding:2px;background:black;float:right;margin-top:200px;display:none;color: red;">RED</div>
</div>
</div>
<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 »</a>)</p>
<img src="/images/example-cfl-vertical.png" style="height:136px; padding-bottom:1rem" id="cfl-resp" alt="vertical spectrum example image" />
</div>
<div class="spectrum-example-horizontal">
<p style="margin-top:4px;">Point your spectrometer at a light and click on the video above to choose a cross-section as shown below. (<a href="http://publiclab.org/wiki/spectral-workbench-usage">Learn more »</a>)</p>
<img class="img-rot" width="480px" src="/images/calibration-example.png" alt="horizontal spectrum example image" />
</div>
</div>
<div style="text-align:center;" id="capture-option" class="capture-settings-hide">
<p style="padding-top:5px;">
<a id="geotag-btn" rel="tooltip" title="Geocode" class="btn btn-default" onClick="$('#geotag-btn').button('toggle');$('#geotag').val('true'!=$('#geotag').val());$W.geolocate()"><i class="fa fa-map-marker"></i></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 °" 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>
<div class="select" style="padding-top:5px;">
<label for="videoSource">Camera source: </label><select id="videoSource"></select>
</div>
<button class="btn btn-large btn-primary" data-toggle="tab" id="setting-page-next">Begin capturing »</button>
</div>
<hr />
<script>
jQuery(document).ready(function() {
$W.setSampleRowClickListener()
<% if ios? || (mobile? && !opera?) %>
$W.toggle_rotation();
<% end %>
})
</script>
</div>
<%# <!-- step 3 Capture Settings Graph --> %>
<div id="capture-settings" class="full-strecth-flex-horizontal center-content">
<div class="float-container">
<div class="float-child-left responsive-hide">
<div id="sidebar" style="width: 26em;">
<div class="hidden-phone" >
<div id="heightIndicatorPrev" style="position:absolute;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin: 50px 0 0;width:100%;"></div>
<canvas style="width:100%;height:273px;" id="preview"></canvas>
</div>
<div class="btn-group toolbar" data-toggle="buttons-checkbox" style="margin-bottom:2em; margin-left: 9em; margin-top: 2em; padding: 1rem">
<a id="geotag-btn" rel="tooltip" title="Geocode" class="btn btn-default active" onClick="$('#geotag-btn').button('toggle');$('#geotag').val('true'!=$('#geotag').val());$W.geolocate()"><i class="fa fa-map-marker"></i></a>
<a rel="tooltip" title="Rotate video" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-repeat"></i></a>
<a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa 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-expand"></i></a>
</div>
<p style="padding: 1rem">Note: Use the tools above to make adjustment of the capturing. To adjust the sampling yellow bar location, go back to the previous step.</p>
<div>
<p>Using calibration:</p>
<select aria-label="Current calibration" name="spectrum[calibration_id]" class="select-calibration select-calibration-capture span2">
<%= render partial: 'capture/calibrations', locals: { calibrations: @calibrations, calibration: @calibration } %>
</select>
<a class="btn btn-inverse btn-switch-calibration-capture">Switch calibration</a>
</div>
<script>
jQuery(document).ready(function() {
$W.observe_contrast(
false,
function() {
$('#cfl-detect i').css('color','red');
},
function() {
$('#cfl-detect i').css('color','black');
})
$('#sidebar .hidden-phone').on('click', function () {
$('#settingsbtn').trigger('click');
})
//changing route from /capture to /capture/v2
$('.btn-switch-calibration-configure').click(function() {
window.location = "/capture/v2?calibration_id=" + $('.select-calibration-configure').val()
});
$('.btn-switch-calibration-capture').click(function() {
window.location = "/capture/v2?calibration_id=" + $('.select-calibration-capture').val()
});
})
</script>
</div>
</div>
<div class="float-child-right">
<div id="responsive-graph">
<div class="btn-group toolbar" data-toggle="buttons-radio">
<a rel="tooltip" title="Default mode" class="btn btn-default btn-sm" onClick="$W.toggle_mode()"><i class="fa fa-circle-o"></i></a>
<a rel="tooltip" title="RGB mode" class="btn btn-default btn-sm" onClick="$W.toggle_mode()"><i class="fa fa-adjust"></i></a>
<a rel="tooltip" title="Combined readout" class="btn btn-default btn-sm" onClick="$W.show_combined()"><i class="fa fa-list-ul"></i></a>
<a rel="tooltip" id="cfl-detect" title="Detected fluorescent light" class="btn btn-default" onClick=""><i class="fa fa-lightbulb-o"></i></a>
</div>
<div id="graph" style="width: 100%; margin-bottom:2em"></div>
<canvas style="background:#333;width:100%;height:100px;width: 96%;margin-left: 1.8em;" id="canvas"></canvas>
<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 class="btn-group options">
<button type="button" class="demo-button next" id="json-download" onClick="prompt('Here is an array of the spectral data: ',JSON.stringify($W.full_data))">Get JSON</button>
<button type="button" class="demo-button next" id="capture-page-next" onClick="$W.saveSpectrum();">Save Capture</button>
<button type="button" class="demo-button next" id="download-live-spectrum" onClick="$W.downloadSpectrum();">Download</button>
</div>
<div class="responsive-cal" style="padding-top: 20px;">
<p><small>Using calibration:</small></p>
<select aria-label="Current calibration" name="spectrum[calibration_id]" class="select-calibration select-calibration-capture span2">
<%= render partial: 'capture/calibrations', locals: { calibrations: @calibrations, calibration: @calibration } %>
</select>
<a class="btn btn-inverse btn-switch-calibration-capture">Switch calibration</a>
</div>
</div>
</div>
</div>
<%# <!-- step 4 Saving the data --> %>
<div id="save-page" class="full-strecth-flex-vertical center-content">
<%= render :partial => "newsave" %>
</div>
<script>
(function() {
$W.initialize({
calibrated: <%= !@calibration.nil? %>,
interface:"capture",
mode:"combined",
flipped: <%= @calibration && @calibration.is_flipped || params[:flipped] == 'true' %>,
<% if @calibration && @calibration.has_powertag('video_row') %>
video_row: <%= @calibration.powertag('video_row') %>,
<% end %>
width: 640
})
setInterval($W.getRow,100)
<% if @calibration %>
$W.calibrated = true
$W.calibration_id = <%= @calibration.id %>
$W.start_wavelength = <%= @start_wavelength %>
$W.end_wavelength = <%= @end_wavelength %>
flotoptions.xaxis.show = true
<% else %>
$W.calibrated = false
<% end %>
<% if params[:action] == "match" %>
$W.set = <%= @set.id %>
<% end %>
})();
</script>
</body>
</html>