Initial Phoenix analyzer
This commit is contained in:
Mikei386
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187.09 82.68"><defs><style>.cls-1{fill:#00feff;}</style></defs><title>08dvdlogo-</title><g id="Calque_2" data-name="Calque 2"><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M128.81,10.16H147S169,9,168.45,20.32c-.87,17.47-27.65,16.22-27.65,16.22L146,13.83h-18.2L120.2,46.7h18.06s18,.8,32.88-6.35c15.8-7.62,15.94-21,15.94-21a15.3,15.3,0,0,0-7.76-13.4C170,.42,157.87,0,157.87,0H118.09L94.53,30.62,84.65,0H16.08L13.54,10.16h18.2S53.75,9,53.19,20.32c-.87,17.47-27.65,16.22-27.65,16.22l5.22-22.71H12.56L4.94,46.7H23s18,.8,32.87-6.35c15.8-7.62,15.94-21,15.94-21a35,35,0,0,0-.7-5.5c-.43-1.41-1-3.67-1-3.67H71L87.76,57.28l41.05-47.12Z"/><path class="cls-1" d="M88.32,57.28C39.54,57.28,0,63,0,70s39.54,12.7,88.32,12.7S176.64,77,176.64,70,137.1,57.28,88.32,57.28ZM45.54,76.92H41.82L34.06,63.73h5.21l4.46,8,4.48-8h5.22Zm20.93,0h-4.8V63.73h4.8Zm17,0h-6.8V63.73h6.8c5.15,0,9.38,2.89,9.38,6.59S88.58,76.92,83.46,76.92Zm29.16-10.28h-5.7v2.2h5.41v2.9h-5.41V74h5.7v2.9h-10.5V63.73h10.5Zm19.29,10.72c-5.93,0-10.21-3-10.21-7.28,0-4,4.89-6.78,10.21-6.78s10.21,2.79,10.21,6.78C142.12,74.35,137.83,77.36,131.91,77.36Z"/><path class="cls-1" d="M131.91,66.62c2.86,0,5.21,1.66,5.21,3.48,0,2.27-2.35,3.93-5.21,3.93s-5.22-1.66-5.22-3.93c0-1.82,2.35-3.48,5.22-3.48Z"/><path class="cls-1" d="M82.58,66.64H81.45V74h1.08c2.87,0,5.32-1.12,5.32-3.69C87.85,68,85.67,66.64,82.58,66.64Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,920 @@
|
||||
// core/audio.js — Phoenix Audio-Init, Metrics-WS, Waveform/Spectrogram buffers
|
||||
// Wird von main.js mit `initAudio(env)` gestartet. Nutzt env.config (CONFIG) und env.meters.
|
||||
|
||||
import { applyPhoenixGlobalConfig, buildPhoenixGlobalConfigPayload, saveConfig } from './config.js';
|
||||
import { getRtwCenters } from './rtw_centers.js';
|
||||
|
||||
// interner Zustand (pro App-Instanz)
|
||||
let phoenixSocket = null;
|
||||
let envRef = null;
|
||||
let lifecycleHandlersBound = false;
|
||||
let recoverTimer = null;
|
||||
let lastHardRecoverAt = 0;
|
||||
|
||||
const RMS_RING = { L: new Float32Array(512), R: new Float32Array(512), i: 0, n: 0 };
|
||||
const WAVEFORM_RING_SECONDS = 20;
|
||||
const WAVEFORM_FALLBACK_SECONDS = 18;
|
||||
const WAVE_ENV_COLUMNS_PER_SEC = 9600;
|
||||
const PHOENIX_CONNECT_TIMEOUT_MS = 3000;
|
||||
|
||||
function isLoopbackHost(host) {
|
||||
const h = String(host || '').trim().toLowerCase();
|
||||
return h === 'localhost' || h === '127.0.0.1' || h === '::1' || h === '[::1]';
|
||||
}
|
||||
|
||||
function defaultPhoenixBaseUrl() {
|
||||
try {
|
||||
const host = String(globalThis?.location?.hostname || '').trim();
|
||||
if (host) return `http://${host}:8789`;
|
||||
} catch (_) {}
|
||||
return 'http://127.0.0.1:8789';
|
||||
}
|
||||
|
||||
function normalizePhoenixBaseUrl(rawValue) {
|
||||
const fallback = defaultPhoenixBaseUrl();
|
||||
let value = String(rawValue || '').trim();
|
||||
if (!value) value = fallback;
|
||||
if (!/^[a-z]+:\/\//i.test(value)) value = `http://${value}`;
|
||||
try {
|
||||
const url = new URL(value);
|
||||
const currentHost = String(globalThis?.location?.hostname || '').trim();
|
||||
if (currentHost && !isLoopbackHost(currentHost) && isLoopbackHost(url.hostname)) {
|
||||
url.hostname = currentHost;
|
||||
}
|
||||
url.pathname = '';
|
||||
url.search = '';
|
||||
url.hash = '';
|
||||
return url.toString().replace(/\/$/, '');
|
||||
} catch (_) {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function buildPhoenixWsUrl(baseUrl) {
|
||||
try {
|
||||
const url = new URL(baseUrl);
|
||||
url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
url.pathname = '/api/v1/metrics/ws';
|
||||
url.search = '';
|
||||
url.hash = '';
|
||||
return url.toString();
|
||||
} catch (_) {
|
||||
const fallback = defaultPhoenixBaseUrl();
|
||||
return fallback.replace(/^http:/i, 'ws:').replace(/^https:/i, 'wss:') + '/api/v1/metrics/ws';
|
||||
}
|
||||
}
|
||||
|
||||
function closePhoenixSocket() {
|
||||
if (!phoenixSocket) return;
|
||||
try {
|
||||
phoenixSocket.onopen = null;
|
||||
phoenixSocket.onmessage = null;
|
||||
phoenixSocket.onerror = null;
|
||||
phoenixSocket.onclose = null;
|
||||
phoenixSocket.close();
|
||||
} catch (_) {}
|
||||
phoenixSocket = null;
|
||||
}
|
||||
|
||||
async function requestPhoenixRtaConfig(baseUrl, config) {
|
||||
const normalizedBase = normalizePhoenixBaseUrl(baseUrl);
|
||||
const url = `${normalizedBase}/api/v1/rta-config`;
|
||||
try {
|
||||
await fetch(url, {
|
||||
method: 'POST',
|
||||
cache: 'no-store',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(config || {}),
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('Phoenix RTA config update failed:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function requestPhoenixGlobalConfig(baseUrl) {
|
||||
const normalizedBase = normalizePhoenixBaseUrl(baseUrl);
|
||||
const url = `${normalizedBase}/api/v1/global-config`;
|
||||
const res = await fetch(url, { cache: 'no-store' });
|
||||
if (!res.ok) throw new Error(`Phoenix global config failed: ${res.status}`);
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
async function requestPhoenixGlobalConfigUpdate(baseUrl, config) {
|
||||
const normalizedBase = normalizePhoenixBaseUrl(baseUrl);
|
||||
const url = `${normalizedBase}/api/v1/global-config`;
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
cache: 'no-store',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(config || {}),
|
||||
});
|
||||
if (!res.ok) throw new Error(`Phoenix global config update failed: ${res.status}`);
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
async function requestPhoenixWavCaptureStart(baseUrl, sessionId) {
|
||||
const normalizedBase = normalizePhoenixBaseUrl(baseUrl);
|
||||
const url = `${normalizedBase}/api/v1/recordings/wav/start/${encodeURIComponent(Number(sessionId) || 0)}`;
|
||||
const res = await fetch(url, { method: 'POST', cache: 'no-store' });
|
||||
if (!res.ok) throw new Error(`Phoenix WAV start failed: ${res.status}`);
|
||||
}
|
||||
|
||||
async function requestPhoenixWavCaptureStop(baseUrl, sessionId, format = 'wav', options = {}) {
|
||||
const normalizedBase = normalizePhoenixBaseUrl(baseUrl);
|
||||
const rawFormat = String(format || '').toLowerCase();
|
||||
const normalizedFormat = rawFormat === 'mp3' ? 'mp3' : (rawFormat === 'webm' ? 'webm' : 'wav');
|
||||
const url = new URL(`${normalizedBase}/api/v1/recordings/stop/${encodeURIComponent(Number(sessionId) || 0)}/${encodeURIComponent(normalizedFormat)}`);
|
||||
if (normalizedFormat === 'mp3') {
|
||||
const bitrate = Number(options?.mp3BitrateKbps);
|
||||
if (Number.isFinite(bitrate) && bitrate > 0) {
|
||||
url.searchParams.set('bitrate_kbps', String(Math.round(bitrate)));
|
||||
}
|
||||
}
|
||||
const res = await fetch(url.toString(), { method: 'POST', cache: 'no-store' });
|
||||
if (!res.ok) {
|
||||
let detail = '';
|
||||
try {
|
||||
const payload = await res.json();
|
||||
detail = String(payload?.error || '').trim();
|
||||
} catch (_) {}
|
||||
throw new Error(detail || `Phoenix capture stop failed: ${res.status}`);
|
||||
}
|
||||
const blob = await res.blob();
|
||||
return {
|
||||
blob,
|
||||
mimeType: blob.type || 'audio/wav',
|
||||
};
|
||||
}
|
||||
|
||||
function applyRmsActivity(env, rmsL, rmsR, sampleTs) {
|
||||
if (!env?.audio) return;
|
||||
const level = Math.max(
|
||||
Number.isFinite(rmsL) ? rmsL : -120,
|
||||
Number.isFinite(rmsR) ? rmsR : -120,
|
||||
);
|
||||
env.audio.rmsDb = {
|
||||
L: Number.isFinite(rmsL) ? rmsL : -120,
|
||||
R: Number.isFinite(rmsR) ? rmsR : -120,
|
||||
};
|
||||
const linL = Math.pow(10, (env.audio.rmsDb.L || -120) / 20);
|
||||
const linR = Math.pow(10, (env.audio.rmsDb.R || -120) / 20);
|
||||
const monoLin = Math.sqrt((linL * linL + linR * linR) / 2);
|
||||
env.audio.rmsDb.mono = 20 * Math.log10(Math.max(monoLin, 1e-12));
|
||||
const hit = env.screensaver?.markAudioActivity?.(level, sampleTs);
|
||||
if (hit) env.audio.lastSignalTs = sampleTs;
|
||||
}
|
||||
|
||||
function copyPhoenixSpectroBins(audioState, spectro) {
|
||||
if (!audioState) return;
|
||||
const src = Array.isArray(spectro?.bins) ? spectro.bins : null;
|
||||
if (!src || !src.length) {
|
||||
audioState.phoenixSpectroBuffer = null;
|
||||
audioState.phoenixSpectroMeta = null;
|
||||
return;
|
||||
}
|
||||
let target = audioState.phoenixSpectroBuffer;
|
||||
if (!(target instanceof Float32Array) || target.length !== src.length) {
|
||||
target = new Float32Array(src.length);
|
||||
audioState.phoenixSpectroBuffer = target;
|
||||
}
|
||||
for (let i = 0; i < src.length; i++) {
|
||||
const v = Number(src[i]);
|
||||
target[i] = Number.isFinite(v) ? v : -160;
|
||||
}
|
||||
const sampleRate = Number(spectro?.sampleRate) || audioState.sampleRate || 48000;
|
||||
audioState.sampleRate = sampleRate;
|
||||
audioState.nyq = sampleRate / 2;
|
||||
const fftSize = Number(spectro?.fftSize) || (target.length * 2);
|
||||
audioState.phoenixSpectroMeta = {
|
||||
sampleRate,
|
||||
fftSize,
|
||||
frequencyBinCount: target.length,
|
||||
};
|
||||
audioState.phoenixSpectroSeq = (audioState.phoenixSpectroSeq || 0) + 1;
|
||||
}
|
||||
|
||||
async function updateActiveMeters(env, packet, CONFIG) {
|
||||
try {
|
||||
const activeRaw = typeof env.getActiveMeterIds === 'function'
|
||||
? env.getActiveMeterIds()
|
||||
: env.slots?.();
|
||||
const normalized = Array.from(new Set(
|
||||
(Array.isArray(activeRaw) ? activeRaw : ['vu', 'ppm-ebu', 'tp'])
|
||||
.filter((id) => id && id !== 'none'),
|
||||
));
|
||||
const active = normalized.length ? normalized : ['vu', 'ppm-ebu', 'tp'];
|
||||
const maybePromise = env.meters.update(packet, CONFIG, active);
|
||||
if (maybePromise && typeof maybePromise.then === 'function') {
|
||||
await maybePromise;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Meter update error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function syncPhoenixGlobalConfig(env, revision) {
|
||||
if (!env?.audio || !Number.isFinite(revision) || revision <= 0) return;
|
||||
if ((env.audio.phoenixGlobalConfigRev || 0) >= revision) return;
|
||||
const baseUrl = normalizePhoenixBaseUrl(env.config?.PHOENIX_BASE_URL || env.audio.baseUrl);
|
||||
const payload = await requestPhoenixGlobalConfig(baseUrl);
|
||||
if (payload?.config) {
|
||||
applyPhoenixGlobalConfig(payload.config);
|
||||
saveConfig();
|
||||
try { env.syncConfigBackedSlots?.(); } catch (_) {}
|
||||
try { env.syncOptionsUI?.(); } catch (_) {}
|
||||
try { env.invalidateMeters?.(); } catch (_) {}
|
||||
}
|
||||
env.audio.phoenixGlobalConfigRev = Number(payload?.revision) || revision;
|
||||
}
|
||||
|
||||
async function applyIncomingAudioPacket(env, packet, CONFIG, sampleTs = performance.now()) {
|
||||
const d = packet || {};
|
||||
if (!env?.audio) return;
|
||||
env.requestRender?.('audio');
|
||||
env.audio.lastSampleTs = sampleTs;
|
||||
env.audio.alive = true;
|
||||
if (d.xyL && d.xyR) {
|
||||
env.audio.xyL = d.xyL;
|
||||
env.audio.xyR = d.xyR;
|
||||
env.audio.xySeq = Number.isFinite(d.seq) ? d.seq : (env.audio.xySeq || 0);
|
||||
}
|
||||
if (d.waveL && env.audio.pushWaveSamples) {
|
||||
const channelCount = d.waveChannels || (d.waveR ? 2 : 1);
|
||||
env.audio.sampleRate = d.sampleRate || env.audio.sampleRate || 48000;
|
||||
env.audio.pushWaveSamples(d.waveL, d.waveR || null, channelCount, d.sampleRate);
|
||||
}
|
||||
if (d.rta) env.audio.rtaData = d.rta;
|
||||
if (d.spectro) copyPhoenixSpectroBins(env.audio, d.spectro);
|
||||
if (typeof d.ppmDinL === 'number') env.audio.ppmDinL = d.ppmDinL;
|
||||
if (typeof d.ppmDinR === 'number') env.audio.ppmDinR = d.ppmDinR;
|
||||
if (typeof d.ppmEbuL === 'number') env.audio.ppmEbuL = d.ppmEbuL;
|
||||
if (typeof d.ppmEbuR === 'number') env.audio.ppmEbuR = d.ppmEbuR;
|
||||
if (typeof d.ppmL === 'number') env.audio.ppmL = d.ppmL;
|
||||
if (typeof d.ppmR === 'number') env.audio.ppmR = d.ppmR;
|
||||
if (typeof d.rmsL === 'number' || typeof d.rmsR === 'number') {
|
||||
applyRmsActivity(env, d.rmsL, d.rmsR, sampleTs);
|
||||
}
|
||||
if (d.waveEnv) {
|
||||
updateWaveformEnvelopeStore(env.audio, d.waveEnv);
|
||||
}
|
||||
if (Number.isFinite(d.globalConfigRev) && d.globalConfigRev > (env.audio.phoenixGlobalConfigRev || 0)) {
|
||||
try { await syncPhoenixGlobalConfig(env, d.globalConfigRev); } catch (err) {
|
||||
console.warn('Phoenix global config sync failed:', err);
|
||||
}
|
||||
}
|
||||
|
||||
if (d.rmsL !== undefined && d.rmsR !== undefined) {
|
||||
RMS_RING.L[RMS_RING.i] = d.rmsL;
|
||||
RMS_RING.R[RMS_RING.i] = d.rmsR;
|
||||
RMS_RING.i = (RMS_RING.i + 1) % RMS_RING.L.length;
|
||||
RMS_RING.n = Math.min(RMS_RING.L.length, RMS_RING.n + 1);
|
||||
}
|
||||
|
||||
await updateActiveMeters(env, d, CONFIG);
|
||||
}
|
||||
|
||||
function buildPhoenixMeterPacket(frame) {
|
||||
const rmsL = Number(frame?.rms_l);
|
||||
const rmsR = Number(frame?.rms_r);
|
||||
const vuL = Number(frame?.vu_l);
|
||||
const vuR = Number(frame?.vu_r);
|
||||
const tpL = Number(frame?.tp_l);
|
||||
const tpR = Number(frame?.tp_r);
|
||||
const ppmDinL = Number(frame?.ppm_din_l);
|
||||
const ppmDinR = Number(frame?.ppm_din_r);
|
||||
const ppmEbuL = Number(frame?.ppm_ebu_l);
|
||||
const ppmEbuR = Number(frame?.ppm_ebu_r);
|
||||
const lufsM = Number(frame?.lufs_m);
|
||||
const lufsS = Number(frame?.lufs_s);
|
||||
const lufsI = Number(frame?.lufs_i);
|
||||
const lra = Number(frame?.lra);
|
||||
const lufsML = Number(frame?.lufs_ml);
|
||||
const lufsMR = Number(frame?.lufs_mr);
|
||||
const lufsSL = Number(frame?.lufs_sl);
|
||||
const lufsSR = Number(frame?.lufs_sr);
|
||||
const ppmBoxL = Number(frame?.ppm_box_l);
|
||||
const ppmBoxR = Number(frame?.ppm_box_r);
|
||||
const xyL = Array.isArray(frame?.xy_l) ? frame.xy_l : null;
|
||||
const xyR = Array.isArray(frame?.xy_r) ? frame.xy_r : null;
|
||||
const waveL = Array.isArray(frame?.wave_l) && frame.wave_l.length ? frame.wave_l : null;
|
||||
const waveR = Array.isArray(frame?.wave_r) && frame.wave_r.length ? frame.wave_r : null;
|
||||
const rta = frame?.rta && typeof frame.rta === 'object' ? frame.rta : null;
|
||||
const spectro = frame?.spectro && typeof frame.spectro === 'object' ? frame.spectro : null;
|
||||
const waveEnv = frame?.wave_env && typeof frame.wave_env === 'object' ? frame.wave_env : null;
|
||||
return {
|
||||
sampleRate: 48000,
|
||||
rmsL: Number.isFinite(rmsL) ? rmsL : -120,
|
||||
rmsR: Number.isFinite(rmsR) ? rmsR : -120,
|
||||
tpL: Number.isFinite(tpL) ? tpL : -120,
|
||||
tpR: Number.isFinite(tpR) ? tpR : -120,
|
||||
ppmDinL: Number.isFinite(ppmDinL) ? ppmDinL : -120,
|
||||
ppmDinR: Number.isFinite(ppmDinR) ? ppmDinR : -120,
|
||||
ppmEbuL: Number.isFinite(ppmEbuL) ? ppmEbuL : (Number.isFinite(ppmDinL) ? ppmDinL : -120),
|
||||
ppmEbuR: Number.isFinite(ppmEbuR) ? ppmEbuR : (Number.isFinite(ppmDinR) ? ppmDinR : -120),
|
||||
ppmL: Number.isFinite(ppmEbuL) ? ppmEbuL : (Number.isFinite(ppmDinL) ? ppmDinL : -120),
|
||||
ppmR: Number.isFinite(ppmEbuR) ? ppmEbuR : (Number.isFinite(ppmDinR) ? ppmDinR : -120),
|
||||
vuL: Number.isFinite(vuL) ? vuL : (Number.isFinite(rmsL) ? rmsL : -120),
|
||||
vuR: Number.isFinite(vuR) ? vuR : (Number.isFinite(rmsR) ? rmsR : -120),
|
||||
lufsM: Number.isFinite(lufsM) ? lufsM : undefined,
|
||||
lufsS: Number.isFinite(lufsS) ? lufsS : undefined,
|
||||
lufsI: Number.isFinite(lufsI) ? lufsI : undefined,
|
||||
lra: Number.isFinite(lra) ? lra : undefined,
|
||||
lufsML: Number.isFinite(lufsML) ? lufsML : undefined,
|
||||
lufsMR: Number.isFinite(lufsMR) ? lufsMR : undefined,
|
||||
lufsSL: Number.isFinite(lufsSL) ? lufsSL : undefined,
|
||||
lufsSR: Number.isFinite(lufsSR) ? lufsSR : undefined,
|
||||
ppmBoxL: Number.isFinite(ppmBoxL) ? ppmBoxL : undefined,
|
||||
ppmBoxR: Number.isFinite(ppmBoxR) ? ppmBoxR : undefined,
|
||||
waveL,
|
||||
waveR,
|
||||
waveChannels: Number.isFinite(Number(frame?.wave_channels)) ? Number(frame.wave_channels) : (waveR ? 2 : (waveL ? 1 : 0)),
|
||||
xyL,
|
||||
xyR,
|
||||
rta: rta ? {
|
||||
engine: String(rta?.engine || 'iir'),
|
||||
bands_avg: Array.isArray(rta?.bands_avg) ? rta.bands_avg : (Array.isArray(rta?.bands) ? rta.bands : []),
|
||||
bands_peak: Array.isArray(rta?.bands_peak) ? rta.bands_peak : [],
|
||||
bands: Array.isArray(rta?.bands) ? rta.bands : (Array.isArray(rta?.bands_avg) ? rta.bands_avg : []),
|
||||
centers: Array.isArray(rta?.centers) ? rta.centers : [],
|
||||
freqMin: Number.isFinite(Number(rta?.freq_min)) ? Number(rta.freq_min) : 20,
|
||||
freqMax: Number.isFinite(Number(rta?.freq_max)) ? Number(rta.freq_max) : 20000,
|
||||
bpo: String(rta?.bpo || '1_6'),
|
||||
weighting: String(rta?.weighting || 'z'),
|
||||
layout: String(rta?.layout || 'rtw'),
|
||||
sampleRate: Number.isFinite(Number(rta?.sample_rate)) ? Number(rta.sample_rate) : 48000,
|
||||
} : null,
|
||||
spectro: spectro ? {
|
||||
bins: Array.isArray(spectro?.bins) ? spectro.bins : [],
|
||||
sampleRate: Number.isFinite(Number(spectro?.sample_rate)) ? Number(spectro.sample_rate) : 48000,
|
||||
fftSize: Number.isFinite(Number(spectro?.fft_size)) ? Number(spectro.fft_size) : 4096,
|
||||
} : null,
|
||||
waveEnv: waveEnv ? {
|
||||
data: Array.isArray(waveEnv?.data) ? waveEnv.data : [],
|
||||
columns: Number.isFinite(Number(waveEnv?.columns)) ? Number(waveEnv.columns) : 0,
|
||||
channels: Number.isFinite(Number(waveEnv?.channels)) ? Number(waveEnv.channels) : 1,
|
||||
columnSamples: Number.isFinite(Number(waveEnv?.column_samples)) ? Number(waveEnv.column_samples) : 0,
|
||||
sampleRate: Number.isFinite(Number(waveEnv?.sample_rate)) ? Number(waveEnv.sample_rate) : 48000,
|
||||
} : null,
|
||||
source: frame?.source || 'phoenix',
|
||||
input: 'line',
|
||||
globalConfigRev: Number(frame?.global_config_rev) || 0,
|
||||
seq: Number(frame?.seq) || 0,
|
||||
timestampMs: Number(frame?.timestamp_ms) || 0,
|
||||
};
|
||||
}
|
||||
|
||||
function bindLifecycleHandlers() {
|
||||
if (lifecycleHandlersBound) return;
|
||||
|
||||
const scheduleRecover = (reason) => {
|
||||
try {
|
||||
if (recoverTimer) clearTimeout(recoverTimer);
|
||||
} catch (_) {}
|
||||
recoverTimer = setTimeout(async () => {
|
||||
recoverTimer = null;
|
||||
if (document.hidden) return;
|
||||
const env = envRef;
|
||||
if (!env || !audioLost(env)) return;
|
||||
const now = performance.now();
|
||||
if (now - lastHardRecoverAt < 5000) return;
|
||||
lastHardRecoverAt = now;
|
||||
console.warn(`Audio stalled after ${reason}; reloading audio…`);
|
||||
try { await reloadAudio(env); } catch (e) { console.warn('Audio reload failed:', e); }
|
||||
}, 150);
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (!document.hidden) scheduleRecover('visibility');
|
||||
});
|
||||
|
||||
window.addEventListener('focus', () => {
|
||||
scheduleRecover('focus');
|
||||
});
|
||||
|
||||
lifecycleHandlersBound = true;
|
||||
}
|
||||
|
||||
function createWaveformStateFallback(sampleRate, seconds = WAVEFORM_FALLBACK_SECONDS) {
|
||||
const maxSamples = Math.max(1, Math.round(sampleRate * seconds));
|
||||
return {
|
||||
sampleRate,
|
||||
maxSamples,
|
||||
bufferL: new Float32Array(maxSamples),
|
||||
bufferR: new Float32Array(maxSamples),
|
||||
write: 0,
|
||||
length: 0,
|
||||
channels: 1,
|
||||
};
|
||||
}
|
||||
|
||||
function resetWaveformStateFallback(state) {
|
||||
if (!state) return;
|
||||
state.write = 0;
|
||||
state.length = 0;
|
||||
state.channels = 1;
|
||||
}
|
||||
|
||||
function pushWaveformSamplesFallback(state, chunkL, chunkR, channelCount = 2) {
|
||||
if (!state || !chunkL || !chunkL.length) return;
|
||||
const len = chunkL.length;
|
||||
const cap = state.maxSamples;
|
||||
let write = state.write;
|
||||
const useRight = channelCount > 1 && chunkR && chunkR.length === len;
|
||||
for (let i = 0; i < len; i++) {
|
||||
state.bufferL[write] = chunkL[i];
|
||||
state.bufferR[write] = useRight ? chunkR[i] : chunkL[i];
|
||||
write++;
|
||||
if (write >= cap) write = 0;
|
||||
}
|
||||
state.write = write;
|
||||
state.length = Math.min(cap, state.length + len);
|
||||
state.channels = useRight ? 2 : 1;
|
||||
}
|
||||
|
||||
function copyFromRing(buffer, capacity, writeIndex, count) {
|
||||
const out = new Float32Array(count);
|
||||
let start = writeIndex - count;
|
||||
if (start < 0) start += capacity;
|
||||
if (start + count <= capacity) {
|
||||
out.set(buffer.subarray(start, start + count), 0);
|
||||
} else {
|
||||
const first = capacity - start;
|
||||
out.set(buffer.subarray(start), 0);
|
||||
out.set(buffer.subarray(0, count - first), first);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function getWaveformSamplesFallback(state, requested) {
|
||||
if (!state || !state.length) return null;
|
||||
const count = Math.max(0, Math.min(state.length, Math.round(requested)));
|
||||
if (count <= 0) return null;
|
||||
return {
|
||||
sampleRate: state.sampleRate,
|
||||
L: copyFromRing(state.bufferL, state.maxSamples, state.write, count),
|
||||
R: state.channels > 1 ? copyFromRing(state.bufferR, state.maxSamples, state.write, count) : null,
|
||||
channels: state.channels,
|
||||
};
|
||||
}
|
||||
|
||||
function createWaveformEnvelopeStore(sampleRate, columnSamples) {
|
||||
const samplesPerColumn = Math.max(1, Math.round(columnSamples));
|
||||
const sr = Math.max(8000, Math.round(sampleRate) || 48000);
|
||||
const columnsPerSecond = sr / samplesPerColumn;
|
||||
const maxColumns = Math.max(
|
||||
64,
|
||||
Math.ceil(columnsPerSecond * WAVEFORM_RING_SECONDS) + 32,
|
||||
);
|
||||
return {
|
||||
minL: new Float32Array(maxColumns),
|
||||
maxL: new Float32Array(maxColumns),
|
||||
minR: new Float32Array(maxColumns),
|
||||
maxR: new Float32Array(maxColumns),
|
||||
write: 0,
|
||||
length: 0,
|
||||
capacity: maxColumns,
|
||||
sampleRate: sr,
|
||||
columnSamples: samplesPerColumn,
|
||||
columnsPerSecond,
|
||||
channels: 1,
|
||||
};
|
||||
}
|
||||
|
||||
function ensureWaveformEnvelopeStore(store, sampleRate, columnSamples) {
|
||||
const samplesPerColumn = Math.max(1, Math.round(columnSamples));
|
||||
const sr = Math.max(8000, Math.round(sampleRate) || 48000);
|
||||
const columnsPerSecond = sr / samplesPerColumn;
|
||||
const required = Math.max(
|
||||
64,
|
||||
Math.ceil(columnsPerSecond * WAVEFORM_RING_SECONDS) + 32,
|
||||
);
|
||||
if (!store || store.capacity < required) {
|
||||
return createWaveformEnvelopeStore(sr, samplesPerColumn);
|
||||
}
|
||||
store.sampleRate = sr;
|
||||
store.columnSamples = samplesPerColumn;
|
||||
store.columnsPerSecond = columnsPerSecond;
|
||||
if (store.length > store.capacity) {
|
||||
store.length = store.capacity;
|
||||
store.write = store.length % store.capacity;
|
||||
}
|
||||
return store;
|
||||
}
|
||||
|
||||
function appendWaveformEnvelope(store, payload) {
|
||||
if (!store || !payload || !payload.data) return;
|
||||
const data = payload.data;
|
||||
const columns = Math.max(0, Math.min(payload.columns || 0, Math.floor(data.length / (payload.channels > 1 ? 4 : 2))));
|
||||
if (!columns) return;
|
||||
store.channels = payload.channels > 1 ? 2 : 1;
|
||||
const stride = store.channels > 1 ? 4 : 2;
|
||||
const cap = store.capacity;
|
||||
for (let i = 0; i < columns; i++) {
|
||||
const base = i * stride;
|
||||
const writeIndex = store.write;
|
||||
store.minL[writeIndex] = data[base];
|
||||
store.maxL[writeIndex] = data[base + 1];
|
||||
if (store.channels > 1) {
|
||||
store.minR[writeIndex] = data[base + 2];
|
||||
store.maxR[writeIndex] = data[base + 3];
|
||||
} else {
|
||||
store.minR[writeIndex] = data[base];
|
||||
store.maxR[writeIndex] = data[base + 1];
|
||||
}
|
||||
store.write = (store.write + 1) % cap;
|
||||
store.length = Math.min(cap, store.length + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function createWaveformScratch(width) {
|
||||
const size = Math.max(1, width);
|
||||
return {
|
||||
widthCapacity: size,
|
||||
minMaxL: new Float32Array(size * 2),
|
||||
minMaxR: new Float32Array(size * 2),
|
||||
tmpMinL: new Float32Array(size),
|
||||
tmpMaxL: new Float32Array(size),
|
||||
tmpMinR: new Float32Array(size),
|
||||
tmpMaxR: new Float32Array(size),
|
||||
};
|
||||
}
|
||||
|
||||
function ensureWaveformScratch(scratch, width) {
|
||||
if (!scratch || scratch.widthCapacity < width) {
|
||||
return createWaveformScratch(width);
|
||||
}
|
||||
return scratch;
|
||||
}
|
||||
|
||||
function sampleWaveformEnvelope(store, pixelWidth, windowSec, scratch) {
|
||||
if (!store || !store.length) return null;
|
||||
const width = Math.max(1, Math.floor(pixelWidth));
|
||||
const seconds = Math.max(0.01, Number(windowSec) || 1);
|
||||
const neededColumns = Math.max(1, Math.round(seconds * store.columnsPerSecond));
|
||||
const available = Math.min(store.length, neededColumns);
|
||||
if (available <= 0) return null;
|
||||
scratch = ensureWaveformScratch(scratch, width);
|
||||
const bucketMinL = scratch.tmpMinL;
|
||||
const bucketMaxL = scratch.tmpMaxL;
|
||||
const bucketMinR = scratch.tmpMinR;
|
||||
const bucketMaxR = scratch.tmpMaxR;
|
||||
for (let i = 0; i < width; i++) {
|
||||
bucketMinL[i] = Infinity;
|
||||
bucketMaxL[i] = -Infinity;
|
||||
bucketMinR[i] = Infinity;
|
||||
bucketMaxR[i] = -Infinity;
|
||||
}
|
||||
const cap = store.capacity;
|
||||
let idx = store.write - available;
|
||||
if (idx < 0) idx += cap;
|
||||
for (let i = 0; i < available; i++) {
|
||||
const bucket = Math.min(width - 1, Math.floor(i * width / available));
|
||||
const next = (idx + i) % cap;
|
||||
const minL = store.minL[next];
|
||||
const maxL = store.maxL[next];
|
||||
bucketMinL[bucket] = Math.min(bucketMinL[bucket], minL);
|
||||
bucketMaxL[bucket] = Math.max(bucketMaxL[bucket], maxL);
|
||||
if (store.channels > 1) {
|
||||
const minR = store.minR[next];
|
||||
const maxR = store.maxR[next];
|
||||
bucketMinR[bucket] = Math.min(bucketMinR[bucket], minR);
|
||||
bucketMaxR[bucket] = Math.max(bucketMaxR[bucket], maxR);
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < width; i++) {
|
||||
if (!Number.isFinite(bucketMinL[i])) {
|
||||
const fallback = i > 0 ? i - 1 : -1;
|
||||
if (fallback >= 0 && Number.isFinite(bucketMinL[fallback])) {
|
||||
bucketMinL[i] = bucketMinL[fallback];
|
||||
bucketMaxL[i] = bucketMaxL[fallback];
|
||||
bucketMinR[i] = bucketMinR[fallback];
|
||||
bucketMaxR[i] = bucketMaxR[fallback];
|
||||
} else {
|
||||
bucketMinL[i] = 0;
|
||||
bucketMaxL[i] = 0;
|
||||
bucketMinR[i] = 0;
|
||||
bucketMaxR[i] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
const outL = scratch.minMaxL;
|
||||
const outR = scratch.minMaxR;
|
||||
for (let i = 0; i < width; i++) {
|
||||
const base = i * 2;
|
||||
outL[base] = bucketMinL[i];
|
||||
outL[base + 1] = bucketMaxL[i];
|
||||
if (store.channels > 1) {
|
||||
outR[base] = bucketMinR[i];
|
||||
outR[base + 1] = bucketMaxR[i];
|
||||
}
|
||||
}
|
||||
return {
|
||||
minMaxL: outL,
|
||||
minMaxR: store.channels > 1 ? outR : null,
|
||||
width,
|
||||
channels: store.channels,
|
||||
scratch,
|
||||
};
|
||||
}
|
||||
|
||||
function updateWaveformEnvelopeStore(audioState, payload) {
|
||||
if (!audioState || !payload || !payload.data) return;
|
||||
const sr = payload.sampleRate || audioState.sampleRate || 48000;
|
||||
const columnSamples = payload.columnSamples || Math.max(8, Math.round(sr / WAVE_ENV_COLUMNS_PER_SEC));
|
||||
audioState.waveEnvStore = ensureWaveformEnvelopeStore(audioState.waveEnvStore, sr, columnSamples);
|
||||
appendWaveformEnvelope(audioState.waveEnvStore, payload);
|
||||
}
|
||||
|
||||
function buildRtaRuntimeConfig(CONFIG = {}) {
|
||||
const bpoMode = CONFIG.RTA_BPO_MODE || '1_6';
|
||||
const layout = CONFIG.RTA_BAR_LAYOUT === 'rtw' ? 'rtw' : 'iec';
|
||||
const runtimeBpoMode = layout === 'rtw' ? '1_12' : bpoMode;
|
||||
return {
|
||||
engine: CONFIG.RTA_ENGINE || 'fft',
|
||||
fftSize: CONFIG.FFT_SIZE || 4096,
|
||||
monoInput: !!CONFIG.MONO_INPUT,
|
||||
lrFractionalDelayEnabled: !!CONFIG.LR_FRACTIONAL_DELAY_ENABLED,
|
||||
lrFractionalDelaySamples: Number.isFinite(CONFIG.LR_FRACTIONAL_DELAY_SAMPLES) ? CONFIG.LR_FRACTIONAL_DELAY_SAMPLES : 0,
|
||||
bpo: runtimeBpoMode,
|
||||
freqRange: CONFIG.RTA_FREQ_RANGE || 'norm',
|
||||
weighting: CONFIG.RTA_WEIGHTING || 'z',
|
||||
order: CONFIG.RTA_IIR_ORDER || 4,
|
||||
tauFast: CONFIG.RTA_IIR_TAU_FAST || 0.12,
|
||||
tauSlow: CONFIG.RTA_IIR_TAU_SLOW || 1.0,
|
||||
integration: CONFIG.RTA_INTEGRATION || 'fast',
|
||||
layout,
|
||||
inputOffsetDbL: Number.isFinite(CONFIG.INPUT_OFFSET_DB_L) ? CONFIG.INPUT_OFFSET_DB_L : -5,
|
||||
inputOffsetDbR: Number.isFinite(CONFIG.INPUT_OFFSET_DB_R) ? CONFIG.INPUT_OFFSET_DB_R : -5,
|
||||
ppmDinAttackMs: Number.isFinite(CONFIG.PPM_DIN_ATTACK_MS) ? CONFIG.PPM_DIN_ATTACK_MS : 5,
|
||||
ppmDinDecayDbPerS: Number.isFinite(CONFIG.PPM_DIN_DECAY_DB_PER_S) ? CONFIG.PPM_DIN_DECAY_DB_PER_S : (20 / 1.7),
|
||||
ppmDinFastAttack: !!CONFIG.PPM_DIN_FAST_ATTACK,
|
||||
ppmEbuAttackMs: Number.isFinite(CONFIG.PPM_EBU_ATTACK_MS) ? CONFIG.PPM_EBU_ATTACK_MS : 10,
|
||||
ppmEbuDecayDbPerS: Number.isFinite(CONFIG.PPM_EBU_DECAY_DB_PER_S) ? CONFIG.PPM_EBU_DECAY_DB_PER_S : (24 / 2.8),
|
||||
lufsIWindowMin: Number.isFinite(CONFIG.LUFS_I_WINDOW_MIN) ? CONFIG.LUFS_I_WINDOW_MIN : 4,
|
||||
lufsINormEnabled: !!CONFIG.LUFS_I_NORM_ENABLED,
|
||||
rtwCenters: layout === 'rtw' ? getRtwCenters(runtimeBpoMode) : null,
|
||||
};
|
||||
}
|
||||
|
||||
async function initPhoenixAudio(env) {
|
||||
const CONFIG = env?.config;
|
||||
const baseUrl = normalizePhoenixBaseUrl(CONFIG?.PHOENIX_BASE_URL);
|
||||
const wsUrl = buildPhoenixWsUrl(baseUrl);
|
||||
|
||||
try {
|
||||
const payload = await requestPhoenixGlobalConfig(baseUrl);
|
||||
if (payload?.config) {
|
||||
applyPhoenixGlobalConfig(payload.config);
|
||||
saveConfig();
|
||||
try { env.syncConfigBackedSlots?.(); } catch (_) {}
|
||||
try { env.syncOptionsUI?.(); } catch (_) {}
|
||||
try { env.invalidateMeters?.(); } catch (_) {}
|
||||
}
|
||||
env.audio.phoenixGlobalConfigRev = Number(payload?.revision) || 0;
|
||||
} catch (err) {
|
||||
console.warn('Phoenix global config bootstrap failed:', err);
|
||||
env.audio.phoenixGlobalConfigRev = 0;
|
||||
}
|
||||
|
||||
env.audio.backendMode = 'phoenix';
|
||||
env.audio.backendLabel = 'Phoenix';
|
||||
env.audio.baseUrl = baseUrl;
|
||||
env.audio.sampleRate = 48000;
|
||||
env.audio.nyq = 24000;
|
||||
env.audio.alive = false;
|
||||
env.audio.lastSampleTs = 0;
|
||||
env.audio.xyL = null;
|
||||
env.audio.xyR = null;
|
||||
env.audio.xySeq = 0;
|
||||
env.audio.rtaData = null;
|
||||
env.audio.ppmDinL = undefined;
|
||||
env.audio.ppmDinR = undefined;
|
||||
env.audio.ppmEbuL = undefined;
|
||||
env.audio.ppmEbuR = undefined;
|
||||
env.audio.ppmL = undefined;
|
||||
env.audio.ppmR = undefined;
|
||||
env.audio.waveEnvStore = null;
|
||||
env.audio.waveEnvScratch = null;
|
||||
env.audio.waveformFallback = createWaveformStateFallback(env.audio.sampleRate || 48000);
|
||||
env.audio.phoenixSpectroBuffer = null;
|
||||
env.audio.phoenixSpectroScratch = null;
|
||||
env.audio.phoenixSpectroMeta = null;
|
||||
env.audio.phoenixSpectroSeq = 0;
|
||||
env.audio.rmsDb = { L: -120, R: -120, mono: -120 };
|
||||
|
||||
const phoenixAnalyser = {
|
||||
frequencyBinCount: 0,
|
||||
smoothingTimeConstant: 0,
|
||||
context: { sampleRate: 48000 },
|
||||
getFloatFrequencyData(target) {
|
||||
const src = env.audio?.phoenixSpectroBuffer;
|
||||
const len = Math.max(0, Math.min(target?.length || 0, src?.length || 0));
|
||||
if (!target || !src || !len) {
|
||||
if (target?.fill) target.fill(-160);
|
||||
return;
|
||||
}
|
||||
if (target !== src) target.fill(-160);
|
||||
for (let i = 0; i < len; i++) target[i] = src[i];
|
||||
for (let i = len; i < target.length; i++) target[i] = -160;
|
||||
},
|
||||
};
|
||||
|
||||
env.audio.getAnalyser = () => {
|
||||
const meta = env.audio?.phoenixSpectroMeta;
|
||||
const buf = env.audio?.phoenixSpectroBuffer;
|
||||
if (!meta || !buf) return null;
|
||||
phoenixAnalyser.frequencyBinCount = meta.frequencyBinCount || buf.length || 0;
|
||||
phoenixAnalyser.context.sampleRate = meta.sampleRate || env.audio.sampleRate || 48000;
|
||||
return phoenixAnalyser;
|
||||
};
|
||||
|
||||
env.audio.getFreqBuffer = () => {
|
||||
const src = env.audio?.phoenixSpectroBuffer;
|
||||
if (!src) return null;
|
||||
let scratch = env.audio?.phoenixSpectroScratch;
|
||||
if (!(scratch instanceof Float32Array) || scratch.length !== src.length) {
|
||||
scratch = new Float32Array(src.length);
|
||||
env.audio.phoenixSpectroScratch = scratch;
|
||||
}
|
||||
return scratch;
|
||||
};
|
||||
|
||||
env.audio.getWaveformSamples = (count) => getWaveformSamplesFallback(env.audio.waveformFallback, count);
|
||||
env.audio.pushWaveSamples = (chunkL, chunkR, channelCount = 2, sr) => {
|
||||
if (!env.audio.waveformFallback) {
|
||||
env.audio.waveformFallback = createWaveformStateFallback(Number(sr) || env.audio.sampleRate || 48000);
|
||||
}
|
||||
if (sr && Number.isFinite(sr)) {
|
||||
env.audio.waveformFallback.sampleRate = sr;
|
||||
env.audio.sampleRate = sr;
|
||||
}
|
||||
pushWaveformSamplesFallback(env.audio.waveformFallback, chunkL, chunkR, channelCount);
|
||||
};
|
||||
env.audio.getWaveformEnvelope = (pixelWidth, windowSec) => {
|
||||
const sample = sampleWaveformEnvelope(
|
||||
env.audio.waveEnvStore,
|
||||
pixelWidth,
|
||||
windowSec,
|
||||
env.audio.waveEnvScratch,
|
||||
);
|
||||
if (!sample) return null;
|
||||
env.audio.waveEnvScratch = sample.scratch;
|
||||
return {
|
||||
minMaxL: sample.minMaxL,
|
||||
minMaxR: sample.minMaxR,
|
||||
pixelWidth: sample.width,
|
||||
width: sample.width,
|
||||
channels: sample.channels,
|
||||
};
|
||||
};
|
||||
|
||||
env.audio.startWavCapture = async (sessionId) => {
|
||||
const id = Number(sessionId) || 0;
|
||||
if (!id) throw new Error('Ungültige WAV-Session');
|
||||
await requestPhoenixWavCaptureStart(baseUrl, id);
|
||||
};
|
||||
|
||||
env.audio.stopWavCapture = async (sessionId, format = 'wav', options = {}) => {
|
||||
const id = Number(sessionId) || 0;
|
||||
if (!id) throw new Error('Ungültige WAV-Session');
|
||||
return await requestPhoenixWavCaptureStop(baseUrl, id, format, options);
|
||||
};
|
||||
|
||||
env.audio.abortWavCaptures = () => {};
|
||||
env.audio.updateInputOffset = () => { void pushPhoenixGlobalConfig(); };
|
||||
env.audio.updateMonoMode = () => { void pushPhoenixGlobalConfig(); };
|
||||
env.audio.updateLrDelay = () => { void pushPhoenixGlobalConfig(); };
|
||||
|
||||
env.audio.updateProcessingConfig = (cfg) => {
|
||||
const rawProfile = (cfg && typeof cfg === 'object')
|
||||
? cfg
|
||||
: ((typeof env?.getProcessingProfile === 'function') ? env.getProcessingProfile() : null);
|
||||
const profile = rawProfile || {};
|
||||
if (!profile.needXy) {
|
||||
env.audio.xyL = null;
|
||||
env.audio.xyR = null;
|
||||
env.audio.xySeq = 0;
|
||||
}
|
||||
if (!profile.needRta) {
|
||||
env.audio.rtaData = null;
|
||||
}
|
||||
if (!profile.needWaveform) {
|
||||
env.audio.waveEnvStore = null;
|
||||
env.audio.waveEnvScratch = null;
|
||||
resetWaveformStateFallback(env.audio.waveformFallback);
|
||||
}
|
||||
};
|
||||
|
||||
const pushPhoenixGlobalConfig = async () => {
|
||||
const response = await requestPhoenixGlobalConfigUpdate(baseUrl, buildPhoenixGlobalConfigPayload());
|
||||
if (response?.config) {
|
||||
applyPhoenixGlobalConfig(response.config);
|
||||
saveConfig();
|
||||
try { env.syncConfigBackedSlots?.(); } catch (_) {}
|
||||
try { env.syncOptionsUI?.(); } catch (_) {}
|
||||
}
|
||||
env.audio.phoenixGlobalConfigRev = Number(response?.revision) || env.audio.phoenixGlobalConfigRev || 0;
|
||||
if (env?.audio) env.audio.rtaData = null;
|
||||
await requestPhoenixRtaConfig(baseUrl, buildRtaRuntimeConfig(CONFIG));
|
||||
};
|
||||
|
||||
const pushPhoenixRtaConfig = async () => {
|
||||
if (env?.audio) env.audio.rtaData = null;
|
||||
await requestPhoenixRtaConfig(baseUrl, buildRtaRuntimeConfig(CONFIG));
|
||||
};
|
||||
|
||||
env.audio.updateRtaConfig = pushPhoenixRtaConfig;
|
||||
env.audio.updatePpmConfig = pushPhoenixRtaConfig;
|
||||
env.audio.updatePhoenixGlobalConfig = pushPhoenixGlobalConfig;
|
||||
|
||||
await pushPhoenixRtaConfig();
|
||||
|
||||
return await new Promise((resolve) => {
|
||||
let settled = false;
|
||||
const socket = new WebSocket(wsUrl);
|
||||
phoenixSocket = socket;
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
try { socket.close(); } catch (_) {}
|
||||
if (phoenixSocket === socket) phoenixSocket = null;
|
||||
env.audio.alive = false;
|
||||
env.utils?.showErr?.(`Phoenix connect timeout: ${wsUrl}`);
|
||||
resolve(false);
|
||||
}, PHOENIX_CONNECT_TIMEOUT_MS);
|
||||
|
||||
const finish = (ok) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
clearTimeout(timeout);
|
||||
resolve(ok);
|
||||
};
|
||||
|
||||
socket.onopen = () => {
|
||||
finish(true);
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
const frame = JSON.parse(event.data);
|
||||
const packet = buildPhoenixMeterPacket(frame);
|
||||
applyIncomingAudioPacket(env, packet, CONFIG, performance.now()).catch((err) => {
|
||||
console.warn('Phoenix packet error:', err);
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('Phoenix metrics parse error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onerror = () => {
|
||||
env.audio.alive = false;
|
||||
if (!settled) {
|
||||
clearTimeout(timeout);
|
||||
if (phoenixSocket === socket) phoenixSocket = null;
|
||||
env.utils?.showErr?.(`Phoenix connect error: ${wsUrl}`);
|
||||
finish(false);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
env.audio.alive = false;
|
||||
if (phoenixSocket === socket) phoenixSocket = null;
|
||||
if (!settled) {
|
||||
clearTimeout(timeout);
|
||||
env.utils?.showErr?.(`Phoenix socket closed: ${wsUrl}`);
|
||||
finish(false);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export async function initAudio(env) {
|
||||
try {
|
||||
envRef = env;
|
||||
bindLifecycleHandlers();
|
||||
closePhoenixSocket();
|
||||
return await initPhoenixAudio(env);
|
||||
} catch (e) {
|
||||
try { env?.audio?.abortWavCaptures?.('Audio init error'); } catch (_) {}
|
||||
env.audio.alive = false;
|
||||
env.utils?.showErr?.('Audio init error: ' + (e?.message || String(e)));
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function audioLost(env) {
|
||||
const timeoutMs = 2500;
|
||||
const lost = (!env.audio.alive) || (performance.now() - (env.audio.lastSampleTs || 0)) > timeoutMs;
|
||||
return !!lost;
|
||||
}
|
||||
|
||||
export async function reloadAudio(env) {
|
||||
try {
|
||||
try { env?.audio?.abortWavCaptures?.('Audio neu initialisiert'); } catch (_) {}
|
||||
closePhoenixSocket();
|
||||
} catch (e) {
|
||||
console.warn('Audio cleanup error:', e);
|
||||
}
|
||||
return initAudio(env);
|
||||
}
|
||||
+1252
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,228 @@
|
||||
// core/registry.js — Lazy Loader + Safe Runner für Meter
|
||||
// Lädt Meter-Module on-demand (oder via registerMeter) und kapselt Fehler.
|
||||
|
||||
const cache = {
|
||||
meters: new Map(), // id -> module
|
||||
};
|
||||
|
||||
const meterRenderCache = new Map(); // key -> surface
|
||||
const METER_CACHE_MARGIN = 32;
|
||||
let activeFrameStamp = 0;
|
||||
|
||||
const CAN_USE_OFFSCREEN = typeof OffscreenCanvas === 'function';
|
||||
|
||||
function createCacheSurface(width, height) {
|
||||
const w = Math.max(1, Math.ceil(width));
|
||||
const h = Math.max(1, Math.ceil(height));
|
||||
if (CAN_USE_OFFSCREEN) {
|
||||
const canvas = new OffscreenCanvas(w, h);
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) return { canvas, ctx, width: w, height: h, stamp: -1 };
|
||||
}
|
||||
if (typeof document !== 'undefined') {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) return { canvas, ctx, width: w, height: h, stamp: -1 };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function cacheKeyForMeter(id, rect) {
|
||||
const x = Math.round(Number(rect?.x) || 0);
|
||||
const y = Math.round(Number(rect?.y) || 0);
|
||||
const w = Math.max(1, Math.round(Number(rect?.w) || 0));
|
||||
const h = Math.max(1, Math.round(Number(rect?.h) || 0));
|
||||
return `${id}::${x},${y},${w}x${h}`;
|
||||
}
|
||||
|
||||
function ensureCacheSurface(id, rect) {
|
||||
const key = cacheKeyForMeter(id, rect);
|
||||
let surface = meterRenderCache.get(key);
|
||||
if (!surface) {
|
||||
surface = createCacheSurface(rect.w + METER_CACHE_MARGIN * 2, rect.h + METER_CACHE_MARGIN * 2);
|
||||
if (!surface) return null;
|
||||
meterRenderCache.set(key, surface);
|
||||
}
|
||||
if (!surface.canvas || !surface.ctx) return null;
|
||||
const w = Math.max(1, Math.ceil(rect.w + METER_CACHE_MARGIN * 2));
|
||||
const h = Math.max(1, Math.ceil(rect.h + METER_CACHE_MARGIN * 2));
|
||||
if (surface.canvas.width !== w || surface.canvas.height !== h) {
|
||||
surface.canvas.width = w;
|
||||
surface.canvas.height = h;
|
||||
surface.stamp = -1;
|
||||
}
|
||||
surface.width = w;
|
||||
surface.height = h;
|
||||
surface.margin = METER_CACHE_MARGIN;
|
||||
return surface;
|
||||
}
|
||||
|
||||
export async function loadMeter(id) {
|
||||
if (!id) throw new Error('loadMeter: leere Meter-ID');
|
||||
if (cache.meters.has(id)) return cache.meters.get(id);
|
||||
const mod = await import(`../meters/${id}.js`);
|
||||
cache.meters.set(id, mod);
|
||||
return mod;
|
||||
}
|
||||
|
||||
// --- Meter-Facade -----------------------------------------------------------
|
||||
// Views rufen nur diese Fassade, kennen also die Module/States nicht direkt.
|
||||
const meterStates = new Map(); // instanceKey -> { id, shared }
|
||||
const DEFAULT_INSTANCE_SUFFIX = '::default';
|
||||
|
||||
function makeMeterInstanceKey(id, rect) {
|
||||
if (!rect) return `${id}::default`;
|
||||
const x = Math.round(Number(rect.x) || 0);
|
||||
const y = Math.round(Number(rect.y) || 0);
|
||||
const w = Math.round(Number(rect.w) || 0);
|
||||
const h = Math.round(Number(rect.h) || 0);
|
||||
return `${id}::${x},${y},${w},${h}`;
|
||||
}
|
||||
|
||||
function makeDefaultMeterInstanceKey(id) {
|
||||
return `${id}${DEFAULT_INSTANCE_SUFFIX}`;
|
||||
}
|
||||
|
||||
function getMeterSharedById(id) {
|
||||
const matches = [];
|
||||
for (const entry of meterStates.values()) {
|
||||
if (entry?.id === id && entry.shared) matches.push(entry.shared);
|
||||
}
|
||||
return matches;
|
||||
}
|
||||
|
||||
function getPreferredMeterShared(id) {
|
||||
const defaultEntry = meterStates.get(makeDefaultMeterInstanceKey(id));
|
||||
if (defaultEntry?.shared) return defaultEntry.shared;
|
||||
for (const entry of meterStates.values()) {
|
||||
if (entry?.id === id && entry.shared) return entry.shared;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function ensureMeter(id, config, rect) {
|
||||
const mod = await loadMeter(id);
|
||||
const instanceKey = makeMeterInstanceKey(id, rect);
|
||||
if (!meterStates.has(instanceKey)) {
|
||||
const shared = mod.initShared?.(config) || {};
|
||||
meterStates.set(instanceKey, { id, shared });
|
||||
}
|
||||
return { mod, instanceKey, shared: meterStates.get(instanceKey)?.shared || null };
|
||||
}
|
||||
|
||||
async function ensureDefaultMeterShared(id, config) {
|
||||
const mod = await loadMeter(id);
|
||||
const instanceKey = makeDefaultMeterInstanceKey(id);
|
||||
if (!meterStates.has(instanceKey)) {
|
||||
const shared = mod.initShared?.(config) || {};
|
||||
meterStates.set(instanceKey, { id, shared });
|
||||
}
|
||||
return { mod, instanceKey, shared: meterStates.get(instanceKey)?.shared || null };
|
||||
}
|
||||
|
||||
export const meterFacade = {
|
||||
async update(packet, config, activeIds) {
|
||||
const seen = new Set();
|
||||
for (const rawId of activeIds || []) {
|
||||
if (!rawId || seen.has(rawId)) continue;
|
||||
seen.add(rawId);
|
||||
const id = rawId;
|
||||
try {
|
||||
const { mod } = await ensureDefaultMeterShared(id, config);
|
||||
const sharedList = getMeterSharedById(id);
|
||||
for (const shared of sharedList) {
|
||||
mod.update?.(packet, shared);
|
||||
}
|
||||
} catch (e) {
|
||||
// ein defektes Meter wird übersprungen, andere laufen weiter
|
||||
console.warn(`Meter ${id} update error:`, e);
|
||||
}
|
||||
}
|
||||
},
|
||||
async pointer(evt, rect, id, config) {
|
||||
if (!id) return false;
|
||||
try {
|
||||
const { mod, shared } = await ensureMeter(id, config, rect);
|
||||
if (typeof mod.pointer === 'function') {
|
||||
const handled = await mod.pointer(evt, rect, config, shared);
|
||||
return !!handled;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn(`Meter ${id} pointer error:`, e);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async draw(ctx, rect, id, config) {
|
||||
try {
|
||||
const { mod, shared } = await ensureMeter(id, config, rect);
|
||||
const allowCache = !(mod && mod.disableCache);
|
||||
if (!allowCache) {
|
||||
await mod.draw?.(ctx, rect, config, shared);
|
||||
return;
|
||||
}
|
||||
const cacheSurface = ensureCacheSurface(id, rect);
|
||||
const stamp = activeFrameStamp;
|
||||
const margin = cacheSurface ? cacheSurface.margin || METER_CACHE_MARGIN : 0;
|
||||
const drawX = rect.x - margin;
|
||||
const drawY = rect.y - margin;
|
||||
if (cacheSurface && cacheSurface.stamp === stamp) {
|
||||
ctx.drawImage(cacheSurface.canvas, drawX, drawY);
|
||||
return;
|
||||
}
|
||||
if (cacheSurface && cacheSurface.ctx) {
|
||||
cacheSurface.ctx.save();
|
||||
try {
|
||||
cacheSurface.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
cacheSurface.ctx.clearRect(0, 0, cacheSurface.canvas.width, cacheSurface.canvas.height);
|
||||
cacheSurface.ctx.font = ctx.font;
|
||||
cacheSurface.ctx.textAlign = ctx.textAlign;
|
||||
cacheSurface.ctx.textBaseline = ctx.textBaseline;
|
||||
cacheSurface.ctx.translate(-drawX, -drawY);
|
||||
await mod.draw?.(cacheSurface.ctx, rect, config, shared);
|
||||
} finally {
|
||||
cacheSurface.ctx.restore();
|
||||
}
|
||||
cacheSurface.stamp = stamp;
|
||||
ctx.drawImage(cacheSurface.canvas, drawX, drawY);
|
||||
return;
|
||||
}
|
||||
await mod.draw?.(ctx, rect, config, shared);
|
||||
} catch (e) {
|
||||
// Slot neutral darstellen
|
||||
ctx.save();
|
||||
ctx.strokeStyle = 'rgba(200,80,80,.8)';
|
||||
ctx.setLineDash([6,4]);
|
||||
ctx.strokeRect(rect.x+0.5, rect.y+0.5, rect.w-1, rect.h-1);
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = '#ffdddd';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(`Meter "${id}" defekt`, rect.x + rect.w/2, rect.y + rect.h/2);
|
||||
ctx.textAlign = 'start';
|
||||
ctx.restore();
|
||||
}
|
||||
},
|
||||
setFrameStamp(stamp) {
|
||||
activeFrameStamp = stamp || 0;
|
||||
},
|
||||
getState(id) {
|
||||
return getPreferredMeterShared(id);
|
||||
},
|
||||
invalidateAll() {
|
||||
meterStates.clear();
|
||||
meterRenderCache.clear();
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.__AN_REGISTRY__ = window.__AN_REGISTRY__ || {};
|
||||
window.__AN_REGISTRY__.invalidateAll = () => meterFacade.invalidateAll();
|
||||
}
|
||||
|
||||
// --- Meter Registration System ---
|
||||
export function registerMeter(meterModule) {
|
||||
if (meterModule && meterModule.id) {
|
||||
cache.meters.set(meterModule.id, Promise.resolve(meterModule));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
export const RTW_CENTER_MAP = {
|
||||
'1_3': [
|
||||
20, 25, 31.5, 40, 50, 63, 80, 100, 125, 160,
|
||||
200, 250, 315, 400, 500, 630, 800, 1000, 1250, 1600,
|
||||
2000, 2500, 3150, 4000, 5000, 6300, 8000, 10000, 12500, 16000, 20000,
|
||||
],
|
||||
'1_6': [
|
||||
20, 22.4, 25, 28, 31.5, 35.5, 40, 45, 50, 56,
|
||||
63, 70.8, 80, 90, 100, 112, 125, 141, 160, 180,
|
||||
200, 224, 250, 282, 315, 355, 400, 450, 500, 560,
|
||||
630, 708, 800, 900, 1000, 1120, 1250, 1410, 1600, 1800,
|
||||
2000, 2240, 2500, 2820, 3150, 3550, 4000, 4500, 5000, 5600,
|
||||
6300, 7080, 8000, 9000, 10000, 11200, 12500, 14100, 16000, 18000, 20000,
|
||||
],
|
||||
'1_12': [
|
||||
20, 21.2, 22.4, 23.8, 25, 26.5, 28, 29.8, 31.5, 33.4,
|
||||
35.5, 37.6, 40, 42.4, 45, 47.5, 50, 53, 56, 59.5,
|
||||
63, 67, 71, 75, 80, 85, 90, 95, 100, 106,
|
||||
112, 118, 125, 132, 140, 150, 160, 170, 180, 190,
|
||||
200, 212, 224, 238, 250, 265, 280, 298, 315, 334,
|
||||
355, 376, 400, 424, 450, 475, 500, 530, 560, 595,
|
||||
630, 670, 710, 750, 800, 850, 900, 950, 1000, 1060,
|
||||
1120, 1180, 1250, 1320, 1400, 1500, 1600, 1700, 1800, 1900,
|
||||
2000, 2120, 2240, 2380, 2500, 2650, 2800, 2980, 3150, 3340,
|
||||
3550, 3760, 4000, 4240, 4500, 4750, 5000, 5300, 5600, 5950,
|
||||
6300, 6700, 7100, 7500, 8000, 8500, 9000, 9500, 10000, 10600,
|
||||
11200, 11800, 12500, 13200, 14000, 15000, 16000, 17000, 18000, 19000, 20000,
|
||||
],
|
||||
};
|
||||
|
||||
export function getRtwCenters(mode = '1_3') {
|
||||
const key = String(mode || '1_3').replace('/', '_');
|
||||
if (RTW_CENTER_MAP[key]) return RTW_CENTER_MAP[key].slice();
|
||||
return RTW_CENTER_MAP['1_3'].slice();
|
||||
}
|
||||
|
||||
export function resolveRtwBpoValue(mode) {
|
||||
if (typeof mode === 'number' && Number.isFinite(mode)) return mode;
|
||||
const key = String(mode || '').replace('/', '_');
|
||||
if (key === '1_12') return 12;
|
||||
if (key === '1_6') return 6;
|
||||
return 3;
|
||||
}
|
||||
@@ -0,0 +1,642 @@
|
||||
// core/screensaver.js — handles idle-activated screensaver overlay
|
||||
|
||||
export function createScreensaver({ config, body = (typeof document !== 'undefined' ? document.body : null) } = {}) {
|
||||
const state = {
|
||||
active: false,
|
||||
force: false,
|
||||
lastSignalTs: now(),
|
||||
ball: { x: 120, y: 120, vx: 180, vy: 140, w: 140, h: 80, color: '#ff0080', tint: '#ff0080', hue: 0 },
|
||||
logo: null,
|
||||
logoReady: false,
|
||||
enabled: true,
|
||||
mode: (config?.SCREENSAVER_MODE === 'starfield' || config?.SCREENSAVER_MODE === 'clock' || config?.SCREENSAVER_MODE === 'black') ? config.SCREENSAVER_MODE : 'clock',
|
||||
stars: [],
|
||||
};
|
||||
|
||||
function now() {
|
||||
return (typeof performance !== 'undefined' ? performance.now() : Date.now());
|
||||
}
|
||||
|
||||
function getThreshold() {
|
||||
const t = config?.SCREENSAVER_ACTIVITY_DB;
|
||||
return Number.isFinite(t) ? t : -50;
|
||||
}
|
||||
|
||||
function markActivity(ts) {
|
||||
const t = ts || now();
|
||||
state.lastSignalTs = t;
|
||||
state.force = false;
|
||||
if (state.active) setActive(false);
|
||||
}
|
||||
|
||||
function markAudioActivity(levelDb, ts) {
|
||||
if (!Number.isFinite(levelDb)) return false;
|
||||
if (levelDb > getThreshold()) {
|
||||
// Pegel-Trigger nur, wenn kein forcierter Testlauf aktiv ist
|
||||
if (!state.force) {
|
||||
markActivity(ts);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function ensureLogo() {
|
||||
if (state.logo !== null) return;
|
||||
const img = new Image();
|
||||
img.src = 'assets/dvdlogo.svg';
|
||||
img.onload = () => { state.logoReady = true; };
|
||||
img.onerror = () => { state.logoReady = false; };
|
||||
state.logo = img;
|
||||
}
|
||||
|
||||
function setActive(next) {
|
||||
state.active = !!next;
|
||||
if (body) {
|
||||
body.classList.toggle('screensaver-active', state.active);
|
||||
}
|
||||
}
|
||||
|
||||
function nextLogoColor(prev = '#ff0080') {
|
||||
const palette = ['#ff0080', '#00d8ff', '#ffd400', '#00ff88', '#ff6600', '#9b59ff', '#ff2d55'];
|
||||
let c = prev;
|
||||
for (let i = 0; i < 4 && c === prev; i++) {
|
||||
c = palette[Math.floor(Math.random() * palette.length)];
|
||||
}
|
||||
return c;
|
||||
}
|
||||
|
||||
function randomizeBall(rect) {
|
||||
const { ball } = state;
|
||||
if (!rect) return;
|
||||
const base = Math.min(rect.w, rect.h) * 0.22;
|
||||
if (state.logo && state.logoReady && state.logo.width && state.logo.height) {
|
||||
const aspect = state.logo.width / state.logo.height;
|
||||
ball.w = base;
|
||||
ball.h = base / aspect;
|
||||
} else {
|
||||
ball.w = base;
|
||||
ball.h = base * 0.55;
|
||||
}
|
||||
const halfW = ball.w / 2;
|
||||
const halfH = ball.h / 2;
|
||||
ball.x = rect.x + halfW + Math.random() * Math.max(1, rect.w - 2 * halfW);
|
||||
ball.y = rect.y + halfH + Math.random() * Math.max(1, rect.h - 2 * halfH);
|
||||
const speed = 160 + Math.random() * 80;
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
ball.vx = Math.cos(angle) * speed;
|
||||
ball.vy = Math.sin(angle) * speed;
|
||||
ball.color = nextLogoColor();
|
||||
ball.tint = ball.color;
|
||||
}
|
||||
|
||||
function updateBall(rect, dtMs) {
|
||||
const { ball } = state;
|
||||
const dt = Math.max(0.001, dtMs / 1000);
|
||||
ball.x += ball.vx * dt;
|
||||
ball.y += ball.vy * dt;
|
||||
const halfW = ball.w / 2;
|
||||
const halfH = ball.h / 2;
|
||||
const minX = rect.x + halfW;
|
||||
const maxX = rect.x + rect.w - halfW;
|
||||
const minY = rect.y + halfH;
|
||||
const maxY = rect.y + rect.h - halfH;
|
||||
let bounced = false;
|
||||
if (ball.x < minX) { ball.x = minX; ball.vx *= -1; bounced = true; }
|
||||
if (ball.x > maxX) { ball.x = maxX; ball.vx *= -1; bounced = true; }
|
||||
if (ball.y < minY) { ball.y = minY; ball.vy *= -1; bounced = true; }
|
||||
if (ball.y > maxY) { ball.y = maxY; ball.vy *= -1; bounced = true; }
|
||||
if (bounced) {
|
||||
const nxt = nextLogoColor(ball.color);
|
||||
ball.color = nxt;
|
||||
ball.tint = nxt;
|
||||
ball.hue = Math.floor(Math.random() * 360);
|
||||
}
|
||||
}
|
||||
|
||||
function draw(ctx, rect) {
|
||||
if (state.mode === 'starfield') {
|
||||
drawStarfield(ctx, rect);
|
||||
return;
|
||||
}
|
||||
const { ball } = state;
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(5,5,10,0.9)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
const radius = Math.min(ball.w, ball.h) * 0.18;
|
||||
const x = ball.x - ball.w / 2;
|
||||
const y = ball.y - ball.h / 2;
|
||||
const col = ball.color || '#ff0080';
|
||||
// Logo body
|
||||
ctx.fillStyle = col;
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.35)';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + ball.w - radius, y);
|
||||
ctx.quadraticCurveTo(x + ball.w, y, x + ball.w, y + radius);
|
||||
ctx.lineTo(x + ball.w, y + ball.h - radius);
|
||||
ctx.quadraticCurveTo(x + ball.w, y + ball.h, x + ball.w - radius, y + ball.h);
|
||||
ctx.lineTo(x + radius, y + ball.h);
|
||||
ctx.quadraticCurveTo(x, y + ball.h, x, y + ball.h - radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
// DVD text
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.font = `${Math.max(18, ball.h * 0.4)}px 'Arial Black', ui-sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('DVD', ball.x, ball.y);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function updateAndRender(ctx, rect, nowTs, dtMs) {
|
||||
const enabled = state.enabled !== false && config?.SCREENSAVER_ENABLED !== false;
|
||||
if (!enabled && !state.force) {
|
||||
if (state.active) setActive(false);
|
||||
return false;
|
||||
}
|
||||
const idleMin = Math.max(0, Number(config?.SCREENSAVER_IDLE_MIN ?? 0));
|
||||
const idleMs = idleMin * 60 * 1000;
|
||||
const shouldActivate = state.force || (idleMs > 0 && (nowTs - state.lastSignalTs) >= idleMs);
|
||||
if (shouldActivate && !state.active) {
|
||||
randomizeBall(rect);
|
||||
setActive(true);
|
||||
} else if (!shouldActivate && state.active) {
|
||||
setActive(false);
|
||||
}
|
||||
if (!state.active) return false;
|
||||
|
||||
if (state.mode === 'starfield') {
|
||||
updateStars(rect, dtMs);
|
||||
drawStarfield(ctx, rect);
|
||||
return true;
|
||||
}
|
||||
if (state.mode === 'black') {
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
if (state.mode === 'clock') {
|
||||
drawClock(ctx, rect, nowTs);
|
||||
return true;
|
||||
}
|
||||
updateBall(rect, dtMs);
|
||||
drawDvd(ctx, rect);
|
||||
return true;
|
||||
}
|
||||
|
||||
function ensureStars(rect, count = 160) {
|
||||
if (!rect) return;
|
||||
if (!state.stars || state.stars.length !== count) {
|
||||
state.stars = new Array(count).fill(0).map(() => makeStar(rect));
|
||||
}
|
||||
}
|
||||
|
||||
function makeStar(rect) {
|
||||
const angle = Math.random() * Math.PI * 2;
|
||||
const speed = 0.15 + Math.random() * 0.25;
|
||||
const hue = 180 + Math.random() * 120;
|
||||
return {
|
||||
x: (Math.random() * 2 - 1) * rect.w * 0.35,
|
||||
y: (Math.random() * 2 - 1) * rect.h * 0.35,
|
||||
z: Math.random() * 1 + 0.3,
|
||||
vx: Math.cos(angle) * speed,
|
||||
vy: Math.sin(angle) * speed,
|
||||
hue,
|
||||
};
|
||||
}
|
||||
|
||||
function updateStars(rect, dtMs) {
|
||||
ensureStars(rect);
|
||||
const dt = Math.max(0.001, dtMs / 1000);
|
||||
for (let i = 0; i < state.stars.length; i++) {
|
||||
const s = state.stars[i];
|
||||
s.x += s.vx * rect.w * dt;
|
||||
s.y += s.vy * rect.h * dt;
|
||||
s.z -= dt * 0.35;
|
||||
if (s.z <= 0.05 || Math.abs(s.x) > rect.w || Math.abs(s.y) > rect.h) {
|
||||
state.stars[i] = makeStar(rect);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function drawStarfield(ctx, rect) {
|
||||
ensureStars(rect);
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(3,4,8,0.92)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
const cx = rect.x + rect.w / 2;
|
||||
const cy = rect.y + rect.h / 2;
|
||||
for (const s of state.stars) {
|
||||
const scale = 280 / (s.z * rect.w);
|
||||
const x = cx + s.x * scale;
|
||||
const y = cy + s.y * scale;
|
||||
const len = Math.max(4, 18 * (1 - s.z));
|
||||
const dx = (s.x * scale) * 0.02;
|
||||
const dy = (s.y * scale) * 0.02;
|
||||
ctx.strokeStyle = `hsl(${s.hue}, 90%, 65%)`;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - dx, y - dy);
|
||||
ctx.lineTo(x + dx, y + dy);
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = `hsl(${s.hue}, 90%, 70%)`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, Math.max(1, len * 0.08), 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawDvd(ctx, rect) {
|
||||
ensureLogo();
|
||||
const { ball } = state;
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(5,5,10,0.9)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
|
||||
if (state.logo && state.logoReady) {
|
||||
const x = ball.x - ball.w / 2;
|
||||
const y = ball.y - ball.h / 2;
|
||||
ctx.filter = `hue-rotate(${ball.hue || 0}deg)`;
|
||||
ctx.drawImage(state.logo, x, y, ball.w, ball.h);
|
||||
ctx.filter = 'none';
|
||||
} else {
|
||||
// Fallback: simples Logo
|
||||
const radius = Math.min(ball.w, ball.h) * 0.18;
|
||||
const x = ball.x - ball.w / 2;
|
||||
const y = ball.y - ball.h / 2;
|
||||
const col = ball.color || '#ff0080';
|
||||
ctx.fillStyle = col;
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0.35)';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + radius, y);
|
||||
ctx.lineTo(x + ball.w - radius, y);
|
||||
ctx.quadraticCurveTo(x + ball.w, y, x + ball.w, y + radius);
|
||||
ctx.lineTo(x + ball.w, y + ball.h - radius);
|
||||
ctx.quadraticCurveTo(x + ball.w, y + ball.h, x + ball.w - radius, y + ball.h);
|
||||
ctx.lineTo(x + radius, y + ball.h);
|
||||
ctx.quadraticCurveTo(x, y + ball.h, x, y + ball.h - radius);
|
||||
ctx.lineTo(x, y + radius);
|
||||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.font = `${Math.max(18, ball.h * 0.4)}px 'Arial Black', ui-sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText('DVD', ball.x, ball.y);
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawClock(ctx, rect, nowTs) {
|
||||
const d = new Date();
|
||||
const hours = d.getHours();
|
||||
const mins = d.getMinutes();
|
||||
const secs = d.getSeconds() + d.getMilliseconds() / 1000;
|
||||
const centerX = rect.x + rect.w / 2;
|
||||
const centerY = rect.y + rect.h / 2;
|
||||
const radius = Math.min(rect.w, rect.h) * 0.48;
|
||||
const baseDot = Math.max(1.5, Math.round(radius * 0.03));
|
||||
const ringDot = baseDot * 0.7;
|
||||
const glyphDot = baseDot * 1.3;
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(8,8,12,0.9)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.translate(centerX, centerY);
|
||||
|
||||
// seconds ring + 5s markers
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const ang = (Math.PI * 2 * i) / 60 - Math.PI / 2;
|
||||
const r = radius * 0.88;
|
||||
const filled = i <= secs;
|
||||
const cx = Math.cos(ang) * r;
|
||||
const cy = Math.sin(ang) * r;
|
||||
const glow = config?.SCREENSAVER_LED_GLOW !== false;
|
||||
const color = normalizeColor(config?.SCREENSAVER_LED_COLOR);
|
||||
if (filled) drawLed(ctx, cx, cy, ringDot, glow, color);
|
||||
else {
|
||||
ctx.fillStyle = 'rgba(120,120,120,0.25)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, ringDot, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
if (i % 5 === 0) {
|
||||
const outerR = r + ringDot * 3.2;
|
||||
const ocx = Math.cos(ang) * outerR;
|
||||
const ocy = Math.sin(ang) * outerR;
|
||||
drawLed(ctx, ocx, ocy, ringDot, glow, color);
|
||||
}
|
||||
}
|
||||
|
||||
// center time (HH:MM) as dot-matrix
|
||||
const timeStr = `${pad2(hours)}:${pad2(mins)}`;
|
||||
const glyphSize = radius * 0.32;
|
||||
const timeSpacing = 0.9;
|
||||
const timeY = -(glyphSize * 1.2) / 2; // vertikal zentriert auf der Mittelachse
|
||||
const blinkOn = isSecondPulseActive(d);
|
||||
const extraGaps = [0, 3]; // zusätzliche Spalte zwischen den Ziffern in jedem Block
|
||||
const metrics = measureTextLayout(timeStr, glyphSize, timeSpacing, extraGaps);
|
||||
const timeX = -metrics.colonCenter; // Doppelpunkt auf Mittelpunkt legen
|
||||
const glow = config?.SCREENSAVER_LED_GLOW !== false;
|
||||
const color = normalizeColor(config?.SCREENSAVER_LED_COLOR);
|
||||
drawDotText(ctx, timeStr, timeX, timeY, glyphSize, glyphDot * 1.1, timeSpacing, blinkOn ? (glyphDot * 1.1) : 0, extraGaps, glow, color);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawClockDigital(ctx, rect) {
|
||||
const d = new Date();
|
||||
const hours = d.getHours();
|
||||
const mins = d.getMinutes();
|
||||
const secs = d.getSeconds() + d.getMilliseconds() / 1000;
|
||||
const day = d.getDate();
|
||||
const month = d.getMonth() + 1;
|
||||
const year = d.getFullYear();
|
||||
const centerX = rect.x + rect.w / 2;
|
||||
const centerY = rect.y + rect.h / 2;
|
||||
const radius = Math.min(rect.w, rect.h) * 0.45;
|
||||
const baseDot = Math.max(1.5, Math.round(radius * 0.028));
|
||||
const glyphDot = baseDot * 1.3;
|
||||
const glyphSize = radius * 0.32;
|
||||
const timeSpacing = 0.9;
|
||||
const blinkOn = isSecondPulseActive(d);
|
||||
const extraGaps = [0, 3];
|
||||
const color = normalizeColor(config?.SCREENSAVER_LED_COLOR);
|
||||
const glow = config?.SCREENSAVER_LED_GLOW !== false;
|
||||
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(8,8,12,0.9)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.translate(centerX, centerY);
|
||||
|
||||
const timeStr = `${pad2(hours)}:${pad2(mins)}:${pad2(Math.floor(secs))}`;
|
||||
const dateStr = `${pad2(day)}.${pad2(month)}.${year}`;
|
||||
const dateSize = glyphSize * 0.8;
|
||||
const dateGaps = [1, 4]; // nach DD und MM
|
||||
const timeMetrics = measureTextLayout(timeStr, glyphSize, timeSpacing, extraGaps);
|
||||
const dateMetrics = measureTextLayout(dateStr, dateSize, timeSpacing, dateGaps);
|
||||
const totalH = glyphSize * 1.2 + dateSize * 1.2 + glyphSize * 0.25;
|
||||
const startY = -totalH / 2;
|
||||
const timeX = -timeMetrics.colonCenter;
|
||||
const timeY = startY;
|
||||
drawDotText(ctx, timeStr, timeX, timeY, glyphSize, glyphDot, timeSpacing, blinkOn ? glyphDot : 0, extraGaps, glow, color);
|
||||
|
||||
const dateX = -dateMetrics.width / 2;
|
||||
const dateY = startY + glyphSize * 1.2 + glyphSize * 0.25;
|
||||
drawDotText(ctx, dateStr, dateX, dateY, dateSize, glyphDot * 0.9, timeSpacing, 0, dateGaps, glow, color);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
return {
|
||||
markActivity,
|
||||
markAudioActivity,
|
||||
updateAndRender,
|
||||
triggerTest() { state.force = true; state.lastSignalTs = now(); },
|
||||
setIdleMinutes(min) { if (Number.isFinite(min)) config.SCREENSAVER_IDLE_MIN = min; },
|
||||
setActivityThreshold(db) { if (Number.isFinite(db)) config.SCREENSAVER_ACTIVITY_DB = db; },
|
||||
setEnabled(val) {
|
||||
state.enabled = !!val;
|
||||
config.SCREENSAVER_ENABLED = state.enabled;
|
||||
if (!state.enabled && state.active) setActive(false);
|
||||
},
|
||||
setColor(val) {
|
||||
if (typeof val === 'string' && val.trim()) {
|
||||
config.SCREENSAVER_LED_COLOR = val;
|
||||
}
|
||||
},
|
||||
setMode(mode) {
|
||||
const m = mode === 'starfield'
|
||||
? 'starfield'
|
||||
: (mode === 'clock'
|
||||
? 'clock'
|
||||
: (mode === 'black'
|
||||
? 'black'
|
||||
: (mode === 'lines' ? 'lines' : 'dvd')));
|
||||
state.mode = m;
|
||||
config.SCREENSAVER_MODE = m;
|
||||
if (m === 'starfield') {
|
||||
state.stars = [];
|
||||
} else if (m === 'clock') {
|
||||
// no special init needed
|
||||
} else if (m === 'lines') {
|
||||
state.lines = [];
|
||||
} else if (m === 'dvd') {
|
||||
randomizeBall({ x: 0, y: 0, w: 1, h: 1 });
|
||||
}
|
||||
},
|
||||
isEnabled: () => state.enabled !== false && config?.SCREENSAVER_ENABLED !== false,
|
||||
isActive: () => state.active,
|
||||
};
|
||||
}
|
||||
|
||||
// --- Dot glyph rendering for clock -----------------------------------------
|
||||
const DOT_FONT = {
|
||||
'0': [
|
||||
'01110',
|
||||
'10001',
|
||||
'10011',
|
||||
'10101',
|
||||
'11001',
|
||||
'10001',
|
||||
'01110',
|
||||
],
|
||||
'1': [
|
||||
'00100',
|
||||
'01100',
|
||||
'00100',
|
||||
'00100',
|
||||
'00100',
|
||||
'00100',
|
||||
'01110',
|
||||
],
|
||||
'2': [
|
||||
'01110',
|
||||
'10001',
|
||||
'00001',
|
||||
'00110',
|
||||
'01000',
|
||||
'10000',
|
||||
'11111',
|
||||
],
|
||||
'3': [
|
||||
'11110',
|
||||
'00001',
|
||||
'00001',
|
||||
'01110',
|
||||
'00001',
|
||||
'00001',
|
||||
'11110',
|
||||
],
|
||||
'4': [
|
||||
'00010',
|
||||
'00110',
|
||||
'01010',
|
||||
'10010',
|
||||
'11111',
|
||||
'00010',
|
||||
'00010',
|
||||
],
|
||||
'5': [
|
||||
'11111',
|
||||
'10000',
|
||||
'11110',
|
||||
'00001',
|
||||
'00001',
|
||||
'10001',
|
||||
'01110',
|
||||
],
|
||||
'6': [
|
||||
'00110',
|
||||
'01000',
|
||||
'10000',
|
||||
'11110',
|
||||
'10001',
|
||||
'10001',
|
||||
'01110',
|
||||
],
|
||||
'7': [
|
||||
'11111',
|
||||
'00001',
|
||||
'00010',
|
||||
'00100',
|
||||
'01000',
|
||||
'01000',
|
||||
'01000',
|
||||
],
|
||||
'8': [
|
||||
'01110',
|
||||
'10001',
|
||||
'10001',
|
||||
'01110',
|
||||
'10001',
|
||||
'10001',
|
||||
'01110',
|
||||
],
|
||||
'9': [
|
||||
'01110',
|
||||
'10001',
|
||||
'10001',
|
||||
'01111',
|
||||
'00001',
|
||||
'00010',
|
||||
'01100',
|
||||
],
|
||||
':': [
|
||||
'0',
|
||||
'1',
|
||||
'0',
|
||||
'0',
|
||||
'1',
|
||||
'0',
|
||||
'0',
|
||||
],
|
||||
};
|
||||
const DOT_COLS = DOT_FONT['0'][0].length;
|
||||
|
||||
function drawDotText(ctx, text, x, y, glyphSize, dotRadius, spacingFactor = 0.9, colonDotRadiusOverride = null, extraGapIndices = [], glow = true, color = 'rgb(255,0,0)') {
|
||||
let cursorX = x;
|
||||
const glyphW = glyphSize;
|
||||
const glyphH = glyphSize * 1.2;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const ch = text[i];
|
||||
const useDot = (ch === ':' && colonDotRadiusOverride !== null) ? colonDotRadiusOverride : dotRadius;
|
||||
drawDotChar(ctx, ch, cursorX, y, glyphW, glyphH, useDot, glow, color);
|
||||
cursorX += glyphW * spacingFactor;
|
||||
if (extraGapIndices.includes(i)) {
|
||||
cursorX += glyphW / DOT_COLS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function measureTextLayout(text, glyphSize, spacingFactor, extraGapIndices = []) {
|
||||
const glyphW = glyphSize;
|
||||
const colonIndex = text.indexOf(':');
|
||||
let cursor = 0;
|
||||
let colonCenter = 0;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
if (i === colonIndex) {
|
||||
colonCenter = cursor + glyphW * 0.5;
|
||||
}
|
||||
cursor += glyphW * spacingFactor;
|
||||
if (extraGapIndices.includes(i)) cursor += glyphW / DOT_COLS;
|
||||
}
|
||||
return { width: cursor, colonCenter };
|
||||
}
|
||||
|
||||
function drawDotChar(ctx, ch, x, y, w, h, dotRadius, glow = true, color = 'rgb(255,0,0)') {
|
||||
const rows = DOT_FONT[ch] || DOT_FONT['0'];
|
||||
const cols = rows[0].length;
|
||||
const r = Math.min(dotRadius, Math.max(1, Math.min(w, h) * 0.04));
|
||||
const cellW = w / cols;
|
||||
const cellH = h / rows.length;
|
||||
for (let row = 0; row < rows.length; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
if (rows[row][col] === '1') {
|
||||
const cx = x + col * cellW + cellW / 2;
|
||||
const cy = y + row * cellH + cellH / 2;
|
||||
drawLed(ctx, cx, cy, r, glow, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawLed(ctx, cx, cy, r, glow = true, color = 'rgb(255,0,0)') {
|
||||
if (r <= 0) return;
|
||||
if (glow) {
|
||||
const haloR = r * 2.2;
|
||||
const midR = r * 1.4;
|
||||
ctx.fillStyle = colorWithAlpha(color, 0.08);
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, haloR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = colorWithAlpha(color, 0.35);
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, midR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function pad2(n) {
|
||||
return n < 10 ? `0${n}` : String(n);
|
||||
}
|
||||
|
||||
function isSecondPulseActive(date, pulseMs = 500) {
|
||||
return date.getMilliseconds() < pulseMs;
|
||||
}
|
||||
|
||||
function normalizeColor(val) {
|
||||
if (typeof val !== 'string' || !val.trim()) return '#ff0000';
|
||||
return val.trim();
|
||||
}
|
||||
|
||||
function colorWithAlpha(color, alpha) {
|
||||
const c = normalizeColor(color);
|
||||
if (/^#([0-9a-fA-F]{6})$/.test(c)) {
|
||||
const r = parseInt(c.slice(1, 3), 16);
|
||||
const g = parseInt(c.slice(3, 5), 16);
|
||||
const b = parseInt(c.slice(5, 7), 16);
|
||||
return `rgba(${r},${g},${b},${alpha})`;
|
||||
}
|
||||
if (/^rgb\(/i.test(c)) {
|
||||
const nums = c.match(/(\d+\.?\d*)/g)?.slice(0, 3) || [255, 0, 0];
|
||||
return `rgba(${nums[0]},${nums[1]},${nums[2]},${alpha})`;
|
||||
}
|
||||
return `rgba(255,0,0,${alpha})`;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export const FRAME_COLOR = '#00e7ff';
|
||||
export const FRAME_COLOR_DIM = 'rgba(0,231,255,0.4)';
|
||||
export const PANEL_BG = 'rgba(5,5,11,0.75)';
|
||||
export const HEADER_BG = 'rgba(5,5,11,0.9)';
|
||||
export const GRID_MAJOR_COLOR = '#1e2a35';
|
||||
export const GRID_MINOR_COLOR = '#131b24';
|
||||
export const LABEL_COLOR = '#8fd3d4';
|
||||
export const MID_COLOR = '#ffe066';
|
||||
export const WARN_COLOR = '#ff3b3b';
|
||||
export const OK_COLOR = '#34d399';
|
||||
export const DEFAULT_TOP_INSET = 70;
|
||||
@@ -0,0 +1,318 @@
|
||||
// core/utils.js — generische Helfer (ohne Seiteneffekte)
|
||||
// Hinweis: Viele Funktionen nehmen CONFIG/Nyquist als Parameter, damit utils keine
|
||||
// harte Abhängigkeit auf config.js haben. So bleiben die Module austauschbar.
|
||||
|
||||
// --- Math & Guards -----------------------------------------------------------
|
||||
export const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
|
||||
|
||||
export function clampPow2(v, min = 2048, max = 16384) {
|
||||
const allowed = [2048, 4096, 8192, 16384].filter(n => n >= min && n <= max);
|
||||
return allowed.includes(v) ? v : Math.min(max, Math.max(min, v));
|
||||
}
|
||||
|
||||
const nowTime = () => {
|
||||
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
|
||||
return performance.now();
|
||||
}
|
||||
return Date.now();
|
||||
};
|
||||
|
||||
export function createPeakHoldState(initial = -160, now = nowTime(), holdMs = 0) {
|
||||
const startValue = Number.isFinite(initial) ? initial : -160;
|
||||
const tNow = Number.isFinite(now) ? now : nowTime();
|
||||
const span = Math.max(0, Number.isFinite(holdMs) ? holdMs : 0);
|
||||
return {
|
||||
value: startValue,
|
||||
holdUntil: tNow + span,
|
||||
lastTs: tNow,
|
||||
};
|
||||
}
|
||||
|
||||
export function stepPeakHold(current, state, now = nowTime(), opts = {}) {
|
||||
const holdMs = Math.max(0, Number.isFinite(opts.holdMs) ? opts.holdMs : 0);
|
||||
const decayDbPerS = Math.max(0, Number.isFinite(opts.decayDbPerS) ? opts.decayDbPerS : 0);
|
||||
const floor = Number.isFinite(opts.floor) ? opts.floor : -160;
|
||||
const riseThreshold = Number.isFinite(opts.riseThreshold) ? opts.riseThreshold : 0.2;
|
||||
const tNow = Number.isFinite(now) ? now : nowTime();
|
||||
const sample = Number.isFinite(current) ? current : floor;
|
||||
|
||||
if (!state || typeof state !== 'object') {
|
||||
state = createPeakHoldState(floor, tNow, holdMs);
|
||||
}
|
||||
|
||||
if (!Number.isFinite(state.value)) state.value = floor;
|
||||
if (!Number.isFinite(state.lastTs)) state.lastTs = tNow;
|
||||
if (!Number.isFinite(state.holdUntil)) state.holdUntil = tNow + holdMs;
|
||||
|
||||
const holdEnd = tNow + holdMs;
|
||||
if (state.holdUntil > holdEnd) state.holdUntil = holdEnd;
|
||||
|
||||
if (sample >= state.value + riseThreshold) {
|
||||
state.value = sample;
|
||||
state.holdUntil = tNow + holdMs;
|
||||
state.lastTs = tNow;
|
||||
} else if (tNow <= state.holdUntil) {
|
||||
state.lastTs = tNow;
|
||||
} else {
|
||||
const dt = Math.max(0, (tNow - state.lastTs) / 1000);
|
||||
if (dt > 0 && decayDbPerS > 0) {
|
||||
state.value = Math.max(floor, state.value - decayDbPerS * dt);
|
||||
}
|
||||
state.lastTs = tNow;
|
||||
}
|
||||
|
||||
return state.value;
|
||||
}
|
||||
|
||||
// --- dBFS Mapping ------------------------------------------------------------
|
||||
export function yFromDbfs(db, yTop, yBot, CONFIG) {
|
||||
const top = CONFIG.DBFS_TOP, bot = CONFIG.DBFS_BOTTOM;
|
||||
const d = Math.max(bot, Math.min(top, db));
|
||||
const t = (d - bot) / (top - bot);
|
||||
return yBot - t * (yBot - yTop);
|
||||
}
|
||||
|
||||
export function mapFRect(f, x0, w, nyq) {
|
||||
const f0 = 20, f1 = nyq, fx = Math.max(f, f0);
|
||||
const lx = (Math.log10(fx) - Math.log10(f0)) / (Math.log10(f1) - Math.log10(f0));
|
||||
return x0 + lx * w;
|
||||
}
|
||||
|
||||
// --- Bänder & Aggregation ----------------------------------------------------
|
||||
export function makeIECThirdOctCenters(nyq) {
|
||||
const base = [20,25,31.5,40,50,63,80,100,125,160,200,250,315,400,500,630,800,1000,1250,1600,2000,2500,3150,4000,5000,6300,8000,10000,12500,16000,20000,21000];
|
||||
return base.filter(f => f < nyq * 0.999);
|
||||
}
|
||||
|
||||
export function avgBandDB(fLo, fHi, data, nyq) {
|
||||
const n = data.length;
|
||||
const binLo = Math.max(0, Math.min(n - 1, Math.round((fLo / nyq) * n)));
|
||||
const binHi = Math.max(0, Math.min(n - 1, Math.round((fHi / nyq) * n)));
|
||||
let sum = 0, count = 0;
|
||||
for (let i = binLo; i <= binHi; i++) {
|
||||
sum += Math.pow(10, data[i] / 10);
|
||||
count++;
|
||||
}
|
||||
return count > 0 ? 10 * Math.log10(sum / count) : -160;
|
||||
}
|
||||
|
||||
// ----- Fractional octave helpers (IEC 61260-1) ------------------------------
|
||||
const BPO_VALUE_MAP = { '1_3': 3, '1_6': 6, '1_12': 12 };
|
||||
|
||||
export function resolveBpoValue(mode) {
|
||||
if (typeof mode === 'number' && Number.isFinite(mode)) return mode;
|
||||
return BPO_VALUE_MAP[String(mode)] || 6;
|
||||
}
|
||||
|
||||
export function makeFractionalOctaveBands(nyq = 24000, mode = '1_6', opts = {}) {
|
||||
const bpo = resolveBpoValue(mode);
|
||||
const fMin = Math.max(5, opts.fMin ?? 20);
|
||||
const fMax = Math.max(fMin * 1.001, Math.min(opts.fMax ?? nyq, nyq));
|
||||
const centerRef = opts.reference ?? 1000;
|
||||
const kMin = Math.ceil(bpo * Math.log2(fMin / centerRef));
|
||||
const kMax = Math.floor(bpo * Math.log2(fMax / centerRef));
|
||||
const bands = [];
|
||||
const factor = Math.pow(2, 1 / (2 * bpo));
|
||||
for (let k = kMin; k <= kMax; k++) {
|
||||
const center = centerRef * Math.pow(2, k / bpo);
|
||||
const lo = center / factor;
|
||||
const hi = center * factor;
|
||||
if (hi < fMin) continue;
|
||||
if (lo > fMax) break;
|
||||
bands.push({
|
||||
center,
|
||||
fLo: Math.max(lo, fMin),
|
||||
fHi: Math.min(hi, fMax),
|
||||
});
|
||||
}
|
||||
return bands;
|
||||
}
|
||||
|
||||
export function buildBandBinMapping(bands, nyq, binCount) {
|
||||
const result = [];
|
||||
if (!Array.isArray(bands) || !Number.isFinite(nyq) || !Number.isFinite(binCount) || binCount <= 0) {
|
||||
return result;
|
||||
}
|
||||
const binWidth = nyq / binCount;
|
||||
for (const band of bands) {
|
||||
const bins = [];
|
||||
const start = Math.max(0, Math.floor((band.fLo / nyq) * binCount));
|
||||
const end = Math.min(binCount - 1, Math.ceil((band.fHi / nyq) * binCount));
|
||||
let weightSum = 0;
|
||||
for (let i = start; i <= end; i++) {
|
||||
const binStart = i * binWidth;
|
||||
const binEnd = binStart + binWidth;
|
||||
const overlap = Math.max(0, Math.min(binEnd, band.fHi) - Math.max(binStart, band.fLo));
|
||||
if (overlap > 0) {
|
||||
bins.push({ index: i, weight: overlap });
|
||||
weightSum += overlap;
|
||||
}
|
||||
}
|
||||
if (!bins.length) {
|
||||
const idx = Math.max(0, Math.min(binCount - 1, Math.round((band.center / nyq) * binCount)));
|
||||
bins.push({ index: idx, weight: 1 });
|
||||
weightSum = 1;
|
||||
}
|
||||
bins.forEach((b) => { b.weight /= weightSum || 1; });
|
||||
result.push({
|
||||
center: band.center,
|
||||
fLo: band.fLo,
|
||||
fHi: band.fHi,
|
||||
bins,
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function computeBandLevels(mappedBands, freqData, opts = {}) {
|
||||
if (!Array.isArray(mappedBands) || !freqData) return [];
|
||||
const floor = Number.isFinite(opts.floor) ? opts.floor : -160;
|
||||
const weightingFn = typeof opts.weightingFn === 'function' ? opts.weightingFn : null;
|
||||
const out = new Array(mappedBands.length);
|
||||
for (let i = 0; i < mappedBands.length; i++) {
|
||||
const band = mappedBands[i];
|
||||
let energy = 0;
|
||||
for (const seg of band.bins) {
|
||||
const val = freqData[seg.index];
|
||||
if (!Number.isFinite(val)) continue;
|
||||
energy += Math.pow(10, val / 10) * seg.weight;
|
||||
}
|
||||
const weightedDb = weightingFn ? weightingFn(band.center) : 0;
|
||||
const lin = Math.max(1e-12, energy * Math.pow(10, weightedDb / 10));
|
||||
out[i] = 10 * Math.log10(lin);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
export function weightingDb(freq, mode = 'z') {
|
||||
if (!Number.isFinite(freq) || freq <= 0) return 0;
|
||||
const f2 = freq * freq;
|
||||
if (mode === 'a') {
|
||||
const raNum = (12194 ** 2) * f2 * f2;
|
||||
const raDen = (f2 + 20.6 ** 2) * Math.sqrt((f2 + 107.7 ** 2) * (f2 + 737.9 ** 2)) * (f2 + 12194 ** 2);
|
||||
const ra = raNum / raDen;
|
||||
return 20 * Math.log10(ra) + 2.0;
|
||||
}
|
||||
if (mode === 'c') {
|
||||
const rcNum = (12194 ** 2) * f2;
|
||||
const rcDen = (f2 + 20.6 ** 2) * (f2 + 12194 ** 2);
|
||||
const rc = rcNum / rcDen;
|
||||
return 20 * Math.log10(rc) + 0.06;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// --- Korrelation -------------------------------------------------------------
|
||||
export function correlation(xyL, xyR, smoothPrev = 0, smooth = 0.85) {
|
||||
const n = Math.min(xyL?.length || 0, xyR?.length || 0);
|
||||
if (!n) return 0;
|
||||
let sLL = 0, sRR = 0, sLR = 0;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const a = xyL[i], b = xyR[i];
|
||||
sLL += a * a; sRR += b * b; sLR += a * b;
|
||||
}
|
||||
const denom = Math.sqrt((sLL + 1e-12) * (sRR + 1e-12));
|
||||
const r = denom > 0 ? sLR / denom : 0;
|
||||
return smooth * smoothPrev + (1 - smooth) * Math.max(-1, Math.min(1, r));
|
||||
}
|
||||
|
||||
// --- Labels & Ticks ----------------------------------------------------------
|
||||
export function freqTickLabels(nyq, fMin = 20) {
|
||||
const ticks = [
|
||||
5, 10, 20, 25, 31.5, 40, 50, 63, 80, 100, 125, 160,
|
||||
200, 250, 315, 400, 500, 630, 800, 1000, 1250, 1600,
|
||||
2000, 2500, 3150, 4000, 5000, 6300, 8000, 10000, 12500, 16000, 20000,
|
||||
];
|
||||
const min = Math.max(5, fMin);
|
||||
return ticks.filter((f) => f >= min && f < nyq);
|
||||
}
|
||||
|
||||
export function fmtFreq(f) {
|
||||
if (f >= 1000) return (f / 1000) + 'k';
|
||||
return (f % 1 ? f : Math.round(f)).toString();
|
||||
}
|
||||
|
||||
// --- Rechteck-Helper ---------------------------------------------------------
|
||||
// --- Zeichnen: Rahmen (ruhig hier, damit Views sich nicht wiederholen) -------
|
||||
export function strokeRect(ctx, rect, color = '#00e7ff', lw = 2) {
|
||||
ctx.save();
|
||||
ctx.strokeStyle = color; ctx.lineWidth = lw;
|
||||
ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
export function fillRect(ctx, rect, color) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = color; ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// dBFS Raster als Utility, damit Bars/Line denselben Look teilen
|
||||
export function drawDbfsGridRect(ctx, x0, y0, w, h, CONFIG, nyq, opts = {}) {
|
||||
const {
|
||||
colorMajor = '#1e2a35',
|
||||
colorMinor = 'rgba(30,42,53,.55)',
|
||||
labelColor = '#8fd3d4',
|
||||
freqTicks = null,
|
||||
freqMin = 20,
|
||||
refDb = null,
|
||||
refStyle = 'rgba(0,231,255,0.35)',
|
||||
refDash = [4, 3],
|
||||
} = opts;
|
||||
const yTicks = (CONFIG.Y_TICKS && CONFIG.Y_TICKS.length)
|
||||
? CONFIG.Y_TICKS
|
||||
: [9, 0, -9, -18, -27, -36, -45, -54, -63];
|
||||
|
||||
const _g = Number(CONFIG && CONFIG.AXIS_GUTTER_LEFT);
|
||||
const gutterL = Number.isFinite(_g) ? Math.max(8, _g) : 14;
|
||||
|
||||
ctx.save();
|
||||
ctx.strokeStyle = '#00e7ff'; ctx.lineWidth = 2; ctx.strokeRect(x0 - gutterL, y0, w + gutterL, h);
|
||||
ctx.font = 'bold 14px ui-monospace, monospace'; ctx.fillStyle = labelColor;
|
||||
|
||||
// Grid + Labels at fixed ticks
|
||||
for (const v of yTicks) {
|
||||
if (v > CONFIG.DBFS_TOP || v < CONFIG.DBFS_BOTTOM) continue;
|
||||
const y = yFromDbfs(v, y0, y0 + h, CONFIG);
|
||||
const labelY = Math.min(y0 + h - 4, Math.max(y0 + 12, y + 4));
|
||||
ctx.strokeStyle = colorMajor; ctx.lineWidth = 1.2;
|
||||
ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x0 + w, y); ctx.stroke();
|
||||
ctx.textAlign = 'right'; ctx.fillText(String(v), (x0 - gutterL) - 6, labelY);
|
||||
}
|
||||
|
||||
// Reference line (e.g. alignment level)
|
||||
if (Number.isFinite(refDb) && refDb <= CONFIG.DBFS_TOP && refDb >= CONFIG.DBFS_BOTTOM) {
|
||||
const yRef = yFromDbfs(refDb, y0, y0 + h, CONFIG);
|
||||
ctx.strokeStyle = refStyle;
|
||||
ctx.setLineDash(Array.isArray(refDash) ? refDash : [4, 3]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x0, yRef);
|
||||
ctx.lineTo(x0 + w, yRef);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Frequenz-Ticks (x-Achse)
|
||||
ctx.textAlign = 'center'; ctx.fillStyle = labelColor;
|
||||
const ticks = Array.isArray(freqTicks) && freqTicks.length
|
||||
? freqTicks.filter((f) => Number.isFinite(f) && f > 0 && f < nyq)
|
||||
: freqTickLabels(nyq, freqMin);
|
||||
const minFreq = Math.max(5, freqMin);
|
||||
const logMin = Math.log10(minFreq);
|
||||
const logSpan = Math.max(1e-6, Math.log10(nyq) - logMin);
|
||||
for (const f of ticks) {
|
||||
const x = x0 + ((Math.log10(Math.max(f, minFreq)) - logMin) / logSpan) * w;
|
||||
// Linken Rand nicht doppeln: keine Vertikal-Linie auf dem linken Plot-Rand
|
||||
if (x > x0 + 0.75) {
|
||||
ctx.strokeStyle = '#131b24';
|
||||
ctx.beginPath(); ctx.moveTo(x, y0); ctx.lineTo(x, y0 + h); ctx.stroke();
|
||||
}
|
||||
ctx.fillText(fmtFreq(f), x, y0 + h + 18);
|
||||
}
|
||||
ctx.textAlign = 'start';
|
||||
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
+1892
File diff suppressed because it is too large
Load Diff
+2740
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,334 @@
|
||||
import { createPeakHoldState, stepPeakHold } from '../core/utils.js';
|
||||
import { drawHairlineGrid, METER_HEADER_FONT } from './scale_helpers.js';
|
||||
import { HEADER_BG, LABEL_COLOR, MID_COLOR, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
export const id = 'hifi-peak';
|
||||
|
||||
const HIFI_BOTTOM = -20;
|
||||
const HIFI_TOP = 6;
|
||||
const HIFI_RED_START = 3;
|
||||
const DEFAULT_ATTACK_MS = 8;
|
||||
const DEFAULT_RELEASE_DB_PER_S = 26;
|
||||
const DEFAULT_HOLD_MS = 320;
|
||||
const DEFAULT_HOLD_DECAY_DB_PER_S = 40;
|
||||
const MAJOR_TICKS = [-20, -10, -5, 0, 3, 6];
|
||||
const MINOR_TICKS = [-15, -8, -7, -6, -4, -3, -2, -1, 1, 2, 4, 5];
|
||||
|
||||
export function initShared(CONFIG = {}) {
|
||||
const now = performance.now();
|
||||
const refDbfsFor0 = resolveHifiRefDbfsFor0(CONFIG);
|
||||
return {
|
||||
target: { L: HIFI_BOTTOM, R: HIFI_BOTTOM },
|
||||
values: { L: HIFI_BOTTOM, R: HIFI_BOTTOM },
|
||||
hold: { L: HIFI_BOTTOM, R: HIFI_BOTTOM },
|
||||
refDbfsFor0,
|
||||
lastTs: now,
|
||||
_holdState: {
|
||||
L: createPeakHoldState(HIFI_BOTTOM, now, DEFAULT_HOLD_MS),
|
||||
R: createPeakHoldState(HIFI_BOTTOM, now, DEFAULT_HOLD_MS),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
if (!packet || !shared) return;
|
||||
const now = performance.now();
|
||||
const rawL = Number.isFinite(packet.tpL) ? packet.tpL : -120;
|
||||
const rawR = Number.isFinite(packet.tpR) ? packet.tpR : -120;
|
||||
const refDbfsFor0 = Number.isFinite(shared.refDbfsFor0) ? shared.refDbfsFor0 : -14;
|
||||
const deckL = rawL - refDbfsFor0;
|
||||
const deckR = rawR - refDbfsFor0;
|
||||
const targetL = clamp(deckL, HIFI_BOTTOM, HIFI_TOP);
|
||||
const targetR = clamp(deckR, HIFI_BOTTOM, HIFI_TOP);
|
||||
const dt = Math.max(1 / 240, (now - (shared.lastTs || now)) / 1000);
|
||||
shared.lastTs = now;
|
||||
|
||||
const attackTau = Math.max(0.001, DEFAULT_ATTACK_MS / 1000);
|
||||
const attackAlpha = 1 - Math.exp(-dt / attackTau);
|
||||
const releaseStep = DEFAULT_RELEASE_DB_PER_S * dt;
|
||||
|
||||
shared.target.L = targetL;
|
||||
shared.target.R = targetR;
|
||||
shared.values.L = applyBallistics(shared.values.L, targetL, attackAlpha, releaseStep);
|
||||
shared.values.R = applyBallistics(shared.values.R, targetR, attackAlpha, releaseStep);
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG = {}, shared) {
|
||||
if (!g || !rect || !shared) return;
|
||||
|
||||
syncAlignment(shared, CONFIG);
|
||||
|
||||
const colNorm = CONFIG.TP_COLOR_NORMAL || MID_COLOR;
|
||||
const colWarn = CONFIG.TP_COLOR_WARN || WARN_COLOR;
|
||||
const redOnly = CONFIG.TP_RED_BAR_ONLY !== false;
|
||||
const mapY = (db) => rect.y + (1 - norm(db)) * rect.h;
|
||||
|
||||
const innerPad = 8;
|
||||
const scaleW = 28;
|
||||
const gap = 8;
|
||||
const avail = rect.w - innerPad * 2 - scaleW - gap * 2;
|
||||
let barW = Math.max(10, Math.floor(avail / 2));
|
||||
barW = Math.floor(barW * (CONFIG.METER_BAR_THIN || 0.55));
|
||||
|
||||
const used = 2 * barW + scaleW + 2 * gap;
|
||||
const extra = Math.max(0, (rect.w - innerPad * 2) - used);
|
||||
const leftX = rect.x + innerPad + extra / 2;
|
||||
const scaleX = leftX + barW + gap;
|
||||
const rightX = scaleX + scaleW + gap;
|
||||
const centerX = scaleX + scaleW / 2;
|
||||
const centerLeft = leftX + barW / 2;
|
||||
const centerRight = rightX + barW / 2;
|
||||
const innerW = Math.max(2, barW - 2);
|
||||
const rawL = clamp(shared.values.L, HIFI_BOTTOM, HIFI_TOP);
|
||||
const rawR = clamp(shared.values.R, HIFI_BOTTOM, HIFI_TOP);
|
||||
const smooth = smoothHeader(shared, rawL, rawR);
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 24);
|
||||
g.textAlign = 'center';
|
||||
g.fillStyle = (rawL > HIFI_RED_START || rawR > HIFI_RED_START) ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
const yText = rect.y - 12;
|
||||
g.fillStyle = rawL > HIFI_RED_START ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(formatHeaderValue(smooth.L), centerLeft, yText);
|
||||
g.fillStyle = colNorm;
|
||||
g.fillText('|', centerX, yText);
|
||||
g.fillStyle = rawR > HIFI_RED_START ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(formatHeaderValue(smooth.R), centerRight, yText);
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
|
||||
drawBar(g, leftX, innerW, rawL, mapY, colNorm, colWarn, redOnly);
|
||||
drawBar(g, rightX, innerW, rawR, mapY, colNorm, colWarn, redOnly);
|
||||
|
||||
const now = performance.now();
|
||||
const holdOpts = {
|
||||
holdMs: DEFAULT_HOLD_MS,
|
||||
decayDbPerS: DEFAULT_HOLD_DECAY_DB_PER_S,
|
||||
floor: HIFI_BOTTOM,
|
||||
riseThreshold: 0.15,
|
||||
};
|
||||
shared.hold.L = stepPeakHold(shared.values.L, shared._holdState.L, now, holdOpts);
|
||||
shared.hold.R = stepPeakHold(shared.values.R, shared._holdState.R, now, holdOpts);
|
||||
|
||||
g.save();
|
||||
g.fillStyle = '#ffffff';
|
||||
g.fillRect(leftX + 1, mapY(shared.hold.L) - 1, innerW, 2);
|
||||
g.fillRect(rightX + 1, mapY(shared.hold.R) - 1, innerW, 2);
|
||||
g.restore();
|
||||
|
||||
const yTop = mapY(HIFI_TOP);
|
||||
const yRed = mapY(HIFI_RED_START);
|
||||
drawWarningEdges(g, leftX, barW, rightX, centerX, yRed, yTop, colWarn);
|
||||
drawBarTicks(g, leftX, rightX, innerW, mapY, colWarn);
|
||||
drawScale(g, { x: scaleX, y: rect.y, w: scaleW, h: rect.h }, centerX, mapY);
|
||||
|
||||
g.save();
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
const baseY = rect.y + rect.h + 16;
|
||||
g.fillText('L', leftX + barW / 2, baseY);
|
||||
g.fillText('R', rightX + barW / 2, baseY);
|
||||
const prevFooterFont = g.font;
|
||||
g.fillStyle = '#ffffff';
|
||||
g.font = 'bold 8.4px ui-monospace, monospace';
|
||||
g.fillText('dB', centerX, baseY);
|
||||
g.font = prevFooterFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function applyBallistics(current, target, attackAlpha, releaseStep) {
|
||||
const prev = Number.isFinite(current) ? current : HIFI_BOTTOM;
|
||||
if (target >= prev) {
|
||||
return clamp(prev + (target - prev) * attackAlpha, HIFI_BOTTOM, HIFI_TOP);
|
||||
}
|
||||
return clamp(Math.max(target, prev - releaseStep), HIFI_BOTTOM, HIFI_TOP);
|
||||
}
|
||||
|
||||
function drawBar(g, x, width, value, mapY, colNorm, colWarn, redOnly) {
|
||||
const yVal = mapY(value);
|
||||
const yFloor = mapY(HIFI_BOTTOM);
|
||||
const yRed = mapY(HIFI_RED_START);
|
||||
|
||||
if (value > HIFI_RED_START) {
|
||||
if (redOnly) {
|
||||
const normTop = Math.min(yRed, yFloor);
|
||||
if (yFloor - normTop > 0) {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x + 1, normTop, width, yFloor - normTop);
|
||||
}
|
||||
const warnTop = Math.min(yVal, yRed);
|
||||
if (yRed - warnTop > 0) {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x + 1, warnTop, width, yRed - warnTop);
|
||||
}
|
||||
} else {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x + 1, yVal, width, Math.max(0, yFloor - yVal));
|
||||
}
|
||||
} else {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x + 1, yVal, width, Math.max(0, yFloor - yVal));
|
||||
}
|
||||
|
||||
g.globalAlpha = 0.12;
|
||||
g.fillStyle = '#ffffff';
|
||||
g.fillRect(x + 1, yVal, width, 2);
|
||||
g.globalAlpha = 1;
|
||||
}
|
||||
|
||||
function drawScale(g, rect, centerX, mapY) {
|
||||
drawHairlineGrid(g, rect, mapY, HIFI_TOP, HIFI_BOTTOM, 1);
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.strokeStyle = 'rgba(143, 211, 212, 0.22)';
|
||||
g.lineWidth = 1;
|
||||
for (const db of MINOR_TICKS) {
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
g.beginPath();
|
||||
g.moveTo(centerX - 4, y);
|
||||
g.lineTo(centerX + 4, y);
|
||||
g.stroke();
|
||||
}
|
||||
for (const db of MAJOR_TICKS) {
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
g.beginPath();
|
||||
g.moveTo(centerX - 8, y);
|
||||
g.lineTo(centerX + 8, y);
|
||||
g.stroke();
|
||||
}
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
for (const db of MAJOR_TICKS) {
|
||||
const y = mapY(db);
|
||||
const label = db > 0 ? `+${db}` : `${db}`;
|
||||
g.fillText(label, centerX, y + 5);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawWarningEdges(g, leftX, barW, rightX, centerX, yWarn, yTop, color) {
|
||||
const innerRight = leftX + barW;
|
||||
const gapL = Math.abs(centerX - innerRight);
|
||||
const insetL = Math.max(1, Math.floor(gapL * 0.35));
|
||||
const xL = Math.round(innerRight + insetL) + 0.5;
|
||||
|
||||
const innerLeft = rightX;
|
||||
const gapR = Math.abs(centerX - innerLeft);
|
||||
const insetR = Math.max(1, Math.floor(gapR * 0.35));
|
||||
const xR = Math.round(innerLeft - insetR) + 0.5;
|
||||
|
||||
const y1 = Math.min(yWarn, yTop);
|
||||
const y2 = Math.max(yWarn, yTop);
|
||||
|
||||
g.save();
|
||||
g.strokeStyle = color;
|
||||
g.lineWidth = 1;
|
||||
g.beginPath(); g.moveTo(xL, y1); g.lineTo(xL, y2); g.stroke();
|
||||
g.beginPath(); g.moveTo(xR, y1); g.lineTo(xR, y2); g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawBarTicks(g, leftX, rightX, widthPx, mapY, warnColor) {
|
||||
if (!g) return;
|
||||
|
||||
g.save();
|
||||
g.lineWidth = 1;
|
||||
const defaultColor = 'rgb(0,0,255)';
|
||||
const majorInset = 2;
|
||||
const minorFrac = 0.45;
|
||||
const majorWidth = Math.max(1, widthPx - 4 * majorInset);
|
||||
const minorWidth = Math.max(1, Math.floor(widthPx * minorFrac));
|
||||
const cxL = leftX + 1 + widthPx / 2;
|
||||
const cxR = rightX + 1 + widthPx / 2;
|
||||
|
||||
const drawPair = (yPix, width, color = defaultColor) => {
|
||||
g.strokeStyle = color;
|
||||
const x1L = Math.round(cxL - width / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + width / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
const x1R = Math.round(cxR - width / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + width / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
for (const db of MAJOR_TICKS) {
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
const color = db === HIFI_RED_START ? warnColor : defaultColor;
|
||||
drawPair(y, majorWidth, color);
|
||||
}
|
||||
for (const db of MINOR_TICKS) {
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
drawPair(y, minorWidth, defaultColor);
|
||||
}
|
||||
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function formatHeaderValue(v) {
|
||||
const n = Number.isFinite(v) ? v : HIFI_BOTTOM;
|
||||
const sign = n >= 0 ? '+' : '-';
|
||||
return `${sign}${Math.abs(n).toFixed(1)}`;
|
||||
}
|
||||
|
||||
function resolveHifiRefDbfsFor0(CONFIG = {}) {
|
||||
const base = Number.isFinite(CONFIG.PPM_REF_DBFS_PEAK_FOR_0_DBU)
|
||||
? CONFIG.PPM_REF_DBFS_PEAK_FOR_0_DBU
|
||||
: -15;
|
||||
const modeOffset = (CONFIG.PPM_DIN_MODE === 'al_minus6') ? -6 : -9;
|
||||
const trim = Number(CONFIG.PPM_DIN_TRIM_DB) || 0;
|
||||
const effOff = modeOffset + trim;
|
||||
const ppmDin0Dbfs = base - effOff;
|
||||
return (CONFIG.HIFI_PEAK_ALIGNMENT === 'ppm_din_zero')
|
||||
? ppmDin0Dbfs
|
||||
: (ppmDin0Dbfs - 5);
|
||||
}
|
||||
|
||||
function syncAlignment(shared, CONFIG = {}) {
|
||||
const nextRef = resolveHifiRefDbfsFor0(CONFIG);
|
||||
const prevRef = Number.isFinite(shared.refDbfsFor0) ? shared.refDbfsFor0 : nextRef;
|
||||
const shift = prevRef - nextRef;
|
||||
if (!Number.isFinite(shift) || Math.abs(shift) < 1e-6) {
|
||||
shared.refDbfsFor0 = nextRef;
|
||||
return;
|
||||
}
|
||||
|
||||
shared.refDbfsFor0 = nextRef;
|
||||
shared.target.L = clamp((shared.target.L ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
shared.target.R = clamp((shared.target.R ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
shared.values.L = clamp((shared.values.L ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
shared.values.R = clamp((shared.values.R ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
shared.hold.L = clamp((shared.hold.L ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
shared.hold.R = clamp((shared.hold.R ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
if (shared._holdState?.L) shared._holdState.L.value = clamp((shared._holdState.L.value ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
if (shared._holdState?.R) shared._holdState.R.value = clamp((shared._holdState.R.value ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
if (shared._header) {
|
||||
shared._header.L = clamp((shared._header.L ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
shared._header.R = clamp((shared._header.R ?? HIFI_BOTTOM) + shift, HIFI_BOTTOM, HIFI_TOP);
|
||||
}
|
||||
}
|
||||
|
||||
function smoothHeader(shared, rawL, rawR, alpha = 0.2) {
|
||||
if (!shared._header) {
|
||||
shared._header = { L: rawL, R: rawR };
|
||||
return shared._header;
|
||||
}
|
||||
shared._header.L += alpha * (rawL - shared._header.L);
|
||||
shared._header.R += alpha * (rawR - shared._header.R);
|
||||
return shared._header;
|
||||
}
|
||||
|
||||
function norm(db) {
|
||||
const clamped = clamp(db, HIFI_BOTTOM, HIFI_TOP);
|
||||
return (clamped - HIFI_BOTTOM) / (HIFI_TOP - HIFI_BOTTOM);
|
||||
}
|
||||
|
||||
function clamp(v, lo, hi) {
|
||||
return Math.max(lo, Math.min(hi, v));
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
import { createPeakHoldState, stepPeakHold } from '../core/utils.js';
|
||||
|
||||
// meters/lufs.js — vereinfachtes LUFS-Display (Integrated, Momentary, Short-term) + LRA & TP
|
||||
// Hinweis: Der Audio-Worklet liefert aktuell keine echten LUFS-Filterausgänge.
|
||||
// Wir nähern LUFS über dBFS (RMS) an und integrieren per EMA:
|
||||
// - Momentary ≈ 400 ms
|
||||
// - Short-term ≈ 3 s
|
||||
// - Integrated = langsame EMA (ohne Gate)
|
||||
// TruePeak nehmen wir aus packet.tpL/tpR (dBFS), LRA aus Short-term vs. Momentary.
|
||||
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
import { LABEL_COLOR, OK_COLOR } from '../core/theme.js';
|
||||
|
||||
export const id = 'lufs';
|
||||
|
||||
export function initShared(CONFIG) {
|
||||
const now = performance.now();
|
||||
return {
|
||||
integ: -23.0,
|
||||
momentary: -23.0,
|
||||
shortTerm: -23.0,
|
||||
lra: 0.0,
|
||||
truePeak: -60.0,
|
||||
tpInstant: -60.0,
|
||||
_tpHoldState: createPeakHoldState(-60, now, CONFIG?.TP_HOLD_MS ?? CONFIG?.VU_HOLD_MS ?? 1000),
|
||||
_lastTs: now,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
// Prefer true LUFS from packet (computed in audio.js via K-weighted analysers)
|
||||
if (Number.isFinite(packet.lufsM)) shared.momentary = packet.lufsM;
|
||||
if (Number.isFinite(packet.lufsS)) shared.shortTerm = packet.lufsS;
|
||||
if (Number.isFinite(packet.lufsI)) shared.integ = packet.lufsI;
|
||||
if (Number.isFinite(packet.lra)) shared.lra = packet.lra;
|
||||
|
||||
// True Peak hold from packet
|
||||
if (Number.isFinite(packet.tpL) || Number.isFinite(packet.tpR)) {
|
||||
const tpL = Number.isFinite(packet.tpL) ? packet.tpL : -60;
|
||||
const tpR = Number.isFinite(packet.tpR) ? packet.tpR : -60;
|
||||
shared.tpInstant = Math.max(tpL, tpR);
|
||||
}
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG, shared) {
|
||||
// Skala: LUFS (negativ). Wir verwenden Bereich [-50 .. -5]
|
||||
const LUFS_TOP = -5, LUFS_BOTTOM = -50;
|
||||
const mapY = (lufs) => {
|
||||
const v = Math.max(LUFS_BOTTOM, Math.min(LUFS_TOP, lufs));
|
||||
const t = (v - LUFS_BOTTOM) / (LUFS_TOP - LUFS_BOTTOM);
|
||||
return rect.y + (1 - t) * rect.h;
|
||||
};
|
||||
|
||||
// 3 Spalten (Momentary, Short-term, Integrated)
|
||||
const innerPad = 8, gap = 10;
|
||||
const colW = Math.floor((rect.w - innerPad * 2 - gap * 2) / 3);
|
||||
const xM = rect.x + innerPad;
|
||||
const xS = xM + colW + gap;
|
||||
const xI = xS + colW + gap;
|
||||
|
||||
// Bars zeichnen
|
||||
drawLufsBar(g, { x: xM, y: rect.y, w: colW, h: rect.h }, shared.momentary, 'M', CONFIG, mapY);
|
||||
drawLufsBar(g, { x: xS, y: rect.y, w: colW, h: rect.h }, shared.shortTerm, 'S', CONFIG, mapY);
|
||||
drawLufsBar(g, { x: xI, y: rect.y, w: colW, h: rect.h }, shared.integ, 'I', CONFIG, mapY);
|
||||
|
||||
// True Peak hold smoothing
|
||||
const now = performance.now();
|
||||
const holdMs = Number.isFinite(CONFIG.TP_HOLD_MS) ? CONFIG.TP_HOLD_MS : (CONFIG.VU_HOLD_MS ?? 1000);
|
||||
const decay = Number.isFinite(CONFIG.TP_DECAY_DB_PER_S) ? CONFIG.TP_DECAY_DB_PER_S : 20;
|
||||
if (!shared._tpHoldState) {
|
||||
shared._tpHoldState = createPeakHoldState(shared.truePeak ?? -60, now, holdMs);
|
||||
}
|
||||
const tpInstant = Number.isFinite(shared.tpInstant) ? shared.tpInstant : -60;
|
||||
const tpValue = stepPeakHold(tpInstant, shared._tpHoldState, now, {
|
||||
holdMs,
|
||||
decayDbPerS: decay,
|
||||
floor: -60,
|
||||
riseThreshold: 0.1,
|
||||
});
|
||||
shared.truePeak = tpValue;
|
||||
|
||||
// Zusatz-Infos unterhalb
|
||||
// g.save();
|
||||
// g.fillStyle = '#8fd3d4';
|
||||
// g.textAlign = 'left';
|
||||
// g.fillText(`LRA: ${shared.lra.toFixed(1)} LU`, rect.x, rect.y + rect.h + 20);
|
||||
// g.fillText(`TP: ${shared.truePeak.toFixed(1)} dBFS`, rect.x, rect.y + rect.h + 38);
|
||||
// g.restore();
|
||||
|
||||
drawLufsStaticOverlay(g, shared, rect, CONFIG, { xM, xS, xI, colW }, mapY);
|
||||
}
|
||||
|
||||
function drawLufsStaticOverlay(g, shared, rect, CONFIG, geom, mapY) {
|
||||
const { xM, xS, xI, colW } = geom;
|
||||
const topPad = 10;
|
||||
const layerX = rect.x;
|
||||
const layerY = rect.y - topPad;
|
||||
const layerW = rect.w;
|
||||
const layerH = rect.h + topPad;
|
||||
const scaleCol = CONFIG?.LUFS_SCALE_LABEL_COLOR || LABEL_COLOR;
|
||||
const key = [
|
||||
'scale-font-header-v1-top-pad',
|
||||
Math.round(rect.w),
|
||||
Math.round(rect.h),
|
||||
topPad,
|
||||
scaleCol,
|
||||
].join('|');
|
||||
drawCachedStaticLayer(g, shared, 'lufs-static', key, layerX, layerY, layerW, layerH, (cg) => {
|
||||
cg.save();
|
||||
cg.translate(-layerX, -layerY);
|
||||
const drawRefs = (xBase) => {
|
||||
const col = { x: xBase, y: rect.y, w: colW, h: rect.h };
|
||||
for (const v of [-23, -18, -10, -5]) {
|
||||
const y = mapY(v);
|
||||
const isMajor = (v === -23 || v === -18 || v === -10);
|
||||
cg.save();
|
||||
cg.strokeStyle = scaleCol;
|
||||
cg.globalAlpha = isMajor ? 1 : 0.28;
|
||||
cg.setLineDash(isMajor ? [] : [2,2]);
|
||||
cg.beginPath(); cg.moveTo(col.x, y); cg.lineTo(col.x + col.w, y); cg.stroke();
|
||||
if (isMajor) {
|
||||
cg.globalAlpha = 1;
|
||||
cg.fillStyle = scaleCol; cg.textAlign = 'center';
|
||||
cg.fillText(`${v}`, col.x + col.w / 2, y - 4);
|
||||
}
|
||||
cg.restore();
|
||||
}
|
||||
};
|
||||
drawRefs(xM); drawRefs(xS); drawRefs(xI);
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
function drawLufsBar(g, rect, value, label, CONFIG, mapY) {
|
||||
const yVal = mapY(value);
|
||||
const yFloor = mapY(-50);
|
||||
const color = getLufsBarColor(label, CONFIG);
|
||||
|
||||
g.save();
|
||||
g.fillStyle = color;
|
||||
g.fillRect(rect.x + 1, yVal, Math.max(2, rect.w - 2), Math.max(0, yFloor - yVal));
|
||||
|
||||
g.fillStyle = '#ffffff';
|
||||
g.textAlign = 'center';
|
||||
g.fillText(label, rect.x + rect.w / 2, rect.y - 10);
|
||||
g.fillText(value.toFixed(1), rect.x + rect.w / 2, rect.y + rect.h + 18);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function getLufsBarColor(label, CONFIG = {}) {
|
||||
const fallback = CONFIG.LUFS_COLOR_GREEN || OK_COLOR;
|
||||
if (label === 'I') return CONFIG.LUFS_COLOR_I || CONFIG.LUFS_COLOR_I_GREEN || fallback;
|
||||
if (label === 'M') return CONFIG.LUFS_COLOR_M || CONFIG.LUFS_COLOR_M_GREEN || fallback;
|
||||
if (label === 'S') return CONFIG.LUFS_COLOR_S || CONFIG.LUFS_COLOR_S_GREEN || fallback;
|
||||
return fallback;
|
||||
}
|
||||
@@ -0,0 +1,571 @@
|
||||
import { createPeakHoldState, stepPeakHold } from '../core/utils.js';
|
||||
import { drawHairlineGrid, METER_HEADER_FONT } from './scale_helpers.js';
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
import { HEADER_BG, LABEL_COLOR, MID_COLOR, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
// meters/ppm_din.js — Peak Programme Meter, DIN Scale (IEC 60268-10 Type I)
|
||||
// Quasi-PPM mit optionalem Peak-Hold, DIN-Skala und bestehendem Farbschema.
|
||||
|
||||
export const id = 'ppm-din';
|
||||
|
||||
const DEFAULT_DECAY_DB_PER_S = 20 / 1.7; // 20 dB in ca. 1.7 s → ~11.76 dB/s
|
||||
const DEFAULT_HOLD_MS = 1000;
|
||||
|
||||
const DIN_SCALE = [
|
||||
{ db: -50, pos: 0.0205 },
|
||||
{ db: -40, pos: 0.0564 },
|
||||
{ db: -35, pos: 0.0974 },
|
||||
{ db: -30, pos: 0.1538 },
|
||||
{ db: -25, pos: 0.2308 },
|
||||
{ db: -20, pos: 0.3179 },
|
||||
{ db: -15, pos: 0.4359 },
|
||||
{ db: -10, pos: 0.5538 },
|
||||
{ db: -5, pos: 0.7026 },
|
||||
{ db: 0, pos: 0.8513 },
|
||||
{ db: +5, pos: 1.0000 },
|
||||
];
|
||||
|
||||
const PERCENT_MARKS = [
|
||||
{ label: '1', db: -40 },
|
||||
{ label: '10', db: -20 },
|
||||
{ label: '50', db: -6 },
|
||||
{ label: '100', db: 0 },
|
||||
{ label: '180', db: +5 },
|
||||
];
|
||||
|
||||
const MAJOR_TICKS_DB = [-50, -40, -30, -20, -10, -5, 0, +5];
|
||||
const MINOR_TICKS = [
|
||||
{ db: -35 },
|
||||
{ db: -25 },
|
||||
{ db: -21, color: 'warn' },
|
||||
{ db: -15 },
|
||||
{ db: -9 },
|
||||
{ db: -8 },
|
||||
{ db: -7 },
|
||||
{ db: -6 },
|
||||
{ db: -4 },
|
||||
{ db: -3 },
|
||||
{ db: -2 },
|
||||
{ db: -1 },
|
||||
{ db: +1 },
|
||||
{ db: +2 },
|
||||
{ db: +3 },
|
||||
{ db: +4 },
|
||||
];
|
||||
|
||||
export function initShared(CONFIG = {}) {
|
||||
const now = performance.now();
|
||||
const bottom = Number.isFinite(CONFIG.PPM_DIN_BOTTOM) ? CONFIG.PPM_DIN_BOTTOM : -50;
|
||||
const holdMs = Number.isFinite(CONFIG.PPM_DIN_HOLD_MS) ? CONFIG.PPM_DIN_HOLD_MS : DEFAULT_HOLD_MS;
|
||||
return {
|
||||
values: { L: bottom, R: bottom },
|
||||
hold: { L: bottom, R: bottom },
|
||||
loudnessDbfs: { L: null, R: null },
|
||||
_loudSmooth: null,
|
||||
_env: {
|
||||
L_dbfs: -90,
|
||||
R_dbfs: -90,
|
||||
lastTs: now,
|
||||
},
|
||||
_holdState: {
|
||||
L: createPeakHoldState(bottom, now, holdMs),
|
||||
R: createPeakHoldState(bottom, now, holdMs),
|
||||
},
|
||||
_holdCfg: {
|
||||
holdMs,
|
||||
decayDbPerS: Number.isFinite(CONFIG.PPM_DIN_HOLD_DECAY_DB_PER_S)
|
||||
? CONFIG.PPM_DIN_HOLD_DECAY_DB_PER_S
|
||||
: (Number.isFinite(CONFIG.PPM_DIN_DECAY_DB_PER_S) ? CONFIG.PPM_DIN_DECAY_DB_PER_S : DEFAULT_DECAY_DB_PER_S),
|
||||
},
|
||||
// Offset for DIN uses PPM_DIN_OFFSET so that 0 dB on the meter aligns
|
||||
// properly with the Permitted Maximum Level (PML). According to the
|
||||
// DIN Type I specification, 0 dBu (≈−15 dBFS peak) should read −9 dB.
|
||||
offset: Number(CONFIG.PPM_DIN_OFFSET) || 0,
|
||||
refDbfsFor0: Number.isFinite(CONFIG.PPM_REF_DBFS_PEAK_FOR_0_DBU)
|
||||
? CONFIG.PPM_REF_DBFS_PEAK_FOR_0_DBU
|
||||
: -15,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
const inL = Number.isFinite(packet?.ppmDinL) ? packet.ppmDinL : (Number.isFinite(packet?.ppmL) ? packet.ppmL : -90);
|
||||
const inR = Number.isFinite(packet?.ppmDinR) ? packet.ppmDinR : (Number.isFinite(packet?.ppmR) ? packet.ppmR : -90);
|
||||
const ppmBoxL = Number.isFinite(packet?.ppmBoxL) ? packet.ppmBoxL : null;
|
||||
const ppmBoxR = Number.isFinite(packet?.ppmBoxR) ? packet.ppmBoxR : null;
|
||||
shared._loudIsBox = Number.isFinite(ppmBoxL) || Number.isFinite(ppmBoxR);
|
||||
const fallbackLoud = Number.isFinite(packet?.lufsM)
|
||||
? packet.lufsM
|
||||
: Number.isFinite(packet?.lufsS)
|
||||
? packet.lufsS
|
||||
: Number.isFinite(packet?.lufsI)
|
||||
? packet.lufsI
|
||||
: null;
|
||||
const loudL = Number.isFinite(ppmBoxL)
|
||||
? ppmBoxL
|
||||
: (Number.isFinite(packet?.lufsML) ? packet.lufsML : fallbackLoud);
|
||||
const loudR = Number.isFinite(ppmBoxR)
|
||||
? ppmBoxR
|
||||
: (Number.isFinite(packet?.lufsMR) ? packet.lufsMR : fallbackLoud);
|
||||
|
||||
const base = Number.isFinite(shared.refDbfsFor0) ? shared.refDbfsFor0 : -15;
|
||||
const off = shared.offset || 0;
|
||||
// Verwende Worklet-Pegel direkt; Ballistik liegt bereits im AudioWorklet.
|
||||
shared._env.L_dbfs = inL;
|
||||
shared._env.R_dbfs = inR;
|
||||
const now = performance.now();
|
||||
shared._env.lastTs = now;
|
||||
shared.values.L = (inL - base) + off;
|
||||
shared.values.R = (inR - base) + off;
|
||||
|
||||
// Smoothe Loudness pro Kanal (LUFS M bevorzugt) für ruhige Overlay-Bewegung.
|
||||
if (!shared._loudSmooth) {
|
||||
shared._loudSmooth = {
|
||||
L: Number.isFinite(loudL) ? loudL : null,
|
||||
R: Number.isFinite(loudR) ? loudR : null,
|
||||
lastTs: now,
|
||||
};
|
||||
}
|
||||
const dtL = Math.max(1e-3, (now - (shared._loudSmooth.lastTs || now)) / 1000);
|
||||
const tau = 0.18; // ~180 ms Gleitzeit
|
||||
const alphaL = 1 - Math.exp(-dtL / tau);
|
||||
|
||||
const smoothVal = (prev, target) => {
|
||||
if (!Number.isFinite(target)) return { out: null, prev: prev };
|
||||
const baseVal = Number.isFinite(prev) ? prev : target;
|
||||
const out = baseVal + alphaL * (target - baseVal);
|
||||
return { out, prev: out };
|
||||
};
|
||||
|
||||
const resL = smoothVal(shared._loudSmooth.L, loudL);
|
||||
const resR = smoothVal(shared._loudSmooth.R, loudR);
|
||||
shared._loudSmooth.L = resL.prev;
|
||||
shared._loudSmooth.R = resR.prev;
|
||||
shared._loudSmooth.lastTs = now;
|
||||
shared.loudnessDbfs = { L: resL.out, R: resR.out };
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG = {}, shared) {
|
||||
// Use the DIN-specific offset for display. This ensures that DIN and EBU
|
||||
// scales do not influence each other. The effective offset is the user-
|
||||
// adjustable correction on top of the meter's built-in offset.
|
||||
const baseMode = (CONFIG.PPM_DIN_MODE === 'al_minus6') ? -6 : -9;
|
||||
const __effOff = baseMode + (Number(CONFIG.PPM_DIN_TRIM_DB) || 0);
|
||||
const __offCorr = __effOff - (shared.offset || 0);
|
||||
|
||||
const PPM_TOP = Number.isFinite(CONFIG.PPM_DIN_TOP) ? CONFIG.PPM_DIN_TOP : +5;
|
||||
const PPM_BOTTOM = Number.isFinite(CONFIG.PPM_DIN_BOTTOM) ? CONFIG.PPM_DIN_BOTTOM : -50;
|
||||
const EXT_BOTTOM = PPM_BOTTOM - 20; // Virtuelle Skalenverlängerung für Loudness-Boxen
|
||||
const RED_START = Number.isFinite(CONFIG.PPM_DIN_RED_START) ? CONFIG.PPM_DIN_RED_START : 0;
|
||||
const redOnly = CONFIG.PPM_RED_BAR_ONLY !== false;
|
||||
|
||||
const colNorm = CONFIG.PPM_DIN_COLOR_NORMAL || MID_COLOR;
|
||||
const colWarn = CONFIG.PPM_DIN_COLOR_WARN || WARN_COLOR;
|
||||
|
||||
const mapNorm = (db) => {
|
||||
const clamped = Math.max(PPM_BOTTOM, Math.min(PPM_TOP, db));
|
||||
const table = DIN_SCALE;
|
||||
let prev = table[0];
|
||||
for (let i = 1; i < table.length; i++) {
|
||||
const curr = table[i];
|
||||
if (clamped <= curr.db) {
|
||||
const span = curr.db - prev.db || 1;
|
||||
const t = (clamped - prev.db) / span;
|
||||
return prev.pos + t * (curr.pos - prev.pos);
|
||||
}
|
||||
prev = curr;
|
||||
}
|
||||
return table[table.length - 1].pos;
|
||||
};
|
||||
// DIN-Skala auf volle Höhe normalisieren: -50 dB sitzt am Rect-Boden, Proportionen bleiben.
|
||||
const normBottom = mapNorm(PPM_BOTTOM);
|
||||
const normSpan = Math.max(1e-6, 1 - normBottom);
|
||||
const mapY = (db) => {
|
||||
const n = mapNorm(db);
|
||||
const t = Math.max(0, Math.min(1, (n - normBottom) / normSpan));
|
||||
return rect.y + (1 - t) * rect.h;
|
||||
};
|
||||
|
||||
const innerPad = 8;
|
||||
const scaleW = 28;
|
||||
const gap = 8;
|
||||
const avail = rect.w - innerPad * 2 - scaleW - gap * 2;
|
||||
let barW = Math.max(10, Math.floor(avail / 2));
|
||||
barW = Math.floor(barW * (CONFIG.METER_BAR_THIN || 0.55));
|
||||
|
||||
const used = 2 * barW + scaleW + 2 * gap;
|
||||
const extra = Math.max(0, (rect.w - innerPad * 2) - used);
|
||||
const leftX = rect.x + innerPad + extra / 2;
|
||||
const scaleX = leftX + barW + gap;
|
||||
const rightX = scaleX + scaleW + gap;
|
||||
const centerX = scaleX + scaleW / 2;
|
||||
|
||||
const bottomLoud = PPM_BOTTOM - 20; // Loudness-Boxen dürfen 20 dB tiefer fallen als die Skala
|
||||
const clampDb = (v) => Math.max(PPM_BOTTOM, Math.min(PPM_TOP, v));
|
||||
const rawL = shared.values.L + __offCorr;
|
||||
const rawR = shared.values.R + __offCorr;
|
||||
const dbValL = clampDb(rawL);
|
||||
const dbValR = clampDb(rawR);
|
||||
const smooth = smoothHeader(shared, rawL, rawR);
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 24);
|
||||
const headerWarn = CONFIG.PPM_DIN_HEADER_SHOW_VALUE && (rawL > RED_START || rawR > RED_START);
|
||||
g.fillStyle = headerWarn ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.textAlign = 'center';
|
||||
if (CONFIG.PPM_DIN_HEADER_SHOW_VALUE) {
|
||||
const yText = rect.y - 12;
|
||||
const fmt = (v) => {
|
||||
const sign = v >= 0 ? '+' : '-';
|
||||
return `${sign}${Math.abs(v).toFixed(1)}`;
|
||||
};
|
||||
const centerLeft = leftX + barW / 2;
|
||||
const centerRight = rightX + barW / 2;
|
||||
const isRedL = rawL > RED_START;
|
||||
const isRedR = rawR > RED_START;
|
||||
g.textAlign = 'center';
|
||||
g.fillStyle = isRedL ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.L), centerLeft, yText);
|
||||
g.fillStyle = colNorm;
|
||||
g.fillText('|', centerX, yText);
|
||||
g.fillStyle = isRedR ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.R), centerRight, yText);
|
||||
} else {
|
||||
g.fillText('PPM (DIN)', centerX, rect.y - 12);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
|
||||
const ppmL = mapClamp(dbValL, PPM_BOTTOM, PPM_TOP);
|
||||
const ppmR = mapClamp(dbValR, PPM_BOTTOM, PPM_TOP);
|
||||
const baseDbfs = Number.isFinite(shared.refDbfsFor0) ? shared.refDbfsFor0 : -15;
|
||||
const loudOff = Number(CONFIG.PPM_DIN_LOUDNESS_OFFSET_DB) || 0;
|
||||
const loudnessDisplayL = (CONFIG.PPM_DIN_LOUDNESS_BOXES && Number.isFinite(shared.loudnessDbfs?.L))
|
||||
? (shared.loudnessDbfs.L - baseDbfs) + (shared.offset || 0) + __offCorr + loudOff
|
||||
: null;
|
||||
const loudnessDisplayR = (CONFIG.PPM_DIN_LOUDNESS_BOXES && Number.isFinite(shared.loudnessDbfs?.R))
|
||||
? (shared.loudnessDbfs.R - baseDbfs) + (shared.offset || 0) + __offCorr + loudOff
|
||||
: null;
|
||||
|
||||
const yBottom = mapY(PPM_BOTTOM);
|
||||
const yRed = mapY(RED_START);
|
||||
const yTop = mapY(PPM_TOP);
|
||||
const innerW = Math.max(10, barW - 2);
|
||||
const drawBar = (x0, dbVal) => {
|
||||
const yVal = mapY(dbVal);
|
||||
|
||||
if (dbVal > RED_START) {
|
||||
if (redOnly) {
|
||||
const yNormTop = Math.min(yRed, yBottom);
|
||||
if (yBottom - yNormTop > 0) {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, yNormTop, innerW, yBottom - yNormTop);
|
||||
}
|
||||
const yWarnTop = Math.min(yVal, yRed);
|
||||
if (yRed - yWarnTop > 0) {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x0 + 1, yWarnTop, innerW, yRed - yWarnTop);
|
||||
}
|
||||
} else {
|
||||
if (yBottom - yVal > 0) {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x0 + 1, yVal, innerW, yBottom - yVal);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (yBottom - yVal > 0) {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, yVal, innerW, yBottom - yVal);
|
||||
}
|
||||
}
|
||||
g.globalAlpha = 0.12;
|
||||
g.fillStyle = '#ffffff';
|
||||
g.fillRect(x0 + 1, yVal, innerW, 2);
|
||||
g.globalAlpha = 1;
|
||||
};
|
||||
|
||||
drawBar(leftX, ppmL);
|
||||
drawBar(rightX, ppmR);
|
||||
|
||||
// Peak-Hold (optional, rein visuell; eigentliche Ballistik kommt aus dem Worklet)
|
||||
const holdMs = Number.isFinite(CONFIG.PPM_DIN_HOLD_MS)
|
||||
? Math.max(0, CONFIG.PPM_DIN_HOLD_MS)
|
||||
: (shared?._holdCfg?.holdMs ?? DEFAULT_HOLD_MS);
|
||||
const holdDecay = Number.isFinite(CONFIG.PPM_DIN_HOLD_DECAY_DB_PER_S)
|
||||
? CONFIG.PPM_DIN_HOLD_DECAY_DB_PER_S
|
||||
: (Number.isFinite(CONFIG.PPM_DIN_DECAY_DB_PER_S) ? CONFIG.PPM_DIN_DECAY_DB_PER_S : DEFAULT_DECAY_DB_PER_S);
|
||||
if (holdMs > 0) {
|
||||
if (!shared.hold) shared.hold = { L: PPM_BOTTOM, R: PPM_BOTTOM };
|
||||
const cfgChanged = !shared._holdState
|
||||
|| !shared._holdCfg
|
||||
|| shared._holdCfg.holdMs !== holdMs
|
||||
|| shared._holdCfg.decayDbPerS !== holdDecay;
|
||||
if (cfgChanged) {
|
||||
const resetNow = performance.now();
|
||||
shared._holdState = {
|
||||
L: createPeakHoldState(shared.hold.L ?? PPM_BOTTOM, resetNow, holdMs),
|
||||
R: createPeakHoldState(shared.hold.R ?? PPM_BOTTOM, resetNow, holdMs),
|
||||
};
|
||||
shared._holdCfg = { holdMs, decayDbPerS: holdDecay };
|
||||
}
|
||||
const nowHold = performance.now();
|
||||
const holdOpts = {
|
||||
holdMs,
|
||||
decayDbPerS: holdDecay,
|
||||
floor: PPM_BOTTOM,
|
||||
riseThreshold: 0.2,
|
||||
};
|
||||
shared.hold.L = stepPeakHold(ppmL, shared._holdState.L, nowHold, holdOpts);
|
||||
shared.hold.R = stepPeakHold(ppmR, shared._holdState.R, nowHold, holdOpts);
|
||||
g.save();
|
||||
g.fillStyle = '#ffffff';
|
||||
g.fillRect(leftX + 1, mapY(shared.hold.L) - 1, innerW, 2);
|
||||
g.fillRect(rightX + 1, mapY(shared.hold.R) - 1, innerW, 2);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
const drawLoudBox = (x0, loudVal) => {
|
||||
if (!Number.isFinite(loudVal)) return;
|
||||
const boxSize = barW; // exakt so breit wie der sichtbare Balken (keine 1px-Ränder)
|
||||
// Messwert sitzt an der oberen Kante; Skala wird nach unten verlängert.
|
||||
// Bei -50 dB (Bottom) liegt die Oberkante im sichtbaren Bereich,
|
||||
// bei -70 dB ist sie eine volle Meterhöhe weiter unten (außerhalb des Sichtfelds).
|
||||
const spanExt = Math.max(1e-6, PPM_BOTTOM - EXT_BOTTOM);
|
||||
const yBottom = mapY(PPM_BOTTOM);
|
||||
const yLoud = (loudVal < PPM_BOTTOM)
|
||||
? yBottom + ((PPM_BOTTOM - loudVal) / spanExt) * rect.h
|
||||
: mapY(loudVal);
|
||||
// Zeichne nur den sichtbaren Teil: Box-Oberkante = Pegel, Unterkante nicht unter yBottom.
|
||||
const boxY = yLoud;
|
||||
const visibleHeight = Math.max(0, Math.min(boxSize, yBottom - boxY));
|
||||
if (visibleHeight <= 0) return;
|
||||
const x = x0;
|
||||
g.save();
|
||||
g.fillStyle = '#0b6ea8';
|
||||
g.globalAlpha = 0.92;
|
||||
g.fillRect(x, boxY, boxSize, visibleHeight);
|
||||
g.globalAlpha = 1;
|
||||
g.strokeStyle = '#094b73';
|
||||
g.lineWidth = 1;
|
||||
g.strokeRect(x + 0.5, boxY + 0.5, boxSize - 1, visibleHeight - 1);
|
||||
g.restore();
|
||||
};
|
||||
|
||||
drawLoudBox(leftX, loudnessDisplayL);
|
||||
drawLoudBox(rightX, loudnessDisplayR);
|
||||
|
||||
drawPpmDinStaticOverlay(g, shared, rect, CONFIG, {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
yRed,
|
||||
yTop,
|
||||
colWarn,
|
||||
}, mapY, PPM_TOP, PPM_BOTTOM);
|
||||
}
|
||||
|
||||
function drawPpmDinStaticOverlay(g, shared, rect, CONFIG, geom, mapY, PPM_TOP, PPM_BOTTOM) {
|
||||
const {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
yRed,
|
||||
yTop,
|
||||
colWarn,
|
||||
} = geom;
|
||||
const topPad = 10;
|
||||
const sidePad = 0;
|
||||
const layerX = rect.x - sidePad;
|
||||
const layerY = rect.y - topPad;
|
||||
const layerW = rect.w + sidePad * 2;
|
||||
const layerH = rect.h + 24 + topPad;
|
||||
const key = [
|
||||
'scale-font-header-v1-top-pad',
|
||||
Math.round(rect.w),
|
||||
Math.round(rect.h),
|
||||
topPad,
|
||||
sidePad,
|
||||
CONFIG.METER_BAR_THIN || 0.55,
|
||||
CONFIG.PPM_DIN_MODE || 'al_minus9',
|
||||
CONFIG.AL_MARKERS_ENABLED === false ? 0 : 1,
|
||||
CONFIG.PPM_DIN_TOP ?? 5,
|
||||
CONFIG.PPM_DIN_BOTTOM ?? -50,
|
||||
CONFIG.PPM_DIN_RED_START ?? 0,
|
||||
METER_HEADER_FONT,
|
||||
colWarn,
|
||||
].join('|');
|
||||
drawCachedStaticLayer(g, shared, 'ppm-din-static', key, layerX, layerY, layerW, layerH, (cg) => {
|
||||
cg.save();
|
||||
cg.translate(-layerX, -layerY);
|
||||
drawWarningEdges(cg, leftX, barW, rightX, centerX, yRed, yTop, colWarn);
|
||||
drawBarTicks(cg, leftX, rightX, innerW, mapY, PPM_TOP, PPM_BOTTOM, colWarn, CONFIG);
|
||||
drawCenterScale(cg, { x: scaleX, y: rect.y, w: scaleW, h: rect.h }, centerX, mapY, PPM_TOP, PPM_BOTTOM);
|
||||
drawPercentScale(cg, leftX, rightX, barW, mapY, PPM_BOTTOM);
|
||||
cg.fillStyle = LABEL_COLOR;
|
||||
cg.textAlign = 'center';
|
||||
const baseY = rect.y + rect.h + 16;
|
||||
cg.fillText('L', leftX + barW / 2, baseY);
|
||||
cg.fillText('R', rightX + barW / 2, baseY);
|
||||
const prevFontLabels = cg.font;
|
||||
cg.fillStyle = '#ffffff';
|
||||
cg.font = 'bold 8.4px ui-monospace, monospace';
|
||||
cg.fillText('dB', centerX, baseY);
|
||||
cg.font = prevFontLabels;
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
function mapClamp(db, bottom, top) {
|
||||
return Math.max(bottom, Math.min(top, db));
|
||||
}
|
||||
|
||||
function drawWarningEdges(g, leftX, barW, rightX, centerX, yWarn, yTop, color) {
|
||||
const innerRight = leftX + barW;
|
||||
const gapL = Math.abs(centerX - innerRight);
|
||||
const insetL = Math.max(1, Math.floor(gapL * 0.35));
|
||||
const xL = Math.round(innerRight + insetL) + 0.5;
|
||||
|
||||
const innerLeft = rightX;
|
||||
const gapR = Math.abs(centerX - innerLeft);
|
||||
const insetR = Math.max(1, Math.floor(gapR * 0.35));
|
||||
const xR = Math.round(innerLeft - insetR) + 0.5;
|
||||
|
||||
const y1 = Math.min(yWarn, yTop);
|
||||
const y2 = Math.max(yWarn, yTop);
|
||||
|
||||
g.save();
|
||||
g.strokeStyle = color;
|
||||
g.lineWidth = 1;
|
||||
g.beginPath(); g.moveTo(xL, y1); g.lineTo(xL, y2); g.stroke();
|
||||
g.beginPath(); g.moveTo(xR, y1); g.lineTo(xR, y2); g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawBarTicks(g, leftX, rightX, widthPx, mapY, top, bottom, warnColor, CONFIG) {
|
||||
g.save();
|
||||
g.lineWidth = 1;
|
||||
|
||||
const DEFAULT_COLOR = 'rgb(0,0,255)';
|
||||
const MAJOR_INSET = 2;
|
||||
const MINOR_FRAC = 0.45;
|
||||
|
||||
const cxL = leftX + 1 + widthPx / 2;
|
||||
const cxR = rightX + 1 + widthPx / 2;
|
||||
|
||||
const drawPair = (yPix, width, color = DEFAULT_COLOR) => {
|
||||
g.save();
|
||||
g.strokeStyle = color;
|
||||
const span = Math.max(1, width);
|
||||
const x1L = Math.round(cxL - span / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + span / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
const x1R = Math.round(cxR - span / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + span / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
g.restore();
|
||||
};
|
||||
|
||||
const minorWidth = Math.max(1, Math.floor(widthPx * MINOR_FRAC));
|
||||
const majorWidth = Math.max(1, widthPx - 4 * MAJOR_INSET);
|
||||
|
||||
const majors = MAJOR_TICKS_DB
|
||||
.filter((db) => db >= bottom && db <= top)
|
||||
.slice()
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
for (const db of majors) {
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
drawPair(y, majorWidth);
|
||||
}
|
||||
|
||||
const warn = warnColor || DEFAULT_COLOR;
|
||||
const showAl = CONFIG?.AL_MARKERS_ENABLED !== false;
|
||||
const minors = MINOR_TICKS
|
||||
.filter((tick) => tick.db >= bottom && tick.db <= top)
|
||||
.slice()
|
||||
.sort((a, b) => a.db - b.db);
|
||||
|
||||
const dynWarnDb = showAl
|
||||
? ((CONFIG?.PPM_DIN_MODE === 'al_minus6') ? -6 : -9)
|
||||
: null;
|
||||
|
||||
for (const tick of minors) {
|
||||
const y = Math.round(mapY(tick.db)) + 0.5;
|
||||
const isDynWarn = dynWarnDb !== null && tick.db === dynWarnDb;
|
||||
const color = (tick.color === 'warn' || isDynWarn) ? warn : DEFAULT_COLOR;
|
||||
drawPair(y, minorWidth, color);
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawCenterScale(g, rect, centerX, mapY, top, bottom) {
|
||||
drawHairlineGrid(g, rect, mapY, top, bottom, 1);
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
|
||||
const majors = MAJOR_TICKS_DB
|
||||
.filter((db) => db >= bottom && db <= top)
|
||||
.slice()
|
||||
.sort((a, b) => b - a);
|
||||
|
||||
for (const db of majors) {
|
||||
const y = mapY(db);
|
||||
if (y < rect.y || y > rect.y + rect.h) continue;
|
||||
const label = db > 0 ? `+${db}` : `${db}`;
|
||||
g.fillText(label, centerX, y + 5);
|
||||
}
|
||||
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawPercentScale(g, leftX, rightX, barW, mapY, bottomDb) {
|
||||
g.save();
|
||||
g.fillStyle = '#ffb347';
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 8px ui-monospace, monospace';
|
||||
const marks = PERCENT_MARKS.slice().sort((a, b) => a.db - b.db);
|
||||
|
||||
g.textAlign = 'right';
|
||||
for (const mark of marks) {
|
||||
g.fillText(mark.label, leftX - 1, mapY(mark.db) + 4);
|
||||
}
|
||||
|
||||
g.textAlign = 'left';
|
||||
const rightTextX = rightX + barW + 1;
|
||||
for (const mark of marks) {
|
||||
g.fillText(mark.label, rightTextX, mapY(mark.db) + 4);
|
||||
}
|
||||
|
||||
const percentYOffset = 12;
|
||||
g.textAlign = 'right';
|
||||
g.fillText('%', leftX - 1, mapY(bottomDb) + percentYOffset);
|
||||
g.textAlign = 'left';
|
||||
g.fillText('%', rightTextX, mapY(bottomDb) + percentYOffset);
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function smoothHeader(shared, rawL, rawR, alpha = 0.2) {
|
||||
if (!shared._header) {
|
||||
shared._header = { L: rawL, R: rawR };
|
||||
return shared._header;
|
||||
}
|
||||
shared._header.L += alpha * (rawL - shared._header.L);
|
||||
shared._header.R += alpha * (rawR - shared._header.R);
|
||||
return shared._header;
|
||||
}
|
||||
@@ -0,0 +1,404 @@
|
||||
import { createPeakHoldState, stepPeakHold } from '../core/utils.js';
|
||||
import { drawHairlineGrid, METER_HEADER_FONT } from './scale_helpers.js';
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
import { HEADER_BG, LABEL_COLOR, MID_COLOR, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
// meters/ppm_ebu.js — PPM (EBU) mit linearer Skala
|
||||
// - Messbereich: -14 … +14 dB (Clamping/Anzeigegrenzen)
|
||||
// - Rote Zone ab +9 dB
|
||||
// - Ticks: große Marken bei -12/-8/-4/0/+4/+8/+12, kleine u. a. bei -10/-6/…/+10
|
||||
// - Labels: nur für die großen Ticks; bei 0 statt "0" → "TEST"
|
||||
|
||||
export const id = 'ppm-ebu';
|
||||
|
||||
const DEFAULT_ATTACK_MS = 10; // Type IIb typisch ~10 ms
|
||||
const DEFAULT_DECAY_DB_PER_S = 8.6; // ~24 dB in 2.8 s
|
||||
const DEFAULT_HOLD_MS = 750;
|
||||
|
||||
const EBU_MAJOR_TICKS = [-12, -8, -4, 0, +4, +8, +12];
|
||||
const EBU_MINOR_TICKS = [-10, -6, -2, +2, +6, +9, +10];
|
||||
|
||||
export function initShared(CONFIG = {}) {
|
||||
const now = performance.now();
|
||||
// Use EBU-specific configuration values. PPM_EBU_BOTTOM defines the
|
||||
// bottom of the EBU scale (default -14 dB) and PPM_EBU_HOLD_MS defines
|
||||
// the peak-hold duration. This ensures the EBU meter aligns with
|
||||
// the Type IIb specification (0 dB at AL, +9 dB red start).
|
||||
const bottom = Number.isFinite(CONFIG.PPM_EBU_BOTTOM) ? CONFIG.PPM_EBU_BOTTOM : -14;
|
||||
const holdMs = Number.isFinite(CONFIG.PPM_EBU_HOLD_MS) ? CONFIG.PPM_EBU_HOLD_MS : DEFAULT_HOLD_MS;
|
||||
const decayCfg = Number.isFinite(CONFIG.PPM_EBU_DECAY_DB_PER_S)
|
||||
? CONFIG.PPM_EBU_DECAY_DB_PER_S
|
||||
: DEFAULT_DECAY_DB_PER_S;
|
||||
|
||||
return {
|
||||
values: { L: bottom, R: bottom },
|
||||
hold: { L: bottom, R: bottom },
|
||||
_env: {
|
||||
L_dbfs: -90,
|
||||
R_dbfs: -90,
|
||||
lastTs: now,
|
||||
},
|
||||
_ballistics: {
|
||||
// The EBU (Type IIb) PPM uses a ~10 ms attack and a decay of 24 dB
|
||||
// in 2.8 s (≈8.6 dB/s).
|
||||
attackMs: Number.isFinite(CONFIG.PPM_EBU_ATTACK_MS) ? CONFIG.PPM_EBU_ATTACK_MS : DEFAULT_ATTACK_MS,
|
||||
decayDbPerS: decayCfg,
|
||||
},
|
||||
_holdState: {
|
||||
L: createPeakHoldState(bottom, now, holdMs),
|
||||
R: createPeakHoldState(bottom, now, holdMs),
|
||||
},
|
||||
_holdCfg: {
|
||||
holdMs,
|
||||
decayDbPerS: Number.isFinite(CONFIG.PPM_EBU_HOLD_DECAY_DB_PER_S)
|
||||
? CONFIG.PPM_EBU_HOLD_DECAY_DB_PER_S
|
||||
: decayCfg,
|
||||
},
|
||||
// Use the EBU-specific offset so that 0 dBu (alignment level) reads 0 dB
|
||||
// on the EBU meter. This avoids the global PPM_OFFSET interfering.
|
||||
offset: Number(CONFIG.PPM_EBU_OFFSET) || 0,
|
||||
// Referenz: 0 dB Anzeige entspricht typ. ~-15 dBFS Peak
|
||||
refDbfsFor0: Number.isFinite(CONFIG.PPM_REF_DBFS_PEAK_FOR_0_DBU)
|
||||
? CONFIG.PPM_REF_DBFS_PEAK_FOR_0_DBU
|
||||
: -15,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
const inL = Number.isFinite(packet?.ppmEbuL) ? packet.ppmEbuL : (Number.isFinite(packet?.ppmL) ? packet.ppmL : -90);
|
||||
const inR = Number.isFinite(packet?.ppmEbuR) ? packet.ppmEbuR : (Number.isFinite(packet?.ppmR) ? packet.ppmR : -90);
|
||||
|
||||
const base = Number.isFinite(shared.refDbfsFor0) ? shared.refDbfsFor0 : -15;
|
||||
const off = shared.offset || 0;
|
||||
// Ballistik liegt im Worklet; hier nur Offset anwenden, um Timer-Jitter im UI zu vermeiden.
|
||||
shared._env.L_dbfs = inL;
|
||||
shared._env.R_dbfs = inR;
|
||||
shared._env.lastTs = performance.now();
|
||||
shared.values.L = (inL - base) + off;
|
||||
shared.values.R = (inR - base) + off;
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG = {}, shared) {
|
||||
// Effective user-correction offset for EBU: use PPM_EBU_OFFSET instead of global PPM_OFFSET.
|
||||
const __effOff = Number(CONFIG.PPM_EBU_OFFSET) || 0;
|
||||
const __offCorr = __effOff - (shared.offset || 0);
|
||||
|
||||
const PPM_TOP = Number.isFinite(CONFIG.PPM_EBU_TOP) ? CONFIG.PPM_EBU_TOP : +14;
|
||||
const PPM_BOTTOM = Number.isFinite(CONFIG.PPM_EBU_BOTTOM) ? CONFIG.PPM_EBU_BOTTOM : -14;
|
||||
const RED_START = Number.isFinite(CONFIG.PPM_EBU_RED_START) ? CONFIG.PPM_EBU_RED_START : +9;
|
||||
|
||||
const redOnly = CONFIG.PPM_RED_BAR_ONLY !== false;
|
||||
const colNorm = CONFIG.PPM_EBU_COLOR_NORMAL || MID_COLOR;
|
||||
const colWarn = CONFIG.PPM_EBU_COLOR_WARN || WARN_COLOR;
|
||||
|
||||
// LINEARE Skalenabbildung
|
||||
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
|
||||
const mapNorm = (db) => {
|
||||
const d = clamp(db, PPM_BOTTOM, PPM_TOP);
|
||||
return (d - PPM_BOTTOM) / (PPM_TOP - PPM_BOTTOM); // 0..1
|
||||
};
|
||||
const mapY = (db) => rect.y + (1 - mapNorm(db)) * rect.h;
|
||||
|
||||
// Layout
|
||||
const innerPad = 8;
|
||||
const scaleW = 28;
|
||||
const gap = 8;
|
||||
const avail = rect.w - innerPad * 2 - scaleW - gap * 2;
|
||||
let barW = Math.max(10, Math.floor(avail / 2));
|
||||
barW = Math.floor(barW * (CONFIG.METER_BAR_THIN || 0.55));
|
||||
|
||||
const used = 2 * barW + scaleW + 2 * gap;
|
||||
const extra = Math.max(0, (rect.w - innerPad * 2) - used);
|
||||
const leftX = rect.x + innerPad + extra / 2;
|
||||
const scaleX = leftX + barW + gap;
|
||||
const rightX = scaleX + scaleW + gap;
|
||||
const centerX = scaleX + scaleW / 2;
|
||||
const centerLeft = leftX + barW / 2;
|
||||
const centerRight = rightX + barW / 2;
|
||||
|
||||
// Werte + Clamping
|
||||
const rawL = shared.values.L + __offCorr;
|
||||
const rawR = shared.values.R + __offCorr;
|
||||
const ppmL = clamp(rawL, PPM_BOTTOM, PPM_TOP);
|
||||
const ppmR = clamp(rawR, PPM_BOTTOM, PPM_TOP);
|
||||
const smooth = smoothHeader(shared, rawL, rawR);
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 24);
|
||||
const headerWarn = CONFIG.PPM_EBU_HEADER_SHOW_VALUE && (rawL > RED_START || rawR > RED_START);
|
||||
g.fillStyle = headerWarn ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.textAlign = 'center';
|
||||
if (CONFIG.PPM_EBU_HEADER_SHOW_VALUE) {
|
||||
const yText = rect.y - 12;
|
||||
const fmt = (v) => {
|
||||
const sign = v >= 0 ? '+' : '-';
|
||||
return `${sign}${Math.abs(v).toFixed(1)}`;
|
||||
};
|
||||
const isRedL = rawL > RED_START;
|
||||
const isRedR = rawR > RED_START;
|
||||
g.textAlign = 'center';
|
||||
g.fillStyle = isRedL ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.L), centerLeft, yText);
|
||||
g.fillStyle = colNorm;
|
||||
g.fillText('|', centerX, yText);
|
||||
g.fillStyle = isRedR ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.R), centerRight, yText);
|
||||
} else {
|
||||
g.fillText('PPM (EBU)', centerX, rect.y - 12);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
|
||||
const yBottom = mapY(PPM_BOTTOM);
|
||||
const yRed = mapY(RED_START);
|
||||
const yTop = mapY(PPM_TOP);
|
||||
const innerW = Math.max(2, barW - 2);
|
||||
|
||||
const drawBar = (x0, dbVal) => {
|
||||
const yVal = mapY(dbVal);
|
||||
if (dbVal > RED_START) {
|
||||
if (redOnly) {
|
||||
const yNormTop = Math.min(yRed, yBottom);
|
||||
if (yBottom - yNormTop > 0) {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, yNormTop, innerW, yBottom - yNormTop);
|
||||
}
|
||||
const yWarnTop = Math.min(yVal, yRed);
|
||||
if (yRed - yWarnTop > 0) {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x0 + 1, yWarnTop, innerW, yRed - yWarnTop);
|
||||
}
|
||||
} else {
|
||||
if (yBottom - yVal > 0) {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x0 + 1, yVal, innerW, yBottom - yVal);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (yBottom - yVal > 0) {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, yVal, innerW, yBottom - yVal);
|
||||
}
|
||||
}
|
||||
g.globalAlpha = 0.12;
|
||||
g.fillStyle = '#ffffff';
|
||||
g.fillRect(x0 + 1, yVal, innerW, 2);
|
||||
g.globalAlpha = 1;
|
||||
};
|
||||
|
||||
drawBar(leftX, ppmL);
|
||||
drawBar(rightX, ppmR);
|
||||
|
||||
// Peak-Hold
|
||||
const holdMs = Number.isFinite(CONFIG.PPM_EBU_HOLD_MS)
|
||||
? Math.max(0, CONFIG.PPM_EBU_HOLD_MS)
|
||||
: (shared._holdCfg?.holdMs ?? DEFAULT_HOLD_MS);
|
||||
const holdDecay = Number.isFinite(CONFIG.PPM_EBU_HOLD_DECAY_DB_PER_S)
|
||||
? CONFIG.PPM_EBU_HOLD_DECAY_DB_PER_S
|
||||
: (shared._holdCfg?.decayDbPerS ?? shared._ballistics.decayDbPerS ?? DEFAULT_DECAY_DB_PER_S);
|
||||
|
||||
if (holdMs > 0) {
|
||||
if (!shared.hold) shared.hold = { L: PPM_BOTTOM, R: PPM_BOTTOM };
|
||||
const cfgChanged = !shared._holdState
|
||||
|| !shared._holdCfg
|
||||
|| shared._holdCfg.holdMs !== holdMs
|
||||
|| shared._holdCfg.decayDbPerS !== holdDecay;
|
||||
|
||||
if (cfgChanged) {
|
||||
const resetNow = performance.now();
|
||||
shared._holdState = {
|
||||
L: createPeakHoldState(shared.hold.L ?? PPM_BOTTOM, resetNow, holdMs),
|
||||
R: createPeakHoldState(shared.hold.R ?? PPM_BOTTOM, resetNow, holdMs),
|
||||
};
|
||||
shared._holdCfg = { holdMs, decayDbPerS: holdDecay };
|
||||
}
|
||||
|
||||
const nowHold = performance.now();
|
||||
const holdOpts = {
|
||||
holdMs,
|
||||
decayDbPerS: holdDecay,
|
||||
floor: PPM_BOTTOM,
|
||||
riseThreshold: 0.2,
|
||||
};
|
||||
shared.hold.L = stepPeakHold(ppmL, shared._holdState.L, nowHold, holdOpts);
|
||||
shared.hold.R = stepPeakHold(ppmR, shared._holdState.R, nowHold, holdOpts);
|
||||
|
||||
g.save();
|
||||
g.fillStyle = '#ffffff';
|
||||
g.fillRect(leftX + 1, mapY(shared.hold.L) - 1, innerW, 2);
|
||||
g.fillRect(rightX + 1, mapY(shared.hold.R) - 1, innerW, 2);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
drawPpmEbuStaticOverlay(g, shared, rect, CONFIG, {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
yRed,
|
||||
yTop,
|
||||
colWarn,
|
||||
}, mapY, PPM_TOP, PPM_BOTTOM);
|
||||
}
|
||||
|
||||
function drawPpmEbuStaticOverlay(g, shared, rect, CONFIG, geom, mapY, PPM_TOP, PPM_BOTTOM) {
|
||||
const {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
yRed,
|
||||
yTop,
|
||||
colWarn,
|
||||
} = geom;
|
||||
const topPad = 10;
|
||||
const layerX = rect.x;
|
||||
const layerY = rect.y - topPad;
|
||||
const layerW = rect.w;
|
||||
const layerH = rect.h + 24 + topPad;
|
||||
const key = [
|
||||
'scale-font-header-v1-top-pad',
|
||||
Math.round(rect.w),
|
||||
Math.round(rect.h),
|
||||
topPad,
|
||||
CONFIG.METER_BAR_THIN || 0.55,
|
||||
CONFIG.PPM_EBU_TOP ?? 14,
|
||||
CONFIG.PPM_EBU_BOTTOM ?? -14,
|
||||
CONFIG.PPM_EBU_RED_START ?? 9,
|
||||
CONFIG.AL_MARKERS_ENABLED === false ? 0 : 1,
|
||||
METER_HEADER_FONT,
|
||||
colWarn,
|
||||
].join('|');
|
||||
drawCachedStaticLayer(g, shared, 'ppm-ebu-static', key, layerX, layerY, layerW, layerH, (cg) => {
|
||||
cg.save();
|
||||
cg.translate(-layerX, -layerY);
|
||||
drawWarningEdges(cg, leftX, barW, rightX, centerX, yRed, yTop, colWarn);
|
||||
drawBarTicks(cg, leftX, rightX, innerW, mapY, PPM_TOP, PPM_BOTTOM, CONFIG);
|
||||
drawCenterScale(cg, { x: scaleX, y: rect.y, w: scaleW, h: rect.h }, centerX, mapY, +12, -12);
|
||||
cg.fillStyle = LABEL_COLOR;
|
||||
cg.textAlign = 'center';
|
||||
const baseY = rect.y + rect.h + 16;
|
||||
cg.fillText('L', leftX + barW / 2, baseY);
|
||||
cg.fillText('R', rightX + barW / 2, baseY);
|
||||
const prevFontLabels = cg.font;
|
||||
cg.fillStyle = '#ffffff';
|
||||
cg.font = 'bold 8.4px ui-monospace, monospace';
|
||||
cg.fillText('dB', centerX, baseY);
|
||||
cg.font = prevFontLabels;
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
function drawWarningEdges(g, leftX, barW, rightX, centerX, yWarn, yTop, color) {
|
||||
const innerRight = leftX + barW;
|
||||
const gapL = Math.abs(centerX - innerRight);
|
||||
const insetL = Math.max(1, Math.floor(gapL * 0.35));
|
||||
const xL = Math.round(innerRight + insetL) + 0.5;
|
||||
|
||||
const innerLeft = rightX;
|
||||
const gapR = Math.abs(centerX - innerLeft);
|
||||
const insetR = Math.max(1, Math.floor(gapR * 0.35));
|
||||
const xR = Math.round(innerLeft - insetR) + 0.5;
|
||||
|
||||
const y1 = Math.min(yWarn, yTop);
|
||||
const y2 = Math.max(yWarn, yTop);
|
||||
|
||||
g.save();
|
||||
g.strokeStyle = color;
|
||||
g.lineWidth = 1;
|
||||
g.beginPath(); g.moveTo(xL, y1); g.lineTo(xL, y2); g.stroke();
|
||||
g.beginPath(); g.moveTo(xR, y1); g.lineTo(xR, y2); g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawBarTicks(g, leftX, rightX, widthPx, mapY, top, bottom, CONFIG) {
|
||||
g.save();
|
||||
g.lineWidth = 1;
|
||||
|
||||
const DEFAULT_COLOR = 'rgb(0,0,255)';
|
||||
const AL_COLOR = WARN_COLOR;
|
||||
const showAL = CONFIG?.AL_MARKERS_ENABLED !== false;
|
||||
const highlightDb = showAL ? 0 : null;
|
||||
|
||||
const MAJOR_INSET = 2;
|
||||
const MINOR_FRAC = 0.45;
|
||||
|
||||
const cxL = leftX + 1 + widthPx / 2;
|
||||
const cxR = rightX + 1 + widthPx / 2;
|
||||
|
||||
const drawPair = (yPix, span, highlight = false) => {
|
||||
g.strokeStyle = highlight ? AL_COLOR : DEFAULT_COLOR;
|
||||
const width = Math.max(1, span);
|
||||
const x1L = Math.round(cxL - width / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + width / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
const x1R = Math.round(cxR - width / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + width / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
const majorWidth = Math.max(1, widthPx - 4 * MAJOR_INSET);
|
||||
const minorWidth = Math.max(1, Math.floor(widthPx * MINOR_FRAC));
|
||||
let highlightMatched = false;
|
||||
|
||||
for (const db of EBU_MAJOR_TICKS) {
|
||||
if (db < bottom || db > top) continue;
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
const isHighlight = highlightDb !== null && Math.abs(db - highlightDb) < 1e-3;
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawPair(y, majorWidth, isHighlight);
|
||||
}
|
||||
|
||||
for (const db of EBU_MINOR_TICKS) {
|
||||
if (db < bottom || db > top) continue;
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
const isHighlight = highlightDb !== null && Math.abs(db - highlightDb) < 1e-3;
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawPair(y, minorWidth, isHighlight);
|
||||
}
|
||||
|
||||
if (highlightDb !== null && !highlightMatched && highlightDb >= bottom && highlightDb <= top) {
|
||||
const y = Math.round(mapY(highlightDb)) + 0.5;
|
||||
drawPair(y, majorWidth, true);
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawCenterScale(g, rect, centerX, mapY, top, bottom) {
|
||||
drawHairlineGrid(g, rect, mapY, top, bottom, 1);
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
|
||||
for (const db of EBU_MAJOR_TICKS) {
|
||||
if (db < bottom || db > top) continue;
|
||||
const y = mapY(db);
|
||||
if (y < rect.y || y > rect.y + rect.h) continue;
|
||||
const label = db === 0 ? 'TEST' : (db > 0 ? `+${db}` : `${db}`);
|
||||
g.fillText(label, centerX, y + 5);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function smoothHeader(shared, rawL, rawR, alpha = 0.2) {
|
||||
if (!shared._header) {
|
||||
shared._header = { L: rawL, R: rawR };
|
||||
return shared._header;
|
||||
}
|
||||
shared._header.L += alpha * (rawL - shared._header.L);
|
||||
shared._header.R += alpha * (rawR - shared._header.R);
|
||||
return shared._header;
|
||||
}
|
||||
@@ -0,0 +1,503 @@
|
||||
// meters/rms.js — True RMS (dBu/dBFS) L/R mit dualem Modus, Kalibrierung & Warnschwelle
|
||||
// Erwartet update(packet) mit packet.rmsL / packet.rmsR (in dBFS).
|
||||
// Offset via CONFIG.RMS_OFFSET_DB (wirkt vor der dBu-Umrechnung).
|
||||
//
|
||||
// Defaults jetzt DIGITAL:
|
||||
// - CONFIG.RMS_MODE bleibt auf 'dbfs', damit das Meter direkt dBFS ausgibt.
|
||||
// - CONFIG.RMS_REF_DBFS_FOR_REF_DBU: Referenz in dBFS RMS (default: -18 für 0 dBu)
|
||||
// - CONFIG.RMS_REF_DBU: Referenz in dBu RMS (default: 0)
|
||||
// -> Umrechnung: dBu = (dBFS_RMS - REF_DBFS) + REF_DBU, falls jemals benötigt.
|
||||
// - Titel passt sich an: "RMS (dBu)" oder "RMS (dBFS RMS)" je nach Modus.
|
||||
// - Skalenobergrenze: dBu: +24 (typisch Pro-Audio Headroom) / dBFS: +5
|
||||
// - Standard-Warnschwelle: dBu: +20 / dBFS: 0 (überschreibbar via CONFIG.RMS_RED_START)
|
||||
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
import { METER_HEADER_FONT } from './scale_helpers.js';
|
||||
import { HEADER_BG, LABEL_COLOR, OK_COLOR, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
const RMS_FRAME_MS_NOMINAL = 16; // ~60 Hz UI-Refresh
|
||||
const RMS_FRAME_MS_MAX = 40; // Obergrenze für dt in der Glättung
|
||||
const RMS_FRAME_MS_SKIP = 250; // Heuristischer Schutz: riesige Gaps komplett skippen
|
||||
|
||||
export const id = 'rms';
|
||||
|
||||
export function initShared(CONFIG = {}) {
|
||||
const offset = CONFIG.RMS_OFFSET_DB || 0;
|
||||
const initVal = -60 + offset;
|
||||
return {
|
||||
values: { L: initVal, R: initVal }, // intern immer dBFS RMS aus der Messkette
|
||||
offset,
|
||||
lastValidL: initVal,
|
||||
lastValidR: initVal,
|
||||
_smooth: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
const offset = shared.offset || 0;
|
||||
const floor = -60 + offset;
|
||||
if (!Number.isFinite(shared.lastValidL)) shared.lastValidL = floor;
|
||||
if (!Number.isFinite(shared.lastValidR)) shared.lastValidR = floor;
|
||||
|
||||
if (Number.isFinite(packet?.rmsL)) {
|
||||
const vL = packet.rmsL + offset;
|
||||
shared.values.L = vL;
|
||||
shared.lastValidL = vL;
|
||||
} else {
|
||||
shared.values.L = shared.lastValidL;
|
||||
}
|
||||
|
||||
if (Number.isFinite(packet?.rmsR)) {
|
||||
const vR = packet.rmsR + offset;
|
||||
shared.values.R = vR;
|
||||
shared.lastValidR = vR;
|
||||
} else {
|
||||
shared.values.R = shared.lastValidR;
|
||||
}
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG = {}, shared) {
|
||||
const MODE = (CONFIG.RMS_MODE ?? 'dbfs').toLowerCase(); // Default jetzt 'dbfs'
|
||||
|
||||
// Referenz: -18 dBFS RMS ≙ +4 dBu (übliches Studio-Line-Up). Anpassbar.
|
||||
const REF_DBFS = Number.isFinite(CONFIG.RMS_REF_DBFS_FOR_REF_DBU) ? CONFIG.RMS_REF_DBFS_FOR_REF_DBU : -18;
|
||||
const REF_DBU = Number.isFinite(CONFIG.RMS_REF_DBU) ? CONFIG.RMS_REF_DBU : +4;
|
||||
|
||||
// Anzeige-Umschaltung & Skala
|
||||
const isDBU = (MODE === 'dbu');
|
||||
const LOG_MIN = -60;
|
||||
const LOG_TOP = isDBU ? +24 : 0;
|
||||
|
||||
const RED_START =
|
||||
Number.isFinite(CONFIG.RMS_RED_START)
|
||||
? CONFIG.RMS_RED_START
|
||||
: (isDBU ? +20 : 0);
|
||||
|
||||
// Umrechnung auf Anzeigeeinheit
|
||||
const toDisplay = (dbfsRms) => {
|
||||
if (!Number.isFinite(dbfsRms)) return -Infinity;
|
||||
return isDBU ? (dbfsRms - REF_DBFS + REF_DBU) : dbfsRms;
|
||||
};
|
||||
|
||||
// Skalen-Mapping: unterhalb −20 stärker komprimiert, darüber nahezu linear.
|
||||
function scaleNorm(db) {
|
||||
if (!Number.isFinite(db)) return 0;
|
||||
if (db <= LOG_MIN) return 0;
|
||||
|
||||
if (isDBU) {
|
||||
// dBu: −60…−20 (45%), −20…0 (+25%), 0…+20 (+25%), +20…+24 (+5%)
|
||||
if (db <= -20) { const t = (db + 60) / 40; return Math.pow(t, 1.6) * 0.45; } // → 0…0.45
|
||||
if (db <= 0) { const t = (db + 20) / 20; return 0.45 + t * 0.25; } // → 0.70
|
||||
if (db <= +20) { const t = (db ) / 20; return 0.70 + t * 0.25; } // → 0.95
|
||||
if (db <= +24) { const t = (db - 20) / 4; return 0.95 + t * 0.05; } // → 1.00
|
||||
return 1;
|
||||
} else {
|
||||
// dBFS: linear 0 … −60
|
||||
if (db >= LOG_TOP) return 1;
|
||||
return (db - LOG_MIN) / (LOG_TOP - LOG_MIN);
|
||||
}
|
||||
}
|
||||
const mapY = (db) => rect.y + (1 - Math.max(0, Math.min(1, scaleNorm(db)))) * rect.h;
|
||||
|
||||
// Layout
|
||||
const innerPad = 8, scaleW = 26, gap = 8;
|
||||
const avail = rect.w - innerPad * 2 - scaleW - gap * 2;
|
||||
let barW = Math.max(8, Math.floor(avail / 2));
|
||||
barW = Math.floor(barW * (CONFIG.METER_BAR_THIN || 0.55));
|
||||
|
||||
const used = 2 * barW + scaleW + 2 * gap;
|
||||
const extra = Math.max(0, (rect.w - innerPad * 2) - used);
|
||||
const leftX = rect.x + innerPad + extra / 2;
|
||||
const scaleX = leftX + barW + gap;
|
||||
const rightX = scaleX + scaleW + gap;
|
||||
const centerX = scaleX + scaleW / 2;
|
||||
const centerLeft = leftX + barW / 2;
|
||||
const centerRight = rightX + barW / 2;
|
||||
|
||||
// Header-Hintergrund säubern
|
||||
g.save();
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 24);
|
||||
g.restore();
|
||||
|
||||
// IEC-ähnliche Zeitkonstanten (Impulse/Fast/Slow) für die Anzeige
|
||||
const tauMs = resolveRmsTau(CONFIG);
|
||||
if (tauMs > 0) {
|
||||
const now = performance.now();
|
||||
if (!shared._smooth) {
|
||||
shared._smooth = {
|
||||
L: shared.values.L,
|
||||
R: shared.values.R,
|
||||
lastTs: now - RMS_FRAME_MS_NOMINAL,
|
||||
};
|
||||
}
|
||||
const lastTs = shared._smooth.lastTs ?? (now - RMS_FRAME_MS_NOMINAL);
|
||||
const dtRawMs = Math.max(0, now - lastTs);
|
||||
shared._smooth.lastTs = now;
|
||||
|
||||
if (dtRawMs <= RMS_FRAME_MS_SKIP) {
|
||||
const dtUsedMs = Math.min(dtRawMs, RMS_FRAME_MS_MAX); // clamp dt to ignore occasional large gaps
|
||||
const alpha = 1 - Math.exp(-dtUsedMs / tauMs);
|
||||
shared._smooth.L += alpha * (shared.values.L - shared._smooth.L);
|
||||
shared._smooth.R += alpha * (shared.values.R - shared._smooth.R);
|
||||
}
|
||||
} else {
|
||||
shared._smooth = null;
|
||||
}
|
||||
|
||||
// Werte in Anzeigeeinheit clampen
|
||||
const rawDispL = toDisplay(shared._smooth?.L ?? shared.values.L);
|
||||
const rawDispR = toDisplay(shared._smooth?.R ?? shared.values.R);
|
||||
const smooth = smoothHeader(shared, rawDispL, rawDispR);
|
||||
const vL = clamp(rawDispL, LOG_MIN, LOG_TOP);
|
||||
const vR = clamp(rawDispR, LOG_MIN, LOG_TOP);
|
||||
g.save();
|
||||
const headerWarn = CONFIG.RMS_HEADER_SHOW_VALUE && (rawDispL > RED_START || rawDispR > RED_START);
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
g.fillStyle = headerWarn ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.textAlign = 'center';
|
||||
if (CONFIG.RMS_HEADER_SHOW_VALUE) {
|
||||
const yText = rect.y - 12;
|
||||
const fmt = (v) => {
|
||||
const sign = v >= 0 ? '+' : '-';
|
||||
return `${sign}${Math.abs(v).toFixed(1)}`;
|
||||
};
|
||||
g.textAlign = 'center';
|
||||
const isRedL = rawDispL > RED_START;
|
||||
const isRedR = rawDispR > RED_START;
|
||||
g.fillStyle = isRedL ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.L), centerLeft, yText);
|
||||
g.fillStyle = CONFIG.HEADER_TEXT_COLOR || MID_COLOR;
|
||||
g.fillText('|', centerX, yText);
|
||||
g.fillStyle = isRedR ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.R), centerRight, yText);
|
||||
} else {
|
||||
const title = isDBU ? 'RMS (dBu)' : 'RMS (dBFS RMS)';
|
||||
g.fillText(title, centerX, rect.y - 12);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
|
||||
const yFloor = mapY(LOG_MIN);
|
||||
const redStart = clamp(RED_START, LOG_MIN, LOG_TOP);
|
||||
const yRed = mapY(redStart);
|
||||
const innerW = Math.max(2, barW - 2);
|
||||
|
||||
const colNorm = CONFIG.RMS_COLOR_NORMAL || OK_COLOR;
|
||||
const colWarn = CONFIG.RMS_COLOR_WARN || WARN_COLOR;
|
||||
|
||||
const drawBar = (x0, valDisp) => {
|
||||
const yVal = mapY(valDisp);
|
||||
|
||||
if (valDisp > RED_START) {
|
||||
if (CONFIG.RMS_RED_BAR_ONLY) {
|
||||
// normaler Teil (bis Warnschwelle)
|
||||
const yNormTop = Math.min(yRed, yFloor);
|
||||
g.fillStyle = colNorm; g.fillRect(x0 + 1, yNormTop, innerW, Math.max(0, yFloor - yNormTop));
|
||||
// warnender Teil
|
||||
const yWarnTop = Math.min(yVal, yRed);
|
||||
g.fillStyle = colWarn; g.fillRect(x0 + 1, yWarnTop, innerW, Math.max(0, yRed - yWarnTop));
|
||||
} else {
|
||||
g.fillStyle = colWarn; g.fillRect(x0 + 1, yVal, innerW, Math.max(0, yFloor - yVal));
|
||||
}
|
||||
} else {
|
||||
g.fillStyle = colNorm; g.fillRect(x0 + 1, yVal, innerW, Math.max(0, yFloor - yVal));
|
||||
}
|
||||
// Glanzkante
|
||||
g.globalAlpha = .12; g.fillStyle = '#fff'; g.fillRect(x0 + 1, yVal, innerW, 2); g.globalAlpha = 1;
|
||||
};
|
||||
|
||||
drawBar(leftX, vL);
|
||||
drawBar(rightX, vR);
|
||||
|
||||
const majors = isDBU ? [24, 20, 10, 0, -10, -20, -30, -40, -50, -60]
|
||||
: [0, -6, -12, -18, -24, -30, -40, -60];
|
||||
const minorValues = isDBU ? null : buildDbfsMinorTicks();
|
||||
const alignmentHighlight = (!isDBU) ? getRmsAlignmentHighlight(CONFIG) : null;
|
||||
drawRmsStaticOverlay(g, shared, rect, CONFIG, {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
yRed,
|
||||
mapY,
|
||||
LOG_TOP,
|
||||
LOG_MIN,
|
||||
isDBU,
|
||||
majors,
|
||||
minorValues,
|
||||
alignmentHighlight,
|
||||
});
|
||||
}
|
||||
|
||||
function drawRmsStaticOverlay(g, shared, rect, CONFIG, geom) {
|
||||
const {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
yRed,
|
||||
mapY,
|
||||
LOG_TOP,
|
||||
LOG_MIN,
|
||||
isDBU,
|
||||
majors,
|
||||
minorValues,
|
||||
alignmentHighlight,
|
||||
} = geom;
|
||||
const topPad = 10;
|
||||
const layerX = rect.x;
|
||||
const layerY = rect.y - topPad;
|
||||
const layerW = rect.w;
|
||||
const layerH = rect.h + 24 + topPad;
|
||||
const key = [
|
||||
'scale-font-header-v1-top-pad',
|
||||
Math.round(rect.w),
|
||||
Math.round(rect.h),
|
||||
topPad,
|
||||
CONFIG.METER_BAR_THIN || 0.55,
|
||||
CONFIG.RMS_MODE || 'dbfs',
|
||||
CONFIG.AL_MARKERS_ENABLED === false ? 0 : 1,
|
||||
CONFIG.RMS_RED_START ?? '',
|
||||
METER_HEADER_FONT,
|
||||
].join('|');
|
||||
drawCachedStaticLayer(g, shared, 'rms-static', key, layerX, layerY, layerW, layerH, (cg) => {
|
||||
cg.save();
|
||||
cg.translate(-layerX, -layerY);
|
||||
drawOverlayTicksLR(cg, leftX, rightX, innerW, mapY, LOG_TOP, LOG_MIN, majors, minorValues, alignmentHighlight);
|
||||
const yTop = mapY(LOG_TOP);
|
||||
drawRedStripeLR(cg, leftX, barW, rightX, centerX, mapY, yRed, yTop);
|
||||
const scaleRect = { x: scaleX, y: rect.y, w: scaleW, h: rect.h };
|
||||
drawScale(cg, scaleRect, centerX, mapY, {
|
||||
isDBU,
|
||||
majors,
|
||||
minors: minorValues,
|
||||
hairStep: isDBU ? null : 1,
|
||||
topValue: LOG_TOP,
|
||||
bottomValue: LOG_MIN,
|
||||
highlightTick: null,
|
||||
});
|
||||
const unitLabel = 'dBFS (RMS)';
|
||||
cg.fillStyle = LABEL_COLOR;
|
||||
cg.textAlign = 'center';
|
||||
const baseY = rect.y + rect.h + 16;
|
||||
cg.fillText('L', leftX + barW / 2, baseY);
|
||||
cg.fillText('R', rightX + barW / 2, baseY);
|
||||
const prevFontLabels = cg.font;
|
||||
cg.fillStyle = '#ffffff';
|
||||
cg.font = 'bold 8.4px ui-monospace, monospace';
|
||||
cg.fillText(unitLabel, centerX, baseY);
|
||||
cg.font = prevFontLabels;
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Helpers =====
|
||||
|
||||
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
|
||||
|
||||
function resolveRmsTau(CONFIG = {}) {
|
||||
const mode = String(CONFIG.RMS_TC_MODE || 'fast').toLowerCase();
|
||||
const custom = Number(CONFIG.RMS_TC_MS);
|
||||
if (Number.isFinite(custom) && custom > 0) return custom;
|
||||
switch (mode) {
|
||||
case 'impulse': return 35;
|
||||
case 'slow': return 1000;
|
||||
case 'none': return 0;
|
||||
case 'fast':
|
||||
default: return 125;
|
||||
}
|
||||
}
|
||||
|
||||
function drawRedStripeLR(g, leftX, barW, rightX, centerX, mapY, yWarn, yTop) {
|
||||
const innerRight = leftX + barW;
|
||||
const gapL = Math.abs(centerX - innerRight);
|
||||
const insetL = Math.max(1, Math.floor(gapL * 0.35));
|
||||
const xL = Math.round(innerRight + insetL) + 0.5;
|
||||
|
||||
const innerLeft = rightX;
|
||||
const gapR = Math.abs(centerX - innerLeft);
|
||||
const insetR = Math.max(1, Math.floor(gapR * 0.35));
|
||||
const xR = Math.round(innerLeft - insetR) + 0.5;
|
||||
|
||||
const y1 = Math.min(yWarn, yTop), y2 = Math.max(yWarn, yTop);
|
||||
g.save(); g.strokeStyle = WARN_COLOR; g.lineWidth = 1;
|
||||
g.beginPath(); g.moveTo(xL, y1); g.lineTo(xL, y2); g.stroke();
|
||||
g.beginPath(); g.moveTo(xR, y1); g.lineTo(xR, y2); g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawOverlayTicksLR(g, leftX, rightX, widthPx, mapY, TOP, BOTTOM, majors, minorValues = null, highlightTick = null) {
|
||||
g.save();
|
||||
|
||||
const MAJOR_INSET = 2;
|
||||
const MINOR_FRAC = 0.45;
|
||||
|
||||
const cxL = leftX + 1 + widthPx / 2;
|
||||
const cxR = rightX + 1 + widthPx / 2;
|
||||
|
||||
const approx = (a, b) => Math.abs(a - b) < 0.01;
|
||||
|
||||
const drawMajor = (value) => {
|
||||
const majorW = Math.max(1, widthPx - 4 * MAJOR_INSET);
|
||||
const yPix = Math.round(mapY(value)) + 0.5;
|
||||
const isHighlight = highlightTick && approx(value, highlightTick.value);
|
||||
const color = isHighlight ? highlightTick.color : 'rgb(0,0,255)';
|
||||
const lineWidth = isHighlight ? 1.8 : 1;
|
||||
|
||||
const x1L = Math.round(cxL - majorW / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + majorW / 2) + 0.5;
|
||||
g.strokeStyle = color; g.lineWidth = lineWidth;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
|
||||
const x1R = Math.round(cxR - majorW / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + majorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
const drawMinor = (value) => {
|
||||
const minorW = Math.max(1, Math.floor(widthPx * MINOR_FRAC));
|
||||
const yPix = Math.round(mapY(value)) + 0.5;
|
||||
const isHighlight = highlightTick && approx(value, highlightTick.value);
|
||||
const color = isHighlight ? highlightTick.color : 'rgba(0,0,255,0.55)';
|
||||
const lineWidth = isHighlight ? 1.4 : 1;
|
||||
|
||||
const x1L = Math.round(cxL - minorW / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + minorW / 2) + 0.5;
|
||||
g.strokeStyle = color; g.lineWidth = lineWidth;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
|
||||
const x1R = Math.round(cxR - minorW / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + minorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
const top = TOP, bot = BOTTOM;
|
||||
const hi = Math.max(top, bot), lo = Math.min(top, bot);
|
||||
const inRange = (v) => v <= hi && v >= lo;
|
||||
|
||||
if (Array.isArray(majors) && majors.length > 0) {
|
||||
const sorted = majors.slice().sort((a, b) => b - a); // desc
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
const vMaj = sorted[i];
|
||||
if (inRange(vMaj)) {
|
||||
drawMajor(vMaj);
|
||||
}
|
||||
if (minorValues == null && i < sorted.length - 1) {
|
||||
const vNext = sorted[i + 1];
|
||||
const mid = (vMaj + vNext) / 2;
|
||||
if (inRange(mid)) {
|
||||
drawMinor(mid);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(minorValues) && minorValues.length > 0) {
|
||||
const sortedMin = minorValues.slice().sort((a, b) => b - a);
|
||||
for (const v of sortedMin) {
|
||||
if (!inRange(v)) continue;
|
||||
drawMinor(v);
|
||||
}
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
// Mittenskala & Raster
|
||||
function drawScale(g, colRect, centerX, mapY, {
|
||||
isDBU,
|
||||
majors = [],
|
||||
minors = [],
|
||||
hairStep = null,
|
||||
topValue = 0,
|
||||
bottomValue = -60,
|
||||
highlightTick = null,
|
||||
}) {
|
||||
if (isDBU) {
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
|
||||
const labels = [24, 20, 10, 4, 0, -10, -20, -30, -40, -50, -60];
|
||||
for (const v of labels) {
|
||||
const y = mapY(v);
|
||||
if (y < colRect.y || y > colRect.y + colRect.h) continue;
|
||||
const lab = v > 0 ? ('+' + v) : (v === 0 ? '0' : String(v));
|
||||
g.fillText(lab, centerX, y + 5);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
return;
|
||||
}
|
||||
|
||||
const hi = Math.max(topValue, bottomValue);
|
||||
const lo = Math.min(topValue, bottomValue);
|
||||
const inRange = (v) => v <= hi && v >= lo;
|
||||
const approx = (a, b) => Math.abs(a - b) < 0.01;
|
||||
const isHighlightValue = (value) => !!highlightTick && approx(value, highlightTick.value);
|
||||
|
||||
if (hairStep && hairStep > 0) {
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(colRect.x, colRect.y, colRect.w, colRect.h);
|
||||
g.clip();
|
||||
for (let v = topValue; v >= bottomValue; v -= hairStep) {
|
||||
if (!inRange(v)) continue;
|
||||
const y = Math.round(mapY(v)) + 0.5;
|
||||
g.strokeStyle = isHighlightValue(v) ? (highlightTick?.color || '#ffffff') : 'rgba(255,255,255,0.08)';
|
||||
g.lineWidth = isHighlightValue(v) ? 1.2 : 0.6;
|
||||
g.beginPath();
|
||||
g.moveTo(colRect.x, y);
|
||||
g.lineTo(colRect.x + colRect.w, y);
|
||||
g.stroke();
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
for (const v of majors || []) {
|
||||
if (!inRange(v)) continue;
|
||||
const y = mapY(v);
|
||||
g.fillStyle = isHighlightValue(v) ? (highlightTick?.color || LABEL_COLOR) : LABEL_COLOR;
|
||||
g.fillText(String(v), centerX, y + 5);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function buildDbfsMinorTicks() {
|
||||
return [-3, -9, -15, -21, -27, -33, -36, -42, -48, -54];
|
||||
}
|
||||
|
||||
function getRmsAlignmentHighlight(CONFIG) {
|
||||
if (!CONFIG || CONFIG.AL_MARKERS_ENABLED === false) return null;
|
||||
const isArd = CONFIG.PPM_DIN_MODE === 'al_minus9';
|
||||
return {
|
||||
value: isArd ? -15 : -18,
|
||||
color: WARN_COLOR,
|
||||
};
|
||||
}
|
||||
|
||||
function smoothHeader(shared, rawL, rawR, alpha = 0.2) {
|
||||
if (!shared._header) {
|
||||
shared._header = { L: rawL, R: rawR };
|
||||
return shared._header;
|
||||
}
|
||||
shared._header.L += alpha * (rawL - shared._header.L);
|
||||
shared._header.R += alpha * (rawR - shared._header.R);
|
||||
return shared._header;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// meters/scale_helpers.js — shared helpers for drawing center-scale grid lines
|
||||
|
||||
export const METER_HEADER_FONT = 'bold 12px ui-monospace, monospace';
|
||||
|
||||
/**
|
||||
* Draws a hairline-style grid (like the RMS meter) across a center column.
|
||||
* The caller provides the existing mapY function so non-linear scales are supported.
|
||||
*/
|
||||
export function drawHairlineGrid(
|
||||
g,
|
||||
rect,
|
||||
mapY,
|
||||
topValue,
|
||||
bottomValue,
|
||||
step = 1,
|
||||
color = 'rgba(255,255,255,0.08)',
|
||||
lineWidth = 0.6
|
||||
) {
|
||||
if (!g || !rect || typeof mapY !== 'function') return;
|
||||
if (!Number.isFinite(step) || step <= 0) return;
|
||||
|
||||
const hi = Math.max(topValue, bottomValue);
|
||||
const lo = Math.min(topValue, bottomValue);
|
||||
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(rect.x, rect.y, rect.w, rect.h);
|
||||
g.clip();
|
||||
|
||||
for (let v = hi; v >= lo - 1e-6; v -= step) {
|
||||
const y = Math.round(mapY(v)) + 0.5;
|
||||
if (!Number.isFinite(y)) continue;
|
||||
if (y < rect.y - 2 || y > rect.y + rect.h + 2) continue;
|
||||
|
||||
g.strokeStyle = color;
|
||||
g.lineWidth = lineWidth;
|
||||
g.beginPath();
|
||||
g.moveTo(rect.x, y);
|
||||
g.lineTo(rect.x + rect.w, y);
|
||||
g.stroke();
|
||||
}
|
||||
|
||||
g.restore();
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
const CAN_USE_OFFSCREEN = typeof OffscreenCanvas === 'function';
|
||||
|
||||
function createSurface(width, height) {
|
||||
const w = Math.max(1, Math.ceil(width));
|
||||
const h = Math.max(1, Math.ceil(height));
|
||||
if (CAN_USE_OFFSCREEN) {
|
||||
const canvas = new OffscreenCanvas(w, h);
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) return { canvas, ctx, width: w, height: h };
|
||||
}
|
||||
if (typeof document !== 'undefined') {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) return { canvas, ctx, width: w, height: h };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function drawCachedStaticLayer(targetCtx, shared, layerId, key, x, y, width, height, build) {
|
||||
if (!targetCtx || !shared || typeof build !== 'function') return false;
|
||||
if (!shared._staticLayers) shared._staticLayers = new Map();
|
||||
let layer = shared._staticLayers.get(layerId);
|
||||
const w = Math.max(1, Math.ceil(width));
|
||||
const h = Math.max(1, Math.ceil(height));
|
||||
const needsRebuild = !layer
|
||||
|| layer.key !== key
|
||||
|| layer.width !== w
|
||||
|| layer.height !== h;
|
||||
|
||||
if (needsRebuild) {
|
||||
layer = createSurface(w, h);
|
||||
if (!layer) return false;
|
||||
layer.key = key;
|
||||
layer.ctx.save();
|
||||
try {
|
||||
layer.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
layer.ctx.clearRect(0, 0, w, h);
|
||||
build(layer.ctx);
|
||||
} finally {
|
||||
layer.ctx.restore();
|
||||
}
|
||||
shared._staticLayers.set(layerId, layer);
|
||||
}
|
||||
|
||||
targetCtx.drawImage(layer.canvas, x, y);
|
||||
return true;
|
||||
}
|
||||
@@ -0,0 +1,693 @@
|
||||
// meters/stopwatch.js — Stoppuhr als Slot-Meter (Start/Stop, Reset, Auto)
|
||||
// Auto: startet bei Signal > -70 dBFS und stoppt, wenn >=1s lang <= -70 dBFS.
|
||||
|
||||
import { CONFIG } from '../core/config.js';
|
||||
import { HEADER_BG, MID_COLOR } from '../core/theme.js';
|
||||
|
||||
export const id = 'stopwatch';
|
||||
export const disableCache = true;
|
||||
|
||||
const AUTO_STOP_AFTER_MS = 1000;
|
||||
|
||||
function isExternalClient() {
|
||||
const host = String(globalThis?.location?.hostname || '').trim().toLowerCase();
|
||||
return !!host && host !== 'localhost' && host !== '127.0.0.1' && host !== '::1' && host !== '[::1]';
|
||||
}
|
||||
|
||||
function getSilenceDb() {
|
||||
const raw = Number(CONFIG?.STOPWATCH_AUTO_THRESHOLD_DBFS);
|
||||
return Math.max(-120, Math.min(20, Number.isFinite(raw) ? raw : -70));
|
||||
}
|
||||
|
||||
export function initShared() {
|
||||
const now = performance.now();
|
||||
return {
|
||||
auto: false,
|
||||
entries: [], // { elapsedMs, startTs, running }
|
||||
scrollOffset: 0, // 0 = neueste; größer = weiter zurück
|
||||
_dragScroll: null, // { startY, startOffset }
|
||||
_lastNow: now,
|
||||
_silenceStartTs: null,
|
||||
_lastLevelDb: -120,
|
||||
_buttonRects: null,
|
||||
_deleteVisible: false,
|
||||
_deleteRects: [],
|
||||
_scrollInfo: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
const now = performance.now();
|
||||
shared._lastNow = now;
|
||||
|
||||
const rmsL = Number.isFinite(packet?.rmsL) ? packet.rmsL : -Infinity;
|
||||
const rmsR = Number.isFinite(packet?.rmsR) ? packet.rmsR : -Infinity;
|
||||
const levelDb = Number.isFinite(rmsL) || Number.isFinite(rmsR) ? Math.max(rmsL, rmsR) : -Infinity;
|
||||
shared._lastLevelDb = Number.isFinite(levelDb) ? levelDb : -120;
|
||||
|
||||
if (!shared.auto) return;
|
||||
|
||||
const silenceDb = getSilenceDb();
|
||||
const hasSignal = Number.isFinite(levelDb) && levelDb > silenceDb;
|
||||
if (hasSignal) {
|
||||
shared._silenceStartTs = null;
|
||||
if (!isRunning(shared)) startNew(shared, now);
|
||||
return;
|
||||
}
|
||||
|
||||
if (shared._silenceStartTs === null) shared._silenceStartTs = now;
|
||||
if (isRunning(shared) && (now - shared._silenceStartTs) >= AUTO_STOP_AFTER_MS) {
|
||||
stop(shared, now);
|
||||
}
|
||||
}
|
||||
|
||||
function stop(shared, now) {
|
||||
const entry = getActiveEntry(shared);
|
||||
if (!entry || !entry.running) return;
|
||||
const startTs = Number.isFinite(entry.startTs) ? entry.startTs : now;
|
||||
entry.elapsedMs = (entry.elapsedMs || 0) + Math.max(0, now - startTs);
|
||||
entry.running = false;
|
||||
entry.startTs = 0;
|
||||
}
|
||||
|
||||
function startNew(shared, now) {
|
||||
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
||||
shared.entries = entries;
|
||||
if (isRunning(shared)) return;
|
||||
// Neueste Einträge immer sichtbar halten: Liste "scrollt" automatisch nach oben.
|
||||
shared.scrollOffset = 0;
|
||||
entries.push({ elapsedMs: 0, startTs: now, running: true });
|
||||
if (entries.length > 50) entries.shift();
|
||||
shared._silenceStartTs = null;
|
||||
}
|
||||
|
||||
function reset(shared, now) {
|
||||
shared.entries = [];
|
||||
shared.scrollOffset = 0;
|
||||
shared._dragScroll = null;
|
||||
shared._deleteRects = [];
|
||||
shared._silenceStartTs = null;
|
||||
}
|
||||
|
||||
function formatTime(ms) {
|
||||
const clamped = Math.max(0, ms | 0);
|
||||
const totalSeconds = Math.floor(clamped / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
const tenths = Math.floor((clamped % 1000) / 100);
|
||||
|
||||
const pad2 = (n) => String(n).padStart(2, '0');
|
||||
if (hours > 0) return `${hours}:${pad2(minutes)}:${pad2(seconds)}`;
|
||||
return `${pad2(minutes)}:${pad2(seconds)}.${tenths}`;
|
||||
}
|
||||
|
||||
// Orientiert am Layout-Ansatz der anderen Meter (z.B. PPM DIN):
|
||||
// innerhalb eines festen innerPad wird "extra/2" genutzt, sodass bei ungerader Restbreite
|
||||
// eine stabile .5-Zentrierung entsteht (wirkt über Browser/Displays konsistenter).
|
||||
function computeContentRect(rect, padX = 8) {
|
||||
const innerPad = padX;
|
||||
const avail = Math.max(1, rect.w - innerPad * 2);
|
||||
const w = (avail > 2) ? (avail - 1) : avail; // erzwingt i.d.R. extra=1 → +0.5 Zentrierung
|
||||
const extra = Math.max(0, avail - w);
|
||||
const x = rect.x + innerPad + extra / 2;
|
||||
return { x, w, cx: x + w / 2 };
|
||||
}
|
||||
|
||||
function fitFontSizeToWidth(g, texts, maxWidth, {
|
||||
min = 10,
|
||||
max = 96,
|
||||
family = 'ui-monospace, monospace',
|
||||
weight = 'bold',
|
||||
} = {}) {
|
||||
const safeTexts = (Array.isArray(texts) ? texts : []).filter((t) => typeof t === 'string' && t.length);
|
||||
const samples = safeTexts.length ? safeTexts : ['00:00.0'];
|
||||
const width = Math.max(1, maxWidth);
|
||||
|
||||
let lo = Math.max(1, min | 0);
|
||||
let hi = Math.max(lo, max | 0);
|
||||
let best = lo;
|
||||
|
||||
while (lo <= hi) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
g.font = `${weight} ${mid}px ${family}`;
|
||||
let widest = 0;
|
||||
for (const t of samples) widest = Math.max(widest, g.measureText(t).width);
|
||||
if (widest <= width) {
|
||||
best = mid;
|
||||
lo = mid + 1;
|
||||
} else {
|
||||
hi = mid - 1;
|
||||
}
|
||||
}
|
||||
return best;
|
||||
}
|
||||
|
||||
function sevenSegCharRatio(ch) {
|
||||
if (ch >= '0' && ch <= '9') return 0.64;
|
||||
if (ch === ':') return 0.26;
|
||||
if (ch === '.') return 0.24;
|
||||
if (ch === '-') return 0.45;
|
||||
return 0.5;
|
||||
}
|
||||
|
||||
function sevenSegTotalRatio(text, gapRatio = 0.14) {
|
||||
const s = String(text ?? '');
|
||||
if (!s.length) return 1;
|
||||
let sum = 0;
|
||||
for (let i = 0; i < s.length; i++) sum += sevenSegCharRatio(s[i]);
|
||||
sum += gapRatio * (s.length - 1);
|
||||
return Math.max(1e-6, sum);
|
||||
}
|
||||
|
||||
function drawSevenSegString(g, text, xCenter, yTop, maxWidth, height, color, {
|
||||
gapRatio = 0.14,
|
||||
dimAlpha = 0.25,
|
||||
} = {}) {
|
||||
const s = String(text ?? '');
|
||||
const h = Math.max(6, height);
|
||||
const ratio = sevenSegTotalRatio(s, gapRatio);
|
||||
const wTotal = Math.min(maxWidth, ratio * h);
|
||||
const scale = wTotal / (ratio * h);
|
||||
const hUsed = h * scale;
|
||||
const gap = gapRatio * hUsed;
|
||||
const x0 = xCenter - wTotal / 2;
|
||||
|
||||
let x = x0;
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
const ch = s[i];
|
||||
const cw = sevenSegCharRatio(ch) * hUsed;
|
||||
if (ch >= '0' && ch <= '9') {
|
||||
drawSevenSegDigit(g, ch, x, yTop, cw, hUsed, color);
|
||||
} else if (ch === ':') {
|
||||
drawSevenSegColon(g, x, yTop, cw, hUsed, color);
|
||||
} else if (ch === '.') {
|
||||
drawSevenSegDot(g, x, yTop, cw, hUsed, color);
|
||||
} else if (ch === '-') {
|
||||
drawSevenSegMinus(g, x, yTop, cw, hUsed, color);
|
||||
} else {
|
||||
g.save();
|
||||
g.globalAlpha = dimAlpha;
|
||||
drawSevenSegMinus(g, x, yTop, cw, hUsed, color);
|
||||
g.restore();
|
||||
}
|
||||
x += cw + gap;
|
||||
}
|
||||
return { width: wTotal, height: hUsed };
|
||||
}
|
||||
|
||||
function drawSevenSegDigit(g, ch, x, y, w, h, color) {
|
||||
const digit = Number(ch);
|
||||
const on = SEGMENTS_BY_DIGIT[digit] || SEGMENTS_BY_DIGIT[0];
|
||||
const t = Math.max(2, Math.round(h * 0.14));
|
||||
const r = Math.max(1, Math.round(t * 0.35));
|
||||
const pad = Math.max(1, Math.round(t * 0.45));
|
||||
|
||||
const halfH = h / 2;
|
||||
const vSegH = Math.max(2, Math.floor(halfH - pad - t / 2));
|
||||
|
||||
const seg = {
|
||||
A: { x: x + pad, y: y, w: Math.max(2, w - 2 * pad), h: t },
|
||||
D: { x: x + pad, y: y + h - t, w: Math.max(2, w - 2 * pad), h: t },
|
||||
G: { x: x + pad, y: y + halfH - t / 2, w: Math.max(2, w - 2 * pad), h: t },
|
||||
F: { x: x, y: y + pad, w: t, h: vSegH },
|
||||
B: { x: x + w - t, y: y + pad, w: t, h: vSegH },
|
||||
E: { x: x, y: y + halfH + t / 2, w: t, h: vSegH },
|
||||
C: { x: x + w - t, y: y + halfH + t / 2, w: t, h: vSegH },
|
||||
};
|
||||
|
||||
g.save();
|
||||
g.fillStyle = color;
|
||||
for (const key of Object.keys(seg)) {
|
||||
const s = seg[key];
|
||||
const alpha = on.has(key) ? 1 : 0.12;
|
||||
g.globalAlpha = alpha;
|
||||
g.beginPath();
|
||||
roundedRect(g, s.x, s.y, s.w, s.h, r);
|
||||
g.fill();
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawSevenSegColon(g, x, y, w, h, color) {
|
||||
const r = Math.max(2, Math.round(h * 0.06));
|
||||
const cx = x + w / 2;
|
||||
const y1 = y + h * 0.33;
|
||||
const y2 = y + h * 0.67;
|
||||
g.save();
|
||||
g.fillStyle = color;
|
||||
g.globalAlpha = 0.95;
|
||||
g.beginPath(); g.arc(cx, y1, r, 0, Math.PI * 2); g.fill();
|
||||
g.beginPath(); g.arc(cx, y2, r, 0, Math.PI * 2); g.fill();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawSevenSegDot(g, x, y, w, h, color) {
|
||||
const r = Math.max(2, Math.round(h * 0.06));
|
||||
const cx = x + w / 2;
|
||||
const cy = y + h * 0.82;
|
||||
g.save();
|
||||
g.fillStyle = color;
|
||||
g.globalAlpha = 0.95;
|
||||
g.beginPath(); g.arc(cx, cy, r, 0, Math.PI * 2); g.fill();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawSevenSegMinus(g, x, y, w, h, color) {
|
||||
const t = Math.max(2, Math.round(h * 0.14));
|
||||
const r = Math.max(1, Math.round(t * 0.35));
|
||||
const pad = Math.max(1, Math.round(t * 0.45));
|
||||
const seg = { x: x + pad, y: y + h / 2 - t / 2, w: Math.max(2, w - 2 * pad), h: t };
|
||||
g.save();
|
||||
g.fillStyle = color;
|
||||
g.globalAlpha = 0.95;
|
||||
g.beginPath();
|
||||
roundedRect(g, seg.x, seg.y, seg.w, seg.h, r);
|
||||
g.fill();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
const SEGMENTS_BY_DIGIT = [
|
||||
new Set(['A','B','C','D','E','F']),
|
||||
new Set(['B','C']),
|
||||
new Set(['A','B','G','E','D']),
|
||||
new Set(['A','B','G','C','D']),
|
||||
new Set(['F','G','B','C']),
|
||||
new Set(['A','F','G','C','D']),
|
||||
new Set(['A','F','G','E','C','D']),
|
||||
new Set(['A','B','C']),
|
||||
new Set(['A','B','C','D','E','F','G']),
|
||||
new Set(['A','B','C','D','F','G']),
|
||||
];
|
||||
|
||||
function computeButtons(rect) {
|
||||
const padX = 8;
|
||||
const padY = 0;
|
||||
const external = isExternalClient();
|
||||
let gap = external ? 6 : 8;
|
||||
let btnH = external ? 32 : 39;
|
||||
const content = computeContentRect(rect, padX);
|
||||
const btnW = Math.max(60, content.w);
|
||||
const availableH = Math.max(84, rect.h - 18);
|
||||
const wantedH = btnH * 3 + gap * 2;
|
||||
if (wantedH > availableH) {
|
||||
const scale = availableH / wantedH;
|
||||
btnH = Math.max(external ? 18 : 24, Math.floor(btnH * scale));
|
||||
gap = Math.max(external ? 2 : 3, Math.floor(gap * scale));
|
||||
}
|
||||
const x = content.x;
|
||||
const totalH = btnH * 3 + gap * 2;
|
||||
const yBottom = rect.y + rect.h - padY;
|
||||
const y0 = yBottom - totalH;
|
||||
const r1 = { x, y: y0, w: btnW, h: btnH };
|
||||
const deleteToggleW = Math.max(btnH, Math.min(Math.floor(btnW * 0.28), external ? 42 : 52));
|
||||
const resetW = Math.max(1, btnW - gap - deleteToggleW);
|
||||
const r2 = { x, y: y0 + btnH + gap, w: resetW, h: btnH };
|
||||
const rDelete = { x: x + resetW + gap, y: r2.y, w: deleteToggleW, h: btnH };
|
||||
const r3 = { x, y: y0 + (btnH + gap) * 2, w: btnW, h: btnH };
|
||||
return { startStop: r1, reset: r2, deleteToggle: rDelete, auto: r3, yTop: y0 };
|
||||
}
|
||||
|
||||
function pointInRect(x, y, r) {
|
||||
return x >= r.x && x <= (r.x + r.w) && y >= r.y && y <= (r.y + r.h);
|
||||
}
|
||||
|
||||
function getActiveEntry(shared) {
|
||||
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
||||
if (!entries.length) return null;
|
||||
return entries[entries.length - 1] || null;
|
||||
}
|
||||
|
||||
function isRunning(shared) {
|
||||
const entry = getActiveEntry(shared);
|
||||
return !!entry?.running;
|
||||
}
|
||||
|
||||
function elapsedForEntry(entry, now) {
|
||||
const base = Number.isFinite(entry?.elapsedMs) ? entry.elapsedMs : 0;
|
||||
if (!entry?.running) return base;
|
||||
const startTs = Number.isFinite(entry?.startTs) ? entry.startTs : now;
|
||||
return base + Math.max(0, now - startTs);
|
||||
}
|
||||
|
||||
function sumAllEntriesMs(entries, now) {
|
||||
const list = Array.isArray(entries) ? entries : [];
|
||||
let sum = 0;
|
||||
for (const entry of list) sum += elapsedForEntry(entry, now);
|
||||
return sum;
|
||||
}
|
||||
|
||||
function deleteEntry(shared, index) {
|
||||
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
||||
if (index < 0 || index >= entries.length) return false;
|
||||
const removed = entries.splice(index, 1)[0];
|
||||
if (removed?.running) shared._silenceStartTs = null;
|
||||
shared.scrollOffset = Math.max(0, shared.scrollOffset || 0);
|
||||
shared._dragScroll = null;
|
||||
return true;
|
||||
}
|
||||
|
||||
export function pointer(evt, rect, _CONFIG, shared) {
|
||||
if (!evt) return false;
|
||||
const x = Number(evt.x);
|
||||
const y = Number(evt.y);
|
||||
if (!Number.isFinite(x) || !Number.isFinite(y)) return false;
|
||||
|
||||
const now = shared._lastNow || performance.now();
|
||||
const btns = shared._buttonRects || computeButtons(rect);
|
||||
const scroll = shared._scrollInfo;
|
||||
|
||||
if (evt.type === 'pointerdown') {
|
||||
if (shared._deleteVisible) {
|
||||
const deleteRects = Array.isArray(shared._deleteRects) ? shared._deleteRects : [];
|
||||
for (const hit of deleteRects) {
|
||||
if (hit?.rect && pointInRect(x, y, hit.rect)) {
|
||||
return deleteEntry(shared, hit.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (evt.type === 'wheel') {
|
||||
if (!scroll || !scroll.scrollable || !pointInRect(x, y, scroll.listRect)) return false;
|
||||
const dy = Number(evt.deltaY);
|
||||
if (!Number.isFinite(dy) || dy === 0) return false;
|
||||
const sign = Math.sign(dy);
|
||||
const step = Math.max(1, Math.round(Math.abs(dy) / 100));
|
||||
// "Natural": scroll down => Richtung neueste (Offset ↓), scroll up => Richtung ältere (Offset ↑)
|
||||
shared.scrollOffset = clampInt((shared.scrollOffset || 0) - sign * step, 0, scroll.maxOffset);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (evt.type === 'pointerdown' && pointInRect(x, y, btns.startStop)) {
|
||||
// Manuelles Bedienen schaltet Auto aus, damit die Uhr nicht sofort wieder "zurückspringt".
|
||||
shared.auto = false;
|
||||
if (isRunning(shared)) stop(shared, now);
|
||||
else startNew(shared, now);
|
||||
return true;
|
||||
}
|
||||
if (evt.type === 'pointerdown' && pointInRect(x, y, btns.reset)) {
|
||||
reset(shared, now);
|
||||
return true;
|
||||
}
|
||||
if (evt.type === 'pointerdown' && btns.deleteToggle && pointInRect(x, y, btns.deleteToggle)) {
|
||||
shared._deleteVisible = !shared._deleteVisible;
|
||||
shared._deleteRects = [];
|
||||
return true;
|
||||
}
|
||||
if (evt.type === 'pointerdown' && pointInRect(x, y, btns.auto)) {
|
||||
shared.auto = !shared.auto;
|
||||
shared._silenceStartTs = null;
|
||||
if (shared.auto) {
|
||||
const levelDb = Number.isFinite(shared._lastLevelDb) ? shared._lastLevelDb : -120;
|
||||
if (levelDb > getSilenceDb()) startNew(shared, now);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!scroll || !scroll.scrollable) return false;
|
||||
|
||||
if (evt.type === 'pointerdown') {
|
||||
if (pointInRect(x, y, scroll.listRect)) {
|
||||
shared._dragScroll = { startY: y, startOffset: shared.scrollOffset || 0 };
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if (evt.type === 'pointermove') {
|
||||
if (!shared._dragScroll) return false;
|
||||
const dy = y - shared._dragScroll.startY;
|
||||
const stepPx = Math.max(6, Number(scroll.lineStepPx) || 24);
|
||||
const deltaLines = Math.round(dy / stepPx);
|
||||
// "Natural": Finger nach unten => ältere Einträge (Offset ↑), Finger nach oben => neuere (Offset ↓)
|
||||
shared.scrollOffset = clampInt((shared._dragScroll.startOffset || 0) + deltaLines, 0, scroll.maxOffset);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (evt.type === 'pointerup' || evt.type === 'pointercancel') {
|
||||
if (!shared._dragScroll) return false;
|
||||
shared._dragScroll = null;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function draw(g, rect, _CONFIG, shared) {
|
||||
g.save();
|
||||
try {
|
||||
const now = performance.now();
|
||||
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
||||
const style = (_CONFIG?.STOPWATCH_DISPLAY_STYLE === 'seven') ? 'seven' : 'mono';
|
||||
const external = isExternalClient();
|
||||
const padX = 8;
|
||||
const content = computeContentRect(rect, padX);
|
||||
|
||||
// Header-Hintergrund säubern (wie andere Meter)
|
||||
g.save();
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 26);
|
||||
g.restore();
|
||||
|
||||
// Titel / Status
|
||||
g.save();
|
||||
g.textAlign = 'center';
|
||||
g.fillStyle = CONFIG.HEADER_TEXT_COLOR || MID_COLOR;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
const status = shared.auto ? 'AUTO' : (isRunning(shared) ? 'RUN' : 'STOP');
|
||||
g.fillText(`Stoppuhr (${status})`, content.cx, rect.y - 12);
|
||||
g.restore();
|
||||
|
||||
// Zeit-Anzeige (oben) + Historie darunter (jede Start-Aktion erzeugt eine neue Zeile)
|
||||
const btns = computeButtons(rect);
|
||||
shared._buttonRects = btns;
|
||||
const contentTop = rect.y + 10;
|
||||
const contentBottom = btns.yTop - 4;
|
||||
const contentH = Math.max(0, contentBottom - contentTop);
|
||||
|
||||
const timeW = content.w;
|
||||
const listRect = { x: content.x, y: contentTop, w: timeW, h: contentH };
|
||||
const deleteBtnW = Math.max(external ? 18 : 22, Math.min(external ? 24 : 28, Math.floor(content.w * 0.16)));
|
||||
const deleteGap = Math.max(external ? 4 : 6, Math.round(deleteBtnW * 0.28));
|
||||
const canDeleteRows = content.w >= (external ? 88 : 112);
|
||||
const showDeleteRows = !!shared._deleteVisible && canDeleteRows;
|
||||
const rowTimeW = showDeleteRows ? Math.max(1, content.w - deleteBtnW - deleteGap) : content.w;
|
||||
const rowTimeCx = showDeleteRows ? content.x + rowTimeW / 2 : content.cx;
|
||||
const deleteX = content.x + content.w - deleteBtnW;
|
||||
const deleteRects = [];
|
||||
|
||||
const drawDeleteBtn = (r, active = false) => {
|
||||
g.save();
|
||||
g.fillStyle = active ? 'rgba(255,59,59,0.18)' : 'rgba(255,59,59,0.1)';
|
||||
g.strokeStyle = active ? '#ff3b3b' : 'rgba(255,120,120,0.65)';
|
||||
g.lineWidth = 1.2;
|
||||
g.beginPath();
|
||||
roundedRect(g, r.x, r.y, r.w, r.h, 5);
|
||||
g.fill();
|
||||
g.stroke();
|
||||
g.fillStyle = '#ffd6d6';
|
||||
const labelSize = Math.max(9, Math.min(13, Math.floor(r.h * 0.56)));
|
||||
g.font = `bold ${labelSize}px ui-monospace, monospace`;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'middle';
|
||||
g.fillText('X', r.x + r.w / 2, r.y + r.h / 2 + 0.5);
|
||||
g.restore();
|
||||
};
|
||||
|
||||
if (style === 'seven') {
|
||||
const lineGap = 8;
|
||||
const totalText = formatTime(sumAllEntriesMs(entries, now));
|
||||
const entrySizingTexts = entries.length
|
||||
? entries.map((e) => formatTime(elapsedForEntry(e, now)))
|
||||
: [formatTime(0)];
|
||||
const entryRatioMax = Math.max(...entrySizingTexts.map((t) => sevenSegTotalRatio(t)));
|
||||
const totalRatio = sevenSegTotalRatio(totalText);
|
||||
|
||||
// Einzelzeiten und Summe getrennt skalieren: nur die Zeilen reservieren Platz für die X-Buttons.
|
||||
let segH = Math.floor(rowTimeW / Math.max(1e-6, entryRatioMax));
|
||||
let totalSegH = Math.floor(timeW / Math.max(1e-6, totalRatio));
|
||||
segH = Math.max(external ? 10 : 12, Math.min(external ? 108 : 140, segH));
|
||||
totalSegH = Math.max(external ? 10 : 12, Math.min(external ? 108 : 140, totalSegH));
|
||||
// Höhe begrenzen: mindestens 1 Eintrag + Summenzeile muss passen.
|
||||
while (segH > (external ? 10 : 12) || totalSegH > (external ? 10 : 12)) {
|
||||
const refH = Math.max(segH, totalSegH);
|
||||
const topPad = Math.max(external ? 6 : 10, Math.round(refH * (external ? 0.18 : 0.28)));
|
||||
const bottomPad = Math.max(external ? 5 : 8, Math.round(refH * (external ? 0.12 : 0.18)));
|
||||
const needed = segH + totalSegH + lineGap + topPad + bottomPad;
|
||||
if (needed <= contentH) break;
|
||||
if (totalSegH > segH) totalSegH -= 1;
|
||||
else segH -= 1;
|
||||
}
|
||||
const refH = Math.max(segH, totalSegH);
|
||||
const topPad = Math.max(external ? 6 : 10, Math.round(refH * (external ? 0.18 : 0.28)));
|
||||
const bottomPad = Math.max(external ? 5 : 8, Math.round(refH * (external ? 0.12 : 0.18)));
|
||||
const stepY = segH + (external ? 5 : lineGap);
|
||||
|
||||
const totalY = Math.floor(contentBottom - bottomPad - totalSegH);
|
||||
const ySep = Math.round(totalY - topPad) + 0.5;
|
||||
|
||||
const entryAreaH = Math.max(0, ySep - contentTop);
|
||||
const maxEntryByHeight = Math.max(1, Math.floor((entryAreaH + lineGap) / Math.max(1, stepY)));
|
||||
const displayEntryLines = maxEntryByHeight;
|
||||
|
||||
const maxOffset = Math.max(0, entries.length - displayEntryLines);
|
||||
shared.scrollOffset = clampInt(shared.scrollOffset || 0, 0, maxOffset);
|
||||
const start = Math.max(0, entries.length - displayEntryLines - (shared.scrollOffset || 0));
|
||||
const visible = entries.length ? entries.slice(start, start + displayEntryLines) : [];
|
||||
|
||||
for (let i = 0; i < visible.length; i++) {
|
||||
const entry = visible[i];
|
||||
const running = !!entry?.running;
|
||||
const y = contentTop + i * stepY;
|
||||
const col = running ? '#00e7ff' : 'rgba(255,255,255,0.9)';
|
||||
drawSevenSegString(g, formatTime(elapsedForEntry(entry, now)), rowTimeCx, y, rowTimeW, segH, col);
|
||||
if (showDeleteRows) {
|
||||
const r = { x: deleteX, y: y + Math.max(0, (segH - deleteBtnW) / 2), w: deleteBtnW, h: Math.min(deleteBtnW, segH) };
|
||||
deleteRects.push({ index: start + i, rect: r });
|
||||
drawDeleteBtn(r, running);
|
||||
}
|
||||
}
|
||||
|
||||
// Trennlinie über der Summenzeile (10. Zeile bleibt unten fix)
|
||||
g.save();
|
||||
g.strokeStyle = 'rgba(0,231,255,0.55)';
|
||||
g.setLineDash([6, 5]);
|
||||
g.beginPath();
|
||||
g.moveTo(content.x, ySep);
|
||||
g.lineTo(content.x + timeW, ySep);
|
||||
g.stroke();
|
||||
g.setLineDash([]);
|
||||
g.restore();
|
||||
|
||||
drawSevenSegString(g, totalText, content.cx, totalY, timeW, totalSegH, '#34d399');
|
||||
|
||||
const scrollable = maxOffset > 0;
|
||||
const entryRect = { x: content.x, y: contentTop, w: timeW, h: entryAreaH };
|
||||
shared._scrollInfo = { scrollable, maxLines: displayEntryLines, maxOffset, listRect: entryRect, lineStepPx: stepY };
|
||||
} else {
|
||||
const totalText = formatTime(sumAllEntriesMs(entries, now));
|
||||
const sampleEntries = entries;
|
||||
const sampleTexts = sampleEntries.length ? sampleEntries.map((e) => formatTime(elapsedForEntry(e, now))) : [formatTime(0)];
|
||||
let fontSize = fitFontSizeToWidth(g, sampleTexts, rowTimeW, { min: external ? 12 : 14, max: external ? 108 : 140 });
|
||||
let totalFontSize = fitFontSizeToWidth(g, [totalText], timeW, { min: external ? 12 : 14, max: external ? 108 : 140 });
|
||||
fontSize = Math.max(external ? 12 : 14, Math.min(external ? 108 : 140, fontSize));
|
||||
totalFontSize = Math.max(external ? 12 : 14, Math.min(external ? 108 : 140, totalFontSize));
|
||||
// Höhe begrenzen: mindestens 1 Eintrag + Summenzeile muss passen
|
||||
while (fontSize > (external ? 12 : 14) || totalFontSize > (external ? 12 : 14)) {
|
||||
const refSize = Math.max(fontSize, totalFontSize);
|
||||
const lineGap = Math.max(external ? 2 : 4, Math.round(refSize * (external ? 0.12 : 0.18)));
|
||||
const topPad = Math.max(external ? 6 : 10, Math.round(refSize * (external ? 0.18 : 0.28)));
|
||||
const bottomPad = Math.max(external ? 5 : 8, Math.round(refSize * (external ? 0.12 : 0.18)));
|
||||
const needed = fontSize + totalFontSize + lineGap + topPad + bottomPad;
|
||||
if (needed <= contentH) break;
|
||||
if (totalFontSize > fontSize) totalFontSize -= 1;
|
||||
else fontSize -= 1;
|
||||
}
|
||||
const refSize = Math.max(fontSize, totalFontSize);
|
||||
const lineGap = Math.max(external ? 2 : 4, Math.round(refSize * (external ? 0.12 : 0.18)));
|
||||
const topPad = Math.max(external ? 6 : 10, Math.round(refSize * (external ? 0.18 : 0.28)));
|
||||
const bottomPad = Math.max(external ? 5 : 8, Math.round(refSize * (external ? 0.12 : 0.18)));
|
||||
const stepY = fontSize + lineGap;
|
||||
|
||||
const totalY = Math.floor(contentBottom - bottomPad - totalFontSize);
|
||||
const ySep = Math.round(totalY - topPad) + 0.5;
|
||||
const entryAreaH = Math.max(0, ySep - contentTop);
|
||||
const maxEntryByHeight = Math.max(1, Math.floor((entryAreaH + lineGap) / Math.max(1, stepY)));
|
||||
const displayEntryLines = maxEntryByHeight;
|
||||
|
||||
const maxOffset = Math.max(0, entries.length - displayEntryLines);
|
||||
shared.scrollOffset = clampInt(shared.scrollOffset || 0, 0, maxOffset);
|
||||
const start = Math.max(0, entries.length - displayEntryLines - (shared.scrollOffset || 0));
|
||||
const visible = entries.slice(start, start + displayEntryLines);
|
||||
|
||||
g.save();
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'top';
|
||||
g.font = `bold ${fontSize}px ui-monospace, monospace`;
|
||||
for (let i = 0; i < visible.length; i++) {
|
||||
const entry = visible[i];
|
||||
const running = !!entry?.running;
|
||||
const y = contentTop + i * stepY;
|
||||
const ms = elapsedForEntry(entry, now);
|
||||
g.fillStyle = running ? '#00e7ff' : 'rgba(255,255,255,0.9)';
|
||||
g.fillText(formatTime(ms), rowTimeCx, y);
|
||||
if (showDeleteRows) {
|
||||
const btnH = Math.max(16, Math.min(deleteBtnW, fontSize));
|
||||
const r = { x: deleteX, y: y + Math.max(0, (fontSize - btnH) / 2), w: deleteBtnW, h: btnH };
|
||||
deleteRects.push({ index: start + i, rect: r });
|
||||
drawDeleteBtn(r, running);
|
||||
}
|
||||
}
|
||||
|
||||
g.save();
|
||||
g.strokeStyle = 'rgba(0,231,255,0.55)';
|
||||
g.setLineDash([6, 5]);
|
||||
g.beginPath();
|
||||
g.moveTo(content.x, ySep);
|
||||
g.lineTo(content.x + timeW, ySep);
|
||||
g.stroke();
|
||||
g.setLineDash([]);
|
||||
g.restore();
|
||||
|
||||
g.fillStyle = '#34d399';
|
||||
g.font = `bold ${totalFontSize}px ui-monospace, monospace`;
|
||||
g.fillText(totalText, content.cx, totalY);
|
||||
g.textBaseline = 'alphabetic';
|
||||
g.restore();
|
||||
|
||||
const scrollable = maxOffset > 0;
|
||||
const entryRect = { x: content.x, y: contentTop, w: timeW, h: entryAreaH };
|
||||
shared._scrollInfo = { scrollable, maxLines: displayEntryLines, maxOffset, listRect: entryRect, lineStepPx: stepY };
|
||||
}
|
||||
shared._deleteRects = deleteRects;
|
||||
|
||||
// Buttons
|
||||
const drawBtn = (r, label, active = false, warn = false, { blink = false } = {}) => {
|
||||
g.save();
|
||||
if (active && blink) {
|
||||
const phase = (now % 800) / 800; // 0..1
|
||||
const pulse = 0.08 + 0.22 * (0.5 + 0.5 * Math.sin(phase * Math.PI * 2));
|
||||
g.fillStyle = `rgba(0,231,255,${pulse.toFixed(3)})`;
|
||||
} else {
|
||||
g.fillStyle = active ? 'rgba(0,231,255,0.18)' : 'rgba(180,200,220,0.08)';
|
||||
}
|
||||
g.strokeStyle = warn ? '#ff3b3b' : (active ? '#00e7ff' : 'rgba(0,231,255,0.55)');
|
||||
g.lineWidth = 1.5;
|
||||
g.beginPath();
|
||||
const rad = 6;
|
||||
roundedRect(g, r.x, r.y, r.w, r.h, rad);
|
||||
g.fill();
|
||||
g.stroke();
|
||||
g.fillStyle = warn ? '#ffdddd' : '#e7f6ff';
|
||||
const labelSize = Math.max(external ? 8 : 10, Math.min(external ? 11 : 12, Math.floor(r.h * (external ? 0.32 : 0.34))));
|
||||
g.font = `bold ${labelSize}px ui-monospace, monospace`;
|
||||
g.textAlign = 'center';
|
||||
g.fillText(label, r.x + r.w / 2, r.y + r.h / 2 + Math.max(3, Math.round(labelSize * 0.32)));
|
||||
g.restore();
|
||||
};
|
||||
|
||||
drawBtn(btns.startStop, isRunning(shared) ? 'Stop' : 'Start', isRunning(shared));
|
||||
drawBtn(btns.reset, 'Reset', false, true);
|
||||
drawBtn(btns.deleteToggle, 'X', !!shared._deleteVisible, true);
|
||||
drawBtn(btns.auto, 'Auto', shared.auto, false, { blink: true });
|
||||
} finally {
|
||||
g.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function roundedRect(g, x, y, w, h, r) {
|
||||
const rr = Math.max(0, Math.min(r, Math.min(w, h) / 2));
|
||||
g.moveTo(x + rr, y);
|
||||
g.arcTo(x + w, y, x + w, y + h, rr);
|
||||
g.arcTo(x + w, y + h, x, y + h, rr);
|
||||
g.arcTo(x, y + h, x, y, rr);
|
||||
g.arcTo(x, y, x + w, y, rr);
|
||||
g.closePath();
|
||||
}
|
||||
|
||||
function clampInt(v, lo, hi) {
|
||||
const n = Math.round(Number(v));
|
||||
if (!Number.isFinite(n)) return lo;
|
||||
return Math.max(lo, Math.min(hi, n));
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
// meters/tp.js — True Peak (dBTP) L/R mit nichtlinearer Skala, Warnschwelle und Glanzkante
|
||||
import { createPeakHoldState, stepPeakHold } from '../core/utils.js';
|
||||
import { drawHairlineGrid, METER_HEADER_FONT } from './scale_helpers.js';
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
import { HEADER_BG, LABEL_COLOR, MID_COLOR, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
export const id = 'tp';
|
||||
|
||||
const TP_PERCENT_SCALE = [
|
||||
{ db: -60, percent: '0,00 %', frac: 0.0000 },
|
||||
{ db: -50, percent: '16,67 %', frac: 0.0373 },
|
||||
{ db: -40, percent: '33,33 %', frac: 0.1429 },
|
||||
{ db: -35, percent: '41,67 %', frac: 0.2112 },
|
||||
{ db: -30, percent: '50,00 %', frac: 0.2857 },
|
||||
{ db: -25, percent: '58,33 %', frac: 0.3851 },
|
||||
{ db: -20, percent: '66,67 %', frac: 0.4783 },
|
||||
{ db: -15, percent: '75,00 %', frac: 0.6087 },
|
||||
{ db: -10, percent: '83,33 %', frac: 0.7391 },
|
||||
{ db: -5, percent: '91,67 %', frac: 0.8696 },
|
||||
{ db: 0, percent: '100,00 %', frac: 1.0000 },
|
||||
];
|
||||
|
||||
export function initShared(CONFIG) {
|
||||
const now = performance.now();
|
||||
return {
|
||||
values: { L: -60, R: -60 },
|
||||
hold: { L: -60, R: -60 },
|
||||
_holdState: {
|
||||
L: createPeakHoldState(-60, now, CONFIG?.TP_HOLD_MS ?? 1000),
|
||||
R: createPeakHoldState(-60, now, CONFIG?.TP_HOLD_MS ?? 1000),
|
||||
},
|
||||
offset: CONFIG?.TP_OFFSET_DB || 0,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
if (!packet || !shared) return;
|
||||
|
||||
const L = Number.isFinite(packet.tpL) ? packet.tpL : -60;
|
||||
const R = Number.isFinite(packet.tpR) ? packet.tpR : -60;
|
||||
shared.values.L = L + (shared.offset || 0);
|
||||
shared.values.R = R + (shared.offset || 0);
|
||||
}
|
||||
|
||||
const LOG_MIN = TP_PERCENT_SCALE[0].db;
|
||||
const LOG_TOP = TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].db;
|
||||
|
||||
function interpolateFrac(db) {
|
||||
if (db <= TP_PERCENT_SCALE[0].db) return TP_PERCENT_SCALE[0].frac;
|
||||
if (db >= TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].db) return TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].frac;
|
||||
for (let i = 1; i < TP_PERCENT_SCALE.length; i++) {
|
||||
const prev = TP_PERCENT_SCALE[i - 1];
|
||||
const curr = TP_PERCENT_SCALE[i];
|
||||
if (db <= curr.db) {
|
||||
const span = curr.db - prev.db || 1;
|
||||
const t = (db - prev.db) / span;
|
||||
return prev.frac + t * (curr.frac - prev.frac);
|
||||
}
|
||||
}
|
||||
return TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].frac;
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG, shared) {
|
||||
if (!g || !rect || !CONFIG || !shared) return;
|
||||
|
||||
// Live-Offset berücksichtigen (TP_OFFSET_DB)
|
||||
const __effOff = Number(CONFIG && CONFIG.TP_OFFSET_DB) || 0;
|
||||
const __offCorr = __effOff - (shared.offset || 0);
|
||||
|
||||
const mapY = (db) => {
|
||||
const clamped = Math.max(LOG_MIN, Math.min(LOG_TOP, db));
|
||||
const norm = interpolateFrac(clamped);
|
||||
return rect.y + (1 - norm) * rect.h;
|
||||
};
|
||||
|
||||
// Layout: zwei Balken + mittige Skala (nur Labels)
|
||||
const innerPad = 8, scaleW = 26, gap = 8;
|
||||
const avail = rect.w - innerPad * 2 - scaleW - gap * 2;
|
||||
let barW = Math.max(8, Math.floor(avail / 2));
|
||||
barW = Math.floor(barW * (CONFIG.METER_BAR_THIN || 0.55));
|
||||
|
||||
const used = 2 * barW + scaleW + 2 * gap;
|
||||
const extra = Math.max(0, (rect.w - innerPad * 2) - used);
|
||||
const leftX = rect.x + innerPad + extra / 2;
|
||||
const scaleX = leftX + barW + gap;
|
||||
const rightX = scaleX + scaleW + gap;
|
||||
const centerX = scaleX + scaleW / 2;
|
||||
|
||||
const rawL = shared.values.L + __offCorr;
|
||||
const rawR = shared.values.R + __offCorr;
|
||||
const tpL = Math.max(LOG_MIN, Math.min(LOG_TOP, rawL));
|
||||
const tpR = Math.max(LOG_MIN, Math.min(LOG_TOP, rawR));
|
||||
const smooth = smoothHeader(shared, rawL, rawR);
|
||||
const centerLeft = leftX + barW / 2;
|
||||
const centerRight = rightX + barW / 2;
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 24);
|
||||
const headerWarn = CONFIG.TP_HEADER_SHOW_VALUE && (rawL > CONFIG.TP_RED_START || rawR > CONFIG.TP_RED_START);
|
||||
g.fillStyle = headerWarn ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.textAlign = 'center';
|
||||
if (CONFIG.TP_HEADER_SHOW_VALUE) {
|
||||
const yText = rect.y - 12;
|
||||
const fmt = (v) => {
|
||||
const sign = v >= 0 ? '+' : '-';
|
||||
return `${sign}${Math.abs(v).toFixed(1)}`;
|
||||
};
|
||||
const isRedL = rawL > CONFIG.TP_RED_START;
|
||||
const isRedR = rawR > CONFIG.TP_RED_START;
|
||||
g.textAlign = 'center';
|
||||
g.fillStyle = isRedL ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.L), centerLeft, yText);
|
||||
g.fillStyle = CONFIG.HEADER_TEXT_COLOR || MID_COLOR;
|
||||
g.fillText('|', centerX, yText);
|
||||
g.fillStyle = isRedR ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.R), centerRight, yText);
|
||||
} else {
|
||||
g.fillText('True Peak', centerX, rect.y - 12);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
const yFloor = mapY(LOG_MIN);
|
||||
const innerW = Math.max(2, barW - 2);
|
||||
|
||||
const drawBar = (x0, val) => {
|
||||
const yVal = mapY(val);
|
||||
const colNorm = CONFIG.TP_COLOR_NORMAL;
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, yVal, innerW, Math.max(0, yFloor - yVal));
|
||||
// Glanzkante
|
||||
g.globalAlpha = .12;
|
||||
g.fillStyle = '#fff';
|
||||
g.fillRect(x0 + 1, yVal, innerW, 2);
|
||||
g.globalAlpha = 1;
|
||||
};
|
||||
|
||||
drawBar(leftX, tpL);
|
||||
drawBar(rightX, tpR);
|
||||
|
||||
// Hold-Logik (weiße Linie)
|
||||
const now = performance.now();
|
||||
const holdMs = CONFIG.TP_HOLD_MS ?? 1000;
|
||||
const decayDbPerS = CONFIG.TP_DECAY_DB_PER_S ?? 20;
|
||||
|
||||
if (!shared._holdState) {
|
||||
shared._holdState = {
|
||||
L: createPeakHoldState(shared.hold?.L ?? LOG_MIN, now, holdMs),
|
||||
R: createPeakHoldState(shared.hold?.R ?? LOG_MIN, now, holdMs),
|
||||
};
|
||||
}
|
||||
|
||||
const holdOpts = { holdMs, decayDbPerS, floor: LOG_MIN, riseThreshold: 0.2 };
|
||||
shared.hold.L = stepPeakHold(tpL, shared._holdState.L, now, holdOpts);
|
||||
shared.hold.R = stepPeakHold(tpR, shared._holdState.R, now, holdOpts);
|
||||
|
||||
// Hold-Linien zeichnen
|
||||
g.save();
|
||||
g.fillStyle = 'white';
|
||||
const yHoldL = mapY(shared.hold.L);
|
||||
const yHoldR = mapY(shared.hold.R);
|
||||
g.fillRect(leftX + 1, yHoldL - 2, innerW, 3);
|
||||
g.fillRect(rightX + 1, yHoldR - 2, innerW, 3);
|
||||
g.restore();
|
||||
|
||||
drawTpStaticOverlay(g, shared, rect, CONFIG, {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
}, mapY);
|
||||
}
|
||||
|
||||
function drawTpStaticOverlay(g, shared, rect, CONFIG, geom, mapY) {
|
||||
const { leftX, rightX, barW, innerW, scaleX, scaleW, centerX } = geom;
|
||||
const topPad = 10;
|
||||
const layerX = rect.x;
|
||||
const layerY = rect.y - topPad;
|
||||
const layerW = rect.w;
|
||||
const layerH = rect.h + 24 + topPad;
|
||||
const key = [
|
||||
'scale-font-header-v1-top-pad',
|
||||
Math.round(rect.w),
|
||||
Math.round(rect.h),
|
||||
topPad,
|
||||
CONFIG.METER_BAR_THIN || 0.55,
|
||||
CONFIG.AL_MARKERS_ENABLED === false ? 0 : 1,
|
||||
METER_HEADER_FONT,
|
||||
].join('|');
|
||||
drawCachedStaticLayer(g, shared, 'tp-static', key, layerX, layerY, layerW, layerH, (cg) => {
|
||||
cg.save();
|
||||
cg.translate(-layerX, -layerY);
|
||||
drawOverlayTicksLR(cg, leftX, rightX, innerW, mapY, getTpAlignmentTick(CONFIG));
|
||||
const scaleRect = { x: scaleX, y: rect.y, w: scaleW, h: rect.h };
|
||||
drawScale(cg, scaleRect, centerX, mapY, CONFIG);
|
||||
cg.fillStyle = LABEL_COLOR;
|
||||
cg.textAlign = 'center';
|
||||
const baseY = rect.y + rect.h + 16;
|
||||
cg.fillText('L', leftX + barW / 2, baseY);
|
||||
cg.fillText('R', rightX + barW / 2, baseY);
|
||||
const prevFontLabels = cg.font;
|
||||
cg.fillStyle = '#ffffff';
|
||||
cg.font = 'bold 8.4px ui-monospace, monospace';
|
||||
cg.fillText('dBTP', centerX, baseY);
|
||||
cg.font = prevFontLabels;
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
// Balken-Overlay-Ticks auf Basis der Vintage-Prozent-Skala
|
||||
const EXTRA_MINOR_TICKS = [-47, -19, -18, -17, -16, -14, -13, -12, -11, -9, -8, -7, -6, -4, -3, -2, -1];
|
||||
|
||||
function drawOverlayTicksLR(g, leftX, rightX, widthPx, mapY, alignmentTick = null) {
|
||||
if (!g) return;
|
||||
|
||||
g.save();
|
||||
g.lineWidth = 1;
|
||||
|
||||
const MAJOR_INSET = 2;
|
||||
const MINOR_FRAC = 0.45;
|
||||
const DEFAULT_COLOR = 'rgb(0,0,255)';
|
||||
const highlightValue = Number.isFinite(alignmentTick?.value) ? alignmentTick.value : null;
|
||||
const highlightColor = alignmentTick?.color || WARN_COLOR;
|
||||
const approx = (a, b) => Math.abs(a - b) < 1e-3;
|
||||
let highlightMatched = false;
|
||||
|
||||
const cxL = leftX + 1 + widthPx / 2;
|
||||
const cxR = rightX + 1 + widthPx / 2;
|
||||
|
||||
const drawMajor = (yPix, highlight = false) => {
|
||||
g.strokeStyle = highlight ? highlightColor : DEFAULT_COLOR;
|
||||
const majorW = Math.max(1, widthPx - 4 * MAJOR_INSET);
|
||||
const x1L = Math.round(cxL - majorW / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + majorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
|
||||
const x1R = Math.round(cxR - majorW / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + majorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
const drawMinor = (yPix, highlight = false) => {
|
||||
g.strokeStyle = highlight ? highlightColor : DEFAULT_COLOR;
|
||||
const span = Math.max(1, Math.floor(widthPx * MINOR_FRAC));
|
||||
const x1L = Math.round(cxL - span / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + span / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
const x1R = Math.round(cxR - span / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + span / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
for (const point of TP_PERCENT_SCALE) {
|
||||
const y = Math.round(mapY(point.db)) + 0.5;
|
||||
const isHighlight = highlightValue !== null && approx(point.db, highlightValue);
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawMajor(y, isHighlight);
|
||||
}
|
||||
|
||||
for (const db of EXTRA_MINOR_TICKS) {
|
||||
const y = Math.round(mapY(db)) + 0.5;
|
||||
const isHighlight = highlightValue !== null && approx(db, highlightValue);
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawMinor(y, isHighlight);
|
||||
}
|
||||
|
||||
if (highlightValue !== null && !highlightMatched) {
|
||||
const y = Math.round(mapY(highlightValue)) + 0.5;
|
||||
drawMajor(y, true);
|
||||
}
|
||||
|
||||
g.restore();
|
||||
}
|
||||
|
||||
// Skala mittig: nur dB-Labels
|
||||
function drawScale(g, colRect, centerX, mapY, CONFIG) {
|
||||
if (!g || !colRect) return;
|
||||
|
||||
drawHairlineGrid(g, colRect, mapY, LOG_TOP, LOG_MIN, 1);
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
|
||||
for (const point of TP_PERCENT_SCALE) {
|
||||
const y = mapY(point.db);
|
||||
if (y < colRect.y || y > colRect.y + colRect.h) continue;
|
||||
const value = Math.abs(point.db);
|
||||
const dbLabel = Number.isInteger(value) ? String(value) : value.toFixed(1);
|
||||
g.fillText(dbLabel, centerX, y + 5);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function getTpAlignmentTick(CONFIG) {
|
||||
if (!CONFIG || CONFIG.AL_MARKERS_ENABLED === false) return null;
|
||||
const isArd = CONFIG.PPM_DIN_MODE === 'al_minus9';
|
||||
return { value: isArd ? -12 : -15, color: WARN_COLOR };
|
||||
}
|
||||
|
||||
function smoothHeader(shared, rawL, rawR, alpha = 0.2) {
|
||||
if (!shared._header) {
|
||||
shared._header = { L: rawL, R: rawR };
|
||||
return shared._header;
|
||||
}
|
||||
shared._header.L += alpha * (rawL - shared._header.L);
|
||||
shared._header.R += alpha * (rawR - shared._header.R);
|
||||
return shared._header;
|
||||
}
|
||||
@@ -0,0 +1,398 @@
|
||||
import { createPeakHoldState, stepPeakHold } from '../core/utils.js';
|
||||
import { drawHairlineGrid, METER_HEADER_FONT } from './scale_helpers.js';
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
import { HEADER_BG, LABEL_COLOR, MID_COLOR, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
const VU_BOTTOM_DB = -20;
|
||||
const VU_TOP_DB = 3;
|
||||
const SCALE_TICKS_DB = [-20, -10, -7, -5, -3, 0, 1, 2, 3];
|
||||
const EXTRA_BAR_TICKS_DB = [-2, -1];
|
||||
const SKIP_AUTO_MINOR_DB = [-1.5];
|
||||
const VINTAGE_DEFLECTION = [
|
||||
{ db: -20, frac: 0.000 },
|
||||
{ db: -10, frac: 0.165 },
|
||||
{ db: -7, frac: 0.264 },
|
||||
{ db: -5, frac: 0.352 },
|
||||
{ db: -3, frac: 0.463 },
|
||||
{ db: 0, frac: 0.686 },
|
||||
{ db: +1, frac: 0.779 },
|
||||
{ db: +2, frac: 0.883 },
|
||||
{ db: +3, frac: 1.000 },
|
||||
];
|
||||
|
||||
// meters/vu.js — VU (L/R) mit Hold, Warnschwelle und Skala
|
||||
// Erwartet update(packet) mit packet.vuL / packet.vuR (in dBFS).
|
||||
|
||||
export const id = 'vu';
|
||||
|
||||
export function initShared(CONFIG) {
|
||||
const now = performance.now();
|
||||
return {
|
||||
values: { L: VU_BOTTOM_DB, R: VU_BOTTOM_DB },
|
||||
hold: { L: VU_BOTTOM_DB, R: VU_BOTTOM_DB },
|
||||
_holdState: {
|
||||
L: createPeakHoldState(VU_BOTTOM_DB, now, CONFIG?.VU_HOLD_MS ?? 600),
|
||||
R: createPeakHoldState(VU_BOTTOM_DB, now, CONFIG?.VU_HOLD_MS ?? 600),
|
||||
},
|
||||
calDbfs: CONFIG.VU_DBFS_REF,
|
||||
offset: CONFIG.VU_OFFSET_DB,
|
||||
};
|
||||
}
|
||||
|
||||
export function update(packet, shared) {
|
||||
// packet.vuL / vuR sind dBFS (durch Worklet als RMS/VU-integriert geliefert)
|
||||
const L = Number.isFinite(packet.vuL) ? packet.vuL : -60;
|
||||
const R = Number.isFinite(packet.vuR) ? packet.vuR : -60;
|
||||
shared.values.L = L - shared.calDbfs + shared.offset; // in VU
|
||||
shared.values.R = R - shared.calDbfs + shared.offset; // in VU
|
||||
}
|
||||
|
||||
export function draw(g, rect, CONFIG, shared) {
|
||||
const VU_TOP = VU_TOP_DB, VU_BOTTOM = VU_BOTTOM_DB;
|
||||
const clampVU = (v) => Math.max(VU_BOTTOM, Math.min(VU_TOP, v));
|
||||
const deflectionFrac = (dB) => {
|
||||
const table = VINTAGE_DEFLECTION;
|
||||
if (dB <= table[0].db) return table[0].frac;
|
||||
if (dB >= table[table.length - 1].db) return table[table.length - 1].frac;
|
||||
for (let i = 1; i < table.length; i++) {
|
||||
const prev = table[i - 1];
|
||||
const curr = table[i];
|
||||
if (dB <= curr.db) {
|
||||
const span = curr.db - prev.db || 1;
|
||||
const t = (dB - prev.db) / span;
|
||||
return prev.frac + t * (curr.frac - prev.frac);
|
||||
}
|
||||
}
|
||||
return table[table.length - 1].frac;
|
||||
};
|
||||
// Ensure scale labels, ticks and bar deflection share the same DIN-vintage mapping.
|
||||
const mapY = (dB) => {
|
||||
const clamped = clampVU(dB);
|
||||
const frac = deflectionFrac(clamped);
|
||||
const yBot = rect.y + rect.h;
|
||||
return yBot - frac * rect.h;
|
||||
};
|
||||
|
||||
|
||||
// Live-Offset anwenden: UI-Änderungen wirken sofort
|
||||
const effOff = Number(CONFIG && CONFIG.VU_OFFSET_DB) || 0;
|
||||
const offCorr = effOff - (shared.offset || 0);
|
||||
|
||||
|
||||
|
||||
// Layout: zwei vertikale Balken + mittige Skala
|
||||
const innerPad = 8, scaleW = 26, gap = 8;
|
||||
const avail = rect.w - innerPad * 2 - scaleW - gap * 2;
|
||||
let barW = Math.max(8, Math.floor(avail / 2));
|
||||
barW = Math.floor(barW * (CONFIG.METER_BAR_THIN || 0.55));
|
||||
|
||||
const used = 2 * barW + scaleW + 2 * gap;
|
||||
const extra = Math.max(0, (rect.w - innerPad * 2) - used);
|
||||
const leftX = rect.x + innerPad + extra / 2;
|
||||
const scaleX = leftX + barW + gap;
|
||||
const rightX = scaleX + scaleW + gap;
|
||||
const centerX = scaleX + scaleW / 2;
|
||||
const centerLeft = leftX + barW / 2;
|
||||
const centerRight = rightX + barW / 2;
|
||||
|
||||
// Werte
|
||||
const rawVuL = shared.values.L + offCorr;
|
||||
const rawVuR = shared.values.R + offCorr;
|
||||
const vuL = clampVU(rawVuL);
|
||||
const vuR = clampVU(rawVuR);
|
||||
const smooth = smoothHeader(shared, rawVuL, rawVuR);
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = 'bold 12px ui-monospace, monospace';
|
||||
// Header-Hintergrund säubern, damit keine alten Werte liegen bleiben
|
||||
g.fillStyle = HEADER_BG;
|
||||
g.fillRect(rect.x, rect.y - 24, rect.w, 24);
|
||||
const headerWarn = CONFIG.VU_HEADER_SHOW_VALUE && (rawVuL > CONFIG.VU_RED_START || rawVuR > CONFIG.VU_RED_START);
|
||||
g.fillStyle = headerWarn ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.textAlign = 'center';
|
||||
if (CONFIG.VU_HEADER_SHOW_VALUE) {
|
||||
const yText = rect.y - 12;
|
||||
const fmt = (v) => {
|
||||
const sign = v >= 0 ? '+' : '-';
|
||||
return `${sign}${Math.abs(v).toFixed(1)}`;
|
||||
};
|
||||
const isRedL = rawVuL > CONFIG.VU_RED_START;
|
||||
const isRedR = rawVuR > CONFIG.VU_RED_START;
|
||||
g.textAlign = 'center';
|
||||
g.fillStyle = isRedL ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.L), centerLeft, yText);
|
||||
g.fillStyle = CONFIG.HEADER_TEXT_COLOR || MID_COLOR;
|
||||
g.fillText('|', centerX, yText);
|
||||
g.fillStyle = isRedR ? WARN_COLOR : (CONFIG.HEADER_TEXT_COLOR || MID_COLOR);
|
||||
g.fillText(fmt(smooth.R), centerRight, yText);
|
||||
} else {
|
||||
g.fillText('Volume Units', centerX, rect.y - 12);
|
||||
}
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
const yFloor = mapY(VU_BOTTOM);
|
||||
const yRed = mapY(CONFIG.VU_RED_START);
|
||||
const innerW = Math.max(2, barW - 2);
|
||||
|
||||
const drawVuBar = (x0, vu) => {
|
||||
const yVal = mapY(vu);
|
||||
const colNorm = CONFIG.VU_COLOR_NORMAL;
|
||||
const colWarn = CONFIG.VU_COLOR_WARN;
|
||||
|
||||
if (vu > CONFIG.VU_RED_START) {
|
||||
if (CONFIG.VU_RED_BAR_ONLY) {
|
||||
// Normaler Teil unten
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, Math.min(yRed, yFloor), innerW, Math.max(0, yFloor - yRed));
|
||||
// Roter Teil oben
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x0 + 1, Math.min(yVal, yRed), innerW, Math.max(0, yRed - yVal));
|
||||
} else {
|
||||
g.fillStyle = colWarn;
|
||||
g.fillRect(x0 + 1, yVal, innerW, Math.max(0, yFloor - yVal));
|
||||
}
|
||||
} else {
|
||||
g.fillStyle = colNorm;
|
||||
g.fillRect(x0 + 1, yVal, innerW, Math.max(0, yFloor - yVal));
|
||||
}
|
||||
|
||||
// leichte Glanzkante
|
||||
g.globalAlpha = .12; g.fillStyle = '#fff'; g.fillRect(x0 + 1, yVal, innerW, 2); g.globalAlpha = 1;
|
||||
};
|
||||
|
||||
// Balken zeichnen
|
||||
drawVuBar(leftX, vuL);
|
||||
|
||||
// Red stripe overlay (left)
|
||||
drawRedStripe(g, {x:leftX, w:innerW}, centerX, mapY);
|
||||
drawVuBar(rightX, vuR);
|
||||
// Overlay ticks on bars
|
||||
drawOverlayTicksLR(g, leftX, rightX, innerW, mapY, VU_TOP, VU_BOTTOM, SCALE_TICKS_DB, getVuAlignmentTick(CONFIG));
|
||||
|
||||
|
||||
// Red stripe overlay (right)
|
||||
drawRedStripe(g, {x:rightX, w:innerW}, centerX, mapY);
|
||||
const now = performance.now();
|
||||
const holdMs = (CONFIG.VU_HOLD_MS ?? 600);
|
||||
const decayDbPerS = (CONFIG.VU_DECAY_DB_PER_S ?? 35);
|
||||
const holdOpts = {
|
||||
holdMs,
|
||||
decayDbPerS,
|
||||
floor: VU_BOTTOM,
|
||||
riseThreshold: 0.2,
|
||||
};
|
||||
if (!shared._holdState) {
|
||||
shared._holdState = {
|
||||
L: createPeakHoldState(shared.hold?.L ?? VU_BOTTOM, now, holdMs),
|
||||
R: createPeakHoldState(shared.hold?.R ?? VU_BOTTOM, now, holdMs),
|
||||
};
|
||||
}
|
||||
shared.hold.L = stepPeakHold(vuL, shared._holdState.L, now, holdOpts);
|
||||
shared.hold.R = stepPeakHold(vuR, shared._holdState.R, now, holdOpts);
|
||||
|
||||
// Hold-Anzeigen
|
||||
g.save();
|
||||
g.fillStyle = '#fff';
|
||||
g.fillRect(leftX + 1, mapY(shared.hold.L) - 1, innerW, 2);
|
||||
g.fillRect(rightX + 1, mapY(shared.hold.R) - 1, innerW, 2);
|
||||
g.restore();
|
||||
|
||||
drawVuStaticOverlay(g, shared, rect, CONFIG, {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
}, mapY);
|
||||
}
|
||||
|
||||
function drawVuStaticOverlay(g, shared, rect, CONFIG, geom, mapY) {
|
||||
const {
|
||||
leftX,
|
||||
rightX,
|
||||
barW,
|
||||
innerW,
|
||||
scaleX,
|
||||
scaleW,
|
||||
centerX,
|
||||
} = geom;
|
||||
const topPad = 10;
|
||||
const layerX = rect.x;
|
||||
const layerY = rect.y - topPad;
|
||||
const layerW = rect.w;
|
||||
const layerH = rect.h + 24 + topPad;
|
||||
const key = [
|
||||
'scale-font-header-v1-top-pad',
|
||||
Math.round(rect.w),
|
||||
Math.round(rect.h),
|
||||
topPad,
|
||||
CONFIG.METER_BAR_THIN || 0.55,
|
||||
CONFIG.AL_MARKERS_ENABLED === false ? 0 : 1,
|
||||
METER_HEADER_FONT,
|
||||
].join('|');
|
||||
drawCachedStaticLayer(g, shared, 'vu-static', key, layerX, layerY, layerW, layerH, (cg) => {
|
||||
cg.save();
|
||||
cg.translate(-layerX, -layerY);
|
||||
drawScale(cg, { x: scaleX, y: rect.y, w: scaleW, h: rect.h }, centerX, mapY, CONFIG);
|
||||
drawRedStripe(cg, { x: leftX, w: innerW }, centerX, mapY);
|
||||
drawRedStripe(cg, { x: rightX, w: innerW }, centerX, mapY);
|
||||
drawOverlayTicksLR(cg, leftX, rightX, innerW, mapY, VU_TOP_DB, VU_BOTTOM_DB, SCALE_TICKS_DB, getVuAlignmentTick(CONFIG));
|
||||
cg.fillStyle = LABEL_COLOR;
|
||||
cg.textAlign = 'center';
|
||||
const baseY = rect.y + rect.h + 16;
|
||||
cg.fillText('L', leftX + barW / 2, baseY);
|
||||
cg.fillText('R', rightX + barW / 2, baseY);
|
||||
const prevFontLabels = cg.font;
|
||||
cg.fillStyle = '#ffffff';
|
||||
cg.font = 'bold 8.4px ui-monospace, monospace';
|
||||
cg.fillText('dB (VU)', centerX, baseY);
|
||||
cg.font = prevFontLabels;
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function drawRedStripe(g, rectLite, centerX, mapY) {
|
||||
// Red zone = [0..+3] dB
|
||||
const yTop = mapY(VU_TOP_DB);
|
||||
const y0 = mapY(0);
|
||||
const y1 = Math.min(y0, yTop), y2 = Math.max(y0, yTop);
|
||||
const isLeft = (rectLite.x + rectLite.w/2) < centerX;
|
||||
const innerEdge = isLeft ? (rectLite.x + rectLite.w) : rectLite.x;
|
||||
const gap = Math.abs(centerX - innerEdge);
|
||||
const inset = Math.max(1, Math.floor(gap * 0.35));
|
||||
const cx = Math.round(isLeft ? (innerEdge + inset) : (innerEdge - inset)) + 0.5;
|
||||
g.save();
|
||||
g.strokeStyle = WARN_COLOR;
|
||||
g.lineWidth = 1;
|
||||
g.beginPath();
|
||||
g.moveTo(cx, y1);
|
||||
g.lineTo(cx, y2);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
|
||||
// Dünner roter Mittelstrich für 0..+3 dB
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function drawOverlayTicksLR(g, leftX, rightX, widthPx, mapY, TOP, BOTTOM, majors, alignmentTick = null) {
|
||||
g.save();
|
||||
g.lineWidth = 1;
|
||||
|
||||
const MAJOR_INSET = 2;
|
||||
const MINOR_FRAC = 0.45;
|
||||
const DEFAULT_COLOR = 'rgb(0,0,255)';
|
||||
const highlightValue = Number.isFinite(alignmentTick?.value) ? alignmentTick.value : null;
|
||||
const highlightColor = alignmentTick?.color || WARN_COLOR;
|
||||
const approx = (a, b) => Math.abs(a - b) < 1e-3;
|
||||
let highlightMatched = false;
|
||||
|
||||
const cxL = leftX + 1 + widthPx / 2;
|
||||
const cxR = rightX + 1 + widthPx / 2;
|
||||
|
||||
const drawMajor = (yPix, highlight = false) => {
|
||||
g.strokeStyle = highlight ? highlightColor : DEFAULT_COLOR;
|
||||
const majorW = Math.max(1, widthPx - 4 * MAJOR_INSET);
|
||||
const x1L = Math.round(cxL - majorW / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + majorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
|
||||
const x1R = Math.round(cxR - majorW / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + majorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
const drawMinor = (yPix, highlight = false) => {
|
||||
g.strokeStyle = highlight ? highlightColor : DEFAULT_COLOR;
|
||||
const minorW = Math.max(1, Math.floor(widthPx * MINOR_FRAC));
|
||||
const x1L = Math.round(cxL - minorW / 2) + 0.5;
|
||||
const x2L = Math.round(cxL + minorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1L, yPix); g.lineTo(x2L, yPix); g.stroke();
|
||||
|
||||
const x1R = Math.round(cxR - minorW / 2) + 0.5;
|
||||
const x2R = Math.round(cxR + minorW / 2) + 0.5;
|
||||
g.beginPath(); g.moveTo(x1R, yPix); g.lineTo(x2R, yPix); g.stroke();
|
||||
};
|
||||
|
||||
const top = TOP, bot = BOTTOM;
|
||||
const hi = Math.max(top, bot), lo = Math.min(top, bot);
|
||||
const inRange = (v) => v <= hi && v >= lo;
|
||||
|
||||
if (Array.isArray(majors) && majors.length > 0) {
|
||||
const sorted = majors.slice().sort((a, b) => b - a); // desc (top->bottom)
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
const vMaj = sorted[i];
|
||||
if (inRange(vMaj)) {
|
||||
const yMaj = Math.round(mapY(vMaj)) + 0.5;
|
||||
const isHighlight = highlightValue !== null && approx(vMaj, highlightValue);
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawMajor(yMaj, isHighlight);
|
||||
}
|
||||
if (i < sorted.length - 1) {
|
||||
const vNext = sorted[i + 1];
|
||||
const mid = (vMaj + vNext) / 2;
|
||||
const skip = SKIP_AUTO_MINOR_DB.some((s) => Math.abs(mid - s) < 1e-3);
|
||||
if (inRange(mid) && !skip) {
|
||||
const yMin = Math.round(mapY(mid)) + 0.5;
|
||||
const isHighlight = highlightValue !== null && approx(mid, highlightValue);
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawMinor(yMin, isHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const extra of EXTRA_BAR_TICKS_DB) {
|
||||
if (!inRange(extra)) continue;
|
||||
const yExtra = Math.round(mapY(extra)) + 0.5;
|
||||
const isHighlight = highlightValue !== null && approx(extra, highlightValue);
|
||||
if (isHighlight) highlightMatched = true;
|
||||
drawMinor(yExtra, isHighlight);
|
||||
}
|
||||
|
||||
if (highlightValue !== null && inRange(highlightValue) && !highlightMatched) {
|
||||
const y = Math.round(mapY(highlightValue)) + 0.5;
|
||||
drawMajor(y, true);
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function smoothHeader(shared, rawL, rawR, alpha = 0.2) {
|
||||
if (!shared._header) {
|
||||
shared._header = { L: rawL, R: rawR };
|
||||
return shared._header;
|
||||
}
|
||||
shared._header.L += alpha * (rawL - shared._header.L);
|
||||
shared._header.R += alpha * (rawR - shared._header.R);
|
||||
return shared._header;
|
||||
}
|
||||
|
||||
function drawScale(g, colRect, centerX, mapY, CONFIG) {
|
||||
drawHairlineGrid(g, colRect, mapY, VU_TOP_DB, VU_BOTTOM_DB, 1);
|
||||
|
||||
g.save();
|
||||
const prevFont = g.font;
|
||||
g.font = METER_HEADER_FONT;
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
|
||||
for (const step of VINTAGE_DEFLECTION) {
|
||||
const y = mapY(step.db);
|
||||
if (y < colRect.y - 0.5 || y > colRect.y + colRect.h + 0.5) continue;
|
||||
const dbLabel = step.db > 0 ? `+${step.db}` : `${step.db}`;
|
||||
g.fillText(dbLabel, centerX, y + 5);
|
||||
}
|
||||
|
||||
g.font = prevFont;
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function getVuAlignmentTick(CONFIG) {
|
||||
if (!CONFIG || CONFIG.AL_MARKERS_ENABLED === false) return null;
|
||||
return { value: -4, color: WARN_COLOR };
|
||||
}
|
||||
+417
@@ -0,0 +1,417 @@
|
||||
:root {
|
||||
--bg:#08080f; --hud-bg:rgba(10,10,18,.72);
|
||||
--frame:#00e7ff; --grid-major:#1e2a35; --grid-minor:rgba(30,42,53,.55);
|
||||
--label:#8fd3d4; --line:#36bdf8; --warn:#ff3b3b; --ok:#34d399; --mid:#ffe066;
|
||||
}
|
||||
html,body{margin:0;height:100%;background:var(--bg);color:#ddd;font:16px ui-monospace,monospace}
|
||||
#cv{display:block;width:100vw;height:100vh;pointer-events:auto;position:fixed;top:0;left:0;z-index:2;touch-action:none}
|
||||
canvas.spectrogram-layer,
|
||||
canvas.waveform-layer{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:0;
|
||||
height:0;
|
||||
pointer-events:none;
|
||||
z-index:1;
|
||||
}
|
||||
.hud{
|
||||
position:fixed;top:10px;left:10px;z-index:9999;display:flex;gap:10px;align-items:center;pointer-events:auto;
|
||||
background:var(--hud-bg);border:1px solid #2b2f3a;border-radius:10px;padding:8px 10px;backdrop-filter:blur(6px)
|
||||
}
|
||||
.screensaver-active .hud,
|
||||
.screensaver-active #optionsPanelNew {
|
||||
display:none !important;
|
||||
}
|
||||
.screensaver-active #recorderHud,
|
||||
.screensaver-active .rec-processing,
|
||||
.screensaver-active .rec-warning,
|
||||
.screensaver-active .calibration-modal,
|
||||
.screensaver-active .split-popup {
|
||||
display:none !important;
|
||||
}
|
||||
.hud select{accent-color:var(--frame);background:#0b0b12;color:#ddd;border:1px solid #333;border-radius:8px;padding:6px 10px;font:14px ui-monospace,monospace}
|
||||
.hud label{display:flex;gap:6px;align-items:center}
|
||||
.err{position:fixed;left:12px;top:12px;max-width:70vw;color:#fff;background:#7a1b1b;border:1px solid #3b0d0d;border-radius:8px;padding:8px 10px;display:none;z-index:99999;white-space:pre-wrap}
|
||||
|
||||
/* Options-Panel (responsive) */
|
||||
.options { position:fixed; inset:80px 12px 20px 12px; z-index:9000; display:none; background:rgba(10,10,18,.85); border:1px solid #2b2f3a; border-radius:14px; padding:20px; padding-bottom:calc(20px + var(--options-kb-inset, 0px) + var(--options-extra-scroll, 42vh)); overflow:auto; backdrop-filter: blur(8px); }
|
||||
.options h2{margin:0 0 12px 0; color:#cfefff; font:600 18px ui-monospace,monospace}
|
||||
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px}
|
||||
.opt{ display:flex; align-items:center; gap:10px; background:#0c1017; border:1px solid #202633; border-radius:10px; padding:10px; flex-wrap:wrap; }
|
||||
.opt label{min-width:150px; color:#9fc9ff}
|
||||
.opt input[type="range"], .opt select, .opt input[type="number"], .opt input[type="color"]{ accent-color:var(--frame); background:#0b0b12; color:#ddd; border:1px solid #333; border-radius:8px; padding:6px 10px; font:16px ui-monospace,monospace }
|
||||
.opt input[type="color"]{
|
||||
padding:2px;
|
||||
width:56px;
|
||||
height:34px;
|
||||
background:transparent;
|
||||
border:1px solid #333;
|
||||
border-radius:8px;
|
||||
appearance:auto;
|
||||
-webkit-appearance:auto;
|
||||
}
|
||||
.opt input[type="color"]::-webkit-color-swatch-wrapper{
|
||||
padding:0;
|
||||
}
|
||||
.opt input[type="color"]::-webkit-color-swatch{
|
||||
border:none;
|
||||
border-radius:6px;
|
||||
}
|
||||
.opt input[type="color"]::-moz-color-swatch{
|
||||
border:none;
|
||||
border-radius:6px;
|
||||
}
|
||||
#optionsPanelNew .offset-block{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:8px;
|
||||
flex: 1 1 440px;
|
||||
}
|
||||
#optionsPanelNew .offset-row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
width:100%;
|
||||
}
|
||||
#optionsPanelNew .offset-row .ch{
|
||||
min-width:12px;
|
||||
color:#cfefff;
|
||||
}
|
||||
#optionsPanelNew .offset-row input[type="range"]{
|
||||
flex: 1 1 340px;
|
||||
min-width: 340px;
|
||||
}
|
||||
#optionsPanelNew .offset-row .offset-val{
|
||||
min-width:80px;
|
||||
text-align:right;
|
||||
color:#cfefff;
|
||||
}
|
||||
#optionsPanelNew .offset-notes{
|
||||
flex: 1 0 100%;
|
||||
margin-left:160px;
|
||||
max-width: 440px;
|
||||
}
|
||||
#optionsPanelNew .offset-notes small{
|
||||
display:block;
|
||||
}
|
||||
@media (max-width: 520px){
|
||||
#optionsPanelNew .offset-row input[type="range"]{ min-width: 240px; }
|
||||
#optionsPanelNew .offset-notes{ margin-left:0; }
|
||||
}
|
||||
.opt select:disabled,
|
||||
.opt input[type="range"]:disabled,
|
||||
.opt input[type="number"]:disabled,
|
||||
.opt input[type="color"]:disabled,
|
||||
.opt button:disabled{
|
||||
opacity:0.55;
|
||||
cursor:not-allowed;
|
||||
filter:grayscale(0.35);
|
||||
}
|
||||
.opt small{opacity:.75}
|
||||
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
|
||||
.btn { background:#0b0f1a; color:#dff6ff; border:1px solid #284a5a; border-radius:10px; padding:8px 12px; cursor:pointer }
|
||||
.btn:hover{background:#0e1422}
|
||||
.btn-lg{font-size:22px; padding:18px 28px; border-radius:14px;}
|
||||
.btn-danger-border{border-color:#d33;}
|
||||
.btn-active{background:#12301f; border-color:#34d399; color:#eafff1; box-shadow:0 0 0 1px rgba(52,211,153,.3) inset;}
|
||||
.rec-auto-armed{
|
||||
border-color:#ff9f1a;
|
||||
color:#fff4d9;
|
||||
animation: recAutoArmedBlink 0.8s ease-in-out infinite alternate;
|
||||
}
|
||||
.rec-auto-recording{
|
||||
border-color:#d33;
|
||||
background:#3a0d0d;
|
||||
color:#ffeaea;
|
||||
box-shadow:0 0 0 1px rgba(211,51,51,.28) inset;
|
||||
animation:none;
|
||||
}
|
||||
.btn:disabled{
|
||||
opacity:0.45;
|
||||
cursor:not-allowed;
|
||||
filter:grayscale(0.35);
|
||||
}
|
||||
|
||||
.split-popup{
|
||||
position:fixed;
|
||||
inset:0;
|
||||
z-index:9500;
|
||||
display:none;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:rgba(8,8,15,0.55);
|
||||
backdrop-filter:blur(3px);
|
||||
pointer-events:auto;
|
||||
}
|
||||
.split-popup__box{
|
||||
width:min(520px, calc(100vw - 24px));
|
||||
padding:14px 14px 10px;
|
||||
background:rgba(12,14,22,0.95);
|
||||
border:1px solid #284a5a;
|
||||
border-radius:14px;
|
||||
color:#e8f5ff;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,0.35);
|
||||
font-family:ui-monospace,monospace;
|
||||
}
|
||||
.split-popup__head{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.split-popup__row{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:10px;
|
||||
padding:6px 0;
|
||||
}
|
||||
|
||||
#recorderHud{
|
||||
position:fixed;
|
||||
inset:0;
|
||||
z-index:9100;
|
||||
display:none;
|
||||
background:transparent;
|
||||
pointer-events:none;
|
||||
}
|
||||
.rec-floating{
|
||||
position:fixed;
|
||||
pointer-events:auto;
|
||||
}
|
||||
#recorderHud a{color:#9cf;}
|
||||
.rec-list{
|
||||
background:rgba(10,12,18,0.8);
|
||||
border:1px solid #284a5a;
|
||||
border-radius:12px;
|
||||
padding:10px;
|
||||
min-width:220px;
|
||||
max-width:none;
|
||||
overflow-y:auto;
|
||||
color:#cfefff;
|
||||
font:14px ui-monospace,monospace;
|
||||
box-shadow:0 4px 18px rgba(0,0,0,0.25);
|
||||
}
|
||||
.rec-list h4{
|
||||
margin:0 0 6px 0;
|
||||
font:14px ui-monospace,monospace;
|
||||
color:#9fdba0;
|
||||
}
|
||||
.rec-list .rec-item{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
padding:6px 0;
|
||||
border-bottom:1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.rec-list .rec-item:last-child{border-bottom:none;}
|
||||
.rec-list .rec-name{flex:1; word-break:break-word;}
|
||||
.rec-list .btn-compact{
|
||||
padding:6px 10px;
|
||||
font:13px ui-monospace,monospace;
|
||||
border-radius:8px;
|
||||
}
|
||||
.rec-list--external{
|
||||
padding:8px;
|
||||
font:13px ui-monospace,monospace;
|
||||
}
|
||||
.rec-list--external h4{
|
||||
margin:0 0 4px 0;
|
||||
font:13px ui-monospace,monospace;
|
||||
}
|
||||
.rec-list--external .rec-item{
|
||||
gap:8px;
|
||||
padding:4px 0;
|
||||
}
|
||||
.rec-list--external .btn-compact{
|
||||
padding:5px 8px;
|
||||
font:12px ui-monospace,monospace;
|
||||
}
|
||||
.rec-timer{
|
||||
display:block;
|
||||
color:#cfefff;
|
||||
font:600 37px ui-monospace,monospace;
|
||||
text-align:center;
|
||||
}
|
||||
.rec-timer .hund{
|
||||
font-size:18.5px;
|
||||
opacity:0.8;
|
||||
vertical-align:baseline;
|
||||
}
|
||||
|
||||
.rec-label {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:10px;
|
||||
padding:18px 28px;
|
||||
border-radius:14px;
|
||||
background:#0f2c0f;
|
||||
color:#dff6dd;
|
||||
font:22px ui-monospace,monospace;
|
||||
min-width:220px;
|
||||
}
|
||||
.rec-label.active {
|
||||
background:#0f2c0f;
|
||||
}
|
||||
.rec-label.blink {
|
||||
animation: recBlink 0.8s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes recBlink {
|
||||
from { background: #2d0a0a; }
|
||||
to { background: #5c0f0f; }
|
||||
}
|
||||
@keyframes recAutoArmedBlink {
|
||||
from { background:#3a2204; }
|
||||
to { background:#7a4708; }
|
||||
}
|
||||
.rec-processing{
|
||||
position:fixed;
|
||||
inset:0;
|
||||
z-index:9200;
|
||||
display:none;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:rgba(8,8,15,0.55);
|
||||
backdrop-filter:blur(3px);
|
||||
pointer-events:none;
|
||||
}
|
||||
.rec-processing-box{
|
||||
min-width:280px;
|
||||
padding:18px 26px;
|
||||
background:rgba(12,14,22,0.9);
|
||||
border:1px solid #284a5a;
|
||||
border-radius:14px;
|
||||
text-align:center;
|
||||
color:#e8f5ff;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,0.35);
|
||||
}
|
||||
.rec-processing-text{
|
||||
font:600 18px ui-monospace,monospace;
|
||||
margin:10px 0 4px;
|
||||
letter-spacing:0.3px;
|
||||
}
|
||||
.rec-processing-sub{
|
||||
font:14px ui-monospace,monospace;
|
||||
color:#9cb7d1;
|
||||
}
|
||||
.rec-spinner{
|
||||
width:54px;
|
||||
height:54px;
|
||||
border-radius:50%;
|
||||
margin:0 auto;
|
||||
border:4px solid rgba(0,231,255,0.25);
|
||||
border-top-color:#00e7ff;
|
||||
animation: recSpin 1s linear infinite;
|
||||
}
|
||||
@keyframes recSpin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.rec-warning{
|
||||
position:fixed;
|
||||
inset:0;
|
||||
z-index:9300;
|
||||
display:none;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background:rgba(8,8,15,0.65);
|
||||
backdrop-filter:blur(4px);
|
||||
pointer-events:auto;
|
||||
}
|
||||
.rec-warning-box{
|
||||
max-width:460px;
|
||||
padding:18px 22px;
|
||||
background:rgba(12,14,22,0.95);
|
||||
border:1px solid #284a5a;
|
||||
border-radius:14px;
|
||||
color:#e8f5ff;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,0.35);
|
||||
}
|
||||
.rec-warning-box h3{
|
||||
margin:0 0 8px;
|
||||
font:600 18px ui-monospace,monospace;
|
||||
color:#9fdba0;
|
||||
}
|
||||
.rec-warning-box p{
|
||||
margin:0 0 10px;
|
||||
font:14px ui-monospace,monospace;
|
||||
color:#cfefff;
|
||||
line-height:1.5;
|
||||
}
|
||||
.rec-warning-ack{
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
margin:10px 0 14px;
|
||||
color:#cfefff;
|
||||
}
|
||||
.rec-warning-box .btn{
|
||||
width:100%;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.calibration-modal{
|
||||
position:fixed;
|
||||
inset:0;
|
||||
z-index:9400;
|
||||
display:none;
|
||||
align-items:flex-start;
|
||||
justify-content:center;
|
||||
padding:70px 18px 24px;
|
||||
background:rgba(8,8,15,0.7);
|
||||
backdrop-filter:blur(4px);
|
||||
pointer-events:auto;
|
||||
}
|
||||
.calibration-box{
|
||||
width:100%;
|
||||
max-width:700px;
|
||||
max-height:78vh;
|
||||
overflow-y:auto;
|
||||
padding:18px 22px;
|
||||
background:rgba(12,14,22,0.95);
|
||||
border:1px solid #2f4d5d;
|
||||
border-radius:16px;
|
||||
color:#e8f5ff;
|
||||
box-shadow:0 10px 34px rgba(0,0,0,0.4);
|
||||
font-family:ui-monospace,monospace;
|
||||
}
|
||||
.calibration-box h3{
|
||||
margin:0 0 8px;
|
||||
font:600 19px ui-monospace,monospace;
|
||||
color:#c7ffe9;
|
||||
}
|
||||
.calibration-box h4{
|
||||
margin:12px 0 6px;
|
||||
font:600 16px ui-monospace,monospace;
|
||||
color:#9fdba0;
|
||||
}
|
||||
.calibration-box p{
|
||||
margin:0 0 8px;
|
||||
line-height:1.5;
|
||||
font:15px ui-monospace,monospace;
|
||||
color:#dcefff;
|
||||
}
|
||||
.calibration-box .calibration-quote{
|
||||
color:#c9e7ff;
|
||||
font-style:italic;
|
||||
}
|
||||
.calibration-divider{
|
||||
height:1px;
|
||||
margin:10px 0 8px;
|
||||
background:linear-gradient(90deg, transparent 0%, #24424f 15%, #3e5c74 50%, #24424f 85%, transparent 100%);
|
||||
}
|
||||
.calibration-box .btn{
|
||||
width:100%;
|
||||
justify-content:center;
|
||||
margin-top:6px;
|
||||
}
|
||||
|
||||
/* --- Option Sections --- */
|
||||
.opt-head { grid-column: 1 / -1; padding-top: 8px; }
|
||||
.opt-head h3 { margin: 6px 0 2px; color: #c7ffe9; font: 600 16px ui-monospace, monospace; border-bottom: 1px solid #1e2a35; padding-bottom: 6px; }
|
||||
|
||||
#optionsPanelNew summary{font-size:17px;padding:8px 4px;}
|
||||
#optionsPanelNew .opt{font-size:16px;}
|
||||
+1683
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,868 @@
|
||||
// views/classic_needles.js - VU-Meter als klassisches Nadelinstrument
|
||||
// Nutzt die bestehenden VU-Werte (inkl. Offsets/Kalibrierung) und zeichnet
|
||||
// zwei kompakte, horizontale Nadelinstrumente (L/R) mit Slot-Auswahl.
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
|
||||
export const id = 'classic-needles';
|
||||
|
||||
const PANEL_BG = 'rgba(5,5,11,0.78)';
|
||||
const FRAME_STROKE = 'rgba(0,231,255,0.8)';
|
||||
const SCALE_ARC_STROKE = 'rgb(0,0,255)'; // wie Tick-Linien der Balken-Meter
|
||||
const METER_PIVOT_Y_FRAC = 0.70;
|
||||
const METER_RADIUS_FRAC = 0.50;
|
||||
const NEEDLE_CAP_RADIUS = 8;
|
||||
const NEEDLE_SPRING_DAMPING = 0.92; // 1.0 = kritisch gedämpft (kein Überschwingen)
|
||||
const NEEDLE_SPRING_HZ_UP = 6.5; // nur UI-Physik (VU-Ballistik ist bereits im Worklet)
|
||||
const NEEDLE_SPRING_HZ_DOWN = 4.2;
|
||||
const NEEDLE_GOAL_TAU_S = 0.04; // ganz leichtes Smoothing gegen UI-Stufen/Jitter
|
||||
const FIELD_DIVIDER_STROKE = 'rgba(0,231,255,0.4)'; // wie Felder-Trennlinien
|
||||
const FIELD_DIVIDER_DASH = [4, 3];
|
||||
// Spannweite wie klassisches VU-Foto: kein Halbkreis, sondern flacherer Bogen
|
||||
const ANGLE_START = degToRad(200) - Math.PI * 2; // links unten
|
||||
const ANGLE_END = degToRad(340) - Math.PI * 2; // rechts unten (-20°)
|
||||
|
||||
const VU_DEFLECTION = [
|
||||
{ db: -20, frac: 0.000 },
|
||||
{ db: -10, frac: 0.165 },
|
||||
{ db: -7, frac: 0.264 },
|
||||
{ db: -5, frac: 0.352 },
|
||||
{ db: -3, frac: 0.463 },
|
||||
{ db: 0, frac: 0.686 },
|
||||
{ db: +1, frac: 0.779 },
|
||||
{ db: +2, frac: 0.883 },
|
||||
{ db: +3, frac: 1.000 },
|
||||
];
|
||||
|
||||
const DIN_SCALE = [
|
||||
{ db: -50, pos: 0.0205 },
|
||||
{ db: -40, pos: 0.0564 },
|
||||
{ db: -35, pos: 0.0974 },
|
||||
{ db: -30, pos: 0.1538 },
|
||||
{ db: -25, pos: 0.2308 },
|
||||
{ db: -20, pos: 0.3179 },
|
||||
{ db: -15, pos: 0.4359 },
|
||||
{ db: -10, pos: 0.5538 },
|
||||
{ db: -5, pos: 0.7026 },
|
||||
{ db: 0, pos: 0.8513 },
|
||||
{ db: +5, pos: 1.0000 },
|
||||
];
|
||||
|
||||
const TP_PERCENT_SCALE = [
|
||||
{ db: -60, frac: 0.0000 },
|
||||
{ db: -50, frac: 0.0373 },
|
||||
{ db: -40, frac: 0.1429 },
|
||||
{ db: -35, frac: 0.2112 },
|
||||
{ db: -30, frac: 0.2857 },
|
||||
{ db: -25, frac: 0.3851 },
|
||||
{ db: -20, frac: 0.4783 },
|
||||
{ db: -15, frac: 0.6087 },
|
||||
{ db: -10, frac: 0.7391 },
|
||||
{ db: -5, frac: 0.8696 },
|
||||
{ db: 0, frac: 1.0000 },
|
||||
];
|
||||
|
||||
const TP_EXTRA_MINOR_TICKS = [-47, -19, -18, -17, -16, -14, -13, -12, -11, -9, -8, -7, -6, -4, -3, -2, -1];
|
||||
|
||||
const PPM_EBU_MAJOR_TICKS = [-12, -8, -4, 0, +4, +8, +12];
|
||||
const PPM_EBU_MINOR_TICKS = [-10, -6, -2, +2, +6, +9, +10];
|
||||
|
||||
const PPM_DIN_MAJOR_TICKS = [-50, -40, -30, -20, -10, -5, 0, +5];
|
||||
const PPM_DIN_MINOR_TICKS = [
|
||||
{ db: -35 },
|
||||
{ db: -25 },
|
||||
{ db: -21, color: 'warn' },
|
||||
{ db: -15 },
|
||||
{ db: -9 },
|
||||
{ db: -8 },
|
||||
{ db: -7 },
|
||||
{ db: -6 },
|
||||
{ db: -4 },
|
||||
{ db: -3 },
|
||||
{ db: -2 },
|
||||
{ db: -1 },
|
||||
{ db: +1 },
|
||||
{ db: +2 },
|
||||
{ db: +3 },
|
||||
{ db: +4 },
|
||||
];
|
||||
|
||||
export function init() {
|
||||
return {
|
||||
staticLayers: new Map(),
|
||||
smooth: { L: null, R: null },
|
||||
goal: { L: null, R: null },
|
||||
vel: { L: 0, R: 0 },
|
||||
lastTs: (typeof performance !== 'undefined' ? performance.now() : Date.now()),
|
||||
};
|
||||
}
|
||||
export function resize() {}
|
||||
export function destroy(state) {
|
||||
if (state) state.staticLayers = null;
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG, meters, audio } = env;
|
||||
const meterId = resolveNeedleMeterId(env);
|
||||
if (!meterId) {
|
||||
drawCachedStaticLayer(state, g, 'classic-empty', 'empty', rect, (cg) => {
|
||||
cg.fillStyle = PANEL_BG;
|
||||
cg.fillRect(0, 0, rect.w, rect.h);
|
||||
cg.fillStyle = '#bcd';
|
||||
cg.textAlign = 'left';
|
||||
cg.font = 'bold 16px ui-monospace, monospace';
|
||||
cg.fillText('Classic Needles', 12, 44);
|
||||
cg.fillStyle = '#9aa';
|
||||
cg.font = '14px ui-monospace, monospace';
|
||||
cg.fillText('Slot leer — wähle ein Meter im HUD.', 12, 66);
|
||||
});
|
||||
return;
|
||||
}
|
||||
const scale = getNeedleScaleDescriptor(meterId, CONFIG);
|
||||
const meterState = meters?.getState?.(meterId) || null;
|
||||
const raw = readMeterDisplayLR(meterId, meterState, CONFIG, scale, audio);
|
||||
const targets = { L: scale.valueToNorm(raw.L), R: scale.valueToNorm(raw.R) };
|
||||
const now = (typeof performance !== 'undefined' ? performance.now() : Date.now());
|
||||
smoothNeedle(state, targets, now);
|
||||
// Box-Abmessungen an den Real-Time-Analyzer anlehnen (gleiche Offsets)
|
||||
const BOX_LEFT = 0;
|
||||
const BOX_TOP = Number.isFinite(env?.topInset) ? Number(env.topInset) : 70;
|
||||
const BOX_RIGHT = 0;
|
||||
const BOX_BOTTOM = 0;
|
||||
const outerRect = {
|
||||
x: rect.x + BOX_LEFT,
|
||||
y: rect.y + BOX_TOP,
|
||||
w: Math.max(140, rect.w - BOX_LEFT - BOX_RIGHT),
|
||||
h: Math.max(140, rect.h - BOX_TOP - BOX_BOTTOM),
|
||||
};
|
||||
const INNER_INSET_X = Math.round(Math.min(140, outerRect.w * 0.08));
|
||||
const innerRect = {
|
||||
x: outerRect.x + INNER_INSET_X,
|
||||
y: outerRect.y,
|
||||
w: Math.max(140, outerRect.w - INNER_INSET_X * 2),
|
||||
h: outerRect.h,
|
||||
};
|
||||
const innerGap = Math.max(56, innerRect.w * 0.12);
|
||||
const availableW = Math.max(100, innerRect.w - innerGap);
|
||||
const meterW = availableW / 2;
|
||||
const meterH = outerRect.h;
|
||||
const baseY = outerRect.y;
|
||||
const decorMetrics = createDecorMetrics(meterW, innerGap);
|
||||
const gapCenterX = innerRect.x + meterW + innerGap / 2;
|
||||
const leftBoxClamp = decorMetrics.ownBounds
|
||||
? {
|
||||
x: outerRect.x,
|
||||
y: outerRect.y,
|
||||
w: Math.max(0, Math.floor(gapCenterX - outerRect.x)),
|
||||
h: outerRect.h,
|
||||
}
|
||||
: outerRect;
|
||||
const rightBoxClamp = decorMetrics.ownBounds
|
||||
? {
|
||||
x: Math.ceil(gapCenterX),
|
||||
y: outerRect.y,
|
||||
w: Math.max(0, (outerRect.x + outerRect.w) - Math.ceil(gapCenterX)),
|
||||
h: outerRect.h,
|
||||
}
|
||||
: outerRect;
|
||||
|
||||
const metersRects = [
|
||||
{ x: innerRect.x, y: baseY, w: meterW, h: meterH, label: 'L', norm: state.smooth.L, raw: raw.L, boxClamp: leftBoxClamp },
|
||||
{ x: innerRect.x + meterW + innerGap, y: baseY, w: meterW, h: meterH, label: 'R', norm: state.smooth.R, raw: raw.R, boxClamp: rightBoxClamp },
|
||||
];
|
||||
|
||||
drawCachedStaticLayer(
|
||||
state,
|
||||
g,
|
||||
'classic-shell',
|
||||
[
|
||||
meterId,
|
||||
rect.w,
|
||||
rect.h,
|
||||
outerRect.x,
|
||||
outerRect.y,
|
||||
outerRect.w,
|
||||
outerRect.h,
|
||||
innerRect.x,
|
||||
innerRect.w,
|
||||
innerGap,
|
||||
scale.kind,
|
||||
scale.bottom,
|
||||
scale.top,
|
||||
scale.redStart,
|
||||
getFooterText(meterId, CONFIG),
|
||||
JSON.stringify(scale.majorTicks || []),
|
||||
JSON.stringify(scale.minorTicks || []),
|
||||
].join('|'),
|
||||
rect,
|
||||
(cg) => {
|
||||
cg.fillStyle = PANEL_BG;
|
||||
cg.fillRect(0, 0, rect.w, rect.h);
|
||||
cg.save();
|
||||
cg.translate(-rect.x, -rect.y);
|
||||
cg.strokeStyle = FRAME_STROKE;
|
||||
cg.lineWidth = 2;
|
||||
cg.strokeRect(outerRect.x, outerRect.y, outerRect.w, outerRect.h);
|
||||
metersRects.forEach((m) => {
|
||||
drawClassicMeter(cg, m, scale, decorMetrics);
|
||||
drawMeterBox(cg, m, m.boxClamp || outerRect, decorMetrics);
|
||||
drawRefLabel(cg, m, meterId, CONFIG, decorMetrics);
|
||||
drawNeedleCap(cg, m);
|
||||
});
|
||||
cg.restore();
|
||||
},
|
||||
);
|
||||
|
||||
metersRects.forEach((m) => {
|
||||
drawNeedle(g, m, m.norm, getNeedleColor(m.norm, scale));
|
||||
});
|
||||
}
|
||||
|
||||
function createDecorMetrics(meterW, innerGap) {
|
||||
const widthT = clamp((meterW - 150) / 170, 0, 1);
|
||||
const gapT = clamp((innerGap - 56) / 36, 0, 1);
|
||||
const t = Math.min(widthT, gapT);
|
||||
return {
|
||||
ownBounds: meterW < 300 || innerGap < 72,
|
||||
refFont: roundLerp(10, 12, t),
|
||||
refOffsetY: roundLerp(7, 10, t),
|
||||
boxOuterExtra: roundLerp(30, 48, t),
|
||||
boxPadX: roundLerp(4, 10, t),
|
||||
boxPadTop: roundLerp(6, 10, t),
|
||||
boxPadBottom: roundLerp(10, 16, t),
|
||||
channelFont: roundLerp(18, 26, t),
|
||||
channelPad: roundLerp(5, 8, t),
|
||||
majorFont: roundLerp(9, 13, t),
|
||||
majorTickWarn: roundLerp(11, 16, t),
|
||||
majorTickNormal: roundLerp(9, 14, t),
|
||||
majorLabelOffset: roundLerp(14, 20, t),
|
||||
unitFont: roundLerp(9, 12, t),
|
||||
unitAngleOffset: lerp(0.10, 0.16, t),
|
||||
unitOffset: roundLerp(24, 34, t),
|
||||
pctFont: roundLerp(10, 16, t),
|
||||
pctInset: roundLerp(30, 48, t),
|
||||
pct100YOffset: roundLerp(5, 10, t),
|
||||
pctSignFont: roundLerp(11, 18, t),
|
||||
pctSignOffsetX: roundLerp(10, 18, t),
|
||||
pctSignOffsetY: roundLerp(14, 28, t),
|
||||
};
|
||||
}
|
||||
|
||||
function drawRefLabel(g, rect, meterId, CONFIG, metrics) {
|
||||
const modeText = getFooterText(meterId, CONFIG);
|
||||
const refFont = metrics?.refFont ?? 12;
|
||||
const refOffsetY = metrics?.refOffsetY ?? 10;
|
||||
g.save();
|
||||
g.fillStyle = 'rgba(207,233,255,0.7)';
|
||||
g.font = `${refFont}px ui-monospace, monospace`;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'alphabetic';
|
||||
g.fillText(modeText, rect.x + rect.w / 2, rect.y + rect.h - refOffsetY);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawMeterBox(g, rect, clampRect, metrics) {
|
||||
const cx = rect.x + rect.w / 2;
|
||||
const cy = rect.y + rect.h * METER_PIVOT_Y_FRAC;
|
||||
const radius = Math.min(rect.w, rect.h * 1.3) * METER_RADIUS_FRAC;
|
||||
|
||||
// Include labels (+20) and "- dB" (+34) plus some safety margin
|
||||
const outerR = radius + (metrics?.boxOuterExtra ?? 48);
|
||||
const xSpan = Math.max(Math.abs(Math.cos(ANGLE_START)), Math.abs(Math.cos(ANGLE_END))) * outerR;
|
||||
|
||||
const padX = metrics?.boxPadX ?? 10;
|
||||
const padTop = metrics?.boxPadTop ?? 10;
|
||||
const padBottom = metrics?.boxPadBottom ?? 16;
|
||||
|
||||
let x = cx - xSpan - padX;
|
||||
let y = cy - outerR - padTop;
|
||||
let w = (xSpan + padX) * 2;
|
||||
let h = (cy + NEEDLE_CAP_RADIUS + padBottom) - y;
|
||||
|
||||
const clampSource = clampRect || rect;
|
||||
|
||||
// Clamp to the available panel area. In compact layouts keep each box inside its own half.
|
||||
const minX = (clampSource?.x ?? rect.x) + 2;
|
||||
const minY = (clampSource?.y ?? rect.y) + 2;
|
||||
const maxX = (clampSource?.x ?? rect.x) + (clampSource?.w ?? rect.w) - 2;
|
||||
const maxY = (clampSource?.y ?? rect.y) + (clampSource?.h ?? rect.h) - 2;
|
||||
if (x < minX) { w -= (minX - x); x = minX; }
|
||||
if (y < minY) { h -= (minY - y); y = minY; }
|
||||
if (x + w > maxX) w = maxX - x;
|
||||
if (y + h > maxY) h = maxY - y;
|
||||
|
||||
if (w <= 2 || h <= 2) return;
|
||||
|
||||
g.save();
|
||||
g.strokeStyle = FIELD_DIVIDER_STROKE;
|
||||
g.lineWidth = 1;
|
||||
g.setLineDash(FIELD_DIVIDER_DASH);
|
||||
g.strokeRect(Math.round(x) + 0.5, Math.round(y) + 0.5, Math.round(w) - 1, Math.round(h) - 1);
|
||||
g.setLineDash([]);
|
||||
|
||||
const chan = rect?.label;
|
||||
if (chan === 'L' || chan === 'R') {
|
||||
g.fillStyle = 'rgba(207,233,255,0.7)';
|
||||
g.font = `bold ${metrics?.channelFont ?? 26}px ui-monospace, monospace`;
|
||||
g.textBaseline = 'top';
|
||||
const pad = metrics?.channelPad ?? 8;
|
||||
if (chan === 'L') {
|
||||
g.textAlign = 'left';
|
||||
g.fillText('L', x + pad, y + pad - 2);
|
||||
} else {
|
||||
g.textAlign = 'right';
|
||||
g.fillText('R', x + w - pad, y + pad - 2);
|
||||
}
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function getNeedleColor(norm, scale) {
|
||||
const warn = scale?.warnColor || '#ff3b3b';
|
||||
const normal = scale?.normalColor || '#ffe066';
|
||||
if (Number.isFinite(scale?.redStart) && typeof scale?.valueToNorm === 'function') {
|
||||
const redNorm = scale.valueToNorm(scale.redStart);
|
||||
if (Number.isFinite(redNorm) && Number.isFinite(norm) && norm >= redNorm) return warn;
|
||||
}
|
||||
return normal;
|
||||
}
|
||||
|
||||
function resolveNeedleMeterId(env) {
|
||||
const slotList = env?.slots?.(id);
|
||||
const selected = Array.isArray(slotList) ? slotList[0] : null;
|
||||
if (selected === 'none') return null;
|
||||
return selected || 'vu';
|
||||
}
|
||||
|
||||
function getFooterText(meterId, CONFIG) {
|
||||
if (meterId === 'vu') {
|
||||
return Number.isFinite(CONFIG?.VU_DBFS_REF) ? `Ref ${CONFIG.VU_DBFS_REF.toFixed(1)} dBFS` : 'VU';
|
||||
}
|
||||
if (meterId === 'ppm-ebu') return 'PPM (EBU)';
|
||||
if (meterId === 'ppm-din') return 'PPM (DIN)';
|
||||
if (meterId === 'tp') return 'dBTP';
|
||||
if (meterId === 'rms') {
|
||||
const isDBU = (String(CONFIG?.RMS_MODE ?? 'dbfs').toLowerCase() === 'dbu');
|
||||
return isDBU ? 'RMS (dBu)' : 'RMS (dBFS RMS)';
|
||||
}
|
||||
if (meterId === 'lufs') return 'LUFS (M)';
|
||||
return String(meterId || 'meter');
|
||||
}
|
||||
|
||||
function getNeedleScaleDescriptor(meterId, CONFIG) {
|
||||
if (meterId === 'ppm-ebu') {
|
||||
const bottom = Number.isFinite(CONFIG?.PPM_EBU_BOTTOM) ? CONFIG.PPM_EBU_BOTTOM : -14;
|
||||
const top = Number.isFinite(CONFIG?.PPM_EBU_TOP) ? CONFIG.PPM_EBU_TOP : +14;
|
||||
const redStart = Number.isFinite(CONFIG?.PPM_EBU_RED_START) ? CONFIG.PPM_EBU_RED_START : +9;
|
||||
const warnColor = CONFIG?.PPM_EBU_COLOR_WARN || '#ff3b3b';
|
||||
const normalColor = CONFIG?.PPM_EBU_COLOR_NORMAL || '#ffe066';
|
||||
const valueToNorm = (v) => {
|
||||
const clamped = clamp(v, bottom, top);
|
||||
return clamp01((clamped - bottom) / (top - bottom || 1));
|
||||
};
|
||||
return {
|
||||
id: meterId,
|
||||
kind: 'ppm-ebu',
|
||||
bottom,
|
||||
top,
|
||||
redStart,
|
||||
warnColor,
|
||||
normalColor,
|
||||
unitLabel: 'dB',
|
||||
majorTicks: PPM_EBU_MAJOR_TICKS,
|
||||
minorTicks: PPM_EBU_MINOR_TICKS,
|
||||
formatMajor: (db) => (db === 0 ? 'TEST' : (db > 0 ? `+${db}` : `${db}`)),
|
||||
valueToNorm,
|
||||
};
|
||||
}
|
||||
|
||||
if (meterId === 'ppm-din') {
|
||||
const bottom = Number.isFinite(CONFIG?.PPM_DIN_BOTTOM) ? CONFIG.PPM_DIN_BOTTOM : -50;
|
||||
const top = Number.isFinite(CONFIG?.PPM_DIN_TOP) ? CONFIG.PPM_DIN_TOP : +5;
|
||||
const redStart = Number.isFinite(CONFIG?.PPM_DIN_RED_START) ? CONFIG.PPM_DIN_RED_START : 0;
|
||||
const warnColor = CONFIG?.PPM_DIN_COLOR_WARN || '#ff3b3b';
|
||||
const normalColor = CONFIG?.PPM_DIN_COLOR_NORMAL || '#ffe066';
|
||||
const mapRaw = (db) => {
|
||||
const clamped = clamp(db, bottom, top);
|
||||
let prev = DIN_SCALE[0];
|
||||
for (let i = 1; i < DIN_SCALE.length; i++) {
|
||||
const curr = DIN_SCALE[i];
|
||||
if (clamped <= curr.db) {
|
||||
const span = curr.db - prev.db || 1;
|
||||
const t = (clamped - prev.db) / span;
|
||||
return prev.pos + t * (curr.pos - prev.pos);
|
||||
}
|
||||
prev = curr;
|
||||
}
|
||||
return DIN_SCALE[DIN_SCALE.length - 1].pos;
|
||||
};
|
||||
const normBottom = mapRaw(bottom);
|
||||
const normSpan = Math.max(1e-6, 1 - normBottom);
|
||||
const valueToNorm = (v) => {
|
||||
const n = mapRaw(v);
|
||||
return clamp01((n - normBottom) / normSpan);
|
||||
};
|
||||
const showAl = CONFIG?.AL_MARKERS_ENABLED !== false;
|
||||
const dynWarnDb = showAl ? ((CONFIG?.PPM_DIN_MODE === 'al_minus6') ? -6 : -9) : null;
|
||||
const minors = PPM_DIN_MINOR_TICKS.slice().map((t) => ({
|
||||
value: t.db,
|
||||
color: (t.color === 'warn' || (dynWarnDb !== null && t.db === dynWarnDb)) ? 'warn' : null,
|
||||
}));
|
||||
return {
|
||||
id: meterId,
|
||||
kind: 'ppm-din',
|
||||
bottom,
|
||||
top,
|
||||
redStart,
|
||||
warnColor,
|
||||
normalColor,
|
||||
unitLabel: 'dB',
|
||||
majorTicks: PPM_DIN_MAJOR_TICKS,
|
||||
minorTicks: minors,
|
||||
formatMajor: (db) => (db > 0 ? `+${db}` : `${db}`),
|
||||
valueToNorm,
|
||||
};
|
||||
}
|
||||
|
||||
if (meterId === 'tp') {
|
||||
const bottom = -60;
|
||||
const top = 0;
|
||||
const redStart = Number.isFinite(CONFIG?.TP_RED_START) ? CONFIG.TP_RED_START : -1;
|
||||
const warnColor = CONFIG?.TP_COLOR_WARN || '#ff3b3b';
|
||||
const normalColor = CONFIG?.TP_COLOR_NORMAL || '#ffe066';
|
||||
const mapRaw = (db) => {
|
||||
const clamped = clamp(db, bottom, top);
|
||||
if (clamped <= TP_PERCENT_SCALE[0].db) return TP_PERCENT_SCALE[0].frac;
|
||||
if (clamped >= TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].db) return TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].frac;
|
||||
for (let i = 1; i < TP_PERCENT_SCALE.length; i++) {
|
||||
const prev = TP_PERCENT_SCALE[i - 1];
|
||||
const curr = TP_PERCENT_SCALE[i];
|
||||
if (clamped <= curr.db) {
|
||||
const span = curr.db - prev.db || 1;
|
||||
const t = (clamped - prev.db) / span;
|
||||
return prev.frac + t * (curr.frac - prev.frac);
|
||||
}
|
||||
}
|
||||
return TP_PERCENT_SCALE[TP_PERCENT_SCALE.length - 1].frac;
|
||||
};
|
||||
const valueToNorm = (v) => clamp01(mapRaw(v));
|
||||
return {
|
||||
id: meterId,
|
||||
kind: 'tp',
|
||||
bottom,
|
||||
top,
|
||||
redStart,
|
||||
warnColor,
|
||||
normalColor,
|
||||
unitLabel: 'dBTP',
|
||||
majorTicks: TP_PERCENT_SCALE.map((p) => p.db),
|
||||
minorTicks: TP_EXTRA_MINOR_TICKS,
|
||||
formatMajor: (db) => {
|
||||
const v = Math.abs(db);
|
||||
return Number.isInteger(v) ? String(v) : v.toFixed(1);
|
||||
},
|
||||
valueToNorm,
|
||||
};
|
||||
}
|
||||
|
||||
if (meterId === 'rms') {
|
||||
const isDBU = (String(CONFIG?.RMS_MODE ?? 'dbfs').toLowerCase() === 'dbu');
|
||||
const bottom = -60;
|
||||
const top = isDBU ? +24 : 0;
|
||||
const redStart = Number.isFinite(CONFIG?.RMS_RED_START) ? CONFIG.RMS_RED_START : (isDBU ? +20 : 0);
|
||||
const warnColor = CONFIG?.RMS_COLOR_WARN || '#ff3b3b';
|
||||
const normalColor = CONFIG?.RMS_COLOR_NORMAL || '#34d399';
|
||||
const valueToNorm = (db) => {
|
||||
const v = clamp(db, bottom, top);
|
||||
if (!isDBU) return clamp01((v - bottom) / (top - bottom || 1));
|
||||
|
||||
if (v <= -20) {
|
||||
const t = (v + 60) / 40;
|
||||
return clamp01(Math.pow(t, 1.6) * 0.45);
|
||||
}
|
||||
if (v <= 0) {
|
||||
const t = (v + 20) / 20;
|
||||
return clamp01(0.45 + t * 0.25);
|
||||
}
|
||||
if (v <= 20) {
|
||||
const t = v / 20;
|
||||
return clamp01(0.70 + t * 0.25);
|
||||
}
|
||||
if (v <= 24) {
|
||||
const t = (v - 20) / 4;
|
||||
return clamp01(0.95 + t * 0.05);
|
||||
}
|
||||
return 1;
|
||||
};
|
||||
const majors = isDBU
|
||||
? [24, 20, 10, 0, -10, -20, -30, -40, -50, -60]
|
||||
: [0, -6, -12, -18, -24, -30, -40, -60];
|
||||
const minors = isDBU ? [] : [-3, -9, -15, -21, -27, -33, -36, -42, -48, -54];
|
||||
return {
|
||||
id: meterId,
|
||||
kind: 'rms',
|
||||
bottom,
|
||||
top,
|
||||
redStart,
|
||||
warnColor,
|
||||
normalColor,
|
||||
unitLabel: isDBU ? 'dBu' : 'dBFS',
|
||||
majorTicks: majors,
|
||||
minorTicks: minors,
|
||||
formatMajor: (v) => (v > 0 ? `+${v}` : `${v}`),
|
||||
valueToNorm,
|
||||
rmsMode: isDBU ? 'dbu' : 'dbfs',
|
||||
};
|
||||
}
|
||||
|
||||
if (meterId === 'lufs') {
|
||||
const bottom = -50;
|
||||
const top = -5;
|
||||
const redStart = Number.isFinite(CONFIG?.LUFS_RED_START)
|
||||
? CONFIG.LUFS_RED_START
|
||||
: (Number.isFinite(CONFIG?.LUFS_YELLOW_START) ? CONFIG.LUFS_YELLOW_START : -2);
|
||||
const warnColor = CONFIG?.LUFS_COLOR_RED || '#ff3b3b';
|
||||
const normalColor = CONFIG?.LUFS_COLOR_YELLOW || '#ffe066';
|
||||
const valueToNorm = (v) => {
|
||||
const clamped = clamp(v, bottom, top);
|
||||
return clamp01((clamped - bottom) / (top - bottom || 1));
|
||||
};
|
||||
return {
|
||||
id: meterId,
|
||||
kind: 'lufs',
|
||||
bottom,
|
||||
top,
|
||||
redStart,
|
||||
warnColor,
|
||||
normalColor,
|
||||
unitLabel: 'LUFS',
|
||||
majorTicks: [-50, -40, -30, -23, -18, -10, -5],
|
||||
minorTicks: [-45, -35, -25, -20, -15],
|
||||
formatMajor: (v) => `${v}`,
|
||||
valueToNorm,
|
||||
};
|
||||
}
|
||||
|
||||
// Default: VU (Classic-Needles Look)
|
||||
{
|
||||
const bottom = -20;
|
||||
const top = +3;
|
||||
const redStart = Number.isFinite(CONFIG?.VU_RED_START) ? CONFIG.VU_RED_START : 0;
|
||||
const warnColor = CONFIG?.VU_COLOR_WARN || '#ff3b3b';
|
||||
const normalColor = CONFIG?.VU_COLOR_NORMAL || '#ffe066';
|
||||
const mapRaw = (dB) => {
|
||||
const db = clamp(dB, bottom, top);
|
||||
const table = VU_DEFLECTION;
|
||||
if (db <= table[0].db) return table[0].frac;
|
||||
if (db >= table[table.length - 1].db) return table[table.length - 1].frac;
|
||||
for (let i = 1; i < table.length; i++) {
|
||||
const prev = table[i - 1];
|
||||
const curr = table[i];
|
||||
if (db <= curr.db) {
|
||||
const span = curr.db - prev.db || 1;
|
||||
const t = (db - prev.db) / span;
|
||||
return prev.frac + t * (curr.frac - prev.frac);
|
||||
}
|
||||
}
|
||||
return table[table.length - 1].frac;
|
||||
};
|
||||
const valueToNorm = (v) => clamp01(mapRaw(v));
|
||||
return {
|
||||
id: 'vu',
|
||||
kind: 'vu',
|
||||
bottom,
|
||||
top,
|
||||
redStart,
|
||||
warnColor,
|
||||
normalColor,
|
||||
unitLabel: '- dB',
|
||||
majorTicks: [-20, -10, -7, -5, -3, -1, 0, 1, 2, 3],
|
||||
minorTicks: [-15, -12, -9, -8, -6, -4, -2],
|
||||
formatMajor: (db) => {
|
||||
if (db < 0) return String(Math.abs(db));
|
||||
if (db === 3) return '*';
|
||||
return String(db);
|
||||
},
|
||||
valueToNorm,
|
||||
vuPercentMarks: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function readMeterDisplayLR(meterId, shared, CONFIG, scale, audio) {
|
||||
const fallback = () => scale?.bottom ?? -60;
|
||||
|
||||
if (meterId === 'lufs') {
|
||||
const v = Number.isFinite(shared?.momentary) ? shared.momentary : fallback();
|
||||
return { L: v, R: v };
|
||||
}
|
||||
|
||||
const hasLR = Number.isFinite(shared?.values?.L) || Number.isFinite(shared?.values?.R);
|
||||
if (!shared || !hasLR) return { L: fallback(), R: fallback() };
|
||||
|
||||
let rawL = Number.isFinite(shared.values.L) ? shared.values.L : fallback();
|
||||
let rawR = Number.isFinite(shared.values.R) ? shared.values.R : fallback();
|
||||
|
||||
if (meterId === 'vu') {
|
||||
const effOff = Number.isFinite(CONFIG?.VU_OFFSET_DB) ? CONFIG.VU_OFFSET_DB : 0;
|
||||
const offCorr = effOff - (shared.offset || 0);
|
||||
rawL += offCorr;
|
||||
rawR += offCorr;
|
||||
} else if (meterId === 'tp') {
|
||||
const effOff = Number.isFinite(CONFIG?.TP_OFFSET_DB) ? CONFIG.TP_OFFSET_DB : 0;
|
||||
const offCorr = effOff - (shared.offset || 0);
|
||||
rawL += offCorr;
|
||||
rawR += offCorr;
|
||||
} else if (meterId === 'ppm-ebu') {
|
||||
const effOff = Number.isFinite(CONFIG?.PPM_EBU_OFFSET) ? CONFIG.PPM_EBU_OFFSET : 0;
|
||||
const offCorr = effOff - (shared.offset || 0);
|
||||
rawL += offCorr;
|
||||
rawR += offCorr;
|
||||
} else if (meterId === 'ppm-din') {
|
||||
const baseMode = (CONFIG?.PPM_DIN_MODE === 'al_minus6') ? -6 : -9;
|
||||
const effOff = baseMode + (Number(CONFIG?.PPM_DIN_TRIM_DB) || 0);
|
||||
const offCorr = effOff - (shared.offset || 0);
|
||||
rawL += offCorr;
|
||||
rawR += offCorr;
|
||||
} else if (meterId === 'rms') {
|
||||
const effOff = Number.isFinite(CONFIG?.RMS_OFFSET_DB) ? CONFIG.RMS_OFFSET_DB : 0;
|
||||
const offCorr = effOff - (shared.offset || 0);
|
||||
rawL += offCorr;
|
||||
rawR += offCorr;
|
||||
|
||||
const mode = String(CONFIG?.RMS_MODE ?? 'dbfs').toLowerCase();
|
||||
const isDBU = (mode === 'dbu');
|
||||
if (isDBU) {
|
||||
const refDbfs = Number.isFinite(CONFIG?.RMS_REF_DBFS_FOR_REF_DBU) ? CONFIG.RMS_REF_DBFS_FOR_REF_DBU : -18;
|
||||
const refDbu = Number.isFinite(CONFIG?.RMS_REF_DBU) ? CONFIG.RMS_REF_DBU : +4;
|
||||
rawL = (rawL - refDbfs) + refDbu;
|
||||
rawR = (rawR - refDbfs) + refDbu;
|
||||
}
|
||||
}
|
||||
|
||||
return { L: rawL, R: rawR };
|
||||
}
|
||||
|
||||
function smoothNeedle(state, target, now) {
|
||||
const prevTs = state.lastTs || now;
|
||||
const dtFull = Math.max(1e-3, Math.min(0.20, (now - prevTs) / 1000));
|
||||
const maxStep = 1 / 120;
|
||||
const steps = Math.max(1, Math.ceil(dtFull / maxStep));
|
||||
const dt = dtFull / steps;
|
||||
|
||||
if (!state.vel) state.vel = { L: 0, R: 0 };
|
||||
if (!state.goal) state.goal = { L: null, R: null };
|
||||
|
||||
const step = (ch) => {
|
||||
const goal = target[ch];
|
||||
if (!Number.isFinite(goal)) return;
|
||||
|
||||
if (!Number.isFinite(state.smooth[ch])) {
|
||||
state.smooth[ch] = goal;
|
||||
state.vel[ch] = 0;
|
||||
state.goal[ch] = goal;
|
||||
return;
|
||||
}
|
||||
|
||||
let x = state.smooth[ch];
|
||||
let v = Number.isFinite(state.vel[ch]) ? state.vel[ch] : 0;
|
||||
let g = Number.isFinite(state.goal[ch]) ? state.goal[ch] : goal;
|
||||
|
||||
for (let i = 0; i < steps; i++) {
|
||||
const alphaGoal = 1 - Math.exp(-dt / NEEDLE_GOAL_TAU_S);
|
||||
g = g + alphaGoal * (goal - g);
|
||||
|
||||
const rising = g > x;
|
||||
const hz = rising ? NEEDLE_SPRING_HZ_UP : NEEDLE_SPRING_HZ_DOWN;
|
||||
const omega = 2 * Math.PI * hz;
|
||||
const zeta = NEEDLE_SPRING_DAMPING;
|
||||
|
||||
// Gedämpfter Feder-Masse-Dämpfer (semi-implicit Euler): x'' + 2ζω x' + ω²(x-goal)=0
|
||||
const a = (omega * omega) * (g - x) - (2 * zeta * omega) * v;
|
||||
v = v + a * dt;
|
||||
x = x + v * dt;
|
||||
}
|
||||
|
||||
state.goal[ch] = g;
|
||||
state.vel[ch] = v;
|
||||
state.smooth[ch] = x;
|
||||
};
|
||||
|
||||
step('L');
|
||||
step('R');
|
||||
state.lastTs = now;
|
||||
}
|
||||
|
||||
function drawClassicMeter(g, rect, scale, metrics) {
|
||||
const cx = rect.x + rect.w / 2;
|
||||
const cy = rect.y + rect.h * METER_PIVOT_Y_FRAC;
|
||||
const radius = Math.min(rect.w, rect.h * 1.3) * METER_RADIUS_FRAC;
|
||||
drawScale(g, cx, cy, radius, scale, metrics);
|
||||
}
|
||||
|
||||
function drawScale(g, cx, cy, radius, scale, metrics) {
|
||||
const mapValueToAngle = (v) => lerp(ANGLE_START, ANGLE_END, scale.valueToNorm(v));
|
||||
const redStart = scale.redStart;
|
||||
const warnCol = scale.warnColor || '#ff3b3b';
|
||||
const majors = Array.isArray(scale.majorTicks) ? scale.majorTicks : [];
|
||||
const minors = Array.isArray(scale.minorTicks) ? scale.minorTicks : [];
|
||||
|
||||
// Skalenbogen
|
||||
g.save();
|
||||
g.lineWidth = 3;
|
||||
g.strokeStyle = SCALE_ARC_STROKE;
|
||||
g.beginPath();
|
||||
g.arc(cx, cy, radius, ANGLE_START, ANGLE_END);
|
||||
g.stroke();
|
||||
|
||||
// Major ticks + Beschriftung
|
||||
g.font = `bold ${metrics?.majorFont ?? 13}px ui-monospace, monospace`;
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'middle';
|
||||
for (const v of majors) {
|
||||
const ang = mapValueToAngle(v);
|
||||
const inRed = Number.isFinite(redStart) && v >= redStart;
|
||||
const tickCol = inRed ? warnCol : '#cfe9ff';
|
||||
g.lineWidth = inRed ? 2.5 : 2;
|
||||
g.strokeStyle = tickCol;
|
||||
g.fillStyle = tickCol;
|
||||
drawTick(g, cx, cy, radius, ang, inRed ? (metrics?.majorTickWarn ?? 16) : (metrics?.majorTickNormal ?? 14));
|
||||
const labelOffset = metrics?.majorLabelOffset ?? 20;
|
||||
const tx = cx + Math.cos(ang) * (radius + labelOffset);
|
||||
const ty = cy + Math.sin(ang) * (radius + labelOffset);
|
||||
const label = scale.formatMajor ? scale.formatMajor(v) : String(v);
|
||||
g.fillText(label, tx, ty);
|
||||
}
|
||||
|
||||
// Minor dots
|
||||
const dotRad = Math.max(0, radius - 16);
|
||||
const dotR = 2.2;
|
||||
for (const tick of minors) {
|
||||
const v = (typeof tick === 'number') ? tick : tick?.value;
|
||||
if (!Number.isFinite(v)) continue;
|
||||
const isWarn = (typeof tick === 'object' && tick?.color === 'warn');
|
||||
g.fillStyle = isWarn ? warnCol : 'rgba(207,233,255,0.65)';
|
||||
const ang = mapValueToAngle(v);
|
||||
const x = cx + Math.cos(ang) * dotRad;
|
||||
const y = cy + Math.sin(ang) * dotRad;
|
||||
g.beginPath();
|
||||
g.arc(x, y, dotR, 0, Math.PI * 2);
|
||||
g.fill();
|
||||
}
|
||||
|
||||
// Roter Bereich
|
||||
if (Number.isFinite(redStart)) {
|
||||
const redAng = mapValueToAngle(redStart);
|
||||
g.strokeStyle = warnCol;
|
||||
g.lineWidth = 4;
|
||||
g.beginPath();
|
||||
g.arc(cx, cy, radius, redAng, ANGLE_END);
|
||||
g.stroke();
|
||||
}
|
||||
|
||||
// Unit label oben rechts
|
||||
if (scale.unitLabel) {
|
||||
g.fillStyle = '#cfe9ff';
|
||||
g.font = `bold ${metrics?.unitFont ?? 12}px ui-monospace, monospace`;
|
||||
g.textBaseline = 'alphabetic';
|
||||
const dbLabelAng = ANGLE_END - (metrics?.unitAngleOffset ?? 0.16);
|
||||
const unitOffset = metrics?.unitOffset ?? 34;
|
||||
g.fillText(scale.unitLabel, cx + Math.cos(dbLabelAng) * (radius + unitOffset), cy + Math.sin(dbLabelAng) * (radius + unitOffset));
|
||||
}
|
||||
|
||||
// VU-Percent-Scale (wie Foto)
|
||||
if (scale.vuPercentMarks) {
|
||||
g.font = `bold ${metrics?.pctFont ?? 16}px ui-monospace, monospace`;
|
||||
g.fillStyle = 'rgba(207,233,255,0.8)';
|
||||
g.textBaseline = 'middle';
|
||||
const pctR = Math.max(0, radius - (metrics?.pctInset ?? 48));
|
||||
const posAtValue = (v) => {
|
||||
const a = mapValueToAngle(v);
|
||||
return { x: cx + Math.cos(a) * pctR, y: cy + Math.sin(a) * pctR };
|
||||
};
|
||||
const p10 = posAtValue(-20); // 10% ≙ -20 dB
|
||||
const p50 = posAtValue(-6); // 50% ≙ -6 dB
|
||||
const p100 = posAtValue(0); // 100% ≙ 0 dB
|
||||
g.fillText('10', p10.x, p10.y);
|
||||
g.fillText('50', p50.x, p50.y);
|
||||
g.fillText('100', p100.x, p100.y + (metrics?.pct100YOffset ?? 10));
|
||||
g.font = `bold ${metrics?.pctSignFont ?? 18}px ui-monospace, monospace`;
|
||||
g.fillText('%', p100.x + (metrics?.pctSignOffsetX ?? 18), p100.y + (metrics?.pctSignOffsetY ?? 28));
|
||||
}
|
||||
|
||||
// Glaslinie
|
||||
g.strokeStyle = 'rgba(255,255,255,0.07)';
|
||||
g.lineWidth = 8;
|
||||
g.beginPath();
|
||||
g.arc(cx, cy, radius - 12, ANGLE_START + 0.04, ANGLE_END - 0.04);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawNeedle(g, rect, norm, color) {
|
||||
const cx = rect.x + rect.w / 2;
|
||||
const cy = rect.y + rect.h * METER_PIVOT_Y_FRAC;
|
||||
const radius = Math.min(rect.w, rect.h * 1.3) * METER_RADIUS_FRAC;
|
||||
const needleLen = radius * 0.9;
|
||||
|
||||
if (!Number.isFinite(norm)) return;
|
||||
const t = clamp01(norm);
|
||||
const ang = lerp(ANGLE_START, ANGLE_END, t);
|
||||
const tipX = cx + Math.cos(ang) * needleLen;
|
||||
const tipY = cy + Math.sin(ang) * needleLen;
|
||||
const baseX = cx + Math.cos(ang + Math.PI) * (needleLen * 0.08);
|
||||
const baseY = cy + Math.sin(ang + Math.PI) * (needleLen * 0.08);
|
||||
|
||||
g.save();
|
||||
g.strokeStyle = color;
|
||||
g.lineWidth = 3;
|
||||
g.beginPath();
|
||||
g.moveTo(baseX, baseY);
|
||||
g.lineTo(tipX, tipY);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawNeedleCap(g, rect) {
|
||||
const cx = rect.x + rect.w / 2;
|
||||
const cy = rect.y + rect.h * METER_PIVOT_Y_FRAC;
|
||||
const capRadius = NEEDLE_CAP_RADIUS;
|
||||
g.save();
|
||||
const grad = g.createRadialGradient(cx, cy, 2, cx, cy, capRadius * 1.5);
|
||||
grad.addColorStop(0, '#0b111c');
|
||||
grad.addColorStop(1, 'rgba(0,231,255,0.35)');
|
||||
g.fillStyle = grad;
|
||||
g.strokeStyle = '#00e7ff';
|
||||
g.lineWidth = 2;
|
||||
g.beginPath();
|
||||
g.arc(cx, cy, capRadius, 0, Math.PI * 2);
|
||||
g.fill();
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawTick(g, cx, cy, radius, ang, len) {
|
||||
const x1 = cx + Math.cos(ang) * (radius - len);
|
||||
const y1 = cy + Math.sin(ang) * (radius - len);
|
||||
const x2 = cx + Math.cos(ang) * (radius + 2);
|
||||
const y2 = cy + Math.sin(ang) * (radius + 2);
|
||||
g.beginPath();
|
||||
g.moveTo(x1, y1);
|
||||
g.lineTo(x2, y2);
|
||||
g.stroke();
|
||||
}
|
||||
|
||||
function clamp(v, min, max) {
|
||||
return Math.min(max, Math.max(min, v));
|
||||
}
|
||||
function clamp01(v) {
|
||||
return Math.min(1, Math.max(0, v));
|
||||
}
|
||||
function lerp(a, b, t) {
|
||||
return a + (b - a) * t;
|
||||
}
|
||||
function roundLerp(a, b, t) {
|
||||
return Math.round(lerp(a, b, t));
|
||||
}
|
||||
function degToRad(d) {
|
||||
return (d * Math.PI) / 180;
|
||||
}
|
||||
@@ -0,0 +1,449 @@
|
||||
// views/clock.js — Vollbild-Studiosclock mit "Zurück"-Button
|
||||
|
||||
const DOT_FONT = {
|
||||
'0': ['01110','10001','10011','10101','11001','10001','01110'],
|
||||
'1': ['00100','01100','00100','00100','00100','00100','01110'],
|
||||
'2': ['01110','10001','00001','00110','01000','10000','11111'],
|
||||
'3': ['11110','00001','00001','01110','00001','00001','11110'],
|
||||
'4': ['00010','00110','01010','10010','11111','00010','00010'],
|
||||
'5': ['11111','10000','11110','00001','00001','10001','01110'],
|
||||
'6': ['00110','01000','10000','11110','10001','10001','01110'],
|
||||
'7': ['11111','00001','00010','00100','01000','01000','01000'],
|
||||
'8': ['01110','10001','10001','01110','10001','10001','01110'],
|
||||
'9': ['01110','10001','10001','01111','00001','00010','01100'],
|
||||
':': ['0','1','0','0','1','0','0'],
|
||||
'.': ['000','000','000','000','000','000','010'],
|
||||
};
|
||||
const DOT_COLS = DOT_FONT['0'][0].length;
|
||||
const DIN_SCALE = [
|
||||
{ db: -50, pos: 0.0205 },
|
||||
{ db: -40, pos: 0.0564 },
|
||||
{ db: -35, pos: 0.0974 },
|
||||
{ db: -30, pos: 0.1538 },
|
||||
{ db: -25, pos: 0.2308 },
|
||||
{ db: -20, pos: 0.3179 },
|
||||
{ db: -15, pos: 0.4359 },
|
||||
{ db: -10, pos: 0.5538 },
|
||||
{ db: -5, pos: 0.7026 },
|
||||
{ db: 0, pos: 0.8513 },
|
||||
{ db: +5, pos: 1.0000 },
|
||||
];
|
||||
|
||||
export const id = 'clock';
|
||||
|
||||
export function init(env) {
|
||||
const btn = document.createElement('button');
|
||||
btn.textContent = 'Vollbild';
|
||||
btn.className = 'btn btn-compact';
|
||||
Object.assign(btn.style, {
|
||||
position: 'fixed',
|
||||
top: '10px',
|
||||
right: '10px',
|
||||
zIndex: 12000,
|
||||
padding: '4px 8px',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
btn.onclick = () => {
|
||||
toggleFullscreen(env, btn);
|
||||
};
|
||||
document.body.appendChild(btn);
|
||||
return { btn, fullscreen: false };
|
||||
}
|
||||
|
||||
export function destroy(state) {
|
||||
if (state?.btn && state.btn.parentNode) state.btn.parentNode.removeChild(state.btn);
|
||||
}
|
||||
|
||||
export function resize() {}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect } = env;
|
||||
const styleCfg = env.config?.CLOCK_STYLE;
|
||||
if (styleCfg === 'digital') {
|
||||
drawClockDigital(g, rect, env, { showPpm: false });
|
||||
} else if (styleCfg === 'digital-ppm') {
|
||||
drawClockDigital(g, rect, env, { showPpm: true });
|
||||
} else if (styleCfg === 'analog-ppm') {
|
||||
drawClockAnalog(g, rect, env, { showPpm: true });
|
||||
} else {
|
||||
drawClockAnalog(g, rect, env, { showPpm: false });
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFullscreen(env, btn) {
|
||||
const hud = document.querySelector('.hud');
|
||||
const options = document.getElementById('optionsPanelNew');
|
||||
const isFs = btn.dataset.fs === '1';
|
||||
if (isFs) {
|
||||
if (hud) hud.style.display = '';
|
||||
if (options) options.style.display = (env.style === 'options-panel') ? 'block' : 'none';
|
||||
btn.textContent = 'Vollbild';
|
||||
btn.dataset.fs = '0';
|
||||
} else {
|
||||
if (hud) hud.style.display = 'none';
|
||||
if (options) options.style.display = 'none';
|
||||
btn.textContent = '↩';
|
||||
btn.dataset.fs = '1';
|
||||
}
|
||||
}
|
||||
|
||||
function drawClockAnalog(ctx, rect, env, opts = {}) {
|
||||
const showPpm = !!opts.showPpm;
|
||||
const d = new Date();
|
||||
const hours = d.getHours();
|
||||
const mins = d.getMinutes();
|
||||
const secs = d.getSeconds() + d.getMilliseconds() / 1000;
|
||||
const centerX = rect.x + rect.w / 2;
|
||||
const centerY = rect.y + rect.h / 2;
|
||||
const radius = Math.min(rect.w, rect.h) * 0.48;
|
||||
const baseDot = Math.max(1.5, Math.round(radius * 0.03));
|
||||
const ringDot = baseDot * 0.7;
|
||||
const glyphDot = baseDot * 1.3;
|
||||
const glow = env.config?.CLOCK_LED_GLOW !== false;
|
||||
const color = normalizeColor(env.config?.CLOCK_LED_COLOR || '#ff0000');
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(8,8,12,1)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.translate(centerX, centerY);
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const ang = (Math.PI * 2 * i) / 60 - Math.PI / 2;
|
||||
const r = radius * 0.88;
|
||||
const filled = i <= secs;
|
||||
const cx = Math.cos(ang) * r;
|
||||
const cy = Math.sin(ang) * r;
|
||||
if (filled) {
|
||||
drawLed(ctx, cx, cy, ringDot, glow, color);
|
||||
} else {
|
||||
ctx.fillStyle = 'rgba(120,120,120,0.25)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, ringDot, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
if (i % 5 === 0) {
|
||||
const outerR = r + ringDot * 3.2;
|
||||
drawLed(ctx, Math.cos(ang) * outerR, Math.sin(ang) * outerR, ringDot, glow, color);
|
||||
}
|
||||
}
|
||||
|
||||
const timeStr = `${pad2(hours)}:${pad2(mins)}`;
|
||||
const glyphSize = radius * 0.32;
|
||||
const timeSpacing = 0.9; // wie Screensaver
|
||||
const timeY = -(glyphSize * 1.2) / 2; // vertikal zentriert
|
||||
const blinkOn = isSecondPulseActive(d);
|
||||
const extraGaps = [0, 3]; // wie Screensaver (Luft zwischen Blöcken)
|
||||
const metrics = measureTextLayout(timeStr, glyphSize, timeSpacing, extraGaps);
|
||||
const timeX = -(metrics.colonCenter ?? metrics.width / 2); // Doppelpunkt auf Mitte
|
||||
drawDotText(ctx, timeStr, timeX, timeY, glyphSize, glyphDot * 1.1, timeSpacing, blinkOn ? (glyphDot * 1.1) : 0, extraGaps, glow, color);
|
||||
|
||||
if (showPpm) {
|
||||
const ppmWidth = radius * 1.2;
|
||||
const ppmY = glyphSize * 1.0; // etwas mehr Abstand zur Uhrzeit
|
||||
const ppmLevels = {
|
||||
L: mapPpmRawToDin(Number.isFinite(env.audio?.ppmDinL) ? env.audio.ppmDinL : env.audio?.ppmL, env.config),
|
||||
R: mapPpmRawToDin(Number.isFinite(env.audio?.ppmDinR) ? env.audio.ppmDinR : env.audio?.ppmR, env.config),
|
||||
};
|
||||
drawMiniPpm(ctx, { cx: 0, cy: ppmY }, ppmWidth, glyphDot, env, ppmLevels);
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawClockDigital(ctx, rect, env, opts = {}) {
|
||||
const showPpm = !!opts.showPpm;
|
||||
const d = new Date();
|
||||
const hours = d.getHours();
|
||||
const mins = d.getMinutes();
|
||||
const secs = d.getSeconds() + d.getMilliseconds() / 1000;
|
||||
const day = d.getDate();
|
||||
const month = d.getMonth() + 1;
|
||||
const year = d.getFullYear();
|
||||
const centerX = rect.x + rect.w / 2;
|
||||
const centerY = rect.y + rect.h / 2;
|
||||
const radius = Math.min(rect.w, rect.h) * 0.48;
|
||||
const baseDot = Math.max(1.5, Math.round(radius * 0.028));
|
||||
const glyphDot = baseDot * 1.3;
|
||||
const glyphSize = radius * 0.32;
|
||||
const timeSpacing = 1.2;
|
||||
const blinkOn = isSecondPulseActive(d);
|
||||
const extraGaps = [0, 3, 6]; // nach HH, MM, SS
|
||||
const color = normalizeColor(env.config?.CLOCK_LED_COLOR || '#ff0000');
|
||||
const glow = env.config?.CLOCK_LED_GLOW !== false;
|
||||
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(8,8,12,1)';
|
||||
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
|
||||
ctx.translate(centerX, centerY);
|
||||
|
||||
const timeStr = `${pad2(hours)}:${pad2(mins)}:${pad2(Math.floor(secs))}`;
|
||||
const dateStr = `${pad2(day)}.${pad2(month)}.${year}`;
|
||||
const dateSize = glyphSize * 0.7;
|
||||
const dateSpacing = 1.1;
|
||||
const dateGaps = [1, 4];
|
||||
const timeMetrics = measureTextLayout(timeStr, glyphSize, timeSpacing, extraGaps);
|
||||
const dateMetrics = measureTextLayout(dateStr, dateSize, dateSpacing, dateGaps);
|
||||
const lineGap = glyphSize * 0.6;
|
||||
const totalH = glyphSize * 1.2 + dateSize * 1.2 + lineGap;
|
||||
const startY = -totalH / 2;
|
||||
const timeX = -timeMetrics.width / 2;
|
||||
const timeY = startY;
|
||||
drawDotText(ctx, timeStr, timeX, timeY, glyphSize, glyphDot, timeSpacing, blinkOn ? glyphDot : 0, extraGaps, glow, color);
|
||||
|
||||
const dateX = -dateMetrics.width / 2;
|
||||
const dateY = startY + glyphSize * 1.2 + lineGap;
|
||||
drawDotText(ctx, dateStr, dateX, dateY, dateSize, glyphDot * 0.9, dateSpacing, null, dateGaps, glow, color, dateSize * 0.8);
|
||||
|
||||
if (showPpm) {
|
||||
const ppmLevels = {
|
||||
L: mapPpmRawToDin(Number.isFinite(env.audio?.ppmDinL) ? env.audio.ppmDinL : env.audio?.ppmL, env.config),
|
||||
R: mapPpmRawToDin(Number.isFinite(env.audio?.ppmDinR) ? env.audio.ppmDinR : env.audio?.ppmR, env.config),
|
||||
};
|
||||
const ppmWidth = dateMetrics.width;
|
||||
const dateBottom = dateY + dateSize * 1.2;
|
||||
const bottom = rect.h / 2;
|
||||
const ppmY = dateBottom + (bottom - dateBottom) * 0.5;
|
||||
drawMiniPpm(ctx, { cx: 0, cy: ppmY }, ppmWidth, glyphDot, env, ppmLevels);
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawMiniPpm(ctx, pos, width, dotSize, env, levels) {
|
||||
const normalCol = normalizeColor(env.config?.CLOCK_LED_COLOR || '#ff0000');
|
||||
const warnCol = normalizeColor(env.config?.CLOCK_LED_COLOR || '#ff0000');
|
||||
const bgCol = 'rgba(255,255,255,0.08)';
|
||||
// Feste Farbe wie die %‑Beschriftung im PPM-DIN-Meter, etwas dunkler
|
||||
const tickCol = '#ff9922';
|
||||
const minDb = DIN_SCALE[0].db;
|
||||
const maxDb = DIN_SCALE[DIN_SCALE.length - 1].db;
|
||||
const lvl = [
|
||||
Number.isFinite(levels?.L) ? levels.L : mapPpmRawToDin(Number.isFinite(env.audio?.ppmDinL) ? env.audio.ppmDinL : env.audio?.ppmL, env.config),
|
||||
Number.isFinite(levels?.R) ? levels.R : mapPpmRawToDin(Number.isFinite(env.audio?.ppmDinR) ? env.audio.ppmDinR : env.audio?.ppmR, env.config),
|
||||
];
|
||||
const h = Math.max(4, dotSize * 1.4);
|
||||
const gap = h * 0.6;
|
||||
const halfW = width / 2;
|
||||
const ticks = [-50, -40, -30, -20, -10, -5, 0, +5];
|
||||
|
||||
const norm = (db) => {
|
||||
const clamped = Math.min(maxDb, Math.max(minDb, db));
|
||||
for (let i = 0; i < DIN_SCALE.length - 1; i++) {
|
||||
const a = DIN_SCALE[i];
|
||||
const b = DIN_SCALE[i + 1];
|
||||
if (clamped >= a.db && clamped <= b.db) {
|
||||
const t = (clamped - a.db) / (b.db - a.db || 1);
|
||||
return a.pos + t * (b.pos - a.pos);
|
||||
}
|
||||
}
|
||||
return clamped >= maxDb ? DIN_SCALE[DIN_SCALE.length - 1].pos : DIN_SCALE[0].pos;
|
||||
};
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(pos.cx, pos.cy);
|
||||
|
||||
for (let ch = 0; ch < 2; ch++) {
|
||||
const y = (ch === 0 ? - (h + gap) * 0.5 : (h + gap) * 0.5);
|
||||
ctx.fillStyle = bgCol;
|
||||
ctx.fillRect(-halfW, y - h / 2, width, h);
|
||||
|
||||
const val = norm(lvl[ch]);
|
||||
const fillW = width * val;
|
||||
const over = lvl[ch] > 0;
|
||||
const colNorm = normalCol;
|
||||
const colWarn = normalizeColor('#ff5050');
|
||||
const norm0 = norm(0);
|
||||
const warnStartX = -halfW + norm0 * width;
|
||||
|
||||
const ledMode = env.config?.CLOCK_PPM_LED_MODE === true;
|
||||
const drawTicksAndLabels = () => {
|
||||
ctx.fillStyle = tickCol;
|
||||
ctx.font = `${Math.max(5, h * 0.8)}px ui-monospace, monospace`;
|
||||
ticks.forEach((t) => {
|
||||
const x = -halfW + norm(t) * width;
|
||||
const tickLen = (ch === 1) ? h * 1.8 : h * 1.2; // unterer Balken: längere Ticks
|
||||
ctx.fillRect(x - 0.5, y - h * 0.6, 1, tickLen);
|
||||
if (ch === 1) {
|
||||
ctx.textAlign = (t === -50 ? 'right' : 'left');
|
||||
ctx.textBaseline = 'bottom';
|
||||
const labelX = t === -50 ? (x - h * 0.2) : (x + h * 0.2);
|
||||
ctx.fillText(String(t), labelX, y + tickLen + h * 0.15);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (ledMode) {
|
||||
// Nur untere Label (ch==1) zeichnen, keine Tick-Striche über den LEDs
|
||||
if (ch === 1) {
|
||||
ticks.forEach((t) => {
|
||||
const x = -halfW + norm(t) * width;
|
||||
const tickLen = h * 1.8;
|
||||
const labelY = y + tickLen + h * 0.15;
|
||||
// Verbindungsstrich nur unterhalb des Meters (bis zum Meter-Anfang)
|
||||
const lineTop = y + h * 0.5;
|
||||
ctx.fillStyle = tickCol;
|
||||
ctx.fillRect(x - 0.5, lineTop, 1, Math.max(0, labelY - lineTop));
|
||||
ctx.fillStyle = tickCol;
|
||||
ctx.font = `${Math.max(5, h * 0.8)}px ui-monospace, monospace`;
|
||||
ctx.textAlign = (t === -50 ? 'right' : 'left');
|
||||
ctx.textBaseline = 'bottom';
|
||||
const labelX = t === -50 ? (x - h * 0.2) : (x + h * 0.2);
|
||||
ctx.fillText(String(t), labelX, labelY);
|
||||
});
|
||||
}
|
||||
const step = dotSize * 1.6;
|
||||
const dotR = dotSize * 0.55;
|
||||
for (let x = -halfW; x <= -halfW + fillW; x += step) {
|
||||
const isWarn = x >= warnStartX;
|
||||
const col = isWarn ? colWarn : colNorm;
|
||||
drawLed(ctx, x, y, dotR, env.config?.CLOCK_LED_GLOW !== false, col);
|
||||
}
|
||||
} else {
|
||||
// Norm-Anteil
|
||||
const normW = over ? Math.max(0, warnStartX - (-halfW)) : fillW;
|
||||
if (normW > 0) {
|
||||
const glowH = h * 1.1;
|
||||
ctx.fillStyle = colorWithAlpha(colNorm, 0.12);
|
||||
ctx.fillRect(-halfW, y - glowH / 2, normW, glowH);
|
||||
ctx.fillStyle = colorWithAlpha(colNorm, 0.08);
|
||||
ctx.fillRect(-halfW, y - glowH, normW, glowH * 2);
|
||||
ctx.fillStyle = colNorm;
|
||||
ctx.fillRect(-halfW, y - h / 2, normW, h);
|
||||
}
|
||||
|
||||
// Warn-Anteil
|
||||
if (over) {
|
||||
const warnW = Math.max(0, fillW - (warnStartX - (-halfW)));
|
||||
if (warnW > 0) {
|
||||
const glowH = h * 1.1;
|
||||
ctx.fillStyle = colorWithAlpha(colWarn, 0.15);
|
||||
ctx.fillRect(warnStartX, y - glowH / 2, warnW, glowH);
|
||||
ctx.fillStyle = colorWithAlpha(colWarn, 0.1);
|
||||
ctx.fillRect(warnStartX, y - glowH, warnW, glowH * 2);
|
||||
ctx.fillStyle = colWarn;
|
||||
ctx.fillRect(warnStartX, y - h / 2, warnW, h);
|
||||
}
|
||||
}
|
||||
// Ticks/Labels obenauf im Balken-Modus (Farben wie PPM-DIN Prozent-Marks)
|
||||
ctx.save();
|
||||
const tickColOver = colorWithAlpha(tickCol, ledMode ? 1.0 : 0.6);
|
||||
ctx.fillStyle = tickColOver;
|
||||
ctx.font = `${Math.max(5, h * 0.8)}px ui-monospace, monospace`;
|
||||
ticks.forEach((t) => {
|
||||
const x = -halfW + norm(t) * width;
|
||||
const tickLen = (ch === 1) ? h * 1.8 : h * 1.2; // unterer Balken: längere Ticks
|
||||
ctx.fillRect(x - 0.5, y - h * 0.6, 1, tickLen);
|
||||
if (ch === 1) {
|
||||
ctx.textAlign = (t === -50 ? 'right' : 'left');
|
||||
ctx.textBaseline = 'bottom';
|
||||
const labelX = t === -50 ? (x - h * 0.2) : (x + h * 0.2);
|
||||
ctx.fillText(String(t), labelX, y + tickLen + h * 0.15);
|
||||
}
|
||||
});
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function mapPpmRawToDin(raw, cfg) {
|
||||
const minDb = Number.isFinite(cfg?.PPM_DIN_BOTTOM) ? cfg.PPM_DIN_BOTTOM : DIN_SCALE[0].db;
|
||||
const maxDb = Number.isFinite(cfg?.PPM_DIN_TOP) ? cfg.PPM_DIN_TOP : DIN_SCALE[DIN_SCALE.length - 1].db;
|
||||
if (!Number.isFinite(raw)) return minDb;
|
||||
const base = Number.isFinite(cfg?.PPM_REF_DBFS_PEAK_FOR_0_DBU) ? cfg.PPM_REF_DBFS_PEAK_FOR_0_DBU : -15;
|
||||
const effOff = (cfg?.PPM_DIN_MODE === 'al_minus6' ? -6 : -9) + (Number(cfg?.PPM_DIN_TRIM_DB) || 0);
|
||||
const mapped = (raw - base) + effOff;
|
||||
return Math.max(minDb, Math.min(maxDb, mapped));
|
||||
}
|
||||
|
||||
function drawDotText(ctx, text, x, y, glyphSize, dotRadius, spacingFactor = 0.9, colonDotRadiusOverride = null, extraGapIndices = [], glow = true, color = 'rgb(255,0,0)', glyphHeightOverride = null) {
|
||||
let cursorX = x;
|
||||
const glyphW = glyphSize;
|
||||
const glyphH = (glyphHeightOverride || glyphSize) * 1.2;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const ch = text[i];
|
||||
const useDot = (ch === ':' && colonDotRadiusOverride !== null) ? colonDotRadiusOverride : dotRadius;
|
||||
drawDotChar(ctx, ch, cursorX, y, glyphW, glyphH, useDot, glow, color);
|
||||
cursorX += glyphW * spacingFactor;
|
||||
if (extraGapIndices.includes(i)) cursorX += glyphW / DOT_COLS;
|
||||
}
|
||||
}
|
||||
|
||||
function measureTextLayout(text, glyphSize, spacingFactor, extraGapIndices = []) {
|
||||
const glyphW = glyphSize;
|
||||
let cursor = 0;
|
||||
let colonCenter = null;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
if (text[i] === ':') colonCenter = cursor + glyphW * 0.5;
|
||||
cursor += glyphW * spacingFactor;
|
||||
if (extraGapIndices.includes(i)) cursor += glyphW / DOT_COLS;
|
||||
}
|
||||
if (colonCenter === null) colonCenter = cursor / 2;
|
||||
return { width: cursor, colonCenter };
|
||||
}
|
||||
|
||||
function drawDotChar(ctx, ch, x, y, w, h, dotRadius, glow = true, color = 'rgb(255,0,0)') {
|
||||
if (!dotRadius) return;
|
||||
const rows = DOT_FONT[ch] || DOT_FONT['0'];
|
||||
const cols = rows[0].length;
|
||||
const r = Math.min(dotRadius, Math.max(1, Math.min(w, h) * 0.04));
|
||||
const cellW = w / cols;
|
||||
const cellH = h / rows.length;
|
||||
for (let row = 0; row < rows.length; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
if (rows[row][col] === '1') {
|
||||
const cx = x + col * cellW + cellW / 2;
|
||||
const cy = y + row * cellH + cellH / 2;
|
||||
drawLed(ctx, cx, cy, r, glow, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawLed(ctx, cx, cy, r, glow = true, color = '#ff0000') {
|
||||
if (r <= 0) return;
|
||||
if (glow) {
|
||||
const haloR = r * 2.2;
|
||||
const midR = r * 1.4;
|
||||
const col = normalizeColor(color);
|
||||
ctx.fillStyle = colorWithAlpha(col, 0.08);
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, haloR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = colorWithAlpha(col, 0.35);
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, midR, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.fillStyle = normalizeColor(color);
|
||||
ctx.beginPath();
|
||||
ctx.arc(cx, cy, r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function pad2(n) {
|
||||
return n < 10 ? `0${n}` : String(n);
|
||||
}
|
||||
|
||||
function isSecondPulseActive(date, pulseMs = 500) {
|
||||
return date.getMilliseconds() < pulseMs;
|
||||
}
|
||||
|
||||
function normalizeColor(val) {
|
||||
if (typeof val !== 'string' || !val.trim()) return '#ff0000';
|
||||
return val.trim();
|
||||
}
|
||||
|
||||
function colorWithAlpha(color, alpha) {
|
||||
const c = normalizeColor(color);
|
||||
if (/^#([0-9a-fA-F]{6})$/.test(c)) {
|
||||
const r = parseInt(c.slice(1, 3), 16);
|
||||
const g = parseInt(c.slice(3, 5), 16);
|
||||
const b = parseInt(c.slice(5, 7), 16);
|
||||
return `rgba(${r},${g},${b},${alpha})`;
|
||||
}
|
||||
if (/^rgb\(/i.test(c)) {
|
||||
const nums = c.match(/(\d+\.?\d*)/g)?.slice(0, 3) || [255, 0, 0];
|
||||
return `rgba(${nums[0]},${nums[1]},${nums[2]},${alpha})`;
|
||||
}
|
||||
return `rgba(255,0,0,${alpha})`;
|
||||
}
|
||||
@@ -0,0 +1,905 @@
|
||||
// views/goniometer_rtw.js — XY-Goniometer (RTW-Look) + 3-Meter-Panel + Korrelation
|
||||
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, LABEL_COLOR, MID_COLOR, OK_COLOR, PANEL_BG, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
export const id = 'goniometer-rtw';
|
||||
|
||||
const ALIGN_PEAK = Math.pow(10, -15 / 20); // −15 dBFS Peak ≈ −18 dBFS RMS Sine
|
||||
const INNER_MARGIN = 0.05; // 5 % Innenabstand im Scope
|
||||
const MIN_TRACE_POINTS = 128;
|
||||
const MAX_TRACE_POINTS = 4096;
|
||||
const FRAME = { left: 0, top: DEFAULT_TOP_INSET, right: 0, bottom: 0 };
|
||||
const METER_WIDTH = 420;
|
||||
const METER_GAP = 8;
|
||||
const METER_SLOTS = 3;
|
||||
const METER_SLOT_SHRINK = 24;
|
||||
const METER_PAD_TOP = 1;
|
||||
const METER_PAD_BOTTOM = -7;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
const CORR_ATTACK_S = 1.5;
|
||||
const CORR_RELEASE_S = 2.5;
|
||||
const GONIO_GAIN_MIN_DB = -35;
|
||||
const GONIO_GAIN_MAX_DB = 35;
|
||||
const BASE_TARGET = 1.0;
|
||||
const BASE_HEADROOM_DB = 0;
|
||||
const BASE_ZOOM = 1.0;
|
||||
const BASE_GONIO_SCALE = (BASE_TARGET / ALIGN_PEAK) * Math.pow(10, -BASE_HEADROOM_DB / 20) * BASE_ZOOM;
|
||||
const AGC_TARGET_DB = linearToDb(ALIGN_PEAK);
|
||||
const CORR_SILENCE_THRESHOLD_DEFAULT = -75;
|
||||
const CORR_SILENCE_HOLD_MS = 30000;
|
||||
const CORR_SILENCE_DRIFT_MS = 60000;
|
||||
|
||||
function computePanelSlotWidth(canvasWidth, slotCount = METER_SLOTS, slotGap = 12) {
|
||||
const n = Math.max(1, Math.min(METER_SLOTS, slotCount | 0));
|
||||
const avail = Math.max(200, canvasWidth);
|
||||
const totalGap = (n - 1) * Math.max(2, slotGap);
|
||||
const usable = avail - totalGap;
|
||||
return Math.floor(usable / n);
|
||||
}
|
||||
|
||||
export function init() {
|
||||
return {
|
||||
corrDisplayed: 0,
|
||||
corrMeter: 0,
|
||||
corrLastTs: 0,
|
||||
corrLastValid: 0,
|
||||
corrSilenceSince: 0,
|
||||
gateLevel: 1,
|
||||
gateLastTs: 0,
|
||||
agcEnv: 1e-3,
|
||||
agcGainDb: 0,
|
||||
agcLastTs: 0,
|
||||
traceBuffer: new Float32Array(0),
|
||||
lineTrails: [],
|
||||
staticLayerCanvas: null,
|
||||
staticLayerCtx: null,
|
||||
staticLayerKey: '',
|
||||
};
|
||||
}
|
||||
|
||||
export function resize() {}
|
||||
export function destroy() {}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG, audio, utils, meters } = env;
|
||||
const frameNow = getNow();
|
||||
|
||||
const wakeTs = Number.isFinite(env?.screensaverWakeTs) ? Number(env.screensaverWakeTs) : 0;
|
||||
if (wakeTs && state?._lastWakeTs !== wakeTs) {
|
||||
// Nach Screensaver-Wake: Korrelation sauber zurücksetzen, damit kein "alter" Wert (z.B. +1) stehen bleibt.
|
||||
state._lastWakeTs = wakeTs;
|
||||
state.corrDisplayed = 0;
|
||||
state.corrMeter = 0;
|
||||
state.corrLastTs = 0;
|
||||
state.corrLastValid = 0;
|
||||
state.corrSilenceSince = frameNow;
|
||||
}
|
||||
|
||||
const slotsRaw = env.slots?.(id) || ['vu', 'ppm-ebu', 'tp'];
|
||||
const slots = slotsRaw.filter((v) => v && v !== 'none');
|
||||
const topInset = Number.isFinite(env?.topInset) ? Number(env.topInset) : FRAME.top;
|
||||
const layout = computeGoniometerLayout(rect, CONFIG, slots.length, topInset);
|
||||
const settings = resolveScopeSettings(CONFIG);
|
||||
const style = CONFIG.XY_STYLE === 'points' ? 'points' : 'lines';
|
||||
const gate = resolveSilenceGate(env, CONFIG, state);
|
||||
|
||||
drawStaticLayer(g, state, rect, layout, CONFIG, slots.length);
|
||||
|
||||
const xyData = extractXYData(audio);
|
||||
const lastSampleTs = Number.isFinite(env?.audio?.lastSampleTs) ? Number(env.audio.lastSampleTs) : 0;
|
||||
const audioAgeMs = lastSampleTs ? (frameNow - lastSampleTs) : Infinity;
|
||||
const audioFresh = Number.isFinite(audioAgeMs) && audioAgeMs >= 0 && audioAgeMs <= 250;
|
||||
const xyReady = xyData.ready && audioFresh;
|
||||
|
||||
const agc = (CONFIG.GONIO_AGC_ENABLED && xyReady)
|
||||
? computeAgcGain(state, xyData, frameNow)
|
||||
: { gainDb: settings.gainDb, gain: dbToLinear(settings.gainDb) };
|
||||
const appliedScale = BASE_GONIO_SCALE * agc.gain * gate.level;
|
||||
|
||||
const trace = xyReady
|
||||
? buildTrace(state, xyData, layout.scope, appliedScale, CONFIG)
|
||||
: null;
|
||||
renderTrace(g, state, trace, layout.scope, style, xyReady && gate.active, settings);
|
||||
|
||||
const silenceGateEnabled = CONFIG?.XY_SILENCE_GATE_ENABLED !== false;
|
||||
const corrThreshold = resolveCorrThreshold(CONFIG);
|
||||
const rmsL = Number.isFinite(env.audio?.rmsDb?.L) ? env.audio.rmsDb.L : -120;
|
||||
const rmsR = Number.isFinite(env.audio?.rmsDb?.R) ? env.audio.rmsDb.R : -120;
|
||||
const activeL = audioFresh && (!silenceGateEnabled || (rmsL >= corrThreshold));
|
||||
const activeR = audioFresh && (!silenceGateEnabled || (rmsR >= corrThreshold));
|
||||
|
||||
let corrTarget = 0;
|
||||
const canCorr = xyReady && utils?.correlation;
|
||||
const zeroOnSilence = !!CONFIG?.CORR_ZERO_ON_SILENCE;
|
||||
const bothSilent = !activeL && !activeR;
|
||||
|
||||
if (activeL && activeR && canCorr) {
|
||||
// Beide Kanäle aktiv → echte Korrelation aus L/R-Samples
|
||||
const corrRaw = utils.correlation(
|
||||
xyData.xyL,
|
||||
xyData.xyR,
|
||||
Number.isFinite(state.corrDisplayed) ? state.corrDisplayed : 0,
|
||||
CONFIG.CORR_SMOOTH,
|
||||
);
|
||||
if (Number.isFinite(corrRaw)) {
|
||||
state.corrDisplayed = corrRaw;
|
||||
state.corrLastValid = corrRaw;
|
||||
state.corrSilenceSince = 0;
|
||||
corrTarget = corrRaw;
|
||||
}
|
||||
} else if (activeL !== activeR) {
|
||||
// Nur ein Kanal aktiv → hart auf 0, keine Hold-/Decay-Logik
|
||||
state.corrSilenceSince = 0;
|
||||
corrTarget = 0;
|
||||
} else {
|
||||
if (zeroOnSilence && bothSilent) {
|
||||
// Beide still → zügig Richtung 0 (ohne Hold/Drift)
|
||||
state.corrLastValid = 0;
|
||||
state.corrSilenceSince = frameNow;
|
||||
corrTarget = 0;
|
||||
} else {
|
||||
// Beide still → Hold + Drift zur Mitte
|
||||
if (!state.corrSilenceSince) state.corrSilenceSince = frameNow;
|
||||
corrTarget = resolveCorrTarget(state, frameNow);
|
||||
}
|
||||
}
|
||||
|
||||
const fastZero = zeroOnSilence && bothSilent;
|
||||
const corrVisual = updateCorrelationDisplay(state, corrTarget, frameNow, fastZero ? true : gate.active);
|
||||
if (fastZero) {
|
||||
// Damit die nächste echte Korrelation nicht noch an einem alten Glättungswert "hängt".
|
||||
state.corrDisplayed = corrVisual;
|
||||
}
|
||||
drawCorrelationBar(
|
||||
g,
|
||||
layout.plot.x + layout.plot.w / 2,
|
||||
layout.plot.y + layout.plot.h - 28,
|
||||
Math.round(Math.min(layout.scope.w * 0.75, layout.plot.w - 50)),
|
||||
18,
|
||||
corrVisual
|
||||
);
|
||||
|
||||
if (slots.length) {
|
||||
const panelSlotWidth = computePanelSlotWidth(
|
||||
layout.meter.w,
|
||||
slots.length,
|
||||
Math.max(2, Math.min(24, Number(CONFIG?.GONI_METER_GAP) || 12))
|
||||
);
|
||||
await renderMeterPanel(g, layout.meter, slots, CONFIG, meters, panelSlotWidth);
|
||||
drawMeterOutline(g, layout.meter);
|
||||
}
|
||||
}
|
||||
|
||||
function drawStaticLayer(g, state, rect, layout, CONFIG, slotCount) {
|
||||
const layer = ensureStaticLayer(state, rect, layout, CONFIG, slotCount);
|
||||
if (!layer) {
|
||||
drawPlotBackdrop(g, layout.plot);
|
||||
drawFramework(g, layout, CONFIG);
|
||||
drawScopeBackground(g, layout.scope);
|
||||
drawCrosshair(g, layout.scope);
|
||||
drawAxisLabels(g, layout.scope);
|
||||
drawMeterPanelDividers(g, layout.meter, slotCount, CONFIG, computePanelSlotWidth(
|
||||
layout.meter.w,
|
||||
slotCount,
|
||||
Math.max(2, Math.min(24, Number(CONFIG?.GONI_METER_GAP) || 12))
|
||||
));
|
||||
return;
|
||||
}
|
||||
g.drawImage(layer, 0, 0, rect.w, rect.h);
|
||||
}
|
||||
|
||||
function ensureStaticLayer(state, rect, layout, CONFIG, slotCount) {
|
||||
const w = Math.max(1, rect.w | 0);
|
||||
const h = Math.max(1, rect.h | 0);
|
||||
const slotGap = Math.max(2, Math.min(24, Number(CONFIG?.GONI_METER_GAP) || 12));
|
||||
const key = [
|
||||
w, h,
|
||||
layout.plot.x, layout.plot.y, layout.plot.w, layout.plot.h,
|
||||
layout.scope.x, layout.scope.y, layout.scope.w, layout.scope.h,
|
||||
layout.meter.x, layout.meter.y, layout.meter.w, layout.meter.h,
|
||||
slotCount,
|
||||
slotGap,
|
||||
!!CONFIG?.PANEL_DIVIDERS_ENABLED,
|
||||
Number.isFinite(CONFIG?.AXIS_GUTTER_LEFT) ? CONFIG.AXIS_GUTTER_LEFT : 14,
|
||||
].join('|');
|
||||
if (state.staticLayerCanvas && state.staticLayerKey === key) {
|
||||
return state.staticLayerCanvas;
|
||||
}
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d', { alpha: true });
|
||||
if (!ctx) return null;
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
ctx.font = 'bold 14px ui-monospace, monospace';
|
||||
drawPlotBackdrop(ctx, layout.plot);
|
||||
drawFramework(ctx, layout, CONFIG);
|
||||
drawScopeBackground(ctx, layout.scope);
|
||||
drawCrosshair(ctx, layout.scope);
|
||||
drawAxisLabels(ctx, layout.scope);
|
||||
drawMeterPanelDividers(
|
||||
ctx,
|
||||
layout.meter,
|
||||
slotCount,
|
||||
CONFIG,
|
||||
computePanelSlotWidth(layout.meter.w, slotCount, slotGap)
|
||||
);
|
||||
state.staticLayerCanvas = canvas;
|
||||
state.staticLayerCtx = ctx;
|
||||
state.staticLayerKey = key;
|
||||
return canvas;
|
||||
}
|
||||
async function drawRealtimeSlot(g, rect, slotId, CONFIG, meters) {
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, rect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
const innerRect = {
|
||||
x: rect.x,
|
||||
y: rect.y + METER_PAD_TOP + innerOffset,
|
||||
w: rect.w,
|
||||
h: innerHeight,
|
||||
};
|
||||
|
||||
try {
|
||||
await meters.draw(g, innerRect, slotId, CONFIG);
|
||||
} catch (e) {
|
||||
console.warn(`Meter ${slotId} draw error:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Layout & drawing helpers
|
||||
|
||||
function computeGoniometerLayout(rect, CONFIG = {}, slotCount = METER_SLOTS, topInset = FRAME.top) {
|
||||
const plotX = FRAME.left;
|
||||
const plotY = Number.isFinite(topInset) ? topInset : FRAME.top;
|
||||
const innerWidth = Math.max(200, rect.w - plotX - FRAME.right);
|
||||
const minPlotW = 200;
|
||||
|
||||
const slotGap = Math.max(2, Math.min(24, Number(CONFIG?.GONI_METER_GAP) || 12));
|
||||
const panelSlotWidth = 100; // fixed width for better control
|
||||
const n = Math.max(0, Math.min(METER_SLOTS, slotCount | 0));
|
||||
const panelSlotsWidth = n > 0 ? (panelSlotWidth * n + (n - 1) * slotGap) : 0;
|
||||
|
||||
let meterW = n > 0 ? Math.max(panelSlotsWidth, (n === 1 ? 160 : (n === 2 ? 280 : METER_WIDTH))) : 0;
|
||||
let plotW = innerWidth - (n > 0 ? (meterW + METER_GAP) : 0);
|
||||
|
||||
if (plotW < minPlotW) {
|
||||
plotW = minPlotW;
|
||||
meterW = n > 0 ? (innerWidth - plotW - METER_GAP) : 0;
|
||||
}
|
||||
|
||||
if (n > 0) meterW = Math.max(meterW, panelSlotsWidth);
|
||||
if (plotW < 80) plotW = 80;
|
||||
|
||||
const plotH = Math.max(160, rect.h - plotY - FRAME.bottom);
|
||||
const plot = { x: plotX, y: plotY, w: plotW, h: plotH };
|
||||
const scope = computeScopeBox(plot);
|
||||
|
||||
const meter = {
|
||||
x: plot.x + plot.w + (n > 0 ? METER_GAP : 0),
|
||||
y: plot.y,
|
||||
w: meterW,
|
||||
h: plotH,
|
||||
};
|
||||
|
||||
return { plot, scope, meter };
|
||||
}
|
||||
|
||||
function computeScopeBox(plot) {
|
||||
const padding = 24;
|
||||
const minDim = Math.min(plot.w, plot.h);
|
||||
const tightSize = Math.max(120, minDim - padding * 2);
|
||||
const size = Math.min(Math.max(140, tightSize), minDim);
|
||||
const w = size;
|
||||
const h = size;
|
||||
const x = Math.round(plot.x + (plot.w - w) / 2);
|
||||
const y = Math.round(plot.y + (plot.h - h) / 2);
|
||||
const halfLimit = Math.max(24, Math.min(w, h) / 2 - 6);
|
||||
const halfBase = Math.max(60, Math.min(w, h) / 2 - 18);
|
||||
const half = Math.max(24, Math.min(halfBase, halfLimit));
|
||||
const cx = x + w / 2;
|
||||
const cy = y + h / 2;
|
||||
const reach = Math.max(24, Math.min(half - 4, half * (1 - INNER_MARGIN)));
|
||||
const diag = half * 0.9;
|
||||
return { x, y, w, h, cx, cy, half, reach, diag };
|
||||
}
|
||||
|
||||
function drawFramework(g, layout, CONFIG) {
|
||||
drawPlotRails(g, layout.plot, CONFIG);
|
||||
if (layout.meter?.w > 0) {
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(layout.meter.x, layout.meter.y, layout.meter.w, layout.meter.h);
|
||||
g.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function drawPlotBackdrop(g, plot) {
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(plot.x, plot.y, plot.w, plot.h);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawPlotRails(g, plot, CONFIG) {
|
||||
const gutterL = Number.isFinite(CONFIG?.AXIS_GUTTER_LEFT)
|
||||
? Math.max(8, Number(CONFIG.AXIS_GUTTER_LEFT))
|
||||
: 14;
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.beginPath();
|
||||
g.moveTo(plot.x - gutterL, plot.y);
|
||||
g.lineTo(plot.x + plot.w, plot.y);
|
||||
g.stroke();
|
||||
g.beginPath();
|
||||
g.moveTo(plot.x - gutterL, plot.y + plot.h);
|
||||
g.lineTo(plot.x + plot.w, plot.y + plot.h);
|
||||
g.stroke();
|
||||
g.beginPath();
|
||||
g.moveTo(plot.x, plot.y);
|
||||
g.lineTo(plot.x, plot.y + plot.h);
|
||||
g.stroke();
|
||||
g.beginPath();
|
||||
g.moveTo(plot.x + plot.w, plot.y);
|
||||
g.lineTo(plot.x + plot.w, plot.y + plot.h);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawScopeBackground(g, scope) {
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(scope.x, scope.y, scope.w, scope.h);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawCrosshair(g, scope) {
|
||||
g.save();
|
||||
g.globalAlpha = 0.45;
|
||||
g.strokeStyle = 'rgb(0,0,255)';
|
||||
g.lineWidth = 1.5;
|
||||
g.beginPath();
|
||||
g.moveTo(scope.cx - scope.diag, scope.cy - scope.diag);
|
||||
g.lineTo(scope.cx + scope.diag, scope.cy + scope.diag);
|
||||
g.moveTo(scope.cx - scope.diag, scope.cy + scope.diag);
|
||||
g.lineTo(scope.cx + scope.diag, scope.cy - scope.diag);
|
||||
g.moveTo(scope.cx, scope.cy - scope.half);
|
||||
g.lineTo(scope.cx, scope.cy + scope.half);
|
||||
g.moveTo(scope.cx - scope.half, scope.cy);
|
||||
g.lineTo(scope.cx + scope.half, scope.cy);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawAxisLabels(g, scope) {
|
||||
g.save();
|
||||
g.fillStyle = FRAME_COLOR;
|
||||
g.fillText('R', scope.cx + scope.diag - 10, scope.cy - scope.diag - 4);
|
||||
g.fillText('L', scope.cx - scope.diag - 14, scope.cy - scope.diag - 4);
|
||||
const labelOffset = scope.half + 6;
|
||||
g.fillText('M', scope.cx - 6, scope.cy - labelOffset - 6);
|
||||
g.fillText('S', scope.cx - labelOffset - 16, scope.cy + 6);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawIdleMessage(g, scope) {
|
||||
g.save();
|
||||
g.fillStyle = '#bcd';
|
||||
g.fillText('Warte auf Audio …', scope.x + 12, scope.y + 20);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
async function renderMeterPanel(g, meterLayout, slots, CONFIG, meters, panelSlotWidth) {
|
||||
const slotCount = Array.isArray(slots) ? slots.length : 0;
|
||||
if (!slotCount || meterLayout?.w <= 0) return;
|
||||
const gap = Math.max(2, Math.min(24, Number(CONFIG?.GONI_METER_GAP) || 12));
|
||||
const slotW = panelSlotWidth;
|
||||
const totalSlotW = slotW * slotCount + gap * (slotCount - 1);
|
||||
const startX = meterLayout.x + Math.max(0, Math.floor((meterLayout.w - totalSlotW) / 2));
|
||||
const slotTopPadding = METER_PAD_TOP + METER_SLOT_SHRINK / 2;
|
||||
const slotBottomPadding = METER_PAD_BOTTOM + METER_EXTRA_BOTTOM_PAD + METER_SLOT_SHRINK / 2;
|
||||
const slotHeight = Math.max(40, meterLayout.h - slotTopPadding - slotBottomPadding);
|
||||
const outerPad = 6;
|
||||
|
||||
for (let i = 0; i < slotCount; i++) {
|
||||
const rectM = {
|
||||
x: startX + i * (slotW + gap),
|
||||
y: meterLayout.y + slotTopPadding,
|
||||
w: slotW,
|
||||
h: slotHeight,
|
||||
};
|
||||
|
||||
await drawRealtimeSlot(g, rectM, slots[i], CONFIG, meters);
|
||||
}
|
||||
}
|
||||
|
||||
function drawMeterPanelDividers(g, meterLayout, slotCount, CONFIG, panelSlotWidth) {
|
||||
if (!meterLayout?.w || !slotCount || !CONFIG?.PANEL_DIVIDERS_ENABLED) return;
|
||||
const gap = Math.max(2, Math.min(24, Number(CONFIG?.GONI_METER_GAP) || 12));
|
||||
const slotW = panelSlotWidth;
|
||||
const totalSlotW = slotW * slotCount + gap * (slotCount - 1);
|
||||
const startX = meterLayout.x + Math.max(0, Math.floor((meterLayout.w - totalSlotW) / 2));
|
||||
const slotTopPadding = METER_PAD_TOP + METER_SLOT_SHRINK / 2;
|
||||
const slotBottomPadding = METER_PAD_BOTTOM + METER_EXTRA_BOTTOM_PAD + METER_SLOT_SHRINK / 2;
|
||||
const outerPad = 6;
|
||||
for (let i = 1; i < slotCount; i++) {
|
||||
const dividerX = startX + i * slotW + (i - 1) * gap + gap / 2;
|
||||
g.save();
|
||||
g.strokeStyle = 'rgba(0,231,255,0.4)';
|
||||
g.lineWidth = 1;
|
||||
g.setLineDash([4, 3]);
|
||||
g.beginPath();
|
||||
g.moveTo(dividerX, meterLayout.y + slotTopPadding - outerPad);
|
||||
g.lineTo(dividerX, meterLayout.y + meterLayout.h - slotBottomPadding + outerPad);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Trace extraction & rendering
|
||||
|
||||
function extractXYData(audio) {
|
||||
const xyL = audio?.xyL;
|
||||
const xyR = audio?.xyR;
|
||||
const isVec = (v) => v && (Array.isArray(v) || ArrayBuffer.isView(v));
|
||||
const ready = !!(audio?.alive && isVec(xyL) && isVec(xyR) && xyL.length && xyR.length);
|
||||
return {
|
||||
ready,
|
||||
xyL,
|
||||
xyR,
|
||||
length: ready ? Math.min(xyL.length, xyR.length) : 0,
|
||||
};
|
||||
}
|
||||
|
||||
function resolveScopeSettings(CONFIG) {
|
||||
let gainDb = Number.isFinite(CONFIG?.GONIO_DISPLAY_GAIN_DB) ? CONFIG.GONIO_DISPLAY_GAIN_DB : 0;
|
||||
gainDb = Math.max(GONIO_GAIN_MIN_DB, Math.min(GONIO_GAIN_MAX_DB, Math.round(gainDb / 5) * 5));
|
||||
const lineFadeMs = Number.isFinite(CONFIG?.GONIO_LINE_FADE_MS) ? CONFIG.GONIO_LINE_FADE_MS : 300;
|
||||
const rtwClassic = true;
|
||||
return {
|
||||
gainDb,
|
||||
lineFadeMs,
|
||||
rtwClassic,
|
||||
traceColor: rtwClassic ? 'rgba(255,220,40,0.98)' : 'rgba(255,240,170,0.72)',
|
||||
trailBaseAlpha: rtwClassic ? 0.18 : 0.18,
|
||||
trailBoostAlpha: rtwClassic ? 0.42 : 0.42,
|
||||
lineAlpha: rtwClassic ? 0.82 : 0.72,
|
||||
lineWidth: 1.8,
|
||||
pointBaseAlpha: rtwClassic ? 0.14 : 0.16,
|
||||
pointBoostAlpha: rtwClassic ? 0.34 : 0.36,
|
||||
pointSize: rtwClassic ? 1.4 : 2.2,
|
||||
curveSmoothing: rtwClassic,
|
||||
};
|
||||
}
|
||||
|
||||
function resolveSilenceGate(env, CONFIG, state) {
|
||||
const enabled = CONFIG?.XY_SILENCE_GATE_ENABLED !== false;
|
||||
const threshold = Number.isFinite(CONFIG?.XY_SILENCE_THRESHOLD_RMS_DBFS)
|
||||
? CONFIG.XY_SILENCE_THRESHOLD_RMS_DBFS
|
||||
: CORR_SILENCE_THRESHOLD_DEFAULT;
|
||||
const rmsMono = Number.isFinite(env.audio?.rmsDb?.mono) ? env.audio.rmsDb.mono : -120;
|
||||
const targetActive = enabled ? (rmsMono >= threshold) : true;
|
||||
const now = getNow();
|
||||
const dt = state.gateLastTs ? Math.max(0, (now - state.gateLastTs) / 1000) : 0;
|
||||
state.gateLastTs = now;
|
||||
if (!Number.isFinite(state.gateLevel)) state.gateLevel = targetActive ? 1 : 0;
|
||||
const tau = targetActive ? 0.06 : 0.35; // schneller rein, sanft raus
|
||||
const alpha = 1 - Math.exp(-dt / Math.max(0.001, tau));
|
||||
state.gateLevel += alpha * ((targetActive ? 1 : 0) - state.gateLevel);
|
||||
state.gateLevel = Math.max(0, Math.min(1, state.gateLevel));
|
||||
const active = state.gateLevel > 0.02;
|
||||
return { active, level: state.gateLevel, rmsMono, threshold };
|
||||
}
|
||||
|
||||
function buildTrace(state, xyData, scope, scale, CONFIG) {
|
||||
if (xyData.length <= 1) {
|
||||
return { buffer: null, count: 0 };
|
||||
}
|
||||
|
||||
const targetPoints = resolveSampleTarget(CONFIG);
|
||||
const total = xyData.length;
|
||||
if (targetPoints <= 1 || total <= 1) {
|
||||
return { buffer: null, count: 0 };
|
||||
}
|
||||
const sampleCount = Math.max(2, Math.min(targetPoints, MAX_TRACE_POINTS));
|
||||
if (sampleCount <= 1) {
|
||||
return { buffer: null, count: 0 };
|
||||
}
|
||||
|
||||
const coords = ensureTraceBuffer(state, sampleCount * 2);
|
||||
const reach = scope.reach;
|
||||
const cx = scope.cx;
|
||||
const cy = scope.cy;
|
||||
const sourceLast = total - 1;
|
||||
|
||||
let write = 0;
|
||||
for (let i = 0; i < sampleCount; i++) {
|
||||
const pos = sampleCount <= 1 ? 0 : (i * sourceLast) / (sampleCount - 1);
|
||||
const idx0 = Math.floor(pos);
|
||||
const idx1 = Math.min(sourceLast, idx0 + 1);
|
||||
const frac = pos - idx0;
|
||||
const l0 = xyData.xyL[idx0];
|
||||
const l1 = xyData.xyL[idx1];
|
||||
const r0 = xyData.xyR[idx0];
|
||||
const r1 = xyData.xyR[idx1];
|
||||
const l = l0 + (l1 - l0) * frac;
|
||||
const r = r0 + (r1 - r0) * frac;
|
||||
const M = 0.5 * (l + r);
|
||||
const S = 0.5 * (l - r);
|
||||
const xNorm = clamp1(S * scale);
|
||||
const yNorm = clamp1(M * scale);
|
||||
coords[write++] = cx - xNorm * reach;
|
||||
coords[write++] = cy - yNorm * reach;
|
||||
if (write >= coords.length) break;
|
||||
}
|
||||
|
||||
if (write < 4) {
|
||||
return { buffer: null, count: 0 };
|
||||
}
|
||||
|
||||
return { buffer: coords, count: write / 2 };
|
||||
}
|
||||
|
||||
function renderTrace(g, state, trace, scope, style, xyReady, settings) {
|
||||
const trails = state.lineTrails || (state.lineTrails = []);
|
||||
const now = getNow();
|
||||
const hasTrace = !!(trace && trace.buffer && trace.count);
|
||||
const lineFadeMs = settings?.lineFadeMs ?? 0;
|
||||
|
||||
if (style === 'lines') {
|
||||
if (lineFadeMs <= 0) {
|
||||
trails.length = 0;
|
||||
if (hasTrace && trace.count > 1) {
|
||||
drawImmediateLine(g, trace, scope, settings);
|
||||
} else if (!xyReady) {
|
||||
drawIdleMessage(g, scope);
|
||||
}
|
||||
} else {
|
||||
if (hasTrace && trace.count > 1) {
|
||||
addLineTrail(trails, trace, now);
|
||||
}
|
||||
const rendered = drawLineTrails(g, trails, scope, now, lineFadeMs, settings);
|
||||
if (!rendered && !xyReady) drawIdleMessage(g, scope);
|
||||
}
|
||||
} else {
|
||||
if (lineFadeMs <= 0) {
|
||||
trails.length = 0;
|
||||
if (hasTrace) {
|
||||
drawPointTrace(g, trace, scope, settings);
|
||||
} else if (!xyReady) {
|
||||
drawIdleMessage(g, scope);
|
||||
}
|
||||
} else {
|
||||
if (hasTrace && trace.count > 0) {
|
||||
addLineTrail(trails, trace, now);
|
||||
}
|
||||
const rendered = drawPointTrails(g, trails, scope, now, lineFadeMs, settings);
|
||||
if (!rendered && !xyReady) {
|
||||
drawIdleMessage(g, scope);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addLineTrail(trails, trace, timestamp) {
|
||||
const coords = new Float32Array(trace.count * 2);
|
||||
coords.set(trace.buffer.subarray(0, trace.count * 2));
|
||||
trails.push({ coords, count: trace.count, time: timestamp });
|
||||
}
|
||||
|
||||
function drawLineTrails(g, trails, scope, now, fadeMs, settings) {
|
||||
if (!trails.length) return false;
|
||||
|
||||
const cutoff = now - fadeMs;
|
||||
const keep = [];
|
||||
let drawn = false;
|
||||
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(scope.x, scope.y, scope.w, scope.h);
|
||||
g.clip();
|
||||
|
||||
for (const trail of trails) {
|
||||
if (trail.time < cutoff) continue;
|
||||
const age = now - trail.time;
|
||||
const fade = Math.max(0, 1 - age / fadeMs);
|
||||
if (fade <= 0) continue;
|
||||
|
||||
drawn = true;
|
||||
keep.push(trail);
|
||||
|
||||
g.save();
|
||||
g.globalAlpha = (settings?.trailBaseAlpha ?? 0.35) + (settings?.trailBoostAlpha ?? 0.65) * fade;
|
||||
g.strokeStyle = settings?.traceColor || 'rgba(255,231,74,0.92)';
|
||||
g.lineWidth = settings?.lineWidth ?? 1.3;
|
||||
beginTracePath(g, trail.coords, trail.count, settings);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
g.restore();
|
||||
|
||||
trails.length = 0;
|
||||
Array.prototype.push.apply(trails, keep);
|
||||
|
||||
return drawn;
|
||||
}
|
||||
|
||||
function drawImmediateLine(g, trace, scope, settings) {
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(scope.x, scope.y, scope.w, scope.h);
|
||||
g.clip();
|
||||
|
||||
g.globalAlpha = settings?.lineAlpha ?? 0.92;
|
||||
g.strokeStyle = settings?.traceColor || 'rgba(255,231,74,0.92)';
|
||||
g.lineWidth = settings?.lineWidth ?? 1.3;
|
||||
beginTracePath(g, trace.buffer, trace.count, settings);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function beginTracePath(g, coords, count, settings) {
|
||||
g.beginPath();
|
||||
if (!coords || count <= 0) return;
|
||||
g.moveTo(coords[0], coords[1]);
|
||||
if (!(settings?.curveSmoothing) || count < 3) {
|
||||
for (let i = 1; i < count; i++) {
|
||||
const idx = i * 2;
|
||||
g.lineTo(coords[idx], coords[idx + 1]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
for (let i = 1; i < count - 1; i++) {
|
||||
const idx = i * 2;
|
||||
const nextIdx = (i + 1) * 2;
|
||||
const xc = (coords[idx] + coords[nextIdx]) * 0.5;
|
||||
const yc = (coords[idx + 1] + coords[nextIdx + 1]) * 0.5;
|
||||
g.quadraticCurveTo(coords[idx], coords[idx + 1], xc, yc);
|
||||
}
|
||||
const last = (count - 1) * 2;
|
||||
const prev = (count - 2) * 2;
|
||||
g.quadraticCurveTo(coords[prev], coords[prev + 1], coords[last], coords[last + 1]);
|
||||
}
|
||||
|
||||
function drawPointTrails(g, trails, scope, now, fadeMs, settings) {
|
||||
if (!trails.length) return false;
|
||||
|
||||
const cutoff = now - fadeMs;
|
||||
const keep = [];
|
||||
let drawn = false;
|
||||
const pointSize = settings?.pointSize ?? 1.4;
|
||||
const half = pointSize / 2;
|
||||
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(scope.x, scope.y, scope.w, scope.h);
|
||||
g.clip();
|
||||
|
||||
for (const trail of trails) {
|
||||
if (trail.time < cutoff) continue;
|
||||
const age = now - trail.time;
|
||||
const fade = Math.max(0, 1 - age / fadeMs);
|
||||
if (fade <= 0) continue;
|
||||
|
||||
drawn = true;
|
||||
keep.push(trail);
|
||||
|
||||
for (let i = 0; i < trail.count; i++) {
|
||||
const idx = i * 2;
|
||||
const localAge = trail.count > 1 ? i / (trail.count - 1) : 0;
|
||||
const alpha = ((settings?.pointBaseAlpha ?? 0.25) + (settings?.pointBoostAlpha ?? 0.55) * (1 - localAge)) * fade;
|
||||
g.fillStyle = `rgba(255,231,74,${alpha})`;
|
||||
g.fillRect(trail.coords[idx] - half, trail.coords[idx + 1] - half, pointSize, pointSize);
|
||||
}
|
||||
}
|
||||
|
||||
g.restore();
|
||||
|
||||
trails.length = 0;
|
||||
Array.prototype.push.apply(trails, keep);
|
||||
|
||||
return drawn;
|
||||
}
|
||||
|
||||
function drawPointTrace(g, trace, scope, settings) {
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(scope.x, scope.y, scope.w, scope.h);
|
||||
g.clip();
|
||||
|
||||
const pointSize = settings?.pointSize ?? 1.4;
|
||||
const half = pointSize / 2;
|
||||
for (let i = 0; i < trace.count; i++) {
|
||||
const idx = i * 2;
|
||||
const age = trace.count > 1 ? i / (trace.count - 1) : 0;
|
||||
const alpha = (settings?.pointBaseAlpha ?? 0.25) + (settings?.pointBoostAlpha ?? 0.55) * (1 - age);
|
||||
g.fillStyle = `rgba(255,231,74,${alpha})`;
|
||||
g.fillRect(trace.buffer[idx] - half, trace.buffer[idx + 1] - half, pointSize, pointSize);
|
||||
}
|
||||
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function resolveSampleTarget(CONFIG) {
|
||||
const target = Number(CONFIG?.XY_POINTS);
|
||||
if (!Number.isFinite(target)) return 512;
|
||||
return clampInt(target, MIN_TRACE_POINTS, MAX_TRACE_POINTS);
|
||||
}
|
||||
|
||||
function ensureTraceBuffer(state, capacity) {
|
||||
if (!(state.traceBuffer instanceof Float32Array) || state.traceBuffer.length < capacity) {
|
||||
state.traceBuffer = new Float32Array(capacity);
|
||||
}
|
||||
return state.traceBuffer;
|
||||
}
|
||||
|
||||
function clamp1(v) {
|
||||
return v < -1 ? -1 : (v > 1 ? 1 : v);
|
||||
}
|
||||
|
||||
function clampInt(value, min, max) {
|
||||
if (!Number.isFinite(value)) return min;
|
||||
const v = Math.round(value);
|
||||
return Math.min(max, Math.max(min, v));
|
||||
}
|
||||
|
||||
function getNow() {
|
||||
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
|
||||
return performance.now();
|
||||
}
|
||||
return Date.now();
|
||||
}
|
||||
|
||||
function updateCorrelationDisplay(state, target, nowTs, gateActive = true) {
|
||||
const prev = Number.isFinite(state.corrMeter) ? state.corrMeter : target;
|
||||
const lastTs = Number.isFinite(state.corrLastTs) ? state.corrLastTs : nowTs;
|
||||
const dt = Math.max(0, (nowTs - lastTs) / 1000);
|
||||
if (!dt) {
|
||||
state.corrMeter = clamp1(target);
|
||||
state.corrLastTs = nowTs;
|
||||
return state.corrMeter;
|
||||
}
|
||||
const rising = Math.abs(target) > Math.abs(prev);
|
||||
// Schneller einrasten, wenn Gate aktiv ist; etwas zäher auf Null auslaufen, wenn Stille.
|
||||
const tauAttack = gateActive ? 0.08 : CORR_ATTACK_S;
|
||||
const tauRelease = gateActive ? 0.35 : CORR_RELEASE_S;
|
||||
const tau = rising ? tauAttack : tauRelease;
|
||||
const alpha = 1 - Math.exp(-dt / Math.max(0.001, tau));
|
||||
const next = clamp1(prev + (target - prev) * alpha);
|
||||
state.corrMeter = next;
|
||||
state.corrLastTs = nowTs;
|
||||
return next;
|
||||
}
|
||||
|
||||
function resolveCorrThreshold(CONFIG = {}) {
|
||||
if (Number.isFinite(CONFIG.XY_SILENCE_THRESHOLD_RMS_DBFS)) {
|
||||
return CONFIG.XY_SILENCE_THRESHOLD_RMS_DBFS;
|
||||
}
|
||||
if (Number.isFinite(CONFIG.CORR_SILENCE_THRESHOLD_RMS_DBFS)) {
|
||||
return CONFIG.CORR_SILENCE_THRESHOLD_RMS_DBFS;
|
||||
}
|
||||
return CORR_SILENCE_THRESHOLD_DEFAULT;
|
||||
}
|
||||
|
||||
function resolveCorrTarget(state, nowTs) {
|
||||
const lastValid = Number.isFinite(state.corrLastValid) ? state.corrLastValid : 0;
|
||||
if (!state.corrSilenceSince) {
|
||||
return lastValid;
|
||||
}
|
||||
const holdMs = CORR_SILENCE_HOLD_MS;
|
||||
const driftMs = CORR_SILENCE_DRIFT_MS;
|
||||
const elapsed = Math.max(0, nowTs - state.corrSilenceSince);
|
||||
if (elapsed <= holdMs) {
|
||||
return lastValid;
|
||||
}
|
||||
const t = Math.min(1, (elapsed - holdMs) / Math.max(1, driftMs));
|
||||
return lastValid * (1 - t);
|
||||
}
|
||||
|
||||
function computeAgcGain(state, xyData, nowTs) {
|
||||
const attackTau = 0.001; // 1 ms
|
||||
const releaseDbPerS = 10;
|
||||
const dt = state.agcLastTs ? Math.max(0, (nowTs - state.agcLastTs) / 1000) : 0;
|
||||
state.agcLastTs = nowTs;
|
||||
|
||||
const peak = measureGoniometerPeak(xyData);
|
||||
let env = Number.isFinite(state.agcEnv) && state.agcEnv > 0 ? state.agcEnv : 1e-3;
|
||||
if (peak >= env) {
|
||||
const attackAlpha = attackTau > 0 ? (1 - Math.exp(-Math.max(dt, 0) / attackTau)) : 1;
|
||||
env = env + (peak - env) * Math.min(1, attackAlpha || 1);
|
||||
} else {
|
||||
const releaseFactor = Math.pow(10, -releaseDbPerS * Math.max(dt, 0) / 20);
|
||||
env = Math.max(peak, env * releaseFactor);
|
||||
}
|
||||
env = Math.max(1e-6, env);
|
||||
state.agcEnv = env;
|
||||
|
||||
const envDb = linearToDb(env);
|
||||
let gainDb = AGC_TARGET_DB - envDb;
|
||||
if (gainDb > GONIO_GAIN_MAX_DB) gainDb = GONIO_GAIN_MAX_DB;
|
||||
if (gainDb < GONIO_GAIN_MIN_DB) gainDb = GONIO_GAIN_MIN_DB;
|
||||
state.agcGainDb = gainDb;
|
||||
return {
|
||||
gainDb,
|
||||
gain: dbToLinear(gainDb),
|
||||
};
|
||||
}
|
||||
|
||||
function measureGoniometerPeak(xyData) {
|
||||
if (!xyData || !xyData.ready) return 1e-3;
|
||||
let peak = 1e-6;
|
||||
const len = xyData.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
const l = xyData.xyL[i];
|
||||
const r = xyData.xyR[i];
|
||||
const M = 0.5 * (l + r);
|
||||
const S = 0.5 * (l - r);
|
||||
const sample = Math.max(Math.abs(M), Math.abs(S));
|
||||
if (sample > peak) peak = sample;
|
||||
}
|
||||
return peak;
|
||||
}
|
||||
|
||||
function linearToDb(value) {
|
||||
const v = Math.max(1e-9, value);
|
||||
return 20 * Math.log10(v);
|
||||
}
|
||||
|
||||
function dbToLinear(db) {
|
||||
return Math.pow(10, db / 20);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Correlation bar helper
|
||||
|
||||
function drawCorrelationBar(g, centerX, y, w, h, val) {
|
||||
const x = Math.floor(centerX - w / 2);
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR; g.lineWidth = 2; g.strokeRect(x, y, w, h);
|
||||
const mid = x + w / 2;
|
||||
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'right'; g.fillText('-1', x - 6, y + h / 2 + 5);
|
||||
g.textAlign = 'left'; g.fillText('+1', x + w + 6, y + h / 2 + 5);
|
||||
|
||||
const padding = 3;
|
||||
const cubeSize = Math.max(10, Math.min(h - padding * 2, w - padding * 2));
|
||||
const xVal = mid + (val * 0.5) * w;
|
||||
const clampCenter = (v) => {
|
||||
const minC = x + padding + cubeSize * 0.5;
|
||||
const maxC = x + w - padding - cubeSize * 0.5;
|
||||
return Math.max(minC, Math.min(maxC, v));
|
||||
};
|
||||
const cubeX = clampCenter(xVal) - cubeSize / 2;
|
||||
const cubeY = y + (h - cubeSize) / 2;
|
||||
const cubeColor = resolveCorrColor(val);
|
||||
g.fillStyle = 'rgba(255,255,255,0.08)';
|
||||
g.fillRect(x + 1, y + 1, w - 2, h - 2);
|
||||
g.fillStyle = cubeColor;
|
||||
g.fillRect(cubeX, cubeY, cubeSize, cubeSize);
|
||||
g.strokeStyle = '#0ff';
|
||||
g.lineWidth = 1;
|
||||
g.strokeRect(cubeX, cubeY, cubeSize, cubeSize);
|
||||
g.beginPath(); g.moveTo(mid, y); g.lineTo(mid, y + h); g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function resolveCorrColor(val) {
|
||||
const t = Math.max(-1, Math.min(1, val));
|
||||
if (t <= -0.33) return WARN_COLOR;
|
||||
if (t >= 0.33) return OK_COLOR;
|
||||
return MID_COLOR;
|
||||
}
|
||||
|
||||
function drawMeterOutline(g, meterRect) {
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.strokeRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
g.restore();
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
// views/panel.js — Zentrales Mehrmeter-Panel (wie in deinem Original)
|
||||
// Nutzt bis zu fünf HUD-Slots und zeichnet mittig ein breites Panel mit Rahmen.
|
||||
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, FRAME_COLOR_DIM, LABEL_COLOR } from '../core/theme.js';
|
||||
|
||||
export const id = 'panel';
|
||||
|
||||
export function init() {
|
||||
return { staticLayer: null };
|
||||
}
|
||||
export function resize() {}
|
||||
export function destroy(state) {
|
||||
state.staticLayer = null;
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG, meters } = env;
|
||||
|
||||
const W = rect.w, H = rect.h;
|
||||
const mWidth = Math.max(200, Math.floor(W * 1));
|
||||
const mPX = 0;
|
||||
const topInset = Number.isFinite(env?.topInset) ? Number(env.topInset) : DEFAULT_TOP_INSET;
|
||||
const mTop = Number.isFinite(env?.topInset) ? Math.max(0, Math.floor(topInset + 10)) : 80;
|
||||
const mBot = H - 10;
|
||||
const labelY = mTop - 25; // aktuell ungenutzt, Meter zeichnen eigene Labels
|
||||
|
||||
// Slots nebeneinander (leere Slots werden ausgeblendet)
|
||||
const inner = 0;
|
||||
const gap = 12;
|
||||
const meterPadTop = 18;
|
||||
const meterPadBottom = 10;
|
||||
const slotsRaw = env.slots?.('panel') || ['vu','ppm-ebu','tp','rms','lufs'];
|
||||
const slots = slotsRaw.filter((v) => v && v !== 'none');
|
||||
const n = slots.length;
|
||||
const setX0 = mPX + inner;
|
||||
if (!n) {
|
||||
g.save();
|
||||
g.fillStyle = LABEL_COLOR;
|
||||
g.textAlign = 'left';
|
||||
g.font = 'bold 16px ui-monospace, monospace';
|
||||
g.fillText('Keine Slots aktiv', setX0 + 10, mTop + 20);
|
||||
g.restore();
|
||||
return;
|
||||
}
|
||||
const setW = Math.floor((mWidth - (n - 1) * gap - inner * 2) / n);
|
||||
|
||||
const staticLayout = {
|
||||
mPX,
|
||||
mTop,
|
||||
mWidth,
|
||||
H,
|
||||
gap,
|
||||
slots: n,
|
||||
setX0,
|
||||
setW,
|
||||
meterPadTop,
|
||||
meterPadBottom,
|
||||
dividersEnabled: !!CONFIG.PANEL_DIVIDERS_ENABLED,
|
||||
hasSlots: n > 0,
|
||||
};
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const x = setX0 + i * (setW + gap);
|
||||
const rectM = {
|
||||
x,
|
||||
y: mTop + meterPadTop,
|
||||
w: setW,
|
||||
h: Math.max(0, (mBot - mTop) - meterPadTop - meterPadBottom)
|
||||
};
|
||||
if (i > 0 && CONFIG.PANEL_DIVIDERS_ENABLED) {
|
||||
const dividerX = x - gap / 2;
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR_DIM;
|
||||
g.lineWidth = 1;
|
||||
g.setLineDash([4, 3]);
|
||||
g.beginPath();
|
||||
g.moveTo(dividerX, mTop + meterPadTop - 6);
|
||||
g.lineTo(dividerX, mBot - meterPadBottom + 6);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
try {
|
||||
await meters.draw(g, rectM, slots[i], CONFIG);
|
||||
} catch (e) {
|
||||
// Slot neutral markieren, damit die anderen nicht leiden
|
||||
g.save();
|
||||
g.strokeStyle = 'rgba(200,80,80,.8)';
|
||||
g.setLineDash([6,4]);
|
||||
g.strokeRect(rectM.x+0.5, rectM.y+0.5, rectM.w-1, rectM.h-1);
|
||||
g.setLineDash([]);
|
||||
g.restore();
|
||||
}
|
||||
}
|
||||
|
||||
drawCachedPanelStaticLayer(g, state, staticLayout);
|
||||
}
|
||||
|
||||
function drawCachedPanelStaticLayer(g, state, layout) {
|
||||
const {
|
||||
mPX,
|
||||
mTop,
|
||||
mWidth,
|
||||
H,
|
||||
gap,
|
||||
slots,
|
||||
setX0,
|
||||
setW,
|
||||
meterPadTop,
|
||||
meterPadBottom,
|
||||
dividersEnabled,
|
||||
} = layout;
|
||||
|
||||
const key = [
|
||||
Math.round(mPX),
|
||||
Math.round(mTop),
|
||||
Math.round(mWidth),
|
||||
Math.round(H),
|
||||
gap,
|
||||
slots,
|
||||
Math.round(setX0),
|
||||
Math.round(setW),
|
||||
meterPadTop,
|
||||
meterPadBottom,
|
||||
dividersEnabled ? 1 : 0,
|
||||
].join('|');
|
||||
|
||||
const strokePad = 2;
|
||||
const width = Math.max(1, Math.round(mWidth + strokePad * 2));
|
||||
const height = Math.max(1, Math.round((H - (mTop - 10)) + strokePad * 2));
|
||||
const needsRebuild = !state.staticLayer
|
||||
|| state.staticLayer.key !== key
|
||||
|| state.staticLayer.width !== width
|
||||
|| state.staticLayer.height !== height;
|
||||
|
||||
if (needsRebuild) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const cg = canvas.getContext('2d');
|
||||
if (cg) {
|
||||
cg.save();
|
||||
cg.translate(strokePad - mPX, strokePad - (mTop - 10));
|
||||
cg.strokeStyle = FRAME_COLOR;
|
||||
cg.lineWidth = 2;
|
||||
cg.strokeRect(mPX, mTop - 10, mWidth, H - (mTop - 10));
|
||||
|
||||
if (dividersEnabled) {
|
||||
const mBot = H - 10;
|
||||
for (let i = 1; i < slots; i++) {
|
||||
const x = setX0 + i * (setW + gap);
|
||||
const dividerX = x - gap / 2;
|
||||
cg.save();
|
||||
cg.strokeStyle = FRAME_COLOR_DIM;
|
||||
cg.lineWidth = 1;
|
||||
cg.setLineDash([4, 3]);
|
||||
cg.beginPath();
|
||||
cg.moveTo(dividerX, mTop + meterPadTop - 6);
|
||||
cg.lineTo(dividerX, mBot - meterPadBottom + 6);
|
||||
cg.stroke();
|
||||
cg.restore();
|
||||
}
|
||||
}
|
||||
cg.restore();
|
||||
}
|
||||
state.staticLayer = { key, canvas, width, height };
|
||||
}
|
||||
|
||||
g.drawImage(state.staticLayer.canvas, mPX - strokePad, (mTop - 10) - strokePad);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,971 @@
|
||||
// IN USE
|
||||
// views/phase_wheel.js — Phase/Frequency Wheel (polar phase display) + meter panel
|
||||
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, PANEL_BG } from '../core/theme.js';
|
||||
|
||||
export const id = 'phase-wheel';
|
||||
|
||||
const FRAME = { left: 0, top: DEFAULT_TOP_INSET, right: 0, bottom: 0 };
|
||||
const WHEEL_METER_GAP = 8;
|
||||
const METER_WIDTH = 420;
|
||||
const METER_GAP = 8;
|
||||
const METER_SLOTS = 3;
|
||||
const METER_PAD_TOP = 30;
|
||||
const METER_PAD_BOTTOM = 20;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
const TARGET_POINTS = 1024;
|
||||
const COLOR_STOPS = [
|
||||
{ t: 0.0, color: [0, 0, 50] },
|
||||
{ t: 0.3, color: [0, 120, 180] },
|
||||
{ t: 0.6, color: [0, 205, 120] },
|
||||
{ t: 0.8, color: [210, 220, 0] },
|
||||
{ t: 1.0, color: [255, 120, 0] },
|
||||
];
|
||||
const RING_DBFS = [0, -8, -16, -24, -32, -40];
|
||||
const RING_PPM_DIN = [+5, 0, -10, -20, -30, -40, -50];
|
||||
const PHASE_GAIN_MIN_DB = -35;
|
||||
const PHASE_GAIN_MAX_DB = 35;
|
||||
const PHASE_ALIGN_TARGET = Math.pow(10, -15 / 20);
|
||||
const PHASE_AGC_TARGET_DB = linearToDb(PHASE_ALIGN_TARGET);
|
||||
const PHASE_AGC_BASE_GAIN = 1 / PHASE_ALIGN_TARGET;
|
||||
const PHASE_AGC_ATTACK_S = 0.02;
|
||||
const PHASE_AGC_RELEASE_DB_PER_S = 12;
|
||||
const PHASE_LEVEL_THRESHOLD_DB = -60;
|
||||
const PHASE_LEVEL_THRESHOLD = dbToLinear(PHASE_LEVEL_THRESHOLD_DB);
|
||||
const PHASE_IDLE_DECAY = 0.85;
|
||||
const PHASE_PHASE_SMOOTH_ALPHA = 0.08;
|
||||
const PHASE_RADIUS_SMOOTH_ALPHA = 0.18;
|
||||
const PHASE_BANDPASS_LOW_HZ = 300;
|
||||
const PHASE_BANDPASS_HIGH_HZ = 5000;
|
||||
const PHASE_TRAIL_FADE_MS = 2000;
|
||||
const PHASE_TRAIL_MIN_STEP_MS = 1000 / 45;
|
||||
const PHASE_TRAIL_MIN_DIST_PX = 1.5;
|
||||
const PHASE_SECTORS = [
|
||||
{ startDeg: -30, endDeg: 30, color: 'rgba(72,210,150,0.3)' },
|
||||
{ startDeg: 30, endDeg: 60, color: 'rgba(255,214,120,0.25)' },
|
||||
{ startDeg: -60, endDeg: -30, color: 'rgba(255,214,120,0.25)' },
|
||||
{ startDeg: 60, endDeg: 180, color: 'rgba(255,120,120,0.25)' },
|
||||
{ startDeg: -180, endDeg: -60, color: 'rgba(255,120,120,0.25)' },
|
||||
];
|
||||
|
||||
// Numerisch stabilere Hilbert-Kernel-Erstellung
|
||||
const HILBERT_KERNEL = buildHilbertKernel(33);
|
||||
const HILBERT_HALF = (HILBERT_KERNEL.length - 1) / 2;
|
||||
|
||||
// Lookup-Tables für häufig verwendete Werte
|
||||
const ANGLE_COS = new Float32Array(360);
|
||||
const ANGLE_SIN = new Float32Array(360);
|
||||
for (let i = 0; i < 360; i++) {
|
||||
const rad = (i * Math.PI) / 180;
|
||||
ANGLE_COS[i] = Math.cos(rad);
|
||||
ANGLE_SIN[i] = Math.sin(rad);
|
||||
}
|
||||
|
||||
export function init() {
|
||||
return {
|
||||
traceBuffer: new Float32Array(0),
|
||||
ampBuffer: new Float32Array(0),
|
||||
filteredL: new Float32Array(0),
|
||||
filteredR: new Float32Array(0),
|
||||
currentPhase: null,
|
||||
currentRadius: 0,
|
||||
smoothPhase: null,
|
||||
smoothRadius: 0,
|
||||
phaseAgcEnv: 1e-3,
|
||||
phaseAgcGainDb: 0,
|
||||
phaseAgcLastTs: 0,
|
||||
bandpass: createBandpassState(),
|
||||
bufferGrowthCount: 0,
|
||||
maxBufferSize: 0,
|
||||
phaseTrail: [],
|
||||
staticLayerCanvas: null,
|
||||
staticLayerKey: '',
|
||||
};
|
||||
}
|
||||
|
||||
export function destroy() {
|
||||
// Cleanup - Setze Referenzen für Garbage Collection frei
|
||||
return null;
|
||||
}
|
||||
|
||||
export function resize() {}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG, audio, utils, meters } = env;
|
||||
const slotsRaw = env.slots?.(id) || ['vu', 'ppm-ebu', 'tp'];
|
||||
const slots = slotsRaw.filter((v) => v && v !== 'none');
|
||||
const topInset = Number.isFinite(env?.topInset) ? Number(env.topInset) : FRAME.top;
|
||||
const layout = computeLayout(rect, slots.length, topInset);
|
||||
const now = getNow();
|
||||
|
||||
drawStaticLayer(g, state, rect, layout, CONFIG, slots.length);
|
||||
const xyData = extractXYData(audio);
|
||||
const gainCtrl = resolvePhaseGain(state, xyData, CONFIG);
|
||||
if (xyData.ready) {
|
||||
const trace = buildWheelTrace(state, xyData, layout.wheel, gainCtrl.gain, CONFIG, audio);
|
||||
renderWheel(g, trace, layout.wheel, state, CONFIG, now);
|
||||
} else {
|
||||
decayPhasePointer(state);
|
||||
trimPhaseTrail(state, CONFIG, now);
|
||||
drawPhaseTrail(g, layout.wheel, state, CONFIG, now);
|
||||
drawPhasePointer(g, layout.wheel, state);
|
||||
drawIdleMessage(g, layout.wheel);
|
||||
}
|
||||
|
||||
if (slots.length) {
|
||||
const panelSlotWidth = computePanelSlotWidth(layout.meter.w, slots.length);
|
||||
await renderMeterPanel(g, layout.meter, slots, CONFIG, meters, panelSlotWidth);
|
||||
drawMeterOutline(g, layout.meter);
|
||||
}
|
||||
drawPhaseAngleLabel(g, layout.wheelPanel, layout.wheel, state, now);
|
||||
}
|
||||
|
||||
function computeLayout(rect, slotCount = METER_SLOTS, topInset = FRAME.top) {
|
||||
const plotX = FRAME.left;
|
||||
const plotY = Number.isFinite(topInset) ? topInset : FRAME.top;
|
||||
const innerWidth = Math.max(200, rect.w - plotX - FRAME.right);
|
||||
const minPlotW = 200;
|
||||
const n = Math.max(0, Math.min(METER_SLOTS, slotCount | 0));
|
||||
let meterW = n > 0 ? resolveMeterWidth(rect.w, n) : 0;
|
||||
let plotW = innerWidth - (n > 0 ? (meterW + METER_GAP) : 0);
|
||||
if (plotW < minPlotW) {
|
||||
plotW = minPlotW;
|
||||
meterW = n > 0 ? Math.max(0, innerWidth - plotW - METER_GAP) : 0;
|
||||
}
|
||||
const plotH = Math.max(160, rect.h - plotY - FRAME.bottom);
|
||||
const wheelSize = Math.min(plotW, plotH);
|
||||
const wheelPanel = {
|
||||
x: plotX,
|
||||
y: plotY,
|
||||
w: plotW,
|
||||
h: plotH,
|
||||
};
|
||||
const meterX = plotX + plotW + (n > 0 ? METER_GAP : 0);
|
||||
const wheel = {
|
||||
x: wheelPanel.x + (wheelPanel.w - wheelSize) / 2,
|
||||
y: plotY + (plotH - wheelSize) / 2,
|
||||
w: wheelSize,
|
||||
h: wheelSize,
|
||||
cx: wheelPanel.x + wheelPanel.w / 2,
|
||||
cy: plotY + plotH / 2,
|
||||
radius: wheelSize / 2 - 8,
|
||||
};
|
||||
const meter = {
|
||||
x: meterX,
|
||||
y: plotY,
|
||||
w: meterW,
|
||||
h: plotH,
|
||||
};
|
||||
return { wheelPanel, wheel, meter };
|
||||
}
|
||||
|
||||
function drawStaticLayer(g, state, rect, layout, CONFIG, slotCount) {
|
||||
const layer = ensureStaticLayer(state, rect, layout, CONFIG, slotCount);
|
||||
if (!layer) {
|
||||
drawWheelBackground(g, layout.wheelPanel, layout.wheel, CONFIG);
|
||||
if (slotCount) drawMeterBackground(g, layout.meter);
|
||||
return;
|
||||
}
|
||||
g.drawImage(layer, 0, 0, rect.w, rect.h);
|
||||
}
|
||||
|
||||
function ensureStaticLayer(state, rect, layout, CONFIG, slotCount) {
|
||||
const w = Math.max(1, rect.w | 0);
|
||||
const h = Math.max(1, rect.h | 0);
|
||||
const key = [
|
||||
w, h,
|
||||
layout.wheelPanel.x, layout.wheelPanel.y, layout.wheelPanel.w, layout.wheelPanel.h,
|
||||
layout.wheel.x, layout.wheel.y, layout.wheel.w, layout.wheel.h, layout.wheel.radius,
|
||||
layout.meter.x, layout.meter.y, layout.meter.w, layout.meter.h,
|
||||
slotCount,
|
||||
!!CONFIG?.PANEL_DIVIDERS_ENABLED,
|
||||
CONFIG?.PHASE_AMPLITUDE_MODE || 'bandpass',
|
||||
].join('|');
|
||||
if (state.staticLayerCanvas && state.staticLayerKey === key) {
|
||||
return state.staticLayerCanvas;
|
||||
}
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d', { alpha: true });
|
||||
if (!ctx) return null;
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
ctx.font = 'bold 14px ui-monospace, monospace';
|
||||
drawWheelBackground(ctx, layout.wheelPanel, layout.wheel, CONFIG);
|
||||
if (slotCount) {
|
||||
drawMeterBackground(ctx, layout.meter);
|
||||
drawMeterPanelDividers(ctx, layout.meter, slotCount, CONFIG, computePanelSlotWidth(layout.meter.w, slotCount));
|
||||
}
|
||||
state.staticLayerCanvas = canvas;
|
||||
state.staticLayerKey = key;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function resolveMeterWidth(totalWidth, slotCount) {
|
||||
if (slotCount >= 3) return Math.max(METER_WIDTH, Math.round(totalWidth * 0.35));
|
||||
return slotCount === 2 ? 280 : 160;
|
||||
}
|
||||
|
||||
function drawWheelBackground(g, panel, wheel, CONFIG) {
|
||||
const ringDbValues = getRingDbValues(CONFIG);
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(panel.x, panel.y, panel.w, panel.h);
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.strokeRect(panel.x, panel.y, panel.w, panel.h);
|
||||
g.translate(wheel.cx, wheel.cy);
|
||||
drawPhaseSectors(g, wheel);
|
||||
const rings = ringDbValues.length;
|
||||
for (let i = 0; i < rings; i++) {
|
||||
const frac = ringFraction(i, rings);
|
||||
const r = wheel.radius * frac;
|
||||
g.strokeStyle = 'rgba(0,231,255,0.2)';
|
||||
g.lineWidth = i === 0 ? 1.5 : 1;
|
||||
g.setLineDash(i === 0 ? [] : [4, 4]);
|
||||
g.beginPath();
|
||||
g.arc(0, 0, r, 0, Math.PI * 2);
|
||||
g.stroke();
|
||||
}
|
||||
g.setLineDash([]);
|
||||
g.strokeStyle = 'rgba(0,231,255,0.35)';
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const angle = (Math.PI / 2) * i;
|
||||
g.beginPath();
|
||||
g.moveTo(0, 0);
|
||||
g.lineTo(Math.cos(angle) * wheel.radius, Math.sin(angle) * wheel.radius);
|
||||
g.stroke();
|
||||
}
|
||||
drawAmplitudeScale(g, wheel, ringDbValues, CONFIG);
|
||||
g.fillStyle = '#bcd';
|
||||
g.font = '12px ui-monospace, monospace';
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'middle';
|
||||
const labels = [
|
||||
{ text: '0°', angle: -Math.PI / 2 },
|
||||
{ text: '-90°', angle: Math.PI },
|
||||
{ text: '+90°', angle: 0 },
|
||||
{ text: '180°', angle: Math.PI / 2 },
|
||||
];
|
||||
for (const lbl of labels) {
|
||||
const inset = (lbl.text === '+90°' || lbl.text === '-90°') ? 34 : 24;
|
||||
const x = Math.cos(lbl.angle) * (wheel.radius - inset);
|
||||
const y = Math.sin(lbl.angle) * (wheel.radius - inset);
|
||||
g.fillText(lbl.text, x, y);
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawPhaseSectors(g, wheel) {
|
||||
const radius = Math.max(10, wheel.radius - 6);
|
||||
const width = 12;
|
||||
for (const sector of PHASE_SECTORS) {
|
||||
g.save();
|
||||
g.strokeStyle = sector.color;
|
||||
g.lineWidth = width;
|
||||
g.beginPath();
|
||||
g.arc(
|
||||
0,
|
||||
0,
|
||||
radius,
|
||||
degToCanvas(sector.startDeg),
|
||||
degToCanvas(sector.endDeg),
|
||||
false
|
||||
);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function drawIdleMessage(g, wheel) {
|
||||
g.save();
|
||||
g.fillStyle = '#bcd';
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'middle';
|
||||
g.font = 'bold 16px ui-monospace, monospace';
|
||||
g.fillText('Waiting for audio…', wheel.cx, wheel.cy);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawAmplitudeScale(g, wheel, ringDbValues, CONFIG) {
|
||||
const axisAngle = (3 * Math.PI) / 4;
|
||||
const mode = getPhaseAmplitudeMode(CONFIG);
|
||||
g.save();
|
||||
g.fillStyle = '#9fe';
|
||||
g.font = '11px ui-monospace, monospace';
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'middle';
|
||||
const rings = Array.isArray(ringDbValues) ? ringDbValues.length : 0;
|
||||
for (let i = 0; i < rings; i++) {
|
||||
const db = ringDbValues[i];
|
||||
const r = wheel.radius * ringFraction(i, rings);
|
||||
const x = Math.cos(axisAngle) * (r + 14);
|
||||
const y = Math.sin(axisAngle) * (r + 14);
|
||||
g.fillText(formatAmplitudeLabel(db, mode), x, y);
|
||||
}
|
||||
const titleX = Math.cos(axisAngle) * (wheel.radius + 34);
|
||||
const titleY = Math.sin(axisAngle) * (wheel.radius + 34);
|
||||
g.fillStyle = 'rgba(170,220,220,0.9)';
|
||||
g.font = 'bold 11px ui-monospace, monospace';
|
||||
g.fillText(mode === 'ppm-din' ? 'PPM DIN' : 'dBFS', titleX, titleY);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function degToCanvas(deg) {
|
||||
return (deg * Math.PI) / 180 - Math.PI / 2;
|
||||
}
|
||||
|
||||
function radToDeg(rad) {
|
||||
return (rad * 180) / Math.PI;
|
||||
}
|
||||
|
||||
function extractXYData(audio) {
|
||||
const xyL = audio?.xyL;
|
||||
const xyR = audio?.xyR;
|
||||
const isVec = (v) => v && (Array.isArray(v) || ArrayBuffer.isView(v));
|
||||
const ready = !!(audio?.alive && isVec(xyL) && isVec(xyR) && xyL.length && xyR.length);
|
||||
return {
|
||||
ready,
|
||||
xyL,
|
||||
xyR,
|
||||
length: ready ? Math.min(xyL.length, xyR.length) : 0,
|
||||
sampleRate: audio?.sampleRate || 48000,
|
||||
};
|
||||
}
|
||||
|
||||
function buildWheelTrace(state, xyData, wheel, gain = 1, CONFIG, audio) {
|
||||
if (!xyData.ready || !xyData.length) {
|
||||
decayPhasePointer(state);
|
||||
return null;
|
||||
}
|
||||
const filtered = preparePhaseFilteredBuffers(state, xyData);
|
||||
const amplitudeMode = getPhaseAmplitudeMode(CONFIG);
|
||||
const ringDbValues = getRingDbValues(CONFIG);
|
||||
const ppmRadiusNorm = amplitudeMode === 'ppm-din'
|
||||
? computePpmDinRadiusNorm(audio, CONFIG, ringDbValues)
|
||||
: 0;
|
||||
const targetPoints = Math.min(TARGET_POINTS, xyData.length);
|
||||
const step = Math.max(1, Math.floor(xyData.length / targetPoints));
|
||||
const radius = wheel.radius;
|
||||
let ampIdx = 0;
|
||||
let sumSin = 0;
|
||||
let sumCos = 0;
|
||||
let sumRadius = 0;
|
||||
let levelAcc = 0;
|
||||
const gainLinear = Number.isFinite(gain) ? gain : 1;
|
||||
|
||||
for (let i = 0; i < xyData.length; i += step) {
|
||||
const lRe = clamp1(filtered.L[i]);
|
||||
const rRe = clamp1(filtered.R[i]);
|
||||
const lIm = hilbertAt(filtered.L, i);
|
||||
const rIm = hilbertAt(filtered.R, i);
|
||||
const phaseL = Math.atan2(lIm, lRe);
|
||||
const phaseR = Math.atan2(rIm, rRe);
|
||||
let phaseDiff = phaseL - phaseR;
|
||||
if (!Number.isFinite(phaseDiff)) continue;
|
||||
phaseDiff = wrapAngle(phaseDiff);
|
||||
const angle = phaseDiff - Math.PI / 2;
|
||||
const magL = Math.min(1, Math.hypot(lRe, lIm));
|
||||
const magR = Math.min(1, Math.hypot(rRe, rIm));
|
||||
const amp = Math.min(1, 0.5 * (magL + magR));
|
||||
const ampScaled = Math.min(1, amp * gainLinear);
|
||||
const radiusNorm = amplitudeMode === 'ppm-din'
|
||||
? ppmRadiusNorm
|
||||
: linearToRadiusNorm(ampScaled, ringDbValues);
|
||||
ampIdx++;
|
||||
sumSin += Math.sin(angle);
|
||||
sumCos += Math.cos(angle);
|
||||
sumRadius += radiusNorm;
|
||||
levelAcc += amp * amp;
|
||||
}
|
||||
|
||||
if (ampIdx > 0) {
|
||||
const invCount = 1 / ampIdx;
|
||||
const avgAngle = Math.atan2(sumSin * invCount, sumCos * invCount);
|
||||
const avgRadius = amplitudeMode === 'ppm-din' ? ppmRadiusNorm : (sumRadius * invCount);
|
||||
const blockLevel = Math.sqrt(levelAcc * invCount);
|
||||
if (blockLevel >= PHASE_LEVEL_THRESHOLD) {
|
||||
const prevPhase = Number.isFinite(state.smoothPhase) ? state.smoothPhase : avgAngle;
|
||||
const prevRadius = Number.isFinite(state.smoothRadius) ? state.smoothRadius : avgRadius;
|
||||
state.currentPhase = avgAngle;
|
||||
state.currentRadius = avgRadius;
|
||||
state.smoothPhase = smoothAngle(prevPhase, avgAngle, PHASE_PHASE_SMOOTH_ALPHA);
|
||||
state.smoothRadius = lerp(prevRadius, avgRadius, PHASE_RADIUS_SMOOTH_ALPHA);
|
||||
} else {
|
||||
decayPhasePointer(state);
|
||||
}
|
||||
} else {
|
||||
decayPhasePointer(state);
|
||||
}
|
||||
return { count: ampIdx, radius };
|
||||
}
|
||||
|
||||
function renderWheel(g, trace, wheel, state, CONFIG, timestamp) {
|
||||
g.save();
|
||||
g.lineWidth = 1.5;
|
||||
g.globalAlpha = 0.95;
|
||||
if (trace && trace.count > 1) {
|
||||
// reserved for future trace rendering
|
||||
}
|
||||
g.restore();
|
||||
updatePhaseTrail(state, wheel, CONFIG, timestamp);
|
||||
drawPhaseTrail(g, wheel, state, CONFIG, timestamp);
|
||||
drawPhasePointer(g, wheel, state);
|
||||
}
|
||||
|
||||
function drawPhasePointer(g, wheel, state) {
|
||||
if (!Number.isFinite(state?.smoothPhase) || !Number.isFinite(state?.smoothRadius)) return;
|
||||
const phase = state.smoothPhase;
|
||||
const radiusNorm = Math.max(0, state.smoothRadius);
|
||||
if (radiusNorm <= 0.002) return;
|
||||
const length = radiusNorm * wheel.radius;
|
||||
g.save();
|
||||
g.translate(wheel.cx, wheel.cy);
|
||||
g.strokeStyle = '#ffe36e';
|
||||
g.fillStyle = '#ffe36e';
|
||||
g.lineWidth = 3;
|
||||
g.beginPath();
|
||||
g.moveTo(0, 0);
|
||||
g.lineTo(Math.cos(phase) * length, Math.sin(phase) * length);
|
||||
g.stroke();
|
||||
g.beginPath();
|
||||
g.arc(0, 0, 4, 0, Math.PI * 2);
|
||||
g.fill();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawPhaseAngleLabel(g, wheelPanel, wheel, state, nowMs) {
|
||||
const hasPhase = Number.isFinite(state?.smoothPhase) && Number.isFinite(state?.smoothRadius) && state.smoothRadius > 0.002;
|
||||
const now = Number.isFinite(nowMs) ? nowMs : getNow();
|
||||
let degText = '--°';
|
||||
if (hasPhase) {
|
||||
const prevTs = Number.isFinite(state?._phaseLabelLastTs) ? state._phaseLabelLastTs : now;
|
||||
const dt = Math.max(0, Math.min(0.25, (now - prevTs) / 1000));
|
||||
// Die Zahl soll dem Zeiger folgen. Der Zeiger ist bereits geglättet (smoothPhase).
|
||||
// Hier nur eine leichte, adaptive Glättung + Snap bei großen Sprüngen, damit Zahl und Zeiger
|
||||
// bei schnellen Änderungen nicht auseinanderlaufen.
|
||||
const targetPhase = state.smoothPhase;
|
||||
const prevPhase = Number.isFinite(state?._phaseLabelPhase) ? state._phaseLabelPhase : targetPhase;
|
||||
const diff = wrapAngle(targetPhase - prevPhase);
|
||||
const absDiff = Math.abs(diff);
|
||||
const snap = absDiff > (Math.PI / 3); // >60°: sofort folgen
|
||||
const tau = 0.18; // schneller als vorher, damit der Wert "mitkommt"
|
||||
const alpha = (snap || dt <= 0) ? 1 : (1 - Math.exp(-dt / tau));
|
||||
const labelPhase = smoothAngle(prevPhase, targetPhase, alpha);
|
||||
state._phaseLabelPhase = labelPhase;
|
||||
state._phaseLabelLastTs = now;
|
||||
|
||||
let deg = radToDeg(labelPhase) + 90;
|
||||
while (deg <= -180) deg += 360;
|
||||
while (deg > 180) deg -= 360;
|
||||
const minIntervalMs = 1000 / 30; // bis zu 30 updates/s (sonst wirkt es "hinterher")
|
||||
const prevText = typeof state?._phaseLabelText === 'string' ? state._phaseLabelText : null;
|
||||
const prevDisplayTs = Number.isFinite(state?._phaseLabelDisplayTs) ? state._phaseLabelDisplayTs : 0;
|
||||
const nextText = `${deg > 0 ? '+' : ''}${deg.toFixed(0)}°`;
|
||||
if (!prevText || snap || (now - prevDisplayTs) >= minIntervalMs) {
|
||||
degText = nextText;
|
||||
state._phaseLabelText = degText;
|
||||
state._phaseLabelDisplayTs = now;
|
||||
} else {
|
||||
degText = prevText;
|
||||
}
|
||||
} else {
|
||||
if (state) {
|
||||
state._phaseLabelPhase = null;
|
||||
state._phaseLabelLastTs = now;
|
||||
state._phaseLabelText = '--°';
|
||||
state._phaseLabelDisplayTs = now;
|
||||
}
|
||||
}
|
||||
const boxPadding = 7;
|
||||
const boxW = 96;
|
||||
const boxH = 42;
|
||||
const panelX = Number.isFinite(wheelPanel?.x) ? wheelPanel.x : 0;
|
||||
const panelY = Number.isFinite(wheelPanel?.y) ? wheelPanel.y : wheel.y;
|
||||
const boxX = panelX + 12;
|
||||
const boxY = panelY + 12;
|
||||
g.save();
|
||||
g.fillStyle = 'rgba(0, 0, 0, 0.55)';
|
||||
g.strokeStyle = 'rgba(0, 231, 255, 0.65)';
|
||||
g.lineWidth = 1;
|
||||
g.fillRect(boxX, boxY, boxW, boxH);
|
||||
g.strokeRect(boxX, boxY, boxW, boxH);
|
||||
g.fillStyle = '#ffe36e';
|
||||
g.font = 'bold 15px ui-monospace, monospace';
|
||||
g.textAlign = 'center';
|
||||
g.textBaseline = 'middle';
|
||||
g.fillText('Phase', boxX + boxW / 2, boxY + boxPadding + 4);
|
||||
g.font = 'bold 19px ui-monospace, monospace';
|
||||
g.fillText(degText, boxX + boxW / 2, boxY + boxH - boxPadding - 2);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function computePanelSlotWidth(canvasWidth, slotCount = METER_SLOTS) {
|
||||
const n = Math.max(1, Math.min(METER_SLOTS, slotCount | 0));
|
||||
const avail = Math.max(200, canvasWidth);
|
||||
const totalGap = (n - 1) * 12;
|
||||
const usable = avail - totalGap;
|
||||
return Math.floor(usable / n);
|
||||
}
|
||||
|
||||
async function renderMeterPanel(g, meterLayout, slots, CONFIG, meters, panelSlotWidth) {
|
||||
const slotCount = Array.isArray(slots) ? slots.length : 0;
|
||||
if (!slotCount || meterLayout?.w <= 0) return;
|
||||
const gap = 12;
|
||||
const slotW = panelSlotWidth;
|
||||
const totalSlotW = slotW * slotCount + gap * (slotCount - 1);
|
||||
const startX = meterLayout.x + Math.max(0, Math.floor((meterLayout.w - totalSlotW) / 2));
|
||||
|
||||
for (let i = 0; i < slotCount; i++) {
|
||||
const rectM = {
|
||||
x: startX + i * (slotW + gap),
|
||||
y: meterLayout.y + METER_PAD_TOP,
|
||||
w: slotW,
|
||||
h: Math.max(40, meterLayout.h - METER_PAD_TOP - METER_PAD_BOTTOM - METER_EXTRA_BOTTOM_PAD),
|
||||
};
|
||||
|
||||
try {
|
||||
await meters.draw(g, rectM, slots[i], CONFIG);
|
||||
} catch (e) {
|
||||
console.warn(`Meter ${slots[i]} draw error:`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawMeterPanelDividers(g, meterLayout, slotCount, CONFIG, panelSlotWidth) {
|
||||
if (!meterLayout?.w || !slotCount || !CONFIG?.PANEL_DIVIDERS_ENABLED) return;
|
||||
const gap = 12;
|
||||
const slotW = panelSlotWidth;
|
||||
const totalSlotW = slotW * slotCount + gap * (slotCount - 1);
|
||||
const startX = meterLayout.x + Math.max(0, Math.floor((meterLayout.w - totalSlotW) / 2));
|
||||
for (let i = 1; i < slotCount; i++) {
|
||||
const dividerX = startX + i * slotW + (i - 1) * gap + gap / 2;
|
||||
g.save();
|
||||
g.strokeStyle = 'rgba(0,231,255,0.4)';
|
||||
g.lineWidth = 1;
|
||||
g.setLineDash([4, 3]);
|
||||
g.beginPath();
|
||||
g.moveTo(dividerX, meterLayout.y + 6);
|
||||
g.lineTo(dividerX, meterLayout.y + meterLayout.h - 6);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
}
|
||||
|
||||
function drawMeterOutline(g, meterRect) {
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.strokeRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawMeterBackground(g, meterRect) {
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function updatePhaseTrail(state, wheel, CONFIG, now) {
|
||||
if (!state.phaseTrail) state.phaseTrail = [];
|
||||
if (!CONFIG?.PHASE_TRAIL_ENABLED) {
|
||||
state.phaseTrail.length = 0;
|
||||
return;
|
||||
}
|
||||
const radiusNorm = Math.max(0, Number(state?.smoothRadius) || 0);
|
||||
if (radiusNorm > 0.002 && Number.isFinite(state?.smoothPhase)) {
|
||||
const length = radiusNorm * wheel.radius;
|
||||
const x = wheel.cx + Math.cos(state.smoothPhase) * length;
|
||||
const y = wheel.cy + Math.sin(state.smoothPhase) * length;
|
||||
const color = trailColorForAngle(state.smoothPhase);
|
||||
const last = state.phaseTrail.length ? state.phaseTrail[state.phaseTrail.length - 1] : null;
|
||||
if (!last) {
|
||||
state.phaseTrail.push({ x, y, t: now, color });
|
||||
} else {
|
||||
const dt = now - last.t;
|
||||
const dx = x - last.x;
|
||||
const dy = y - last.y;
|
||||
const dist2 = dx * dx + dy * dy;
|
||||
if (dt >= PHASE_TRAIL_MIN_STEP_MS || dist2 >= PHASE_TRAIL_MIN_DIST_PX * PHASE_TRAIL_MIN_DIST_PX || last.color !== color) {
|
||||
state.phaseTrail.push({ x, y, t: now, color });
|
||||
} else {
|
||||
last.x = x;
|
||||
last.y = y;
|
||||
last.t = now;
|
||||
last.color = color;
|
||||
}
|
||||
}
|
||||
}
|
||||
trimPhaseTrail(state, CONFIG, now);
|
||||
}
|
||||
|
||||
function trimPhaseTrail(state, CONFIG, now) {
|
||||
if (!state.phaseTrail) state.phaseTrail = [];
|
||||
if (!CONFIG?.PHASE_TRAIL_ENABLED) {
|
||||
state.phaseTrail.length = 0;
|
||||
return;
|
||||
}
|
||||
const cutoff = now - PHASE_TRAIL_FADE_MS;
|
||||
let write = 0;
|
||||
for (let i = 0; i < state.phaseTrail.length; i++) {
|
||||
const pt = state.phaseTrail[i];
|
||||
if (pt.t >= cutoff) {
|
||||
state.phaseTrail[write++] = pt;
|
||||
}
|
||||
}
|
||||
state.phaseTrail.length = write;
|
||||
}
|
||||
|
||||
function drawPhaseTrail(g, wheel, state, CONFIG, now) {
|
||||
if (!CONFIG?.PHASE_TRAIL_ENABLED) return;
|
||||
const pts = state.phaseTrail;
|
||||
if (!pts || pts.length < 2) return;
|
||||
g.save();
|
||||
g.lineCap = 'round';
|
||||
g.lineWidth = 2.5;
|
||||
for (let i = 1; i < pts.length; i++) {
|
||||
const prev = pts[i - 1];
|
||||
const curr = pts[i];
|
||||
const age = Math.max(0, now - curr.t);
|
||||
const alpha = Math.max(0, 1 - age / PHASE_TRAIL_FADE_MS);
|
||||
if (alpha <= 0) continue;
|
||||
g.globalAlpha = alpha;
|
||||
g.strokeStyle = curr.color;
|
||||
g.beginPath();
|
||||
g.moveTo(prev.x, prev.y);
|
||||
g.lineTo(curr.x, curr.y);
|
||||
g.stroke();
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function trailColorForAngle(angle) {
|
||||
let deg = radToDeg(angle) + 90;
|
||||
while (deg <= -180) deg += 360;
|
||||
while (deg > 180) deg -= 360;
|
||||
const centered = deg;
|
||||
if (Math.abs(centered) <= 30) return '#48d296';
|
||||
if (Math.abs(centered) <= 60) return '#ffd678';
|
||||
return '#ff7a78';
|
||||
}
|
||||
|
||||
function clamp1(value) {
|
||||
if (!Number.isFinite(value)) return 0;
|
||||
return Math.max(-1, Math.min(1, value));
|
||||
}
|
||||
|
||||
function ringFraction(index, ringCount) {
|
||||
const n = Math.max(1, ringCount | 0);
|
||||
const idx = Math.max(0, Math.min(n - 1, index | 0));
|
||||
return (n - idx) / n;
|
||||
}
|
||||
|
||||
function getPhaseAmplitudeMode(CONFIG) {
|
||||
return CONFIG?.PHASE_AMPLITUDE_MODE === 'ppm-din' ? 'ppm-din' : 'bandpass';
|
||||
}
|
||||
|
||||
function getRingDbValues(CONFIG) {
|
||||
return getPhaseAmplitudeMode(CONFIG) === 'ppm-din' ? RING_PPM_DIN : RING_DBFS;
|
||||
}
|
||||
|
||||
function formatAmplitudeLabel(db, mode) {
|
||||
const num = Number(db);
|
||||
if (!Number.isFinite(num)) return '';
|
||||
if (mode === 'ppm-din') return num > 0 ? `+${num}` : `${num}`;
|
||||
return `${num} dB`;
|
||||
}
|
||||
|
||||
function dbToRadiusNorm(db, ringDbValues) {
|
||||
if (!Array.isArray(ringDbValues) || !ringDbValues.length) return 0;
|
||||
const n = ringDbValues.length;
|
||||
const maxDb = ringDbValues[0];
|
||||
const minDb = ringDbValues[n - 1];
|
||||
if (!Number.isFinite(db)) return ringFraction(n - 1, n);
|
||||
if (db >= maxDb) return ringFraction(0, n);
|
||||
if (db <= minDb) return ringFraction(n - 1, n);
|
||||
for (let i = 0; i < n - 1; i++) {
|
||||
const hiDb = ringDbValues[i];
|
||||
const loDb = ringDbValues[i + 1];
|
||||
if (db <= hiDb && db >= loDb) {
|
||||
const span = Math.max(1e-10, hiDb - loDb);
|
||||
const t = (db - loDb) / span;
|
||||
const hiFrac = ringFraction(i, n);
|
||||
const loFrac = ringFraction(i + 1, n);
|
||||
return loFrac + (hiFrac - loFrac) * t;
|
||||
}
|
||||
}
|
||||
return ringFraction(n - 1, n);
|
||||
}
|
||||
|
||||
function linearToRadiusNorm(amp, ringDbValues) {
|
||||
const ampDb = linearToDb(Math.max(1e-10, Math.min(1, amp)));
|
||||
return dbToRadiusNorm(ampDb, ringDbValues);
|
||||
}
|
||||
|
||||
function mapPpmRawToDin(raw, cfg) {
|
||||
const minDb = Number.isFinite(cfg?.PPM_DIN_BOTTOM) ? cfg.PPM_DIN_BOTTOM : -50;
|
||||
const maxDb = Number.isFinite(cfg?.PPM_DIN_TOP) ? cfg.PPM_DIN_TOP : +5;
|
||||
if (!Number.isFinite(raw)) return minDb;
|
||||
const base = Number.isFinite(cfg?.PPM_REF_DBFS_PEAK_FOR_0_DBU) ? cfg.PPM_REF_DBFS_PEAK_FOR_0_DBU : -15;
|
||||
const effOff = (cfg?.PPM_DIN_MODE === 'al_minus6' ? -6 : -9) + (Number(cfg?.PPM_DIN_TRIM_DB) || 0);
|
||||
const mapped = (raw - base) + effOff;
|
||||
return Math.max(minDb, Math.min(maxDb, mapped));
|
||||
}
|
||||
|
||||
function computePpmDinRadiusNorm(audio, cfg, ringDbValues) {
|
||||
const rawL = Number.isFinite(audio?.ppmDinL) ? audio.ppmDinL : audio?.ppmL;
|
||||
const rawR = Number.isFinite(audio?.ppmDinR) ? audio.ppmDinR : audio?.ppmR;
|
||||
const l = mapPpmRawToDin(rawL, cfg);
|
||||
const r = mapPpmRawToDin(rawR, cfg);
|
||||
const db = Math.max(l, r);
|
||||
return dbToRadiusNorm(db, ringDbValues);
|
||||
}
|
||||
|
||||
function createBandpassState() {
|
||||
return {
|
||||
sampleRate: 0,
|
||||
hpAlpha: 0,
|
||||
lpAlpha: 0,
|
||||
channels: {
|
||||
L: { hpX: 0, hpY: 0, lpY: 0 },
|
||||
R: { hpX: 0, hpY: 0, lpY: 0 },
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function ensureBandpassCoeffs(state, sampleRate) {
|
||||
if (!state.bandpass) state.bandpass = createBandpassState();
|
||||
const sr = Math.max(8000, Math.round(sampleRate) || 48000);
|
||||
if (state.bandpass.sampleRate === sr) return;
|
||||
state.bandpass.sampleRate = sr;
|
||||
state.bandpass.hpAlpha = computeHighpassAlpha(sr, PHASE_BANDPASS_LOW_HZ);
|
||||
state.bandpass.lpAlpha = computeLowpassAlpha(sr, PHASE_BANDPASS_HIGH_HZ);
|
||||
}
|
||||
|
||||
function computeHighpassAlpha(sampleRate, cutoff) {
|
||||
const rc = 1 / (2 * Math.PI * Math.max(1, cutoff));
|
||||
const dt = 1 / Math.max(1, sampleRate);
|
||||
return Math.max(0, Math.min(1, rc / (rc + dt)));
|
||||
}
|
||||
|
||||
function computeLowpassAlpha(sampleRate, cutoff) {
|
||||
const rc = 1 / (2 * Math.PI * Math.max(1, cutoff));
|
||||
const dt = 1 / Math.max(1, sampleRate);
|
||||
return Math.max(0, Math.min(1, dt / (rc + dt)));
|
||||
}
|
||||
|
||||
function ensureFilteredBuffers(state, length) {
|
||||
const neededLength = Math.ceil(length * 1.1); // 10% Puffer für Stabilität
|
||||
if (!state.filteredL || state.filteredL.length < neededLength) {
|
||||
state.filteredL = new Float32Array(neededLength);
|
||||
}
|
||||
if (!state.filteredR || state.filteredR.length < neededLength) {
|
||||
state.filteredR = new Float32Array(neededLength);
|
||||
}
|
||||
return { L: state.filteredL, R: state.filteredR };
|
||||
}
|
||||
|
||||
function applyBandpassSample(sample, channelState, bandpassState) {
|
||||
const hpAlpha = bandpassState.hpAlpha;
|
||||
const lpAlpha = bandpassState.lpAlpha;
|
||||
|
||||
if (!Number.isFinite(sample)) sample = 0;
|
||||
|
||||
const hpY = hpAlpha * (channelState.hpY + sample - channelState.hpX);
|
||||
channelState.hpY = Number.isFinite(hpY) ? hpY : 0;
|
||||
channelState.hpX = sample;
|
||||
|
||||
const lpY = lpAlpha * hpY + (1 - lpAlpha) * channelState.lpY;
|
||||
channelState.lpY = Number.isFinite(lpY) ? lpY : 0;
|
||||
|
||||
return lpY;
|
||||
}
|
||||
|
||||
function preparePhaseFilteredBuffers(state, xyData) {
|
||||
ensureBandpassCoeffs(state, xyData.sampleRate || 48000);
|
||||
const filtered = ensureFilteredBuffers(state, xyData.length);
|
||||
|
||||
// Reset channel states if they contain NaN/Infinity
|
||||
if (!Number.isFinite(state.bandpass.channels.L.hpY)) {
|
||||
state.bandpass.channels.L = { hpX: 0, hpY: 0, lpY: 0 };
|
||||
}
|
||||
if (!Number.isFinite(state.bandpass.channels.R.hpY)) {
|
||||
state.bandpass.channels.R = { hpX: 0, hpY: 0, lpY: 0 };
|
||||
}
|
||||
|
||||
for (let i = 0; i < xyData.length; i++) {
|
||||
filtered.L[i] = applyBandpassSample(
|
||||
xyData.xyL[i],
|
||||
state.bandpass.channels.L,
|
||||
state.bandpass
|
||||
);
|
||||
filtered.R[i] = applyBandpassSample(
|
||||
xyData.xyR[i],
|
||||
state.bandpass.channels.R,
|
||||
state.bandpass
|
||||
);
|
||||
}
|
||||
return filtered;
|
||||
}
|
||||
|
||||
function decayPhasePointer(state) {
|
||||
const prevPhase = Number.isFinite(state.currentPhase) ? state.currentPhase : 0;
|
||||
const prevRadius = Number.isFinite(state.currentRadius) ? state.currentRadius : 0;
|
||||
const decayedRadius = prevRadius * PHASE_IDLE_DECAY;
|
||||
state.currentPhase = prevPhase;
|
||||
state.currentRadius = decayedRadius;
|
||||
const prevSmoothPhase = Number.isFinite(state.smoothPhase) ? state.smoothPhase : prevPhase;
|
||||
const prevSmoothRadius = Number.isFinite(state.smoothRadius) ? state.smoothRadius : decayedRadius;
|
||||
state.smoothPhase = smoothAngle(prevSmoothPhase, prevPhase, PHASE_PHASE_SMOOTH_ALPHA * 0.5);
|
||||
state.smoothRadius = lerp(prevSmoothRadius, decayedRadius, PHASE_RADIUS_SMOOTH_ALPHA);
|
||||
}
|
||||
|
||||
function resolvePhaseGain(state, xyData, CONFIG) {
|
||||
const gainDb = clampPhaseGain(CONFIG?.PHASE_DISPLAY_GAIN_DB ?? 0);
|
||||
const allowAgc = CONFIG?.PHASE_AGC_ENABLED && getPhaseAmplitudeMode(CONFIG) !== 'ppm-din';
|
||||
if (allowAgc && xyData?.ready) {
|
||||
const auto = computePhaseAgcGain(state, xyData);
|
||||
return { gainDb: auto.gainDb, gain: auto.gain * PHASE_AGC_BASE_GAIN };
|
||||
}
|
||||
state.phaseAgcGainDb = gainDb;
|
||||
return { gainDb, gain: dbToLinear(gainDb) };
|
||||
}
|
||||
|
||||
function wrapAngle(rad) {
|
||||
if (!Number.isFinite(rad)) return 0;
|
||||
|
||||
// Verbesserte Winkel-Normalisierung mit besserer numerischer Stabilität
|
||||
const TWO_PI = Math.PI * 2;
|
||||
const normalized = ((rad % TWO_PI) + TWO_PI) % TWO_PI;
|
||||
|
||||
// Sicherstellen, dass der Winkel im Bereich [-π, π] liegt
|
||||
return normalized > Math.PI ? normalized - TWO_PI : normalized;
|
||||
}
|
||||
|
||||
function smoothAngle(prev, next, alpha) {
|
||||
if (!Number.isFinite(prev)) return next;
|
||||
if (!Number.isFinite(next)) return prev;
|
||||
const diff = wrapAngle(next - prev);
|
||||
return wrapAngle(prev + diff * Math.max(0, Math.min(1, alpha)));
|
||||
}
|
||||
|
||||
function lerp(a, b, t) {
|
||||
if (!Number.isFinite(a)) return b;
|
||||
if (!Number.isFinite(b)) return a;
|
||||
const clampedT = Math.max(0, Math.min(1, t));
|
||||
return a + (b - a) * clampedT;
|
||||
}
|
||||
|
||||
function hilbertAt(buffer, idx) {
|
||||
if (!buffer || idx < 0 || idx >= buffer.length) return 0;
|
||||
|
||||
let acc = 0;
|
||||
for (let k = 0; k < HILBERT_KERNEL.length; k++) {
|
||||
const src = idx + k - HILBERT_HALF;
|
||||
if (src < 0 || src >= buffer.length) continue;
|
||||
const sample = buffer[src];
|
||||
const kernel = HILBERT_KERNEL[k];
|
||||
if (Number.isFinite(sample) && Number.isFinite(kernel)) {
|
||||
acc += sample * kernel;
|
||||
}
|
||||
}
|
||||
return Number.isFinite(acc) ? acc : 0;
|
||||
}
|
||||
|
||||
function buildHilbertKernel(size = 33) {
|
||||
const taps = size % 2 === 0 ? size + 1 : size;
|
||||
const mid = (taps - 1) / 2;
|
||||
const kernel = new Float32Array(taps);
|
||||
|
||||
for (let n = 0; n < taps; n++) {
|
||||
const k = n - mid;
|
||||
|
||||
// Verbesserte numerische Stabilität + even k = 0 wie idealer Hilbert-Kernel
|
||||
if (Math.abs(k) < 1e-10 || k % 2 === 0) {
|
||||
kernel[n] = 0;
|
||||
continue;
|
||||
}
|
||||
|
||||
const window = 0.54 - 0.46 * Math.cos((2 * Math.PI * n) / Math.max(1, taps - 1));
|
||||
const value = (2 / (Math.PI * k)) * window;
|
||||
|
||||
// Sicherstellen, dass der Wert finite ist
|
||||
kernel[n] = Number.isFinite(value) ? value : 0;
|
||||
}
|
||||
return kernel;
|
||||
}
|
||||
|
||||
function computePhaseAgcGain(state, xyData) {
|
||||
const now = getNow();
|
||||
const dt = state.phaseAgcLastTs ? Math.max(0, (now - state.phaseAgcLastTs) / 1000) : 0;
|
||||
state.phaseAgcLastTs = now;
|
||||
|
||||
const peak = measurePhasePeak(xyData);
|
||||
let env = Number.isFinite(state.phaseAgcEnv) && state.phaseAgcEnv > 0 ? state.phaseAgcEnv : 1e-3;
|
||||
|
||||
if (peak >= env) {
|
||||
const alpha = 1 - Math.exp(-Math.max(dt, 0) / Math.max(0.001, PHASE_AGC_ATTACK_S));
|
||||
env = env + (peak - env) * Math.min(1, alpha || 1);
|
||||
} else {
|
||||
const releaseFactor = Math.pow(10, -PHASE_AGC_RELEASE_DB_PER_S * Math.max(dt, 0) / 20);
|
||||
env = Math.max(peak, env * releaseFactor);
|
||||
}
|
||||
|
||||
env = Math.max(1e-8, env); // Verbesserter minimaler Wert
|
||||
state.phaseAgcEnv = env;
|
||||
|
||||
const envDb = linearToDb(env);
|
||||
let gainDb = PHASE_AGC_TARGET_DB - envDb;
|
||||
|
||||
if (gainDb > PHASE_GAIN_MAX_DB) gainDb = PHASE_GAIN_MAX_DB;
|
||||
if (gainDb < PHASE_GAIN_MIN_DB) gainDb = PHASE_GAIN_MIN_DB;
|
||||
|
||||
state.phaseAgcGainDb = gainDb;
|
||||
return { gainDb, gain: dbToLinear(gainDb) };
|
||||
}
|
||||
|
||||
function measurePhasePeak(xyData) {
|
||||
if (!xyData || !xyData.ready) return 1e-4; // Verbesserter Default-Wert
|
||||
|
||||
let peak = 1e-8; // Höhere Präzision
|
||||
const len = Math.min(xyData.length, 1000); // Begrenzung für Performance
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const sample = Math.max(
|
||||
Math.abs(xyData.xyL[i] || 0),
|
||||
Math.abs(xyData.xyR[i] || 0)
|
||||
);
|
||||
if (sample > peak) peak = sample;
|
||||
}
|
||||
|
||||
return Math.max(1e-8, peak); // Sicherstellen, dass nicht 0 zurückgegeben wird
|
||||
}
|
||||
|
||||
function clampPhaseGain(db) {
|
||||
let val = Number(db);
|
||||
if (!Number.isFinite(val)) val = 0;
|
||||
if (val < PHASE_GAIN_MIN_DB) val = PHASE_GAIN_MIN_DB;
|
||||
if (val > PHASE_GAIN_MAX_DB) val = PHASE_GAIN_MAX_DB;
|
||||
return val;
|
||||
}
|
||||
|
||||
function getNow() {
|
||||
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
|
||||
return performance.now();
|
||||
}
|
||||
return Date.now();
|
||||
}
|
||||
|
||||
function linearToDb(value) {
|
||||
if (value <= 1e-10) return -200; // Explizite Behandlung sehr kleiner Werte
|
||||
const result = 20 * Math.log10(value);
|
||||
return Number.isFinite(result) ? result : -200;
|
||||
}
|
||||
|
||||
function dbToLinear(db) {
|
||||
if (!Number.isFinite(db)) return 0;
|
||||
if (db < -200) return 0;
|
||||
const result = Math.pow(10, db / 20);
|
||||
return Number.isFinite(result) ? result : 0;
|
||||
}
|
||||
@@ -0,0 +1,588 @@
|
||||
// views/quad_view.js — Quad-View: vier Plots (2x2) + optionales Meter-Panel (wie Split-View)
|
||||
|
||||
import * as viewGoni from './goniometer_rtw.js';
|
||||
import * as viewPhaseWheel from './phase_wheel.js';
|
||||
import * as viewPanel from './panel.js';
|
||||
import * as viewRealtime from './realtime.js';
|
||||
import * as viewClassicNeedles from './classic_needles.js';
|
||||
import * as viewPeakHistory from './peak_history.js';
|
||||
import * as viewClock from './clock.js';
|
||||
import * as viewWaveform from './waveform.js';
|
||||
import * as viewSpectrogram from './spectrogram.js';
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, PANEL_BG } from '../core/theme.js';
|
||||
|
||||
export const id = 'quad-view';
|
||||
|
||||
const CONTENT_TOP = DEFAULT_TOP_INSET;
|
||||
const CONTENT_BOTTOM = 0;
|
||||
|
||||
const CHILD_VIEWS = {
|
||||
'realtime': viewRealtime,
|
||||
'classic-needles': viewClassicNeedles,
|
||||
'peak-history': viewPeakHistory,
|
||||
'goniometer-rtw': viewGoni,
|
||||
'phase-wheel': viewPhaseWheel,
|
||||
'panel': viewPanel,
|
||||
'clock': viewClock,
|
||||
'waveform': viewWaveform,
|
||||
'spectrogram': viewSpectrogram,
|
||||
};
|
||||
const ALLOWED_CHILD_VIEW_IDS = new Set(['none', ...Object.keys(CHILD_VIEWS)]);
|
||||
const ALLOWED_PLOT_IDS = new Set(['none', 'phase-wheel', 'realtime', 'goniometer-rtw', 'peak-history', 'classic-needles', 'panel', 'clock', 'waveform', 'spectrogram']);
|
||||
const ALLOWED_METER_IDS = new Set(['none', 'vu', 'ppm-ebu', 'ppm-din', 'tp', 'hifi-peak', 'rms', 'lufs', 'stopwatch']);
|
||||
const ALLOWED_METER_POSITIONS = new Set(['left', 'center', 'right']);
|
||||
|
||||
const OUTER_GAP = 10;
|
||||
const SIDE_INNER_GAP = 8;
|
||||
const ROW_GAP = 10;
|
||||
const METER_GAP = 12;
|
||||
const METER_W_DEFAULT = 140;
|
||||
const METER_W_MIN = 90;
|
||||
const MIN_PLOT_W = 240;
|
||||
const METER_PAD_TOP = 15;
|
||||
const METER_PAD_BOTTOM = 5;
|
||||
const METER_SLOT_SHRINK = 24;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
|
||||
function sanitizeChildId(val, fallback) {
|
||||
return ALLOWED_CHILD_VIEW_IDS.has(val) ? val : fallback;
|
||||
}
|
||||
|
||||
function sanitizePlotId(val, fallback) {
|
||||
return ALLOWED_PLOT_IDS.has(val) ? val : fallback;
|
||||
}
|
||||
|
||||
function sanitizeMeterId(val, fallback) {
|
||||
const id = String(val || '');
|
||||
return ALLOWED_METER_IDS.has(id) ? id : fallback;
|
||||
}
|
||||
|
||||
function sanitizeMeterPos(val, fallback) {
|
||||
const id = String(val || '');
|
||||
return ALLOWED_METER_POSITIONS.has(id) ? id : fallback;
|
||||
}
|
||||
|
||||
function clampMeterCount(val) {
|
||||
const n = Number(val);
|
||||
if (!Number.isFinite(n)) return 0;
|
||||
return Math.max(0, Math.min(3, n | 0));
|
||||
}
|
||||
|
||||
async function withClippedSubRect(g, rect, fn) {
|
||||
g.save();
|
||||
g.translate(rect.x, rect.y);
|
||||
g.beginPath();
|
||||
g.rect(0, 0, rect.w, rect.h);
|
||||
g.clip();
|
||||
try { return await fn(); } finally { g.restore(); }
|
||||
}
|
||||
|
||||
function drawSubframe(g, rect) {
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.strokeRect(rect.x + 0.5, rect.y + 0.5, Math.max(0, rect.w - 1), Math.max(0, rect.h - 1));
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function createStaticLayerCanvas(width, height) {
|
||||
const w = Math.max(1, width | 0);
|
||||
const h = Math.max(1, height | 0);
|
||||
if (typeof OffscreenCanvas !== 'undefined') return new OffscreenCanvas(w, h);
|
||||
const c = document.createElement('canvas');
|
||||
c.width = w;
|
||||
c.height = h;
|
||||
return c;
|
||||
}
|
||||
|
||||
function drawCachedStaticLayer(state, g, layerId, key, rect, build) {
|
||||
if (!state || !rect || rect.w <= 0 || rect.h <= 0) return;
|
||||
if (!state.staticLayers) state.staticLayers = new Map();
|
||||
const fullKey = `${layerId}:${key}:${Math.max(0, rect.w | 0)}x${Math.max(0, rect.h | 0)}`;
|
||||
let layer = state.staticLayers.get(fullKey);
|
||||
if (!layer) {
|
||||
const canvas = createStaticLayerCanvas(rect.w, rect.h);
|
||||
const ctx = canvas.getContext('2d');
|
||||
build(ctx, rect);
|
||||
layer = { canvas };
|
||||
state.staticLayers.set(fullKey, layer);
|
||||
}
|
||||
g.drawImage(layer.canvas, rect.x, rect.y);
|
||||
}
|
||||
|
||||
function drawEmptyPlot(state, g, rect, label) {
|
||||
drawCachedStaticLayer(state, g, 'empty-plot', String(label || '(leer)'), rect, (lg) => {
|
||||
lg.fillStyle = PANEL_BG;
|
||||
lg.fillRect(0, 0, rect.w, rect.h);
|
||||
lg.fillStyle = '#9aa';
|
||||
lg.textAlign = 'left';
|
||||
lg.font = 'bold 14px ui-monospace, monospace';
|
||||
lg.fillText(label || '(leer)', 12, 32);
|
||||
lg.textAlign = 'start';
|
||||
});
|
||||
}
|
||||
|
||||
function readQuadMeters(CONFIG) {
|
||||
const count = clampMeterCount(CONFIG?.QUAD_VIEW_METER_COUNT);
|
||||
const slots = [
|
||||
{
|
||||
id: sanitizeMeterId(CONFIG?.QUAD_VIEW_METER_1, 'vu'),
|
||||
pos: sanitizeMeterPos(CONFIG?.QUAD_VIEW_METER_1_POS, 'right'),
|
||||
},
|
||||
{
|
||||
id: sanitizeMeterId(CONFIG?.QUAD_VIEW_METER_2, 'ppm-din'),
|
||||
pos: sanitizeMeterPos(CONFIG?.QUAD_VIEW_METER_2_POS, 'right'),
|
||||
},
|
||||
{
|
||||
id: sanitizeMeterId(CONFIG?.QUAD_VIEW_METER_3, 'lufs'),
|
||||
pos: sanitizeMeterPos(CONFIG?.QUAD_VIEW_METER_3_POS, 'right'),
|
||||
},
|
||||
].slice(0, count);
|
||||
return slots;
|
||||
}
|
||||
|
||||
function groupMetersByPosition(slots) {
|
||||
const out = { left: [], center: [], right: [] };
|
||||
for (const s of slots || []) {
|
||||
if (!s) continue;
|
||||
if (s.pos === 'left') out.left.push(s.id);
|
||||
else if (s.pos === 'center') out.center.push(s.id);
|
||||
else out.right.push(s.id);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function computeBaseLayout(rect, slots) {
|
||||
const contentH = Math.max(0, rect.h - CONTENT_TOP - CONTENT_BOTTOM);
|
||||
const hasContent = contentH >= 140;
|
||||
const BLOCK_GAP = SIDE_INNER_GAP;
|
||||
|
||||
let effectiveSlots = hasContent ? (Array.isArray(slots) ? slots.slice(0, 3) : []) : [];
|
||||
while (true) {
|
||||
const grouped = groupMetersByPosition(effectiveSlots);
|
||||
const leftCount = grouped.left.length;
|
||||
const centerCount = grouped.center.length;
|
||||
const rightCount = grouped.right.length;
|
||||
const totalSlots = leftCount + centerCount + rightCount;
|
||||
const hasLeftMeters = leftCount > 0;
|
||||
const hasCenterMeters = centerCount > 0;
|
||||
const hasRightMeters = rightCount > 0;
|
||||
|
||||
const interBlockGaps =
|
||||
(hasLeftMeters ? BLOCK_GAP : 0) +
|
||||
(hasRightMeters ? BLOCK_GAP : 0) +
|
||||
(hasCenterMeters ? (2 * BLOCK_GAP) : OUTER_GAP);
|
||||
|
||||
const internalGaps =
|
||||
Math.max(0, leftCount - 1) * METER_GAP +
|
||||
Math.max(0, centerCount - 1) * METER_GAP +
|
||||
Math.max(0, rightCount - 1) * METER_GAP;
|
||||
|
||||
const minRequired = 2 * MIN_PLOT_W + interBlockGaps + internalGaps;
|
||||
const remainingForMeters = rect.w - minRequired;
|
||||
|
||||
let slotW = 0;
|
||||
if (totalSlots > 0) {
|
||||
slotW = Math.floor(remainingForMeters / totalSlots);
|
||||
slotW = Math.min(METER_W_DEFAULT, slotW);
|
||||
}
|
||||
|
||||
if (totalSlots > 0 && slotW < METER_W_MIN && effectiveSlots.length) {
|
||||
effectiveSlots = effectiveSlots.slice(0, -1);
|
||||
continue;
|
||||
}
|
||||
if (totalSlots > 0) slotW = Math.max(METER_W_MIN, Math.min(METER_W_DEFAULT, slotW));
|
||||
|
||||
const leftW = hasLeftMeters ? (leftCount * slotW + Math.max(0, leftCount - 1) * METER_GAP) : 0;
|
||||
const centerW = hasCenterMeters ? (centerCount * slotW + Math.max(0, centerCount - 1) * METER_GAP) : 0;
|
||||
const rightW = hasRightMeters ? (rightCount * slotW + Math.max(0, rightCount - 1) * METER_GAP) : 0;
|
||||
|
||||
const metersTotalW = leftW + centerW + rightW;
|
||||
const plotAvail = Math.max(0, rect.w - interBlockGaps - metersTotalW);
|
||||
const leftPlotW = Math.floor(plotAvail / 2);
|
||||
const rightPlotW = plotAvail - leftPlotW;
|
||||
|
||||
const plotFits = leftPlotW >= MIN_PLOT_W && rightPlotW >= MIN_PLOT_W;
|
||||
if (!plotFits && effectiveSlots.length) {
|
||||
effectiveSlots = effectiveSlots.slice(0, -1);
|
||||
continue;
|
||||
}
|
||||
|
||||
let x = 0;
|
||||
const leftMetersRect = hasLeftMeters ? { x, y: CONTENT_TOP, w: leftW, h: contentH } : null;
|
||||
if (leftMetersRect) x += leftW + BLOCK_GAP;
|
||||
|
||||
const leftPlotRect = { x, y: 0, w: leftPlotW, h: rect.h };
|
||||
x += leftPlotW;
|
||||
|
||||
let centerMetersRect = null;
|
||||
if (hasCenterMeters) {
|
||||
x += BLOCK_GAP;
|
||||
centerMetersRect = { x, y: CONTENT_TOP, w: centerW, h: contentH };
|
||||
x += centerW + BLOCK_GAP;
|
||||
} else {
|
||||
x += OUTER_GAP;
|
||||
}
|
||||
|
||||
const rightPlotRect = { x, y: 0, w: rightPlotW, h: rect.h };
|
||||
x += rightPlotW;
|
||||
|
||||
let rightMetersRect = null;
|
||||
if (hasRightMeters) {
|
||||
x += BLOCK_GAP;
|
||||
rightMetersRect = { x, y: CONTENT_TOP, w: rightW, h: contentH };
|
||||
}
|
||||
|
||||
return {
|
||||
plots: { left: leftPlotRect, right: rightPlotRect },
|
||||
meters: { left: leftMetersRect, center: centerMetersRect, right: rightMetersRect },
|
||||
meterIds: grouped,
|
||||
slotW,
|
||||
effectiveSlots,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function splitRectToRows(rect) {
|
||||
const w = Math.max(0, rect?.w || 0);
|
||||
const h = Math.max(0, rect?.h || 0);
|
||||
const gap = Math.max(0, ROW_GAP);
|
||||
const topH = Math.max(0, Math.floor((h - gap) / 2));
|
||||
const bottomH = Math.max(0, h - gap - topH);
|
||||
return {
|
||||
top: { x: rect.x, y: rect.y, w, h: topH },
|
||||
bottom: { x: rect.x, y: rect.y + topH + gap, w, h: bottomH },
|
||||
};
|
||||
}
|
||||
|
||||
function unionRectHoriz(a, b) {
|
||||
if (!a && !b) return null;
|
||||
if (!a) return { ...b };
|
||||
if (!b) return { ...a };
|
||||
const left = Math.min(a.x, b.x);
|
||||
const right = Math.max(a.x + a.w, b.x + b.w);
|
||||
const top = Math.min(a.y, b.y);
|
||||
const bottom = Math.max(a.y + a.h, b.y + b.h);
|
||||
return { x: left, y: top, w: Math.max(0, right - left), h: Math.max(0, bottom - top) };
|
||||
}
|
||||
|
||||
function ensureChildRectSize(env, rect, child) {
|
||||
if (!child || child.id === 'none' || !rect) return;
|
||||
const sig = `${Math.max(0, rect.w | 0)}x${Math.max(0, rect.h | 0)}`;
|
||||
if (child._lastSizeSig === sig) return;
|
||||
child._lastSizeSig = sig;
|
||||
resizeChild(env, { x: 0, y: 0, w: rect.w, h: rect.h }, child);
|
||||
}
|
||||
|
||||
async function drawMetersPanel(env, state, rect, meterIds, slotW) {
|
||||
const { ctx: g, meters, config: CONFIG } = env;
|
||||
if (!rect || rect.w <= 0 || rect.h <= 0) return;
|
||||
const ids = Array.isArray(meterIds) ? meterIds.slice(0, 3) : [];
|
||||
const count = ids.length;
|
||||
if (!count) return;
|
||||
|
||||
drawCachedStaticLayer(state, g, 'meter-panel-shell', 'bg-frame', rect, (lg) => {
|
||||
lg.fillStyle = PANEL_BG;
|
||||
lg.fillRect(0, 0, rect.w, rect.h);
|
||||
drawSubframe(lg, { x: 0, y: 0, w: rect.w, h: rect.h });
|
||||
});
|
||||
|
||||
const gap = METER_GAP;
|
||||
const n = Math.max(1, Math.min(3, count));
|
||||
const usedW = n * slotW + (n - 1) * gap;
|
||||
const startX = rect.x + Math.max(0, Math.floor((rect.w - usedW) / 2));
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, rect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
const slotY = rect.y + METER_PAD_TOP + innerOffset;
|
||||
const slotH = innerHeight;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const id = sanitizeMeterId(ids[i], 'none');
|
||||
const r = { x: startX + i * (slotW + gap), y: slotY, w: slotW, h: slotH };
|
||||
if (id === 'none') {
|
||||
drawCachedStaticLayer(state, g, 'meter-slot-empty', `${slotW}x${slotH}`, r, (lg) => {
|
||||
lg.strokeStyle = 'rgba(0,231,255,0.25)';
|
||||
lg.setLineDash([6, 5]);
|
||||
lg.strokeRect(0.5, 0.5, Math.max(0, r.w - 1), Math.max(0, r.h - 1));
|
||||
lg.setLineDash([]);
|
||||
lg.fillStyle = '#9aa';
|
||||
lg.textAlign = 'center';
|
||||
lg.font = '12px ui-monospace, monospace';
|
||||
lg.fillText('(leer)', r.w / 2, 22);
|
||||
lg.textAlign = 'start';
|
||||
});
|
||||
} else {
|
||||
try {
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(rect.x + 1, rect.y + 1, Math.max(0, rect.w - 2), Math.max(0, rect.h - 2));
|
||||
g.clip();
|
||||
await meters.draw(g, r, id, CONFIG);
|
||||
g.restore();
|
||||
} catch (e) {
|
||||
g.restore();
|
||||
console.warn('Quad meter draw error:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function destroyChild(child) {
|
||||
if (!child || child.id === 'none') return;
|
||||
const mod = CHILD_VIEWS[child.id];
|
||||
if (mod && typeof mod.destroy === 'function') {
|
||||
try { mod.destroy(child.state); } catch (e) { console.warn('Quad child destroy error:', e); }
|
||||
}
|
||||
}
|
||||
|
||||
function initChild(env, childId) {
|
||||
const id = sanitizeChildId(childId, 'none');
|
||||
if (id === 'none') return { id: 'none', state: {} };
|
||||
const mod = CHILD_VIEWS[id];
|
||||
const state = (mod && typeof mod.init === 'function') ? (mod.init(env) || {}) : {};
|
||||
return { id, state };
|
||||
}
|
||||
|
||||
function resizeChild(env, rect, child) {
|
||||
if (!child || child.id === 'none') return;
|
||||
const mod = CHILD_VIEWS[child.id];
|
||||
if (!mod || typeof mod.resize !== 'function') return;
|
||||
try { mod.resize({ rect }, child.state); } catch (e) { console.warn('Quad child resize error:', e); }
|
||||
}
|
||||
|
||||
async function renderChild(env, rect, child, opts = {}) {
|
||||
const { ctx: g } = env;
|
||||
if (!child || child.id === 'none') return;
|
||||
const mod = CHILD_VIEWS[child.id];
|
||||
if (!mod || typeof mod.render !== 'function') return;
|
||||
const topInset = Number.isFinite(Number(opts.topInset)) ? Number(opts.topInset) : null;
|
||||
await withClippedSubRect(g, rect, async () => {
|
||||
const plotOnlySlots = (viewId) => {
|
||||
if (viewId === 'peak-history' || viewId === 'classic-needles' || viewId === 'panel') {
|
||||
const configured = env?.slots?.(viewId);
|
||||
if (Array.isArray(configured) && configured.length) return configured;
|
||||
}
|
||||
if (viewId === 'peak-history') return ['ppm-din'];
|
||||
if (viewId === 'classic-needles') return ['vu'];
|
||||
if (viewId === 'panel') return ['vu', 'ppm-ebu', 'ppm-din', 'tp', 'rms'];
|
||||
return ['none'];
|
||||
};
|
||||
const subEnv = Object.assign({}, env, {
|
||||
rect: { x: 0, y: 0, w: rect.w, h: rect.h },
|
||||
embedded: true,
|
||||
containerView: 'quad-view',
|
||||
slots: plotOnlySlots,
|
||||
embeddedOffsetX: rect.x,
|
||||
embeddedOffsetY: rect.y,
|
||||
});
|
||||
if (topInset !== null) subEnv.topInset = topInset;
|
||||
await mod.render(subEnv, child.state);
|
||||
});
|
||||
}
|
||||
|
||||
export function init(env) {
|
||||
const tlId = sanitizePlotId(env?.config?.QUAD_VIEW_TL, 'phase-wheel');
|
||||
const trId = sanitizePlotId(env?.config?.QUAD_VIEW_TR, 'realtime');
|
||||
const blId = sanitizePlotId(env?.config?.QUAD_VIEW_BL, 'goniometer-rtw');
|
||||
const brId = sanitizePlotId(env?.config?.QUAD_VIEW_BR, 'none');
|
||||
const state = {
|
||||
staticLayers: new Map(),
|
||||
tl: initChild(env, tlId),
|
||||
tr: initChild(env, trId),
|
||||
bl: initChild(env, blId),
|
||||
br: initChild(env, brId),
|
||||
popup: initChild(env, 'none'),
|
||||
lastTlId: tlId,
|
||||
lastTrId: trId,
|
||||
lastBlId: blId,
|
||||
lastBrId: brId,
|
||||
lastPopupId: 'none',
|
||||
lastRectSig: '',
|
||||
};
|
||||
return state;
|
||||
}
|
||||
|
||||
export function destroy(state) {
|
||||
if (state) state.staticLayers = null;
|
||||
destroyChild(state?.tl);
|
||||
destroyChild(state?.tr);
|
||||
destroyChild(state?.bl);
|
||||
destroyChild(state?.br);
|
||||
destroyChild(state?.popup);
|
||||
}
|
||||
|
||||
export function resize({ rect }, state) {
|
||||
if (!state || !rect) return;
|
||||
const sig = `${rect.w}x${rect.h}`;
|
||||
if (state.lastRectSig === sig) return;
|
||||
state.lastRectSig = sig;
|
||||
const w = Math.max(0, rect.w);
|
||||
const h = Math.max(0, rect.h);
|
||||
const contentY = CONTENT_TOP;
|
||||
const contentH = Math.max(0, h - CONTENT_TOP - CONTENT_BOTTOM);
|
||||
const gap = OUTER_GAP;
|
||||
const half = Math.floor((w - gap) / 2);
|
||||
const leftCol = { x: 0, y: contentY, w: Math.max(0, half), h: contentH };
|
||||
const rightCol = { x: Math.max(0, half + gap), y: contentY, w: Math.max(0, w - (half + gap)), h: contentH };
|
||||
const leftRows = splitRectToRows(leftCol);
|
||||
const rightRows = splitRectToRows(rightCol);
|
||||
resizeChild(null, { x: 0, y: 0, w: leftRows.top.w, h: leftRows.top.h }, state.tl);
|
||||
resizeChild(null, { x: 0, y: 0, w: rightRows.top.w, h: rightRows.top.h }, state.tr);
|
||||
resizeChild(null, { x: 0, y: 0, w: leftRows.bottom.w, h: leftRows.bottom.h }, state.bl);
|
||||
resizeChild(null, { x: 0, y: 0, w: rightRows.bottom.w, h: rightRows.bottom.h }, state.br);
|
||||
resizeChild(null, { x: 0, y: 0, w, h }, state.popup);
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG } = env;
|
||||
const contentY = CONTENT_TOP;
|
||||
const contentH = Math.max(0, rect.h - CONTENT_TOP - CONTENT_BOTTOM);
|
||||
const popupCfg = env?.quadPopup;
|
||||
const popupWanted = popupCfg && popupCfg.open ? sanitizeChildId(popupCfg.viewId, 'none') : 'none';
|
||||
|
||||
// Popup-Modus: rendere die View in Originalgröße (vollflächig),
|
||||
// ohne Quad-Hintergrund/Layout. So sieht es exakt wie die Einzel-View aus.
|
||||
if (popupWanted !== 'none' && state) {
|
||||
if (state.lastPopupId !== popupWanted) {
|
||||
destroyChild(state.popup);
|
||||
state.popup = initChild(env, popupWanted);
|
||||
state.lastPopupId = popupWanted;
|
||||
resizeChild(null, { x: 0, y: 0, w: rect.w, h: rect.h }, state.popup);
|
||||
}
|
||||
|
||||
state._quadHit = {
|
||||
contentY: 0,
|
||||
quadrants: [],
|
||||
meters: [],
|
||||
popupBox: { x: 0, y: 0, w: rect.w, h: rect.h },
|
||||
};
|
||||
|
||||
const mod = CHILD_VIEWS[state.popup.id];
|
||||
if (mod && typeof mod.render === 'function') {
|
||||
const subEnv = Object.assign({}, env, {
|
||||
rect: { x: 0, y: 0, w: rect.w, h: rect.h },
|
||||
embedded: false,
|
||||
});
|
||||
await mod.render(subEnv, state.popup.state);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (state && state.lastPopupId !== 'none') {
|
||||
destroyChild(state.popup);
|
||||
state.popup = initChild(env, 'none');
|
||||
state.lastPopupId = 'none';
|
||||
}
|
||||
|
||||
const desiredTlId = sanitizePlotId(CONFIG?.QUAD_VIEW_TL, 'phase-wheel');
|
||||
const desiredTrId = sanitizePlotId(CONFIG?.QUAD_VIEW_TR, 'realtime');
|
||||
const desiredBlId = sanitizePlotId(CONFIG?.QUAD_VIEW_BL, 'goniometer-rtw');
|
||||
const desiredBrId = sanitizePlotId(CONFIG?.QUAD_VIEW_BR, 'none');
|
||||
|
||||
if (state.lastTlId !== desiredTlId) {
|
||||
destroyChild(state.tl);
|
||||
state.tl = initChild(env, desiredTlId);
|
||||
state.lastTlId = desiredTlId;
|
||||
}
|
||||
if (state.lastTrId !== desiredTrId) {
|
||||
destroyChild(state.tr);
|
||||
state.tr = initChild(env, desiredTrId);
|
||||
state.lastTrId = desiredTrId;
|
||||
}
|
||||
if (state.lastBlId !== desiredBlId) {
|
||||
destroyChild(state.bl);
|
||||
state.bl = initChild(env, desiredBlId);
|
||||
state.lastBlId = desiredBlId;
|
||||
}
|
||||
if (state.lastBrId !== desiredBrId) {
|
||||
destroyChild(state.br);
|
||||
state.br = initChild(env, desiredBrId);
|
||||
state.lastBrId = desiredBrId;
|
||||
}
|
||||
|
||||
const slots = readQuadMeters(CONFIG);
|
||||
const layout = computeBaseLayout(rect, slots);
|
||||
const leftColRaw = layout?.plots?.left || { x: 0, y: 0, w: Math.floor(rect.w / 2), h: rect.h };
|
||||
const rightColRaw = layout?.plots?.right || { x: Math.floor(rect.w / 2), y: 0, w: rect.w - Math.floor(rect.w / 2), h: rect.h };
|
||||
const leftCol = { x: leftColRaw.x, y: contentY, w: leftColRaw.w, h: contentH };
|
||||
const rightCol = { x: rightColRaw.x, y: contentY, w: rightColRaw.w, h: contentH };
|
||||
const leftRows = splitRectToRows(leftCol);
|
||||
const rightRows = splitRectToRows(rightCol);
|
||||
|
||||
const canRowMerge = !layout?.meters?.center;
|
||||
const topLeftActive = desiredTlId !== 'none';
|
||||
const topRightActive = desiredTrId !== 'none';
|
||||
const bottomLeftActive = desiredBlId !== 'none';
|
||||
const bottomRightActive = desiredBrId !== 'none';
|
||||
|
||||
let tlRect = { ...leftRows.top };
|
||||
let trRect = { ...rightRows.top };
|
||||
let blRect = { ...leftRows.bottom };
|
||||
let brRect = { ...rightRows.bottom };
|
||||
|
||||
if (canRowMerge) {
|
||||
if (topLeftActive && !topRightActive) {
|
||||
tlRect = unionRectHoriz(tlRect, trRect);
|
||||
trRect = null;
|
||||
} else if (!topLeftActive && topRightActive) {
|
||||
trRect = unionRectHoriz(tlRect, trRect);
|
||||
tlRect = null;
|
||||
}
|
||||
|
||||
if (bottomLeftActive && !bottomRightActive) {
|
||||
blRect = unionRectHoriz(blRect, brRect);
|
||||
brRect = null;
|
||||
} else if (!bottomLeftActive && bottomRightActive) {
|
||||
brRect = unionRectHoriz(blRect, brRect);
|
||||
blRect = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (state) {
|
||||
state._quadHit = {
|
||||
contentY,
|
||||
quadrants: [
|
||||
{ key: 'tl', rect: tlRect, viewId: desiredTlId },
|
||||
{ key: 'tr', rect: trRect, viewId: desiredTrId },
|
||||
{ key: 'bl', rect: blRect, viewId: desiredBlId },
|
||||
{ key: 'br', rect: brRect, viewId: desiredBrId },
|
||||
],
|
||||
meters: [layout?.meters?.left, layout?.meters?.center, layout?.meters?.right].filter(Boolean).map((r) => ({ ...r })),
|
||||
popupBox: null,
|
||||
};
|
||||
}
|
||||
|
||||
if (tlRect) {
|
||||
if (state.tl?.id === 'none') drawEmptyPlot(state, g, tlRect, 'OL: (leer)');
|
||||
else {
|
||||
ensureChildRectSize(null, tlRect, state.tl);
|
||||
await renderChild(env, tlRect, state.tl, { topInset: 0 });
|
||||
}
|
||||
}
|
||||
if (trRect) {
|
||||
if (state.tr?.id === 'none') drawEmptyPlot(state, g, trRect, 'OR: (leer)');
|
||||
else {
|
||||
ensureChildRectSize(null, trRect, state.tr);
|
||||
await renderChild(env, trRect, state.tr, { topInset: 0 });
|
||||
}
|
||||
}
|
||||
if (blRect) {
|
||||
if (state.bl?.id === 'none') drawEmptyPlot(state, g, blRect, 'UL: (leer)');
|
||||
else {
|
||||
ensureChildRectSize(null, blRect, state.bl);
|
||||
await renderChild(env, blRect, state.bl, { topInset: 0 });
|
||||
}
|
||||
}
|
||||
if (brRect) {
|
||||
if (state.br?.id === 'none') drawEmptyPlot(state, g, brRect, 'UR: (leer)');
|
||||
else {
|
||||
ensureChildRectSize(null, brRect, state.br);
|
||||
await renderChild(env, brRect, state.br, { topInset: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
if (layout?.meters?.left) await drawMetersPanel(env, state, layout.meters.left, layout.meterIds.left, layout.slotW);
|
||||
if (layout?.meters?.center) await drawMetersPanel(env, state, layout.meters.center, layout.meterIds.center, layout.slotW);
|
||||
if (layout?.meters?.right) await drawMetersPanel(env, state, layout.meters.right, layout.meterIds.right, layout.slotW);
|
||||
}
|
||||
@@ -0,0 +1,941 @@
|
||||
import { getRtwCenters, resolveRtwBpoValue } from '../core/rtw_centers.js';
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, MID_COLOR, PANEL_BG, WARN_COLOR } from '../core/theme.js';
|
||||
|
||||
// views/realtime.js — IEC-konformer Real-Time Analyzer
|
||||
|
||||
const METER_WIDTH = 140;
|
||||
const METER_GAP = 8;
|
||||
const METER_PAD_TOP = 15;
|
||||
const METER_PAD_BOTTOM = 5;
|
||||
const METER_SLOT_SHRINK = 24; // reduziert nutzbare Höhe leicht, damit Slot niedriger wirkt
|
||||
const METER_EXTRA_BOTTOM_PAD = 5;
|
||||
const FLOOR_DB = -120;
|
||||
const RTA_X_TICKS = [20, 31.5, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
|
||||
const DEFAULT_RTA_BAR_BASE_COLOR = MID_COLOR;
|
||||
const RTA_PEAK_COLOR = WARN_COLOR;
|
||||
const EMBEDDED_RTA_HIDE_20HZ_WIDTH = 420;
|
||||
const STATIC_LABEL_PAD_LEFT = 40;
|
||||
const STATIC_LABEL_PAD_BOTTOM = 28;
|
||||
const STATIC_STROKE_PAD = 2;
|
||||
|
||||
const PEAK_HOLD_MAP = new Map(Object.entries({
|
||||
off: 0,
|
||||
auto: null,
|
||||
'1s': 1,
|
||||
'2s': 2,
|
||||
'4s': 4,
|
||||
'10s': 10,
|
||||
'20s': 20,
|
||||
'30s': 30,
|
||||
manual: Infinity,
|
||||
}));
|
||||
|
||||
const INTEGRATION_TAU = {
|
||||
impulse: 0.035,
|
||||
fast: 0.125,
|
||||
slow: 1.0,
|
||||
peak: 0.01,
|
||||
};
|
||||
|
||||
|
||||
export const id = 'realtime';
|
||||
|
||||
export function init() {
|
||||
return {
|
||||
bandKey: null,
|
||||
bands: [],
|
||||
mapping: [],
|
||||
ewma: new Float32Array(0),
|
||||
peakHold: new Float32Array(0),
|
||||
lastPeakTime: [],
|
||||
displayLevels: new Float32Array(0),
|
||||
levelBuffer: new Float32Array(0),
|
||||
rtBarLevels: new Float32Array(0),
|
||||
rtBarPeakTimes: [],
|
||||
lastRtBarTs: 0,
|
||||
lastDisplayUpdate: 0,
|
||||
holdSampleTs: 0,
|
||||
lastIntegrationTs: 0,
|
||||
configSig: '',
|
||||
staticLayers: new Map(),
|
||||
};
|
||||
}
|
||||
|
||||
export function resize() {}
|
||||
export function destroy(state) {
|
||||
if (state) state.staticLayers = null;
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG, audio, utils, meters } = env;
|
||||
const nyq = audio.nyq || 24000;
|
||||
const analyser = audio.getAnalyser?.();
|
||||
const buf = audio.getFreqBuffer?.();
|
||||
const useIirEngine = (CONFIG.RTA_ENGINE || 'fft') === 'iir';
|
||||
const rtaData = typeof audio.getRtaData === 'function'
|
||||
? audio.getRtaData()
|
||||
: null;
|
||||
const useNativeFftEngine = !useIirEngine && rtaData && rtaData.engine === 'fft';
|
||||
const nativeRtaPacket = (useIirEngine || useNativeFftEngine) ? rtaData : null;
|
||||
const displayRtaPacket = (nativeRtaPacket && CONFIG.RTA_BAR_LAYOUT === 'rtw')
|
||||
? selectLocalRtwPacket(nativeRtaPacket, CONFIG.RTA_BPO_MODE || '1_6')
|
||||
: nativeRtaPacket;
|
||||
|
||||
const topInset = Number.isFinite(env?.topInset) ? Number(env.topInset) : DEFAULT_TOP_INSET;
|
||||
const PLOT = { left: 43, top: topInset, right: 0, bottom: 18 };
|
||||
const plotX = PLOT.left;
|
||||
const plotY = PLOT.top;
|
||||
const slotList = env.slots ? env.slots('realtime') : null;
|
||||
const activeMeter = (slotList && slotList[0]) || 'vu';
|
||||
const showMeter = activeMeter !== 'none';
|
||||
const plotW = Math.max(0, (rect.w - PLOT.right) - (showMeter ? (METER_WIDTH + METER_GAP) : 0) - plotX);
|
||||
const plotH = rect.h - PLOT.top - PLOT.bottom;
|
||||
|
||||
const range = getDbRange();
|
||||
const freqBounds = getFreqBounds(CONFIG, nyq, displayRtaPacket);
|
||||
const hide20HzTick = shouldHide20HzTick(env, plotW);
|
||||
const freqTicks = RTA_X_TICKS.filter((f) => {
|
||||
if (hide20HzTick && f === 20) return false;
|
||||
return f >= freqBounds.min && f <= freqBounds.max * 1.05;
|
||||
});
|
||||
const gridConfig = Object.assign({}, CONFIG, {
|
||||
DBFS_TOP: range.top,
|
||||
DBFS_BOTTOM: range.bottom,
|
||||
Y_TICKS: range.ticks,
|
||||
});
|
||||
const alignBase = Number.isFinite(CONFIG.DIGITAL_REF_DBFS_RMS)
|
||||
? CONFIG.DIGITAL_REF_DBFS_RMS
|
||||
: -18;
|
||||
const gainOffset = useIirEngine
|
||||
? Number(CONFIG.RTA_DISPLAY_GAIN_IIR_DB || 0)
|
||||
: 0;
|
||||
const showAlignMarker = CONFIG.AL_MARKERS_ENABLED !== false;
|
||||
const refDb = showAlignMarker ? alignBase + gainOffset : null;
|
||||
const gutterL = Number.isFinite(CONFIG?.AXIS_GUTTER_LEFT)
|
||||
? Math.max(8, Number(CONFIG.AXIS_GUTTER_LEFT))
|
||||
: 14;
|
||||
const plotPadLeft = gutterL + STATIC_LABEL_PAD_LEFT;
|
||||
const plotPadBottom = STATIC_LABEL_PAD_BOTTOM;
|
||||
|
||||
drawCachedStaticLayer(
|
||||
state,
|
||||
g,
|
||||
'rta-plot',
|
||||
[
|
||||
plotW,
|
||||
plotH,
|
||||
range.top,
|
||||
range.bottom,
|
||||
freqBounds.min,
|
||||
freqBounds.max,
|
||||
freqTicks.join(','),
|
||||
refDb ?? 'none',
|
||||
hide20HzTick ? 1 : 0,
|
||||
plotPadLeft,
|
||||
plotPadBottom,
|
||||
].join('|'),
|
||||
{ x: plotX - plotPadLeft, y: plotY, w: plotW + plotPadLeft, h: plotH + plotPadBottom },
|
||||
(lg) => {
|
||||
utils.drawDbfsGridRect(
|
||||
lg,
|
||||
plotPadLeft,
|
||||
0,
|
||||
plotW,
|
||||
plotH,
|
||||
gridConfig,
|
||||
freqBounds.max,
|
||||
{
|
||||
freqTicks,
|
||||
freqMin: freqBounds.min,
|
||||
refDb,
|
||||
refStyle: 'rgba(0,231,255,0.35)',
|
||||
refDash: [3, 4],
|
||||
},
|
||||
);
|
||||
redrawPlotEdges(lg, plotPadLeft, 0, plotW, plotH, CONFIG);
|
||||
},
|
||||
);
|
||||
|
||||
const configSig = buildConfigSignature(CONFIG, nyq, buf?.length || 0);
|
||||
if (state.configSig !== configSig) {
|
||||
resetState(state);
|
||||
state.configSig = configSig;
|
||||
}
|
||||
|
||||
if (!audio.alive) {
|
||||
drawWaiting(g, plotX, plotY);
|
||||
} else {
|
||||
const binCount = buf?.length || analyser?.frequencyBinCount || 2048;
|
||||
ensureBands(state, utils, CONFIG, nyq, binCount, freqBounds, range, displayRtaPacket);
|
||||
if (!state.mapping.length) {
|
||||
drawWaiting(g, plotX, plotY);
|
||||
} else if (useIirEngine) {
|
||||
const ballisticsData = mapIirLevels(displayRtaPacket, CONFIG, range, state.mapping.length);
|
||||
const baseLevels = ballisticsData?.primary;
|
||||
if (!baseLevels || !baseLevels.length) {
|
||||
drawWaiting(g, plotX, plotY);
|
||||
} else {
|
||||
const integrated = baseLevels;
|
||||
const displayBase = applyDisplayHold(state, integrated, CONFIG, range);
|
||||
const display = (CONFIG.REALTIME_RENDER_STYLE || 'bars') === 'bars'
|
||||
? applyRealtimeBarBallistics(state, displayBase, CONFIG, range)
|
||||
: displayBase;
|
||||
applyPeakHold(state, integrated, CONFIG, range);
|
||||
state.displayLevels = display;
|
||||
state.currentRange = range;
|
||||
if (typeof window !== 'undefined') window.__RTA_STATE__ = state;
|
||||
renderSpectrum(
|
||||
g,
|
||||
state,
|
||||
display,
|
||||
plotX,
|
||||
plotY,
|
||||
plotW,
|
||||
plotH,
|
||||
CONFIG,
|
||||
range,
|
||||
freqBounds,
|
||||
ballisticsData?.overlay || null,
|
||||
ballisticsData?.mode || CONFIG.RTA_BALLISTICS_MODE || 'average'
|
||||
);
|
||||
}
|
||||
} else if (useNativeFftEngine) {
|
||||
const nativeLevels = mapNativeFftLevels(displayRtaPacket, CONFIG, range, state.mapping.length);
|
||||
if (!nativeLevels || !nativeLevels.length) {
|
||||
drawWaiting(g, plotX, plotY);
|
||||
} else {
|
||||
const integrated = applyIntegration(state, nativeLevels, CONFIG, range);
|
||||
const displayBase = applyDisplayHold(state, integrated, CONFIG, range);
|
||||
const display = (CONFIG.REALTIME_RENDER_STYLE || 'bars') === 'bars'
|
||||
? applyRealtimeBarBallistics(state, displayBase, CONFIG, range)
|
||||
: displayBase;
|
||||
applyPeakHold(state, integrated, CONFIG, range);
|
||||
state.displayLevels = display;
|
||||
state.currentRange = range;
|
||||
if (typeof window !== 'undefined') window.__RTA_STATE__ = state;
|
||||
renderSpectrum(
|
||||
g,
|
||||
state,
|
||||
display,
|
||||
plotX,
|
||||
plotY,
|
||||
plotW,
|
||||
plotH,
|
||||
CONFIG,
|
||||
range,
|
||||
freqBounds,
|
||||
null,
|
||||
CONFIG.RTA_BALLISTICS_MODE || 'average'
|
||||
);
|
||||
}
|
||||
} else if (!analyser || !buf) {
|
||||
drawWaiting(g, plotX, plotY);
|
||||
} else {
|
||||
analyser.getFloatFrequencyData(buf);
|
||||
const levels = computeBandLevels(state, utils, buf, CONFIG, range);
|
||||
const integrated = applyIntegration(state, levels, CONFIG, range);
|
||||
const displayBase = applyDisplayHold(state, integrated, CONFIG, range);
|
||||
const display = (CONFIG.REALTIME_RENDER_STYLE || 'bars') === 'bars'
|
||||
? applyRealtimeBarBallistics(state, displayBase, CONFIG, range)
|
||||
: displayBase;
|
||||
applyPeakHold(state, integrated, CONFIG, range);
|
||||
state.displayLevels = display;
|
||||
state.currentRange = range;
|
||||
if (typeof window !== 'undefined') window.__RTA_STATE__ = state;
|
||||
renderSpectrum(
|
||||
g,
|
||||
state,
|
||||
display,
|
||||
plotX,
|
||||
plotY,
|
||||
plotW,
|
||||
plotH,
|
||||
CONFIG,
|
||||
range,
|
||||
freqBounds,
|
||||
null,
|
||||
CONFIG.RTA_BALLISTICS_MODE || 'average'
|
||||
);
|
||||
}
|
||||
}
|
||||
if (showMeter) {
|
||||
await drawMeter(env, state, plotX, plotY, plotW, plotH);
|
||||
}
|
||||
}
|
||||
|
||||
function drawWaiting(g, plotX, plotY) {
|
||||
g.fillStyle = '#9aa';
|
||||
const y = plotY >= 40 ? (plotY - 26) : (plotY + 22);
|
||||
g.fillText('Warte auf Audio …', plotX + 10, y);
|
||||
}
|
||||
|
||||
function shouldHide20HzTick(env, plotW) {
|
||||
const containerView = env?.containerView;
|
||||
const embeddedInMultiView = env?.embedded === true
|
||||
&& (containerView === 'split-view' || containerView === 'quad-view');
|
||||
return embeddedInMultiView && plotW < EMBEDDED_RTA_HIDE_20HZ_WIDTH;
|
||||
}
|
||||
|
||||
function buildConfigSignature(CONFIG, nyq, binCount) {
|
||||
return [
|
||||
CONFIG.RTA_FREQ_RANGE,
|
||||
CONFIG.RTA_BPO_MODE,
|
||||
CONFIG.RTA_WEIGHTING,
|
||||
CONFIG.RTA_BAR_LAYOUT,
|
||||
CONFIG.RTA_INTEGRATION,
|
||||
CONFIG.RTA_PEAK_HOLD_MODE,
|
||||
CONFIG.RTA_PEAK_HOLD_SEC,
|
||||
CONFIG.RTA_PEAK_DECAY_DB_PER_S,
|
||||
CONFIG.RTA_DISPLAY_HOLD_SEC,
|
||||
CONFIG.REALTIME_RENDER_STYLE,
|
||||
CONFIG.REALTIME_BAR_HOLD_MS,
|
||||
CONFIG.REALTIME_BAR_DECAY_DB_PER_S,
|
||||
CONFIG.RTA_ENGINE,
|
||||
CONFIG.RTA_IIR_ORDER,
|
||||
CONFIG.RTA_IIR_TAU_FAST,
|
||||
CONFIG.RTA_IIR_TAU_SLOW,
|
||||
CONFIG.RTA_DISPLAY_GAIN_FFT_DB,
|
||||
CONFIG.RTA_DISPLAY_GAIN_IIR_DB,
|
||||
nyq,
|
||||
binCount,
|
||||
].join('|');
|
||||
}
|
||||
|
||||
function resetState(state) {
|
||||
state.bandKey = null;
|
||||
state.bands = [];
|
||||
state.mapping = [];
|
||||
state.ewma = new Float32Array(0);
|
||||
state.peakHold = new Float32Array(0);
|
||||
state.lastPeakTime = [];
|
||||
state.displayLevels = new Float32Array(0);
|
||||
state.levelBuffer = new Float32Array(0);
|
||||
state.rtBarLevels = new Float32Array(0);
|
||||
state.rtBarPeakTimes = [];
|
||||
state.lastRtBarTs = 0;
|
||||
state.lastDisplayUpdate = 0;
|
||||
state.holdSampleTs = 0;
|
||||
state.lastIntegrationTs = 0;
|
||||
}
|
||||
|
||||
function ensureBands(state, utils, CONFIG, nyq, binCount, freqBounds, range, rtaPacket) {
|
||||
const freqRange = CONFIG.RTA_FREQ_RANGE === 'lf' ? 'lf' : 'norm';
|
||||
const bpo = CONFIG.RTA_BPO_MODE || '1_6';
|
||||
const engine = CONFIG.RTA_ENGINE || 'fft';
|
||||
const layoutMode = CONFIG.RTA_BAR_LAYOUT === 'rtw' ? 'rtw' : 'iec';
|
||||
const rtaCenters = (layoutMode === 'rtw') ? getRtwCenters(bpo) : null;
|
||||
const centerKey = rtaCenters
|
||||
? `${rtaCenters.length}:${rtaCenters[0]}:${rtaCenters[rtaCenters.length - 1]}`
|
||||
: 'static';
|
||||
const key = `${layoutMode}|${freqRange}|${bpo}|${nyq}|${binCount}|${engine}|${centerKey}`;
|
||||
if (state.bandKey === key && state.mapping.length) return;
|
||||
|
||||
let bands;
|
||||
if (layoutMode === 'rtw') {
|
||||
bands = buildFixedRtwBands(bpo, freqBounds, nyq, rtaCenters);
|
||||
if (!bands.length) {
|
||||
bands = utils.makeFractionalOctaveBands(nyq, bpo, {
|
||||
fMin: freqBounds.min,
|
||||
fMax: freqBounds.max,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
bands = utils.makeFractionalOctaveBands(nyq, bpo, {
|
||||
fMin: freqBounds.min,
|
||||
fMax: freqBounds.max,
|
||||
});
|
||||
}
|
||||
const mapping = utils.buildBandBinMapping(bands, nyq, binCount);
|
||||
state.bandKey = key;
|
||||
state.bands = bands;
|
||||
state.mapping = mapping;
|
||||
const len = mapping.length;
|
||||
state.ewma = new Float32Array(len);
|
||||
state.ewma.fill(range.bottom);
|
||||
state.peakHold = new Float32Array(len);
|
||||
state.peakHold.fill(range.bottom);
|
||||
state.lastPeakTime = new Array(len).fill(performance.now());
|
||||
state.displayLevels = new Float32Array(len);
|
||||
state.displayLevels.fill(range.bottom);
|
||||
state.rtBarLevels = new Float32Array(len);
|
||||
state.rtBarLevels.fill(range.bottom);
|
||||
state.rtBarPeakTimes = new Array(len).fill(performance.now());
|
||||
}
|
||||
|
||||
function computeBandLevels(state, utils, buf, CONFIG, range) {
|
||||
const weighting = CONFIG.RTA_WEIGHTING || 'z';
|
||||
const weightFn = (freq) => utils.weightingDb(freq, weighting);
|
||||
const raw = utils.computeBandLevels(state.mapping, buf, {
|
||||
floor: FLOOR_DB,
|
||||
weightingFn: weightFn,
|
||||
});
|
||||
const gain = Number(CONFIG.RTA_DISPLAY_GAIN_FFT_DB ?? 0) || 0;
|
||||
if (!state.levelBuffer || state.levelBuffer.length !== raw.length) {
|
||||
state.levelBuffer = new Float32Array(raw.length);
|
||||
}
|
||||
const out = state.levelBuffer;
|
||||
for (let i = 0; i < raw.length; i++) {
|
||||
out[i] = clamp(raw[i] + gain, range.bottom, range.top);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function applyIntegration(state, levels, CONFIG, range) {
|
||||
const mode = (CONFIG.RTA_INTEGRATION && INTEGRATION_TAU[CONFIG.RTA_INTEGRATION])
|
||||
? CONFIG.RTA_INTEGRATION
|
||||
: 'fast';
|
||||
const tau = INTEGRATION_TAU[mode] || 0.125;
|
||||
const now = performance.now();
|
||||
const last = state.lastIntegrationTs || now;
|
||||
const dt = Math.max(1 / 240, (now - last) / 1000);
|
||||
state.lastIntegrationTs = now;
|
||||
const alpha = (tau > 0 && dt > 0) ? 1 - Math.exp(-dt / tau) : 1;
|
||||
|
||||
if (!state.ewma || state.ewma.length !== levels.length) {
|
||||
state.ewma = new Float32Array(levels.length);
|
||||
state.ewma.fill(range.bottom);
|
||||
}
|
||||
const buffer = state.ewma;
|
||||
for (let i = 0; i < levels.length; i++) {
|
||||
const prev = buffer[i];
|
||||
buffer[i] = prev + (levels[i] - prev) * alpha;
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
|
||||
function applyPeakHold(state, levels, CONFIG, range) {
|
||||
const mode = CONFIG.RTA_PEAK_HOLD_MODE || 'auto';
|
||||
const len = levels.length;
|
||||
const mapped = PEAK_HOLD_MAP.get(mode);
|
||||
const holdSec = Number.isFinite(mapped)
|
||||
? Math.max(0, mapped)
|
||||
: Math.max(0, Number(CONFIG.RTA_PEAK_HOLD_SEC) || 0);
|
||||
const decayRate = Math.max(0, Number(CONFIG.RTA_PEAK_DECAY_DB_PER_S) || 0);
|
||||
const now = performance.now();
|
||||
const dt = Math.max(0, (now - (state.holdSampleTs || now)) / 1000);
|
||||
state.holdSampleTs = now;
|
||||
|
||||
if (!state.peakHold || state.peakHold.length !== len) {
|
||||
state.peakHold = new Float32Array(len);
|
||||
state.lastPeakTime = new Array(len).fill(now);
|
||||
}
|
||||
const buffer = state.peakHold;
|
||||
|
||||
if (mode === 'off') {
|
||||
for (let i = 0; i < len; i++) buffer[i] = clamp(levels[i], range.bottom, range.top);
|
||||
state.lastPeakTime = new Array(len).fill(now);
|
||||
return buffer;
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const current = clamp(levels[i], range.bottom, range.top);
|
||||
if (current >= buffer[i] - 0.05) {
|
||||
buffer[i] = current;
|
||||
state.lastPeakTime[i] = now;
|
||||
continue;
|
||||
}
|
||||
if (mapped === Infinity || mode === 'manual') continue;
|
||||
let allowDecay = mode === 'off';
|
||||
if (mode === 'auto') {
|
||||
allowDecay = (now - (state.lastPeakTime[i] || 0)) >= holdSec * 1000;
|
||||
}
|
||||
if (allowDecay && decayRate > 0) {
|
||||
buffer[i] = Math.max(current, buffer[i] - decayRate * dt);
|
||||
}
|
||||
buffer[i] = clamp(buffer[i], range.bottom, range.top);
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
|
||||
function applyDisplayHold(state, levels, CONFIG, range) {
|
||||
const holdSec = Math.max(0, Number(CONFIG.RTA_DISPLAY_HOLD_SEC) || 0);
|
||||
const len = levels.length;
|
||||
const now = performance.now();
|
||||
if (!state.displayLevels || state.displayLevels.length !== len) {
|
||||
state.displayLevels = new Float32Array(len);
|
||||
state.lastDisplayUpdate = 0;
|
||||
}
|
||||
const buffer = state.displayLevels;
|
||||
|
||||
if (holdSec <= 0) {
|
||||
for (let i = 0; i < len; i++) {
|
||||
buffer[i] = clamp(levels[i], range.bottom, range.top);
|
||||
}
|
||||
state.lastDisplayUpdate = now;
|
||||
return buffer;
|
||||
}
|
||||
|
||||
const dt = (now - (state.lastDisplayUpdate || 0)) / 1000;
|
||||
if (dt >= holdSec) {
|
||||
for (let i = 0; i < len; i++) {
|
||||
buffer[i] = clamp(levels[i], range.bottom, range.top);
|
||||
}
|
||||
state.lastDisplayUpdate = now;
|
||||
return buffer;
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const incoming = clamp(levels[i], range.bottom, range.top);
|
||||
buffer[i] = Math.max(buffer[i], incoming);
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
|
||||
function applyRealtimeBarBallistics(state, levels, CONFIG, range) {
|
||||
const holdMs = Math.max(0, Number(CONFIG.REALTIME_BAR_HOLD_MS) || 0);
|
||||
const decayRate = Math.max(0, Number(CONFIG.REALTIME_BAR_DECAY_DB_PER_S) || 0);
|
||||
const len = levels.length;
|
||||
const now = performance.now();
|
||||
const dt = Math.max(0, (now - (state.lastRtBarTs || now)) / 1000);
|
||||
state.lastRtBarTs = now;
|
||||
|
||||
if (!state.rtBarLevels || state.rtBarLevels.length !== len) {
|
||||
state.rtBarLevels = new Float32Array(len);
|
||||
state.rtBarLevels.fill(range.bottom);
|
||||
state.rtBarPeakTimes = new Array(len).fill(now);
|
||||
}
|
||||
const buffer = state.rtBarLevels;
|
||||
if (!Array.isArray(state.rtBarPeakTimes) || state.rtBarPeakTimes.length !== len) {
|
||||
state.rtBarPeakTimes = new Array(len).fill(now);
|
||||
}
|
||||
|
||||
for (let i = 0; i < len; i++) {
|
||||
const incoming = clamp(levels[i], range.bottom, range.top);
|
||||
if (incoming >= buffer[i] - 0.05) {
|
||||
buffer[i] = incoming;
|
||||
state.rtBarPeakTimes[i] = now;
|
||||
continue;
|
||||
}
|
||||
|
||||
const heldLongEnough = (now - (state.rtBarPeakTimes[i] || 0)) >= holdMs;
|
||||
if (!heldLongEnough) continue;
|
||||
|
||||
if (decayRate > 0) {
|
||||
buffer[i] = Math.max(incoming, buffer[i] - decayRate * dt);
|
||||
} else {
|
||||
buffer[i] = incoming;
|
||||
}
|
||||
buffer[i] = clamp(buffer[i], range.bottom, range.top);
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
|
||||
function renderSpectrum(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, freqBounds, overlayPeaks, ballisticsMode) {
|
||||
const layout = CONFIG.RTA_BAR_LAYOUT === 'rtw' ? 'rtw' : 'iec';
|
||||
const overlay = (ballisticsMode === 'both' && isVectorLike(overlayPeaks) && overlayPeaks.length === state.mapping.length)
|
||||
? overlayPeaks
|
||||
: null;
|
||||
if ((CONFIG.REALTIME_RENDER_STYLE || 'bars') === 'line') {
|
||||
renderLine(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, freqBounds, overlay);
|
||||
} else if (layout === 'rtw') {
|
||||
renderRtwBars(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, overlay);
|
||||
} else {
|
||||
renderIecBars(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, freqBounds, overlay);
|
||||
}
|
||||
}
|
||||
|
||||
function renderIecBars(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, freqBounds, overlayPeaks) {
|
||||
const baseY = plotY + plotH;
|
||||
const zeroY = mapDbToY(0, range, plotY, plotH);
|
||||
const logMin = Math.log10(freqBounds.min);
|
||||
const logSpan = Math.max(1e-6, Math.log10(freqBounds.max) - logMin);
|
||||
const hasOverlay = isVectorLike(overlayPeaks) && overlayPeaks.length === state.mapping.length;
|
||||
for (let i = 0; i < state.mapping.length; i++) {
|
||||
const band = state.mapping[i];
|
||||
const level = levels[i];
|
||||
const xLeft = mapLogX(band.fLo, plotX, plotW, logMin, logSpan);
|
||||
const xRight = mapLogX(band.fHi, plotX, plotW, logMin, logSpan);
|
||||
const width = Math.max(2, xRight - xLeft - 1);
|
||||
drawBar(g, xLeft, width, level, zeroY, baseY, plotY, plotH, range, CONFIG);
|
||||
if (hasOverlay && Number.isFinite(overlayPeaks[i])) {
|
||||
drawPeakOverlay(g, xLeft, width, overlayPeaks[i], plotY, plotH, range);
|
||||
}
|
||||
if (CONFIG.RTA_PEAK_HOLD_MODE !== 'off') {
|
||||
drawHold(g, xLeft, width, state.peakHold[i], plotY, plotH, range);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderRtwBars(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, overlayPeaks) {
|
||||
const baseY = plotY + plotH;
|
||||
const zeroY = mapDbToY(0, range, plotY, plotH);
|
||||
const slotW = plotW / Math.max(1, state.mapping.length);
|
||||
const hasOverlay = isVectorLike(overlayPeaks) && overlayPeaks.length === state.mapping.length;
|
||||
for (let i = 0; i < state.mapping.length; i++) {
|
||||
const level = levels[i];
|
||||
const x = plotX + i * slotW + slotW * 0.15;
|
||||
const width = Math.max(2, slotW * 0.7);
|
||||
drawBar(g, x, width, level, zeroY, baseY, plotY, plotH, range, CONFIG);
|
||||
if (hasOverlay && Number.isFinite(overlayPeaks[i])) {
|
||||
drawPeakOverlay(g, x, width, overlayPeaks[i], plotY, plotH, range);
|
||||
}
|
||||
if (CONFIG.RTA_PEAK_HOLD_MODE !== 'off') {
|
||||
drawHold(g, x, width, state.peakHold[i], plotY, plotH, range);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderLine(g, state, levels, plotX, plotY, plotW, plotH, CONFIG, range, freqBounds, overlayPeaks) {
|
||||
const logMin = Math.log10(freqBounds.min);
|
||||
const logSpan = Math.max(1e-6, Math.log10(freqBounds.max) - logMin);
|
||||
g.save();
|
||||
g.strokeStyle = '#36bdf8';
|
||||
g.lineWidth = 1.6;
|
||||
g.beginPath();
|
||||
let moved = false;
|
||||
for (let i = 0; i < state.mapping.length; i++) {
|
||||
const band = state.mapping[i];
|
||||
const x = mapLogX(band.center, plotX, plotW, logMin, logSpan);
|
||||
const y = mapDbToY(levels[i], range, plotY, plotH);
|
||||
if (!moved) {
|
||||
g.moveTo(x, y);
|
||||
moved = true;
|
||||
} else {
|
||||
g.lineTo(x, y);
|
||||
}
|
||||
}
|
||||
g.stroke();
|
||||
g.restore();
|
||||
|
||||
if (isVectorLike(overlayPeaks) && overlayPeaks.length === state.mapping.length) {
|
||||
const markerWidth = Math.max(2, plotW / Math.max(40, state.mapping.length * 4));
|
||||
for (let i = 0; i < state.mapping.length; i++) {
|
||||
if (!Number.isFinite(overlayPeaks[i])) continue;
|
||||
const band = state.mapping[i];
|
||||
const x = mapLogX(band.center, plotX, plotW, logMin, logSpan) - markerWidth / 2;
|
||||
drawPeakOverlay(g, x, markerWidth, overlayPeaks[i], plotY, plotH, range);
|
||||
}
|
||||
}
|
||||
|
||||
// Peak markers
|
||||
const barWidth = Math.max(2, plotW / Math.max(10, state.mapping.length * 2));
|
||||
if (CONFIG.RTA_PEAK_HOLD_MODE !== 'off') {
|
||||
for (let i = 0; i < state.mapping.length; i++) {
|
||||
const band = state.mapping[i];
|
||||
const x = mapLogX(band.center, plotX, plotW, logMin, logSpan) - barWidth / 2;
|
||||
drawHold(g, x, barWidth, state.peakHold[i], plotY, plotH, range);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawBar(g, x, width, level, zeroY, baseY, plotY, plotH, range, CONFIG) {
|
||||
const baseColor = CONFIG?.RTA_BAR_BASE_COLOR || DEFAULT_RTA_BAR_BASE_COLOR;
|
||||
const y = mapDbToY(level, range, plotY, plotH);
|
||||
if (level <= 0) {
|
||||
g.fillStyle = baseColor;
|
||||
g.fillRect(x, y, width, Math.max(0, baseY - y));
|
||||
} else {
|
||||
g.fillStyle = baseColor;
|
||||
g.fillRect(x, zeroY, width, Math.max(0, baseY - zeroY));
|
||||
g.fillStyle = RTA_PEAK_COLOR;
|
||||
g.fillRect(x, y, width, Math.max(0, zeroY - y));
|
||||
}
|
||||
g.globalAlpha = 0.12;
|
||||
g.fillStyle = '#fff';
|
||||
g.fillRect(x, y, width, 2);
|
||||
g.globalAlpha = 1;
|
||||
}
|
||||
|
||||
function drawHold(g, x, width, value, plotY, plotH, range) {
|
||||
if (!Number.isFinite(value)) return;
|
||||
if (value <= (range.bottom + 0.05)) return;
|
||||
const yHold = mapDbToY(value, range, plotY, plotH);
|
||||
g.fillStyle = '#fff';
|
||||
g.fillRect(x, yHold - 1, width, 2);
|
||||
}
|
||||
|
||||
function drawPeakOverlay(g, x, width, value, plotY, plotH, range) {
|
||||
if (!Number.isFinite(value)) return;
|
||||
const y = mapDbToY(value, range, plotY, plotH);
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 1.4;
|
||||
g.beginPath();
|
||||
g.moveTo(x, y);
|
||||
g.lineTo(x + width, y);
|
||||
g.stroke();
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function redrawPlotEdges(g, x, y, w, h, CONFIG) {
|
||||
const gutterL = Number.isFinite(CONFIG?.AXIS_GUTTER_LEFT)
|
||||
? Math.max(8, Number(CONFIG.AXIS_GUTTER_LEFT))
|
||||
: 14;
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.beginPath();
|
||||
g.moveTo(x - gutterL, y);
|
||||
g.lineTo(x + w, y);
|
||||
g.stroke();
|
||||
g.beginPath();
|
||||
g.moveTo(x - gutterL, y + h);
|
||||
g.lineTo(x + w, y + h);
|
||||
g.stroke();
|
||||
}
|
||||
|
||||
async function drawMeter(env, state, plotX, plotY, plotW, plotH) {
|
||||
const meterRect = { x: plotX + plotW + METER_GAP, y: plotY, w: METER_WIDTH, h: plotH };
|
||||
const { ctx: g, config: CONFIG, meters } = env;
|
||||
drawCachedStaticLayer(
|
||||
state,
|
||||
g,
|
||||
'rta-meter-shell',
|
||||
`${meterRect.w}x${meterRect.h}`,
|
||||
{ x: meterRect.x - STATIC_STROKE_PAD, y: meterRect.y - STATIC_STROKE_PAD, w: meterRect.w + STATIC_STROKE_PAD * 2, h: meterRect.h + STATIC_STROKE_PAD * 2 },
|
||||
(lg) => {
|
||||
lg.fillStyle = PANEL_BG;
|
||||
lg.fillRect(STATIC_STROKE_PAD, STATIC_STROKE_PAD, meterRect.w, meterRect.h);
|
||||
lg.strokeStyle = FRAME_COLOR;
|
||||
lg.lineWidth = 2;
|
||||
lg.strokeRect(STATIC_STROKE_PAD + 0.5, STATIC_STROKE_PAD + 0.5, meterRect.w - 1, meterRect.h - 1);
|
||||
});
|
||||
const slotList = env.slots ? env.slots('realtime') : null;
|
||||
const active = (slotList && slotList[0]) || 'vu';
|
||||
if (active === 'none') return;
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, meterRect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
const innerRect = {
|
||||
x: meterRect.x,
|
||||
y: meterRect.y + METER_PAD_TOP + innerOffset,
|
||||
w: meterRect.w,
|
||||
h: innerHeight,
|
||||
};
|
||||
g.save();
|
||||
g.lineWidth = 2;
|
||||
g.beginPath();
|
||||
g.rect(meterRect.x + g.lineWidth / 2, meterRect.y + g.lineWidth / 2, meterRect.w - g.lineWidth, meterRect.h - g.lineWidth);
|
||||
g.clip();
|
||||
await meters.draw(g, innerRect, active, CONFIG);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function createStaticLayerCanvas(width, height) {
|
||||
const w = Math.max(1, width | 0);
|
||||
const h = Math.max(1, height | 0);
|
||||
if (typeof OffscreenCanvas !== 'undefined') return new OffscreenCanvas(w, h);
|
||||
const c = document.createElement('canvas');
|
||||
c.width = w;
|
||||
c.height = h;
|
||||
return c;
|
||||
}
|
||||
|
||||
function drawCachedStaticLayer(state, g, layerId, key, rect, build) {
|
||||
if (!state || !rect || rect.w <= 0 || rect.h <= 0) return;
|
||||
if (!state.staticLayers) state.staticLayers = new Map();
|
||||
const fullKey = `${layerId}:${key}:${Math.max(0, rect.w | 0)}x${Math.max(0, rect.h | 0)}`;
|
||||
let layer = state.staticLayers.get(fullKey);
|
||||
if (!layer) {
|
||||
const canvas = createStaticLayerCanvas(rect.w, rect.h);
|
||||
const ctx = canvas.getContext('2d');
|
||||
build(ctx);
|
||||
layer = { canvas };
|
||||
state.staticLayers.set(fullKey, layer);
|
||||
}
|
||||
g.drawImage(layer.canvas, rect.x, rect.y);
|
||||
}
|
||||
|
||||
|
||||
function mapLogX(freq, x0, w, logMin, logSpan) {
|
||||
const clamped = Math.max(5, freq);
|
||||
const frac = (Math.log10(clamped) - logMin) / (logSpan || 1);
|
||||
return x0 + Math.max(0, Math.min(1, frac)) * w;
|
||||
}
|
||||
|
||||
function mapDbToY(value, range, plotY, plotH) {
|
||||
const top = range.top;
|
||||
const bottom = range.bottom;
|
||||
const clamped = Math.max(bottom, Math.min(top, value));
|
||||
const t = (clamped - bottom) / (top - bottom || 1);
|
||||
return plotY + plotH - t * plotH;
|
||||
}
|
||||
|
||||
function getDbRange() {
|
||||
const top = 9;
|
||||
const bottom = -36;
|
||||
const ticks = [];
|
||||
for (let v = bottom; v <= top + 1e-6; v += 9) {
|
||||
ticks.push(v);
|
||||
}
|
||||
if (!ticks.includes(top)) ticks.push(top);
|
||||
return { top, bottom, ticks };
|
||||
}
|
||||
|
||||
function getFreqBounds(CONFIG, nyq, rtaData) {
|
||||
let min = CONFIG.RTA_FREQ_RANGE === 'lf' ? 5 : 20;
|
||||
let max = CONFIG.RTA_FREQ_RANGE === 'lf' ? 5000 : 20000;
|
||||
if (rtaData) {
|
||||
if (Number.isFinite(rtaData.freqMin)) min = Math.max(min, rtaData.freqMin);
|
||||
if (Number.isFinite(rtaData.freqMax)) max = Math.min(max, rtaData.freqMax);
|
||||
}
|
||||
return { min, max: Math.min(max, nyq) };
|
||||
}
|
||||
|
||||
function buildFixedRtwBands(bpoMode, freqBounds, nyq, overrideCenters) {
|
||||
const centers = isVectorLike(overrideCenters) && overrideCenters.length
|
||||
? overrideCenters.slice()
|
||||
: getRtwCenters(bpoMode);
|
||||
if (!centers.length) return [];
|
||||
const n = resolveRtwBpoValue(bpoMode);
|
||||
const factor = Math.pow(2, 1 / (2 * n));
|
||||
const minF = freqBounds.min;
|
||||
const maxF = Math.min(freqBounds.max, nyq);
|
||||
const bands = [];
|
||||
for (const fc of centers) {
|
||||
if (!Number.isFinite(fc)) continue;
|
||||
if (fc < minF || fc > maxF) continue;
|
||||
const fLo = Math.max(fc / factor, minF);
|
||||
const fHi = Math.min(fc * factor, maxF);
|
||||
if (fHi <= fLo) continue;
|
||||
bands.push({ center: fc, fLo, fHi });
|
||||
}
|
||||
return bands;
|
||||
}
|
||||
|
||||
function selectLocalRtwPacket(packet, bpoMode) {
|
||||
if (!packet || !isVectorLike(packet.centers) || !packet.centers.length) return packet;
|
||||
const desiredCenters = getRtwCenters(bpoMode);
|
||||
if (!desiredCenters.length) return packet;
|
||||
if (packet.centers.length === desiredCenters.length) return packet;
|
||||
|
||||
const keyFor = (value) => Number(value).toFixed(1);
|
||||
const indexByCenter = new Map();
|
||||
for (let i = 0; i < packet.centers.length; i++) {
|
||||
indexByCenter.set(keyFor(packet.centers[i]), i);
|
||||
}
|
||||
|
||||
const pick = [];
|
||||
const selectedCenters = [];
|
||||
const used = new Set();
|
||||
for (const center of desiredCenters) {
|
||||
let idx = indexByCenter.get(keyFor(center));
|
||||
if (!Number.isInteger(idx)) {
|
||||
let bestIdx = -1;
|
||||
let bestErr = Infinity;
|
||||
for (let i = 0; i < packet.centers.length; i++) {
|
||||
if (used.has(i)) continue;
|
||||
const candidate = Number(packet.centers[i]);
|
||||
if (!Number.isFinite(candidate)) continue;
|
||||
const relErr = Math.abs(candidate - center) / Math.max(center, 1);
|
||||
if (relErr < bestErr) {
|
||||
bestErr = relErr;
|
||||
bestIdx = i;
|
||||
}
|
||||
}
|
||||
if (bestIdx >= 0 && bestErr <= 0.04) {
|
||||
idx = bestIdx;
|
||||
}
|
||||
}
|
||||
if (Number.isInteger(idx) && !used.has(idx)) {
|
||||
used.add(idx);
|
||||
pick.push(idx);
|
||||
selectedCenters.push(Number(packet.centers[idx]));
|
||||
}
|
||||
}
|
||||
if (!pick.length) return packet;
|
||||
|
||||
const pickVector = (src) => {
|
||||
if (!isVectorLike(src)) return [];
|
||||
return pick.map((idx) => Number(src[idx]));
|
||||
};
|
||||
|
||||
return {
|
||||
...packet,
|
||||
centers: selectedCenters,
|
||||
bands_avg: pickVector(packet.bands_avg || packet.bands),
|
||||
bands_peak: pickVector(packet.bands_peak),
|
||||
bands: pickVector(packet.bands || packet.bands_avg),
|
||||
};
|
||||
}
|
||||
|
||||
function mapIirLevels(packet, CONFIG, range, expectedLen) {
|
||||
if (!packet || packet.engine !== 'iir') return null;
|
||||
const bottom = (range && Number.isFinite(range.bottom)) ? range.bottom : FLOOR_DB;
|
||||
const top = (range && Number.isFinite(range.top)) ? range.top : 9;
|
||||
const gain = Number(CONFIG.RTA_DISPLAY_GAIN_IIR_DB ?? 0) || 0;
|
||||
const ensureLen = (arr) => (isVectorLike(arr) && (!expectedLen || arr.length === expectedLen)) ? arr : null;
|
||||
const avgRaw = ensureLen(packet.bands_avg || packet.bands);
|
||||
const peakRaw = ensureLen(packet.bands_peak);
|
||||
const requestedMode = (CONFIG.RTA_BALLISTICS_MODE === 'peak' || CONFIG.RTA_BALLISTICS_MODE === 'both') ? CONFIG.RTA_BALLISTICS_MODE : 'average';
|
||||
|
||||
let modeResolved = requestedMode;
|
||||
if (modeResolved === 'both' && !(avgRaw && peakRaw)) {
|
||||
modeResolved = avgRaw ? 'average' : (peakRaw ? 'peak' : 'average');
|
||||
}
|
||||
if (modeResolved === 'peak' && !peakRaw) {
|
||||
modeResolved = avgRaw ? 'average' : null;
|
||||
}
|
||||
if (modeResolved === 'average' && !avgRaw) {
|
||||
modeResolved = peakRaw ? 'peak' : null;
|
||||
}
|
||||
if (!modeResolved) return null;
|
||||
|
||||
const sourcePrimary = modeResolved === 'peak' ? peakRaw : avgRaw;
|
||||
if (!sourcePrimary) return null;
|
||||
|
||||
const convert = (src) => {
|
||||
const out = new Float32Array(src.length);
|
||||
for (let i = 0; i < src.length; i++) {
|
||||
const v = Number(src[i]);
|
||||
const val = Number.isFinite(v) ? v : bottom;
|
||||
out[i] = clamp(val + gain, bottom, top);
|
||||
}
|
||||
return out;
|
||||
};
|
||||
|
||||
const primary = convert(sourcePrimary);
|
||||
let overlay = null;
|
||||
let modeForRenderer = modeResolved;
|
||||
|
||||
if (requestedMode === 'both' && avgRaw && peakRaw) {
|
||||
overlay = convert(peakRaw);
|
||||
modeForRenderer = 'both';
|
||||
}
|
||||
if (modeForRenderer === 'both' && !overlay) {
|
||||
modeForRenderer = modeResolved === 'peak' ? 'peak' : 'average';
|
||||
}
|
||||
|
||||
return {
|
||||
primary,
|
||||
overlay: (modeForRenderer === 'both') ? overlay : null,
|
||||
mode: modeForRenderer,
|
||||
};
|
||||
}
|
||||
|
||||
function mapNativeFftLevels(packet, CONFIG, range, expectedLen) {
|
||||
if (!packet || packet.engine !== 'fft') return null;
|
||||
const bottom = (range && Number.isFinite(range.bottom)) ? range.bottom : FLOOR_DB;
|
||||
const top = (range && Number.isFinite(range.top)) ? range.top : 9;
|
||||
const gain = Number(CONFIG.RTA_DISPLAY_GAIN_FFT_DB ?? 0) || 0;
|
||||
const src = isVectorLike(packet.bands_avg || packet.bands)
|
||||
? (packet.bands_avg || packet.bands)
|
||||
: null;
|
||||
if (!src || (expectedLen && src.length !== expectedLen)) return null;
|
||||
const out = new Float32Array(src.length);
|
||||
for (let i = 0; i < src.length; i++) {
|
||||
const v = Number(src[i]);
|
||||
out[i] = clamp((Number.isFinite(v) ? v : bottom) + gain, bottom, top);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function isVectorLike(v) {
|
||||
return !!(v && (Array.isArray(v) || ArrayBuffer.isView(v)));
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.resetRealTimeAnalyzerPeakHold = function resetRealTimeAnalyzerPeakHold() {
|
||||
const state = window.__RTA_STATE__;
|
||||
if (!state || !state.peakHold || !state.peakHold.length) return;
|
||||
const floor = (state.currentRange && state.currentRange.bottom) || FLOOR_DB;
|
||||
state.peakHold = new Float32Array(state.peakHold.length);
|
||||
state.peakHold.fill(floor);
|
||||
state.displayLevels = new Float32Array(state.peakHold.length);
|
||||
state.displayLevels.fill(floor);
|
||||
state.lastPeakTime = new Array(state.peakHold.length).fill(performance.now());
|
||||
};
|
||||
}
|
||||
|
||||
function clamp(val, min, max) {
|
||||
return Math.min(max, Math.max(min, val));
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
// views/recorder.js — Recorder-View im XY-Layout-Stil (links Recorder-Panel, rechts 3 Slots)
|
||||
import { drawCachedStaticLayer } from './static_layer.js';
|
||||
|
||||
export const id = 'recorder';
|
||||
|
||||
const FRAME = { left: 0, top: 70, right: 0, bottom: 0 };
|
||||
const METER_SLOTS = 3;
|
||||
const METER_GAP = 8;
|
||||
const SLOT_GAP = 12;
|
||||
const METER_WIDTH = 420;
|
||||
const METER_SLOT_SHRINK = 24;
|
||||
const METER_PAD_TOP = 1;
|
||||
const METER_PAD_BOTTOM = -7;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
const PANEL_BG = 'rgba(5,5,11,0.75)';
|
||||
const SLOT_BG = 'rgba(10,12,18,0.85)';
|
||||
const BORDER = 'rgba(120, 170, 220, 0.7)';
|
||||
|
||||
function isExternalClient() {
|
||||
const host = String(globalThis?.location?.hostname || '').trim().toLowerCase();
|
||||
return !!host && host !== 'localhost' && host !== '127.0.0.1' && host !== '::1' && host !== '[::1]';
|
||||
}
|
||||
|
||||
export function init() { return { staticLayers: new Map(), hudLayoutSig: '' }; }
|
||||
export function resize() {}
|
||||
export function destroy(state) {
|
||||
if (state) state.staticLayers = null;
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
if (!env || !env.ctx) return;
|
||||
const { ctx: g, rect, recorder, meters, config: CONFIG } = env;
|
||||
const slotsRaw = env.slots?.(id) || [];
|
||||
const slots = slotsRaw.filter((v) => v && v !== 'none');
|
||||
const layout = computeLayout(rect, slots.length);
|
||||
|
||||
drawCachedPlotShell(state, g, layout.plot, CONFIG);
|
||||
drawCachedRecorderPanel(state, g, layout.scope);
|
||||
if (CONFIG.RECORD_SHOW_RECORDER_AB === true) {
|
||||
drawRecorderAbIndicator(g, layout.scope, recorder);
|
||||
}
|
||||
if (slots.length) {
|
||||
await drawMeterPanel(state, g, layout.meter, slots, meters, CONFIG);
|
||||
}
|
||||
positionRecorderHud(state, env.recorderDom, layout.scope);
|
||||
}
|
||||
|
||||
function computeLayout(rect, slotCount = METER_SLOTS) {
|
||||
const plotX = 0;
|
||||
const plotY = FRAME.top;
|
||||
const innerWidth = Math.max(200, rect.w - plotX - FRAME.right);
|
||||
const minPlotW = 200;
|
||||
|
||||
const n = Math.max(0, Math.min(METER_SLOTS, slotCount | 0));
|
||||
const panelSlotsWidth = computePanelSlotsWidth(innerWidth, n);
|
||||
let meterW = n > 0 ? Math.max(panelSlotsWidth, (n === 1 ? 160 : (n === 2 ? 280 : METER_WIDTH))) : 0;
|
||||
let plotW = innerWidth - (n > 0 ? (meterW + METER_GAP) : 0);
|
||||
|
||||
if (plotW < minPlotW) {
|
||||
plotW = minPlotW;
|
||||
meterW = n > 0 ? (innerWidth - plotW - METER_GAP) : 0;
|
||||
}
|
||||
|
||||
if (n > 0) meterW = Math.max(meterW, panelSlotsWidth);
|
||||
if (plotW < 80) plotW = 80;
|
||||
|
||||
const plotH = Math.max(180, rect.h - FRAME.top - FRAME.bottom);
|
||||
const plot = { x: plotX, y: plotY, w: plotW, h: plotH };
|
||||
const scope = computeScopeBox(plot);
|
||||
|
||||
const meter = {
|
||||
x: plot.x + plot.w + (n > 0 ? METER_GAP : 0),
|
||||
y: plot.y,
|
||||
w: meterW,
|
||||
h: plotH,
|
||||
};
|
||||
|
||||
return { plot, scope, meter };
|
||||
}
|
||||
|
||||
function computePanelSlotWidth(canvasWidth, slotCount = METER_SLOTS) {
|
||||
const n = Math.max(1, Math.min(METER_SLOTS, slotCount | 0));
|
||||
const avail = Math.max(1, canvasWidth);
|
||||
const totalGap = (n - 1) * SLOT_GAP;
|
||||
const usable = avail - totalGap;
|
||||
return Math.max(1, Math.floor(usable / n));
|
||||
}
|
||||
|
||||
function computePanelSlotsWidth(innerWidth, slotCount = METER_SLOTS) {
|
||||
const panelSlotWidth = 100;
|
||||
const n = Math.max(0, Math.min(METER_SLOTS, slotCount | 0));
|
||||
return n > 0 ? (panelSlotWidth * n + (n - 1) * SLOT_GAP) : 0;
|
||||
}
|
||||
|
||||
function computeScopeBox(plot) {
|
||||
// Maximiere die Recorder-Box im Plot (kein zusätzlicher Innenabstand)
|
||||
const padding = 0;
|
||||
const w = Math.max(1, plot.w - padding);
|
||||
const h = Math.max(1, plot.h - padding);
|
||||
const x = Math.round(plot.x + padding / 2);
|
||||
const y = Math.round(plot.y + padding / 2);
|
||||
const cx = x + w / 2;
|
||||
const cy = y + h / 2;
|
||||
return { x, y, w, h, cx, cy };
|
||||
}
|
||||
|
||||
function drawCachedPlotShell(state, g, plot, CONFIG = {}) {
|
||||
const gutterL = Number.isFinite(CONFIG?.AXIS_GUTTER_LEFT)
|
||||
? Math.max(8, Number(CONFIG.AXIS_GUTTER_LEFT))
|
||||
: 14;
|
||||
drawCachedStaticLayer(state, g, 'recorder-plot-shell', `${gutterL}`, plot, (cg) => {
|
||||
cg.fillStyle = PANEL_BG;
|
||||
cg.fillRect(0, 0, plot.w, plot.h);
|
||||
cg.save();
|
||||
cg.translate(-plot.x, -plot.y);
|
||||
cg.strokeStyle = '#00e7ff';
|
||||
cg.lineWidth = 2;
|
||||
cg.beginPath();
|
||||
cg.moveTo(plot.x - gutterL, plot.y);
|
||||
cg.lineTo(plot.x + plot.w, plot.y);
|
||||
cg.stroke();
|
||||
cg.beginPath();
|
||||
cg.moveTo(plot.x - gutterL, plot.y + plot.h);
|
||||
cg.lineTo(plot.x + plot.w, plot.y + plot.h);
|
||||
cg.stroke();
|
||||
cg.beginPath();
|
||||
cg.moveTo(plot.x, plot.y);
|
||||
cg.lineTo(plot.x, plot.y + plot.h);
|
||||
cg.stroke();
|
||||
cg.beginPath();
|
||||
cg.moveTo(plot.x + plot.w, plot.y);
|
||||
cg.lineTo(plot.x + plot.w, plot.y + plot.h);
|
||||
cg.stroke();
|
||||
cg.restore();
|
||||
});
|
||||
}
|
||||
|
||||
function drawCachedRecorderPanel(state, g, box) {
|
||||
drawCachedStaticLayer(state, g, 'recorder-box-shell', 'frame', box, (cg) => {
|
||||
cg.fillStyle = 'rgba(7, 8, 15, 0.7)';
|
||||
cg.fillRect(0, 0, box.w, box.h);
|
||||
cg.strokeStyle = '#00e7ff';
|
||||
cg.lineWidth = 2;
|
||||
cg.strokeRect(0.5, 0.5, box.w - 1, box.h - 1);
|
||||
});
|
||||
}
|
||||
|
||||
async function drawMeterPanel(state, g, area, slots, meters, CONFIG) {
|
||||
const slotCount = Array.isArray(slots) ? slots.length : 0;
|
||||
if (!slotCount || !area || area.w <= 0 || area.h <= 0) return;
|
||||
drawCachedStaticLayer(state, g, 'recorder-meter-shell', `${slotCount}|${CONFIG?.PANEL_DIVIDERS_ENABLED ? 1 : 0}`, area, (cg) => {
|
||||
cg.fillStyle = PANEL_BG;
|
||||
cg.fillRect(0, 0, area.w, area.h);
|
||||
cg.strokeStyle = '#00e7ff';
|
||||
cg.lineWidth = 2;
|
||||
cg.strokeRect(0.5, 0.5, area.w - 1, area.h - 1);
|
||||
|
||||
if (CONFIG?.PANEL_DIVIDERS_ENABLED) {
|
||||
const gap = SLOT_GAP;
|
||||
const slotW = computePanelSlotWidth(area.w, slotCount);
|
||||
const totalSlotW = slotW * slotCount + gap * (slotCount - 1);
|
||||
const startX = Math.max(0, Math.floor((area.w - totalSlotW) / 2));
|
||||
const slotTopPadding = METER_PAD_TOP + METER_SLOT_SHRINK / 2;
|
||||
const slotBottomPadding = METER_PAD_BOTTOM + METER_EXTRA_BOTTOM_PAD + METER_SLOT_SHRINK / 2;
|
||||
for (let i = 1; i < slotCount; i++) {
|
||||
const rectX = startX + i * (slotW + gap);
|
||||
const dividerX = rectX - gap / 2;
|
||||
cg.save();
|
||||
cg.strokeStyle = 'rgba(0,231,255,0.4)';
|
||||
cg.lineWidth = 1;
|
||||
cg.setLineDash([4, 3]);
|
||||
cg.beginPath();
|
||||
cg.moveTo(dividerX, slotTopPadding - 6);
|
||||
cg.lineTo(dividerX, area.h - slotBottomPadding + 6);
|
||||
cg.stroke();
|
||||
cg.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
g.save();
|
||||
|
||||
const gap = SLOT_GAP;
|
||||
const slotW = computePanelSlotWidth(area.w, slotCount);
|
||||
const totalSlotW = slotW * slotCount + gap * (slotCount - 1);
|
||||
const startX = area.x + Math.max(0, Math.floor((area.w - totalSlotW) / 2));
|
||||
const slotTopPadding = METER_PAD_TOP + METER_SLOT_SHRINK / 2;
|
||||
const slotBottomPadding = METER_PAD_BOTTOM + METER_EXTRA_BOTTOM_PAD + METER_SLOT_SHRINK / 2;
|
||||
const slotH = Math.max(40, area.h - slotTopPadding - slotBottomPadding);
|
||||
|
||||
for (let i = 0; i < slotCount; i++) {
|
||||
const x = startX + i * (slotW + gap);
|
||||
const rect = { x, y: area.y + slotTopPadding, w: slotW, h: slotH };
|
||||
const slotId = slots[i];
|
||||
if (slotId) {
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, rect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
const innerRect = {
|
||||
x: rect.x,
|
||||
y: rect.y + METER_PAD_TOP + innerOffset,
|
||||
w: rect.w,
|
||||
h: innerHeight,
|
||||
};
|
||||
try { await meters.draw(g, innerRect, slotId, CONFIG); }
|
||||
catch (e) { /* ignore draw errors to keep view alive */ }
|
||||
}
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function positionRecorderHud(state, dom = {}, scope) {
|
||||
if (!dom || !scope) return;
|
||||
const { hud, label, start, stop, auto, list, timer } = dom;
|
||||
if (!hud) return;
|
||||
const centerX = scope.x + scope.w / 2;
|
||||
const topY = scope.y + 8;
|
||||
// Buttons mittig im unteren Drittel
|
||||
const baseY = scope.y + scope.h - 24 - Math.max(start?.offsetHeight || 0, stop?.offsetHeight || 0, auto?.offsetHeight || 0);
|
||||
const gap = 20;
|
||||
const startW = (start?.offsetWidth || 120);
|
||||
const stopW = (stop?.offsetWidth || 120);
|
||||
const autoW = (auto?.offsetWidth || 120);
|
||||
const totalW = startW + gap + stopW + gap + autoW;
|
||||
const startX = centerX - totalW / 2;
|
||||
|
||||
const listTop = topY + (label?.offsetHeight || 30) + 8;
|
||||
const listBottomReserve = 28;
|
||||
const listMaxHeight = list
|
||||
? Math.max(72, ((timer ? (baseY - (timer.offsetHeight || 18) - 10) : baseY) - listTop - listBottomReserve))
|
||||
: 0;
|
||||
const sig = [
|
||||
scope.x, scope.y, scope.w, scope.h,
|
||||
label?.offsetWidth || 0, label?.offsetHeight || 0,
|
||||
start?.offsetWidth || 0, start?.offsetHeight || 0,
|
||||
stop?.offsetWidth || 0, stop?.offsetHeight || 0,
|
||||
auto?.offsetWidth || 0, auto?.offsetHeight || 0,
|
||||
timer?.offsetWidth || 0, timer?.offsetHeight || 0,
|
||||
listMaxHeight,
|
||||
].join('|');
|
||||
if (state?.hudLayoutSig === sig) return;
|
||||
if (state) state.hudLayoutSig = sig;
|
||||
|
||||
if (label) {
|
||||
label.style.left = `${centerX - (label.offsetWidth || 0) / 2}px`;
|
||||
label.style.top = `${topY}px`;
|
||||
}
|
||||
if (list) {
|
||||
const y = topY + (label?.offsetHeight || 30) + 8;
|
||||
list.classList.toggle('rec-list--external', isExternalClient());
|
||||
list.style.width = `${Math.max(200, scope.w - 45)}px`;
|
||||
list.style.left = `${scope.x + 12}px`;
|
||||
list.style.top = `${y}px`;
|
||||
list.style.maxHeight = `${listMaxHeight}px`;
|
||||
}
|
||||
if (start) {
|
||||
start.style.left = `${startX}px`;
|
||||
start.style.top = `${baseY}px`;
|
||||
}
|
||||
if (stop) {
|
||||
stop.style.left = `${startX + startW + gap}px`;
|
||||
stop.style.top = `${baseY}px`;
|
||||
}
|
||||
if (auto) {
|
||||
auto.style.left = `${startX + startW + gap + stopW + gap}px`;
|
||||
auto.style.top = `${baseY}px`;
|
||||
}
|
||||
if (timer) {
|
||||
const y = baseY - (timer.offsetHeight || 18) - 10;
|
||||
timer.style.left = `${centerX - (timer.offsetWidth || 80) / 2}px`;
|
||||
timer.style.top = `${y}px`;
|
||||
}
|
||||
}
|
||||
|
||||
function drawRecorderAbIndicator(g, box, recorder = {}) {
|
||||
const active = recorder.activeRecorderSlot === 'A' || recorder.activeRecorderSlot === 'B'
|
||||
? recorder.activeRecorderSlot
|
||||
: null;
|
||||
const processing = new Set(Array.isArray(recorder.processingRecorderSlots) ? recorder.processingRecorderSlots : []);
|
||||
const next = recorder.nextRecorderSlot === 'B' ? 'B' : 'A';
|
||||
const colorFor = (slot) => {
|
||||
if (active === slot) return '#ff3b3b';
|
||||
if (!processing.has(slot) && (active || next === slot)) return '#34d399';
|
||||
if (processing.has(slot)) return '#8fd3d4';
|
||||
return 'rgba(143, 211, 212, 0.45)';
|
||||
};
|
||||
|
||||
const top = box.y + 12;
|
||||
const left = box.x + 14;
|
||||
const gap = 18;
|
||||
|
||||
g.save();
|
||||
g.font = 'bold 18px ui-monospace, monospace';
|
||||
g.textAlign = 'left';
|
||||
g.textBaseline = 'top';
|
||||
g.fillStyle = colorFor('A');
|
||||
g.fillText('A', left, top);
|
||||
g.fillStyle = colorFor('B');
|
||||
g.fillText('B', left + gap, top);
|
||||
g.restore();
|
||||
}
|
||||
@@ -0,0 +1,836 @@
|
||||
// views/spectrogram.js — FFT Spectrogram View with optional Worker renderer
|
||||
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, PANEL_BG } from '../core/theme.js';
|
||||
|
||||
const PLOT = { left: 35, top: DEFAULT_TOP_INSET, right: 0, bottom: 0 };
|
||||
const METER_WIDTH = 140;
|
||||
const METER_GAP = 8;
|
||||
const METER_PAD_TOP = 15;
|
||||
const METER_PAD_BOTTOM = 5;
|
||||
const METER_SLOT_SHRINK = 24;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
const MIN_ROW_COUNT = 16;
|
||||
const RTA_X_TICKS = [20, 31.5, 63, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
|
||||
const SMOOTHING_MAX = 0.2;
|
||||
const TIME_GRID_SPACING = 100;
|
||||
const SPECTROGRAM_ID = 'spectrogram';
|
||||
const SPECTRO_RENDER_SCALE = 0.85;
|
||||
const SUPPORTS_WORKER = typeof window !== 'undefined'
|
||||
&& typeof Worker !== 'undefined'
|
||||
&& typeof HTMLCanvasElement !== 'undefined'
|
||||
&& !!HTMLCanvasElement.prototype.transferControlToOffscreen;
|
||||
|
||||
// Pre-calculated constants
|
||||
const LOG10 = Math.log(10);
|
||||
const DB_TO_LINEAR_FACTOR = LOG10 / 10;
|
||||
const SPECTRO_COLOR_STOPS = [
|
||||
{ t: 0.0, color: [0, 0, 0] },
|
||||
{ t: 0.25, color: [0, 0, 80] },
|
||||
{ t: 0.5, color: [0, 135, 140] },
|
||||
{ t: 0.75, color: [220, 220, 0] },
|
||||
{ t: 1.0, color: [255, 255, 255] },
|
||||
];
|
||||
|
||||
export const id = SPECTROGRAM_ID;
|
||||
|
||||
export function init() {
|
||||
return {
|
||||
useWorker: false, // wird im Render je nach Config gesetzt
|
||||
worker: null,
|
||||
workerReady: false,
|
||||
offscreenWidth: 0,
|
||||
offscreenHeight: 0,
|
||||
spectroCanvasEl: null,
|
||||
spectroCanvasTransferred: false,
|
||||
lastTopDb: null,
|
||||
lastBottomDb: null,
|
||||
lastGamma: null,
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
freqBounds: null,
|
||||
freqMap: [],
|
||||
freqMapKey: '',
|
||||
sampleRate: 48000,
|
||||
binCount: 0,
|
||||
|
||||
history: null,
|
||||
writeIndex: 0,
|
||||
imgData: null,
|
||||
pixelData: null,
|
||||
scrollAccumulator: 0,
|
||||
|
||||
configSig: '',
|
||||
gridCache: null,
|
||||
_initialized: false,
|
||||
_lastScrollTs: 0,
|
||||
lastPhoenixSpectroSeq: 0,
|
||||
};
|
||||
}
|
||||
|
||||
export function resize() {}
|
||||
|
||||
export function destroy(state) {
|
||||
teardownWorker(state);
|
||||
state.history = null;
|
||||
state.imgData = null;
|
||||
state.pixelData = null;
|
||||
state.freqMap = [];
|
||||
state.freqMapKey = '';
|
||||
state.gridCache = null;
|
||||
removeSpectroCanvasElement(state);
|
||||
|
||||
if (state.spectroCanvasEl && !state.spectroCanvasTransferred) {
|
||||
state.spectroCanvasEl.width = 0;
|
||||
state.spectroCanvasEl.height = 0;
|
||||
}
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
if (!state._initialized) {
|
||||
await new Promise(resolve => setTimeout(resolve, 0));
|
||||
state._initialized = true;
|
||||
}
|
||||
// Config-Flag schaltet Worker ein (default true), wenn Offscreen verfügbar
|
||||
state.useWorker = SUPPORTS_WORKER && !!env.config?.SPECTRO_USE_WORKER;
|
||||
state._dbgNextLog = state._dbgNextLog || 0;
|
||||
|
||||
const { ctx: g, rect, config: CONFIG, audio, meters } = env;
|
||||
const analyzer = audio.getAnalyser?.();
|
||||
let freqBuf = audio.getFreqBuffer?.();
|
||||
const phoenixSpectroSeq = Number(env.audio?.phoenixSpectroSeq || 0);
|
||||
const hasPhoenixSpectro = Number.isFinite(phoenixSpectroSeq) && phoenixSpectroSeq > 0;
|
||||
if (!freqBuf && analyzer) {
|
||||
freqBuf = new Float32Array(analyzer.frequencyBinCount || 2048);
|
||||
}
|
||||
|
||||
const plotX = PLOT.left;
|
||||
const topInset = Number.isFinite(Number(env?.topInset)) ? Number(env.topInset) : PLOT.top;
|
||||
const plotY = topInset;
|
||||
const canvasOffsetX = Number.isFinite(Number(env.embeddedOffsetX)) ? Number(env.embeddedOffsetX) : 0;
|
||||
const canvasOffsetY = Number.isFinite(Number(env.embeddedOffsetY)) ? Number(env.embeddedOffsetY) : 0;
|
||||
const slotList = env.slots ? env.slots(SPECTROGRAM_ID) : null;
|
||||
const activeMeter = (slotList && slotList[0]) || 'ppm-din';
|
||||
const showMeter = activeMeter !== 'none';
|
||||
const plotW = Math.max(16, Math.floor(rect.w - PLOT.left - PLOT.right - (showMeter ? (METER_WIDTH + METER_GAP) : 0)));
|
||||
const plotH = Math.max(MIN_ROW_COUNT, Math.floor(rect.h - plotY - PLOT.bottom));
|
||||
const dpr = Math.max(1, window.devicePixelRatio || 1);
|
||||
const renderScale = Math.max(0.5, Math.min(1, SPECTRO_RENDER_SCALE));
|
||||
const plotWpx = Math.max(1, Math.floor(plotW * dpr * renderScale));
|
||||
const plotHpx = Math.max(1, Math.floor(plotH * dpr * renderScale));
|
||||
const range = getDbRange(CONFIG);
|
||||
const gamma = Math.max(0.3, Math.min(1.2, Number(CONFIG.SPECTRO_GAMMA ?? 0.9)));
|
||||
state._dbgEnabled = !!CONFIG.SPECTRO_DEBUG;
|
||||
|
||||
layoutSpectroCanvas(state, canvasOffsetX + plotX, canvasOffsetY + plotY, plotW, plotH, plotWpx, plotHpx);
|
||||
drawSpectrogramBackground(g, plotX, plotY, plotW, plotH);
|
||||
|
||||
if (!analyzer || !freqBuf || !freqBuf.length) {
|
||||
drawSpectrogramGrid(g, state, plotX, plotY, plotW, plotH);
|
||||
drawSpectrogramLegendHud(range, gamma);
|
||||
if (showMeter) {
|
||||
await drawMeterPanel(g, plotX, plotY, plotW, plotH, CONFIG, meters, activeMeter);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const width = plotW;
|
||||
const height = Math.max(MIN_ROW_COUNT, plotH);
|
||||
|
||||
const dimensionsChanged = state.width !== width || state.height !== height;
|
||||
state.width = width;
|
||||
state.height = height;
|
||||
|
||||
const fs = analyzer?.context?.sampleRate || audio.sampleRate || Math.max(48000, (audio.nyq || 24000) * 2);
|
||||
const nyq = fs / 2;
|
||||
const freqBounds = getFreqBounds(CONFIG, nyq);
|
||||
const boundsChanged = !state.freqBounds ||
|
||||
state.freqBounds.min !== freqBounds.min ||
|
||||
state.freqBounds.max !== freqBounds.max;
|
||||
|
||||
if (boundsChanged) {
|
||||
state.freqBounds = { ...freqBounds };
|
||||
}
|
||||
|
||||
state.sampleRate = fs;
|
||||
|
||||
if (dimensionsChanged || boundsChanged || state.binCount !== freqBuf.length) {
|
||||
ensureFreqMap(state, height, freqBounds, freqBuf.length, fs);
|
||||
}
|
||||
|
||||
if (state.useWorker) {
|
||||
setupWorker(state, plotWpx, plotHpx, range, gamma, freqBounds);
|
||||
} else {
|
||||
ensureFallbackBuffers(state, width, height, range.bottom, g);
|
||||
}
|
||||
|
||||
const scrollRate = resolveScrollRate(CONFIG);
|
||||
let spectroDirty = true;
|
||||
if (hasPhoenixSpectro) {
|
||||
spectroDirty = phoenixSpectroSeq !== (state.lastPhoenixSpectroSeq || 0);
|
||||
}
|
||||
|
||||
let columnsToEmit = 0;
|
||||
if (hasPhoenixSpectro) {
|
||||
if (spectroDirty) {
|
||||
state.scrollAccumulator = (state.scrollAccumulator || 0) + scrollRate;
|
||||
while (state.scrollAccumulator >= 1) {
|
||||
columnsToEmit += 1;
|
||||
state.scrollAccumulator -= 1;
|
||||
}
|
||||
if (columnsToEmit < 1) {
|
||||
columnsToEmit = 1;
|
||||
state.scrollAccumulator = 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const nowTs = performance.now();
|
||||
const dtMs = Math.max(1, nowTs - (state._lastScrollTs || nowTs));
|
||||
state._lastScrollTs = nowTs;
|
||||
const targetFrameMs = 1000 / 60;
|
||||
const frameUnits = dtMs / targetFrameMs;
|
||||
state.scrollAccumulator = (state.scrollAccumulator || 0) + scrollRate * frameUnits;
|
||||
while (state.scrollAccumulator >= 1) {
|
||||
columnsToEmit += 1;
|
||||
state.scrollAccumulator -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (spectroDirty) {
|
||||
analyzer.smoothingTimeConstant = Math.min(SMOOTHING_MAX, Math.max(0, analyzer.smoothingTimeConstant ?? 0));
|
||||
analyzer.getFloatFrequencyData(freqBuf);
|
||||
if (hasPhoenixSpectro) {
|
||||
state.lastPhoenixSpectroSeq = phoenixSpectroSeq;
|
||||
}
|
||||
}
|
||||
|
||||
if (columnsToEmit > 0 && spectroDirty) {
|
||||
const column = buildColumnData(state, freqBuf, range.bottom);
|
||||
const columns = [];
|
||||
for (let i = 0; i < columnsToEmit; i++) {
|
||||
columns.push(i === 0 ? column : new Float32Array(column));
|
||||
}
|
||||
|
||||
if (state.useWorker && state.workerReady) {
|
||||
columns.forEach(col => sendColumnToWorker(state, col));
|
||||
} else {
|
||||
columns.forEach(col => writeColumnToHistory(state, col));
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.useWorker) {
|
||||
drawSpectrogramImage(g, state, plotX, plotY, range, gamma);
|
||||
}
|
||||
|
||||
drawSpectrogramGrid(g, state, plotX, plotY, plotW, plotH);
|
||||
drawSpectrogramLegendHud(range, gamma);
|
||||
if (showMeter) {
|
||||
await drawMeterPanel(g, plotX, plotY, plotW, plotH, CONFIG, meters, activeMeter);
|
||||
}
|
||||
}
|
||||
|
||||
function drawSpectrogramBackground(g, plotX, plotY, plotW, plotH) {
|
||||
g.save();
|
||||
g.clearRect(plotX, plotY, plotW, plotH);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function setupWorker(state, widthPx, heightPx, range, gamma, freqBounds) {
|
||||
const canvasEl = ensureSpectroCanvasElement(state);
|
||||
if (!canvasEl) {
|
||||
state.useWorker = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state.worker) {
|
||||
try {
|
||||
const workerUrl = new URL('../workers/spectrogram.worker.js', import.meta.url);
|
||||
const worker = new Worker(workerUrl, { type: 'module' });
|
||||
worker.onmessage = (event) => handleWorkerMessage(state, event);
|
||||
worker.onerror = () => {
|
||||
state.useWorker = false;
|
||||
teardownWorker(state);
|
||||
};
|
||||
const offscreen = canvasEl.transferControlToOffscreen();
|
||||
state.spectroCanvasEl = canvasEl;
|
||||
state.worker = worker;
|
||||
state.workerReady = false;
|
||||
state.offscreenWidth = widthPx;
|
||||
state.offscreenHeight = heightPx;
|
||||
state.spectroCanvasTransferred = true;
|
||||
state.worker.postMessage({
|
||||
type: 'init',
|
||||
canvas: offscreen,
|
||||
width: widthPx,
|
||||
height: heightPx,
|
||||
topDb: range.top,
|
||||
bottomDb: range.bottom,
|
||||
gamma,
|
||||
fMin: freqBounds?.min,
|
||||
fMax: freqBounds?.max,
|
||||
}, [offscreen]);
|
||||
state.lastTopDb = range.top;
|
||||
state.lastBottomDb = range.bottom;
|
||||
state.lastGamma = gamma;
|
||||
} catch (e) {
|
||||
state.useWorker = false;
|
||||
teardownWorker(state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const needsResize = state.offscreenWidth !== widthPx || state.offscreenHeight !== heightPx;
|
||||
if (needsResize) {
|
||||
state.offscreenWidth = widthPx;
|
||||
state.offscreenHeight = heightPx;
|
||||
state.worker?.postMessage({
|
||||
type: 'resize',
|
||||
width: widthPx,
|
||||
height: heightPx,
|
||||
fMin: freqBounds?.min,
|
||||
fMax: freqBounds?.max,
|
||||
});
|
||||
}
|
||||
|
||||
const needsConfigUpdate = state.lastTopDb !== range.top ||
|
||||
state.lastBottomDb !== range.bottom ||
|
||||
state.lastGamma !== gamma;
|
||||
|
||||
if (needsConfigUpdate) {
|
||||
state.lastTopDb = range.top;
|
||||
state.lastBottomDb = range.bottom;
|
||||
state.lastGamma = gamma;
|
||||
state.worker?.postMessage({
|
||||
type: 'config',
|
||||
topDb: range.top,
|
||||
bottomDb: range.bottom,
|
||||
gamma
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function teardownWorker(state) {
|
||||
if (state.worker) {
|
||||
try {
|
||||
state.worker.postMessage({ type: 'dispose' });
|
||||
setTimeout(() => {
|
||||
try { state.worker.terminate(); } catch (_) {}
|
||||
}, 10);
|
||||
} catch (_) {}
|
||||
}
|
||||
state.worker = null;
|
||||
state.workerReady = false;
|
||||
state.spectroCanvasEl = null;
|
||||
state.spectroCanvasTransferred = false;
|
||||
}
|
||||
|
||||
function handleWorkerMessage(state, event) {
|
||||
const data = event.data || {};
|
||||
if (data.type === 'ready') {
|
||||
state.workerReady = true;
|
||||
} else if (data.type === 'dbg' && state._dbgEnabled) {
|
||||
console.debug('[spectro worker]', data);
|
||||
}
|
||||
}
|
||||
|
||||
function sendColumnToWorker(state, column) {
|
||||
if (!state.worker || !column) return;
|
||||
|
||||
// Prüfe ob Worker bereit ist und nicht überlastet
|
||||
if (!state.workerReady) return;
|
||||
|
||||
try {
|
||||
state.worker.postMessage({ type: 'column', data: column }, [column.buffer]);
|
||||
} catch (e) {
|
||||
state.useWorker = false;
|
||||
}
|
||||
advanceWriteIndex(state);
|
||||
|
||||
// Debug: alle ~1s senden wir ein Status-Log
|
||||
if (state._dbgEnabled && performance.now() >= state._dbgNextLog) {
|
||||
state._dbgNextLog = performance.now() + 1000;
|
||||
console.debug('[spectro main] sent column', { writeIndex: state.writeIndex });
|
||||
}
|
||||
}
|
||||
|
||||
function ensureFallbackBuffers(state, width, height, fillDb, g) {
|
||||
const needsInit = !state.history ||
|
||||
state.width !== width ||
|
||||
state.height !== height ||
|
||||
!state.imgData ||
|
||||
!state.pixelData;
|
||||
|
||||
if (!needsInit) return;
|
||||
|
||||
state.width = width;
|
||||
state.height = height;
|
||||
|
||||
state.history = Array.from({ length: width }, () => {
|
||||
const arr = new Float32Array(height);
|
||||
arr.fill(fillDb);
|
||||
return arr;
|
||||
});
|
||||
|
||||
state.writeIndex = 0;
|
||||
state.scrollAccumulator = 0;
|
||||
state._lastScrollTs = performance.now();
|
||||
state.imgData = g.createImageData(width, height);
|
||||
state.pixelData = state.imgData.data;
|
||||
}
|
||||
|
||||
function ensureFreqMap(state, height, freqBounds, binCount, fs) {
|
||||
const key = [
|
||||
height,
|
||||
freqBounds.min.toFixed(3),
|
||||
freqBounds.max.toFixed(3),
|
||||
binCount,
|
||||
fs
|
||||
].join('|');
|
||||
if (state.freqMapKey === key && state.freqMap && state.freqMap.length === height) {
|
||||
return;
|
||||
}
|
||||
state.freqMap = buildFreqMap(height, freqBounds, fs, binCount);
|
||||
state.freqMapKey = key;
|
||||
state.binCount = binCount;
|
||||
}
|
||||
|
||||
function buildColumnData(state, freqBuf, fallbackDb) {
|
||||
const height = state.height;
|
||||
if (!height) return null;
|
||||
|
||||
const column = new Float32Array(height);
|
||||
const freqMap = state.freqMap || [];
|
||||
const bins = freqBuf.length;
|
||||
|
||||
for (let y = 0; y < height; y++) {
|
||||
const map = freqMap[y];
|
||||
if (!map) {
|
||||
column[y] = fallbackDb;
|
||||
continue;
|
||||
}
|
||||
|
||||
let binLo = map.binLo;
|
||||
let binHi = map.binHi;
|
||||
|
||||
if (!Number.isFinite(binLo)) binLo = 0;
|
||||
if (!Number.isFinite(binHi)) binHi = binLo;
|
||||
|
||||
binLo = Math.max(0, Math.min(bins - 1, binLo));
|
||||
binHi = Math.max(binLo, Math.min(bins - 1, binHi));
|
||||
|
||||
let linearSum = 0;
|
||||
let count = 0;
|
||||
let maxDb = -Infinity;
|
||||
|
||||
for (let bin = binLo; bin <= binHi; bin++) {
|
||||
const dB = freqBuf[bin];
|
||||
if (!Number.isFinite(dB)) continue;
|
||||
|
||||
linearSum += Math.exp(dB * DB_TO_LINEAR_FACTOR);
|
||||
count++;
|
||||
|
||||
if (dB > maxDb) maxDb = dB;
|
||||
}
|
||||
|
||||
if (count > 0) {
|
||||
const avgLinear = linearSum / count;
|
||||
column[y] = Math.log10(Math.max(avgLinear, 1e-12)) * 10;
|
||||
} else if (Number.isFinite(maxDb)) {
|
||||
column[y] = maxDb;
|
||||
} else {
|
||||
column[y] = fallbackDb;
|
||||
}
|
||||
}
|
||||
|
||||
return column;
|
||||
}
|
||||
|
||||
function writeColumnToHistory(state, column) {
|
||||
if (!state.history || !column) return;
|
||||
const target = state.history[state.writeIndex];
|
||||
if (target) target.set(column);
|
||||
advanceWriteIndex(state);
|
||||
}
|
||||
|
||||
function drawSpectrogramImage(g, state, plotX, plotY, range, gamma) {
|
||||
const img = state.imgData;
|
||||
const pixels = state.pixelData;
|
||||
if (!img || !pixels || !state.history) return;
|
||||
|
||||
const width = state.width;
|
||||
const height = state.height;
|
||||
const totalRange = Math.max(1e-3, range.top - range.bottom);
|
||||
const baseIndex = state.writeIndex;
|
||||
|
||||
const colorStops = SPECTRO_COLOR_STOPS;
|
||||
|
||||
for (let x = 0; x < width; x++) {
|
||||
const historyIdx = (baseIndex + x) % width;
|
||||
const column = state.history[historyIdx];
|
||||
if (!column) continue;
|
||||
|
||||
for (let y = 0; y < height; y++) {
|
||||
const dB = column[y];
|
||||
const clamped = dB < range.bottom ? range.bottom : dB > range.top ? range.top : dB;
|
||||
let norm = (clamped - range.bottom) / totalRange;
|
||||
norm = Math.pow(norm < 0 ? 0 : norm > 1 ? 1 : norm, gamma);
|
||||
|
||||
const [r, gVal, bVal] = colorFromNorm(norm, colorStops);
|
||||
const idx = ((height - 1 - y) * width + x) * 4;
|
||||
pixels[idx + 0] = r;
|
||||
pixels[idx + 1] = gVal;
|
||||
pixels[idx + 2] = bVal;
|
||||
pixels[idx + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
g.putImageData(img, plotX, plotY);
|
||||
}
|
||||
|
||||
function drawSpectrogramGrid(g, state, plotX, plotY, plotW, plotH) {
|
||||
const bounds = state.freqBounds;
|
||||
if (!bounds) return;
|
||||
|
||||
const ticks = RTA_X_TICKS.filter((f) => f >= bounds.min && f <= bounds.max);
|
||||
drawCachedSpectroGrid(state, g, plotX, plotY, plotW, plotH, bounds, ticks);
|
||||
|
||||
g.save();
|
||||
g.fillStyle = '#bcd';
|
||||
g.textAlign = 'right';
|
||||
g.font = '12px monospace';
|
||||
|
||||
for (const freq of ticks) {
|
||||
const y = freqToPixel(freq, state, plotY, plotH, bounds);
|
||||
if (!Number.isFinite(y)) continue;
|
||||
|
||||
if (freq <= Math.max(20, bounds.min * 1.05)) {
|
||||
g.textBaseline = 'alphabetic';
|
||||
g.fillText(formatFreqLabel(freq), plotX - 6, y);
|
||||
} else {
|
||||
g.textBaseline = 'middle';
|
||||
g.fillText(formatFreqLabel(freq), plotX - 6, y);
|
||||
}
|
||||
}
|
||||
|
||||
g.textAlign = 'right';
|
||||
g.textBaseline = 'bottom';
|
||||
g.fillText('Zeit →', plotX + plotW - 6, plotY + plotH - 4);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function resolveScrollRate(CONFIG) {
|
||||
const mode = Number(CONFIG?.SPECTRO_SCROLL_MODE ?? 0);
|
||||
if (mode === 0.5) return 0.5;
|
||||
if (mode === 2) return 2;
|
||||
if (mode === 4) return 4;
|
||||
if (mode === 6) return 6;
|
||||
return 1;
|
||||
}
|
||||
|
||||
function advanceWriteIndex(state) {
|
||||
const width = Math.max(1, state.width || 1);
|
||||
state.writeIndex = (state.writeIndex + 1) % width;
|
||||
}
|
||||
|
||||
function drawSpectrogramLegendHud(range, gamma = 1) {
|
||||
if (!range) return;
|
||||
const wrap = document.getElementById('spectroLegendWrap');
|
||||
const canvas = document.getElementById('spectroLegend');
|
||||
if (!wrap || !canvas) return;
|
||||
if (wrap.style.display === 'none' || wrap.hidden) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
const dpr = Math.max(1, window.devicePixelRatio || 1);
|
||||
const cssWidth = Math.max(200, canvas.clientWidth || canvas.width || 200);
|
||||
const cssHeight = Math.max(32, canvas.clientHeight || canvas.height || 32);
|
||||
const width = Math.round(cssWidth * dpr);
|
||||
const height = Math.round(cssHeight * dpr);
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.save();
|
||||
ctx.scale(dpr, dpr);
|
||||
const w = width / dpr;
|
||||
const h = height / dpr;
|
||||
const span = Math.max(1e-3, range.top - range.bottom);
|
||||
const paddingTop = 0;
|
||||
const paddingSide = 20;
|
||||
const gradientWidth = Math.max(80, w - paddingSide * 2);
|
||||
const gradientHeight = Math.max(10, Math.min(18, h * 0.45));
|
||||
const gradientX = paddingSide;
|
||||
const gradientY = paddingTop;
|
||||
|
||||
const steps = Math.max(1, Math.round(gradientWidth));
|
||||
const stepWidth = gradientWidth / steps;
|
||||
for (let i = 0; i < steps; i++) {
|
||||
const frac = steps <= 1 ? 0 : i / (steps - 1);
|
||||
const gammaFrac = Math.pow(Math.min(1, Math.max(0, frac)), gamma);
|
||||
const [r, gCol, bCol] = colorFromNorm(gammaFrac, SPECTRO_COLOR_STOPS);
|
||||
ctx.fillStyle = `rgb(${r},${gCol},${bCol})`;
|
||||
ctx.fillRect(gradientX + i * stepWidth, gradientY, stepWidth + 1, gradientHeight);
|
||||
}
|
||||
|
||||
const ticks = [range.bottom, range.bottom + span / 2, range.top];
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.6)';
|
||||
ctx.fillStyle = '#e6f9ff';
|
||||
ctx.font = '10px ui-monospace, monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'top';
|
||||
const gap = 9;
|
||||
for (const value of ticks) {
|
||||
const frac = (value - range.bottom) / span;
|
||||
const x = gradientX + Math.min(1, Math.max(0, frac)) * gradientWidth;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, gradientY + gradientHeight);
|
||||
ctx.lineTo(x, gradientY + gradientHeight + 7);
|
||||
ctx.stroke();
|
||||
ctx.fillText(`${formatDbLabel(value)} dB`, x, gradientY + gradientHeight + gap + 1);
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawCachedSpectroGrid(state, ctx, plotX, plotY, plotW, plotH, bounds, ticks) {
|
||||
const key = [
|
||||
Math.round(plotW),
|
||||
Math.round(plotH),
|
||||
bounds.min.toFixed(2),
|
||||
bounds.max.toFixed(2),
|
||||
ticks.join(','),
|
||||
TIME_GRID_SPACING
|
||||
].join('|');
|
||||
const needsRebuild = !state.gridCache
|
||||
|| state.gridCache.key !== key
|
||||
|| state.gridCache.width !== Math.round(plotW)
|
||||
|| state.gridCache.height !== Math.round(plotH);
|
||||
|
||||
if (needsRebuild) {
|
||||
const canvas = document.createElement('canvas');
|
||||
const cw = Math.max(1, Math.round(plotW));
|
||||
const ch = Math.max(1, Math.round(plotH));
|
||||
canvas.width = cw;
|
||||
canvas.height = ch;
|
||||
const cg = canvas.getContext('2d');
|
||||
if (cg) {
|
||||
cg.save();
|
||||
cg.scale(cw / plotW, ch / plotH);
|
||||
cg.strokeStyle = FRAME_COLOR;
|
||||
cg.lineWidth = 2;
|
||||
cg.strokeRect(0.5, 0.5, plotW - 1, plotH - 1);
|
||||
|
||||
cg.strokeStyle = 'rgba(0,231,255,0.25)';
|
||||
cg.lineWidth = 1;
|
||||
for (const freq of ticks) {
|
||||
const y = freqToPixel(freq, { height: plotH, freqBounds: bounds }, 0, plotH, bounds);
|
||||
if (!Number.isFinite(y)) continue;
|
||||
cg.beginPath();
|
||||
cg.moveTo(0, y + 0.5);
|
||||
cg.lineTo(plotW, y + 0.5);
|
||||
cg.stroke();
|
||||
}
|
||||
|
||||
// Removed vertical time grid lines for cleaner spectrogram view
|
||||
cg.restore();
|
||||
}
|
||||
state.gridCache = { key, canvas, width: cw, height: ch };
|
||||
}
|
||||
|
||||
ctx.drawImage(state.gridCache.canvas, plotX, plotY, plotW, plotH);
|
||||
}
|
||||
|
||||
function freqToPixel(freq, state, plotY, plotH, bounds) {
|
||||
if (!bounds) return plotY + plotH;
|
||||
|
||||
const minF = Math.max(10, bounds.min);
|
||||
const maxF = Math.max(minF + 1, bounds.max);
|
||||
const logRatio = Math.log(maxF / minF);
|
||||
|
||||
if (!Number.isFinite(logRatio) || logRatio <= 0) return plotY + plotH;
|
||||
|
||||
const frac = Math.log(freq / minF) / logRatio;
|
||||
const height = state.height || plotH;
|
||||
const row = (frac < 0 ? 0 : frac > 1 ? 1 : frac) * Math.max(0, height - 1);
|
||||
|
||||
return plotY + (height - 1 - row);
|
||||
}
|
||||
|
||||
function formatFreqLabel(freq) {
|
||||
if (freq >= 1000) {
|
||||
const val = freq / 1000;
|
||||
return val >= 10 ? `${Math.round(val)}k` : `${val.toFixed(1)}k`;
|
||||
}
|
||||
return String(Math.round(freq));
|
||||
}
|
||||
|
||||
function formatDbLabel(value) {
|
||||
if (!Number.isFinite(value)) return '0';
|
||||
const rounded = Math.abs(value) < 10 ? value.toFixed(1) : Math.round(value);
|
||||
return String(rounded);
|
||||
}
|
||||
|
||||
async function drawMeterPanel(g, plotX, plotY, plotW, plotH, CONFIG, meters, activeMeter) {
|
||||
const meterRect = {
|
||||
x: plotX + plotW + METER_GAP,
|
||||
y: plotY,
|
||||
w: METER_WIDTH,
|
||||
h: plotH
|
||||
};
|
||||
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
g.restore();
|
||||
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
|
||||
const active = activeMeter || 'ppm-din';
|
||||
if (active === 'none') return;
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, meterRect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
|
||||
const innerRect = {
|
||||
x: meterRect.x,
|
||||
y: meterRect.y + METER_PAD_TOP + innerOffset,
|
||||
w: meterRect.w,
|
||||
h: innerHeight,
|
||||
};
|
||||
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(
|
||||
meterRect.x + g.lineWidth / 2,
|
||||
meterRect.y + g.lineWidth / 2,
|
||||
meterRect.w - g.lineWidth,
|
||||
meterRect.h - g.lineWidth
|
||||
);
|
||||
g.clip();
|
||||
await meters.draw(g, innerRect, active, CONFIG);
|
||||
g.restore();
|
||||
|
||||
g.strokeRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
}
|
||||
|
||||
function getDbRange(CONFIG) {
|
||||
const BASE_TOP_DB = -9;
|
||||
const top = Number.isFinite(CONFIG.DBFS_TOP) ? CONFIG.DBFS_TOP : BASE_TOP_DB;
|
||||
const bottom = Number.isFinite(CONFIG.DBFS_BOTTOM) ? CONFIG.DBFS_BOTTOM : -63;
|
||||
return { top, bottom };
|
||||
}
|
||||
|
||||
function getFreqBounds(CONFIG, nyq) {
|
||||
const min = CONFIG.RTA_FREQ_RANGE === 'lf' ? 5 : 20;
|
||||
const max = CONFIG.RTA_FREQ_RANGE === 'lf' ? 5000 : 20000;
|
||||
return {
|
||||
min: Math.max(10, min),
|
||||
max: Math.min(Math.max(min + 1, max), nyq)
|
||||
};
|
||||
}
|
||||
|
||||
function buildFreqMap(height, freqBounds, fs, binCount) {
|
||||
const nyq = fs / 2;
|
||||
const minF = Math.max(10, freqBounds.min);
|
||||
const maxF = Math.max(minF + 1, Math.min(freqBounds.max, nyq));
|
||||
const denom = Math.max(1, height - 1);
|
||||
const ratio = maxF / minF;
|
||||
const map = new Array(height);
|
||||
|
||||
for (let y = 0; y < height; y++) {
|
||||
const loPos = denom === 0 ? 0 : (y - 0.5) / denom;
|
||||
const hiPos = denom === 0 ? 0 : (y + 0.5) / denom;
|
||||
const fLo = minF * Math.pow(ratio, loPos < 0 ? 0 : loPos > 1 ? 1 : loPos);
|
||||
const fHi = minF * Math.pow(ratio, hiPos < 0 ? 0 : hiPos > 1 ? 1 : hiPos);
|
||||
const binLo = clampBin(Math.floor(freqToBin(fLo, nyq, binCount)), binCount);
|
||||
const binHi = clampBin(Math.ceil(freqToBin(fHi, nyq, binCount)), binCount);
|
||||
map[y] = {
|
||||
binLo: Math.min(binLo, binHi),
|
||||
binHi: Math.max(binLo, binHi)
|
||||
};
|
||||
}
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
function freqToBin(freq, nyq, binCount) {
|
||||
if (!Number.isFinite(freq) || freq <= 0) return 0;
|
||||
const maxIdx = Math.max(1, binCount - 1);
|
||||
return (Math.min(freq, nyq) / nyq) * maxIdx;
|
||||
}
|
||||
|
||||
function clampBin(idx, binCount) {
|
||||
if (!Number.isFinite(idx)) return 0;
|
||||
const maxIdx = Math.max(0, binCount - 1);
|
||||
return idx < 0 ? 0 : idx > maxIdx ? maxIdx : idx;
|
||||
}
|
||||
|
||||
function colorFromNorm(value, stops) {
|
||||
const t = value < 0 ? 0 : value > 1 ? 1 : value;
|
||||
|
||||
for (let i = 1; i < stops.length; i++) {
|
||||
const left = stops[i - 1];
|
||||
const right = stops[i];
|
||||
|
||||
if (t <= right.t) {
|
||||
const span = right.t - left.t || 1;
|
||||
const rel = (t - left.t) / span;
|
||||
return [
|
||||
Math.round(left.color[0] + rel * (right.color[0] - left.color[0])),
|
||||
Math.round(left.color[1] + rel * (right.color[1] - left.color[1])),
|
||||
Math.round(left.color[2] + rel * (right.color[2] - left.color[2])),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const last = stops[stops.length - 1].color;
|
||||
return [last[0], last[1], last[2]];
|
||||
}
|
||||
|
||||
function layoutSpectroCanvas(state, plotX, plotY, plotW, plotH, widthPx, heightPx) {
|
||||
const canvas = ensureSpectroCanvasElement(state);
|
||||
if (!canvas) return;
|
||||
|
||||
canvas.style.left = `${plotX}px`;
|
||||
canvas.style.top = `${plotY}px`;
|
||||
canvas.style.width = `${plotW}px`;
|
||||
canvas.style.height = `${plotH}px`;
|
||||
|
||||
if (!state.spectroCanvasTransferred) {
|
||||
canvas.width = widthPx;
|
||||
canvas.height = heightPx;
|
||||
}
|
||||
}
|
||||
|
||||
function ensureSpectroCanvasElement(state) {
|
||||
if (state.spectroCanvasEl) return state.spectroCanvasEl;
|
||||
|
||||
let canvas = document.getElementById('spectroCanvas');
|
||||
if (!canvas) {
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.id = 'spectroCanvas';
|
||||
canvas.className = 'spectrogram-layer';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.style.willChange = 'transform';
|
||||
|
||||
const overlay = document.getElementById('cv');
|
||||
if (overlay && overlay.parentNode) {
|
||||
overlay.parentNode.insertBefore(canvas, overlay);
|
||||
} else {
|
||||
document.body.appendChild(canvas);
|
||||
}
|
||||
}
|
||||
|
||||
state.spectroCanvasEl = canvas;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function removeSpectroCanvasElement(state) {
|
||||
const canvas = state.spectroCanvasEl || document.getElementById('spectroCanvas');
|
||||
if (canvas && canvas.parentNode) {
|
||||
canvas.parentNode.removeChild(canvas);
|
||||
}
|
||||
state.spectroCanvasEl = null;
|
||||
state.spectroCanvasTransferred = false;
|
||||
}
|
||||
@@ -0,0 +1,471 @@
|
||||
// views/split_view.js — Split-View: zwei nebeneinander gerenderte Views (links/rechts)
|
||||
|
||||
import * as viewGoni from './goniometer_rtw.js';
|
||||
import * as viewPhaseWheel from './phase_wheel.js';
|
||||
import * as viewPanel from './panel.js';
|
||||
import * as viewRealtime from './realtime.js';
|
||||
import * as viewClassicNeedles from './classic_needles.js';
|
||||
import * as viewPeakHistory from './peak_history.js';
|
||||
import * as viewClock from './clock.js';
|
||||
import * as viewWaveform from './waveform.js';
|
||||
import * as viewSpectrogram from './spectrogram.js';
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, PANEL_BG } from '../core/theme.js';
|
||||
|
||||
export const id = 'split-view';
|
||||
|
||||
const CONTENT_TOP = DEFAULT_TOP_INSET;
|
||||
const CONTENT_BOTTOM = 0;
|
||||
|
||||
const CHILD_VIEWS = {
|
||||
'realtime': viewRealtime,
|
||||
'classic-needles': viewClassicNeedles,
|
||||
'peak-history': viewPeakHistory,
|
||||
'goniometer-rtw': viewGoni,
|
||||
'phase-wheel': viewPhaseWheel,
|
||||
'panel': viewPanel,
|
||||
'clock': viewClock,
|
||||
'waveform': viewWaveform,
|
||||
'spectrogram': viewSpectrogram,
|
||||
};
|
||||
const ALLOWED_CHILD_VIEW_IDS = new Set(['none', ...Object.keys(CHILD_VIEWS)]);
|
||||
const ALLOWED_SPLIT_PLOT_IDS = new Set(['none', 'phase-wheel', 'realtime', 'goniometer-rtw', 'peak-history', 'classic-needles', 'panel', 'clock', 'waveform', 'spectrogram']);
|
||||
const ALLOWED_METER_IDS = new Set(['none', 'vu', 'ppm-ebu', 'ppm-din', 'tp', 'hifi-peak', 'rms', 'lufs', 'stopwatch']);
|
||||
const ALLOWED_METER_POSITIONS = new Set(['left', 'center', 'right']);
|
||||
|
||||
const OUTER_GAP = 10;
|
||||
const SIDE_INNER_GAP = 8;
|
||||
const METER_GAP = 12;
|
||||
const METER_W_DEFAULT = 140;
|
||||
const METER_W_MIN = 90;
|
||||
const MIN_PLOT_W = 240;
|
||||
const METER_PAD_TOP = 15;
|
||||
const METER_PAD_BOTTOM = 5;
|
||||
const METER_SLOT_SHRINK = 24;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
|
||||
function sanitizeChildId(val, fallback) {
|
||||
return ALLOWED_CHILD_VIEW_IDS.has(val) ? val : fallback;
|
||||
}
|
||||
|
||||
function sanitizePlotId(val, fallback) {
|
||||
return ALLOWED_SPLIT_PLOT_IDS.has(val) ? val : fallback;
|
||||
}
|
||||
|
||||
function sanitizeMeterId(val, fallback) {
|
||||
const id = String(val || '');
|
||||
return ALLOWED_METER_IDS.has(id) ? id : fallback;
|
||||
}
|
||||
|
||||
function sanitizeMeterPos(val, fallback) {
|
||||
const id = String(val || '');
|
||||
return ALLOWED_METER_POSITIONS.has(id) ? id : fallback;
|
||||
}
|
||||
|
||||
function clampMeterCount(val) {
|
||||
const n = Number(val);
|
||||
if (!Number.isFinite(n)) return 0;
|
||||
return Math.max(0, Math.min(3, n | 0));
|
||||
}
|
||||
|
||||
async function withClippedSubRect(g, rect, fn) {
|
||||
g.save();
|
||||
g.translate(rect.x, rect.y);
|
||||
g.beginPath();
|
||||
g.rect(0, 0, rect.w, rect.h);
|
||||
g.clip();
|
||||
try { return await fn(); } finally { g.restore(); }
|
||||
}
|
||||
|
||||
function drawSubframe(g, rect) {
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.strokeRect(rect.x + 0.5, rect.y + 0.5, Math.max(0, rect.w - 1), Math.max(0, rect.h - 1));
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function createStaticLayerCanvas(width, height) {
|
||||
const w = Math.max(1, width | 0);
|
||||
const h = Math.max(1, height | 0);
|
||||
if (typeof OffscreenCanvas !== 'undefined') return new OffscreenCanvas(w, h);
|
||||
const c = document.createElement('canvas');
|
||||
c.width = w;
|
||||
c.height = h;
|
||||
return c;
|
||||
}
|
||||
|
||||
function drawCachedStaticLayer(state, g, layerId, key, rect, build) {
|
||||
if (!state || !rect || rect.w <= 0 || rect.h <= 0) return;
|
||||
if (!state.staticLayers) state.staticLayers = new Map();
|
||||
const fullKey = `${layerId}:${key}:${Math.max(0, rect.w | 0)}x${Math.max(0, rect.h | 0)}`;
|
||||
let layer = state.staticLayers.get(fullKey);
|
||||
if (!layer) {
|
||||
const canvas = createStaticLayerCanvas(rect.w, rect.h);
|
||||
const ctx = canvas.getContext('2d');
|
||||
build(ctx, rect);
|
||||
layer = { canvas };
|
||||
state.staticLayers.set(fullKey, layer);
|
||||
}
|
||||
g.drawImage(layer.canvas, rect.x, rect.y);
|
||||
}
|
||||
|
||||
function drawEmptyPlot(state, g, rect, label) {
|
||||
drawCachedStaticLayer(state, g, 'empty-plot', String(label || '(leer)'), rect, (lg) => {
|
||||
lg.fillStyle = PANEL_BG;
|
||||
lg.fillRect(0, 0, rect.w, rect.h);
|
||||
lg.fillStyle = '#9aa';
|
||||
lg.textAlign = 'left';
|
||||
lg.font = 'bold 14px ui-monospace, monospace';
|
||||
lg.fillText(label || '(leer)', 12, 32);
|
||||
lg.textAlign = 'start';
|
||||
});
|
||||
}
|
||||
|
||||
function readSplitMeters(CONFIG) {
|
||||
const count = clampMeterCount(CONFIG?.SPLIT_VIEW_METER_COUNT);
|
||||
const slots = [
|
||||
{
|
||||
id: sanitizeMeterId(CONFIG?.SPLIT_VIEW_METER_1, 'vu'),
|
||||
pos: sanitizeMeterPos(CONFIG?.SPLIT_VIEW_METER_1_POS, 'right'),
|
||||
},
|
||||
{
|
||||
id: sanitizeMeterId(CONFIG?.SPLIT_VIEW_METER_2, 'ppm-din'),
|
||||
pos: sanitizeMeterPos(CONFIG?.SPLIT_VIEW_METER_2_POS, 'right'),
|
||||
},
|
||||
{
|
||||
id: sanitizeMeterId(CONFIG?.SPLIT_VIEW_METER_3, 'lufs'),
|
||||
pos: sanitizeMeterPos(CONFIG?.SPLIT_VIEW_METER_3_POS, 'right'),
|
||||
},
|
||||
].slice(0, count);
|
||||
return slots;
|
||||
}
|
||||
|
||||
function groupMetersByPosition(slots) {
|
||||
const out = { left: [], center: [], right: [] };
|
||||
for (const s of slots || []) {
|
||||
if (!s) continue;
|
||||
if (s.pos === 'left') out.left.push(s.id);
|
||||
else if (s.pos === 'center') out.center.push(s.id);
|
||||
else out.right.push(s.id);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function computeSplitLayout(rect, slots) {
|
||||
const contentH = Math.max(0, rect.h - CONTENT_TOP - CONTENT_BOTTOM);
|
||||
const hasContent = contentH >= 140;
|
||||
const BLOCK_GAP = SIDE_INNER_GAP;
|
||||
|
||||
let effectiveSlots = hasContent ? (Array.isArray(slots) ? slots.slice(0, 3) : []) : [];
|
||||
while (true) {
|
||||
const grouped = groupMetersByPosition(effectiveSlots);
|
||||
const leftCount = grouped.left.length;
|
||||
const centerCount = grouped.center.length;
|
||||
const rightCount = grouped.right.length;
|
||||
const totalSlots = leftCount + centerCount + rightCount;
|
||||
|
||||
const hasLeftMeters = hasContent && leftCount > 0;
|
||||
const hasCenterMeters = hasContent && centerCount > 0;
|
||||
const hasRightMeters = hasContent && rightCount > 0;
|
||||
|
||||
const interBlockGaps =
|
||||
(hasLeftMeters ? BLOCK_GAP : 0) +
|
||||
(hasRightMeters ? BLOCK_GAP : 0) +
|
||||
(hasCenterMeters ? (2 * BLOCK_GAP) : OUTER_GAP);
|
||||
|
||||
const internalGaps =
|
||||
Math.max(0, leftCount - 1) * METER_GAP +
|
||||
Math.max(0, centerCount - 1) * METER_GAP +
|
||||
Math.max(0, rightCount - 1) * METER_GAP;
|
||||
|
||||
const minRequired = 2 * MIN_PLOT_W + interBlockGaps + internalGaps;
|
||||
const remainingForMeters = rect.w - minRequired;
|
||||
|
||||
let slotW = 0;
|
||||
if (totalSlots > 0) {
|
||||
slotW = Math.floor(remainingForMeters / totalSlots);
|
||||
slotW = Math.min(METER_W_DEFAULT, slotW);
|
||||
}
|
||||
|
||||
if (totalSlots > 0 && slotW < METER_W_MIN && effectiveSlots.length) {
|
||||
effectiveSlots = effectiveSlots.slice(0, -1);
|
||||
continue;
|
||||
}
|
||||
if (totalSlots > 0) slotW = Math.max(METER_W_MIN, Math.min(METER_W_DEFAULT, slotW));
|
||||
|
||||
const leftW = hasLeftMeters ? (leftCount * slotW + Math.max(0, leftCount - 1) * METER_GAP) : 0;
|
||||
const centerW = hasCenterMeters ? (centerCount * slotW + Math.max(0, centerCount - 1) * METER_GAP) : 0;
|
||||
const rightW = hasRightMeters ? (rightCount * slotW + Math.max(0, rightCount - 1) * METER_GAP) : 0;
|
||||
|
||||
const metersTotalW = leftW + centerW + rightW;
|
||||
const plotAvail = Math.max(0, rect.w - interBlockGaps - metersTotalW);
|
||||
const leftPlotW = Math.floor(plotAvail / 2);
|
||||
const rightPlotW = plotAvail - leftPlotW;
|
||||
|
||||
const plotFits = leftPlotW >= MIN_PLOT_W && rightPlotW >= MIN_PLOT_W;
|
||||
if (!plotFits && effectiveSlots.length) {
|
||||
effectiveSlots = effectiveSlots.slice(0, -1);
|
||||
continue;
|
||||
}
|
||||
|
||||
let x = 0;
|
||||
const leftMetersRect = hasLeftMeters ? { x, y: CONTENT_TOP, w: leftW, h: contentH } : null;
|
||||
if (leftMetersRect) x += leftW + BLOCK_GAP;
|
||||
|
||||
const leftPlotRect = { x, y: 0, w: leftPlotW, h: rect.h };
|
||||
x += leftPlotW;
|
||||
|
||||
let centerMetersRect = null;
|
||||
if (hasCenterMeters) {
|
||||
x += BLOCK_GAP;
|
||||
centerMetersRect = { x, y: CONTENT_TOP, w: centerW, h: contentH };
|
||||
x += centerW + BLOCK_GAP;
|
||||
} else {
|
||||
x += OUTER_GAP;
|
||||
}
|
||||
|
||||
const rightPlotRect = { x, y: 0, w: rightPlotW, h: rect.h };
|
||||
x += rightPlotW;
|
||||
|
||||
let rightMetersRect = null;
|
||||
if (hasRightMeters) {
|
||||
x += BLOCK_GAP;
|
||||
rightMetersRect = { x, y: CONTENT_TOP, w: rightW, h: contentH };
|
||||
}
|
||||
|
||||
return {
|
||||
plots: { left: leftPlotRect, right: rightPlotRect },
|
||||
meters: { left: leftMetersRect, center: centerMetersRect, right: rightMetersRect },
|
||||
meterIds: grouped,
|
||||
slotW,
|
||||
effectiveSlots,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async function drawMetersPanel(env, state, rect, meterIds, slotW) {
|
||||
const { ctx: g, meters, config: CONFIG } = env;
|
||||
if (!rect || rect.w <= 0 || rect.h <= 0) return;
|
||||
const ids = Array.isArray(meterIds) ? meterIds.slice(0, 3) : [];
|
||||
const count = ids.length;
|
||||
if (!count) return;
|
||||
|
||||
drawCachedStaticLayer(state, g, 'meter-panel-shell', 'bg-frame', rect, (lg) => {
|
||||
lg.fillStyle = PANEL_BG;
|
||||
lg.fillRect(0, 0, rect.w, rect.h);
|
||||
drawSubframe(lg, { x: 0, y: 0, w: rect.w, h: rect.h });
|
||||
});
|
||||
|
||||
const gap = METER_GAP;
|
||||
const n = Math.max(1, Math.min(3, count));
|
||||
const usedW = n * slotW + (n - 1) * gap;
|
||||
const startX = rect.x + Math.max(0, Math.floor((rect.w - usedW) / 2));
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, rect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
const slotY = rect.y + METER_PAD_TOP + innerOffset;
|
||||
const slotH = innerHeight;
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const id = sanitizeMeterId(ids[i], 'none');
|
||||
const r = { x: startX + i * (slotW + gap), y: slotY, w: slotW, h: slotH };
|
||||
if (id === 'none') {
|
||||
drawCachedStaticLayer(state, g, 'meter-slot-empty', `${slotW}x${slotH}`, r, (lg) => {
|
||||
lg.strokeStyle = 'rgba(0,231,255,0.25)';
|
||||
lg.setLineDash([6, 5]);
|
||||
lg.strokeRect(0.5, 0.5, Math.max(0, r.w - 1), Math.max(0, r.h - 1));
|
||||
lg.setLineDash([]);
|
||||
lg.fillStyle = '#9aa';
|
||||
lg.textAlign = 'center';
|
||||
lg.font = '12px ui-monospace, monospace';
|
||||
lg.fillText('(leer)', r.w / 2, 22);
|
||||
lg.textAlign = 'start';
|
||||
});
|
||||
} else {
|
||||
try {
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(rect.x + 1, rect.y + 1, Math.max(0, rect.w - 2), Math.max(0, rect.h - 2));
|
||||
g.clip();
|
||||
await meters.draw(g, r, id, CONFIG);
|
||||
g.restore();
|
||||
} catch (e) {
|
||||
g.restore();
|
||||
console.warn('Split meter draw error:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function destroyChild(child) {
|
||||
if (!child || child.id === 'none') return;
|
||||
const mod = CHILD_VIEWS[child.id];
|
||||
if (mod && typeof mod.destroy === 'function') {
|
||||
try { mod.destroy(child.state); } catch (e) { console.warn('Split child destroy error:', e); }
|
||||
}
|
||||
}
|
||||
|
||||
function initChild(env, childId) {
|
||||
const id = sanitizeChildId(childId, 'none');
|
||||
if (id === 'none') return { id: 'none', state: {} };
|
||||
const mod = CHILD_VIEWS[id];
|
||||
const state = (mod && typeof mod.init === 'function') ? (mod.init(env) || {}) : {};
|
||||
return { id, state };
|
||||
}
|
||||
|
||||
function resizeChild(env, rect, child) {
|
||||
if (!child || child.id === 'none') return;
|
||||
const mod = CHILD_VIEWS[child.id];
|
||||
if (!mod || typeof mod.resize !== 'function') return;
|
||||
try { mod.resize({ rect }, child.state); } catch (e) { console.warn('Split child resize error:', e); }
|
||||
}
|
||||
|
||||
async function renderChild(env, rect, child) {
|
||||
const { ctx: g } = env;
|
||||
if (!child || child.id === 'none') return;
|
||||
const mod = CHILD_VIEWS[child.id];
|
||||
if (!mod || typeof mod.render !== 'function') return;
|
||||
await withClippedSubRect(g, rect, async () => {
|
||||
const plotOnlySlots = (viewId) => {
|
||||
if (viewId === 'peak-history' || viewId === 'classic-needles' || viewId === 'panel') {
|
||||
const configured = env?.slots?.(viewId);
|
||||
if (Array.isArray(configured) && configured.length) return configured;
|
||||
}
|
||||
if (viewId === 'peak-history') return ['ppm-din'];
|
||||
if (viewId === 'classic-needles') return ['vu'];
|
||||
if (viewId === 'panel') return ['vu', 'ppm-ebu', 'ppm-din', 'tp', 'rms'];
|
||||
return ['none'];
|
||||
};
|
||||
const subEnv = Object.assign({}, env, {
|
||||
rect: { x: 0, y: 0, w: rect.w, h: rect.h },
|
||||
embedded: true,
|
||||
containerView: 'split-view',
|
||||
slots: plotOnlySlots,
|
||||
embeddedOffsetX: rect.x,
|
||||
embeddedOffsetY: rect.y,
|
||||
});
|
||||
await mod.render(subEnv, child.state);
|
||||
});
|
||||
}
|
||||
|
||||
export function init(env) {
|
||||
const leftId = sanitizePlotId(env?.config?.SPLIT_VIEW_LEFT, 'phase-wheel');
|
||||
const rightId = sanitizePlotId(env?.config?.SPLIT_VIEW_RIGHT, 'realtime');
|
||||
const state = {
|
||||
staticLayers: new Map(),
|
||||
left: initChild(env, leftId),
|
||||
right: initChild(env, rightId),
|
||||
popup: initChild(env, 'none'),
|
||||
lastLeftId: leftId,
|
||||
lastRightId: rightId,
|
||||
lastPopupId: 'none',
|
||||
lastRectSig: '',
|
||||
};
|
||||
return state;
|
||||
}
|
||||
|
||||
export function destroy(state) {
|
||||
if (state) state.staticLayers = null;
|
||||
destroyChild(state?.left);
|
||||
destroyChild(state?.right);
|
||||
destroyChild(state?.popup);
|
||||
}
|
||||
|
||||
export function resize({ rect }, state) {
|
||||
if (!state || !rect) return;
|
||||
const sig = `${rect.w}x${rect.h}`;
|
||||
if (state.lastRectSig === sig) return;
|
||||
state.lastRectSig = sig;
|
||||
const layout = computeLayout(rect);
|
||||
resizeChild(null, { x: 0, y: 0, w: layout.left.w, h: layout.left.h }, state.left);
|
||||
resizeChild(null, { x: 0, y: 0, w: layout.right.w, h: layout.right.h }, state.right);
|
||||
resizeChild(null, { x: 0, y: 0, w: rect.w, h: rect.h }, state.popup);
|
||||
}
|
||||
|
||||
function computeLayout(rect) {
|
||||
const gap = OUTER_GAP;
|
||||
const w = Math.max(0, rect.w);
|
||||
const h = Math.max(0, rect.h);
|
||||
const half = Math.floor((w - gap) / 2);
|
||||
const left = { x: 0, y: 0, w: Math.max(0, half), h };
|
||||
const right = { x: Math.max(0, half + gap), y: 0, w: Math.max(0, w - (half + gap)), h };
|
||||
return { left, right, gap };
|
||||
}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG } = env;
|
||||
const popupCfg = env?.splitPopup;
|
||||
const popupWanted = popupCfg && popupCfg.open ? sanitizeChildId(popupCfg.viewId, 'none') : 'none';
|
||||
|
||||
// Popup-Modus: rendere die View in Originalgröße (vollflächig),
|
||||
// ohne Split-Hintergrund/Layout. So sieht es exakt wie die Einzel-View aus.
|
||||
if (popupWanted !== 'none' && state) {
|
||||
if (state.lastPopupId !== popupWanted) {
|
||||
destroyChild(state.popup);
|
||||
state.popup = initChild(env, popupWanted);
|
||||
state.lastPopupId = popupWanted;
|
||||
resizeChild(null, { x: 0, y: 0, w: rect.w, h: rect.h }, state.popup);
|
||||
}
|
||||
state._splitHit = {
|
||||
contentY: 0,
|
||||
plots: null,
|
||||
meters: [],
|
||||
popupBox: { x: 0, y: 0, w: rect.w, h: rect.h },
|
||||
};
|
||||
const mod = CHILD_VIEWS[state.popup.id];
|
||||
if (mod && typeof mod.render === 'function') {
|
||||
const subEnv = Object.assign({}, env, {
|
||||
rect: { x: 0, y: 0, w: rect.w, h: rect.h },
|
||||
embedded: false,
|
||||
});
|
||||
await mod.render(subEnv, state.popup.state);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (state && state.lastPopupId !== 'none') {
|
||||
destroyChild(state.popup);
|
||||
state.popup = initChild(env, 'none');
|
||||
state.lastPopupId = 'none';
|
||||
}
|
||||
|
||||
const desiredLeftId = sanitizePlotId(env?.config?.SPLIT_VIEW_LEFT, 'phase-wheel');
|
||||
const desiredRightId = sanitizePlotId(env?.config?.SPLIT_VIEW_RIGHT, 'realtime');
|
||||
|
||||
if (state.lastLeftId !== desiredLeftId) {
|
||||
destroyChild(state.left);
|
||||
state.left = initChild(env, desiredLeftId);
|
||||
state.lastLeftId = desiredLeftId;
|
||||
}
|
||||
if (state.lastRightId !== desiredRightId) {
|
||||
destroyChild(state.right);
|
||||
state.right = initChild(env, desiredRightId);
|
||||
state.lastRightId = desiredRightId;
|
||||
}
|
||||
|
||||
const slots = readSplitMeters(CONFIG);
|
||||
const layout = computeSplitLayout(rect, slots);
|
||||
const leftPlotRect = layout?.plots?.left || { x: 0, y: 0, w: Math.floor(rect.w / 2), h: rect.h };
|
||||
const rightPlotRect = layout?.plots?.right || { x: Math.floor(rect.w / 2), y: 0, w: rect.w - Math.floor(rect.w / 2), h: rect.h };
|
||||
if (state) {
|
||||
state._splitHit = {
|
||||
contentY: 0,
|
||||
plots: {
|
||||
left: { ...leftPlotRect, viewId: desiredLeftId },
|
||||
right: { ...rightPlotRect, viewId: desiredRightId },
|
||||
},
|
||||
meters: [layout?.meters?.left, layout?.meters?.center, layout?.meters?.right].filter(Boolean).map((r) => ({ ...r })),
|
||||
popupBox: null,
|
||||
};
|
||||
}
|
||||
|
||||
if (state.left?.id === 'none') drawEmptyPlot(state, g, leftPlotRect, 'Links: (leer)');
|
||||
else await renderChild(env, leftPlotRect, state.left);
|
||||
|
||||
if (state.right?.id === 'none') drawEmptyPlot(state, g, rightPlotRect, 'Rechts: (leer)');
|
||||
else await renderChild(env, rightPlotRect, state.right);
|
||||
|
||||
if (layout?.meters?.left) await drawMetersPanel(env, state, layout.meters.left, layout.meterIds.left, layout.slotW);
|
||||
if (layout?.meters?.center) await drawMetersPanel(env, state, layout.meters.center, layout.meterIds.center, layout.slotW);
|
||||
if (layout?.meters?.right) await drawMetersPanel(env, state, layout.meters.right, layout.meterIds.right, layout.slotW);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
export function createStaticLayerCanvas(width, height) {
|
||||
const w = Math.max(1, width | 0);
|
||||
const h = Math.max(1, height | 0);
|
||||
if (typeof OffscreenCanvas !== 'undefined') return new OffscreenCanvas(w, h);
|
||||
const c = document.createElement('canvas');
|
||||
c.width = w;
|
||||
c.height = h;
|
||||
return c;
|
||||
}
|
||||
|
||||
export function drawCachedStaticLayer(state, g, layerId, key, rect, build) {
|
||||
if (!state || !rect || rect.w <= 0 || rect.h <= 0) return;
|
||||
if (!state.staticLayers) state.staticLayers = new Map();
|
||||
const fullKey = `${layerId}:${key}:${Math.max(0, rect.w | 0)}x${Math.max(0, rect.h | 0)}`;
|
||||
let layer = state.staticLayers.get(fullKey);
|
||||
if (!layer) {
|
||||
const canvas = createStaticLayerCanvas(rect.w, rect.h);
|
||||
const ctx = canvas.getContext('2d');
|
||||
build(ctx, rect);
|
||||
layer = { canvas };
|
||||
state.staticLayers.set(fullKey, layer);
|
||||
}
|
||||
g.drawImage(layer.canvas, rect.x, rect.y);
|
||||
}
|
||||
@@ -0,0 +1,487 @@
|
||||
// views/waveform.js — Live waveform display with optional worker renderer
|
||||
|
||||
import { DEFAULT_TOP_INSET, FRAME_COLOR, PANEL_BG } from '../core/theme.js';
|
||||
|
||||
const PLOT = { left: 0, top: DEFAULT_TOP_INSET, right: 0, bottom: 0 };
|
||||
const METER_WIDTH = 140;
|
||||
const METER_GAP = 8;
|
||||
const METER_PAD_TOP = 15;
|
||||
const METER_PAD_BOTTOM = 5;
|
||||
const METER_SLOT_SHRINK = 24;
|
||||
const METER_EXTRA_BOTTOM_PAD = 6;
|
||||
const MIN_HEIGHT = 80;
|
||||
const MODE_STACKED = 'stacked';
|
||||
const MODE_OVERLAY = 'overlay';
|
||||
const MODE_DIFF = 'diff';
|
||||
const WAVEFORM_RENDER_SCALE = 0.9;
|
||||
const SUPPORTS_WORKER = typeof window !== 'undefined'
|
||||
&& typeof Worker !== 'undefined'
|
||||
&& typeof HTMLCanvasElement !== 'undefined'
|
||||
&& !!HTMLCanvasElement.prototype.transferControlToOffscreen;
|
||||
|
||||
export const id = 'waveform';
|
||||
|
||||
export function init() {
|
||||
return {
|
||||
useWorker: SUPPORTS_WORKER,
|
||||
worker: null,
|
||||
workerReady: false,
|
||||
canvasEl: null,
|
||||
canvasTransferred: false,
|
||||
offscreenWidth: 0,
|
||||
offscreenHeight: 0,
|
||||
lastMode: MODE_STACKED,
|
||||
lastWorkerColorsKey: '',
|
||||
lastChannels: 1,
|
||||
diffScratch: new Float32Array(0),
|
||||
gridCache: null,
|
||||
};
|
||||
}
|
||||
|
||||
export function destroy(state) {
|
||||
teardownWorker(state);
|
||||
removeWaveCanvasElement(state);
|
||||
state.gridCache = null;
|
||||
}
|
||||
|
||||
export function resize() {}
|
||||
|
||||
export async function render(env, state) {
|
||||
const { ctx: g, rect, config: CONFIG, audio, meters } = env;
|
||||
const plotX = PLOT.left;
|
||||
const topInset = Number.isFinite(Number(env?.topInset)) ? Number(env.topInset) : PLOT.top;
|
||||
const plotY = topInset;
|
||||
const canvasOffsetX = Number.isFinite(Number(env.embeddedOffsetX)) ? Number(env.embeddedOffsetX) : 0;
|
||||
const canvasOffsetY = Number.isFinite(Number(env.embeddedOffsetY)) ? Number(env.embeddedOffsetY) : 0;
|
||||
const slotList = env.slots ? env.slots(id) : null;
|
||||
const activeMeter = (slotList && slotList[0]) || 'ppm-din';
|
||||
const showMeter = activeMeter !== 'none';
|
||||
const plotW = Math.max(16, Math.floor(rect.w - PLOT.left - PLOT.right - (showMeter ? (METER_WIDTH + METER_GAP) : 0)));
|
||||
const plotH = Math.max(MIN_HEIGHT, Math.floor(rect.h - plotY - PLOT.bottom));
|
||||
const dpr = Math.max(1, window.devicePixelRatio || 1);
|
||||
const renderScale = Math.max(0.5, Math.min(1, WAVEFORM_RENDER_SCALE));
|
||||
const pixelWidth = Math.max(32, Math.floor(plotW * dpr * renderScale));
|
||||
const pixelHeight = Math.max(32, Math.floor(plotH * dpr * renderScale));
|
||||
layoutWaveCanvas(state, canvasOffsetX + plotX, canvasOffsetY + plotY, plotW, plotH, pixelWidth, pixelHeight);
|
||||
if (!state.useWorker) {
|
||||
detachWaveCanvas(state);
|
||||
}
|
||||
|
||||
const mode = normalizeMode(CONFIG.WAVEFORM_MODE);
|
||||
const windowSec = clampWindow(CONFIG.WAVEFORM_WINDOW_SEC);
|
||||
const envelope = audio?.getWaveformEnvelope
|
||||
? audio.getWaveformEnvelope(pixelWidth, windowSec)
|
||||
: null;
|
||||
let payload = envelope
|
||||
? {
|
||||
minMaxL: envelope.minMaxL,
|
||||
minMaxR: envelope.minMaxR,
|
||||
pixelWidth: envelope.pixelWidth || pixelWidth,
|
||||
cssWidth: plotW,
|
||||
cssHeight: plotH,
|
||||
channels: envelope.channels || 1,
|
||||
mode,
|
||||
config: {
|
||||
leftColor: CONFIG.WAVEFORM_COLOR_LEFT,
|
||||
rightColor: CONFIG.WAVEFORM_COLOR_RIGHT,
|
||||
diffColor: CONFIG.WAVEFORM_COLOR_DIFF,
|
||||
},
|
||||
}
|
||||
: null;
|
||||
if (payload) {
|
||||
state.lastChannels = payload.channels;
|
||||
}
|
||||
|
||||
drawWaveformBackground(g, plotX, plotY, plotW, plotH);
|
||||
|
||||
if (state.useWorker) {
|
||||
setupWaveformWorker(state, pixelWidth, pixelHeight, mode, payload?.config || null);
|
||||
if (state.workerReady && payload) {
|
||||
sendWaveformToWorker(state, payload);
|
||||
payload = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.useWorker && payload) {
|
||||
drawWaveformFallback(g, state, plotX, plotY, plotW, plotH, payload, mode);
|
||||
}
|
||||
|
||||
const gridChannels = mode === MODE_DIFF ? 1 : state.lastChannels;
|
||||
drawWaveformGrid(g, state, plotX, plotY, plotW, plotH, mode, gridChannels);
|
||||
if (showMeter) {
|
||||
await drawMeterPanel(g, plotX, plotY, plotW, plotH, CONFIG, meters, activeMeter);
|
||||
}
|
||||
}
|
||||
|
||||
function drawWaveformBackground(g, plotX, plotY, plotW, plotH) {
|
||||
g.save();
|
||||
g.clearRect(plotX, plotY, plotW, plotH);
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawWaveformGrid(g, state, plotX, plotY, plotW, plotH, mode, channelCount) {
|
||||
drawCachedWaveformGrid(g, state, plotX, plotY, plotW, plotH, mode, channelCount);
|
||||
}
|
||||
|
||||
function drawCachedWaveformGrid(g, state, plotX, plotY, plotW, plotH, mode, channelCount) {
|
||||
if (!state) {
|
||||
drawWaveformGridDirect(g, plotX, plotY, plotW, plotH, mode, channelCount);
|
||||
return;
|
||||
}
|
||||
const key = [
|
||||
Math.round(plotW),
|
||||
Math.round(plotH),
|
||||
mode,
|
||||
channelCount,
|
||||
].join('|');
|
||||
const needsRebuild = !state.gridCache
|
||||
|| state.gridCache.key !== key
|
||||
|| state.gridCache.width !== Math.round(plotW)
|
||||
|| state.gridCache.height !== Math.round(plotH);
|
||||
|
||||
if (needsRebuild) {
|
||||
const canvas = document.createElement('canvas');
|
||||
const cw = Math.max(1, Math.round(plotW));
|
||||
const ch = Math.max(1, Math.round(plotH));
|
||||
canvas.width = cw;
|
||||
canvas.height = ch;
|
||||
const cg = canvas.getContext('2d');
|
||||
if (cg) {
|
||||
drawWaveformGridDirect(cg, 0, 0, plotW, plotH, mode, channelCount);
|
||||
}
|
||||
state.gridCache = { key, canvas, width: cw, height: ch };
|
||||
}
|
||||
|
||||
g.drawImage(state.gridCache.canvas, plotX, plotY, plotW, plotH);
|
||||
}
|
||||
|
||||
function drawWaveformGridDirect(g, plotX, plotY, plotW, plotH, mode, channelCount) {
|
||||
const rects = getChannelRects(plotY, plotH, channelCount, mode);
|
||||
g.save();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
g.strokeRect(plotX, plotY, plotW, plotH);
|
||||
g.lineWidth = 1;
|
||||
g.setLineDash([4, 6]);
|
||||
for (const rect of rects) {
|
||||
const lines = [-1, -0.5, 0.5, 1];
|
||||
g.strokeStyle = 'rgba(0,231,255,0.25)';
|
||||
for (const amp of lines) {
|
||||
const y = ampToY(amp, rect.y, rect.h) + 0.5;
|
||||
g.beginPath();
|
||||
g.moveTo(plotX, y);
|
||||
g.lineTo(plotX + plotW, y);
|
||||
g.stroke();
|
||||
}
|
||||
g.strokeStyle = 'rgba(0,231,255,0.45)';
|
||||
const zeroY = ampToY(0, rect.y, rect.h) + 0.5;
|
||||
g.setLineDash([]);
|
||||
g.beginPath();
|
||||
g.moveTo(plotX, zeroY);
|
||||
g.lineTo(plotX + plotW, zeroY);
|
||||
g.stroke();
|
||||
g.setLineDash([4, 6]);
|
||||
}
|
||||
g.setLineDash([]);
|
||||
g.fillStyle = '#bcd';
|
||||
g.textAlign = 'left';
|
||||
g.textBaseline = 'top';
|
||||
g.font = 'bold 14px ui-monospace, monospace';
|
||||
g.fillText('now', plotX + plotW - 34, plotY + plotH - 18);
|
||||
const showChannelLabels = mode === MODE_STACKED && channelCount > 1;
|
||||
if (showChannelLabels) {
|
||||
g.font = 'bold 38px ui-monospace, monospace';
|
||||
g.textBaseline = 'top';
|
||||
g.textAlign = 'left';
|
||||
g.fillText('L', plotX + 6, rects[0]?.y + 4 || plotY + 4);
|
||||
g.textAlign = 'left';
|
||||
g.textBaseline = 'bottom';
|
||||
g.fillText('R', plotX + 6, plotY + plotH - 6);
|
||||
} else if (mode === MODE_DIFF) {
|
||||
g.font = 'bold 32px ui-monospace, monospace';
|
||||
g.textBaseline = 'top';
|
||||
g.textAlign = 'left';
|
||||
g.fillText('Δ', plotX + 6, rects[0]?.y + 4 || plotY + 4);
|
||||
}
|
||||
g.restore();
|
||||
}
|
||||
|
||||
function drawWaveformFallback(g, state, plotX, plotY, plotW, plotH, payload, mode) {
|
||||
const cfg = payload.config || {};
|
||||
const displayChannels = mode === MODE_DIFF ? 1 : payload.channels;
|
||||
const rects = getChannelRects(plotY, plotH, displayChannels, mode);
|
||||
const scaleX = payload.pixelWidth ? (plotW / payload.pixelWidth) : 1;
|
||||
const drawChannel = (data, rect, color, alpha = 1) => {
|
||||
if (!data) return;
|
||||
g.save();
|
||||
g.strokeStyle = color;
|
||||
g.globalAlpha = alpha;
|
||||
for (let x = 0; x < payload.pixelWidth; x++) {
|
||||
const idx = x * 2;
|
||||
const min = clampAmp(data[idx]);
|
||||
const max = clampAmp(data[idx + 1]);
|
||||
const xPos = plotX + x * scaleX + 0.5;
|
||||
g.beginPath();
|
||||
g.moveTo(xPos, ampToY(max, rect.y, rect.h));
|
||||
g.lineTo(xPos, ampToY(min, rect.y, rect.h));
|
||||
g.stroke();
|
||||
}
|
||||
g.restore();
|
||||
};
|
||||
|
||||
if (mode === MODE_DIFF) {
|
||||
const rect = rects[0];
|
||||
const diffData = buildDiffMinMax(state, payload.minMaxL, payload.minMaxR, payload.pixelWidth);
|
||||
if (diffData) {
|
||||
const col = cfg.diffColor || FRAME_COLOR;
|
||||
drawChannel(diffData, rect, col, 1);
|
||||
}
|
||||
} else if (mode === MODE_STACKED && payload.channels > 1) {
|
||||
const colL = cfg.leftColor || FRAME_COLOR;
|
||||
const colR = cfg.rightColor || '#ff6b81';
|
||||
drawChannel(payload.minMaxL, rects[0], colL, 1);
|
||||
drawChannel(payload.minMaxR || payload.minMaxL, rects[1], colR, 1);
|
||||
} else {
|
||||
const rect = rects[0];
|
||||
const colL = cfg.leftColor || FRAME_COLOR;
|
||||
const colR = cfg.rightColor || '#ff6b81';
|
||||
drawChannel(payload.minMaxL, rect, colL, 1);
|
||||
if (payload.channels > 1 && payload.minMaxR) {
|
||||
drawChannel(payload.minMaxR, rect, colR, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildDiffMinMax(state, minMaxL, minMaxR) {
|
||||
if (!minMaxL || !minMaxR) return null;
|
||||
const pairs = Math.min(minMaxL.length, minMaxR.length) / 2;
|
||||
if (!pairs || pairs <= 0) return null;
|
||||
if (!state.diffScratch || state.diffScratch.length !== pairs * 2) {
|
||||
state.diffScratch = new Float32Array(pairs * 2);
|
||||
}
|
||||
const out = state.diffScratch;
|
||||
for (let i = 0; i < pairs; i++) {
|
||||
const idx = i * 2;
|
||||
const lMin = clampAmp(minMaxL[idx]);
|
||||
const lMax = clampAmp(minMaxL[idx + 1]);
|
||||
const rMin = clampAmp(minMaxR[idx]);
|
||||
const rMax = clampAmp(minMaxR[idx + 1]);
|
||||
|
||||
// Korrigierte Differenz-Berechnung
|
||||
const diffMin = lMin - rMin;
|
||||
const diffMax = lMax - rMax;
|
||||
|
||||
out[idx] = clampAmp(Math.min(diffMin, diffMax));
|
||||
out[idx + 1] = clampAmp(Math.max(diffMin, diffMax));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function setupWaveformWorker(state, width, height, mode, colors) {
|
||||
const workerColors = normalizeWaveformColors(colors);
|
||||
const workerColorsKey = getWaveformColorsKey(workerColors);
|
||||
if (!state.worker) {
|
||||
const canvas = ensureWaveCanvasElement(state);
|
||||
if (!canvas) {
|
||||
state.useWorker = false;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (!state.canvasTransferred) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
const offscreen = canvas.transferControlToOffscreen();
|
||||
const workerUrl = new URL('../workers/waveform.worker.js', import.meta.url);
|
||||
const worker = new Worker(workerUrl, { type: 'module' });
|
||||
worker.onmessage = (event) => {
|
||||
if (event.data?.type === 'ready') state.workerReady = true;
|
||||
};
|
||||
worker.onerror = (err) => console.warn('Waveform worker error:', err?.message || err);
|
||||
worker.postMessage({
|
||||
type: 'init',
|
||||
canvas: offscreen,
|
||||
width,
|
||||
height,
|
||||
mode,
|
||||
colors: workerColors,
|
||||
}, [offscreen]);
|
||||
state.worker = worker;
|
||||
state.workerReady = false;
|
||||
state.offscreenWidth = width;
|
||||
state.offscreenHeight = height;
|
||||
state.canvasTransferred = true;
|
||||
state.lastMode = mode;
|
||||
state.lastWorkerColorsKey = workerColorsKey;
|
||||
} catch (err) {
|
||||
console.warn('Waveform worker init failed, using fallback:', err);
|
||||
state.useWorker = false;
|
||||
teardownWorker(state);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.offscreenWidth !== width || state.offscreenHeight !== height) {
|
||||
state.offscreenWidth = width;
|
||||
state.offscreenHeight = height;
|
||||
state.worker.postMessage({ type: 'resize', width, height });
|
||||
}
|
||||
if (state.lastMode !== mode || state.lastWorkerColorsKey !== workerColorsKey) {
|
||||
state.lastMode = mode;
|
||||
state.lastWorkerColorsKey = workerColorsKey;
|
||||
state.worker.postMessage({ type: 'config', mode, colors: workerColors });
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeWaveformColors(colors) {
|
||||
return {
|
||||
leftColor: colors?.leftColor || FRAME_COLOR,
|
||||
rightColor: colors?.rightColor || '#ff6b81',
|
||||
diffColor: colors?.diffColor || FRAME_COLOR,
|
||||
};
|
||||
}
|
||||
|
||||
function getWaveformColorsKey(colors) {
|
||||
return [colors.leftColor, colors.rightColor, colors.diffColor].join('|');
|
||||
}
|
||||
|
||||
function sendWaveformToWorker(state, payload) {
|
||||
if (!state.worker) return;
|
||||
state.worker.postMessage({
|
||||
type: 'data',
|
||||
channelCount: payload.channels,
|
||||
mode: payload.mode,
|
||||
minMaxL: payload.minMaxL,
|
||||
minMaxR: payload.minMaxR,
|
||||
});
|
||||
}
|
||||
|
||||
function teardownWorker(state) {
|
||||
if (state.worker) {
|
||||
try { state.worker.postMessage({ type: 'dispose' }); } catch (_) {}
|
||||
try { state.worker.terminate(); } catch (_) {}
|
||||
}
|
||||
state.worker = null;
|
||||
state.workerReady = false;
|
||||
state.canvasTransferred = false;
|
||||
state.lastWorkerColorsKey = '';
|
||||
removeWaveCanvasElement(state);
|
||||
}
|
||||
|
||||
function layoutWaveCanvas(state, plotX, plotY, plotW, plotH, widthPx, heightPx) {
|
||||
const canvas = ensureWaveCanvasElement(state);
|
||||
if (!canvas) return;
|
||||
canvas.style.left = `${plotX}px`;
|
||||
canvas.style.top = `${plotY}px`;
|
||||
canvas.style.width = `${plotW}px`;
|
||||
canvas.style.height = `${plotH}px`;
|
||||
canvas.style.display = plotW > 0 && plotH > 0 ? 'block' : 'none';
|
||||
if (!state.canvasTransferred) {
|
||||
canvas.width = widthPx;
|
||||
canvas.height = heightPx;
|
||||
}
|
||||
}
|
||||
|
||||
function detachWaveCanvas(state) {
|
||||
const canvas = ensureWaveCanvasElement(state);
|
||||
if (canvas) {
|
||||
canvas.style.width = '0px';
|
||||
canvas.style.height = '0px';
|
||||
canvas.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function ensureWaveCanvasElement(state) {
|
||||
if (state.canvasEl) return state.canvasEl;
|
||||
let canvas = document.getElementById('waveformCanvas');
|
||||
if (!canvas) {
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.id = 'waveformCanvas';
|
||||
canvas.className = 'waveform-layer';
|
||||
const overlay = document.getElementById('cv');
|
||||
if (overlay && overlay.parentNode) {
|
||||
overlay.parentNode.insertBefore(canvas, overlay);
|
||||
} else {
|
||||
document.body.appendChild(canvas);
|
||||
}
|
||||
}
|
||||
state.canvasEl = canvas;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function removeWaveCanvasElement(state) {
|
||||
const canvas = state.canvasEl || document.getElementById('waveformCanvas');
|
||||
if (canvas && canvas.parentNode) {
|
||||
canvas.parentNode.removeChild(canvas);
|
||||
}
|
||||
state.canvasEl = null;
|
||||
state.canvasTransferred = false;
|
||||
}
|
||||
|
||||
function clampAmp(value) {
|
||||
if (!Number.isFinite(value)) return 0;
|
||||
return Math.max(-1, Math.min(1, value));
|
||||
}
|
||||
|
||||
function ampToY(value, y, h) {
|
||||
const clamped = clampAmp(value);
|
||||
return y + (1 - ((clamped + 1) * 0.5)) * h;
|
||||
}
|
||||
|
||||
function getChannelRects(plotY, plotH, channelCount, mode) {
|
||||
if (mode === MODE_DIFF) {
|
||||
return [{ y: plotY, h: plotH }];
|
||||
}
|
||||
if (mode === MODE_STACKED && channelCount > 1) {
|
||||
const gap = 8;
|
||||
const half = (plotH - gap) / 2;
|
||||
return [
|
||||
{ y: plotY, h: half },
|
||||
{ y: plotY + half + gap, h: half },
|
||||
];
|
||||
}
|
||||
return [{ y: plotY, h: plotH }];
|
||||
}
|
||||
|
||||
async function drawMeterPanel(g, plotX, plotY, plotW, plotH, CONFIG, meters, activeMeter) {
|
||||
const meterRect = { x: plotX + plotW + METER_GAP, y: plotY, w: METER_WIDTH, h: plotH };
|
||||
g.save();
|
||||
g.fillStyle = PANEL_BG;
|
||||
g.fillRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
g.restore();
|
||||
g.strokeStyle = FRAME_COLOR;
|
||||
g.lineWidth = 2;
|
||||
const active = activeMeter || 'ppm-din';
|
||||
if (active === 'none') return;
|
||||
const shrink = Math.max(0, METER_SLOT_SHRINK);
|
||||
const innerHeight = Math.max(40, meterRect.h - METER_PAD_TOP - METER_PAD_BOTTOM - shrink - METER_EXTRA_BOTTOM_PAD);
|
||||
const innerOffset = shrink / 2;
|
||||
const innerRect = {
|
||||
x: meterRect.x,
|
||||
y: meterRect.y + METER_PAD_TOP + innerOffset,
|
||||
w: meterRect.w,
|
||||
h: innerHeight,
|
||||
};
|
||||
g.save();
|
||||
g.beginPath();
|
||||
g.rect(meterRect.x + g.lineWidth / 2, meterRect.y + g.lineWidth / 2, meterRect.w - g.lineWidth, meterRect.h - g.lineWidth);
|
||||
g.clip();
|
||||
await meters.draw(g, innerRect, active, CONFIG);
|
||||
g.restore();
|
||||
g.strokeRect(meterRect.x, meterRect.y, meterRect.w, meterRect.h);
|
||||
}
|
||||
|
||||
function clampWindow(value) {
|
||||
if (!Number.isFinite(value)) return 1;
|
||||
const min = 0.1;
|
||||
const max = 15;
|
||||
if (value < min) return min;
|
||||
if (value > max) return max;
|
||||
return value;
|
||||
}
|
||||
|
||||
function normalizeMode(mode) {
|
||||
if (mode === MODE_OVERLAY) return MODE_OVERLAY;
|
||||
if (mode === MODE_DIFF) return MODE_DIFF;
|
||||
return MODE_STACKED;
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
// workers/spectrogram.worker.js
|
||||
// Handles Spectrogram rendering off the main thread using OffscreenCanvas.
|
||||
|
||||
const FRAME_INTERVAL_MS = 1000 / 24;
|
||||
const MAX_QUEUE_AGE_MS = 2000; // wenn länger nichts geflossen ist, trotzdem zeichnen
|
||||
const MAX_PENDING_COLUMNS = 64;
|
||||
const LUT_SIZE = 256;
|
||||
const COLOR_STOPS = [
|
||||
{ t: 0.0, color: [0, 0, 0] },
|
||||
{ t: 0.25, color: [0, 0, 80] },
|
||||
{ t: 0.5, color: [0, 135, 140] },
|
||||
{ t: 0.75, color: [220, 220, 0] },
|
||||
{ t: 1.0, color: [255, 255, 255] },
|
||||
];
|
||||
|
||||
// Pre-calculated constants for performance
|
||||
const LUT_SIZE_MINUS_ONE = LUT_SIZE - 1;
|
||||
|
||||
const state = {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
width: 0,
|
||||
height: 0,
|
||||
topDb: -9,
|
||||
bottomDb: -90,
|
||||
gamma: 0.9,
|
||||
fMin: 20,
|
||||
fMax: 20000,
|
||||
history: null,
|
||||
writeIndex: 0,
|
||||
imgData: null,
|
||||
pixels: null,
|
||||
lut: null,
|
||||
lastDraw: 0,
|
||||
drawTimer: null,
|
||||
pendingQueue: [],
|
||||
lastColumnTs: 0,
|
||||
};
|
||||
|
||||
self.onmessage = (event) => {
|
||||
const data = event.data || {};
|
||||
switch (data.type) {
|
||||
case 'init':
|
||||
handleInit(data);
|
||||
break;
|
||||
case 'resize':
|
||||
handleResize(data);
|
||||
break;
|
||||
case 'config':
|
||||
handleConfig(data);
|
||||
break;
|
||||
case 'column':
|
||||
handleColumn(data);
|
||||
break;
|
||||
case 'dispose':
|
||||
dispose();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function handleInit({ canvas, width, height, topDb, bottomDb, gamma, fMin, fMax }) {
|
||||
if (!canvas) return;
|
||||
|
||||
state.canvas = canvas;
|
||||
state.ctx = canvas.getContext('2d', { alpha: false, desynchronized: true });
|
||||
|
||||
if (!state.ctx) {
|
||||
postMessage({ type: 'error', error: 'ctx' });
|
||||
return;
|
||||
}
|
||||
|
||||
state.ctx.imageSmoothingEnabled = false;
|
||||
state.topDb = Number.isFinite(topDb) ? topDb : state.topDb;
|
||||
state.bottomDb = Number.isFinite(bottomDb) ? bottomDb : state.bottomDb;
|
||||
state.fMin = Number.isFinite(fMin) ? fMin : state.fMin;
|
||||
state.fMax = Number.isFinite(fMax) ? fMax : state.fMax;
|
||||
state.gamma = clampGamma(gamma);
|
||||
|
||||
allocateBuffers(width, height);
|
||||
rebuildLut();
|
||||
|
||||
postMessage({ type: 'ready' });
|
||||
}
|
||||
|
||||
function handleResize({ width, height, fMin, fMax }) {
|
||||
if (!state.canvas || !state.ctx) return;
|
||||
if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
|
||||
|
||||
allocateBuffers(width, height);
|
||||
|
||||
if (Number.isFinite(fMin)) state.fMin = fMin;
|
||||
if (Number.isFinite(fMax)) state.fMax = fMax;
|
||||
}
|
||||
|
||||
function handleConfig({ topDb, bottomDb, gamma }) {
|
||||
if (Number.isFinite(topDb)) state.topDb = topDb;
|
||||
if (Number.isFinite(bottomDb)) state.bottomDb = bottomDb;
|
||||
if (Number.isFinite(gamma)) state.gamma = clampGamma(gamma);
|
||||
rebuildLut();
|
||||
}
|
||||
|
||||
function handleColumn({ data }) {
|
||||
if (!data || !(data instanceof Float32Array)) return;
|
||||
|
||||
if (!state.history || state.height !== data.length) {
|
||||
allocateBuffers(state.width, data.length);
|
||||
}
|
||||
|
||||
// Ringpuffer: halte nur die letzten wenige Columns, neueste gewinnt
|
||||
state.pendingQueue.push(data);
|
||||
while (state.pendingQueue.length > MAX_PENDING_COLUMNS) state.pendingQueue.shift();
|
||||
state.lastColumnTs = performance.now();
|
||||
maybeDraw();
|
||||
}
|
||||
|
||||
function allocateBuffers(width, height) {
|
||||
const clampedWidth = Math.max(1, Math.floor(width));
|
||||
const clampedHeight = Math.max(1, Math.floor(height));
|
||||
|
||||
// Vermeide unnötige Re-allokation
|
||||
if (state.history &&
|
||||
state.width === clampedWidth &&
|
||||
state.height === clampedHeight) {
|
||||
return; // Keine Größenänderung, behalte bestehende Buffers
|
||||
}
|
||||
|
||||
state.width = clampedWidth;
|
||||
state.height = clampedHeight;
|
||||
|
||||
if (state.canvas) {
|
||||
state.canvas.width = clampedWidth;
|
||||
state.canvas.height = clampedHeight;
|
||||
}
|
||||
|
||||
// Allokiere neuen Buffer nur wenn nötig
|
||||
const neededSize = clampedWidth * clampedHeight;
|
||||
if (!state.history || state.history.length !== neededSize) {
|
||||
state.history = new Float32Array(neededSize);
|
||||
}
|
||||
state.history.fill(state.bottomDb);
|
||||
|
||||
state.writeIndex = 0;
|
||||
|
||||
if (state.ctx) {
|
||||
state.imgData = state.ctx.createImageData(clampedWidth, clampedHeight);
|
||||
state.pixels = state.imgData.data;
|
||||
}
|
||||
}
|
||||
|
||||
function rebuildLut() {
|
||||
state.lut = buildLut(LUT_SIZE);
|
||||
}
|
||||
|
||||
function maybeDraw() {
|
||||
if (!state.ctx || !state.imgData || !state.history) return;
|
||||
|
||||
const now = performance.now();
|
||||
const delta = now - state.lastDraw;
|
||||
|
||||
const tooLongNoColumn = state.lastColumnTs && (now - state.lastColumnTs > MAX_QUEUE_AGE_MS);
|
||||
const readyToDraw = delta >= FRAME_INTERVAL_MS || tooLongNoColumn;
|
||||
|
||||
if (readyToDraw) {
|
||||
if (drawFrame()) {
|
||||
state.lastDraw = now;
|
||||
}
|
||||
} else if (!state.drawTimer) {
|
||||
state.drawTimer = setTimeout(() => {
|
||||
state.drawTimer = null;
|
||||
if (drawFrame()) {
|
||||
state.lastDraw = performance.now();
|
||||
}
|
||||
}, FRAME_INTERVAL_MS - delta);
|
||||
}
|
||||
}
|
||||
|
||||
function drawFrame() {
|
||||
if (!state.ctx || !state.imgData || !state.history || !state.lut) return false;
|
||||
if (!flushPendingColumn()) return false;
|
||||
|
||||
const { width, height, history, pixels, imgData } = state;
|
||||
const range = Math.max(1e-3, state.topDb - state.bottomDb);
|
||||
const lut = state.lut;
|
||||
const base = state.writeIndex;
|
||||
|
||||
const invertedHeight = height - 1;
|
||||
|
||||
for (let x = 0; x < width; x++) {
|
||||
const srcX = (base + x) % width;
|
||||
const srcXOffset = srcX;
|
||||
|
||||
for (let y = 0; y < height; y++) {
|
||||
const dB = history[y * width + srcXOffset];
|
||||
const clamped = dB < state.bottomDb ? state.bottomDb :
|
||||
dB > state.topDb ? state.topDb : dB;
|
||||
|
||||
let norm = (clamped - state.bottomDb) / range;
|
||||
norm = norm < 0 ? 0 : norm > 1 ? 1 : norm;
|
||||
norm = Math.pow(norm, state.gamma);
|
||||
|
||||
const lutIdx = Math.min(LUT_SIZE_MINUS_ONE, Math.round(norm * LUT_SIZE_MINUS_ONE));
|
||||
const destY = invertedHeight - y;
|
||||
const pixelIndex = (destY * width + x) * 4;
|
||||
const lutOffset = lutIdx * 3;
|
||||
|
||||
pixels[pixelIndex + 0] = lut[lutOffset + 0];
|
||||
pixels[pixelIndex + 1] = lut[lutOffset + 1];
|
||||
pixels[pixelIndex + 2] = lut[lutOffset + 2];
|
||||
pixels[pixelIndex + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
state.ctx.putImageData(imgData, 0, 0);
|
||||
return true;
|
||||
}
|
||||
|
||||
function flushPendingColumn() {
|
||||
if (!state.pendingQueue.length || !state.history) return false;
|
||||
|
||||
const width = state.width;
|
||||
const height = state.height;
|
||||
let writeIdx = state.writeIndex;
|
||||
const hist = state.history;
|
||||
|
||||
while (state.pendingQueue.length) {
|
||||
const column = state.pendingQueue.shift();
|
||||
if (!column) continue;
|
||||
const col = (column.length === height)
|
||||
? column
|
||||
: normalizeColumn(column, height, state.bottomDb);
|
||||
for (let y = 0; y < height; y++) {
|
||||
const value = col[y];
|
||||
hist[y * width + writeIdx] = Number.isFinite(value) ? value : state.bottomDb;
|
||||
}
|
||||
writeIdx = (writeIdx + 1) % width;
|
||||
}
|
||||
|
||||
state.writeIndex = writeIdx;
|
||||
return true;
|
||||
}
|
||||
|
||||
function normalizeColumn(column, targetHeight, fillDb) {
|
||||
const adjusted = new Float32Array(targetHeight);
|
||||
const copyLength = Math.min(column.length, targetHeight);
|
||||
adjusted.set(column.subarray(0, copyLength));
|
||||
adjusted.fill(fillDb, copyLength);
|
||||
return adjusted;
|
||||
}
|
||||
|
||||
function buildLut(size) {
|
||||
const lut = new Uint8ClampedArray(size * 3);
|
||||
const sizeMinusOne = size - 1;
|
||||
|
||||
for (let i = 0; i < size; i++) {
|
||||
const t = i / sizeMinusOne;
|
||||
const [r, g, b] = colorFromStops(t);
|
||||
const offset = i * 3;
|
||||
lut[offset + 0] = r;
|
||||
lut[offset + 1] = g;
|
||||
lut[offset + 2] = b;
|
||||
}
|
||||
|
||||
return lut;
|
||||
}
|
||||
|
||||
function colorFromStops(tValue) {
|
||||
const t = tValue < 0 ? 0 : tValue > 1 ? 1 : tValue;
|
||||
|
||||
for (let i = 1; i < COLOR_STOPS.length; i++) {
|
||||
const left = COLOR_STOPS[i - 1];
|
||||
const right = COLOR_STOPS[i];
|
||||
|
||||
if (t <= right.t) {
|
||||
const span = right.t - left.t || 1;
|
||||
const rel = (t - left.t) / span;
|
||||
return [
|
||||
Math.round(left.color[0] + rel * (right.color[0] - left.color[0])),
|
||||
Math.round(left.color[1] + rel * (right.color[1] - left.color[1])),
|
||||
Math.round(left.color[2] + rel * (right.color[2] - left.color[2])),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const last = COLOR_STOPS[COLOR_STOPS.length - 1].color;
|
||||
return [last[0], last[1], last[2]];
|
||||
}
|
||||
|
||||
function clampGamma(value) {
|
||||
if (!Number.isFinite(value)) return 0.9;
|
||||
if (value < 0.3) return 0.3;
|
||||
if (value > 1.2) return 1.2;
|
||||
return value;
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (state.drawTimer) {
|
||||
clearTimeout(state.drawTimer);
|
||||
state.drawTimer = null;
|
||||
}
|
||||
|
||||
if (state.history) {
|
||||
state.history = null;
|
||||
}
|
||||
if (state.imgData) {
|
||||
state.imgData = null;
|
||||
}
|
||||
if (state.pixels) {
|
||||
state.pixels = null;
|
||||
}
|
||||
if (state.lut) {
|
||||
state.lut = null;
|
||||
}
|
||||
state.pendingColumn = null;
|
||||
state.canvas = null;
|
||||
state.ctx = null;
|
||||
|
||||
if (typeof self.close === 'function') {
|
||||
try { self.close(); } catch (_) {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
// workers/waveform.worker.js — Renders min/max waveform data on OffscreenCanvas
|
||||
|
||||
const FRAME_INTERVAL_MS = 1000 / 48;
|
||||
const DEFAULT_COLORS = {
|
||||
leftColor: '#00e7ff',
|
||||
rightColor: '#ff6b81',
|
||||
diffColor: '#00e7ff',
|
||||
};
|
||||
const MODE_STACKED = 'stacked';
|
||||
const MODE_OVERLAY = 'overlay';
|
||||
const MODE_DIFF = 'diff';
|
||||
|
||||
const state = {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
width: 0,
|
||||
height: 0,
|
||||
mode: MODE_STACKED,
|
||||
colors: { ...DEFAULT_COLORS },
|
||||
pending: null,
|
||||
lastDraw: 0,
|
||||
timer: null,
|
||||
};
|
||||
|
||||
self.onmessage = (event) => {
|
||||
const data = event.data || {};
|
||||
switch (data.type) {
|
||||
case 'init':
|
||||
handleInit(data);
|
||||
break;
|
||||
case 'resize':
|
||||
handleResize(data);
|
||||
break;
|
||||
case 'config':
|
||||
handleConfig(data);
|
||||
break;
|
||||
case 'data':
|
||||
handleData(data);
|
||||
break;
|
||||
case 'dispose':
|
||||
dispose();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function handleInit({ canvas, width, height, mode, colors }) {
|
||||
if (!canvas) return;
|
||||
state.canvas = canvas;
|
||||
state.ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
|
||||
state.mode = normalizeMode(mode);
|
||||
state.colors = normalizeColors(colors);
|
||||
handleResize({ width, height });
|
||||
postMessage({ type: 'ready' });
|
||||
}
|
||||
|
||||
function handleResize({ width, height }) {
|
||||
if (!state.canvas || !Number.isFinite(width) || !Number.isFinite(height)) return;
|
||||
state.canvas.width = Math.max(1, Math.floor(width));
|
||||
state.canvas.height = Math.max(1, Math.floor(height));
|
||||
state.width = state.canvas.width;
|
||||
state.height = state.canvas.height;
|
||||
}
|
||||
|
||||
function handleConfig({ mode, colors }) {
|
||||
state.mode = normalizeMode(mode);
|
||||
state.colors = normalizeColors(colors);
|
||||
}
|
||||
|
||||
function handleData({ minMaxL, minMaxR, channelCount }) {
|
||||
state.pending = {
|
||||
minMaxL,
|
||||
minMaxR,
|
||||
channelCount: channelCount || (minMaxR ? 2 : 1),
|
||||
};
|
||||
scheduleDraw();
|
||||
}
|
||||
|
||||
function scheduleDraw() {
|
||||
if (!state.ctx || !state.pending) return;
|
||||
const now = performance.now();
|
||||
const delta = now - state.lastDraw;
|
||||
if (delta >= FRAME_INTERVAL_MS) {
|
||||
drawFrame();
|
||||
state.lastDraw = now;
|
||||
} else if (!state.timer) {
|
||||
state.timer = setTimeout(() => {
|
||||
state.timer = null;
|
||||
drawFrame();
|
||||
state.lastDraw = performance.now();
|
||||
}, FRAME_INTERVAL_MS - delta);
|
||||
}
|
||||
}
|
||||
|
||||
function drawFrame() {
|
||||
if (!state.ctx || !state.pending) return;
|
||||
const { minMaxL, minMaxR, channelCount } = state.pending;
|
||||
state.pending = null;
|
||||
state.ctx.clearRect(0, 0, state.width, state.height);
|
||||
const rects = getChannelRects(state.height, channelCount, state.mode);
|
||||
if (state.mode === MODE_DIFF) {
|
||||
const diffData = buildDiffData(minMaxL, minMaxR);
|
||||
if (diffData) {
|
||||
drawChannel(state.ctx, diffData, rects[0], state.colors.diffColor);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (state.mode === MODE_STACKED && channelCount > 1 && rects.length >= 2) {
|
||||
drawChannel(state.ctx, minMaxL, rects[0], state.colors.leftColor);
|
||||
drawChannel(state.ctx, minMaxR || minMaxL, rects[1], state.colors.rightColor);
|
||||
} else {
|
||||
drawChannel(state.ctx, minMaxL, rects[0], state.colors.leftColor);
|
||||
if (channelCount > 1 && minMaxR) {
|
||||
drawChannel(state.ctx, minMaxR, rects[0], state.colors.rightColor, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeColors(colors) {
|
||||
return {
|
||||
leftColor: colors?.leftColor || DEFAULT_COLORS.leftColor,
|
||||
rightColor: colors?.rightColor || DEFAULT_COLORS.rightColor,
|
||||
diffColor: colors?.diffColor || DEFAULT_COLORS.diffColor,
|
||||
};
|
||||
}
|
||||
|
||||
function drawChannel(ctx, data, rect, color, alpha = 1) {
|
||||
if (!data || !data.length) return;
|
||||
const width = data.length / 2;
|
||||
const scaleX = width ? state.width / width : 1;
|
||||
ctx.save();
|
||||
ctx.strokeStyle = color;
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
for (let x = 0; x < width; x++) {
|
||||
const idx = x * 2;
|
||||
const min = clampAmp(data[idx]);
|
||||
const max = clampAmp(data[idx + 1]);
|
||||
const xPos = x * scaleX + 0.5;
|
||||
const yMax = ampToY(max, rect.y, rect.h);
|
||||
const yMin = ampToY(min, rect.y, rect.h);
|
||||
ctx.moveTo(xPos, yMax);
|
||||
ctx.lineTo(xPos, yMin);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function getChannelRects(totalHeight, channelCount, mode) {
|
||||
if (mode === MODE_DIFF) {
|
||||
return [{ y: 0, h: totalHeight }];
|
||||
}
|
||||
if (mode === MODE_STACKED && channelCount > 1) {
|
||||
const gap = 6;
|
||||
const half = (totalHeight - gap) / 2;
|
||||
return [
|
||||
{ y: 0, h: half },
|
||||
{ y: half + gap, h: half },
|
||||
];
|
||||
}
|
||||
return [{ y: 0, h: totalHeight }];
|
||||
}
|
||||
|
||||
function ampToY(value, y, h) {
|
||||
const v = clampAmp(value);
|
||||
return y + (1 - ((v + 1) * 0.5)) * h;
|
||||
}
|
||||
|
||||
function clampAmp(value) {
|
||||
if (!Number.isFinite(value)) return 0;
|
||||
return Math.max(-1, Math.min(1, value));
|
||||
}
|
||||
|
||||
function normalizeMode(mode) {
|
||||
if (mode === MODE_OVERLAY) return MODE_OVERLAY;
|
||||
if (mode === MODE_DIFF) return MODE_DIFF;
|
||||
return MODE_STACKED;
|
||||
}
|
||||
|
||||
function buildDiffData(minMaxL, minMaxR) {
|
||||
if (!minMaxL || !minMaxR) return null;
|
||||
const pairs = Math.min(minMaxL.length, minMaxR.length) / 2;
|
||||
if (!pairs) return null;
|
||||
const out = new Float32Array(pairs * 2);
|
||||
for (let i = 0; i < pairs; i++) {
|
||||
const idx = i * 2;
|
||||
const lMin = clampAmp(minMaxL[idx]);
|
||||
const lMax = clampAmp(minMaxL[idx + 1]);
|
||||
const rMin = clampAmp(minMaxR[idx]);
|
||||
const rMax = clampAmp(minMaxR[idx + 1]);
|
||||
|
||||
// Korrigierte Differenz-Berechnung
|
||||
const diffMin = lMin - rMin;
|
||||
const diffMax = lMax - rMax;
|
||||
|
||||
out[idx] = clampAmp(Math.min(diffMin, diffMax));
|
||||
out[idx + 1] = clampAmp(Math.max(diffMin, diffMax));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (state.timer) {
|
||||
clearTimeout(state.timer);
|
||||
state.timer = null;
|
||||
}
|
||||
state.pending = null;
|
||||
state.canvas = null;
|
||||
state.ctx = null;
|
||||
}
|
||||
Reference in New Issue
Block a user