Web app to program DMX light using an Arduino Uno as a DMX controller and a Node.js server to manage the DMX data and communication.
- Multi-track interface - 4 dedicated tracks (Pan, Tilt, Gobo, Control) with real-time value preview
- Keyframe animation - Add, delete, select, move and edit keyframes with precision
- Advanced editing - Copy/paste keyframes between tracks and time positions
- Auto Analyze - Intelligent keyframe generation based on audio tempo and BPM analysis
- Flexible zoom - Timeline zoom controls for precise frame-by-frame editing
- Live preview - Real-time playback with instant DMX output
- Live mode - Direct control of DMX fixtures while editing
- Export the timeline as a JSON file for later use or sharing.
- Import a previously exported JSON file to continue editing or use it as a template.
Browser (editor.html) <-> Socket.io <-> o <-> Node.js server <-> Serial Port <-> t <-> Arduino Uno <-> MAX485 <-> 5 <-> DMX Light
Data Flow:
- User interacts with web interface
- Commands sent via WebSocket to Node.js server
- Server processes and forwards to Arduino via serial
- Arduino converts to DMX512 signal via MAX485
- DMX fixture receives and executes commands
- Arduino Uno
- MAX485 RS-485 Transceiver
- DMX Light
- XLR cable
| MAX485 | Connection |
|---|---|
| RO | Arduino Pin 2 |
| DI | Arduino Pin 3 |
| DE, RE | Arduino Pin 4 |
| A | DMX+ (pin 3 XLR) |
| B | DMX- (pin 2 XLR) |
| GND | GND (pin 1 XLR) |
| Ch | Function | Note |
|---|---|---|
| 1 | Pan | 0–255 |
| 2 | Tilt | 0–255 |
| 3 | Gobos | See channels.md for mapping |
| 4 | Lampada | 8–247 on, 0–7 off, 248–255 reset |
- Open
dmx-controller/dmx-controller.inoin the Arduino IDE. - Install the
DmxSimplelibrary - Upload the sketch to your Arduino Uno.
pnpm install
pnpm starttThe server will start on http://localhost:3000.
Remember to edit ARDUINO_PORT in server.js to match your Arduino's serial port.
- Connect your arduino to your computer and the DMX light to the MAX485.
- Start the Node.js server with
pnpm start. - Open
http://localhost:3000in your web browser to access the DMX Editor. - Load a file or create your own timeline using the editor interface.
- Play it live
![Note] On macOS, use
Cmd(⌘) instead ofCtrlfor all shortcuts.
| Shortcut | Action | Description |
|---|---|---|
Space |
Play/Pause | Toggle timeline playback |
W |
Rewind | Reset playhead to start (0:00) |
| Shortcut | Action | Description |
|---|---|---|
K |
Add Keyframe | Create keyframe at current playhead position |
Delete / Backspace |
Delete | Remove selected keyframe(s) |
Ctrl/Cmd + D |
Duplicate | Duplicate selected keyframe(s) |
| Shortcut | Action | Description |
|---|---|---|
Ctrl/Cmd + A |
Select All | Select all keyframes across all tracks |
Esc |
Deselect | Clear current selection and time range |
| Click + Drag | Box Select | Drag on track to select multiple keyframes |
| Shortcut | Action | Description |
|---|---|---|
← |
Move Left | Move selected keyframe(s) left by 0.01s |
Shift + ← |
Move Left (Fast) | Move selected keyframe(s) left by 0.1s |
Alt + ← |
Align to Previous | Align playhead to previous keyframe |
→ |
Move Right | Move selected keyframe(s) right by 0.01s |
Shift + → |
Move Right (Fast) | Move selected keyframe(s) right by 0.1s |
Alt + → |
Align to Next | Align playhead to next keyframe |
↑ |
Increase Value | Increase keyframe value by 1 |
Shift + ↑ |
Increase Value (Fast) | Increase keyframe value by 10 |
↓ |
Decrease Value | Decrease keyframe value by 1 |
Shift + ↓ |
Decrease Value (Fast) | Decrease keyframe value by 10 |
| Shortcut | Action | Description |
|---|---|---|
Ctrl/Cmd + Z |
Undo | Undo last action |
Ctrl/Cmd + Shift + Z |
Redo | Redo previously undone action |
Ctrl/Cmd + Y |
Redo | Alternative redo shortcut |
| Shortcut | Action | Description |
|---|---|---|
Ctrl/Cmd + S |
Toggle Snap | Enable/disable snap to grid |
| Mouse Wheel | Zoom | Zoom in/out on timeline |
Problem: Server can't find the Arduino
Solutions:
- Verify the Arduino is connected via USB
- Check the port in
server.jsmatches your system - Try a different USB cable (some are power-only)
- Check that Arduino is not used by another application (e.g. Serial Monitor)
AI was used in the project for code snippets, mostly auto analyze algorithm,styling, bug fixes and optimizations.