Okay, I can help you create a visual replica of the Ayra OSO 1612 DMX Scanmaster Controller interface using HTML, CSS, and JavaScript. This will simulate the look and feel of the controller, but it won't be able to send actual DMX signals to control lighting fixtures due to the limitations of the browser environment. DMX Controller Replica

Ayra OSO 1612 DMX Scanmaster

MODE: PROGRAM

SCENE: 1

CHASE: 1

BANK: 1

SCANNERS

SCENES

CHANNEL FADERS

1 0

2 0

3 0

4 0

5 0

6 0

7 0

8 0

CONTROLS

body { font-family: sans-serif; background-color: #222; color: #eee; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; } .controller { background-color: #444; border: 2px solid #666; border-radius: 10px; padding: 20px; width: 95%; max-width: 1000px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } .controller-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #666; padding-bottom: 15px; margin-bottom: 20px; } .controller-header h1 { margin: 0; font-size: 1.5em; color: #ffcc00; /* Yellowish color like some controllers */ } .display { background-color: #1a1a1a; border: 1px solid #333; border-radius: 5px; padding: 5px 10px; font-family: 'Courier New', Courier, monospace; color: #0f0; /* Green LED color */ display: flex; gap: 15px; font-size: 0.9em; } .display-segment span { font-weight: bold; } .controller-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } section { background-color: #3a3a3a; padding: 15px; border-radius: 8px; border: 1px solid #555; } section h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; color: #ccc; text-align: center; border-bottom: 1px solid #555; padding-bottom: 5px; } .button-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } button { background-color: #555; color: #eee; border: 1px solid #777; border-radius: 4px; padding: 8px 5px; font-size: 0.8em; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; min-height: 35px; /* Ensure buttons have some height */ display: flex; justify-content: center; align-items: center; text-align: center; } button:hover { background-color: #666; } button:active, button.active { background-color: #ff8c00; /* Orange for active state */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); color: #fff; } #blackout-btn.active { background-color: #f00; /* Red for blackout */ color: #fff; } .faders-section { grid-column: span 2; /* Make faders section wider if possible */ } .faders-container { display: flex; justify-content: space-around; align-items: flex-end; /* Align faders at the bottom */ padding: 10px 0; min-height: 200px; /* Give space for vertical faders */ } .fader-group { display: flex; flex-direction: column; align-items: center; gap: 5px; } .fader-group label { font-size: 0.8em; margin-bottom: 5px; } .fader-group output { font-size: 0.8em; background-color: #2a2a2a; padding: 2px 5px; border-radius: 3px; min-width: 25px; text-align: center; } /* Style vertical range inputs */ input[type="range"][orient="vertical"] { writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ appearance: slider-vertical; /* Standard */ width: 8px; height: 150px; padding: 0 5px; cursor: pointer; } .controls-section { grid-column: span 2; /* Make controls section wider */ } .control-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; } .bank-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 15px; } .bank-buttons button { padding: 10px 20px; font-size: 1em; } /* Basic responsiveness */ @media (max-width: 768px) { .controller-header { flex-direction: column; align-items: flex-start; gap: 10px; } .display { flex-wrap: wrap; font-size: 0.8em; } .controller-main { grid-template-columns: 1fr; /* Stack sections vertically */ } .faders-section, .controls-section { grid-column: span 1; /* Reset span on smaller screens */ } .faders-container { flex-wrap: wrap; /* Allow faders to wrap */ justify-content: center; min-height: auto; } input[type="range"][orient="vertical"] { height: 120px; /* Shorter faders on mobile */ } .control-buttons { grid-template-columns: repeat(3, 1fr); /* Adjust grid for controls */ } } @media (max-width: 480px) { .button-grid { grid-template-columns: repeat(3, 1fr); /* Fewer columns for buttons */ } .control-buttons { grid-template-columns: repeat(2, 1fr); /* Fewer columns for controls */ } .controller-header h1 { font-size: 1.2em; } } document.addEventListener('DOMContentLoaded', () => { const faders = document.querySelectorAll('.fader'); const scannerButtons = document.querySelectorAll('.scanner-btn'); const sceneButtons = document.querySelectorAll('.scene-btn'); const controlButtons = document.querySelectorAll('.controls-section button'); // Select all buttons in controls const blackoutButton = document.getElementById('blackout-btn'); const pageSelectButton = document.getElementById('page-select-btn'); let isBlackout = false; let isPageB = false; // Page A is default // Update fader value display faders.forEach(fader => { const output = fader.parentElement.querySelector('output'); output.textContent = fader.value; // Initial value fader.addEventListener('input', (event) => { output.textContent = event.target.value; // In a real scenario, you'd send DMX data here based on the fader value console.log(`Fader ${fader.id} changed to: ${event.target.value}`); }); }); // --- Button Click Handlers --- // Scanner Buttons (allow multiple selections) scannerButtons.forEach(button => { button.addEventListener('click', () => { button.classList.toggle('active'); const scannerId = button.dataset.scanner; const isActive = button.classList.contains('active'); console.log(`Scanner ${scannerId} ${isActive ? 'selected' : 'deselected'}`); // Update display or internal state if needed }); }); // Scene Buttons (only one active at a time) sceneButtons.forEach(button => { button.addEventListener('click', () => { // Deactivate other scene buttons sceneButtons.forEach(btn => btn.classList.remove('active')); // Activate clicked button button.classList.add('active'); const sceneId = button.dataset.scene; document.getElementById('scene-display').textContent = sceneId; console.log(`Scene ${sceneId} selected`); // Load scene data / trigger scene playback here }); }); // Blackout Button blackoutButton.addEventListener('click', () => { isBlackout = !isBlackout; blackoutButton.classList.toggle('active', isBlackout); document.body.style.opacity = isBlackout ? '0.5' : '1'; // Visual feedback console.log(`Blackout ${isBlackout ? 'ON' : 'OFF'}`); // Send blackout command or zero all channels here }); // Page Select Button (A/B for faders) pageSelectButton.addEventListener('click', () => { isPageB = !isPageB; pageSelectButton.classList.toggle('active', isPageB); const page = isPageB ? 'B' : 'A'; pageSelectButton.textContent = `PAGE SELECT ${page}`; console.log(`Switched to Page ${page}`); // Update fader labels/mapping if necessary (channels 9-16 for Page B) faders.forEach((fader, index) => { const label = fader.parentElement.querySelector('label'); const channel = isPageB ? index + 9 : index + 1; label.textContent = channel; // You might want to store/retrieve separate values for Page A and B faders // For now, just log the conceptual channel number console.log(`Fader ${fader.id} now controls channel ${channel}`); }); }); // Generic handler for other control buttons (just log for now) controlButtons.forEach(button => { // Avoid re-adding listeners to buttons already handled if (button.id !== 'blackout-btn' && button.id !== 'page-select-btn') { button.addEventListener('click', () => { // Simple toggle visual for most buttons, can be refined if (!['bank-up-btn', 'bank-down-btn'].includes(button.id)) { // Don't toggle bank buttons button.classList.toggle('active'); } console.log(`Control button clicked: ${button.textContent.trim()}`); // Implement specific logic for each button (Program, Auto, MIDI, Bank Up/Down etc.) if (button.id === 'bank-up-btn' || button.id === 'bank-down-btn') { updateBank(button.id === 'bank-up-btn'); } }); } }); // --- Helper Functions --- function updateBank(increment) { const bankDisplay = document.getElementById('bank-display'); let currentBank = parseInt(bankDisplay.textContent, 10); if (increment) { currentBank = currentBank >= 30 ? 1 : currentBank + 1; // Assuming 30 banks, wrap around } else { currentBank = currentBank <= 1 ? 30 : currentBank - 1; // Wrap around } bankDisplay.textContent = currentBank; console.log(`Bank changed to: ${currentBank}`); // Load scenes/chases for the new bank here } // --- Initial State --- // Activate Scene 1 by default const defaultScene = document.querySelector('.scene-btn[data-scene="1"]'); if (defaultScene) { defaultScene.classList.add('active'); } console.log("DMX Controller UI Initialized"); }); This sets up the basic HTML structure, CSS styling to mimic the controller's appearance, and some initial JavaScript for basic interactivity like fader value display and button clicks (logging actions to the console). You can view this in the preview window.