Matrix fader color change at origin point

Community Usage questions
1

Hi to all!

Pretty boring question for a lot of you maybe but I am wondering and trying hard:

For a simple fader widget I managed to change its color css properties like this

JS{{
  var css = ''
  
  if(@{this.value} < 0)
  {
    console.log(@{this.value})
    css = ":host { --color-widget: rgb(255,0,0);--alpha-fill-off: .3;}"
  }
  
  else if(@{this.value} > 0)
  {
    console.log('ayay')
    css = ":host { --color-widget: rgb(135,246,3);--alpha-fill-off: .3;}"
  }
  return css;
  }
}

But when trying this on a fader matrix css I cannot seem to get the matrix's children values. What do I have to replace

@{this.value}

with to get the same color changing result?

I already have some ... nth-child() ... settings in the css field of the fader matrix so I think it would just be clever to try it there:

.widget:first-child {
  #{@{this} <= 0 ? "colorWidget: rgba(255,0,0,1);" : "colorWidget: rgba(0,255,0,1);" };
}

But That did not do the trick.
Any suggestions?

Have a nice day!

2

You'd write @_{this} instead of @{this} here and #_{} instead of #{}, because as documented in the props property:

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.

It's a bit tricky to get these things right though with how all these strings are resolved so I recommend wrapping the whole props in a JS{} block to get something consistent:

JS{
// props property
// this JS block is evaluated  by the matrix for each child
var props = {}
// #_ and @_ blocks will be evaluated by the children themselves
props.css = `#_{ @_{this} <= 0 "css_a" : "cssb"}` // backtick-quoted strings can span multiple lines and can contain single and double quotes 
props.label = "i'm button n°" + $
// etc
return props
}

Note that this only works with the props property, other properties like css can't reach the matrix's children (although css can affect how they are rendered).

1 Like
3

Uh, ok! That was a tricky one and a bit out of my "language" league, but thanks to your given directions I managed to get something I wanted.

Thank you so much and have a nice day!

If anyone is interested: the JS{} block in the props of a matrix fader for showing 2 different colors right and left to its origin point would look like this:

JS{
var props = {}

//fill in accordingly to your setup
props.target = yourTarget      // e.g. "@_{scriptVariable}"
props.id = yourID        // e.g.  @{parent.id} + "/selection#" + ($)
props.address = yourAddress    // e.g. "/" + @{parent.id} + "/selection#" + ($)

//change range to your needs
props.range = {"min":-0.35,"max":1}
props.origin = 0

//the tricky one, notice the backticks!
props.css = 
`#_{ @_{this} <= 0 ? 
":host { --color-widget: rgba(255,0,0,1); --alpha-fill-on: .4}" 
: 
":host { --color-widget: rgba(135,246,3,1); --alpha-fill-on: .4}" }`

//some additional styling
props.design = "compact"
props.horizontal = "true"
props.lineWidth = "1"

return props
}
1 Like
4

I just figured it's also possible using only the gradient property:

{
  "0.0": "red",
  "0.259": "red",
  "0.2591": "blue",
  "1.0": "blue"
}

(0.259 = 0.35 / 1.35, which is your origin point normalized between 0 and 1)

Testing this made me find and fix a small bug (with design other than compact the gradient was not drawn correctly).

5

Perfect! Thanks for the additional variation.
Although the JS{} in the props fits better to my needs, I am glad I somehow could help tracing a little bug.
Also, a little math can do no harm, right?!

6

I was trying to do the same thing with the new colorKnob parameters

props.colorKnob = `#_{ @_{this} === 0 "blue" : "crimson"}`

But this is not working, am I missing something ?

7

Don't forget to the check the console out when something doesn't work ;). A question mark is missing before "blue".

8

ahahah facepalm

props.colorKnob = `#_{ @_{this} === @_{this.origin} ? "white" : "crimson"}`