How could I create multiple clones automatically when each has its own momental width?

Community Usage questions
1

Hi,

I saw the "technique" (f.ex @jean-emmanuel mcu controller or different others) where you can automatically add clones for a channel strip in a matrix. Where the quantity property defines the number of clones. Very nice! This inspired me.

But in my case each of the clones has its own momentary width, depending on several options inside the channel strip. so, to avoid blank space, the left position of the current clone depends of the width from the other clones left of the current.

It works quite fine in a panel: If for ex clone 2 changes its width from 150px to 100px, all the following clones shift to the left automatically.
I think the picture describes what i mean:

clones_width
clones_width1106×1180 54.6 KB

As you see, i have to define each clones settings by hand after creating it.

Would there be a possibility to define a quantity variable (for max n)? In a matrix or panel?
This would be much more elegant...

Any hints or ideas about this?

Thanks in advance, regards.

Similar to sth like this:

matrix_clones
matrix_clones1104×606 34.2 KB

2

You could define the matrix' props property using a JS block to write more complex routines regarding its children's left property:

JS{
var props = {}
props.widgetId = '/myInput'
props.props = {
  variables: {n: $ + 1, visible: true} 
}

// props.width = whatever logic suits 

return props
}
3

Thank you it works nearly perfect now.

I put a individual variable for each channel in the template.
And @{num_channels} is the quantity auf the matrix.

But one thing may be could be optimized, to make the switch - case more flexible, if num_channels would be greater than 24...?

Maybe some hints for this?


JS{{
var props = {}
props.widgetId = 'input_strip'
props.props = {
  variables: {n: $ + 1, visible: true} 
}
props.height = 262 

if ($+1 >= 1 && $+1 <=  @{num_channels}) {
  switch ($+1) {
    case 1:
      props.width = @{varWidth_1};
      break;
    case 2:
      props.width = @{varWidth_2};
      break;
    case 3:
      props.width = @{varWidth_3};
      break;
    case 4:
      props.width = @{varWidth_4};
      break;
    case 5:
      props.width = @{varWidth_5};
      break;
    case 6:
      props.width = @{varWidth_6};
      break;
    case 7:
      props.width = @{varWidth_7};
      break;
    case 8:
      props.width = @{varWidth_8};
      break;
        case 9:
      props.width = @{varWidth_9};
      break;
    case 10:
      props.width = @{varWidth_10};
      break;
    case 11:
      props.width = @{varWidth_11};
      break;
    case 12:
      props.width = @{varWidth_12};
      break;
    case 13:
      props.width = @{varWidth_13};
      break;
    case 14:
      props.width = @{varWidth_14};
      break;
    case 15: 
      props.width = @{varWidth_15};
      break;
    case 16:
      props.width = @{varWidth_16};
      break;
    case 17:
      props.width = @{varWidth_17};
      break;
    case 18:
      props.width = @{varWidth_18};
      break;
     case 19:
      props.width = @{varWidth_19};
      break;
    case 20:
      props.width = @{varWidth_20};
      break;
    case 21:
      props.width = @{varWidth_21};
      break;
    case 22:
      props.width = @{varWidth_22};
      break;
    case 23:
      props.width = @{varWidth_23};
      break;
    case 24:
      props.width = @{varWidth_24};
      break;
    default:
      props.width = 60;
  }
} else {
  props.width = 60;
}


return props
}}```
4

Well it really depends on how these widths are determined, I don't think I can help much with only this code snippet.

5

sure. you are absolutely right. totally with you.
going to send you the details... give me a little time to remove at least the roughest embarrassments :wink:

6

Ok I think I understand the issue now, and I found a solution ! Since the width of a cloned widget is ignored by the clone itself we must find a way to reinject this information in a way that's still using the incremented data within the strip. The idea here is simply to have a widget (variable or whatever) in the strip that holds the width value and make sure its id depends on variables.n, then we use a tiny hack to define the clone's width in the matrix' props:

// inject "n" in the clone container
// using a unused property
props.comments = {n: $}
// make the clone's width depend on the variable widget in the incremente strip.
// Underscored @ { } syntax = interpreted at the child level instead of the matrix'
props.width = '@_{stripwidth_@_{this.comments.n}}'

Here is a minimal session that demonstrate this hack :

stripwidth.json (5.2 KB)

1 Like
7

You got exactly, what i meant. Perfect!

Would never come in my mind to "mis-"use an unused prop like comments for holding the n inside the container or its childs in the matrix definition..

And i even didn't know that it is possible to realize this via the Underscored @_{ } syntax.

Here my perfect-suited modified example. if anoyne should need it.

stripwidth_mod.json (6.1 KB)

thank you again!

1 Like