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