app/views/capture/index.html.erb
<% unless logged_in? %>
<div class="modal fade hide" id="login-prompt-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<b>Log in for full functionality</b>
</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">
<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 btn-no-thanks">No thanks</a>
</div>
</div>
<% end %>
<div id="header" class="navbar navbar-inverse navbar-static-top capture-navbar" style="padding-top:0;">
<div class="navbar-inner" style="padding:0 10px;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
</a>
<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>
<span class="tool-toggle"><a class="btn btn-inverse" onClick="$('#tool-pane').toggle()"><i class="fa fa-white fa-wrench"></i></a></span>
</div>
<ul class="nav" style="margin:0">
<li id="capture-btn"><a href="#capture" data-toggle="tab"><i class="fa fa-white fa-camera"></i><span class="hidden-phone"> Capture</a></a></li>
<li id="settings-btn" class="active"><a href="#settings" data-toggle="tab"><i class="fa fa-white fa-cog"></i><span class="hidden-phone"> Settings</span></a></li>
</ul>
<p class="capture-messages" style="float:left;padding:10px 16px 0;"></p>
</div>
</div>
<div class="tab-content capture" style="padding:0 20px;">
<div id="settings" class="tab-pane active">
<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;">BLUE</div>
<div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:right;">RED</div>
<div class="horizontal" style="margin-top:3px;padding:2px;background:black;float:left;">BLUE</div>
<div class="vertical" style="margin-top:3px;padding:2px;background:black;float:right;margin-top:200px;display:none;">RED</div>
</div>
<div id="webcam-msg"><p><b>Requesting camera access... <br />(<a href="https://firefox.com">Firefox</a>, <a href="https://play.google.com/store/apps/details?id=com.opera.browser">Opera</a> or Chrome on Android. (Live capture not yet available on iOS. <a href="http://publiclab.org/spectral-workbench#Browsers">More on compatibility</a>) Please click "Allow" when prompted, or try the <a href="/upload">Upload interface</a>.</b></p></div>
<div style="" id="webcam"></div>
<div style="padding-bottom:10px;padding-top:250px;">
<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:200px" />
</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 width="480px" src="/images/calibration-example.png" />
</div>
</div>
<script>
jQuery(document).ready(function() {
$W.setSampleRowClickListener()
<% if ios? || (mobile? && !opera?) %>
$W.toggle_rotation();
<% end %>
})
</script>
<p style="padding-top:5px;">
<a rel="tooltip" title="" class="btn btn-inverse" 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-inverse 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 °" class="btn btn-inverse btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-white fa-rotate-right"></i> Rotate</a>
</p>
<p style="padding-top:5px;">
Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
</p>
<% if @calibration %>
<p class="calibration-used">Using spectrum <%= @calibration.id %> "<a target="_blank" href="/spectrums/<%= @calibration.id %>"><%= @calibration.title %></a>" (captured <%= time_ago_in_words(@calibration.created_at) %> ago) as a calibration reference.</p>
<p>If that's wrong, you can ignore this, and calibrate later with the correct reference. Or choose a new calibration:</p>
<div>
<form class="form-inline">
<select name="spectrum[calibration_id]" class="select-calibration select-calibration-configure">
<%= render partial: 'capture/calibrations', locals: { calibrations: @calibrations, calibration: @calibration } %>
</select>
<a class="btn btn-inverse btn-switch-calibration-configure">Switch calibration</a>
</form>
</div>
<% end %>
<a class="btn btn-large btn-primary" href="#capture" onClick="$('#capture-btn').addClass('active');$('#settings-btn').removeClass('active');" data-toggle="tab">Begin capturing »</a>
<hr />
<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>
<%= render :partial => "capture" %>
<div id="save" class="tab-pane">
<%= render :partial => "save" %>
</div>
<div id="macros" class="tab-pane">
<%= render :partial => "macros" %>
</div>
</div>
<script>
jQuery(document).ready(function() {
flotoptions.grid = {
clickable: true,
hoverable:true,
borderWidth: 0,
color: "#ccc",
backgroundColor: "#111"
}
flotoptions.colors = [ "#ccc", "#E02130", "#FAB243", "#429867", "#2B5166" ]//, "#482344" ]
$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
})
<% if params[:debugChrome] %>
$W.debugChrome = true;
<% end %>
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 %>
if ($('body').width() > 768) $('#tool-toggle').hide()
else $('#tool-pane').hide()
})
</script>