FOSFENO: motor de visuales audio-reactivas para Raspberry Pi
Primera version. Cinco motores (projectM, Butterchurn, Hydra, Shaders GLSL y mezclador VJ con camara y video), panel de control web, deteccion de BPM propia, pantalla de conexion con codigo QR, instalador robusto para Raspberry Pi 4 y 5 y documentacion completa en docs/. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hacklab
commit
30a09fdee6
31 changed files with 3478 additions and 0 deletions
602
web/stage/stage.js
Normal file
602
web/stage/stage.js
Normal file
|
|
@ -0,0 +1,602 @@
|
|||
/*
|
||||
* FOSFENO :: Escenario
|
||||
* Renderiza las visuales en el proyector. Motores:
|
||||
* - butterchurn : presets MilkDrop (WebGL)
|
||||
* - hydra : codigo Hydra en vivo (editor / libreria)
|
||||
* - shaders : shaders GLSL en vivo (editor)
|
||||
* - mixer : mezclador VJ (camara + video + efectos, via Hydra)
|
||||
* - projectm : nativo (esta pagina se queda en negro y se superpone)
|
||||
* Incluye deteccion de BPM en vivo y seleccion de tarjeta de audio.
|
||||
*/
|
||||
|
||||
const socket = io();
|
||||
const msgEl = document.getElementById("msg");
|
||||
const bcCanvas = document.getElementById("butterchurn");
|
||||
const hydraCanvas = document.getElementById("hydra");
|
||||
const shaderCanvas = document.getElementById("shaders");
|
||||
|
||||
let audioCtx, gainNode, analyser, micSource, micStream;
|
||||
let currentDevice = "";
|
||||
let state = null;
|
||||
let lastQrUrl = ""; // ultima URL para la que se genero el QR
|
||||
|
||||
// Estado del detector de ritmo, compartido por todos los motores
|
||||
const fosBeat = { bpm: 0, phase: 0, level: 0, isBeat: false };
|
||||
|
||||
// --- Butterchurn ---
|
||||
let bcViz = null, bcRAF = null, bcTimer = null;
|
||||
let bcPresets = {}, bcNames = [], bcIndex = 0, bcCurrent = "";
|
||||
let bcBeatCount = 0;
|
||||
|
||||
// --- Hydra / Mixer ---
|
||||
let hydra = null, hydraCode = "", mixerSig = "";
|
||||
let mixerVideo = "", mixerCam = null, mixerCamId = null;
|
||||
|
||||
// --- Shaders ---
|
||||
let shaderEngine = null, shaderCode = "";
|
||||
|
||||
/* Comunica un aviso al servidor para que aparezca en el panel de control.
|
||||
Asi el usuario siempre ve que ha pasado, no se queda el sistema mudo. */
|
||||
function report(level, message) {
|
||||
if (level === "error") console.error("[FOSFENO]", message);
|
||||
else console.warn("[FOSFENO]", message);
|
||||
try { socket.emit("stage_notify", { level: level, message: message }); }
|
||||
catch (e) { /* sin conexion */ }
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Detector de BPM (analisis de energia de graves en tiempo real)
|
||||
// ==========================================================================
|
||||
class BeatDetector {
|
||||
constructor(analyserNode) {
|
||||
this.analyser = analyserNode;
|
||||
this.freq = new Uint8Array(analyserNode.frequencyBinCount);
|
||||
this.history = [];
|
||||
this.HISTORY = 55;
|
||||
this.lastBeat = 0;
|
||||
this.intervals = [];
|
||||
this.bpm = 0;
|
||||
}
|
||||
|
||||
update(now) {
|
||||
this.analyser.getByteFrequencyData(this.freq);
|
||||
const n = this.freq.length;
|
||||
const hi = Math.max(2, Math.floor(n * 0.08));
|
||||
let e = 0;
|
||||
for (let i = 0; i < hi; i++) e += this.freq[i];
|
||||
e /= hi;
|
||||
|
||||
this.history.push(e);
|
||||
if (this.history.length > this.HISTORY) this.history.shift();
|
||||
const avg = this.history.reduce((s, v) => s + v, 0) / this.history.length;
|
||||
|
||||
let isBeat = false;
|
||||
const minGap = 60000 / 210; // tope de 210 BPM
|
||||
if (e > avg * 1.35 && e > 24 && now - this.lastBeat > minGap) {
|
||||
if (this.lastBeat > 0) {
|
||||
const dt = now - this.lastBeat;
|
||||
if (dt > 200 && dt < 2000) {
|
||||
this.intervals.push(dt);
|
||||
if (this.intervals.length > 40) this.intervals.shift();
|
||||
this._estimate();
|
||||
}
|
||||
}
|
||||
this.lastBeat = now;
|
||||
isBeat = true;
|
||||
}
|
||||
|
||||
fosBeat.level = e / 255;
|
||||
fosBeat.bpm = this.bpm;
|
||||
fosBeat.isBeat = isBeat;
|
||||
if (this.bpm > 0) {
|
||||
const beatMs = 60000 / this.bpm;
|
||||
fosBeat.phase = ((now - this.lastBeat) % beatMs) / beatMs;
|
||||
}
|
||||
return isBeat;
|
||||
}
|
||||
|
||||
_estimate() {
|
||||
if (this.intervals.length < 6) return;
|
||||
// Agrupa intervalos parecidos (tolerancia 8%) y elige el grupo mayoritario
|
||||
const groups = [];
|
||||
for (const iv of this.intervals) {
|
||||
const g = groups.find((x) => Math.abs(x.mean - iv) / x.mean < 0.08);
|
||||
if (g) { g.sum += iv; g.count++; g.mean = g.sum / g.count; }
|
||||
else groups.push({ sum: iv, count: 1, mean: iv });
|
||||
}
|
||||
groups.sort((a, b) => b.count - a.count);
|
||||
let bpm = 60000 / groups[0].mean;
|
||||
while (bpm < 70) bpm *= 2;
|
||||
while (bpm > 180) bpm /= 2;
|
||||
this.bpm = Math.round(bpm);
|
||||
}
|
||||
}
|
||||
let beatDetector = null;
|
||||
|
||||
// ==========================================================================
|
||||
// Motor de shaders GLSL (estilo Shadertoy, reactivo al audio y al BPM)
|
||||
// Uniforms: u_resolution, u_time, u_bass, u_mid, u_treble, u_level,
|
||||
// u_bpm, u_beat (fase 0..1), u_fft (sampler2D)
|
||||
// ==========================================================================
|
||||
class ShaderEngine {
|
||||
constructor(canvas, analyserNode) {
|
||||
this.canvas = canvas;
|
||||
this.analyser = analyserNode;
|
||||
this.gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
||||
this.raf = null;
|
||||
this.program = null;
|
||||
this.loc = {};
|
||||
this.startTime = performance.now();
|
||||
this.fftData = new Uint8Array(analyserNode.frequencyBinCount);
|
||||
this._initQuad();
|
||||
this._initFFTTexture();
|
||||
}
|
||||
|
||||
_initQuad() {
|
||||
const gl = this.gl;
|
||||
this.quadBuf = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuf);
|
||||
gl.bufferData(gl.ARRAY_BUFFER,
|
||||
new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
||||
}
|
||||
|
||||
_initFFTTexture() {
|
||||
const gl = this.gl;
|
||||
this.fftTex = gl.createTexture();
|
||||
gl.bindTexture(gl.TEXTURE_2D, this.fftTex);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
||||
}
|
||||
|
||||
_compile(type, src) {
|
||||
const gl = this.gl;
|
||||
const sh = gl.createShader(type);
|
||||
gl.shaderSource(sh, src);
|
||||
gl.compileShader(sh);
|
||||
if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
|
||||
report("error", "El shader no compila. Revisa el codigo GLSL "
|
||||
+ "(el detalle tecnico esta en la consola del navegador).");
|
||||
gl.deleteShader(sh);
|
||||
return null;
|
||||
}
|
||||
return sh;
|
||||
}
|
||||
|
||||
load(fragBody) {
|
||||
const gl = this.gl;
|
||||
const vs = "attribute vec2 p; void main(){ gl_Position = vec4(p,0.0,1.0); }";
|
||||
const header =
|
||||
"precision highp float;\n" +
|
||||
"uniform vec2 u_resolution;\n" +
|
||||
"uniform float u_time;\n" +
|
||||
"uniform float u_bass;\n" +
|
||||
"uniform float u_mid;\n" +
|
||||
"uniform float u_treble;\n" +
|
||||
"uniform float u_level;\n" +
|
||||
"uniform float u_bpm;\n" +
|
||||
"uniform float u_beat;\n" +
|
||||
"uniform sampler2D u_fft;\n";
|
||||
const vsh = this._compile(gl.VERTEX_SHADER, vs);
|
||||
const fsh = this._compile(gl.FRAGMENT_SHADER, header + fragBody);
|
||||
if (!vsh || !fsh) return false;
|
||||
const prog = gl.createProgram();
|
||||
gl.attachShader(prog, vsh);
|
||||
gl.attachShader(prog, fsh);
|
||||
gl.linkProgram(prog);
|
||||
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
|
||||
console.error("[FOSFENO] link:", gl.getProgramInfoLog(prog));
|
||||
return false;
|
||||
}
|
||||
if (this.program) gl.deleteProgram(this.program);
|
||||
this.program = prog;
|
||||
const u = (name) => gl.getUniformLocation(prog, name);
|
||||
this.loc = {
|
||||
p: gl.getAttribLocation(prog, "p"),
|
||||
res: u("u_resolution"), time: u("u_time"),
|
||||
bass: u("u_bass"), mid: u("u_mid"), treble: u("u_treble"),
|
||||
level: u("u_level"), bpm: u("u_bpm"), beat: u("u_beat"), fft: u("u_fft"),
|
||||
};
|
||||
return true;
|
||||
}
|
||||
|
||||
_bands() {
|
||||
this.analyser.getByteFrequencyData(this.fftData);
|
||||
const n = this.fftData.length;
|
||||
const avg = (lo, hi) => {
|
||||
let s = 0;
|
||||
for (let i = lo; i < hi; i++) s += this.fftData[i];
|
||||
return s / Math.max(1, (hi - lo) * 255);
|
||||
};
|
||||
return [
|
||||
avg(1, Math.floor(n * 0.06)),
|
||||
avg(Math.floor(n * 0.06), Math.floor(n * 0.30)),
|
||||
avg(Math.floor(n * 0.30), Math.floor(n * 0.75)),
|
||||
avg(1, n),
|
||||
];
|
||||
}
|
||||
|
||||
_frame() {
|
||||
const gl = this.gl;
|
||||
const w = this.canvas.width = window.innerWidth;
|
||||
const h = this.canvas.height = window.innerHeight;
|
||||
gl.viewport(0, 0, w, h);
|
||||
if (this.program) {
|
||||
const b = this._bands();
|
||||
gl.useProgram(this.program);
|
||||
gl.activeTexture(gl.TEXTURE0);
|
||||
gl.bindTexture(gl.TEXTURE_2D, this.fftTex);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE,
|
||||
this.fftData.length, 1, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, this.fftData);
|
||||
gl.uniform1i(this.loc.fft, 0);
|
||||
gl.uniform2f(this.loc.res, w, h);
|
||||
gl.uniform1f(this.loc.time, (performance.now() - this.startTime) / 1000);
|
||||
gl.uniform1f(this.loc.bass, b[0]);
|
||||
gl.uniform1f(this.loc.mid, b[1]);
|
||||
gl.uniform1f(this.loc.treble, b[2]);
|
||||
gl.uniform1f(this.loc.level, b[3]);
|
||||
gl.uniform1f(this.loc.bpm, fosBeat.bpm);
|
||||
gl.uniform1f(this.loc.beat, fosBeat.phase);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuf);
|
||||
gl.enableVertexAttribArray(this.loc.p);
|
||||
gl.vertexAttribPointer(this.loc.p, 2, gl.FLOAT, false, 0, 0);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||
}
|
||||
this.raf = requestAnimationFrame(() => this._frame());
|
||||
}
|
||||
|
||||
start() { if (!this.raf) this._frame(); }
|
||||
stop() { if (this.raf) cancelAnimationFrame(this.raf); this.raf = null; }
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Audio: captura del microfono + seleccion de tarjeta
|
||||
// ==========================================================================
|
||||
async function acquireMic(deviceId) {
|
||||
if (micStream) micStream.getTracks().forEach((t) => t.stop());
|
||||
const constraints = {
|
||||
audio: {
|
||||
echoCancellation: false, noiseSuppression: false, autoGainControl: false,
|
||||
},
|
||||
};
|
||||
if (deviceId) constraints.audio.deviceId = { exact: deviceId };
|
||||
micStream = await navigator.mediaDevices.getUserMedia(constraints);
|
||||
if (micSource) micSource.disconnect();
|
||||
micSource = audioCtx.createMediaStreamSource(micStream);
|
||||
micSource.connect(gainNode);
|
||||
currentDevice = deviceId || "";
|
||||
}
|
||||
|
||||
async function initAudio() {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
||||
await audioCtx.resume();
|
||||
gainNode = audioCtx.createGain();
|
||||
gainNode.gain.value = 1.0;
|
||||
analyser = audioCtx.createAnalyser();
|
||||
analyser.fftSize = 1024;
|
||||
analyser.smoothingTimeConstant = 0.8;
|
||||
gainNode.connect(analyser);
|
||||
await acquireMic(null);
|
||||
beatDetector = new BeatDetector(analyser);
|
||||
await enumerateInputs();
|
||||
}
|
||||
|
||||
/* Lista los microfonos y las camaras y los envia al panel. Se llama al
|
||||
arrancar y cada vez que el panel pide volver a buscar dispositivos. */
|
||||
async function enumerateInputs() {
|
||||
const devs = await navigator.mediaDevices.enumerateDevices();
|
||||
const audioInputs = devs.filter((d) => d.kind === "audioinput")
|
||||
.map((d, i) => ({ id: d.deviceId,
|
||||
name: d.label || ("Entrada de audio " + (i + 1)) }));
|
||||
const cameraInputs = devs.filter((d) => d.kind === "videoinput")
|
||||
.map((d, i) => ({ id: i, name: d.label || ("Camara " + (i + 1)) }));
|
||||
socket.emit("stage_meta", {
|
||||
audioDevices: audioInputs, cameraDevices: cameraInputs,
|
||||
});
|
||||
}
|
||||
|
||||
// Bucle permanente del detector de ritmo (independiente del motor activo)
|
||||
let lastBpmSent = 0;
|
||||
function beatLoop() {
|
||||
const now = performance.now();
|
||||
const isBeat = beatDetector ? beatDetector.update(now) : false;
|
||||
try { window.bpm = fosBeat.bpm || 30; } catch (e) { /* hydra no cargado */ }
|
||||
|
||||
// Cambio de preset de Butterchurn sincronizado al compas
|
||||
if (isBeat && state && state.engine === "butterchurn" && state.power
|
||||
&& state.butterchurn.shuffle && state.butterchurn.intervalMode === "beats") {
|
||||
bcBeatCount++;
|
||||
if (bcBeatCount >= (state.butterchurn.interval || 16)) {
|
||||
bcBeatCount = 0;
|
||||
bcStep(1);
|
||||
}
|
||||
}
|
||||
if (now - lastBpmSent > 2000) {
|
||||
lastBpmSent = now;
|
||||
socket.emit("stage_status", { bpm: fosBeat.bpm });
|
||||
}
|
||||
requestAnimationFrame(beatLoop);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Butterchurn
|
||||
// ==========================================================================
|
||||
function initButterchurn() {
|
||||
const bch = window.butterchurn.default || window.butterchurn;
|
||||
bcViz = bch.createVisualizer(audioCtx, bcCanvas, {
|
||||
width: window.innerWidth, height: window.innerHeight,
|
||||
pixelRatio: window.devicePixelRatio || 1,
|
||||
});
|
||||
bcViz.connectAudio(gainNode);
|
||||
const bp = window.butterchurnPresets.default || window.butterchurnPresets;
|
||||
bcPresets = bp.getPresets();
|
||||
bcNames = Object.keys(bcPresets);
|
||||
bcIndex = Math.floor(Math.random() * bcNames.length);
|
||||
socket.emit("stage_meta", { butterchurnPresets: bcNames });
|
||||
}
|
||||
|
||||
function loadButterchurnPreset(name) {
|
||||
if (!bcPresets[name]) return;
|
||||
bcCurrent = name;
|
||||
bcViz.loadPreset(bcPresets[name], (state && state.butterchurn.blendTime) || 2.7);
|
||||
socket.emit("stage_status", { label: name });
|
||||
}
|
||||
|
||||
function bcStep(delta) {
|
||||
bcIndex = (bcIndex + delta + bcNames.length) % bcNames.length;
|
||||
loadButterchurnPreset(bcNames[bcIndex]);
|
||||
}
|
||||
|
||||
function bcLoop() {
|
||||
bcViz.setRendererSize(window.innerWidth, window.innerHeight);
|
||||
bcViz.render();
|
||||
bcRAF = requestAnimationFrame(bcLoop);
|
||||
}
|
||||
|
||||
function startButterchurn() { if (!bcRAF) bcLoop(); }
|
||||
|
||||
function stopButterchurn() {
|
||||
if (bcRAF) cancelAnimationFrame(bcRAF);
|
||||
bcRAF = null;
|
||||
clearInterval(bcTimer);
|
||||
bcTimer = null;
|
||||
}
|
||||
|
||||
function refreshShuffle() {
|
||||
clearInterval(bcTimer);
|
||||
bcTimer = null;
|
||||
bcBeatCount = 0;
|
||||
if (state && state.engine === "butterchurn" && state.power
|
||||
&& state.butterchurn.shuffle && state.butterchurn.intervalMode === "seconds") {
|
||||
bcTimer = setInterval(() => bcStep(1),
|
||||
(state.butterchurn.interval || 20) * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Hydra (codigo en vivo) + Mixer (mezclador VJ)
|
||||
// ==========================================================================
|
||||
function initHydra() {
|
||||
hydra = new Hydra({
|
||||
canvas: hydraCanvas, detectAudio: true, makeGlobal: true,
|
||||
width: window.innerWidth, height: window.innerHeight,
|
||||
});
|
||||
a.setSmooth(0.85);
|
||||
a.setBins(5);
|
||||
}
|
||||
|
||||
function runHydraCode(code) {
|
||||
if (!code) return;
|
||||
hydraCode = code;
|
||||
try {
|
||||
// eslint-disable-next-line no-eval
|
||||
eval(code);
|
||||
} catch (err) {
|
||||
report("error", "El codigo de Hydra ha fallado: " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
/* Construye una cadena de codigo Hydra a partir de los ajustes del mezclador. */
|
||||
function buildMixerCode(m) {
|
||||
let base;
|
||||
if (m.source === "video") base = "src(s1)";
|
||||
else if (m.source === "mix") base = `src(s0).${m.blendMode}(src(s1), ${m.mix})`;
|
||||
else base = "src(s0)";
|
||||
|
||||
let c = base;
|
||||
if (m.kaleid > 1) c += `.kaleid(${m.kaleid})`;
|
||||
if (m.rotate) c += `.rotate(${m.rotate})`;
|
||||
if (m.pixelate > 0) {
|
||||
const px = Math.round(220 - m.pixelate * 210);
|
||||
c += `.pixelate(${px}, ${px})`;
|
||||
}
|
||||
if (m.hue) c += `.hue(${m.hue})`;
|
||||
if (m.saturate !== 1) c += `.saturate(${m.saturate})`;
|
||||
if (m.contrast !== 1) c += `.contrast(${m.contrast})`;
|
||||
if (m.brightness) c += `.brightness(${m.brightness})`;
|
||||
if (m.colorama > 0) c += `.colorama(${m.colorama})`;
|
||||
if (m.posterize > 0) c += `.posterize(${m.posterize}, 0.5)`;
|
||||
if (m.invert) c += ".invert()";
|
||||
if (m.beatPulse) c += ".scale(() => 1.0 + a.fft[0]*0.3)";
|
||||
if (m.feedback > 0) c += `.blend(o0, ${m.feedback})`;
|
||||
c += ".out(o0)";
|
||||
return c;
|
||||
}
|
||||
|
||||
/* Inicializa las fuentes (camara s0, video s1) solo cuando cambian. */
|
||||
function ensureMixerSources(m) {
|
||||
const wantCam = m.camOn && (m.source === "cam" || m.source === "mix");
|
||||
if (wantCam && (mixerCam !== true || mixerCamId !== m.cameraId)) {
|
||||
try {
|
||||
s0.initCam(m.cameraId);
|
||||
mixerCam = true;
|
||||
mixerCamId = m.cameraId;
|
||||
} catch (e) {
|
||||
report("error", "No se pudo activar la camara. Comprueba que la "
|
||||
+ "webcam USB esta conectada, o elige otra camara en el panel.");
|
||||
}
|
||||
} else if (!wantCam) {
|
||||
mixerCam = false;
|
||||
}
|
||||
const wantVideo = m.video && (m.source === "video" || m.source === "mix");
|
||||
if (wantVideo && m.video !== mixerVideo) {
|
||||
try { s1.initVideo("/data/videos/" + encodeURIComponent(m.video)); }
|
||||
catch (e) {
|
||||
report("error", "No se pudo cargar el video '" + m.video + "'.");
|
||||
}
|
||||
mixerVideo = m.video;
|
||||
}
|
||||
}
|
||||
|
||||
function applyMixer(m) {
|
||||
ensureMixerSources(m);
|
||||
const sig = JSON.stringify(m);
|
||||
if (sig !== mixerSig) {
|
||||
mixerSig = sig;
|
||||
runHydraCode(buildMixerCode(m));
|
||||
socket.emit("stage_status", { label: "Mezclador VJ" });
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// Conmutacion de motores
|
||||
// ==========================================================================
|
||||
function show(canvas) {
|
||||
bcCanvas.classList.toggle("visible", canvas === bcCanvas);
|
||||
hydraCanvas.classList.toggle("visible", canvas === hydraCanvas);
|
||||
shaderCanvas.classList.toggle("visible", canvas === shaderCanvas);
|
||||
document.getElementById("info").style.display = "none";
|
||||
msgEl.style.display = canvas ? "none" : "block";
|
||||
}
|
||||
|
||||
/* Pantalla de conexion: muestra la direccion del panel y un codigo QR en el
|
||||
proyector. Se ve al arrancar (hasta que alguien abre el panel) y cuando las
|
||||
visuales estan apagadas, para que conectarse sea inmediato. */
|
||||
function renderInfoScreen() {
|
||||
show(null);
|
||||
const net = state.network || {};
|
||||
const port = (net.port && net.port !== 80) ? ":" + net.port : "";
|
||||
const ipUrl = "http://" + (net.ip || "...") + port + "/";
|
||||
const nameUrl = "http://" + (net.hostname || "fosfeno") + ".local" + port + "/";
|
||||
document.getElementById("info-url").textContent = ipUrl;
|
||||
document.getElementById("info-sub").textContent = "o tambien: " + nameUrl;
|
||||
if (typeof qrcode !== "undefined" && lastQrUrl !== ipUrl && net.ip) {
|
||||
lastQrUrl = ipUrl;
|
||||
try {
|
||||
const qr = qrcode(0, "M");
|
||||
qr.addData(ipUrl);
|
||||
qr.make();
|
||||
document.getElementById("info-qr").src = qr.createDataURL(7, 8);
|
||||
} catch (e) { /* sin QR: queda la direccion en texto */ }
|
||||
}
|
||||
document.getElementById("info").style.display = "flex";
|
||||
}
|
||||
|
||||
function applyState(next) {
|
||||
const prevDevice = currentDevice;
|
||||
state = next;
|
||||
if (gainNode) gainNode.gain.value = state.sensitivity;
|
||||
|
||||
// Cambio de tarjeta de audio
|
||||
if (state.audio.device && state.audio.device !== prevDevice) {
|
||||
acquireMic(state.audio.device).catch(() =>
|
||||
report("error", "No se pudo cambiar a la tarjeta de audio elegida."));
|
||||
}
|
||||
|
||||
// Mientras nadie haya abierto el panel, o con las visuales apagadas,
|
||||
// el proyector muestra como conectarse (direccion + codigo QR).
|
||||
const showConnect = !(state.network && state.network.panelSeen) || !state.power;
|
||||
if (showConnect || state.engine === "projectm") {
|
||||
stopButterchurn();
|
||||
if (shaderEngine) shaderEngine.stop();
|
||||
if (hydra) hydra.hush();
|
||||
mixerSig = "";
|
||||
if (showConnect) renderInfoScreen();
|
||||
else show(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (state.engine === "butterchurn") {
|
||||
if (hydra) hydra.hush();
|
||||
if (shaderEngine) shaderEngine.stop();
|
||||
mixerSig = "";
|
||||
show(bcCanvas);
|
||||
startButterchurn();
|
||||
const wanted = state.butterchurn.preset;
|
||||
if (wanted && wanted !== bcCurrent) loadButterchurnPreset(wanted);
|
||||
else if (!bcCurrent) loadButterchurnPreset(bcNames[bcIndex]);
|
||||
refreshShuffle();
|
||||
|
||||
} else if (state.engine === "hydra") {
|
||||
stopButterchurn();
|
||||
if (shaderEngine) shaderEngine.stop();
|
||||
mixerSig = "";
|
||||
show(hydraCanvas);
|
||||
if (state.hydra.code !== hydraCode) runHydraCode(state.hydra.code);
|
||||
|
||||
} else if (state.engine === "shaders") {
|
||||
stopButterchurn();
|
||||
if (hydra) hydra.hush();
|
||||
mixerSig = "";
|
||||
show(shaderCanvas);
|
||||
if (shaderEngine && state.shaders.code !== shaderCode) {
|
||||
if (shaderEngine.load(state.shaders.code)) shaderCode = state.shaders.code;
|
||||
}
|
||||
if (shaderEngine) shaderEngine.start();
|
||||
|
||||
} else if (state.engine === "mixer") {
|
||||
stopButterchurn();
|
||||
if (shaderEngine) shaderEngine.stop();
|
||||
show(hydraCanvas);
|
||||
applyMixer(state.mixer);
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// WebSocket
|
||||
// ==========================================================================
|
||||
socket.on("state", (next) => applyState(next));
|
||||
|
||||
socket.on("stage_command", (cmd) => {
|
||||
if (!state) return;
|
||||
if (state.engine === "butterchurn") {
|
||||
if (cmd.action === "next") bcStep(1);
|
||||
else if (cmd.action === "prev") bcStep(-1);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("stage_rescan", () => {
|
||||
enumerateInputs().catch((e) =>
|
||||
report("warn", "No se pudieron volver a leer los dispositivos."));
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (hydra) hydra.setResolution(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// Arranque
|
||||
// ==========================================================================
|
||||
async function boot() {
|
||||
try {
|
||||
if (typeof Hydra === "undefined" || typeof butterchurn === "undefined") {
|
||||
report("error", "Faltan librerias de visuales. Ejecuta install.sh "
|
||||
+ "de nuevo en la Raspberry.");
|
||||
msgEl.textContent = "ERROR: faltan librerias";
|
||||
return;
|
||||
}
|
||||
await initAudio();
|
||||
initButterchurn();
|
||||
initHydra();
|
||||
shaderEngine = new ShaderEngine(shaderCanvas, analyser);
|
||||
beatLoop();
|
||||
msgEl.textContent = "FOSFENO listo";
|
||||
} catch (err) {
|
||||
report("error", "Fallo al arrancar el escenario: " + err.message
|
||||
+ ". Si menciona el microfono, comprueba que esta conectado.");
|
||||
msgEl.textContent = "ERROR: " + err.message;
|
||||
}
|
||||
}
|
||||
|
||||
boot();
|
||||
Loading…
Add table
Add a link
Reference in a new issue