<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8' />
    <meta http-equiv='content-type' content='text/html; charset=utf-8' />

    <title>Bokeh Spectrogram Demo</title>

    {% for raw in bokeh.css_raw %}
        <style>{{ raw|safe }}</style>
    {% endfor %}
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
    <link href="static/css/spectrogram.css" type="text/css" rel="stylesheet" />

  </head>
  <body>
    {# start CONTENT BLOCK #}

    {# bk-bs is bokeh's namespacing of normal bootstrap classes #}
      <div class="bk-bs-row heading">
        <div class="heading-container">
          <h1>Bokeh Spectrogram Demo</h1>
          <h3>with custom templating</h3>
        </div>
      </div>
    <div class="bk-bs-container">
        <div class="bk-bs-row">
            <div class="bk-bs-col-sm-offset-3 bk-bs-col-sm-8 explan-text">
              <p>
              This spectrogram demo uses <a href="https://people.csail.mit.edu/hubert/pyaudio/">PyAudio</a> to
              sample the computer's microphone, <a href="http://www.numpy.org">NumPy</a> to compute the FFT and
              power spectrum of the samples, <a href="http://bokeh.pydata.org/en/latest/">Bokeh</a> to create
              embeddable plots and widgets to display and interact with the data, and a simple
              <a href="http://flask.pocoo.org">Flask</a> application to serve up the
              single page app written in <a href="http://coffeescript.org">CoffeeScript</a>. The complete source
              code can be found in the Bokeh GitHub repository
              <a href="https://github.com/bokeh/bokeh/tree/master/examples/embed/spectrogram">here</a>.
              </p>
            </div>

        </div>
        <div class="bk-bs-row">
            <div class="bk-bs-col-sm-2">
              <div id="slider-box">
                <div id="freq-slider">
                    {{ divs.freq_slider|safe }}
                </div>
                <div id="gain-slider">
                    {{ divs.gain_slider|safe }}
                </div>
                <div id="button-box">
                    <input type="radio" id="bkplay" name="bkspec" checked="true" />
                    <label for="bkplay"></label>
                    <input type="radio" id="bkpause" name="bkspec"/>
                    <label for="bkpause"></label>
                </div>
              </div>
            </div>
            <div class="bk-bs-col-sm-8">
                <div id="spectrogram">
                    {{ divs.spec|safe }}
                </div>
            </div>
        </div>
        <div class="bk-bs-row">
            <div class="bk-bs-col-sm-8">
                <div class="bk-bs-row">
                    <div class="bk-bs-col-sm-3">
                        <div id="signal-label" class="clearfix">
                          <h4 class="pull-right">Signal</h4>
                        </div>
                    </div>
                    <div class="bk-bs-col-sm-6 line-plots">
                        <div id="signal">
                        {{ divs.signal|safe }}
                        </div>
                    </div>
                </div>
                <div class="bk-bs-row">
                    <div class="bk-bs-col-sm-3">
                        <div id="spectrum-label" class="clearfix">
                          <h4 class="pull-right">Power Spectrum</h4>
                        </div>
                    </div>
                    <div class="bk-bs-col-sm-6 line-plots">
                        <div id="spectrum">
                        {{ divs.spectrum|safe }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="bk-bs-col-sm-2">
                <div id="equalizer">
                    {{ divs.equalizer|safe }}
                </div>
            </div>
        </div>
    </div>

    {# end CONTENT BLOCK #}

    {# start JS BLOCK #}

        {% for raw in bokeh.js_raw %}
            <script type="text/javascript">{{ raw|safe }}</script>
        {% endfor %}

        {{ script|indent(8)|safe }}
        <script type="text/javascript" src="static/js/spectrogram.js" defer></script>

    {# end JS BLOCK #}
  </body>
</html>
