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
|
|
@ -21,85 +21,34 @@ const $$ = (s) => document.querySelectorAll(s);
|
|||
// Se separan para no mezclar los controles de directo con los de montaje.
|
||||
// La eleccion se recuerda en el propio navegador.
|
||||
// ==========================================================================
|
||||
/* Ademas de MOTORES y MAPPING hay una vista por CAPA ("capa:<id>"): ensena
|
||||
solo la previsualizacion y las propiedades de esa capa, para poder trastear
|
||||
con su efecto sin el resto del panel delante. Es lo que hace usable tener
|
||||
varias capas: sin esto habia que ir a MAPPING, buscarla en la lista y
|
||||
volver. */
|
||||
/* mapSurfaces se declara mas abajo con let: al restaurar la vista guardada
|
||||
esta funcion corre ANTES que esa linea, y tocarla daria ReferenceError. */
|
||||
/* mapSurfaces se declara mas abajo con let: setView puede correr ANTES de esa
|
||||
linea (al restaurar la vista guardada), y tocarla daria ReferenceError. */
|
||||
function capasHoy() {
|
||||
try { return mapSurfaces || []; } catch (e) { return []; }
|
||||
}
|
||||
|
||||
function setView(view) {
|
||||
const esCapa = String(view).startsWith("capa:");
|
||||
if (!esCapa && view !== "mapping") view = "motores";
|
||||
if (esCapa) {
|
||||
const id = view.slice(5);
|
||||
// Si la capa ya no existe (borrada desde otro movil), no dejamos el panel
|
||||
// en una vista fantasma
|
||||
if (!capasHoy().some((s) => s.id === id)) return setView("mapping");
|
||||
mapSel = { type: "surface", id: id };
|
||||
document.body.dataset.capa = id;
|
||||
} else {
|
||||
delete document.body.dataset.capa;
|
||||
}
|
||||
document.body.dataset.view = esCapa ? "capa" : view;
|
||||
if (view !== "mapping") view = "motores";
|
||||
document.body.dataset.view = view;
|
||||
vistaActual = view;
|
||||
$$(".tab").forEach((t) =>
|
||||
t.classList.toggle("active", t.dataset.view === view));
|
||||
$$(".tab").forEach((t) => t.classList.toggle("active", t.dataset.view === view));
|
||||
try { localStorage.setItem("fosfeno.view", view); } catch (e) { /* privado */ }
|
||||
// Al salir de MOTORES, las propiedades de capa vuelven a su tarjeta de
|
||||
// MAPPING (ver colocarPropiedades)
|
||||
colocarPropiedades();
|
||||
// El lienzo del mapping mide 0 mientras esta oculto: hay que repintarlo
|
||||
// al entrar en su vista, ya con su tamano real.
|
||||
if (state && (view === "mapping" || esCapa)) {
|
||||
renderPropiedades();
|
||||
drawMapPreview();
|
||||
}
|
||||
if (view === "mapping" && state) drawMapPreview();
|
||||
}
|
||||
let vistaActual = "motores";
|
||||
|
||||
/* Rehace las pestanas de capa. Solo toca el DOM si algo cambio: si no, cada
|
||||
estado que llega (y llegan muchos) tiraria la pestana que el usuario esta
|
||||
pulsando. */
|
||||
function renderTabsCapas() {
|
||||
const cont = $("#tabs-capas");
|
||||
if (!cont) return;
|
||||
const capas = capasHoy();
|
||||
const sig = capas.map((s, i) => s.id + ":" + (s.nombre || i + 1)).join("|");
|
||||
if (cont.dataset.sig !== sig) {
|
||||
cont.dataset.sig = sig;
|
||||
cont.innerHTML = "";
|
||||
capas.forEach((s, i) => {
|
||||
const b = document.createElement("button");
|
||||
b.className = "tab tabcapa";
|
||||
b.dataset.view = "capa:" + s.id;
|
||||
b.textContent = (s.nombre || "CAPA " + (i + 1)).toUpperCase();
|
||||
b.title = "Editar esta capa";
|
||||
b.addEventListener("click", () => setView("capa:" + s.id));
|
||||
cont.appendChild(b);
|
||||
});
|
||||
}
|
||||
// La capa activa pudo desaparecer: volver a MAPPING antes de quedarnos en
|
||||
// una vista sin contenido
|
||||
if (vistaActual.startsWith("capa:")
|
||||
&& !capas.some((s) => s.id === vistaActual.slice(5))) {
|
||||
setView("mapping");
|
||||
return;
|
||||
}
|
||||
$$(".tab").forEach((t) =>
|
||||
t.classList.toggle("active", t.dataset.view === vistaActual));
|
||||
}
|
||||
|
||||
$$(".tab[data-view]").forEach((t) =>
|
||||
t.addEventListener("click", () => setView(t.dataset.view)));
|
||||
|
||||
(function () {
|
||||
let saved = "motores";
|
||||
try { saved = localStorage.getItem("fosfeno.view") || "motores"; }
|
||||
catch (e) { /* almacenamiento no disponible */ }
|
||||
setView(saved);
|
||||
})();
|
||||
/* La vista guardada se restaura al FINAL del fichero (restaurarVista), no
|
||||
aqui: setView toca variables declaradas mas abajo con let, y llamarlo a
|
||||
estas alturas revienta con "Cannot access ... before initialization" —
|
||||
matando de paso el resto del script, socket incluido. */
|
||||
|
||||
// Sliders del mezclador VJ (se generan dinamicamente)
|
||||
const MIXER_SLIDERS = [
|
||||
|
|
@ -190,6 +139,364 @@ function openHelp(key) {
|
|||
|
||||
function closeHelp() { $("#modal").hidden = true; }
|
||||
|
||||
// ==========================================================================
|
||||
// Pastillas y destino
|
||||
// --------------------------------------------------------------------------
|
||||
// El panel se maneja con dos decisiones separadas, y esa separacion es lo que
|
||||
// lo hace usable en directo:
|
||||
//
|
||||
// DONDE -> la fila de destinos: la salida entera, o una capa del mapping.
|
||||
// QUE -> las pastillas (circulos): combinaciones guardadas por el usuario.
|
||||
//
|
||||
// Pinchar una pastilla la manda al destino que este elegido. Asi el mismo
|
||||
// gesto sirve para cambiar el visual de toda la pantalla o el de una zona
|
||||
// mapeada, sin cambiar de pestana ni de mentalidad.
|
||||
// ==========================================================================
|
||||
let destinoSel = "salida"; // "salida" | id de superficie
|
||||
let modoConfig = false; // configurando pastillas en vez de dispararlas
|
||||
let slotEditando = null; // id de la pastilla abierta en el editor
|
||||
|
||||
const SLOT_ETIQUETA = {
|
||||
butter: "MilkDrop", shader: "GLSL", video: "clip", camara: "camara",
|
||||
hydra: "codigo", mixer: "mezcla", "projectm-nativo": "nativo",
|
||||
};
|
||||
// Lo que solo tiene sentido a pantalla completa: son motores globales, no
|
||||
// fuentes que una capa pueda pintar por su cuenta.
|
||||
const SOLO_SALIDA = new Set(["hydra", "mixer", "projectm-nativo"]);
|
||||
|
||||
function slots() { return (state && state.slots) || []; }
|
||||
|
||||
function slotSub(sl) {
|
||||
if (sl.tipo === "butter" && sl.biblioteca === "projectm" && sl.milk) {
|
||||
return sl.milk.split("/").pop().replace(/\.milk$/i, "").slice(0, 12);
|
||||
}
|
||||
if (sl.tipo === "butter" && sl.preset) return sl.preset.slice(0, 12);
|
||||
if (sl.tipo === "video" && sl.archivo) return tituloClip(sl.archivo).slice(0, 12);
|
||||
if (sl.tipo === "shader" && sl.shader) return sl.shader.slice(0, 12);
|
||||
return SLOT_ETIQUETA[sl.tipo] || "";
|
||||
}
|
||||
|
||||
/* Que pastilla se corresponde con lo que hay ahora mismo en la salida, para
|
||||
poder marcarla. No siempre hay una: si tocas el preset a mano, ya no
|
||||
coincide con ninguna y no se marca ninguna, que es lo honesto. */
|
||||
function slotActivaEnSalida() {
|
||||
if (destinoSel !== "salida" || !state) return null;
|
||||
const e = state.engine;
|
||||
const cand = slots().filter((sl) => {
|
||||
if (sl.tipo === "projectm-nativo") return e === "projectm";
|
||||
if (sl.tipo === "hydra") return e === "hydra";
|
||||
if (sl.tipo === "mixer") return e === "mixer";
|
||||
if (sl.tipo === "shader") return e === "shaders";
|
||||
if (sl.tipo === "butter") return e === "butterchurn";
|
||||
return false;
|
||||
});
|
||||
if (cand.length === 1) return cand[0].id;
|
||||
// Varias del mismo motor: desempata el preset
|
||||
const exacto = cand.find((sl) => sl.tipo === "butter"
|
||||
&& sl.preset && sl.preset === (state.butterchurn || {}).preset);
|
||||
return exacto ? exacto.id : (cand.length ? cand[0].id : null);
|
||||
}
|
||||
|
||||
function renderSlots() {
|
||||
const cont = $("#slots");
|
||||
if (!cont) return;
|
||||
const lista = slots();
|
||||
const activa = slotActivaEnSalida();
|
||||
const sig = lista.map((s) => s.id + ":" + s.nombre + ":" + slotSub(s)).join("|")
|
||||
+ "|" + modoConfig + "|" + activa + "|" + slotEditando;
|
||||
if (cont.dataset.sig === sig) return;
|
||||
cont.dataset.sig = sig;
|
||||
cont.innerHTML = "";
|
||||
|
||||
lista.forEach((sl) => {
|
||||
const b = document.createElement("button");
|
||||
b.className = "engine";
|
||||
if (!modoConfig && sl.id === activa) b.classList.add("active");
|
||||
if (modoConfig && sl.id === slotEditando) b.classList.add("editando");
|
||||
b.innerHTML = "";
|
||||
const n = document.createElement("strong");
|
||||
n.textContent = sl.nombre || "?";
|
||||
const s = document.createElement("small");
|
||||
s.textContent = slotSub(sl);
|
||||
b.appendChild(n); b.appendChild(s);
|
||||
b.title = modoConfig ? "Configurar esta pastilla" : "Lanzar al destino elegido";
|
||||
b.addEventListener("click", () => {
|
||||
if (modoConfig) { abrirEditorSlot(sl.id); return; }
|
||||
dispararSlot(sl);
|
||||
});
|
||||
cont.appendChild(b);
|
||||
});
|
||||
|
||||
if (modoConfig) {
|
||||
const mas = document.createElement("button");
|
||||
mas.className = "engine nueva";
|
||||
mas.innerHTML = "<strong>+</strong><small>nueva</small>";
|
||||
mas.title = "Anadir una pastilla";
|
||||
mas.addEventListener("click", nuevaSlot);
|
||||
cont.appendChild(mas);
|
||||
}
|
||||
}
|
||||
|
||||
/* Lanza una pastilla al destino elegido. A la salida se traduce a motor; a
|
||||
una capa, a fuente de capa. Lo que no cabe en una capa se dice, en vez de
|
||||
no hacer nada y dejar al usuario pensando que ha fallado el toque. */
|
||||
function dispararSlot(sl) {
|
||||
if (destinoSel === "salida") {
|
||||
const ajustes = (engine, patch) =>
|
||||
socket.emit("update_settings", { engine: engine, patch: patch });
|
||||
|
||||
if (sl.tipo === "projectm-nativo") { socket.emit("set_engine", { engine: "projectm" }); return; }
|
||||
if (sl.tipo === "hydra") { socket.emit("set_engine", { engine: "hydra" }); return; }
|
||||
if (sl.tipo === "mixer") { socket.emit("set_engine", { engine: "mixer" }); return; }
|
||||
if (sl.tipo === "shader") {
|
||||
socket.emit("set_engine", { engine: "shaders" });
|
||||
const sh = shaderLib.find((x) => x.id === sl.shader);
|
||||
if (sh) socket.emit("run_code",
|
||||
{ engine: "shaders", code: sh.code, label: sh.name });
|
||||
return;
|
||||
}
|
||||
if (sl.tipo === "butter") {
|
||||
if (sl.biblioteca === "projectm" && sl.milk) {
|
||||
// La biblioteca .milk se traduce en el navegador, y eso solo pasa
|
||||
// dentro de una capa. A pantalla completa lo lanza projectM nativo,
|
||||
// que lee el .milk tal cual: mismo preset, otro motor.
|
||||
const p = sl.milk.split("/");
|
||||
socket.emit("set_engine", { engine: "projectm" });
|
||||
ajustes("projectm", { category: p[0], preset: p[1],
|
||||
variante: (p[2] || "").replace(/\.milk$/i, "") });
|
||||
return;
|
||||
}
|
||||
socket.emit("set_engine", { engine: "butterchurn" });
|
||||
if (sl.preset) ajustes("butterchurn", { preset: sl.preset, shuffle: false });
|
||||
return;
|
||||
}
|
||||
if (sl.tipo === "video" || sl.tipo === "camara") {
|
||||
socket.emit("set_engine", { engine: "mixer" });
|
||||
ajustes("mixer", sl.tipo === "video"
|
||||
? { source: "video", video: sl.archivo || "" }
|
||||
: { source: "cam", camOn: true, cameraId: sl.camaraId || 0 });
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Destino = una capa del mapping
|
||||
if (SOLO_SALIDA.has(sl.tipo)) {
|
||||
showNotif({ level: "warn", message: "\"" + (sl.nombre || "Esa pastilla")
|
||||
+ "\" solo puede ir a pantalla completa, no a una capa. "
|
||||
+ "Elige el destino SALIDA." });
|
||||
return;
|
||||
}
|
||||
const f = { tipo: sl.tipo };
|
||||
if (sl.tipo === "butter") {
|
||||
f.biblioteca = sl.biblioteca === "projectm" ? "projectm" : "butter";
|
||||
f.milk = sl.milk || "";
|
||||
f.preset = sl.preset || "";
|
||||
f.auto = false; f.segundos = 20; f.transicion = 2.5;
|
||||
} else if (sl.tipo === "shader") f.shader = sl.shader || "";
|
||||
else if (sl.tipo === "video") f.archivo = sl.archivo || "";
|
||||
else if (sl.tipo === "camara") f.camaraId = sl.camaraId || 0;
|
||||
patchCapa(destinoSel, { fuente: f });
|
||||
renderCapas(); renderPropiedades(); drawMapPreview();
|
||||
}
|
||||
|
||||
/* --- Destinos: salida entera o una capa --- */
|
||||
function renderDestinos() {
|
||||
const cont = $("#destinos");
|
||||
if (!cont) return;
|
||||
const capas = capasHoy();
|
||||
// El destino elegido pudo desaparecer (capa borrada desde otro movil)
|
||||
if (destinoSel !== "salida" && !capas.some((s) => s.id === destinoSel)) {
|
||||
destinoSel = "salida";
|
||||
}
|
||||
const sig = "salida|" + capas.map((s, i) => s.id + ":" + (s.nombre || i + 1)).join("|")
|
||||
+ "|" + destinoSel;
|
||||
if (cont.dataset.sig !== sig) {
|
||||
cont.dataset.sig = sig;
|
||||
cont.innerHTML = "";
|
||||
const mk = (id, txt, titulo) => {
|
||||
const b = document.createElement("button");
|
||||
b.className = "subtab" + (destinoSel === id ? " active" : "");
|
||||
b.textContent = txt;
|
||||
b.title = titulo;
|
||||
b.addEventListener("click", () => { destinoSel = id; renderTodo(); });
|
||||
cont.appendChild(b);
|
||||
return b;
|
||||
};
|
||||
mk("salida", "SALIDA", "Lo que se ve en el proyector, a pantalla completa");
|
||||
capas.forEach((s, i) =>
|
||||
mk(s.id, (s.nombre || "CAPA " + (i + 1)).toUpperCase(),
|
||||
"Una zona del mapping"));
|
||||
const mas = document.createElement("button");
|
||||
mas.className = "subtab nueva";
|
||||
mas.textContent = "+";
|
||||
mas.title = "Crear una capa nueva";
|
||||
mas.addEventListener("click", () => {
|
||||
const id = nuevaCapa();
|
||||
destinoSel = id;
|
||||
renderCapas(); renderTodo();
|
||||
});
|
||||
cont.appendChild(mas);
|
||||
}
|
||||
|
||||
const hint = $("#destino-hint");
|
||||
if (hint) {
|
||||
hint.textContent = destinoSel === "salida"
|
||||
? "Las pastillas cambian lo que se ve en todo el proyector."
|
||||
: "Las pastillas cambian solo esta capa. El resto sigue igual.";
|
||||
}
|
||||
if (destinoSel !== "salida") mapSel = { type: "surface", id: destinoSel };
|
||||
colocarPropiedades();
|
||||
}
|
||||
|
||||
/* La tarjeta de propiedades de capa es UNA sola en todo el panel: vive en
|
||||
MAPPING y MOTORES se la lleva prestada cuando el destino es una capa. Se
|
||||
mueve en vez de duplicarla para no acabar con dos formularios que hay que
|
||||
mantener a la vez (y que se desincronizan a la primera). */
|
||||
function colocarPropiedades() {
|
||||
const card = $("#card-propiedades");
|
||||
const hueco = $("#destino-props");
|
||||
if (!card || !hueco) return;
|
||||
const enMotores = document.body.dataset.view === "motores"
|
||||
&& destinoSel !== "salida";
|
||||
if (enMotores && card.parentElement !== hueco) {
|
||||
hueco.appendChild(card);
|
||||
} else if (!enMotores && card.parentElement === hueco) {
|
||||
const col = $("#card-capas");
|
||||
if (col && col.parentElement) col.parentElement.insertBefore(card, col.nextSibling);
|
||||
}
|
||||
hueco.hidden = !enMotores;
|
||||
}
|
||||
|
||||
function renderTodo() {
|
||||
renderSlots(); renderDestinos(); renderPropiedades(); drawMapPreview();
|
||||
}
|
||||
|
||||
/* --- Configurar pastillas --- */
|
||||
$("#slots-config").addEventListener("click", () => {
|
||||
modoConfig = !modoConfig;
|
||||
if (!modoConfig) slotEditando = null;
|
||||
$("#slots-config").textContent = modoConfig
|
||||
? "Listo (volver a lanzar)" : "Configurar pastillas";
|
||||
$("#slots-config").classList.toggle("accent", modoConfig);
|
||||
$("#slot-editor").hidden = !modoConfig || !slotEditando;
|
||||
renderSlots();
|
||||
});
|
||||
|
||||
function nuevaSlot() {
|
||||
const sl = { id: "sl" + Date.now() + "_" + Math.floor(Math.random() * 1e4),
|
||||
nombre: "NUEVA", tipo: "butter", biblioteca: "butter", preset: "" };
|
||||
socket.emit("set_slots", { slots: slots().concat([sl]) });
|
||||
slotEditando = sl.id;
|
||||
$("#slot-editor").hidden = false;
|
||||
}
|
||||
|
||||
function abrirEditorSlot(id) {
|
||||
slotEditando = (slotEditando === id) ? null : id;
|
||||
$("#slot-editor").hidden = !slotEditando;
|
||||
renderSlots();
|
||||
if (slotEditando) renderEditorSlot();
|
||||
}
|
||||
|
||||
function slotActual() { return slots().find((s) => s.id === slotEditando) || null; }
|
||||
|
||||
function guardarSlot(cambios) {
|
||||
const nuevas = slots().map((s) =>
|
||||
s.id === slotEditando ? Object.assign({}, s, cambios) : s);
|
||||
socket.emit("set_slots", { slots: nuevas });
|
||||
}
|
||||
|
||||
function renderEditorSlot() {
|
||||
const sl = slotActual();
|
||||
if (!sl) { $("#slot-editor").hidden = true; return; }
|
||||
if (document.activeElement !== $("#slot-nombre")) {
|
||||
$("#slot-nombre").value = sl.nombre || "";
|
||||
}
|
||||
$("#slot-tipo").value = sl.tipo;
|
||||
$$(".slot-op").forEach((el) => { el.hidden = true; });
|
||||
const bloque = $("#sop-" + (sl.tipo === "camara" ? "" : sl.tipo));
|
||||
if (bloque) bloque.hidden = false;
|
||||
|
||||
if (sl.tipo === "butter") {
|
||||
const esMilk = sl.biblioteca === "projectm";
|
||||
$("#slot-biblioteca").value = esMilk ? "projectm" : "butter";
|
||||
$("#sop-milk").hidden = !esMilk;
|
||||
$("#slot-preset").hidden = esMilk;
|
||||
fillSelectOnce($("#slot-preset"), state.meta.butterchurnPresets, (n) => n, (n) => n);
|
||||
$("#slot-preset").value = sl.preset || "";
|
||||
if (esMilk) {
|
||||
const lib = (state.meta && state.meta.projectmPresets) || {};
|
||||
const p = partesMilk(sl.milk);
|
||||
rellena($("#slot-milk-cat"), Object.keys(lib), "-- categoria --");
|
||||
$("#slot-milk-cat").value = p.cat;
|
||||
rellena($("#slot-milk-vis"), p.cat ? (lib[p.cat] || []) : [], "-- visual --");
|
||||
$("#slot-milk-vis").value = p.vis;
|
||||
const vs = $("#slot-milk-var");
|
||||
const sig = p.cat + "|" + p.vis;
|
||||
if (vs.dataset.pedido !== sig) {
|
||||
vs.dataset.pedido = sig;
|
||||
rellena(vs, [], "-- variante --");
|
||||
if (p.cat && p.vis) {
|
||||
fetch("/pm/variantes?categoria=" + encodeURIComponent(p.cat)
|
||||
+ "&visual=" + encodeURIComponent(p.vis))
|
||||
.then((r) => r.json())
|
||||
.then((d) => {
|
||||
if (vs.dataset.pedido !== sig) return;
|
||||
vs.dataset.sig = "";
|
||||
rellena(vs, d.variantes || [], "-- variante --");
|
||||
vs.value = partesMilk((slotActual() || {}).milk).vari;
|
||||
}).catch(() => {});
|
||||
}
|
||||
} else if (document.activeElement !== vs) vs.value = p.vari;
|
||||
}
|
||||
} else if (sl.tipo === "shader") {
|
||||
fillSelectOnce($("#slot-shader"), shaderLib, (x) => x.id, (x) => x.name);
|
||||
$("#slot-shader").value = sl.shader || "";
|
||||
} else if (sl.tipo === "video") {
|
||||
fillClipSelect($("#slot-video"));
|
||||
$("#slot-video").value = sl.archivo || "";
|
||||
}
|
||||
}
|
||||
|
||||
$("#slot-nombre").addEventListener("input", (e) =>
|
||||
guardarSlot({ nombre: e.target.value.toUpperCase().slice(0, 12) }));
|
||||
$("#slot-tipo").addEventListener("change", (e) => {
|
||||
const t = e.target.value;
|
||||
const base = { tipo: t };
|
||||
if (t === "butter") { base.biblioteca = "butter"; base.preset = ""; base.milk = ""; }
|
||||
if (t === "shader") base.shader = shaderLib.length ? shaderLib[0].id : "";
|
||||
if (t === "video") {
|
||||
const vs = (state.meta && state.meta.videos) || [];
|
||||
base.archivo = vs.length ? vs[0] : "";
|
||||
}
|
||||
guardarSlot(base);
|
||||
});
|
||||
$("#slot-biblioteca").addEventListener("change", (e) =>
|
||||
guardarSlot({ biblioteca: e.target.value }));
|
||||
$("#slot-preset").addEventListener("change", (e) =>
|
||||
guardarSlot({ preset: e.target.value }));
|
||||
$("#slot-shader").addEventListener("change", (e) =>
|
||||
guardarSlot({ shader: e.target.value }));
|
||||
$("#slot-video").addEventListener("change", (e) =>
|
||||
guardarSlot({ archivo: e.target.value }));
|
||||
$("#slot-milk-cat").addEventListener("change", (e) =>
|
||||
guardarSlot({ milk: e.target.value ? e.target.value + "/" : "" }));
|
||||
$("#slot-milk-vis").addEventListener("change", (e) =>
|
||||
guardarSlot({ milk: $("#slot-milk-cat").value + "/" + e.target.value + "/" }));
|
||||
$("#slot-milk-var").addEventListener("change", (e) =>
|
||||
guardarSlot({ milk: $("#slot-milk-cat").value + "/" + $("#slot-milk-vis").value
|
||||
+ "/" + e.target.value + ".milk" }));
|
||||
$("#slot-borrar").addEventListener("click", () => {
|
||||
socket.emit("set_slots", { slots: slots().filter((s) => s.id !== slotEditando) });
|
||||
slotEditando = null;
|
||||
$("#slot-editor").hidden = true;
|
||||
});
|
||||
$("#slot-listo").addEventListener("click", () => {
|
||||
slotEditando = null;
|
||||
$("#slot-editor").hidden = true;
|
||||
renderSlots();
|
||||
});
|
||||
|
||||
// ==========================================================================
|
||||
// Avisos (banda superior)
|
||||
// ==========================================================================
|
||||
|
|
@ -252,8 +559,9 @@ function render() {
|
|||
power.textContent = state.power ? "ON" : "OFF";
|
||||
power.classList.toggle("off", !state.power);
|
||||
|
||||
$$(".engine").forEach((b) =>
|
||||
b.classList.toggle("active", b.dataset.engine === state.engine));
|
||||
renderSlots();
|
||||
renderDestinos();
|
||||
if (slotEditando) renderEditorSlot();
|
||||
|
||||
fillSelectOnce($("#audio-device"), state.meta.audioDevices,
|
||||
(d) => d.id, (d) => d.name);
|
||||
|
|
@ -1090,7 +1398,6 @@ function renderMapping() {
|
|||
}
|
||||
drawMapPreview();
|
||||
renderCapas();
|
||||
renderTabsCapas();
|
||||
renderPropiedades();
|
||||
}
|
||||
|
||||
|
|
@ -1105,10 +1412,8 @@ $("#map-enabled").addEventListener("change", (e) =>
|
|||
socket.emit("set_mapping", { enabled: e.target.checked }));
|
||||
$("#map-edit").addEventListener("change", (e) =>
|
||||
socket.emit("set_mapping", { edit: e.target.checked }));
|
||||
/* Capa nueva: cae escalonada para que dos seguidas no se solapen del todo,
|
||||
y queda seleccionada para poder elegir su fuente al momento. */
|
||||
/* Crea una capa y devuelve su id. Cae escalonada para que dos seguidas no se
|
||||
solapen del todo. */
|
||||
solapen del todo, y queda seleccionada para elegirle fuente al momento. */
|
||||
function nuevaCapa() {
|
||||
const n = mapSurfaces.length;
|
||||
const s = 0.18;
|
||||
|
|
@ -1128,16 +1433,7 @@ function nuevaCapa() {
|
|||
|
||||
$("#map-add").addEventListener("click", () => {
|
||||
nuevaCapa();
|
||||
renderCapas(); renderTabsCapas(); renderPropiedades(); drawMapPreview();
|
||||
});
|
||||
|
||||
/* "+ CAPA" de la barra de arriba: crea la capa y te deja YA dentro de su
|
||||
pestana, que es lo que hace que trabajar con varias capas no sea un
|
||||
suplicio de ir y volver a MAPPING. */
|
||||
$("#tab-nueva-capa").addEventListener("click", () => {
|
||||
const id = nuevaCapa();
|
||||
renderCapas(); renderTabsCapas();
|
||||
setView("capa:" + id);
|
||||
renderCapas(); renderDestinos(); renderPropiedades(); drawMapPreview();
|
||||
});
|
||||
$("#map-add-mask").addEventListener("click", () => {
|
||||
const s = 0.15, cx = 0.5, cy = 0.5;
|
||||
|
|
@ -1648,4 +1944,16 @@ socket.on("disconnect", () => { $("#conn").className = "dot off"; });
|
|||
// Arranque
|
||||
// ==========================================================================
|
||||
buildMixerSliders();
|
||||
|
||||
/* Restaurar la vista va AQUI, con el fichero ya entero: setView toca
|
||||
variables declaradas con let a lo largo del modulo, y llamarlo antes las
|
||||
pilla sin inicializar (ReferenceError que ademas se lleva por delante el
|
||||
resto del script, socket incluido, y el panel se queda en blanco). */
|
||||
(function restaurarVista() {
|
||||
let saved = "motores";
|
||||
try { saved = localStorage.getItem("fosfeno.view") || "motores"; }
|
||||
catch (e) { /* almacenamiento no disponible */ }
|
||||
setView(saved);
|
||||
})();
|
||||
|
||||
loadData();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue