Skip to content

EXELVI/dmx-editor

Repository files navigation

🎛️ DMX Editor

version Node pnpm Express Socket.io Arduino

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.


Features

Timeline Editor

  • 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

Import/Export

  • 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.

Communication scheme

Browser (editor.html) <-> Socket.io <-> o <-> Node.js server <-> Serial Port <-> t <-> Arduino Uno <-> MAX485 <-> 5 <-> DMX Light

Data Flow:

  1. User interacts with web interface
  2. Commands sent via WebSocket to Node.js server
  3. Server processes and forwards to Arduino via serial
  4. Arduino converts to DMX512 signal via MAX485
  5. DMX fixture receives and executes commands

Hardware

Components

  • Arduino Uno
  • MAX485 RS-485 Transceiver
  • DMX Light
  • XLR cable

Wiring

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)

Canali DMX

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

channels.md


Installation

Arduino

  1. Open dmx-controller/dmx-controller.ino in the Arduino IDE.
  2. Install the DmxSimple library
  3. Upload the sketch to your Arduino Uno.

Node.js Server

pnpm install
pnpm startt

The server will start on http://localhost:3000. Remember to edit ARDUINO_PORT in server.js to match your Arduino's serial port.

Usage

  1. Connect your arduino to your computer and the DMX light to the MAX485.
  2. Start the Node.js server with pnpm start.
  3. Open http://localhost:3000 in your web browser to access the DMX Editor.
  4. Load a file or create your own timeline using the editor interface.
  5. Play it live

Keyboard Shortcuts

![Note] On macOS, use Cmd (⌘) instead of Ctrl for all shortcuts.

Playback Controls

Shortcut Action Description
Space Play/Pause Toggle timeline playback
W Rewind Reset playhead to start (0:00)

Keyframe Operations

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)

Selection

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

Editing & Movementment

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

Undo/Redo

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

View Controls

Shortcut Action Description
Ctrl/Cmd + S Toggle Snap Enable/disable snap to grid
Mouse Wheel Zoom Zoom in/out on timeline

Arduino not connecting

Problem: Server can't find the Arduino

Solutions:

  • Verify the Arduino is connected via USB
  • Check the port in server.js matches 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 Usage

AI was used in the project for code snippets, mostly auto analyze algorithm,styling, bug fixes and optimizations.

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published