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