A couple of expansion questions

[rzrsharpeprod]

@d-healey said in A couple of expansion questions:

cp.loadImage(pathToImage, "Icon");

We have lift off!!!

In the loop I used

e.getWildcardReference("Icon.png")

and in the paint routine I called

g.drawImage("Icon", a, 0, 0);

and they work.

The hover doesn't work on the icon though, only the part underneath that is just the rest of the panel with the text on. Not sure why the icon doesn't react?

[rzrsharpeprod]

@d-healey said in A couple of expansion questions:

If you want to attach arbitrary data to the panel that needs to go inside its data object.

Which I have done. I have populated the tags and I can call them to be the "text" object using

cp.set("text", tags);

but I can't then have both the expansion name and the tags to be set as "text".
It wants one or the the other unless I combine them

cp.set("text", expansionName + "" + tags);

which I don't want to do as that puts them on the same line in the panel

If this isn't what you are referring to then I don't understand sorry

[d.healey]

@rzrsharpeprod said in A couple of expansion questions:

Not sure why the icon doesn't react?

What do you expect it to do?

@rzrsharpeprod said in A couple of expansion questions:

the "text" object using

There is no "text object". Text is a property of the panel.

Here's the loop I posted earlier that copies all of the expansion's properties into the child panel's data object.

local props = e.getProperties();

for (x in props)
    cp.data[x] = props[x];

So now if you want the expansion name in the paint routine or mouse callback you can use this.data.Name (the case will match the output of the object you get from expansion.getProperties();

[rzrsharpeprod]

@d-healey said in A couple of expansion questions:

What do you expect it to do?

I thought that the image would react to the hover as it did before the image was loaded into it because of the line

g.fillAll(Colours.withAlpha(Colours.darkgrey, this.data.hover ? 1.0 : 0.4));

Actually I just realised that all I needed to put that line after the drawimage line in the repaint so that is solved.

local props = e.getProperties();

for (x in props)
    cp.data[x] = props[x];

I thought you were just saying you used this in Rhapsody but didn't realise you were saying to add it to my project apologies.
Ok so I have set the first line of text using this.data.Name and the 2nd line using the tags pulled in from the expansion data and it works and looks how I wanted it to.

Ok so that's 2 things sorted, thankyou.

On to the click event now so that it loads the expansion - well sets it I think is the term.
Am I best to write a function that handles what happens when an expansion is set and then call that as part of the cp code? Or is there a better way to approach it?

[d.healey]

@rzrsharpeprod You can probably just do it all in the mouse callback because I think it's just a single function call if I remember correctly. If you need something more elaborate you can break it out into a separate function.

The call is something like expansionHandler.setCurrentExpansion(expansionName)

[rzrsharpeprod]

@d-healey I put it directly in my click callback like this

cp.setMouseCallback(function(event){
		this.data.hover = event.hover;
		Console.print("Hover");
		
		if (event.clicked)
		Console.print("Clicked");
		expHandler.setCurrentExpansion(expansionName);
				
		this.repaint();

but got the error

 Can't reference local variables in nested function body

So I created an inline function loadExpansion() and called it at the end of my code

inline function loadExpansion()
{
expHandler.setCurrentExpansion(expansionName);
}

But then got this doing that

API call with undefined parameter 0

[d.healey]

@rzrsharpeprod said in A couple of expansion questions:

  if (event.clicked)
  Console.print("Clicked");
  expHandler.setCurrentExpansion(expansionName);

You need curly braces for your if statement {}

Second, the error message is telling you what the problem is. expansionName is a variable you declared outside of the mouse callback, you can't use it in the mouse callback. You have to get the data you want from the child panel where you stored it.

[rzrsharpeprod]

@d-healey said in A couple of expansion questions:

Second, the error message is telling you what the problem is. expansionName is a variable you declared outside of the mouse callback, you can't use it in the mouse callback. You have to get the data you want from the child panel where you stored it.

Ah so I can use the this.data.Name again. That will sink in one day I promise.

Did that and added the {} and it sets the current expansion when clicked now thankyou.

I'll leave you alone now for a bit as I try and figure out eth best way to load the correct UI elements and trigger the controls repaint

Thankyou again for all your advice and patience, it really is much appreciated

[d.healey]

@rzrsharpeprod Excellent, glad it's starting to come together :)

[rzrsharpeprod]

@d-healey Now that this has all come together and is working nicely, the dropshadow question has reared it's ugly head.

How can I add a dropshadow - preferably an offset one - underneath each child panel?

[d.healey]

@rzrsharpeprod Two methods. Draw it as part of the child panel, or do what I did with Rhapsody and draw it as part of the parent panel.

Rhapsody/Scripts/Grid.js at main

Rhapsody - HISE based sample library player.

Codeberg.org (codeberg.org)

[rzrsharpeprod]

@d-healey I found one of your posts on here saying something similar but I can't get it to underneath with a bottom right offset like a true dropshadow would. It seems to draw from all sides at once and only on top and on the bottom portion of the tiles with the text not on the image. Presumably it is also drawing it on the bottom and right edges as well but you can't see it as it outside the bounds of the child panel

[rzrsharpeprod]

@rzrsharpeprod @d-healey I realised that the bottom section of the tiles were transparent so when I filled them and changed to drawing them in the grid under each one it worked