Huge Matrix... bad idea?

[Sylvain]

Hi,

I have what i would call a huge matrix, with almost a thousand buttons...
Some act as folders, switching visibility of a few others...
They are doubleTapped on, while the others aren't...
They are "toggled", while the others are "pushed"???

It works great, except.... that all the stuff is now really slow...

My props look like this :

...
lots of strings (tracknames)
...

props.label = 
$ === 0 ? false :   
$ == 6 ? false :
...
$ == 875 ? false : Labs[$]

props.colorWidget =
$ === 0 ? COLOR[0] :
$ == 6 ? COLOR[1] :
...
$ == 875 ? COLOR[14] : 'black'



props.id =
$ === 0 ? 'Repertoire_A' :   
$ == 6 ? 'Repertoire_B' :
...
$ == 875 ? 'Repertoire_X' : 
$ > 0 && $ < 6 ? 'Pistes_A_'+$ :
$ > 6 && $ < 21 ? 'Pistes_B_'+$ :
...
$ > 875 ? 'Pistes_X_'+$ : ''




props.visible =
//Visibilité des répertoires
$ == 0 ? @{VisiRep_0} == 1 ? 0 : 1 :
$ == 6 ? @{VisiRep_1} == 1 ? 0 : 1 :
$ == 21 ? @{VisiRep_2} == 1 ? 0 : 1 :
$ == 70 ? @{VisiRep_3} == 1 ? 0 : 1 :
$ == 111 ? @{VisiRep_4} == 1 ? 0 : 1 :
$ == 423 ? @{VisiRep_15} == 1 ? 0 : 1 :
$ == 446 ? @{VisiRep_16} == 1 ? 0 : 1 :
$ == 547 ? @{VisiRep_17} == 1 ? 0 : 1 :
$ == 558 ? @{VisiRep_18} == 1 ? 0 : 1 :
$ == 613 ? @{VisiRep_19} == 1 ? 0 : 1 :
$ == 645 ? @{VisiRep_20} == 1 ? 0 : 1 :
$ == 671 ? @{VisiRep_21} == 1 ? 0 : 1 :
$ == 745 ? @{VisiRep_22} == 1 ? 0 : 1 :
$ == 830 ? @{VisiRep_23} == 1 ? 0 : 1 :
$ == 875 ? @{VisiRep_24} == 1 ? 0 : 1 :
//Visibilité des répertoires du dossier Monde
$==112 ? @{Monde} && @{VisiRep_5} == 0 ? 1 : 0 :
$==227 ? @{Monde} && @{VisiRep_6} == 0== 1 ? 1 : 0 :
$==234 ? @{Monde} && @{VisiRep_7} == 0== 1 ? 1 : 0 :
$==260 ? @{Monde} && @{VisiRep_8} == 0== 1 ? 1 : 0 :
$==263 ? @{Monde} && @{VisiRep_9} == 0== 1 ? 1 : 0 :
$==278 ? @{Monde} && @{VisiRep_10} == 0== 1 ? 1 : 0 :
$==342 ? @{Monde} && @{VisiRep_11} == 0== 1 ? 1 : 0 :
$==360 ? @{Monde} && @{VisiRep_12} == 0== 1 ? 1 : 0 :
$==381 ? @{Monde} && @{VisiRep_13} == 0== 1 ? 1 : 0 :
$==395 ? @{Monde} && @{VisiRep_14} == 0== 1 ? 1 : 0 :
// Visibilité des pistes
$ > 0 && $ < 6 ? @{A} == 1 ? 1 : 0 :
$ > 6 && $ < 21 ? @{Bs} == 1 ? 1 : 0 :
$ > 21 && $ < 70 ? @{C} == 1 ? 1 : 0 :
$ > 70 && $ <  111 ? @{D} == 1 ? 1 : 0 :
$ > 112 && $ < 227 ? @{E} == 1 ? 1 : 0 :
$ > 227 && $ < 234 ? @{F} == 1 ? 1 : 0 :
$ > 234 && $ < 260 ? @{G} == 1 ? 1 : 0 :
$ > 260 && $ < 263 ? @{H} == 1 ? 1 : 0 :
$ > 263 && $ < 278 ? @{I} == 1 ? 1 : 0 :
$ > 278 && $ < 342 ? @{J} == 1 ? 1 : 0 :
$ > 342 && $ < 360 ? @{K} == 1 ? 1 : 0 :
$ > 360 && $ < 381 ? @{L} == 1 ? 1 : 0 :
$ > 381 && $ < 395 ? @{M} == 1 ? 1 : 0 :
$ > 395 && $ < 423 ? @{N} == 1 ? 1 : 0 :
$ > 423 && $ < 446 ? @{O} == 1 ? 1 : 0 :
$ > 446 && $ < 547 ? @{P} == 1 ? 1 : 0 :
$ > 547 && $ < 558 ? @{Q} == 1 ? 1 : 0 :
$ > 558 && $ < 613 ? @{R} == 1 ? 1 : 0 :
$ > 613 && $ < 645 ? @{S} == 1 ? 1 : 0 :
$ > 645 && $ < 671 ? @{T} == 1 ? 1 : 0 :
$ > 671 && $ < 745 ? @{U} == 1 ? 1 : 0 :
$ > 745 && $ < 830 ? @{V} == 1 ? 1 : 0 :
$ > 830 && $ < 875 ? @{W} == 1 ? 1 : 0 :
$ > 875 ? @{X} == 1 ? 1 : 0 : true



props.html =
$ === 0 ? '<h1>A</h1>' :   
$ == 6 ? '<h1>B</h1>' :
...
$ == 875 ? '<h1>C</h1>' : ''

props.css =
$ > 0 && $ < 6 ?  "margin-left:60px;height:60px;line-height:60px; " :
...
$ > 875 ?  "margin-left:60px;height:60px;line-height:60px; " : ""



props.mode = 
$ === 0 ?  "toggle" :
...
$ == 875 ? "toggle" : "push"


props.doubleTap =
$ === 0 ? true : 
$ == 6 ? true : 
.
$ == 875 ? true : false





props.onValue = 

$ === 0 ? "send('midi:SEL','/control',10,1,1); send('midi:OSC','/control',1,20,1); ":
$ == 6 ? "send('midi:SEL','/control',10,2,1); send('midi:OSC','/control',1,20,1); ":
...
$ == 875 ?"send('midi:SEL','/control',10,25,1); send('midi:OSC','/control',1,20,1); ":
$ > 0 && $ < 6 ? 
"send('midi:SEL','/control',1,getIndex(this)-1,1); setVar('Fav','visiFavPistes',getIndex(this));" :
$ > 6 && $ < 21 ? 
"send('midi:SEL','/control',1,getIndex(this)-2,1); setVar('Fav','visiFavPistes',getIndex(this));" :
...
"send('midi:SEL','/control',1,getIndex(this)-24,1); setVar('Fav','visiFavPistes',getIndex(this));" :
$ > 875 ? "send('midi:SEL','/control',1,getIndex(this)-25,1); setVar('Fav','visiFavPistes',getIndex(this));" :  ''

So... is that definitely a very very bad idea ?... or is there a way to set the props that would be more convenient ?...

Thank you

[jean-emmanuel]

Sessions with a very big amount of widgets eventually become slow, there's not much you can do about it. One way around is to use a custom module to decide what buttons should be shown an create them on the fly using /EDIT so that only what's needed it created in the client.

[Sylvain]

In this case, i finally use

receive('/EDIT', 'matrix_Pistes & Répertoires', {props:...})

in the custom module.

When you say 'on the fly', do you mean : the widget already exists in the session, but its properties are only set when needed, via /EDIT, that's it ?

Or litteraly, there's no pre-existing widget, and /EDIT will set everything : type, position... ?

[jean-emmanuel]

In mean replacing the matrix widget with an empty panel widget, and use /EDIT to fill its widgets property.

[Sylvain]

Ok, thank you, i had no idea we could do this kind of things.

[Sylvain]

Yahoooooooooooooo.....

Finally, i found....

Since the very beginning i had this intuition that was saying "this way of coding is too heavy, man !"....

So i came to replace this way of coding

$ > 0 && $ < 6 ? @{A} == 1 ? 1 : 0 :
$ > 6 && $ < 21 ? @{Bs} == 1 ? 1 : 0 :
$ > 21 && $ < 70 ? @{C} == 1 ? 1 : 0 :
$ > 70 && $ <  111 ? @{D} == 1 ? 1 : 0 :
$ > 112 && $ < 227 ? @{E} == 1 ? 1 : 0 :

by this one :

$ > 0   && $ < 6 ?   "VAR_{visiBasses}" : 
$ > 6   && $ < 12 ?  "VAR_{visiBois}" : 
$ > 12  && $ < 33 ?  "VAR_{visiCordes}" : 
$ > 33  && $ < 60 ?  "VAR_{visiCuivres}" : 
$ > 63  && $ < 84 ?  "VAR_{visiAfriqueEnsTer}" :        
$ > 84  && $ < 103 ? "VAR_{visiAfriqueEnsBin}" :     
$ > 103 && $ < 118 ? "VAR_{visiAfriqueSinTer}" :

Setting this in the props :

props.onValue = 
//Sélection des répertoires, pliage / dépliage
$ === 0 ?   "setVar('Pistes_Basses_*',  'visiBasses',  get('this'));   send(....);" :
$ == 6 ?    "setVar('Pistes_Bois_*',    'visiBois',       get('this'));   send(...); " :
$ == 12 ?   "setVar('Pistes_Cordes_*',  'visiCordes',   get('this'));   send(...); " :
$ == 33 ?   "setVar('Pistes_Cuivres_*',  'visiCuivres',  get('this'));   send(...

And it works absolutely perfectly (right now, with only 360 buttons)....