Knobs and faders and their styling / appearance

[abstrus]

There was a similar question for V 0, i will give it a similar try.
It would be nice if we could do more "nicer" knobs (and faders). For Button a SVG could be "hacked in".
e.g.

How to add images to menu items

Hi there, sorry to bother you, but couldn’t quite figure out how I can add custom images to menu options (managed to successfully use the icons for menus, but wanted a sawtooth, pulse and triangle icon and I cannot find these ones in the free-icons unfortunately!). Any help greatly appreciated thanks!

Changing a switch's colors according to its own value

I want to change a toggle’s background and front colors according to its own value (that is, the selected button). I have tried this code but it doesn’t function: .value.on { margin:0; border:0; #{ my_bcolors = [“blue”, “violet”, “violet” , “violet”, “violet”, “green”, “green”, “green”, “green”, “yellow”]; my_fcolors = [“white”, “white”,“white”,“white”,“white”,“white”,“white”,“white”,“white”, “black”]; couleur = @{this.value}; color:my_fcolors(couleur); background:my_bcolors(couleur); …

I find something like this really nice:

How to Create a UI for a Music Player in HTML and CSS with Source Code

-> would something like a user canvas doable?

Thanks!

[jean-emmanuel]

There's no canvas widget in o-s-c, it would be nice but it's not likely to happen anytime soon. It may be possible however to build this kind of things using the html and css properties or with a svg widget.

[abstrus]

ok, any minimal starting point would be nice (e.g. with html and css, so the knob would work as before). the knob itself is of type canvas, so my question about it

[abstrus]

bump on this one(forgotten by myself) @jean-emmanuel could you give a starting point here with the html and css property? thanks

[jean-emmanuel]

Here is an example with a fader, knobs are more complex to build with html (especially if you want them to be responsive).
htmlfader.json (2.5 KB)

[abstrus]

Thanks for the starting point!

[abstrus]

i got a little bit further, apart from the fact that i don't know how to add a variable for rotation(and how to calculate it -> -20 deg to 150 deg like the standard knob)...

transform: "rotate(" + var(--value) + "deg)";

(didn't work), i am not sure if the pointer events are correct here(so you can move it and it follows up correctly)

Don't understand how to do somekind of ring (or led ring) following the knob, like on the linked example
or here: https://codepen.io/jhnsnc/pen/KXYayG

Thanks for any help..
htmlfader_and_knob.json (4.5 KB)