Ayra OSO 1612 DMX Scanmaster Controller Replica

Ayra OSO 1612 DMX Scanmaster Controller (Replica)

Fader 1
0

Fader 2
0

Fader 3
0

Fader 4
0

Fader 5
0

Fader 6
0

Fader 7
0

Fader 8
0

Bank: 1

Mode: Manual Scene: None

body { font-family: Arial, sans-serif; background: #222; color: #eee; margin: 0; padding: 0; } #controller { background: #333; border-radius: 12px; max-width: 700px; margin: 32px auto; padding: 24px; box-shadow: 0 4px 24px #000a; } h1 { text-align: center; margin-bottom: 24px; color: #ffb300; letter-spacing: 1px; } .faders { display: flex; justify-content: space-between; margin-bottom: 24px; gap: 8px; } .fader-group { display: flex; flex-direction: column; align-items: center; background: #222; border-radius: 8px; padding: 8px; min-width: 60px; } .fader { writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 30px; height: 120px; margin: 8px 0; background: #444; border-radius: 4px; } .fader-value { font-size: 1.1em; color: #ffb300; margin-top: 4px; } .controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; } .scene-btn { background: #444; color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-size: 1em; cursor: pointer; transition: background 0.2s; } .scene-btn.active, .scene-btn:active { background: #ffb300; color: #222; } .bank-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; } .bank-controls button { background: #444; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 1em; cursor: pointer; transition: background 0.2s; } .bank-controls button:active { background: #ffb300; color: #222; } #bank-display { font-size: 1.1em; color: #ffb300; } .mode-controls { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; } .mode-controls button { background: #444; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 1em; cursor: pointer; transition: background 0.2s; } .mode-controls button.active, .mode-controls button:active { background: #ffb300; color: #222; } .info { display: flex; justify-content: space-between; margin-top: 18px; font-size: 1.1em; color: #ffb300; background: #222; border-radius: 6px; padding: 8px 16px; } @media (max-width: 800px) { #controller { max-width: 98vw; padding: 8px; } .faders { flex-wrap: wrap; gap: 4px; } .fader-group { min-width: 40px; padding: 4px; } } // Ayra OSO 1612 DMX Scanmaster Controller Replica Logic // State const NUM_FADERS = 8; const NUM_SCENES = 12; const NUM_BANKS = 30; let currentBank = 1; let currentScene = null; let mode = "Manual"; // "Manual", "Auto", "Music" let blackout = false; // Scenes: [bank][scene][fader] const scenes = Array.from({ length: NUM_BANKS }, () => Array.from({ length: NUM_SCENES }, () => Array(NUM_FADERS).fill(0) ) ); // DOM Elements const faders = Array.from(document.querySelectorAll('.fader')); const faderValues = Array.from({ length: NUM_FADERS }, (_, i) => document.getElementById(`fader-value-${i + 1}`) ); const sceneBtns = Array.from(document.querySelectorAll('.scene-btn')); const bankDisplay = document.getElementById('bank-display'); const modeDisplay = document.getElementById('mode-display'); const sceneDisplay = document.getElementById('scene-display'); const bankUpBtn = document.getElementById('bank-up'); const bankDownBtn = document.getElementById('bank-down'); const autoModeBtn = document.getElementById('auto-mode'); const musicModeBtn = document.getElementById('music-mode'); const manualModeBtn = document.getElementById('manual-mode'); const blackoutBtn = document.getElementById('blackout'); // Helper: Update Fader UI function updateFaderUI() { faders.forEach((fader, i) => { faderValues[i].textContent = fader.value; }); } // Helper: Update Mode UI function updateModeUI() { modeDisplay.textContent = `Mode: ${mode}`; autoModeBtn.classList.toggle('active', mode === "Auto"); musicModeBtn.classList.toggle('active', mode === "Music"); manualModeBtn.classList.toggle('active', mode === "Manual"); } // Helper: Update Scene UI function updateSceneUI() { sceneBtns.forEach((btn, i) => { btn.classList.toggle('active', currentScene === i + 1); }); sceneDisplay.textContent = `Scene: ${currentScene ? currentScene : "None"}`; } // Helper: Update Bank UI function updateBankUI() { bankDisplay.textContent = `Bank: ${currentBank}`; } // Helper: Apply Scene to Faders function applyScene(bank, scene) { if (bank < 1 || bank > NUM_BANKS || scene < 1 || scene > NUM_SCENES) return; const values = scenes[bank - 1][scene - 1]; faders.forEach((fader, i) => { fader.value = values[i]; faderValues[i].textContent = values[i]; }); } // Helper: Save Faders to Scene function saveScene(bank, scene) { if (bank < 1 || bank > NUM_BANKS || scene < 1 || scene > NUM_SCENES) return; scenes[bank - 1][scene - 1] = faders.map(f => Number(f.value)); } // Fader Change Handler faders.forEach((fader, i) => { fader.addEventListener('input', () => { faderValues[i].textContent = fader.value; if (currentScene) { saveScene(currentBank, currentScene); } }); }); // Scene Button Handler sceneBtns.forEach((btn, i) => { btn.addEventListener('click', () => { if (currentScene === i + 1) { // Save current fader values to scene saveScene(currentBank, currentScene); currentScene = null; } else { // Save previous scene if any if (currentScene) saveScene(currentBank, currentScene); currentScene = i + 1; applyScene(currentBank, currentScene); } updateSceneUI(); }); }); // Bank Controls bankUpBtn.addEventListener('click', () => { if (currentBank < NUM_BANKS) { if (currentScene) saveScene(currentBank, currentScene); currentBank++; if (currentScene) applyScene(currentBank, currentScene); updateBankUI(); } }); bankDownBtn.addEventListener('click', () => { if (currentBank > 1) { if (currentScene) saveScene(currentBank, currentScene); currentBank--; if (currentScene) applyScene(currentBank, currentScene); updateBankUI(); } }); // Mode Controls autoModeBtn.addEventListener('click', () => { mode = "Auto"; updateModeUI(); }); musicModeBtn.addEventListener('click', () => { mode = "Music"; updateModeUI(); }); manualModeBtn.addEventListener('click', () => { mode = "Manual"; updateModeUI(); }); // Blackout blackoutBtn.addEventListener('click', () => { blackout = !blackout; if (blackout) { faders.forEach((fader, i) => { fader.value = 0; faderValues[i].textContent = 0; }); blackoutBtn.classList.add('active'); } else { if (currentScene) applyScene(currentBank, currentScene); blackoutBtn.classList.remove('active'); } }); // Auto Mode: Step through scenes let autoInterval = null; function startAutoMode() { if (autoInterval) clearInterval(autoInterval); let sceneIdx = 0; autoInterval = setInterval(() => { if (mode !== "Auto" || blackout) { clearInterval(autoInterval); return; } currentScene = (sceneIdx % NUM_SCENES) + 1; applyScene(currentBank, currentScene); updateSceneUI(); sceneIdx++; }, 1200); } // Music Mode: Simulate beat detection let musicInterval = null; function startMusicMode() { if (musicInterval) clearInterval(musicInterval); let sceneIdx = 0; musicInterval = setInterval(() => { if (mode !== "Music" || blackout) { clearInterval(musicInterval); return; } currentScene = (sceneIdx % NUM_SCENES) + 1; applyScene(currentBank, currentScene); updateSceneUI(); sceneIdx++; }, 700 + Math.random() * 400); } // Watch for mode changes setInterval(() => { if (mode === "Auto") { if (!autoInterval) startAutoMode(); } else { if (autoInterval) { clearInterval(autoInterval); autoInterval = null; } } if (mode === "Music") { if (!musicInterval) startMusicMode(); } else { if (musicInterval) { clearInterval(musicInterval); musicInterval = null; } } }, 200); // Initial UI updateFaderUI(); updateModeUI(); updateSceneUI(); updateBankUI();