Images in a Viewport

[DanH]

@d-healey lol, missed that!

[DanH]

@d-healey why this?

inline function removeAllChildPanels(panel)
{
	for (x in panel.getChildPanelList())
		x.removeFromParent();
}

[d.healey]

@DanH Go to where I'm calling that function, there's a comment

[DanH]

@d-healey Ok got there with a bit of help from ChatGBT (hate using it but assume as the code is very close to JavaScript it was actually very close)

Here's the final code which has worked for me:

const var PresetList = Content.getComponent("PresetList");

Engine.loadImageIntoPool("*");

//! vptList
const vptList = Content.getComponent("vptList");

//! pnlList
const pnlList = Content.getComponent("pnlList");
pnlList.data.rowHeight = 55;

const var columns = 3;

// Define the spacing between the panels (adjust as needed)
const var panelWidth = 100;
const var panelHeight = 55;
const var spacingX = 5;
const var spacingY = 5;

//! Functions
inline function populateList(panel)
{
	removeAllChildPanels(panel); // Remove old child panels before adding new ones

	for (i = 0; i < 19; i++)
		addListItem(panel, i);
	
	panel.set("height", panel.data.rowHeight * panel.getChildPanelList().length);
}

inline function addListItem(panel, index)
{

	local p = panel.addChildPanel();
	p.data.index = index; // Set the index here so the child panel knows its own index
	p.loadImage("{PROJECT_FOLDER}img" + index + ".png", "img");
	p.set("allowCallbacks", "All Callbacks");

	// Calculate the column and row index
	local columnIndex = index % columns;
	local rowIndex = Math.floor(index / columns);
	                    
	// Calculate the x and y position based on the index
	local xPos = columnIndex * (panelWidth + spacingX);
	local yPos = rowIndex * (panelHeight + spacingY);
	                    
	// Set the position of the panel
	p.setPosition(xPos, yPos, panelWidth, panelHeight);
	                   
	//p.setPosition(0, panel.data.rowHeight * index, panel.getWidth() / 3, panel.data.rowHeight);

	p.setPaintRoutine(function(g)
	{
		var a = this.getLocalBounds(0);
		g.drawImage("img", a, 0, 0);
		
		g.setColour(this.data.hover ? 0xFF01737B : 0x00000000);
		g.drawRect(a, 1);
	
	});	
	
	p.setMouseCallback(function(event)
	{		
		if (!event.clicked)
			return;
	
		PresetList.setValue(this.data.index);
		PresetList.changed();
		Console.print(this.data.index);
	});	
}


inline function removeAllChildPanels(panel)
{
	for (x in panel.getChildPanelList())
		x.removeFromParent();
}

//! Calls
populateList(pnlList);

Please let me know if you spot anything that might cause me issues down the line! :)

Thanks so much for the help!

[d.healey]

@DanH Looks fine