Matrix fader, display labels at the bottom

[zig]

Hello,
I would like to align the labels of a matrix widget with faders at the bottom. (below the faders)
I have tried several things with props.css & flex-end without success. Can someone point me in the right direction. Here is my starting code.

JS{{
  var props = {}
var labels = ["CutOff", "Res"]
var colors = ['orange','orange']
props.colorWidget = colors[$]
props.design = "compact"
props.html = labels[$]
props.target = "midi:midictrl"
props.address =  "/control"
props.preArgs = [1, labels[$] + 50]
return props
}}

[Open-Stage-Composer]

Hi @zig,
try the following in the css property of the faders:

.html {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 text-align: center;
}

bottom: 0 is used to place it on the bottom. You can also use any value e.g. 10rem in here to position it manually.

Let me know if there are any problems or questions.
Cheers!

[zig]

@Open-Stage-Composer Thank you for leading me in the right direction.
Your proposal displays the text at the bottom but on the fader.
I found a solution that works for me (maybe not very ortodox) that displays text below the fader.
In the matrix prop :

JS{{
  var props = {}
var labels = ["O FX 1", "O FX 2","A Level","B Level","Low Cut","Res","Pan","Level"]
var colors = ['orange','orange','blue','blue','aqua','aqua','grey','red']
props.colorWidget = colors[$]
props.design = "compact"
props.html = labels[$]
props.colorText = colors[$]
props.lineWidth ='1'
props.target = "midi:midictrl"
props.address =  "/control"
props.preArgs = "[1,#{50+$}]"
return props
}}

In matrix css :

.html {
 position: absolute;
 top: 96%;
 left: 0;
 right: 0;
 text-align: center;

In matrix style, set padding at 40%

[Open-Stage-Composer]

Oh, I see what you mean!
Good solution, thanks for sharing.
The problem is that when the matrix gets too small, it won't show the html. At least on my screen

Another option to keep in mind is, that you can set up the matrix using clones This would be the most flexible.

Here's an example:

1. Create a panel using the id cntn_CLONE (is used later)
2. Set alphaStroke and padding to 0 (if you don't want to show this in the matrix)
3. Put this in variables:

{
  "n": 0,
  "text": "Test",
  "def": 100,
  "color": "auto"
}

4. Inside the panel, create a fader and a text. In your case the text is placed below. Use % as your geometry.
5. Set the ID of both widgets to something like this: sli_fader_@{parent.variables.n} / text_fader_@{parent.variables.n}
6. Now you can set up your widgets inside the panel however you like. Make sure to use the variables that you've set for the parent panel. For example: Set value => default of the fader to @{parent.variables.def} and value of the text widget to @{parent.variables.text}
   Then use the matrix with clones. In the example above this should result in the fader being set to 100 and the text showing "Test"
7. Create a matrix using clones.
8. Set props to:

JS{{
  var props = {}
var labels = ["O FX 1", "O FX 2","A Level","B Level","Low Cut","Res","Pan","Level"]
var colors = ['orange','orange','blue','blue','aqua','aqua','grey','red']
props.widgetId = "cntn_CLONE"
props.props = {
  "variables": { "text": labels[$], "n": $+1, "def": $*2+50, "color": colors[$] }
}
props.target = "midi:midictrl"
props.address =  "/control"
props.preArgs = "[1, 50+$]"
return props
}}

9. You can use a "hide" variable and use it to hide the original panel and show the clones in the matrix. Or you place the original panel somewhere out of screen (scroll disabled).

I hope this helped

[zig]

Great, thank you very much.
It solves the problem of size with small matrice and It is much more flexible.

However, the midi controllers are no longer sent. Any idea ?

[jean-emmanuel]

@Open-Stage-Composer

props.preArgs = "[1,#{50+$}]"

should be

props.preArgs = [1, 50+$]

[Open-Stage-Composer]

Sure thing! Edited in my post.
Does that solve the problem, @zig

I mean, anyways it doesn't make sense to put the osc messages in props. You can delete target, address, preArgs in the matrix props. Just place target and address inside the fader manualle. Then write the preArgs like this:
[1, @{parent.variables.n}]
and add it to 50 as you like.

OR: Create another variable in the panel called "out". You can use it in the faders preArgs like above using @{parent.variables.out}
Then assign it using the matrix.

[zig]

Thanks @Open-Stage-Composer & @jean-emmanuel for your advice.
It works perfectly and I understand better now the syntax of variables in matrix.

clone matrix.json (8.8 KB)

I didn't find the trick in point 9 to hide the original panel!