Skip to content

Commit

Permalink
New capture at /v2 (#660)
Browse files Browse the repository at this point in the history
  • Loading branch information
@waridrox
waridrox authored Jul 3, 2021
1 parent fc422f9 commit 8f89e0f
Show file tree
Hide file tree
Showing 5 changed files with 367 additions and 3 deletions.
2 changes: 1 addition & 1 deletion app/assets/javascripts/capture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -773,4 +773,4 @@ $W = {
excerptCanvasContext.putImageData(sourcedata,0,0)
return excerptCanvasContext
}
}
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/application.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
*
*= require bootstrap-css/css/bootstrap.min.css
*= require bootstrap-css/css/bootstrap-responsive.min.css
*= require nvd3/build/nv.d3.css
*= require nvd3/build/nv.d3.min.css
*= require style
*= require graph
*= require comment
Expand Down
2 changes: 1 addition & 1 deletion app/views/capture/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,4 +164,4 @@
if ($('body').width() > 768) $('#tool-toggle').hide()
else $('#tool-pane').hide()
})
</script>
</script>
363 changes: 363 additions & 0 deletions app/views/capture/index2.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,363 @@
<link rel="stylesheet" href="spectral-workbench/examples/new-capture/new-capture.css">

<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>
<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">No thanks</a>
</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>
</div>
</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>


<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>
<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"><i class="fa fa-home"></i></a>
<a href="https://github.com/publiclab/spectral-workbench.js"><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"><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 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 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"/>
</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 &raquo;</a>)</p>
<img class="img-rot" width="480px" src="/images/calibration-example.png" />
</div>
</div>


<div style="text-align:center;">
<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="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>
<p class="responsive-hide" style="padding-top:5px;">
Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
</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>
</div>

<hr />
</div>

<script>
jQuery(document).ready(function() {
$W.setSampleRowClickListener()

<% if ios? || (mobile? && !opera?) %>
$W.toggle_rotation();
<% 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>

<!-- 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="canvas-prev-responsive" class="responsive-hide">
<div id="sidebar" style="width: 26em; margin: 2rem auto 2rem auto">
<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 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>
<script>
jQuery(document).ready(function() {

$W.observe_contrast(
false,
function() {
$('#cfl-detect i').css('color','red');
},
function() {
$('#cfl-detect i').css('color','white');
})
})

</script>
</div>
</div>
<div id="capture-phase-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>
</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>
</div>


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

<script>
(function() {

$W.initialize({
calibrated: false,
interface:"capture",
mode:"combined",
flipped: false,
width: 640
})

setInterval($W.getRow,100)
$W.calibrated = false

if ($('body').width() > 768) $('#tool-toggle').hide()
else $('#tool-pane').hide()

})();
</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
});

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


$("#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);

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

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>
1 change: 1 addition & 0 deletions config/routes.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
get '/device/claim' => 'device#claim'

get '/capture' => 'capture#index'
get '/capture/v2' => 'capture#index2'
get '/capture/recent_calibrations' => 'capture#recent_calibrations'

# Registered user pages:
Expand Down

0 comments on commit 8f89e0f

Please sign in to comment.