Untitled

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
body {
  background: #1a1a1a;
  color: #ddd;
  font: 12px monospace;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-content {
  width: 100%;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
}
canvas#c {
  border: 1px solid #444;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  height: auto;
  max-width: 100%;
  aspect-ratio: 640 / 480;
}
.controls {
  margin: 4px 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.controls input[type="range"] {
  width: 160px;
  vertical-align: middle;
}
button, select {
  background: #333;
  color: #ddd;
  border: 1px solid #555;
  padding: 4px 8px;
  margin: 2px;
  cursor: pointer;
}
button:hover, select:hover { background: #444; }
.stats {
  background: #222;
  padding: 5px;
  margin: 5px 0;
  display: inline-block;
}
.section.histogram-section {
  width: 100%;
  margin: 10px auto;
  box-sizing: border-box;
}
#histogramCanvas {
  width: 100% !important;
  height: 100px !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  background: #353535;
}
#paletteCanvas {
  width: 100% !important;
  height: 32px !important;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  background: #353535;
}
@media (max-width: 700px) {
  .main-content, .section.histogram-section, .controls { max-width: 100vw; padding: 5px; }
  canvas, #histogramCanvas { width: 100vw !important; max-width: 100vw; }
}
</style>
</head>
<body>
<div class="main-content">

  <!-- Row 1: Main controls -->
  <div class="controls">
    <button id="stream" style="display:none">Start</button>
    <button id="save">Save PNG</button>
    <select id="palette">
      <option value="gray">Grayscale</option>
      <option value="iron">Ironbow</option>
      <option value="fire">Fire</option>
      <option value="hot">Hot</option>
      <option value="cool">Cool</option>
      <option value="rainbow">Rainbow</option>
      <option value="viridis">Viridis</option>
      <option value="plasma">Plasma</option>
      <option value="magma">Magma</option>
      <option value="inferno">Inferno</option>
      <option value="turbo">Turbo</option>
      <option value="ice">Ice</option>
      <option value="lava">Lava</option>
      <option value="wavelength">Wavelength</option>
    </select>
    <button id="autoRange">Auto Range</button>
    <button id="doFFC">FFC</button>
    <label><input type="checkbox" id="autoCheck"> Auto every frame</label>
    <label><input type="checkbox" id="invertPalette"> Invert Palette</label>
    <label><input type="checkbox" id="hotTrack"> Hot Track</label>
    <label><input type="checkbox" id="showHistogram" checked> Histogram</label>
    <label>Palette Repeat: <input type="number" id="paletteRepeat" min="1" max="10" value="1" step="1" style="width:46px"></label>
  </div>

  <!-- Row 2: Auto-range controls -->
  <div class="controls">
    AutoRange Margin: <input type="range" id="autoRangeExtra" min="1" max="100" value="20"> <span id="autoRangeExtraVal">20</span>
    &nbsp;&nbsp;
    AutoRange Offset: <input type="range" id="autoRangeOffset" min="-100" max="100" value="0"> <span id="autoRangeOffsetVal">0</span>
  </div>

  <!-- Row 3: Display controls -->
  <div class="controls">
    Offset: <input type="range" id="offset" min="6500" max="9000" value="7600"> <span id="offsetVal">0</span>
    &nbsp;&nbsp;
    Range: <input type="range" id="range" min="1" max="2500" value="255"> <span id="rangeVal">16383</span>
    &nbsp;&nbsp;
    Sharpness: <input type="range" id="sharpness" min="0" max="100" value="50"> <span id="sharpnessVal">50</span>
  </div>

  <!-- Row 4: CLAHE -->
  <div class="controls">
    <label><input type="checkbox" id="claheEnable"> CLAHE</label>
    Clip: <input type="range" id="claheClip" min="0.5" max="5" value="2" step="0.1"> <span id="claheClipVal">2</span>
    Tiles:
    <select id="claheTiles">
      <option value="4">4x4</option>
      <option value="8" selected>8x8</option>
      <option value="16">16x16</option>
    </select>
  </div>

  <!-- Row 5: Dark Frame -->
  <div class="controls">
    <label><input type="checkbox" id="darkEnable"> Dark Frame</label>
    <button id="captureDark">Capture Dark</button>
    <button id="clearDark">Clear Dark</button>
    <span id="darkStatus" style="color:#888">No dark frame</span>
  </div>

  <!-- Row 6: Frame Averaging -->
  <div class="controls">
    <label><input type="checkbox" id="avgEnable"> Frame Avg</label>
    Frames: <input type="range" id="avgFrames" min="2" max="16" value="4"> <span id="avgFramesVal">4</span>
  </div>

  <!-- Row 6: Noise Reduction -->
  <div class="controls">
    <label><input type="checkbox" id="noiseEnable"> Noise Reduction</label>
    <select id="noiseAlgo">
      <option value="temporal">Temporal Avg</option>
      <option value="gauss">Gaussian</option>
      <option value="median">Median</option>
      <option value="bilateral">Bilateral</option>
    </select>
    Strength: <input type="range" id="noiseStrength" min="1" max="8" value="3"> <span id="noiseStrengthVal">3</span>
  </div>

  <!-- Row 6: Reference Frame -->
  <div class="controls">
    <button id="captureRef">Capture Ref</button>
    <button id="clearRef">Clear Ref</button>
    <select id="refMode">
      <option value="off">Ref: Off</option>
      <option value="sub">Subtract</option>
      <option value="add">Add</option>
    </select>
    Strength: <input type="range" id="refStrength" min="0" max="100" value="100"> <span id="refStrengthVal">100</span>
    <span id="refStatus" style="color:#888">No ref</span>
  </div>

  <canvas id="c" width="640" height="480"></canvas>
  <div class="stats" id="stats">Min: - | Avg: - | Max: - | FPS: -</div>

  <div class="section histogram-section" id="histogramSection">
    <h3 style="margin:6px 0">Histogram</h3>
    <canvas id="histogramCanvas" width="800" height="100"></canvas>
    <canvas id="paletteCanvas" width="256" height="32"></canvas>
  </div>

</div>
<script src="raw.js"></script>
</body>
</html>