more precisely,
<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)
.lightpanel .x2.y1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
const device = document.querySelector('device');
const channel = device.getAttribute('channel');
setInterval(() => {
const currStyle = getComputedStyle(device);
sendDmxValues(channel, {
color: currStyle.color,
brightness: currStyle.brightness
});
}, 33);
.lightpanel .x2.y1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
.lightpanel .x2.y1 {
color: white;
--brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { --brightness: .5; color: #e10079; }
to { --brightness: .8; color: #051add; }
}
.lightpanel .x2.y1 {
--brightness: 1; left: 1px;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from {
--brightness: .5; left: .5px;
}
to {
--brightness: .8; left: .8px;
}
}
use a css-property we can animate as a replacement.
getComputedStyle()
come find me at the live.js booth in the back of the hall tomorrow!