Knob's Matrix - colorWidget "rgba(...)" - need to modify the "green" value according to knob's value

Community Usage questions
1

Hi !

In a matrix, I'd like the green color of my knobs to fade in/out, according to knob's value (twice its value, actually, to reach 254).

With a single knob, it works fine with rgba(0, #{@{this}*2}, 0, 1).

MonQC

So i tried a few things in matrix, using get() or @{}, like :

JS{{
var props={}
let Index=parseInt($)+1
props.id="couleur_"+Index
props.range= {"min":0,"max":127}

var coucou = get('id')
props.colorWidget="rgba(0,get('coucou')*2,0,1)"

return props
}}

Or

{
  "id": "KQC#{$+1}",
  "range": { "min": 0, "max": 127 },
  "design": "solid",
  "colorWidget": "rgba(0,get('KQC#{$+1}')*2,0,1)",
  "linkId": "QQQ#{$+1}",
  "address": "/control",
  "preArgs": "[1, #{@{QC vers Pistes} ? 70 + $: 16 + $}]",
  "target": "midi:QC"
}

And a few more things...

But i don't get it...

So... how can i have my knobs look like the Steinberg QC's ones ?...

Thank you

1 Like
2

get() only works in the script property, you have to use the @{} syntax here, but using advanced syntaxes with matrices can be tricky (see 3rd paragraph of the props property description). Here is a minimal session that demonstrate that :
matrix_advanced_syntax.json (2.2 KB)

3

Oh, yeah... i see how tricky it is ! :slight_smile:

Advanced syntax blocks can be passed to children without being resolved at the matrix' scope by adding an underscore before the opening bracket.

This morning, thi still was chinese, for me... now, i'm just beginning to understand... :smiley:

Thanks a lot

4

Oh, btw, now that i have this in the props field : "colorWidget": "rgb(0,#_{60+2 * @_{this}},0)", That's perfect.

I was just wondering two things :

  • how to get the same result in a JS{{}} block ?
  • is it possible to have both a {} and a JS{{}} block in a props field ?...
5

hi,

closer to your original gif

{
  "range": { "min": 0, "max": 127 },
  "colorWidget": "hsl(102, #_{@_{this}}%, 50%)"
}
6

Thank you ! "hsl", now... one more info :slight_smile: Learning is soooo good !

7

you can even use hsla

{
  "range": { "min": 0, "max": 127 },
  "colorWidget": "hsla(102, #_{@_{this}}%, 50%,  0.9)"
}

but it's the same as rgba. Just another way.
https://hslpicker.com/#3f0

But i miss the syntax (so am i) to calculate some values into the props field...

8

the direct link doesn't work (Properties reference - Open Stage Control)

|###### props[#](https://openstagecontrol.ammd.net/docs/widgets/properties-reference/#matrix_props)|`object`|`{}`|Defines a set of property to override the widgets' defaults.

JS{} and #{} blocks in this field are resolved with an extra variable representing each widget's index: `$` (e.g. `#{$}` )

Advanced syntax blocks (@{}, OSC{}, JS{}, VAR{} and #{}) are resolved at the matrix' scope (ie @{this.variables} returns the matrix' variables property)

Advanced syntax blocks can be passed to children without being resolved at the matrix' scope by adding an underscore before the opening bracket.

Note: unless overridden, children inherit from the matrix' `id` and osc properties ( `id` and `address` are appended with `/$` )|
9

:slight_smile: i've read this almost a hundred times... and don't get it 100% yet :smiley:

As i was trying not to drown in those "props" things, related to the matrix... i tried to use both ways of writing what i needed :

{
  "range": { "min": 0, "max": 127 },
  "colorWidget": ...

  blablabla...
}

JS{{
var props...

blablabla...
}}

Is that possible ?

And, finally, when to use the one or the other way of coding/scripting/writing ?... (here again i don't know which word to use... :thinking:)

10

yep i got the same question...

JS{{
var props={}
let Index=parseInt($)+1
console.log($)
props.range= {"min":0,"max":127}
props.colorWidget="hsl(102," + $ + "%,52%)"
return props
}}

how to get the fader value for the $ knob ?
Any help appreciated :slight_smile:

11
  • how to get the same result in a JS{{}} block ?
JS{
var props = {}
props.colorWidget = "rgb(0,#_{60+2 * @_{this}},0)"
return props
}

is it possible to have both a {} and a JS{{}} block in a props field ?

Yes, that's basically what you did already (#{} works like JS{}, except you can't have multiple JS{} blocks in the same property).

12

Thank you :slight_smile:

13

thank you for your answer but how to just display the value into the console

JS{
var props={}
let Index=parseInt($)+1
console.log($)
props.range= {"min":0,"max":127}

/*
var foo = @_{this}
console.log(foo)
*/

props.colorWidget="hsl(102, @_{this}%, 52%)"
return props
}
14

@Greenman you have to define the widget's script to do that:

JS{
var props = {}
props.colorWidget = "rgb(0,#_{60+2 * @_{this}},0)"
props.script = "console.log(getIndex() + ': ' + value)"
return props
}
1 Like
15

ok thanks for this point !