192 Channel DMX Scanmaster Controller Replica

Fixture:

DMX Output (First 32 Channels)

body { font-family: Arial, sans-serif; background: #222; color: #eee; margin: 0; padding: 0; } #controller { max-width: 900px; margin: 30px auto; background: #333; border-radius: 10px; padding: 24px; box-shadow: 0 4px 24px #000a; } #fixtures { margin-bottom: 20px; } #channels { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .channel-slider { background: #222; border-radius: 8px; padding: 10px; width: 110px; text-align: center; box-shadow: 0 2px 8px #0005; } .channel-slider label { display: block; margin-bottom: 6px; font-size: 14px; } .channel-slider input[type="range"] { width: 100%; accent-color: #0af; } .channel-slider .value { font-size: 13px; color: #0af; margin-top: 2px; } #scene-controls { margin-bottom: 24px; } #scene-controls button { margin-right: 10px; background: #0af; color: #fff; border: none; border-radius: 5px; padding: 8px 16px; cursor: pointer; font-size: 15px; transition: background 0.2s; } #scene-controls button:hover { background: #08c; } #output { background: #222; border-radius: 8px; padding: 12px; margin-top: 20px; } #dmx-output { font-family: monospace; font-size: 15px; color: #0af; margin: 0; } // --- DMX Controller Logic --- // 192 channels, 12 fixtures, 16 channels per fixture const DMX_CHANNELS = 192; const FIXTURE_COUNT = 12; const CHANNELS_PER_FIXTURE = 16; // State let dmx = new Array(DMX_CHANNELS).fill(0); let currentFixture = 0; let scenes = []; // DOM Elements const fixtureSelect = document.getElementById('fixture-select'); const channelsDiv = document.getElementById('channels'); const dmxOutput = document.getElementById('dmx-output'); const saveSceneBtn = document.getElementById('save-scene'); const loadSceneBtn = document.getElementById('load-scene'); const exportSceneBtn = document.getElementById('export-scene'); const sceneFileInput = document.getElementById('scene-file'); // --- UI Setup --- function populateFixtureSelect() { for (let i = 0; i < FIXTURE_COUNT; i++) { const opt = document.createElement('option'); opt.value = i; opt.textContent = `Fixture ${i + 1} (Ch ${i * CHANNELS_PER_FIXTURE + 1}-${(i + 1) * CHANNELS_PER_FIXTURE})`; fixtureSelect.appendChild(opt); } } function renderChannels() { channelsDiv.innerHTML = ''; const start = currentFixture * CHANNELS_PER_FIXTURE; for (let i = 0; i < CHANNELS_PER_FIXTURE; i++) { const ch = start + i; const wrapper = document.createElement('div'); wrapper.className = 'channel-slider'; const label = document.createElement('label'); label.textContent = `Ch ${ch + 1}`; const slider = document.createElement('input'); slider.type = 'range'; slider.min = 0; slider.max = 255; slider.value = dmx[ch]; slider.dataset.ch = ch; const value = document.createElement('div'); value.className = 'value'; value.textContent = dmx[ch]; slider.addEventListener('input', (e) => { dmx[ch] = Number(e.target.value); value.textContent = e.target.value; updateDMXOutput(); }); wrapper.appendChild(label); wrapper.appendChild(slider); wrapper.appendChild(value); channelsDiv.appendChild(wrapper); } } function updateDMXOutput() { // Show first 32 channels for demo let out = ''; for (let i = 0; i < 32; i++) { out += dmx[i].toString().padStart(3, ' ') + ((i + 1) % 8 === 0 ? '\n' : ' '); } dmxOutput.textContent = out.trim(); } // --- Scene Management --- function saveScene() { const scene = { dmx: [...dmx], timestamp: Date.now() }; scenes.push(scene); alert('Scene saved! (In-memory only. Use Export to save to file.)'); } function loadSceneFromFile(file) { const reader = new FileReader(); reader.onload = function(e) { try { const data = JSON.parse(e.target.result); if (Array.isArray(data.dmx) && data.dmx.length === DMX_CHANNELS) { dmx = [...data.dmx]; renderChannels(); updateDMXOutput(); alert('Scene loaded!'); } else { alert('Invalid scene file.'); } } catch { alert('Invalid scene file.'); } }; reader.readAsText(file); } function exportScene() { if (scenes.length === 0) { alert('No scenes to export. Save a scene first.'); return; } const blob = new Blob([JSON.stringify(scenes[scenes.length - 1], null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `dmx_scene_${Date.now()}.json`; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100); } // --- Event Listeners --- fixtureSelect.addEventListener('change', (e) => { currentFixture = Number(e.target.value); renderChannels(); }); saveSceneBtn.addEventListener('click', saveScene); loadSceneBtn.addEventListener('click', () => { sceneFileInput.value = ''; sceneFileInput.click(); }); sceneFileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) { loadSceneFromFile(e.target.files[0]); } }); exportSceneBtn.addEventListener('click', exportScene); // --- Init --- populateFixtureSelect(); renderChannels(); updateDMXOutput();