Help! Automation image painting in panel

[goldee]

const var instimg_pnl1 = Content.getComponent ("instimg_pnl1");
instimg_pnl1.loadImage("{PROJECT_FOLDER}instimg_pnl1.png", "instimg_pnl1");
instimg_pnl1.setPaintRoutine(function(g)
{
var a = this.getLocalBounds(0);
g.drawImage ("instimg_pnl1", a, 0, 0);
});

const var instimg_pnl2 = Content.getComponent ("instimg_pnl2");
instimg_pnl2.loadImage("{PROJECT_FOLDER}instimg_pnl2.png", "instimg_pnl2");
instimg_pnl2.setPaintRoutine(function(g)
{
var a = this.getLocalBounds(0);
g.drawImage ("instimg_pnl2", a, 0, 0);
});

const var instimg_pnl3 = Content.getComponent ("instimg_pnl3");
instimg_pnl3.loadImage("{PROJECT_FOLDER}instimg_pnl3.png", "instimg_pnl3");
instimg_pnl3.setPaintRoutine(function(g)
{
var a = this.getLocalBounds(0);
g.drawImage ("instimg_pnl3", a, 0, 0);
});

const var instimg_pnl4 = Content.getComponent ("instimg_pnl4");
instimg_pnl4.loadImage("{PROJECT_FOLDER}instimg_pnl4.png", "instimg_pnl4");
instimg_pnl4.setPaintRoutine(function(g)
{
var a = this.getLocalBounds(0);
g.drawImage ("instimg_pnl4", a, 0, 0);
});

const var instimg_pnl5 = Content.getComponent ("instimg_pnl5");
instimg_pnl5.loadImage("{PROJECT_FOLDER}instimg_pnl5.png", "instimg_pnl5");
instimg_pnl5.setPaintRoutine(function(g)
{
var a = this.getLocalBounds(0);
g.drawImage ("instimg_pnl5", a, 0, 0);
});

i have writen code that paints image for each panel separately how do i write a loop that minimize the amount of code

[dannytaurus]

@goldee To put this in a loop, I would grab the block that is repeated each time:

const var instimg_pnl1 = Content.getComponent ("instimg_pnl1");
instimg_pnl1.loadImage("{PROJECT_FOLDER}instimg_pnl1.png", "instimg_pnl1");
instimg_pnl1.setPaintRoutine(function(g)
{
  var a = this.getLocalBounds(0);
 g.drawImage ("instimg_pnl1", a, 0, 0);
});

And put it in a loop structure:

for (panel in panels) // we'll make the panels list later
{
  const var instimg_pnl1 = Content.getComponent ("instimg_pnl1");
  instimg_pnl1.loadImage("{PROJECT_FOLDER}instimg_pnl1.png", "instimg_pnl1");
  instimg_pnl1.setPaintRoutine(function(g)
  {
    var a = this.getLocalBounds(0);
    g.drawImage ("instimg_pnl1", a, 0, 0);
  });
}

Then change the instimg_pnl1 var name to something generic and reusable, p:

for (panel in panels)
{
  const var p = Content.getComponent ("instimg_pnl1"); // 👈 p
  p.loadImage("{PROJECT_FOLDER}instimg_pnl1.png", "instimg_pnl1"); // 👈 p
  p.setPaintRoutine(function(g) // 👈 p
  {
    var a = this.getLocalBounds(0);
    g.drawImage ("instimg_pnl1", a, 0, 0);
  });
}

Then identify the parts of the block that change each time. In this case it's the instimg_pnl1 string used 4 times in the block. Change that to the panel string we're passing in from the for loop:

for (panel in panels)
{
  const var p = Content.getComponent (panel); // 👈 panel
  p.loadImage("{PROJECT_FOLDER}" + panel + ".png", panel); // 👈 panel, panel
  p.setPaintRoutine(function(g)
  {
    var a = this.getLocalBounds(0);
    g.drawImage (panel, a, 0, 0); // 👈 panel
  });
}

Now build the list of panels from your original code. There are a few ways to do this but let's use the full names:

const panels = ["instimg_pnl1","instimg_pnl2","instimg_pnl3","instimg_pnl4","instimg_pnl5"]

Add this to the loop and we're done:

const panels = ["instimg_pnl1","instimg_pnl2","instimg_pnl3","instimg_pnl4","instimg_pnl5"]

for (panel in panels)
{
  const var p = Content.getComponent (panel); 👈 panel
  p.loadImage("{PROJECT_FOLDER}" + panel + ".png", panel); 👈 panel, panel
  p.setPaintRoutine(function(g)
  {
    var a = this.getLocalBounds(0);
    g.drawImage (panel, a, 0, 0); 👈 panel
  });
}

[David Healey]

@dannytaurus I'd turn panels into an array of references instead of ids

[goldee]

@goldee thank you so much

[dannytaurus]

@David-Healey Yeah, me too. But I thought for someone learning how to do the basics of optimising repetitive code into loops, I would just show the basic method.

@goldee What David means, if we're talking about the same thing, is that you can get an array of components and loop through them directly, instead of fetching each one by name.

const panels = Content.getAllComponents("instimg_pnl\\d+");

for (panel in panels)
{
  panel.loadImage("{PROJECT_FOLDER}" + panel.getId() + ".png", "img");
  panel.setPaintRoutine(function(g)
  {
    var a = this.getLocalBounds(0);
    g.drawImage("img", a, 0, 0);
  });
}