What is the syntax for using "i" in a loop when referring to a numbered component?

Oli Ullmann

@VirtualVirgin
Make an array that contains all the buttons. Let's say you name the array "buttons".

Then you can do this:

for(b in buttons)
b.setValue();

VirtualVirgin

@Oli-Ullmann
Thanks :)
Can I make an array that contains arrays?

Oli Ullmann

@VirtualVirgin
I think you can do that. Just try it! :-)
I am not at my Computer so I can't test it.

d.healey

@VirtualVirgin said in What is the syntax for using "i" in a loop when referring to a numbered component?:

For example-
If I have 12 components defined as "Key0" - "Key11", and I want to use .setValue() on each

How do I word the "i" in the loop so that I can use the function on all 12,
so the result would be:

Key0.setValue();
Key1.setValue();
Key2.setValue();
etc...

You need to put your components into an array. Then you can use i (it doesn't have to be called i, that's just convention) to access elements in the array.

VirtualVirgin

@d-healey said in What is the syntax for using "i" in a loop when referring to a numbered component?:

You need to put your components into an array. Then you can use i (it doesn't have to be called i, that's just convention) to access elements in the array.

So that works, but it still makes a big mess of code to do repetitive things:

//Key components
const var OneOctaveKeyboard0 = [Content.getComponent("Key0"),
							 Content.getComponent("Key1"),
                             Content.getComponent("Key2"),
                             Content.getComponent("Key3"),
                             Content.getComponent("Key4"),
                             Content.getComponent("Key5"),
                             Content.getComponent("Key6"),
                             Content.getComponent("Key7"),
                             Content.getComponent("Key8"),
                             Content.getComponent("Key9"),
                             Content.getComponent("Key10"),
                             Content.getComponent("Key11")];
fullKeyboard0.push(OneOctaveKeyboard0);                             
                             
const var OneOctaveKeyboard1 = [Content.getComponent("Key12"),
                                Content.getComponent("Key13"),
                                Content.getComponent("Key14"),
                                Content.getComponent("Key15"),
                                Content.getComponent("Key16"),
                                Content.getComponent("Key17"),
                                Content.getComponent("Key18"),
                                Content.getComponent("Key19"),
                                Content.getComponent("Key20"),
                                Content.getComponent("Key21"),
                                Content.getComponent("Key22"),
                                Content.getComponent("Key23")];
fullKeyboard0.push(OneOctaveKeyboard1);  

const var OneOctaveKeyboard2 = [Content.getComponent("Key24"),
                                Content.getComponent("Key25"),
                                Content.getComponent("Key26"),
                                Content.getComponent("Key27"),
                                Content.getComponent("Key28"),
                                Content.getComponent("Key29"),
                                Content.getComponent("Key30"),
                                Content.getComponent("Key31"),
                                Content.getComponent("Key32"),
                                Content.getComponent("Key33"),
                                Content.getComponent("Key34"),
                                Content.getComponent("Key35")];
fullKeyboard0.push(OneOctaveKeyboard2); 

const var OneOctaveKeyboard3 = [Content.getComponent("Key36"),
                                Content.getComponent("Key37"),
                                Content.getComponent("Key38"),
                                Content.getComponent("Key39"),
                                Content.getComponent("Key40"),
                                Content.getComponent("Key41"),
                                Content.getComponent("Key42"),
                                Content.getComponent("Key43"),
                                Content.getComponent("Key44"),
                                Content.getComponent("Key45"),
                                Content.getComponent("Key46"),
                                Content.getComponent("Key47")];
fullKeyboard0.push(OneOctaveKeyboard3); 

const var OneOctaveKeyboard4 = [Content.getComponent("Key48"),
                                Content.getComponent("Key49"),
                                Content.getComponent("Key50"),
                                Content.getComponent("Key51"),
                                Content.getComponent("Key52"),
                                Content.getComponent("Key53"),
                                Content.getComponent("Key54"),
                                Content.getComponent("Key55"),
                                Content.getComponent("Key56"),
                                Content.getComponent("Key57"),
                                Content.getComponent("Key58"),
                                Content.getComponent("Key59")];
fullKeyboard0.push(OneOctaveKeyboard4);

const var OneOctaveKeyboard5 = [Content.getComponent("Key60"),
                                Content.getComponent("Key61"),
                                Content.getComponent("Key62"),
                                Content.getComponent("Key63"),
                                Content.getComponent("Key64"),
                                Content.getComponent("Key65"),
                                Content.getComponent("Key66"),
                                Content.getComponent("Key67"),
                                Content.getComponent("Key68"),
                                Content.getComponent("Key69"),
                                Content.getComponent("Key70"),
                                Content.getComponent("Key71")];
fullKeyboard0.push(OneOctaveKeyboard5);

const var OneOctaveKeyboard6 = [Content.getComponent("Key72"),
                                Content.getComponent("Key73"),
                                Content.getComponent("Key74"),
                                Content.getComponent("Key75"),
                                Content.getComponent("Key76"),
                                Content.getComponent("Key77"),
                                Content.getComponent("Key78"),
                                Content.getComponent("Key79"),
                                Content.getComponent("Key80"),
                                Content.getComponent("Key81"),
                                Content.getComponent("Key82"),
                                Content.getComponent("Key83")];
fullKeyboard0.push(OneOctaveKeyboard6);

const var OneOctaveKeyboard7 = [Content.getComponent("Key84"),
                                Content.getComponent("Key85"),
                                Content.getComponent("Key86"),
                                Content.getComponent("Key87"),
                                Content.getComponent("Key88"),
                                Content.getComponent("Key89"),
                                Content.getComponent("Key90"),
                                Content.getComponent("Key91"),
                                Content.getComponent("Key92"),
                                Content.getComponent("Key93"),
                                Content.getComponent("Key94"),
                                Content.getComponent("Key95")];
fullKeyboard0.push(OneOctaveKeyboard7);
 
const var OneOctaveKeyboard8 = [Content.getComponent("Key96"),
                                Content.getComponent("Key97"),
                                Content.getComponent("Key98"),
                                Content.getComponent("Key99"),
                                Content.getComponent("Key100"),
                                Content.getComponent("Key101"),
                                Content.getComponent("Key102"),
                                Content.getComponent("Key103"),
                                Content.getComponent("Key104"),
                                Content.getComponent("Key105"),
                                Content.getComponent("Key106"),
                                Content.getComponent("Key107")];
fullKeyboard0.push(OneOctaveKeyboard8);

const var OneOctaveKeyboard9 = [Content.getComponent("Key108"),
                                Content.getComponent("Key109"),
                                Content.getComponent("Key110"),
                                Content.getComponent("Key111"),
                                Content.getComponent("Key112"),
                                Content.getComponent("Key113"),
                                Content.getComponent("Key114"),
                                Content.getComponent("Key115"),
                                Content.getComponent("Key116"),
                                Content.getComponent("Key117"),
                                Content.getComponent("Key118"),
                                Content.getComponent("Key119")];
fullKeyboard0.push(OneOctaveKeyboard9);

const var OneOctaveKeyboard10 = [Content.getComponent("Key120"),
                                 Content.getComponent("Key121"),
                                 Content.getComponent("Key122"),
                                 Content.getComponent("Key123"),
                                 Content.getComponent("Key124"),
                                 Content.getComponent("Key125"),
                                 Content.getComponent("Key126"),
                                 Content.getComponent("Key127"),
                                 //Content.getComponent("Key128"),
                                 //Content.getComponent("Key129"),
                                 //Content.getComponent("Key130"),
                                 //Content.getComponent("Key131")];
fullKeyboard0.push(OneOctaveKeyboard10);

Isn't there some way to make that more compact?
It seems odd to me that the index in a loop can't apply to a component name number, as it forces the manual steps to at least get anything into an array.

VirtualVirgin

@Oli-Ullmann said in What is the syntax for using "i" in a loop when referring to a numbered component?:

@VirtualVirgin
I think you can do that. Just try it! :-)
I am not at my Computer so I can't test it.

Yes :) Making an array inside an array works.

To reference it then I just put use the index for the next level to the right of the first index, so here I have a nested loop which goes through two levels of the arrays:

//Loop for setting LAF
for (j = 0; j < fullKeyboard0.length; j++)
{
	for (i = 0; i < 12; i++) 
 		fullKeyboard0[j][i].setLocalLookAndFeel(keysLaf);		
}

d.healey

@VirtualVirgin said in What is the syntax for using "i" in a loop when referring to a numbered component?:

So that works, but it still makes a big mess of code to do repetitive things:

Yes, so don't do it that way :)

const myArray = Content.getAllComponents("Key\\d"); // The \\d is regex for any number

You could also use a loop, I've shown this in a few videos.

for (i = 0; i < numberOfButtons; i++)
{
    myArray.push(Content.getComponent("Key" + i);
}

If you're making a custom keyboard you would probably be better off either customising the stock keyboard or using a panel.

VirtualVirgin

@d-healey said in What is the syntax for using "i" in a loop when referring to a numbered component?:

If you're making a custom keyboard you would probably be better off either customising the stock keyboard or using a panel.

I can't use the stock keyboard for multiple reasons and I tried making one from a panel like you have in one of the videos, but the math for the click/over areas gets more tricky when moving beyond the stripes. Overlapped buttons does the job easier.

The keyboard I am making here is not for displaying incoming MIDI, but for pitch class set and pitch set information (so scale filters and harmonizers etc.).

Lindon

@VirtualVirgin said in What is the syntax for using "i" in a loop when referring to a numbered component?:

@d-healey said in What is the syntax for using "i" in a loop when referring to a numbered component?:

You need to put your components into an array. Then you can use i (it doesn't have to be called i, that's just convention) to access elements in the array.

So that works, but it still makes a big mess of code to do repetitive things:

//Key components
const var OneOctaveKeyboard0 = [Content.getComponent("Key0"),
							 Content.getComponent("Key1"),
                             Content.getComponent("Key2"),
                             Content.getComponent("Key3"),
                             Content.getComponent("Key4"),
                             Content.getComponent("Key5"),
                             Content.getComponent("Key6"),
                             Content.getComponent("Key7"),
                             Content.getComponent("Key8"),
                             Content.getComponent("Key9"),
                             Content.getComponent("Key10"),
                             Content.getComponent("Key11")];
fullKeyboard0.push(OneOctaveKeyboard0);                             
                             
const var OneOctaveKeyboard1 = [Content.getComponent("Key12"),
                                Content.getComponent("Key13"),
                                Content.getComponent("Key14"),
                                Content.getComponent("Key15"),
                                Content.getComponent("Key16"),
                                Content.getComponent("Key17"),
                                Content.getComponent("Key18"),
                                Content.getComponent("Key19"),
                                Content.getComponent("Key20"),
                                Content.getComponent("Key21"),
                                Content.getComponent("Key22"),
                                Content.getComponent("Key23")];
fullKeyboard0.push(OneOctaveKeyboard1);  

const var OneOctaveKeyboard2 = [Content.getComponent("Key24"),
                                Content.getComponent("Key25"),
                                Content.getComponent("Key26"),
                                Content.getComponent("Key27"),
                                Content.getComponent("Key28"),
                                Content.getComponent("Key29"),
                                Content.getComponent("Key30"),
                                Content.getComponent("Key31"),
                                Content.getComponent("Key32"),
                                Content.getComponent("Key33"),
                                Content.getComponent("Key34"),
                                Content.getComponent("Key35")];
fullKeyboard0.push(OneOctaveKeyboard2); 

const var OneOctaveKeyboard3 = [Content.getComponent("Key36"),
                                Content.getComponent("Key37"),
                                Content.getComponent("Key38"),
                                Content.getComponent("Key39"),
                                Content.getComponent("Key40"),
                                Content.getComponent("Key41"),
                                Content.getComponent("Key42"),
                                Content.getComponent("Key43"),
                                Content.getComponent("Key44"),
                                Content.getComponent("Key45"),
                                Content.getComponent("Key46"),
                                Content.getComponent("Key47")];
fullKeyboard0.push(OneOctaveKeyboard3); 

const var OneOctaveKeyboard4 = [Content.getComponent("Key48"),
                                Content.getComponent("Key49"),
                                Content.getComponent("Key50"),
                                Content.getComponent("Key51"),
                                Content.getComponent("Key52"),
                                Content.getComponent("Key53"),
                                Content.getComponent("Key54"),
                                Content.getComponent("Key55"),
                                Content.getComponent("Key56"),
                                Content.getComponent("Key57"),
                                Content.getComponent("Key58"),
                                Content.getComponent("Key59")];
fullKeyboard0.push(OneOctaveKeyboard4);

const var OneOctaveKeyboard5 = [Content.getComponent("Key60"),
                                Content.getComponent("Key61"),
                                Content.getComponent("Key62"),
                                Content.getComponent("Key63"),
                                Content.getComponent("Key64"),
                                Content.getComponent("Key65"),
                                Content.getComponent("Key66"),
                                Content.getComponent("Key67"),
                                Content.getComponent("Key68"),
                                Content.getComponent("Key69"),
                                Content.getComponent("Key70"),
                                Content.getComponent("Key71")];
fullKeyboard0.push(OneOctaveKeyboard5);

const var OneOctaveKeyboard6 = [Content.getComponent("Key72"),
                                Content.getComponent("Key73"),
                                Content.getComponent("Key74"),
                                Content.getComponent("Key75"),
                                Content.getComponent("Key76"),
                                Content.getComponent("Key77"),
                                Content.getComponent("Key78"),
                                Content.getComponent("Key79"),
                                Content.getComponent("Key80"),
                                Content.getComponent("Key81"),
                                Content.getComponent("Key82"),
                                Content.getComponent("Key83")];
fullKeyboard0.push(OneOctaveKeyboard6);

const var OneOctaveKeyboard7 = [Content.getComponent("Key84"),
                                Content.getComponent("Key85"),
                                Content.getComponent("Key86"),
                                Content.getComponent("Key87"),
                                Content.getComponent("Key88"),
                                Content.getComponent("Key89"),
                                Content.getComponent("Key90"),
                                Content.getComponent("Key91"),
                                Content.getComponent("Key92"),
                                Content.getComponent("Key93"),
                                Content.getComponent("Key94"),
                                Content.getComponent("Key95")];
fullKeyboard0.push(OneOctaveKeyboard7);
 
const var OneOctaveKeyboard8 = [Content.getComponent("Key96"),
                                Content.getComponent("Key97"),
                                Content.getComponent("Key98"),
                                Content.getComponent("Key99"),
                                Content.getComponent("Key100"),
                                Content.getComponent("Key101"),
                                Content.getComponent("Key102"),
                                Content.getComponent("Key103"),
                                Content.getComponent("Key104"),
                                Content.getComponent("Key105"),
                                Content.getComponent("Key106"),
                                Content.getComponent("Key107")];
fullKeyboard0.push(OneOctaveKeyboard8);

const var OneOctaveKeyboard9 = [Content.getComponent("Key108"),
                                Content.getComponent("Key109"),
                                Content.getComponent("Key110"),
                                Content.getComponent("Key111"),
                                Content.getComponent("Key112"),
                                Content.getComponent("Key113"),
                                Content.getComponent("Key114"),
                                Content.getComponent("Key115"),
                                Content.getComponent("Key116"),
                                Content.getComponent("Key117"),
                                Content.getComponent("Key118"),
                                Content.getComponent("Key119")];
fullKeyboard0.push(OneOctaveKeyboard9);

const var OneOctaveKeyboard10 = [Content.getComponent("Key120"),
                                 Content.getComponent("Key121"),
                                 Content.getComponent("Key122"),
                                 Content.getComponent("Key123"),
                                 Content.getComponent("Key124"),
                                 Content.getComponent("Key125"),
                                 Content.getComponent("Key126"),
                                 Content.getComponent("Key127"),
                                 //Content.getComponent("Key128"),
                                 //Content.getComponent("Key129"),
                                 //Content.getComponent("Key130"),
                                 //Content.getComponent("Key131")];
fullKeyboard0.push(OneOctaveKeyboard10);

Isn't there some way to make that more compact?
It seems odd to me that the index in a loop can't apply to a component name number, as it forces the manual steps to at least get anything into an array.

so this is pretty easy and std to do:

const OneOctaveKeyboard0;
const OneOctaveKeyboard1;
for(i=0;i<12;i++)
{
      OneOctaveKeyboard0[i] = Content.getComponent("Key"+ i);
      OneOctaveKeyboard1[i] = Content.getComponent("Key"+ (i+12));
};

VirtualVirgin

@Lindon Thanks! I will use that to clean things up.

ustk

@VirtualVirgin And to add up on friends examples, you can nest two arrays (aka 2D array) so everything lies in one unique keyboard array:

const var keyboards = [];

for (oct=0; oct<11; oct++)
{
	keyboards[oct] =[]; /* add a nested octave array that will hold 12 keys */
	
	for(key=0; key<12; key++)
	{
		var keyNb = oct*12 + key;
		
		if (keyNb > 127)
			break; /* 128 is time to break the loop boy */
		
		keyboards[oct][key] = Content.getComponent("Key" + keyNb);
	}
};

What is the syntax for using "i" in a loop when referring to a numbered component?

26

1.8k

12.2k

106.0k