Images in panels - load and unload

[Lindon]

, just to be clear I also tried just load, but this seems to load multiple images and only ever displays the first one....

[Lindon]

@Lindon ..and if I reload the image in the paint callback it works -- but that seems very inefficient..

[David Healey]

@Lindon Load all the images into the panel within on init. Then in the paint routine draw the image you want to use - you could use the panel's value to select the image if you're not using it for anything else.

[Lindon]

@David-Healey thats more or less what Im doing, but the paint routine isnt drawing what I want -despite me asking politely... its drawing the first image loaded into the panel....

[David Healey]

@Lindon Can you share the paint routine or a minimal snippet?

[Lindon]

@David-Healey sadly its a bit of a monster...

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...

[David Healey]

@Lindon I wouldn't load the images in the paint routine, I'm not sure if there's an efficiency hit but it doesn't feel like the right approach.

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);

[Lindon]

@David-Healey except this doesnt work!!!!

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

[David Healey]

@Lindon

Working here. Try this. ImageLoadTest.zip

[Lindon]

@David-Healey now even this isnt working:

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");
  });
};

[David Healey]

@Lindon do paint routines trigger for hidden panels?

[Lindon]

@David-Healey yes

[Lindon]

@Lindon well actually no paint routines trigger at all and no panel will show up even if I've commented out all teh paint routines...

[Lindon]

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

[David Healey]

@Lindon said in Images in panels - load and unload:

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

You'll figure it out

[Lindon]

@David-Healey look at this!

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

[Lindon]

@Lindon ohh

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