reflow_components 0.2.1

Standard component catalog for Reflow — procedural, media, GPU, animation, I/O, and stream actors.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

// reflow-spectrum: Real-time FFT spectrum analyzer
// Config: fftSize, hopSize, sampleRate

class ReflowSpectrum extends ReflowUI.ReflowComponent {
  get styles() { return `canvas { height: 120px; }` }

  get template() {
    return `<canvas></canvas><div class="rf-info"></div>`;
  }

  onConnect() {
    const c = this.$q('canvas');
    const { ctx, width, height } = ReflowUI.canvas.setupHiDPI(c, 120);
    this._ctx = ctx; this._w = width; this._h = height;
    this._peaks = null;
    this._peakDecay = 0.98;
    this._frames = 0;

    this.sub(() => this.zeal?.onStreamFrame((payload) => {
      const data = new Float32Array(payload.buffer, payload.byteOffset, payload.byteLength / 4);
      this._renderBins(data);
    }));

    this.sub(() => this.zeal?.onStreamStateChange((state) => {
      if (state.phase === 'complete') {
        this.$q('.rf-info').textContent = `Done \u2014 ${this._frames} frames`;
      }
    }));
  }

  _renderBins(data) {
    const binCount = data.length;
    if (!this._peaks) this._peaks = new Float32Array(binCount);
    this._frames++;

    const ctx = this._ctx, w = this._w, h = this._h;
    const barW = Math.max(1, w / binCount);
    const T = ReflowUI.theme;
    ctx.clearRect(0, 0, w, h);

    for (let i = 0; i < binCount; i++) {
      const db = data[i] > 0 ? 20 * Math.log10(data[i]) : -80;
      const norm = Math.max(0, Math.min(1, (db + 80) / 80));
      const barH = norm * h;

      if (norm > this._peaks[i]) this._peaks[i] = norm;
      else this._peaks[i] *= this._peakDecay;

      const hue = 120 - norm * 120;
      ctx.fillStyle = `hsl(${hue}, 80%, ${40 + norm * 20}%)`;
      ctx.fillRect(i * barW, h - barH, barW - 0.5, barH);

      ctx.fillStyle = T.textPrimary;
      ctx.fillRect(i * barW, h - this._peaks[i] * h, barW - 0.5, 1);
    }

    this.$q('.rf-info').textContent = `${binCount} bins \u2022 frame ${this._frames}`;
  }

  set fftSize(v) {}
}

customElements.define('reflow-spectrum', ReflowSpectrum);