Panel: fuente Xirod, titulos centrados y diseno de dos columnas
Anade la fuente Xirod (web/panel/fonts/xirod.otf, de 1001fonts) para el titulo del panel, tanto en Raspberry como en portatil. Titulos centrados en la cabecera y en cada tarjeta. En pantalla ancha el panel pasa a dos columnas para aprovechar el espacio del portatil (Visuales/Audio/Sensibilidad a la izquierda, Motor y controles a la derecha); en movil sigue en una sola columna, igual que antes. El README explica el uso en ordenador con diagrama, comandos y tabla de diferencias, recalcando que en ordenador no se usa el modo kiosko. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hacklab
parent
c8b51615ba
commit
7ebb593288
5 changed files with 281 additions and 182 deletions
|
|
@ -10,7 +10,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>F O S F E N O</h1>
|
||||
<h1>FOSFENO</h1>
|
||||
<span id="conn" class="dot off" title="Conexion"></span>
|
||||
</header>
|
||||
|
||||
|
|
@ -20,167 +20,176 @@
|
|||
<button id="notif-close" aria-label="Cerrar aviso">×</button>
|
||||
</div>
|
||||
|
||||
<!-- En movil las tarjetas van en una sola columna; en pantalla ancha,
|
||||
en dos columnas (.column pasa a display:contents en movil). -->
|
||||
<main>
|
||||
<!-- Encendido -->
|
||||
<section class="card center">
|
||||
<div class="cardhead">
|
||||
<span class="label">Visuales</span>
|
||||
<button class="info" data-help="power">i</button>
|
||||
</div>
|
||||
<button id="power" class="power-btn">ON</button>
|
||||
</section>
|
||||
<div class="column">
|
||||
|
||||
<!-- Selector de motor -->
|
||||
<section class="card">
|
||||
<div class="cardhead">
|
||||
<span class="label">Motor de visuales</span>
|
||||
<button class="info" data-help="engines">i</button>
|
||||
</div>
|
||||
<div class="engines">
|
||||
<button class="engine" data-engine="projectm">
|
||||
<strong>projectM</strong><small>nativo</small></button>
|
||||
<button class="engine" data-engine="butterchurn">
|
||||
<strong>Butter</strong><small>MilkDrop</small></button>
|
||||
<button class="engine" data-engine="hydra">
|
||||
<strong>Hydra</strong><small>codigo</small></button>
|
||||
<button class="engine" data-engine="shaders">
|
||||
<strong>Shaders</strong><small>GLSL</small></button>
|
||||
<button class="engine" data-engine="mixer">
|
||||
<strong>Mezcla</strong><small>camara</small></button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Encendido -->
|
||||
<section class="card center" id="card-power">
|
||||
<div class="cardhead">
|
||||
<span class="label">Visuales</span>
|
||||
<button class="info" data-help="power">i</button>
|
||||
</div>
|
||||
<button id="power" class="power-btn">ON</button>
|
||||
</section>
|
||||
|
||||
<!-- Audio: tarjeta + BPM -->
|
||||
<section class="card">
|
||||
<div class="cardhead">
|
||||
<span class="label">Audio</span>
|
||||
<button class="info" data-help="audio">i</button>
|
||||
</div>
|
||||
<select id="audio-device"><option>Detectando entradas...</option></select>
|
||||
<button id="dev-rescan" class="cmd">Buscar dispositivos de nuevo</button>
|
||||
<div class="row">
|
||||
<span class="label">BPM detectado</span>
|
||||
<span id="bpm" class="bpm">--</span>
|
||||
</div>
|
||||
<p class="hint">Si conectas el microfono o la camara con la Raspberry ya
|
||||
encendida, pulsa este boton para que aparezcan.</p>
|
||||
</section>
|
||||
<!-- Audio: tarjeta + BPM -->
|
||||
<section class="card" id="card-audio">
|
||||
<div class="cardhead">
|
||||
<span class="label">Audio</span>
|
||||
<button class="info" data-help="audio">i</button>
|
||||
</div>
|
||||
<select id="audio-device"><option>Detectando entradas...</option></select>
|
||||
<button id="dev-rescan" class="cmd">Buscar dispositivos de nuevo</button>
|
||||
<div class="row">
|
||||
<span class="label">BPM detectado</span>
|
||||
<span id="bpm" class="bpm">--</span>
|
||||
</div>
|
||||
<p class="hint">Si conectas el microfono o la camara con el equipo ya
|
||||
encendido, pulsa este boton para que aparezcan.</p>
|
||||
</section>
|
||||
|
||||
<!-- Sensibilidad -->
|
||||
<section class="card">
|
||||
<div class="cardhead">
|
||||
<span class="label">Sensibilidad al audio:
|
||||
<span id="sens-val" class="value">1.0</span></span>
|
||||
<button class="info" data-help="sensibilidad">i</button>
|
||||
</div>
|
||||
<input id="sens" type="range" min="0" max="4" step="0.1" value="1">
|
||||
</section>
|
||||
<!-- Sensibilidad -->
|
||||
<section class="card" id="card-sens">
|
||||
<div class="cardhead">
|
||||
<span class="label">Sensibilidad al audio:
|
||||
<span id="sens-val" class="value">1.0</span></span>
|
||||
<button class="info" data-help="sensibilidad">i</button>
|
||||
</div>
|
||||
<input id="sens" type="range" min="0" max="4" step="0.1" value="1">
|
||||
</section>
|
||||
|
||||
<!-- Butterchurn -->
|
||||
<section class="card" id="ctl-butterchurn" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">Butterchurn</span>
|
||||
<button class="info" data-help="butterchurn">i</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="cmd" data-action="prev">« Anterior</button>
|
||||
<button class="cmd" data-action="next">Siguiente »</button>
|
||||
</div>
|
||||
<select id="bc-preset"><option>Cargando presets...</option></select>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="bc-shuffle"> Cambio automatico de preset
|
||||
</label>
|
||||
<div class="seg">
|
||||
<button id="bc-mode-seconds" class="segbtn">Por segundos</button>
|
||||
<button id="bc-mode-beats" class="segbtn">Al compas (BPM)</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">Intervalo: <span id="bc-int-val">20</span>
|
||||
<span id="bc-int-unit">s</span></span>
|
||||
</div>
|
||||
<input id="bc-interval" type="range" min="1" max="120" step="1" value="20">
|
||||
<div class="row">
|
||||
<span class="label">Transicion: <span id="bc-blend-val">2.7</span> s</span>
|
||||
</div>
|
||||
<input id="bc-blend" type="range" min="0" max="10" step="0.1" value="2.7">
|
||||
</section>
|
||||
<!-- Estado -->
|
||||
<section class="card" id="card-now">
|
||||
<span class="label">Ahora suena</span>
|
||||
<div id="now" class="now">-</div>
|
||||
</section>
|
||||
|
||||
<!-- Editor de codigo (Hydra / Shaders) -->
|
||||
<section class="card" id="ctl-editor" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label" id="editor-title">Editor de codigo</span>
|
||||
<button class="info" id="editor-info" data-help="hydra">i</button>
|
||||
</div>
|
||||
<select id="lib-select"><option>Libreria...</option></select>
|
||||
<textarea id="code"></textarea>
|
||||
<div class="row">
|
||||
<button id="run-code" class="cmd accent">Ejecutar</button>
|
||||
<button id="clear-code" class="cmd">Limpiar</button>
|
||||
</div>
|
||||
<p class="hint" id="editor-hint"></p>
|
||||
</section>
|
||||
<!-- Sistema -->
|
||||
<section class="card sys" id="card-sys">
|
||||
<button id="reboot" class="sysbtn">Reiniciar</button>
|
||||
<button id="shutdown" class="sysbtn danger">Apagar</button>
|
||||
</section>
|
||||
|
||||
<!-- Mezclador VJ -->
|
||||
<section class="card" id="ctl-mixer" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">Mezclador VJ</span>
|
||||
<button class="info" data-help="mixer">i</button>
|
||||
</div>
|
||||
<div class="seg" id="mixer-source">
|
||||
<button class="segbtn" data-src="cam">Camara</button>
|
||||
<button class="segbtn" data-src="video">Video</button>
|
||||
<button class="segbtn" data-src="mix">Mezcla</button>
|
||||
</div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-cam"> Camara activada
|
||||
</label>
|
||||
<select id="mix-camera"><option value="0">Camara por defecto</option></select>
|
||||
<select id="mix-video"><option value="">-- sin video --</option></select>
|
||||
<button id="mix-rescan" class="cmd">Actualizar lista de videos</button>
|
||||
<div class="row">
|
||||
<span class="label">Modo de mezcla</span>
|
||||
<select id="mix-blend" class="inline">
|
||||
<option value="blend">Fundido</option>
|
||||
<option value="diff">Diferencia</option>
|
||||
<option value="mult">Multiplicar</option>
|
||||
<option value="add">Sumar</option>
|
||||
<option value="layer">Capa</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="mixer-sliders"></div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-invert"> Invertir colores
|
||||
</label>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-beat"> Pulso al ritmo
|
||||
</label>
|
||||
</section>
|
||||
<p id="net-foot" class="netfoot">FOSFENO</p>
|
||||
</div>
|
||||
|
||||
<!-- projectM -->
|
||||
<section class="card" id="ctl-projectm" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">projectM</span>
|
||||
<button class="info" data-help="projectm">i</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="cmd" data-action="prev">« Anterior</button>
|
||||
<button class="cmd" data-action="next">Siguiente »</button>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
|
||||
<!-- Estado -->
|
||||
<section class="card">
|
||||
<span class="label">Ahora suena</span>
|
||||
<div id="now" class="now">-</div>
|
||||
</section>
|
||||
<!-- Selector de motor -->
|
||||
<section class="card" id="card-engines">
|
||||
<div class="cardhead">
|
||||
<span class="label">Motor de visuales</span>
|
||||
<button class="info" data-help="engines">i</button>
|
||||
</div>
|
||||
<div class="engines">
|
||||
<button class="engine" data-engine="projectm">
|
||||
<strong>projectM</strong><small>nativo</small></button>
|
||||
<button class="engine" data-engine="butterchurn">
|
||||
<strong>Butter</strong><small>MilkDrop</small></button>
|
||||
<button class="engine" data-engine="hydra">
|
||||
<strong>Hydra</strong><small>codigo</small></button>
|
||||
<button class="engine" data-engine="shaders">
|
||||
<strong>Shaders</strong><small>GLSL</small></button>
|
||||
<button class="engine" data-engine="mixer">
|
||||
<strong>Mezcla</strong><small>camara</small></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sistema -->
|
||||
<section class="card sys">
|
||||
<button id="reboot" class="sysbtn">Reiniciar Pi</button>
|
||||
<button id="shutdown" class="sysbtn danger">Apagar Pi</button>
|
||||
</section>
|
||||
<!-- Butterchurn -->
|
||||
<section class="card" id="ctl-butterchurn" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">Butterchurn</span>
|
||||
<button class="info" data-help="butterchurn">i</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="cmd" data-action="prev">« Anterior</button>
|
||||
<button class="cmd" data-action="next">Siguiente »</button>
|
||||
</div>
|
||||
<select id="bc-preset"><option>Cargando presets...</option></select>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="bc-shuffle"> Cambio automatico de preset
|
||||
</label>
|
||||
<div class="seg">
|
||||
<button id="bc-mode-seconds" class="segbtn">Por segundos</button>
|
||||
<button id="bc-mode-beats" class="segbtn">Al compas (BPM)</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">Intervalo: <span id="bc-int-val">20</span>
|
||||
<span id="bc-int-unit">s</span></span>
|
||||
</div>
|
||||
<input id="bc-interval" type="range" min="1" max="120" step="1" value="20">
|
||||
<div class="row">
|
||||
<span class="label">Transicion: <span id="bc-blend-val">2.7</span> s</span>
|
||||
</div>
|
||||
<input id="bc-blend" type="range" min="0" max="10" step="0.1" value="2.7">
|
||||
</section>
|
||||
|
||||
<p id="net-foot" class="netfoot">FOSFENO</p>
|
||||
<!-- Editor de codigo (Hydra / Shaders) -->
|
||||
<section class="card" id="ctl-editor" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label" id="editor-title">Editor de codigo</span>
|
||||
<button class="info" id="editor-info" data-help="hydra">i</button>
|
||||
</div>
|
||||
<select id="lib-select"><option>Libreria...</option></select>
|
||||
<textarea id="code"></textarea>
|
||||
<div class="row">
|
||||
<button id="run-code" class="cmd accent">Ejecutar</button>
|
||||
<button id="clear-code" class="cmd">Limpiar</button>
|
||||
</div>
|
||||
<p class="hint" id="editor-hint"></p>
|
||||
</section>
|
||||
|
||||
<!-- Mezclador VJ -->
|
||||
<section class="card" id="ctl-mixer" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">Mezclador VJ</span>
|
||||
<button class="info" data-help="mixer">i</button>
|
||||
</div>
|
||||
<div class="seg" id="mixer-source">
|
||||
<button class="segbtn" data-src="cam">Camara</button>
|
||||
<button class="segbtn" data-src="video">Video</button>
|
||||
<button class="segbtn" data-src="mix">Mezcla</button>
|
||||
</div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-cam"> Camara activada
|
||||
</label>
|
||||
<select id="mix-camera"><option value="0">Camara por defecto</option></select>
|
||||
<select id="mix-video"><option value="">-- sin video --</option></select>
|
||||
<button id="mix-rescan" class="cmd">Actualizar lista de videos</button>
|
||||
<div class="row">
|
||||
<span class="label">Modo de mezcla</span>
|
||||
<select id="mix-blend" class="inline">
|
||||
<option value="blend">Fundido</option>
|
||||
<option value="diff">Diferencia</option>
|
||||
<option value="mult">Multiplicar</option>
|
||||
<option value="add">Sumar</option>
|
||||
<option value="layer">Capa</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="mixer-sliders"></div>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-invert"> Invertir colores
|
||||
</label>
|
||||
<label class="check">
|
||||
<input type="checkbox" id="mix-beat"> Pulso al ritmo
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<!-- projectM -->
|
||||
<section class="card" id="ctl-projectm" hidden>
|
||||
<div class="cardhead">
|
||||
<span class="label">projectM</span>
|
||||
<button class="info" data-help="projectm">i</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="cmd" data-action="prev">« Anterior</button>
|
||||
<button class="cmd" data-action="next">Siguiente »</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Ventana de informacion -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue