xmlLoader Dynamic Attributes not work

xlmLoader dynamic attributes do not work.

If for example I do (approximately) :

class game {
    constructor() {
        this.themGUI = "Default";

//XML page
<Image id="background" name="background" source="Data/GUI/Sources/{{game.themGUI}}/skillbg.png"  />

The variable is never found. and the source becomes undefined.

Or maybe I didn’t understand how to use Dynamic variables. Well, I’m confused. This is talking about dynamic attribute and not dynamic variable?

Is there an example that works somewhere? I have the impression that not many people use the xmlLoader which is nevertheless great for separating the GUI design code and the events. There are just the dynamic attributes that don’t seem to work, which is extremely annoying.


I don’t know, but according to the docs, the value needs to be global. game.themGUI is not global?

I also tried with a global variable.

var themeGUI = ‘Default’;

But that doesn’t work either.

that’s not necessarily a global variable - it all depends on the context in which it is running.
If you can provide an example (the one that is not running), it might be possible to debug this, though i’ll be honest and say I personally have no experience with the XML loader

I created a PG directly in a zip which shows 3 GUIs. One without an XML variable (which works), the other with an XML variable in the middle of a URL and a last one with an XML variable which replaces a complete URL which doesn’t work either.

I think this is an XML loader bug.

You can test it here :
XML.zip (22.3 KB)

A few things to make it work:

The variable cannot be in the middle of the string. it needs to be the entire value. so the XML should be:

<Image id="babkgroundHealtBar" name="babkgroundHealtBar" source="{{themeGUI}}" width="246px" height="104px" zIndex="2" verticalAlignment="Control.VERTICAL_ALIGNMENT_TOP" />

And setting the variable should be on the global context. An interesting “side effect”. of the way the playground is running is that if you set this.whatever. it will be set in the right context so you can do this:

this.themeGUI = "Sources/Default/headbg.png";
// or
globalThis.themeGUI = "Sources/Default/headbg.png";
// or
window.themeGUI = "Sources/Default/headbg.png";

Then it works :slight_smile:


Ok, Thanks RaananW. But the problem is that I just need my variable to replace the name of the sources folder and not a complete link with the images. This allows me to create graphic themes by only specifying in which directory to look for the images.

I think it should be something essential to be able to do like this.

Currently I have a workaround which is to do it with PHP with file_get_content() and file_put_content() and replacing the name of the folder with another when you change the theme via the editor that I built.
This involves dynamically rewriting all XML files via PHP. But I would have preferred to do it with XML variables in the middle of a string as I show here.

I guess I’ll have to keep my workaround working. But when putting a variable, why are they not replaced in the middle of the chain. especially for file paths. For positions, yes, but image paths are not the best solution as it is done.

Everything is possible, just requires a bit more javascript code. there is no difference between setting a single path or the entire path (or at least I don’t see the difference), it just requires setting the full path in javascript. This is the way the XML Loader was implemented.
I agree it would be nice to be able to replace specific parts of the variable, and we will be happy to look into that in the future for sure, but probably not for the 7.0 release, which is our main target at the moment.

Yes, but my graphics kit is more than 140 images. If I have to replace the 140 images to put them in javascript, because it’s going to be quite boring to do. Also I have images that are repeated, so that would give me more than 200 images to redo in javascript. It’s not something I plan to do.

I guess you understand. For me it was simpler to just replace a variable that points to a directory.

I understand that version 7 is coming.

1 Like

Hi @RaananW,

I’m reviving the subject because you told me that this could be reviewed after version 7 was released.

As a reminder it was to be able to replace specific parts of an XML variable.

For exemple :

<Image source="{{root}}/myImage.png"  />

Currently we cannot do this. We can only do:

<Image source="{{fullRootImage}}"  />

Thanks in advance.

1 Like

Allow part matching in XMLLoader by RaananW · Pull Request #15262 · BabylonJS/Babylon.js (github.com)

1 Like

Thanks @RaananW

1 Like