MOTORES: pastillas configurables y destino (salida o capa)
Las pestanas de capa de la barra superior no valian: mezclaban navegar por el panel con elegir sobre que se trabaja, y sacaban del panel de directo. Se quitan y todo pasa a MOTORES, con dos decisiones separadas: DONDE -> fila 'Donde se ve': SALIDA o una capa del mapping (+ crea una). QUE -> las pastillas: combinaciones guardadas por el usuario. Pinchar una pastilla la manda al destino elegido: con SALIDA cambia el motor global, con una capa cambia SOLO esa capa y el resto sigue igual. Con una capa elegida sus ajustes salen en MOTORES (la tarjeta de propiedades se mueve, no se duplica: dos formularios para lo mismo se desincronizan a la primera). Las pastillas son configurables: motor + preset + ajustes y su nombre, con 'Configurar pastillas'. Persisten en data/slots.json (gitignorado, es de cada instalacion). De fabrica vienen los cinco motores de siempre, asi que quien actualice se encuentra lo mismo que tenia. Hydra, Mezcla y projectM nativo solo pueden ir a la salida, y al intentar mandarlos a una capa se dice. Comprobado en Chromium por CDP, no con --dump-dom: ese fotografia el DOM al cargar, antes de que llegue el estado por socket, y daba falsos "esta vacio". Verificado que disparar sobre una capa deja el motor global intacto, que la tarjeta de propiedades va y vuelve de su sitio, y que las pastillas nuevas se guardan en disco. De paso, dos fallos que aparecieron al probarlo: - Restaurar la vista guardada corria al principio del fichero y llamaba a codigo que usa variables declaradas con let mas abajo: ReferenceError que se llevaba por delante el resto del script (socket incluido) y dejaba el panel en blanco. Ahora se restaura al final. - #card-destino no estaba en la lista de 'order' del CSS, asi que caia a 0 y se colaba encima de las pastillas pese a ir despues en el HTML. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
hacklab
parent
f017246f0e
commit
61543e1987
8 changed files with 602 additions and 146 deletions
|
|
@ -22,11 +22,6 @@
|
|||
<button class="tab active" data-view="motores">MOTORES</button>
|
||||
<button class="tab" data-view="mapping">MAPPING<span
|
||||
id="tab-map-dot" class="tabdot" hidden></span></button>
|
||||
<!-- Una pestana por capa del mapping: se generan solas (renderTabsCapas)
|
||||
para poder saltar a editar cada capa sin pasar por MAPPING -->
|
||||
<span id="tabs-capas"></span>
|
||||
<button class="tab tabnew" id="tab-nueva-capa"
|
||||
title="Crear una capa nueva y abrirla">+ CAPA</button>
|
||||
</nav>
|
||||
<span id="conn" class="dot off" title="Conexion"></span>
|
||||
</header>
|
||||
|
|
@ -102,24 +97,75 @@
|
|||
|
||||
<div class="column">
|
||||
|
||||
<!-- Selector de motor -->
|
||||
<!-- Pastillas: cada circulo es una combinacion guardada (motor +
|
||||
preset + ajustes) con su nombre. Se disparan sobre el DESTINO que
|
||||
este elegido abajo: la salida entera o una capa del mapping. -->
|
||||
<section class="card" id="card-engines">
|
||||
<div class="cardhead">
|
||||
<span class="label">Motor de visuales</span>
|
||||
<span class="label">Pastillas</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 class="engines" id="slots"></div>
|
||||
<div class="row">
|
||||
<button id="slots-config" class="cmd">Configurar pastillas</button>
|
||||
</div>
|
||||
|
||||
<!-- Editor de una pastilla (solo en modo configurar) -->
|
||||
<div class="stack" id="slot-editor" hidden>
|
||||
<div class="row">
|
||||
<span class="label">Nombre</span>
|
||||
<input type="text" id="slot-nombre" class="txt" maxlength="12"
|
||||
placeholder="TUNEL">
|
||||
</div>
|
||||
<span class="label">Que lanza</span>
|
||||
<select id="slot-tipo">
|
||||
<option value="butter">Visuales MilkDrop</option>
|
||||
<option value="shader">Shader GLSL</option>
|
||||
<option value="video">Clip o imagen de la galeria</option>
|
||||
<option value="camara">Camara</option>
|
||||
<option value="hydra">Hydra (solo a la salida)</option>
|
||||
<option value="mixer">Mezclador VJ (solo a la salida)</option>
|
||||
<option value="projectm-nativo">projectM nativo (solo a la salida)</option>
|
||||
</select>
|
||||
<div class="stack slot-op" id="sop-butter" hidden>
|
||||
<select id="slot-biblioteca">
|
||||
<option value="butter">Butterchurn — ~100 presets</option>
|
||||
<option value="projectm">projectM — biblioteca .milk</option>
|
||||
</select>
|
||||
<select id="slot-preset"><option value="">-- al azar --</option></select>
|
||||
<div class="stack" id="sop-milk" hidden>
|
||||
<select id="slot-milk-cat"><option value="">-- categoria --</option></select>
|
||||
<select id="slot-milk-vis"><option value="">-- visual --</option></select>
|
||||
<select id="slot-milk-var"><option value="">-- variante --</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack slot-op" id="sop-shader" hidden>
|
||||
<select id="slot-shader"><option value="">-- elige un shader --</option></select>
|
||||
</div>
|
||||
<div class="stack slot-op" id="sop-video" hidden>
|
||||
<select id="slot-video"><option value="">-- elige un clip --</option></select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="slot-borrar" class="cmd del">Borrar pastilla</button>
|
||||
<button id="slot-listo" class="cmd accent">Listo</button>
|
||||
</div>
|
||||
<p class="hint">Las pastillas se guardan en el equipo: al volver
|
||||
siguen ahi. En directo, pincha una y salta al destino elegido.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Destino: a donde va lo que dispares. La salida entera, o una capa
|
||||
concreta del mapping. Aqui tambien se crean capas nuevas. -->
|
||||
<section class="card" id="card-destino">
|
||||
<div class="cardhead">
|
||||
<span class="label">Donde se ve</span>
|
||||
<button class="info" data-help="destino">i</button>
|
||||
</div>
|
||||
<div class="subtabs" id="destinos"></div>
|
||||
<p class="hint" id="destino-hint"></p>
|
||||
<!-- Cuando el destino es una capa, aqui se mete su tarjeta de
|
||||
propiedades (la misma de MAPPING, prestada) -->
|
||||
<div id="destino-props"></div>
|
||||
</section>
|
||||
|
||||
<!-- Butterchurn -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue