A couple of expansion questions

[rzrsharpeprod]

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

You have not loaded the images into the panels. Start with one regular panel and one expansion, and make it all work. Once you have this you can tackle it with child panels - which is basically the same thing, but overcomplicates it and makes it seem confusing.

Is this

if (isDefined(imageList[i]) && imageList[i] != "")
g.drawImage(imageList[i], [x, y, width, height], 0, 0);

and this

loadImages();

not doing that?
Regardless the error messages I'm getting are

{EXP::ExpansionName}Icon.png not found

for each expansion so it looks like it isn't even finding the images to load either way or have I misunderstood the error?

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

This is just regular paint routine stuff, I have a few videos about paint routines. Make yourself a paint routine sandbox project and play around.

So it is possible to set 2 separate lines of text? I can then set the position of each through paint routines.
I wasn't sure if you could set 2 separate text items or if it would have to be 1 with a carriage return or something similar?

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

I don't really know what your saying there, so probably not. You can see how I've implemented the hover action, so you just need to add your click event in the mouse callback too.

What I mean is the hover isn't really distnguishing between an end action, regardless of what child panel it is hovering over it is doing the same action. Whereas with the load if it is child panel1 it is doing 1 thing specifically (load exp 1), child panel 2 being clicked would load exp 2 and so on.
Its that unique end action that I can't get my head around. I hope that makes sense?

[d.healey]

@rzrsharpeprod said in A couple of expansion questions:

Is this

if (isDefined(imageList[i]) && imageList[i] != "")
g.drawImage(imageList[i], [x, y, width, height], 0, 0);

and this

loadImages();

Nope, loadImages there is a function you wrote, so don't let the name mislead you into thinking it actually loads images into panels.

Go watch my video about using images with panels, you have to load the image into the panel before you can use it in the paint routine.

@rzrsharpeprod said in A couple of expansion questions:

So it is possible to set 2 separate lines of text? I can then set the position of each through paint routines.
I wasn't sure if you could set 2 separate text items or if it would have to be 1 with a carriage return or something similar?

• set the colour
• draw a line of text
• set another colour
• draw another line of text
• etc.

@rzrsharpeprod said in A couple of expansion questions:

Whereas with the load if it is child panel1 it is doing 1 thing specifically (load exp 1), child panel 2 being clicked would load exp 2 and so on.

Loading the expansion is also the same action for all child panels. The only thing that needs to change is the name of the expansion you are loading, and you can get that from the child panel itself (this) because you've stored it as the child panel's text - or you can do it using the array method I mentioned earlier, but I think the text method is the way I would go.

@rzrsharpeprod said in A couple of expansion questions:

Its that unique end action that I can't get my head around. I hope that makes sense?

I see the misunderstanding here. The action is not unique, it's the same for all the children. The expansion name that you pass to the loadExpansion function is unique.

I think you're getting close to that trigger moment :)

[rzrsharpeprod]

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

I think you're getting close to that trigger moment :)

I hope so! Maybe I am as even as I was writing that I thought I bet I can set expansion name using the variable so it is kind of the same action for each one.

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

set the colour
draw a line of text
set another colour
draw another line of text
etc.

I also had this revelation as well while I was having lunch. I thought I wonder if setting a new colour will allow me to have a new text object and when I cam back you had said something along these lines

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

Nope, loadImages there is a function you wrote, so don't let the name mislead you into thinking it actually loads images into panels.

Go watch my video about using images with panels, you have to load the image into the panel before you can use it in the paint routine.

I watched one of yours the other day (the one with the cute little piglet) I will go back and rewatch it as I clearly missed something.
Is the cant find Icon.png error misleading then or is it also not finding the image becaus eit isn't loaded?

[d.healey]

@rzrsharpeprod said in A couple of expansion questions:

Is the cant find Icon.png error misleading then or is it also not finding the image becaus eit isn't loaded?

Yes, sort of. Basically the path is correct, but because the image hasn't been loaded into the panel it can't be found within the paint routine.

I can't remember the exact code but basically in the loop where you're creating the child panels you're going to need to do something like:

cp.loadImage(pathToImage, "Icon");

And then in the paint routine you'll be able to do something like:

g.drawImage("Icon");

[rzrsharpeprod]

@rzrsharpeprod Ok I will have a look and no doubt get back to you. Thankyou.

1 quick thing on the dual line text. In your snippet it uses a text object which I modified to use the expansionName

        cp.set("text", expansionName);

How do I add a 2nd version? If I do this

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

Then the 2nd just overrides the first.
I have the 2 lines showing and formatted correctly but it just repeats whatever the last definition of "text" is

I can't add "Text2" as that isn't a valid function.
I tried calling the variables expansionName & tags directly in the drawAlignedText line but it doesn't like that.

[d.healey]

@rzrsharpeprod text is a property of the panel - all components have a text property that you can change in the interface designer. All I'm doing in the script is setting that property.

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

I posted a little loop a few posts ago that adds all of the expansions properties to the child panels for you.

[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 :)