Feature: fader meter visual appearance

[manfred-mp]

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

[jean-emmanuel]

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:

• css: --gauge-opacity: 1;
• gradient: ["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.

[jean-emmanuel]

Load the attached session to see the above example in action. bright-meter.json.txt

[manfred-mp]

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.

[jean-emmanuel]

Not currently, but I'd probably be easy to allow specifying break points.

[cyberic99]

@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?

[jean-emmanuel]

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.

[jean-emmanuel]

Gradient can now be set as an object to define custom color scales: {"0": "blue", "0.28": "red", "1": "yellow"}

[cyberic99]

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?

[jean-emmanuel]

You might get somewhere with the svg widget, this one doesn't rely on canvas.

[jean-emmanuel]

Closigin since the initial issue has been addressed in v0.40.0

[jean-emmanuel]

Check out attached session file with v0.40.1 (includes a fix for svg), here you have an animated meter made of svg magic.

svg_transition.json.txt

[cyberic99]

wow you rock @jean-emmanuel , thx! I'll post my final results too