Tests of GUIEditor

Questions
1

Hello, @msDestiny14

I tested the editor. It works well so far. I have two questions for the moment (maybe it’s not implemented yet.)

When you save, it generates a Json file. But how do you use that in a personal project afterwards? Do we have to rewrite all the GUI code using the data from the Json file?
I would like for example that we export the code in an XML file (there is an Xml Loader extension: XML Loader | Babylon.js Documentation

Also, for example, we create a button or a GUI text field, but it does not handle any actions afterwards? (I’m talking about onPointerClickObservable, onTextChangedObservable … All observables.)
Are there any plans for this?
I imagined for example that we could in the editor select the type of observable and be able for example to inform a ‘file.js’ which executes the code to manage the interaction on a button. I know this is a part that deserves reflection and which should not be simple. A graphical interface, although it can be easily drawn, must be able to manage user interactions.

Otherwise the editor is interesting, I quickly understood how to use it. :+1:

2 Likes
2

Hey @Dad72 !

Looks like you found the editor! :joy: Really exciting to hear you are enjoying using it. Currently we’re wrapping up putting the finishing touches on it to make sure it’s at the highest quality for a public Alpha.

In the meantime though let me help you with these couple of things a few of which will be in our documentation we are working on.

If you are saving your GUI as a local json you can host it on a site and then reference the URL for use in your project like so:

let loadedGUI = await advancedTexture.parseFromURLAsync(<url here>);

For the interactions you are looking for, for example onPointerClickObservable, you can reference a control from your texture using adt.getControlByName() and then add whatever code you would like. Doing this in step in the editor is something we are exploring and hoping to build towards.

Check out this demo where I load in the json and then reference the background in line 43
https://playground.babylonjs.com/#BIIUR1#1

P.S Also planning on making a mega thread once we release the public alpha so we can keep all the feedback and question together. Please look forward to it but in the meantime also feel free to ask more questions if you have regardless! :slight_smile:

2 Likes
3

Yes indeed I have found the editor. :rofl: I figured out how to test it without really knowing if it was officially announced. I did not find any documentation and with your explanation it seems very good to me.

This is what I understood :

let loadedGUI = await advancedTexture.parseFromURLAsync('<url here>');
let myButton = advancedTexture.getControlByName("mybuttonName");
myButton.onPointerClickObservable(....);

I will wait for the documentation to find out a bit more. I understand that you want to go step by step with the editor. This is a good thing. :+1:

1 Like
4

is the parseFromURLAsync not added to the 4.2 gui?

I have saved my GUI and want to load it (not playground)

 let a = AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
      let loadedGUI = await a.parseFromURLAsync(
        "/data/guiTexture.json"
      );

However I get:

Property ‘parseFromURLAsync’ does not exist on type ‘AdvancedDynamicTexture’
package.json sais

"@babylonjs/gui": "^4.2.0",

and importing using

import { AdvancedDynamicTexture, Button } from "@babylonjs/gui/2D";

Edit: To test these features locally you need the new versions not the 4.20 stable one. So I installed the newest ones by adding to the package.json:

"@babylonjs/gui": "^5.0.0-alpha.57",
"@babylonjs/inspector": "^5.0.0-alpha.57",
"@babylonjs/core": "^5.0.0-alpha.57",
2 Likes
5

Yes this was added after 4.2 and is currently available in the 5.0 preview. :slight_smile:

6

So to clarify, you are correct, parseFromURLAsync is NOT available in Babylon.js 4.2. It is only available in 5.0.