mirror of
https://github.com/got-feedBack/feedBack.git
synced 2026-07-24 13:51:39 +00:00
200 lines
10 KiB
JavaScript
200 lines
10 KiB
JavaScript
/**
|
||
* Strobe tuner visualization for the Slopsmith tuner plugin.
|
||
*
|
||
* Contract: window._tunerViz_strobe(container) → { update(note, cents, freq), destroy() }
|
||
* - note: string | null (null = no signal)
|
||
* - cents: number (deviation from target, −50…+50)
|
||
* - freq: number (detected frequency in Hz)
|
||
*/
|
||
window._tunerViz_strobe = function (container) {
|
||
'use strict';
|
||
|
||
// ── LCD segment map ───────────────────────────────────────────────
|
||
const _SEGMENT_MAP = {
|
||
'A': [1,1,1,1,0,0,1,1,1,1,0,0,0,0,0,0],
|
||
'B': [1,1,1,1,1,1,0,0,0,1,1,1,0,0,0,0],
|
||
'C': [1,1,0,0,1,1,1,1,0,0,0,0,0,0,0,0],
|
||
'D': [1,1,1,1,1,1,0,0,0,0,1,1,0,0,0,0],
|
||
'E': [1,1,0,0,1,1,1,1,1,0,0,0,0,0,0,0],
|
||
'F': [1,1,0,0,0,0,1,1,1,0,0,0,0,0,0,0],
|
||
'G': [1,1,0,1,1,1,1,1,0,1,0,0,0,0,0,0],
|
||
'-': [0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0],
|
||
' ': [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||
};
|
||
|
||
// Subtle glow for lit LCD elements; currentColor matches each element's own color
|
||
const _LIT_GLOW = 'drop-shadow(0 0 4px currentColor)';
|
||
|
||
function _createLCDDigit() {
|
||
const digit = document.createElement('div');
|
||
digit.className = 'segment-digit relative w-12 h-16 flex-shrink-0';
|
||
// Glow rides on the rendered segments; unlit ones (opacity 0.05) stay dark
|
||
digit.style.filter = _LIT_GLOW;
|
||
const seg = 'absolute bg-current transition-opacity duration-150 rounded-sm';
|
||
digit.innerHTML = `
|
||
<div class="${seg} top-0 left-0.5 w-[calc(50%-1px)] h-2 rounded-tl-md" data-seg="0"></div>
|
||
<div class="${seg} top-0 right-0.5 w-[calc(50%-1px)] h-2 rounded-tr-md" data-seg="1"></div>
|
||
<div class="${seg} bottom-0 right-0.5 w-[calc(50%-1px)] h-2 rounded-br-md" data-seg="4"></div>
|
||
<div class="${seg} bottom-0 left-0.5 w-[calc(50%-1px)] h-2 rounded-bl-md" data-seg="5"></div>
|
||
<div class="${seg} top-1 left-0 w-2 h-[calc(50%-1.5px)]" data-seg="7"></div>
|
||
<div class="${seg} bottom-1 left-0 w-2 h-[calc(50%-1.5px)]" data-seg="6"></div>
|
||
<div class="${seg} top-1 right-0 w-2 h-[calc(50%-1.5px)]" data-seg="2"></div>
|
||
<div class="${seg} bottom-1 right-0 w-2 h-[calc(50%-1.5px)]" data-seg="3"></div>
|
||
<div class="${seg} top-1/2 left-1.5 w-[calc(50%-2px)] h-2 -translate-y-1/2" data-seg="8"></div>
|
||
<div class="${seg} top-1/2 right-1.5 w-[calc(50%-2px)] h-2 -translate-y-1/2" data-seg="9"></div>
|
||
<div class="${seg} top-1.5 left-1/2 w-2 h-[calc(50%-2.5px)] -translate-x-1/2" data-seg="10"></div>
|
||
<div class="${seg} bottom-1.5 left-1/2 w-2 h-[calc(50%-2.5px)] -translate-x-1/2" data-seg="11"></div>
|
||
<svg class="absolute inset-0 w-full h-full pointer-events-none overflow-visible" viewBox="0 0 48 64">
|
||
<line x1="10" y1="10" x2="22" y2="30" stroke="currentColor" stroke-width="6" stroke-linecap="round" class="transition-opacity duration-150" style="opacity:0.05" data-seg="12"/>
|
||
<line x1="38" y1="10" x2="26" y2="30" stroke="currentColor" stroke-width="6" stroke-linecap="round" class="transition-opacity duration-150" style="opacity:0.05" data-seg="13"/>
|
||
<line x1="10" y1="54" x2="22" y2="34" stroke="currentColor" stroke-width="6" stroke-linecap="round" class="transition-opacity duration-150" style="opacity:0.05" data-seg="14"/>
|
||
<line x1="38" y1="54" x2="26" y2="34" stroke="currentColor" stroke-width="6" stroke-linecap="round" class="transition-opacity duration-150" style="opacity:0.05" data-seg="15"/>
|
||
</svg>
|
||
`;
|
||
return digit;
|
||
}
|
||
|
||
function _updateSegmentDigit(el, char) {
|
||
const active = _SEGMENT_MAP[char.toUpperCase()] || _SEGMENT_MAP[' '];
|
||
el.querySelectorAll('[data-seg]').forEach((s) => {
|
||
s.style.opacity = active[parseInt(s.dataset.seg)] ? '1' : '0.05';
|
||
});
|
||
}
|
||
|
||
// ── DOM ─────────────────────────────────────────────────────────
|
||
const wrap = document.createElement('div');
|
||
wrap.className = 'w-full h-32 bg-dark-900 border border-gray-800 rounded-lg relative overflow-hidden mb-3 flex flex-col items-center justify-end pb-4';
|
||
|
||
const noteSegmented = document.createElement('div');
|
||
noteSegmented.className = 'flex items-center justify-center gap-2 text-accent z-30';
|
||
|
||
const spacer = document.createElement('div');
|
||
spacer.className = 'w-8 flex-shrink-0';
|
||
noteSegmented.appendChild(spacer);
|
||
|
||
const digit = _createLCDDigit();
|
||
noteSegmented.appendChild(digit);
|
||
|
||
const sharp = document.createElement('div');
|
||
sharp.className = 'relative w-8 h-16 flex-shrink-0';
|
||
sharp.innerHTML = `
|
||
<div class="sharp-segments absolute inset-0 opacity-5 transition-opacity duration-150">
|
||
<div class="absolute top-[30%] left-0 right-0 h-2.5 bg-current -rotate-12 rounded-full"></div>
|
||
<div class="absolute bottom-[30%] left-0 right-0 h-2.5 bg-current -rotate-12 rounded-full"></div>
|
||
<div class="absolute top-0 bottom-0 left-[30%] w-2.5 bg-current rotate-12 rounded-full"></div>
|
||
<div class="absolute top-0 bottom-0 right-[30%] w-2.5 bg-current rotate-12 rounded-full"></div>
|
||
</div>
|
||
`;
|
||
const sharpSegsEl = sharp.querySelector('.sharp-segments');
|
||
const flatSegEl = document.createElement('div');
|
||
flatSegEl.style.cssText = 'position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;font-size:2.4rem;font-weight:900;line-height:1;color:currentColor;transition:opacity 0.15s;';
|
||
flatSegEl.textContent = '♭';
|
||
sharp.appendChild(flatSegEl);
|
||
noteSegmented.appendChild(sharp);
|
||
wrap.appendChild(noteSegmented);
|
||
|
||
const scanlines = document.createElement('div');
|
||
scanlines.className = 'absolute inset-0 z-40 pointer-events-none opacity-20';
|
||
scanlines.style.backgroundImage = 'repeating-linear-gradient(90deg,#000 0px,#000 1px,transparent 1px,transparent 3px),repeating-linear-gradient(0deg,#000 0px,#000 1px,transparent 1px,transparent 3px)';
|
||
wrap.appendChild(scanlines);
|
||
|
||
const stripeGrad = 'linear-gradient(90deg,currentColor 0%,currentColor 45%,transparent 45%,transparent 100%)';
|
||
const strobeEl = document.createElement('div');
|
||
strobeEl.className = 'absolute top-0 left-0 w-full h-full text-accent';
|
||
strobeEl.style.cssText = `transition:opacity 0.3s ease,filter 0.3s ease;background-image:${stripeGrad},${stripeGrad};background-size:40px 15%,80px 15%;background-position:0 5%,0 21%;background-repeat:repeat-x;opacity:0`;
|
||
// Strobe glow scales with its brightness state (set in update); none while hidden
|
||
const _STROBE_GLOW_IN_TUNE = 'drop-shadow(0 0 3px currentColor)';
|
||
const _STROBE_GLOW_OUT = 'drop-shadow(0 0 1px currentColor)';
|
||
wrap.appendChild(strobeEl);
|
||
|
||
container.appendChild(wrap);
|
||
|
||
// ── State ─────────────────────────────────────────────────────────
|
||
let strobePhase = 0;
|
||
let smoothedCents = 0;
|
||
let currentCents = 0;
|
||
let strobeActive = false;
|
||
let lastAnimateTime = performance.now();
|
||
let lastSignalTime = performance.now();
|
||
let rafId = null;
|
||
|
||
function _animate() {
|
||
const now = performance.now();
|
||
let dt = (now - lastAnimateTime) / 1000;
|
||
if (dt > 0.1) dt = 0.016;
|
||
lastAnimateTime = now;
|
||
|
||
const lerpFactor = 1 - Math.exp(-10 * dt);
|
||
smoothedCents = smoothedCents * (1 - lerpFactor) + currentCents * lerpFactor;
|
||
|
||
const signalTimeout = (now - lastSignalTime) > 1000;
|
||
if (strobeActive && !signalTimeout) {
|
||
const absCents = Math.min(100, Math.abs(smoothedCents));
|
||
const maxSpeed = 2500;
|
||
const base = 10;
|
||
let speed = maxSpeed * (Math.pow(base, absCents / 100) - 1) / (base - 1);
|
||
if (smoothedCents < 0) speed = -speed;
|
||
|
||
strobePhase = ((strobePhase + speed * dt) % 80 + 80) % 80;
|
||
strobeEl.style.backgroundPosition = `${strobePhase}px 5%,${strobePhase}px 21%`;
|
||
} else if (signalTimeout && strobeActive) {
|
||
strobeActive = false;
|
||
strobeEl.style.opacity = '0';
|
||
}
|
||
|
||
rafId = requestAnimationFrame(_animate);
|
||
}
|
||
|
||
rafId = requestAnimationFrame(_animate);
|
||
|
||
// ── Public API ────────────────────────────────────────────────────
|
||
function _setAccidental(acc) {
|
||
if (acc === '#') {
|
||
sharpSegsEl.style.opacity = '1';
|
||
sharpSegsEl.style.filter = _LIT_GLOW;
|
||
flatSegEl.style.display = 'none';
|
||
} else if (acc === 'b') {
|
||
sharpSegsEl.style.opacity = '0.05';
|
||
sharpSegsEl.style.filter = 'none';
|
||
flatSegEl.style.display = 'flex';
|
||
flatSegEl.style.filter = _LIT_GLOW;
|
||
} else {
|
||
sharpSegsEl.style.opacity = '0.05';
|
||
sharpSegsEl.style.filter = 'none';
|
||
flatSegEl.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function update(note, cents, freq) {
|
||
if (note === null) {
|
||
strobeActive = false;
|
||
strobeEl.style.opacity = '0';
|
||
_updateSegmentDigit(digit, '-');
|
||
_setAccidental('');
|
||
currentCents = 0;
|
||
return;
|
||
}
|
||
|
||
lastSignalTime = performance.now();
|
||
strobeActive = true;
|
||
currentCents = cents;
|
||
|
||
_updateSegmentDigit(digit, note[0]);
|
||
_setAccidental(note.length > 1 ? note[1] : '');
|
||
|
||
strobeEl.style.backgroundImage = `${stripeGrad},${stripeGrad}`;
|
||
strobeEl.style.backgroundSize = '40px 15%,80px 15%';
|
||
strobeEl.style.backgroundPosition = `${strobePhase}px 5%,${strobePhase}px 21%`;
|
||
const inTune = Math.abs(cents) < 5;
|
||
strobeEl.style.opacity = inTune ? '1' : '0.6';
|
||
strobeEl.style.filter = inTune ? _STROBE_GLOW_IN_TUNE : _STROBE_GLOW_OUT;
|
||
}
|
||
|
||
function destroy() {
|
||
if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
|
||
wrap.remove();
|
||
}
|
||
|
||
return { update, destroy };
|
||
};
|