hacklab/fosfeno
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Soporte multi-distro en portatil, titulos mas grandes, panel mas ancho y refresco de microfono

Browse source 
install.sh --laptop ahora detecta el gestor de paquetes (apt, dnf, pacman o zypper) e instala las dependencias en Debian/Ubuntu/Mint, Fedora, Arch/Manjaro y openSUSE; en el resto avisa de los 5 paquetes a instalar a mano. En portatil no se compila projectM (opcional). Panel: titulo superior mas grande y cada titulo de tarjeta mas grande y en fuente Xirod; en pantalla ancha el panel ocupa el 94% (hasta 1600px) para aprovechar el portatil. Audio: nuevo boton 'Aplicar microfono' que reconecta la captura desde el panel (evento reacquire_audio); el microfono integrado del portatil se capta como entrada por defecto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hacklab 2026-05-22 18:11:01 +02:00
parent 7ebb593288
commit 6df128a377
8 changed files with 172 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/panel/index.html
View file

@ -41,6 +41,7 @@
<button class="info" data-help="audio">i</button>
</div>
<select id="audio-device"><option>Detectando entradas...</option></select>
<button id="audio-apply" class="cmd accent">Aplicar microfono</button>
<button id="dev-rescan" class="cmd">Buscar dispositivos de nuevo</button>
<div class="row">
<span class="label">BPM detectado</span>
@ -53,7 +54,7 @@
<!-- Sensibilidad -->
<section class="card" id="card-sens">
<div class="cardhead">
<span class="label">Sensibilidad al audio:
<span class="label">Sensibilidad:
<span id="sens-val" class="value">1.0</span></span>
<button class="info" data-help="sensibilidad">i</button>
</div>

14
web/panel/panel.css
View file

@ -44,8 +44,8 @@ header {
}
header h1 {
font-family: "Xirod", "Arial Black", sans-serif;
font-size: 21px; font-weight: 400; letter-spacing: 0.16em;
color: var(--green); text-shadow: 0 0 16px rgba(180, 255, 0, 0.6);
font-size: 32px; font-weight: 400; letter-spacing: 0.09em;
color: var(--green); text-shadow: 0 0 18px rgba(180, 255, 0, 0.65);
}
#conn {
position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
@ -74,7 +74,7 @@ main {
/* --- Disposicion: pantalla ancha (portatil) en dos columnas --- */
@media (min-width: 880px) {
main {
max-width: 1080px; flex-direction: row;
width: 94%; max-width: 1600px; flex-direction: row;
align-items: flex-start; gap: 18px;
}
.column {
@ -94,6 +94,12 @@ main {
.cardhead {
position: relative; width: 100%;
display: flex; align-items: center; justify-content: center;
min-height: 30px;
}
/* Titulo de cada tarjeta: mas grande y en la fuente Xirod */
.cardhead .label {
font-family: "Xirod", "Arial Black", sans-serif;
font-size: 16px; font-weight: 400; letter-spacing: 0.04em;
}
.label { color: var(--green); font-size: 13px; text-transform: uppercase;
@ -220,7 +226,7 @@ input[type=range] { width: 100%; accent-color: var(--green); height: 30px; }
.notif {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; font-size: 14px; font-weight: 600;
position: sticky; top: 56px; z-index: 9;
position: sticky; top: 66px; z-index: 9;
}
.notif.info { background: var(--green); color: var(--ink); }
.notif.warn { background: var(--orange); color: var(--ink); }

10
web/panel/panel.js
View file

@ -239,8 +239,7 @@ function renderEditor() {
if (state.engine !== editorEngine) {
editorEngine = state.engine;
const isHydra = state.engine === "hydra";
$("#editor-title").textContent = isHydra
? "Editor Hydra (JavaScript)" : "Editor de shaders (GLSL)";
$("#editor-title").textContent = isHydra ? "Editor Hydra" : "Editor Shaders";
$("#editor-hint").textContent = isHydra
? "Variables: time, a.fft[0..4], bpm. Escribe o pega codigo Hydra."
: "Uniforms: u_time, u_bass, u_mid, u_treble, u_bpm, u_beat, u_fft.";
@ -299,6 +298,13 @@ $("#notif-close").addEventListener("click", () => { $("#notif").hidden = true; }
$("#audio-device").addEventListener("change", (e) =>
socket.emit("update_settings",
{ engine: "audio", patch: { device: e.target.value } }));
// Boton "Aplicar microfono": fija la entrada elegida y obliga al escenario
// a re-conectar la captura de audio (util tras enchufar o cambiar el micro).
$("#audio-apply").addEventListener("click", () => {
socket.emit("update_settings",
{ engine: "audio", patch: { device: $("#audio-device").value } });
socket.emit("reacquire_audio");
});
$("#sens").addEventListener("input", (e) =>
$("#sens-val").textContent = Number(e.target.value).toFixed(1));

8
web/stage/stage.js
View file

@ -575,6 +575,14 @@ socket.on("stage_rescan", () => {
report("warn", "No se pudieron volver a leer los dispositivos."));
});
// El panel pide reconectar la captura del microfono (boton "Aplicar").
socket.on("stage_reacquire", () => {
const dev = (state && state.audio && state.audio.device) || null;
acquireMic(dev)
.then(() => report("info", "Microfono conectado."))
.catch(() => report("error", "No se pudo conectar con el microfono elegido."));
});
window.addEventListener("resize", () => {
if (hydra) hydra.setResolution(window.innerWidth, window.innerHeight);
});