const dmxData = new Uint8Array(512);
// device with 4 channels at address 42
// (dmx-channels are 1-based, our array isn't)
const deviceData = dmxData.slice(41, 45);
// brightness
// | RGB-Color
// | |
// | +----------+
deviceData = [255, 255, 240, 30];
(Martin Professional Quantum Profile EX)
(...thats 27 DMX-Channels per Device)
an abstraction-layer for DMX512
const device = new DmxDevice(421, paramDefinitions);
// values for motion in degrees
device.pan = 90;
device.tilt = 45;
device.brightness = 1; // values [0..1] for most properties
device.color = 'magenta'; // css-color-value for RGB and CMY
Object.defineProperty() ♥️
an abstraction-layer for DMX512
const d = new QuantumProfile(channel);
setInterval(() => {
d.pan = 90 * Math.sin(time / 3000);
d.tilt = 30 * Math.sin(time / 2000);
d.brightness = 1;
d.color = 'rgb(255,140,63)';
}, 1000/30);
simple animations..
why not just use CSS instead?
device[type="quantum-profile"] {
pan: 90deg;
tilt: 30deg;
brightness: 1;
color: rgb(255,140,63);
animation: panTilt 3s infinite alternate;
}
@keyframes panTilt {
from { pan: 45deg; tilt: 0deg; }
to { pan: 135deg; tilt: 60deg; }
}
HTML-structure
<deviceroot>
<devices>
<!-- UNIVERSE 1: STAGE -->
<!-- STAGE BACK / 6 Quantum Profile -->
<device class="qp back left" type="quantum-profile" channel="1:109"></device>
<device class="qp back left" type="quantum-profile" channel="1:136"></device>
<device class="qp back center" type="quantum-profile" channel="1:163"></device>
<device class="qp back center" type="quantum-profile" channel="1:190"></device>
<device class="qp back right" type="quantum-profile" channel="1:217"></device>
<device class="qp back right" type="quantum-profile" channel="1:244"></device>
</devices>
</deviceroot>
...and some javascript
const deviceNodes = Array.from(document.querySelectorAll('device'));
deviceNodes.forEach(deviceNode => {
const currStyle = window.getComputedStyle(deviceNode);
const dmxDevice = getDevice(deviceNode);
dmxDevice.setParams(extractParams(currStyle));
});
dmxOutput.send();
Solution: use CSS custom-properties
device[type="quantum-profile"] {
--pan: 90deg;
--tilt: 30deg;
--brightness: 1;
color: rgb(255,140,63);
animation: panTilt 3s infinite alternate;
}
@keyframes panTilt {
from { --pan: 45deg; --tilt: 0deg; }
to { --pan: 135deg; --tilt: 60deg; }
}
Solution: use properties that can be animated, map values
device[type="quantum-profile"] {
--pan: 90deg; left: 90px;
--tilt: 30deg; right: 90px;
--brightness: 1;
color: rgb(255,140,63);
animation: panTilt 3s infinite alternate;
}
@keyframes panTilt {
from { --pan: 45deg; --tilt: 0deg; left: 45px; right: 0px; }
to { --pan: 135deg; --tilt: 60deg; left: 135px; right: 60px; }
}
getComputedStyle()