Images in a Viewport

[d.healey]

@DanH I'll put an example together, give me a few minutes

[d.healey]

Here's an example project.

viewport_image_demo.zip

[DanH]

@d-healey ok this looks good, thanks :)

How can I create it so there's 3 columns and set the width of each column?

[d.healey]

@DanH said in Images in a Viewport:

How can I create it so there's 3 columns and set the width of each column?

Any more requirements I should know about before I answer this?

[DanH]

@d-healey Can I create gaps between each child panel if they look better with them? And each child panel requires a callback. Sorry, haven't used panels and script like this before so not sure what's possible! Many thanks

[d.healey]

@DanH said in Images in a Viewport:

Can I create gaps between each child panel if they look better with them?

Yes - they are just panels, it is no different to what you can do when you manually add panels in the interface designer.

@DanH said in Images in a Viewport:

And each child panel requires a callback

Does the callback need to be different for each child panel? If so, why?

[DanH]

@d-healey the callbacks just need to set the value of another viewport according to their number. So childpanel / img01 should set the other viewport to 1.

+.changed(); of course.

[d.healey]

@DanH So for that you just need one callback that all the child panels will share.

Modify the addListItem function

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 + ".jpg", "img");
	p.set("allowCallbacks", "All Callbacks");
	p.setPosition(0, panel.data.rowHeight * index, panel.getWidth(), panel.data.rowHeight);

	p.setPaintRoutine(function(g)
	{
		var a = this.getLocalBounds(0);
		g.drawImage("img", a, 0, 0);
	});
	
	p.setMouseCallback(function(event)
	{		
		if (!event.clicked)
			return;

		// Do the thing
		Console.print(this.data.index);
	});	
}

[d.healey]

@DanH said in Images in a Viewport:

How can I create it so there's 3 columns and set the width of each column?

For this you need to draw a grid of child panels in the container panel (pnlList).

So create a new project and place a grid of panels in the interface designer. Look at their X/Y positions. Now try to come up with a formula that will place the panels in those positions for you (dare I say ChatGPT might be useful here... might).

Then try it with child panels.

Then try it with different widths for each column.

[DanH]

@d-healey do I need to set the child panels' callbacks to include clicks?

[d.healey]

@DanH

[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