"height": undefined <---whata dumb ass....

everything says its there - but its not displaying...

@Lindon literally nothing is working now...I've broken it somehow...

You'll figure it out

for(i = 0; i <NUM_individualLibPanels; i++)
{
	individualLibraryPanels[i] = Content.addPanel("iLibPanel" + (i+1), 0, 0);
	Content.setPropertiesFromJSON("iLibPanel" + (i+1),  {
    "type": "ScriptPanel",
    "x": 1.0,
    "y": 0.0,
    "parentComponent": "LibraryDisplayPanel",
    "width": 275.0,
    "height": LIB_PANEL_HEIGHT,
    "borderSize": 1.0,
    "borderRadius": 0.0
  });
  individualLibraryPanels[i].showControl(false);
  individualLibraryPanels[i].setPaintRoutine(function(g)
  {
  	Console.print("painting painting");
  });
};

Working here. Try this. ImageLoadTest.zip

It always draws the first image you loaded......

Let's say we have 3 images, img1.png, img2.png, img3.png

In on init we can load them into the panel.

myPanel.loadImage("{PROJECT_FOLDER}img1.png", "img1");
myPanel.loadImage("{PROJECT_FOLDER}img2.png", "img2");
myPanel.loadImage("{PROJECT_FOLDER}img3.png", "img3");

Then in the paint routine we can select the image to draw using its name (which you can get from your json object)

var image = "img1"; //Get from your json object
g.drawImage(image, area, 0, 0);

Here's a paint routine:

function paintLibraries(g)
{
	panelValue = this.getValue();
	//Console.print(trace(panelValue));
	Console.print("trying to draw:" + panelValue.LibImage);
	
	templibImg = imageDirFile.getChildFile(panelValue.LibImage);
	this.loadImage(templibImg.toString(templibImg.FullPath), panelValue.LibImage);
	g.drawImage(panelValue.LibImage, [0,0,this.get("width"),this.get("height")], 0, 0);
	//draw edgeing in black
	g.setColour(Colours.black);
	g.drawRect([0,0,this.get("width"),this.get("height")],1);
	//draw the icon for opened or closed...
	g.setColour(Colours.white);
	if (panelValue.DisplayState == 0)
	{
		//not opened
		g.fillPath(paths.icons.PointRight, [this.get("width")-20,this.get("height")-30,15,25]);
	}else{
		//opened..
		g.rotate(radianFromDegree*90,[this.getWidth()-10,this.getHeight()-15]);
		g.fillPath(paths.icons.PointRight, [this.get("width")-15,this.get("height")-20,12,22]);
	};
};

As you can see each panel has a json object in its value and it uses this to decide which image to load....

Thinking about doing this a completely different way.. and fixing panels to thier owning JSON, not loading the json into the panel...