I am trying to replace a fader knob with a custom image, just like Mack did in his youtube tutorial #3. The knob image just won't move...however, when I assign a specific value in "fader_1_val" variable widget, it moves.
How can I fix it?
1 Like
getProp('fader_1', 'height') returns 480px which is not a number (no need to write px in geometry properties), and the maths look off anyway because (getProp('fader_1', 'height') - 480) equals zero.
Also, there's no need for a variable widget nor to use the script property in this scenario since the fader uses its own value to customize itself. All you need is this in the fader's css:
class: Fader1;
.fader_knob {
top: #{(1 - @{this} / 127) * @{this.height}}rem;
}
rem should be used instead of px in O-S-C (that's the unit used when writing plain numbers in width/height (see CSS Tips - Open Stage Control).
Another approach is to use css variables, set the fader's css to:
class: Fader1;
--value: #{@{this} / 127};
--height: @{this.height};
And do the maths in your theme file directly:
.fader_knob {
top: calc((1 - var(--value)) * var(--height));
}
(Yes, css calc() is awesome)
All this is of course very approximative because I don't have the actual session but hopefully it will help.
1 Like
Thank you for your quick help.
- The 1st option you've offered, worked almost close. After some tweaking I couldn't make it move correctly (there was some kind of an offset and it didn't preserve its position ratio).
- I tried the 2nd option, but the knob didn't move =/
Excuse my weakness in programming, I somehow feel like I'm rly close to get what I intended.
I'd appreciate if someone could have a look at the session later:
Here it is, using css variables and with much less code and only one widget. It works for any size as long as the fader has a fixed height (percents won't work). There's a small error on the vertical position range that depends on the parent container's padding property, keeping it low is recommended (actually, if you go with images, you should probably set all container's padding to 0 to avoid size errors).
The magic numbers (0.186 and 0.149) where computed from approximate measurements on the strip/knob images.
Project_BlackMagic.json (2.2 KB)
Project_BlackMagic_Theme.css (877 Bytes)
1 Like
Thank you, Emmanuel.
I studied your code and I believe I partly succeeded in understanding how it works. I really wish there were more tutorials where non-programmers could start and learn from.
The reason I started making it with % is that I intended the fader strip to always be in the center of the screen, regardless of the device.
Is there any way I could center the fader now? (just like in the pics from my previous ver)
Did you try loading both the session and the theme file I posted ?
Centering the fader can be done by setting its parent container's (the root widget in my example) layout to vertical and justify to center.
1 Like
This is perfect!! Thank you so much, man! 
This happens because the widget is resized to not overflow its parent, you can avoid that by setting the parent's contain to false but then the fader may not be entirely visible. Reducing the fader height is also an option. I don't think you can make this work with an auto resizing height.
I'm happy with "setting the parent's contain to false". The fader fits well in the vertical position. In the horizontal position, it's cut, but it retains its properties well (the knob moves exactly between 100 and 10 values), which is how I wanted it to be. Especially, if it's the only option. 
I tried reducing the height before, but then the knob wouldn't necessarily fit in between 100 and 10 values there.
Thank you.
I'm curious which benefits I could have if the unit was not auto-resizeble?
I'm not sure to understand the question, you mean using px instead of rem ? No benefit.
Ok. Thank you 