Custom fader caps and some other UI stuff

Hi everyone,

I've been using Open Stage Control for a little bit now and I have to agree with everyone else - it's awesome!

By way of a shameless plug for my own content, I have been sharing on YouTube a tutorial series on how to use Open Stage Control and the theme of the tutorial series is creating a Behringer BCF2000 in software.

The channel is here: Mack Music - YouTube

Latest part is Part 3 where I cover creating fader widgets with a custom look and feel: Open Stage Control tutorial - Part 3 - Custom Faders - YouTube

This just uses CSS, HTML and a bit of maths - no code editing.

Hopefully you will find it interesting and helpful!

Let me know if there's anything else you think I should cover and I will try and add it to a future video.

Best wishes and thanks to everyone for supporting this great tool!

5 Likes

well done! thank you!

1 Like

Thank you!l for the positive feedback! Going to cover the custom knobs and buttons in the next video.

1 Like

i also tried to make custom knobs, but i could not finish it yet..

This is a creative and excellent tutorial on how to approach custom fader graphics.

I had looked into the source code approach, but for the same reasons as you I concluded that wasn't going to be a good long term approach.

On a different note, I noticed in the video that you're not using MCU mode. I went back and forth on using my BCF2000 in MCU mode and user mode, and ended up mostly using MCU mode in the end. If you ever consider going in that direction, it might be helpful to know that jean-emmanuel has a good MCU emulator using OSC also on github.

1 Like

There are at least to ways to skin the cat. One is to rotate the image, the other uses image strips (e.g. generated by knobman).
I really like mackmusic's idea to use the html property of the widget, will give it a try.
I used a different approach. I put an "invisible" (alpha=0) knob widget on top of an image. The image is rotated in accordance to the knob position. The following code goes into the css property of the image widget:

transform: rotate(#{@{insCtrlr_1}/127*240-125}deg);

'insCtrlr_1' is the name of the knob widget. '240' and '125' are range and offset of the rotation angle.

If I find the time I might explain an example for the image strip approach, which makes it possible to use a different image for every knob position. It's similar to a 'thumb cinema'

@mackmusic thanks for making these videos, it's really nice to see some community driven content out there !

1 Like

hey @jean-emmanuel - really cool to hear from you directly. awesome tool you have created! the videos are more popular than i had initially expected. seems there is not too much out there. and i'm so glad you like the content - i did wonder what you might think! it's not very advanced what i am doing (i will cover more difficult stuff soon hopefully) but i wanted to show more what can be done visually but still keep the original source code.

i'm not on this forum very often so apologies to others if i have not replied to you. it' easier to get me through the YT comments if you want to interact directly, or also on discord (links in the videos).

thanks all!

agreed there are 2 main ways to do this. i already had 'filmstrips' of knobs from knobman tool becuase of creating VSTs in JUCE framework. (I should really be using SVGs, but that is another story!!)

someone else on here posted a codepen link to a really cool example using CSS transforms implementing a test ADSR control with waveform but i can't find it right now.

i like both approaches and will probably cover the CSS transform option in a future video part.

thank you for the comment and feedback,

if i understood @mackmusic and the video right, you have to deal with source code in the slider/fader js... the post from @drjay inspired me, to check this out, as it seems to get it, without any modifications in source code.

and i created an example from the knob to assign a custom image as fadercap.
the image is bound as a base64-encoded image in the value field.
its css looks like this:

transform: translateY(#{@{fader_1}*-1}px);

fadertest_base64.json (6.0 KB)

At this point i have a question: what is more efficiant, due to resources?

To embed the image as base64 or as a path to a png file as a (cahed) image in the value section?
Becouse the fader will be cloned x-times in the final json...

Thanks to to all of you for the great inspiration and ideas!