7ebb593288
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>
210 lines
8 KiB
HTML
210 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FOSFENO :: Panel</title>
|
|
<link rel="stylesheet" href="/panel/panel.css">
|
|
<link rel="stylesheet" href="/lib/codemirror/codemirror.css">
|
|
<link rel="stylesheet" href="/lib/codemirror/material-darker.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>FOSFENO</h1>
|
|
<span id="conn" class="dot off" title="Conexion"></span>
|
|
</header>
|
|
|
|
<!-- Banda de avisos: aqui aparece cualquier error o aviso -->
|
|
<div id="notif" class="notif" hidden>
|
|
<span id="notif-msg"></span>
|
|
<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>
|
|
<div class="column">
|
|
|
|
<!-- 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" 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" 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>
|
|
|
|
<!-- Estado -->
|
|
<section class="card" id="card-now">
|
|
<span class="label">Ahora suena</span>
|
|
<div id="now" class="now">-</div>
|
|
</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>
|
|
|
|
<p id="net-foot" class="netfoot">FOSFENO</p>
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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 -->
|
|
<div id="modal" class="modal" hidden>
|
|
<div class="modal-box">
|
|
<h2 id="modal-title">Informacion</h2>
|
|
<div id="modal-body"></div>
|
|
<button id="modal-close" class="cmd accent">Entendido</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/lib/socket.io.min.js"></script>
|
|
<script src="/lib/codemirror/codemirror.js"></script>
|
|
<script src="/lib/codemirror/javascript.js"></script>
|
|
<script src="/lib/codemirror/clike.js"></script>
|
|
<script src="/panel/panel.js"></script>
|
|
</body>
|
|
</html>
|