Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: fader meter visual appearance #429

Closed
manfred-mp opened this issue Nov 14, 2018 · 12 comments

Comments

@manfred-mp
Copy link

commented Nov 14, 2018

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

This comment has been minimized.

Copy link
Owner

commented Nov 14, 2018

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

This comment has been minimized.

Copy link
Owner

commented Nov 14, 2018

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

@manfred-mp

This comment has been minimized.

Copy link
Author

commented Nov 14, 2018

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

This comment has been minimized.

Copy link
Owner

commented Nov 14, 2018

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

@cyberic99

This comment has been minimized.

Copy link
Contributor

commented Nov 19, 2018

@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

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2018

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

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2018

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

@cyberic99

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2018

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

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2018

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

@jean-emmanuel

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2018

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

@jean-emmanuel

This comment has been minimized.

Copy link
Owner

commented Nov 20, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.