Images in a Viewport

[d.healey]

@DanH put panel in viewport, use paint routine

[DanH]

@d-healey ok so basically use a panel! I'm using the viewport as a user menu to load table shapes. I'd like to display the shape of the table next to the name of the preset shape. I guess I could insert a panel next to the names perhaps and populate it with the correct images.... Perhaps I should shift this idea into a panel...

[DanH]

@d-healey would a button pack be a good choice for this?

HISE | Docs

(docs.hise.audio)

[d.healey]

@DanH I'd use a panel in the viewport and child panels for each list item

[DanH]

@d-healey actually maybe there's no need for the names.... just images would be nicer. I'll give it a go but if you know of any examples that would be very welcome!

[DanH]

@d-healey getting somewhere. There's a lot of panel with images in. Can I create a for loop to manage their callbacks rather than writing out one for each panel / image?

const var SHAPEARRAY = [Content.getComponent("SHAPE1"), Content.getComponent("SHAPE2")];

/// Panel Callbacks
SHAPE1.setMouseCallback(function(event)
{
	if (event.clicked)
	{
		PresetList.setValue(0);
		PresetList.changed();
	}

});

SHAPE2.setMouseCallback(function(event)
{
	if (event.clicked)
	{
		PresetList.setValue(1);
		PresetList.changed();
	}

});

[d.healey]

@DanH said in Images in a Viewport:

Can I create a for loop to manage their callbacks rather than writing out one for each panel / image?

You absolutely should do this. Start with 3 in a little test project to get the hang of it. They should all use the same callback function and probably the same paint routine.

[DanH]

@d-healey any chance of a hand with this please?!

Getting confused on how to write the g.loadImage line... Getting the error: Interface:! Image ts[Array] not found... I mean I could be on totally the wrong path

const var SHAPE1 = Content.getComponent("SHAPE1");
const var SHAPE2 = Content.getComponent("SHAPE2");
const var SHAPE3 = Content.getComponent("SHAPE3");

const var SHAPESIMAGESARRAY = [
                               Content.getComponent("SHAPE1"),
                               Content.getComponent("SHAPE2"),
                               Content.getComponent("SHAPE3")];

SHAPE1.loadImage("{PROJECT_FOLDER}AGAIN.png", "ts1");
SHAPE2.loadImage("{PROJECT_FOLDER}AMA.png", "ts2");
SHAPE3.loadImage("{PROJECT_FOLDER}ANTIDOTE.png", "ts3");

for (i = 0; i < 4; i++)
{
	SHAPESIMAGESARRAY[i].setPaintRoutine(function(g)
	{
		g.drawImage(("ts" + [i]), [0, 0, 100, 50], 0, 0);
	});
}

[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!