HOW TO: Realistic controls using stacked PNG's. Pretty sliders and knobs

Here are instructions on how to easily make controls that look like this


You need a PNG file where each value of the control has a frame of a unique image, all stacked on top of each other.

These can be made with webknobman
or there are a couple of hundred in this download:
Cockos Incorporated Forums - View Single Post - LBX Stripper - create custom channel strips
(all the images we need are in the controls folder, put that whole controls folder where your O-S-C json's reside)

A bit of CSS can animate between frames. For a knob, add this to the CSS field: (replacing the filename)

background: url("controls\Timb_ExpoBloo96128.png") 
no-repeat 0 #{-@{this.steps}*@{this.value}*@{this.height}}px;
background-size: auto #{@{this.height}*(@{this.steps}+1)}px;

Set the decimals field to 5 or higher
and set the steps field to the number of frames in the image (often 128).

Here is the CSS for a button:

background: url("controls\Timb_2018_BUTTONEXIT64-02.png") 
no-repeat 0 #{-@{this.value}*@{this.height}}px;
background-size: auto #{@{this.height}*2}px;

Hide the original design by setting lineWidth and both alphaFill's to 0


Hello ,
I followed the example for a knob. But I have the image that jumps all the time


What is my mistake?


bouton animé.json (18.0 KB)

I tried other parameters but without success.
help me !

change the steps param. Try 129


no change !

I'm still looking for....

Set the decimals field to 5 or higher.

great, thank you very much, I appreciate your help

Wicked post. Last year, before OSC took over my life, I was creating a sample library (that's on temporary hold) and I learned about Knobman whilst doing some KSP courses. I totally forgot about it and yeah, how fantastic to be able to make your own posh looking knobs/faders/buttons etc! Looking forward to seeing what people making!

samples ...
bouton animé.json (18 KB)



1 Like




Love it! God, this is another Rabbit hole. I can sense the life evaporating just thinking about doing this :joy:



Anyway this is nuts, can't wait to waste nights and nights on this stuff once I have a functioning template :sweat_smile:

Thank you so much!! This is exactly what I was looking for! :heart_eyes:

Thanks for tips. Work very well.
But this is not reponsive. Can we do the same thing with % value geometry ? I try but .... Don't work.
Im so sorry for the english.