Patternflow

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Patternflow Audio</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<header>
  <div class="brand">
    <img src="icons/icon-32.png" alt="">
    <h1>Patternflow Audio</h1>
  </div>
  <div id="status" class="status bad">Idle</div>
</header>

<section class="device-section">
  <label class="label" for="host">Device</label>
  <div class="device">
    <input id="host" type="text" spellcheck="false" value="patternflow.local">
    <button id="connect">Start</button>
  </div>
  <div id="detail" class="detail">Open the tab you want to hear, then press Start.</div>
  <div class="actions">
    <button id="stop">Stop</button>
    <button id="release" title="Hand the knobs back to the encoders">Release knobs</button>
  </div>
</section>

<section>
  <!-- Mapping moved out of the popup: boxes dragged on a spectrum need a
       real tab, and two half-editors disagreeing was worse than one. -->
  <button id="openEditor" class="editor-cta">Mapping editor &#8599;</button>
  <div class="detail">Bands, boxes and response curves live there.</div>
</section>

<section class="spectrum-section">
  <div class="section-head">
    <span class="label">Spectrum</span>
  </div>
  <div class="spectrum-wrap">
    <canvas id="spectrum" width="760" height="220"></canvas>
  </div>
  <div class="spectrum-scale">
    <span>20</span>
    <span>100</span>
    <span>1k</span>
    <span>10k</span>
    <span>20k</span>
  </div>
</section>

<section>
  <!-- Connecting without audio and driving the knobs by hand is how you tell a
       dead panel from a dead capture. Useful, and not what anyone opens this
       for — so it is one click away rather than always on screen. -->
  <details class="diagnostics">
    <summary>Test without audio</summary>
    <button id="manualConnect">Connect only</button>
  <div class="manual-grid">
    <label>K1 <input class="manual" data-knob="0" type="range" min="0" max="1" step="0.01" value="0.50"><output>0.50</output></label>
    <label>K2 <input class="manual" data-knob="1" type="range" min="0" max="1" step="0.01" value="0.50"><output>0.50</output></label>
    <label>K3 <input class="manual" data-knob="2" type="range" min="0" max="1" step="0.01" value="0.50"><output>0.50</output></label>
    <label>K4 <input class="manual" data-knob="3" type="range" min="0" max="1" step="0.01" value="0.50"><output>0.50</output></label>
  </div>
  </details>
</section>

<script src="popup.js"></script>
</body>
</html>