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

png

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
https://www.g200kg.com/en/webknobman/index.html
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

2 Likes

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

image

What is my mistake?

Patrick

bouton animé.json (18.0 KB)

I tried other parameters but without success.
help me !

change the steps param. Try 129

thanks

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!

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



sm
SC_Switcher-02-65

Timb&Melda-02-collage1
Timb_Grig2018_Controls--06

1 Like

Old

New


2 Likes

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

2 Likes

:rofl:

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: