Martin Schuhfuss – @usefulthink
more precisely,
.front-truss .left-1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
*(except the communication with the external interfaces)
<device-root>
<device-group class="front-truss">
<device class="movinghead left-1"
type="quantum-profile"
channel="1:246"></device>
</device-group>
</device-root>
turns out, browsers will just accept this as "HTML"
(might use real custom elements at some point)
.front-truss .left-1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
this still needs a bit of trickery, we'll get to that in a minute
const device = document.querySelector('device');
const channel = device.getAttribute('channel');
setInterval(() => {
const currStyle = getComputedStyle(device);
setLightControlValues(channel, {
color: currStyle.color,
brightness: currStyle.brightness
});
}, 33);
.front-truss .left-1 {
color: white;
brightness: 1;
animation: colorfade 10s infinite;
}
@keyframes colorfade {
from { brightness: .5; color: #e10079; }
to { brightness: .8; color: #051add; }
}
.front-truss .left-1 {
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 that can be animated as a replacement.
getComputedStyle()
Code: https://github.com/beyondscreen/
Say hi: @usefulthink