SOLVED - making a knob have 2 colors and decreasing-increasing alphaOn

Community Usage questions
1

I have a fader whose color intensity follows the fader's value...
I have another fader who changes its color : green under 63, blue over 63...

couleur et intensité

I wanted to apply an equivalent behaviour to the second one : the more it goes to the left, the more bright is the green color. The more it goes to the right, the more bright is the blue...

So i tried something more or less like this :

#{@{this} <= 63 ? "rgb(0, #{ 200 - @{this} }, 0)" : "rgb(0, 0, #{ 2*@{this} })"}

And that doesn't work...

Console returns :

fader_1.colorWidget #{} error at line 2: TypeError: Cannot read properties of undefined (reading 'VAR_997')

So... i tried many things, in a step by step process, not to get confused with the " " and the ' ' or some other things... I tried setting things in the CSS field, using {} or JS{}....But i still dont know how to do...

So again... any clue, any help... appreciated... :wink:

2

You can't put a #{} block inside another #{} block. You should be able to solve this using string concatenation as seen in another thread of yours if I remember correctly.

3

Ok... found something... i've trying to tweek the css field for two hours... with different things that i've learned those days... but i never found what you were talking about... (i'd love to ! i ever you remember which thread could lead me to what i want using string concatenation... i took a lot of notes of everything, wrote detailed processes... but hard to find the good direction)

Then i saw this little field named "gradient" and i put...

{
  "0": "blue",
  "127": "green"
 }

And i had that :
gradient

Gosh... That easy... Absolutely nothing else to fill...

That's really nice...

BUUUUUUUUUUUUUT.... As crazy as i am, i want the same with... a knob... but a knob doesn't have a gradient field... :upside_down_face:

4

To myself, @jean-emmanuel, and others...

I did it !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Two entire days to get there ! Gosh ! I'm dead ! Shaking... almost crying... those hard-to-find ( ) in the var definition saved me :crazy_face:

monknobcusto

Still need some tweaking, but i got there !!

Thanks jean_emmanuel for the "string concatenation" clue... was hard to understand... but now it's ok.

Here's my css :

JS{{
var couleurB = (2*@{this})
var couleurG = (255-3.4*@{this})
var alphaB = (@{this}/64-1)
var alphaG = (1-@{this}/63)
var css = ''

if(@{this} <63)
{
  css = ":host {--color-widget: rgb(0," + couleurG + ",0); --alpha-fill-on:" + alphaG + ";}"
}

if(@{this} ==63)
{
  css = ":host {--color-widget: rgb(10,0,0); --alpha-fill-on:0;}"
}

else if(@{this} > 63)
{
  css = ":host {--color-widget: rgb(0,0," + couleurB + "); --alpha-fill-on:" + alphaB + ";}"
}
1 Like