Closed manfred-mp closed 5 years ago
The embeded faders are quite basic, but you can do what you need with regular meters using the gradient
property and adjusting the opacity with the css variable --gauge-opacity
:
--gauge-opacity: 1;
["green", "yellow"]
Note that the gradient property was broken until just now... you can try it in the online demo, a patch release is on the way.
Load the attached session to see the above example in action. bright-meter.json.txt
That was quick - cool! Only way I figured to have own adjusted ranges was like this ["green", "green", "green", "yellow", "red", "red"]. Is there more accurate way? Anyway this already helped a lot, thx.
Not currently, but I'd probably be easy to allow specifying break points.
@jean-emmanuel is it possible to apply css animations to a fader or a meter? I see they are drawn using a canvas some I don't think it is possible...
thx
EDIT: I've found it is possible, using this for instance:
#{
val = timestamp();
}
@keyframes scale-#{val} {
0% {transform: scale(1,0) ;}
100% {transform: scale(1,1) ;}
}
canvas {
animation: scale-#{val} 0.3s 1 forwards ease-in;
}
But my goal was to replicate the 'smoothness' of the bars in the audio meters example...
I tried to play with the height also, but woth no success...
Does anyone have a hint for that?
It's not currently possible to animate a slider between 2 values. While not impossible to implement, I don't think it's worth adding a layer of computation to display intermediate values that are not representing the actual state of the app.
Gradient can now be set as an object to define custom color scales: {"0": "blue", "0.28": "red", "1": "yellow"}
I don't think it's worth adding a layer of computation to display intermediate values that are not representing the actual state of the app.
I agree with you
I thought it was doable in css, where the css would interpolate the steps between the current value and the target value
But I guess it is not doable with canvas...
The CSS audio meter
example uses DIVs to draw he meters.
Is there already a widget like that in o-s-c?
You might get somewhere with the svg widget, this one doesn't rely on canvas.
Closigin since the initial issue has been addressed in v0.40.0
Check out attached session file with v0.40.1 (includes a fix for svg), here you have an animated meter made of svg magic.
wow you rock @jean-emmanuel , thx! I'll post my final results too
This is great tool and has a lot of potential - thanks! Currently using it with Ardour and trying to implement X Air support.
Then a request. As current state it is hard to see the actual level of meter (fader embedded) and would be nice to have bright color ranges as seen here: CSS audio meter