lightshow.js
more precisely,
lightshow.css
everything written in CSS
- css-code interpreted by the browser
- controlled via element-classnames
WebMIDI controlling CSS
- every button toggles a set of classes
- triggers (on when pressed) and switches (press on/press off)
HTML
<device class="lightpanel"
type="litecraft-at10-mini"
channel=412></device>
turns out, browsers will just accept this as "HTML"
(will probably switch to real custom elements at some point)
CSS
.lightpanel .x2.y1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
add some JS...
const device = document.querySelector('device');
const channel = device.getAttribute('channel');
setInterval(() => {
const currStyle = getComputedStyle(device);
sendDmxValues(channel, {
color: currStyle.color,
brightness: currStyle.brightness
});
}, 33);
DMX512
- serial protocol used by professional lighting equipment
- each device has an unique address
back to that CSS
.lightpanel .x2.y1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
two problems with that
- we can't just make up CSS properties and expect them to just work.
.lightpanel .x2.y1 {
color: white;
--brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { --brightness: .5; color: #e10079; }
to { --brightness: .8; color: #051add; }
}
but there are custom-properties:
two problems with that
we can't just make up CSS properties and expect them to just work- custom-properties + transitions/animations (currently) don't work in any browser
.lightpanel .x2.y1 {
--brightness: 1; left: 1px;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from {
--brightness: .5; left: .5px;
}
to {
--brightness: .8; left: .8px;
}
}
but here's a workaround:
use a css-property we can animate as a replacement.
the hack
- parse CSS with lighting properties using the rework parser
- transform: custom-properties + fallback-properties
- serialize CSS and inject into page
getComputedStyle()
- Animation-Frame: use to get final values for all parameters
- transform fallback-properties back to lighting properties
- send via DMX to devices
never enough time to prepare
dmxpen
- 12MB of JS loaded (don't @ me)
- uses all the awesome: codemirror, sass.js, asm.js, aframe, three.js, WebGL, WebVR, WebMIDI, react, redux, leftpad, websocket-stream and many more (thank you, you all are awesome <3)
come find me at the live.js booth in the back of the hall tomorrow!
jsconf.eu-2017
By Martin Schuhfuss
jsconf.eu-2017
- 1,325