Browse files

new mobile progress

  • Loading branch information...
1 parent 0cbc0ad commit 2fa2c6a7daee045399cd6662bbe35b66f6a6e8e5 @jywarren committed Dec 11, 2012
View
30 webserver/app/views/capture/_save_mobile.html.erb
@@ -0,0 +1,30 @@
+<h2>Save this spectrum</h2>
+
+<% if !logged_in? %>
+ <p>You must be <a target="_blank" href="/login">logged in</a> to save spectra.</p>
+<% else %>
+ <p>(logged in as <%=h current_user.login %>)</p>
+<% end %>
+
+<form action="/spectrums" method="post" id="saveForm" target="_blank" onSubmit="$W.cancelSave();window.location='#page1'">
+ <label for="spectrum_title">Title:</label><br />
+ <input name="spectrum[title]" id="spectrum_notes" type="text" /><br />
+ <label for="tags">Tags:</label><br />
+ <input name="tags" id="spectrum_tags" value="mobile," type="text" /><br />
+ <label for="spectrum_notes">Notes:</label>
+ <textarea name="spectrum[notes]" id="spectrum_notes"></textarea><br />
+ <input name="dataurl" type="hidden" id="dataurl" />
+ <input name="geotag" type="hidden" id="geotag" />
+ <input name="lat" type="hidden" id="lat" />
+ <input name="lon" type="hidden" id="lon" />
+ <% if logged_in? %>
+ <select name="spectrum[calibration_id]" id="calibration_id">
+ <% current_user.tag('calibration').each do |spectrum| %>
+ <option value="<%= spectrum.id %>"><%= spectrum.title %> (<%= time_ago_in_words(spectrum.created_at) %>)</option>
+ <option value="calibration">[+] New calibration</option>
+ <% end %>
+ </select>
+ <% end %>
+</form>
+<a data-role="button" data-transition="fade" data-theme="b" href="javascript:void(0);" onClick="$('#saveForm').submit()">Save</a>
+<a data-role="button" data-transition="fade" data-theme="d" href="#page1" onClick="$W.cancelSave()">&laquo; Back</a>
View
179 webserver/app/views/capture/index-mobile-alt.html.erb
@@ -5,105 +5,116 @@
<script language="javascript" type="text/javascript" src="/javascripts/flot/jquery.flot.crosshair.js"></script>
<script language="javascript" type="text/javascript" src="/javascripts/flot/jquery.flot.threshold.min.js"></script>
-<div data-role="page" id="page1">
+<style>
+ .navbar-fixed-top .nav li {
+ padding-top:3px;
+ font-family:junction,sans-serif;
+ }
+ #webcam-msg {
+ position:absolute;
+ background:#eee;
+ color:#aaa;
+ text-align:center;
+ height:240px;
+ width:320px;
+ font-size:14px;
+ }
+ #webcam-msg p {
+ padding:100px 20px;
+ }
+ #webcam {
+ position:absolute;
+ z-index:1;
+ }
+</style>
+
+<div class="navbar navbar-inverse navbar-fixed-top" style="margin-bottom:20px;padding-top:0;">
+ <div class="navbar-inner" style="padding:0 10px;">
+ <a class="brand" href="/"><img style="padding:-2px;width:20px;" src="/images/logo.png" /></a>
+ <ul class="nav">
+ <li><a href="#capture" data-toggle="tab">Capture</a></li>
+ <li class="active"><a href="#settings" data-toggle="tab">Settings</a></li>
+ </ul>
+ <a style="margin-left:6px;" href="http://publiclaboratory.org/wiki/spectral-workbench" class="btn pull-right"><i class="icon icon-question-sign"></i></a>
+ </div>
+</div>
- <div data-role="content" style="padding: 15px">
+<div class="tab-content">
+<div id="settings" class="tab-pane active">
+ <div id="webcam-msg"><p>Requesting camera access... (Opera Mobile only)</p></div>
+ <div style="width:100%;" id="webcam"></div>
- <% if params[:action] == "match" %>
- <p><b>Click "Match" to find the closest spectrum in the set "<%= @set.title %>"</b></p>
- <% end %>
+ <div style="padding-bottom:10px;padding-top:250px;">
+ <h4 style="margin-top:4px">Examples: <small>(<a href="http://publiclaboratory.org/wiki/spectral-workbench-usage">Learn more &raquo;</a>)</small></h4>
+ <img class="img-rounded" src="/images/example-cfl.jpg" style="width:100px;height:80px" />
+ <img class="img-rounded" src="/images/example-sky.jpg" style="width:100px;height:80px" />
+ </div>
- <div id="graph" style="width:100%;height:100px;"></div>
- <canvas style="width:100%;height:100px;" id="canvas"></canvas>
- <div style="width:100%;display:none;" id="webcam"></div>
+ <form class="form" style="display:none;">
+ <label for="sample_slider">Range</label>
+ <input type="range" name="slider" id="sample_slider" value="250" min="0" max="640" data-highlight="false" />
+ </form>
- <span id="match"></span>
+ <a class="btn btn-large btn-primary" href="#capture" data-toggle="tab">Start capturing &raquo;</a>
- <% if params[:action] == "match" %>
- <a data-role="button" data-theme="b" href="javascript:void()" onClick="$W.match();">Match</a>
- <a data-role="button" data-transition="fade" data-theme="c" href="#page2" onClick="$W.saveSpectrum();">Save</a>
- <% else %>
- <div class="btn-group">
- <a class="btn btn-primary btn-large" href="#page2" onClick="$W.saveSpectrum();">Save</a>
- <a class="btn btn-large" href="#page2" onClick="$W.saveSpectrum();"><i class="icon icon-question-sign"></i></a>
- </div>
- <% end %>
+</div>
- <label for="geotag-toggle">Geotag</label>
- <input type="checkbox" name="geotag-toggle" id="geotag-toggle" type="checkbox" />
- <label for="rgb-toggle">RGB</label>
- <input type="checkbox" name="rgb-toggle" id="rgb-toggle" onChange="$W.toggle_mode()" />
+<div id="capture" class="tab-pane">
- <% unless logged_in? %><p><a href="/login">Log in</a> to use a recent calibration</p><% end %>
- <p>This interface works only on <a href="https://play.google.com/store/apps/details?id=com.opera.browser">Opera Mobile</a>, the only mobile browser currently supporting the MediaStream API</p>
+ <% if params[:action] == "match" %>
+ <p><b>Click "Match" to find the closest spectrum in the set "<%= @set.title %>"</b></p>
+ <% end %>
+
+ <div id="graph" style="width:100%;height:100px;"></div>
+ <canvas style="width:100%;height:100px;" id="canvas"></canvas>
- <p><a href="?m=false">Desktop site</a> | <a href="https://github.com/jywarren/spectral-workbench">SpectralWorkbench is free software</a> by <a href="http://publiclaboratory.org">Public Lab</a></p>
+ <span id="match"></span>
+ <div class="btn-group">
+ <% if params[:action] == "match" %>
+ <a class="btn btn-primary" href="javascript:void()" onClick="$W.match();">Match</a>
+ <a class="btn btn-primary" href="#page2" onClick="$W.saveSpectrum();">Save</a>
+ <% else %>
+ <a class="btn btn-primary btn-large" href="#save" onClick="$W.saveSpectrum();">Save</a>
+ <a class="btn btn-large" href="#page2" onClick="$W.saveSpectrum();"><i class="icon icon-question-sign"></i></a>
+ <% end %>
</div>
-</div>
-<div data-role="page" id="page2">
- <div data-role="content" class="content" style="padding: 15px">
-
- <h2>Save this spectrum</h2>
-
- <% if !logged_in? %>
- <p>You must be <a target="_blank" href="/login">logged in</a> to save spectra.</p>
- <% else %>
- <p>(logged in as <%=h current_user.login %>)</p>
- <% end %>
-
- <form action="/spectrums" method="post" id="saveForm" target="_blank" onSubmit="$W.cancelSave();window.location='#page1'">
- <label for="spectrum_title">Title:</label><br />
- <input name="spectrum[title]" id="spectrum_notes" type="text" /><br />
- <label for="tags">Tags:</label><br />
- <input name="tags" id="spectrum_tags" value="mobile," type="text" /><br />
- <label for="spectrum_notes">Notes:</label>
- <textarea name="spectrum[notes]" id="spectrum_notes"></textarea><br />
- <input name="dataurl" type="hidden" id="dataurl" />
- <input name="geotag" type="hidden" id="geotag" />
- <input name="lat" type="hidden" id="lat" />
- <input name="lon" type="hidden" id="lon" />
- <% if logged_in? %>
- <select name="spectrum[calibration_id]" id="calibration_id">
- <% current_user.tag('calibration').each do |spectrum| %>
- <option value="<%= spectrum.id %>"><%= spectrum.title %> (<%= time_ago_in_words(spectrum.created_at) %>)</option>
- <option value="calibration">[+] New calibration</option>
- <% end %>
- </select>
- <% end %>
- </form>
- <a data-role="button" data-transition="fade" data-theme="b" href="javascript:void(0);" onClick="$('#saveForm').submit()">Save</a>
- <a data-role="button" data-transition="fade" data-theme="d" href="#page1" onClick="$W.cancelSave()">&laquo; Back</a>
+ <hr />
+ <form class="form">
+ <label class="checkbox inline" for="geotag-toggle">Geotag</label>
+ <input type="checkbox" name="geotag-toggle" id="geotag-toggle" type="checkbox" />
+ <label class="checkbox inline" for="rgb-toggle">RGB</label>
+ <input type="checkbox" name="rgb-toggle" id="rgb-toggle" onChange="$W.toggle_mode()" />
+ </form>
- </div>
+ <% unless logged_in? %><p><a href="/login">Log in</a> to use a recent calibration</p><% end %>
+ <p>This interface works only on <a href="https://play.google.com/store/apps/details?id=com.opera.browser">Opera Mobile</a>, the only mobile browser currently supporting the MediaStream API</p>
+
+</div>
+
+<div id="save" class="tab-pane">
+ <%= render :partial => "save_mobile" %>
</div>
-<div data-role="page" id="page3">
- <div data-role="fieldcontain">
- <fieldset data-role="controlgroup" data-mini="true">
- <label for="sample_slider">Range</label>
- <input type="range" name="slider" id="sample_slider" value="250" min="0" max="640" data-highlight="false" />
- </fieldset>
- </div>
</div>
<script> (function () {
- $W.initialize({
- calibrated:<%= !@calibration.nil? %>,
- mobile:true
- })
- 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 %>
+ $W.initialize({
+ calibrated:<%= !@calibration.nil? %>,
+ mobile:true
+ })
+ 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>
View
4 webserver/app/views/layouts/bootstrap.html.erb
@@ -41,6 +41,7 @@ and justice issues. PLOTS provides an online research space for citizens, linkin
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
+ <% if params[:controller] != "capture" %>
<div id="header">
<a id="logo" href="/"><img src="/images/logo.png" /></a>
<h3 class="hidden-desktop visible-phone pull-left"><a class="title" href="/">SW</a></h3>
@@ -92,7 +93,9 @@ and justice issues. PLOTS provides an online research space for citizens, linkin
</ul>
</div>
+ <% end %>
+ <% if params[:controller] != "capture" %>
<div class="container">
<% if flash[:notice] %><div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><%= flash[:notice] %></div><% end %>
<% if flash[:error] %><div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">×</button><%= flash[:error] %></div><% end %>
@@ -106,6 +109,7 @@ and justice issues. PLOTS provides an online research space for citizens, linkin
<% end %>
<% end %>
</div>
+ <% end %>
<%= yield %>

0 comments on commit 2fa2c6a

Please sign in to comment.