publiclab/spectral-workbench

<div id="capture" class="tab-pane">

  <div id="sidebar" class="span2" style="margin-left:0;margin-bottom:20px;">

    <div class="hidden-phone">

      <div id="heightIndicatorPrev" style="position:absolute;margin:0;z-index:999;border-right:0px solid #ff4;border-bottom:2px solid #ff4;height:1px;margin-top:50px;width:100%;"></div> 
      <a href="#settings" onClick="$('#capture-btn').removeClass('active');$('#settings-btn').addClass('active');" data-toggle="tab"><canvas style="width:100%;height:100px;" id="preview"></canvas>

      <a class="btn btn-primary btn-large" style="margin-bottom:4px;width:80%;" data-toggle="tab" href="#save" onClick="$W.saveSpectrum();"><i class="fa fa-white fa-save"></i> Save</a>
      <a class="btn btn-inverse btn-large" style="margin-bottom:8px;width:80%;" onClick="window.open($W.canvas.toDataURL(),'_newtab').focus()"><i class="fa fa-white fa-download"></i> Download</a>
    </div>

    <div class="tool-pane" id="tool-pane">
 
      <p><small><b>ADJUSTMENTS</b></small></p>
      <div class="btn-group toolbar" data-toggle="buttons-checkbox" style="margin-bottom:5px;">

        <a id="geotag-btn" rel="tooltip" title="Geocode" class="btn btn-inverse active" onClick="$('#geotag-btn').button('toggle');$('#geotag').val('true'!=$('#geotag').val());$W.geolocate()"><i class="fa fa-white fa-map-marker"></i></a>

        <a rel="tooltip" title="Rotate video" class="btn btn-inverse btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-white fa-repeat"></i></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></a>
        <a rel="tooltip" title="Scale video" class="btn btn-inverse" onClick="$W.scale_h = parseFloat(prompt('Enter a horizontal scaling factor (default is 1):'))"><i class="fa fa-white fa-expand"></i></a>
      </div>
 
      <p><small><b>TOOLS</b></small></p>
      <div class="btn-group toolbar" style="margin-bottom:5px;">
        <a rel="tooltip" title="Scripting" class="btn btn-inverse" href="#macros" data-toggle="tab"><i class="fa fa-white fa-terminal"></i></a>
        <a rel="tooltip" title="Find centroid" class="btn btn-inverse" onClick="$W.run_macro('warren','centroidish_continuous')"><i class="fa fa-white fa-bar-chart"></i></a>
      </div>
 
      <p><small><b>DISPLAY</b></small></p>
      <div class="btn-group toolbar" data-toggle="buttons-radio">
        <a rel="tooltip" title="Default mode" class="btn btn-inverse" onClick="$W.toggle_mode()"><i class="fa fa-white fa-circle-o"></i></a>
        <a rel="tooltip" title="RGB mode" class="btn btn-inverse" onClick="$W.toggle_mode()"><i class="fa fa-white fa fa-adjust"></i></a>
        <a rel="tooltip" title="Combined readout" class="btn btn-inverse" onClick="$W.show_combined()"><i class="fa fa-white fa fa-list-ul"></i></a>
        <a rel="tooltip" id="cfl-detect" title="Detected fluorescent light" class="btn btn-inverse" onClick=""><i class="fa fa-white fa-lightbulb-o"></i></a>
      </div>

      <hr />

      <div>

        <p><small>Using calibration:</small></p>

        <select 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','white');
            }
          )
        })
 
      </script>

    </div>

  </div>

  <div class="span10">

    <div id="graph" style="width:100%;height:200px;margin:10px 0;"></div>
    <canvas style="background:#333;width:100%;height:100px;" id="canvas"></canvas> 

    <p>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 id="message-area" style="display:none;margin-left:6px;" class="alert alert-warning"><p><b>Message!</b> Testing.</p></div>

    <div class="btn-group visible-phone">
      <a class="btn btn-primary btn-large" data-toggle="tab" href="#save" onClick="$W.saveSpectrum();"><i class="fa fa-white fa fa-save"></i> Save</a>
      <a class="btn btn-inverse btn-large" onClick="window.open($W.canvas.toDataURL(),'_newtab').focus()"><i class="fa fa-white fa fa-download"></i> Download</a>
    </div>

 
  </div>

</div>