Introducing the GUI Editor Alpha!

Hey @renman87 currently this is out of scope for v1 of the editor. Granted this is something I can see us implementing in later versions if the community wants it :smiley:

@msDestiny14
I have the same error.
If I test from the link : https://gui.babylonjs.com/ It works.
But if I use from this link to test in local, I get this error :
Babylon.js/guiEditor/public at master Ā· BabylonJS/Babylon.js Ā· GitHub
The error occurs locally because GUIEditorNodeMaterial.json cannot be found.
Iā€™m assuming GUIEditorNodeMaterial.json exists at https://gui.babylonjs.com/

I am up to date, my caches are well empty.

I use :

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/guiEditor/babylon.guiEditor.js"></script>

GUIEditorNodeMaterial.json is found with the Babylon url, but not locally.
Does this file have to be appended or is it automatically appended?

1 Like

If you a look at folders the GUIEditorNodeMaterial.json. itā€™s thereā€¦but itā€™s not finding it? I think I need to embed the node material directly inside the code. Let me see about implementing that today.

Also Iā€™m wondering if I should default to the white background just incase something happens. I think I will add that as well. Thanks for keeping me posted.

1 Like

Yes it is. because I donā€™t add it to my local directory. I thought he was calling automatically. On GitHub indicate to use babylon.guiEditor.js. the hardware node is not mentioned.

It is a good idea to integrate it directly into the code. Thank you

Here we go. (Ya this was on my todo list :slight_smile: )

Should be fixed once this gets merged in and nightly.

1 Like

Hi @msDestiny14

The problem still exists, even with the changes.
I have updated fine, clearing the caches, but I still get the same error.

Uncaught (in promise) LoadFileError: Error status: 404 Not Found - Unable to load GUIEditorNodeMaterial.json
    at t [as constructor] (babylon.js:16)
    at new t (babylon.js:16)
    at babylon.js:16
    at XMLHttpRequest.m (babylon.js:16)

Iā€™m a little confused by this since now that the node material is embedded there is no .json file anymore. Nor a place where it should be loading a file. :thinking:

Please, can you try to download the files from this link, then test the index.html file in localhost. Iā€™m sure you will get this same error.

I use its files available in guiEditor / public / without modifying anything. I put this in a http localhost server. I open the index.html file. and in the console there is this error.

Iā€™m also confused if you say this should be good. There must be something wrong.

Edit: @msDestiny14

Ok, the update didnā€™t work. look at the preview release/guiEditor/babylon.guiEditor.max.js file line 46746
(it is the only reference like that)

 return [4 /*yield*/, nodeMaterial.loadAsync("GUIEditorNodeMaterial.json")];

This is normal, the nightly has not been released so far.

I will do it in a couple hours.

2 Likes

After the nightly released, the error is corrected. Thank you. :+1:

2 Likes

Hi everyone!

Couple of announcements! We recently updated our selection system for the GUI Editor.

Let me show you how it works. Select will now start at the highest container of a given child control. If you wish to get the child control, simply double click to go down the tree by 1. Keep doing this to reach the desired control.

click on image

double click

double click

You will now also be able to select and move without toggling modes! Yep thatā€™s rightā€¦ no more selection then move. You can do it all in one! :slight_smile:

As a second announcement, weā€™ve have had a bit of changes coming into the editor the last couple of weeks. Because of this, we will be updating all the documentation for the GUI editor together as soon possible.

2 Likes

So I (finally!) tried the GUI editor, very nice tool, congrats :+1:t3:

If I may, here some feedbacks:

  • in the layers panel, it could be nice to have a mention of the advanced dynamic texture (if Iā€™m not wrong, itā€™s only accessible by clicking in an empty zone)
  • finding a way to get access to hover/clicked state of an element could be very handy (to change color or other properties), maybe a ā€œlittleā€ tool once in a playground could help generate observables function of such items? Seems hard to implement :smiley:
  • and a tiny one, for readibility when an on/off button is on, maybe darker a bit the background? dark
1 Like

If it is possible (I believe it is) it would be extremely nice to have some colors for enabled and disabled states (green/red).
It will save a huge portion of human time and attention.
I still cannot remember until I open GUI Editor which color is for enabled - black or white? It is not intuitive. A bit of color for flags (like in any decent 3D editor) would make the using of GUI Editor much more productive.

2 Likes

@Vinc3r @labris These are excellent points and thank you for the feedback!

For the checkbox I think we can see about changing some colors for that. Let me see what team thinks would be the best way to go for that.

As for the hover/clicked states. This is something we intend to implement in a V2 for the editor. Please look forward more details as that time comes! :slight_smile:

2 Likes

Speaking of hover/enabled statesā€¦ having the control properties for those exposed to the editor would be a very valuable addition that would help separate code and design better!

Having a state toggle similar to browser or CSS tools that toggle between various pseudo-classes like :visited, :disabled, etc is how I think Iā€™d picture it, then you donā€™t have to do much past establishing and maintaining a state machine in the gui editor to handle the visual state changes.

HTH

1 Like

Agreed and Iā€™d like to add that obviously the point is to have contrasting colors here - when it comes time to implement though letā€™s not forget to choose colors that folks with things like color blindness can still see and distinguish between states :sunglasses::slightly_smiling_face:

1 Like

Yes! I agree with this exactly. Perhaps even a visual indicator with text where one side of the toggle has the text value for one and the text value for the other is on the other side. Or maybe the text changes when you hit the toggle.

All these are things to think about.

1 Like

please add an implementation of undo\redo for at least one step, any if only for relocations.
ctrl+z - unexpectedly related to zoom.
The editor is just a gift for a beginner, heā€™s awesome!!!

1 Like

Thanks for the feedback! At the moment we donā€™t have any plans to add undo support for 5.0, but we are hoping to build an undo/redo system for all our tools in in the future.

What we can do for now is disable the CTRL+Z shortcut and replace it with a message explaining that undo is not implemented.