Introducing the GUI Editor Alpha!

[msDestiny14]

Thank you @user2 for the feedback. It’s good for us to hear what frustrates you UX wise so we can hopefully turn that around for everyone.

The scroll wheel and color selector are items we plan to implement in the coming updates. Stay tuned! For the font. Would you like the ability to upload your own font? I agree this would be way less limiting. I can look into some ways to try to make that happen.

Please let us know of anything else on your mind.

@Mekaboo
I’m not entirely sure what you asking
We do have a copy button but I don’t think that’s what you mean…

[Blake]

Heya, I’m happy to be trying out the new GUI editor! Here’s an initial issue I’m experiencing on my MacBook thou. Part of the toolbar (the one on the left, for adding components to the GUI) is cut off. On Chrome the bottom half of the slider button is cut off and on FireFox the slider button is completely cut off.

Here’s some screenshots to show better what I mean:

EDIT: in case anyone else is having this problem, I just zoomed the browser out to 80% and now can see and use the missing components, Slider, VirtualKeyboard, and ColorPicker

[Dad72]

@msDestiny14

Quel navigateur utilisez-vous.

I am using google chrome.

[Blake]

Positioning the buttons where I want and loading my first GUI from the snippet server was a breeze! One more thing I did find thou is that when saving the snippet to the server, it says that the id has been copied to my clipboard but for me it isn’t… Edit, ooh and also the tooltip for bottom alignment says center…

[msDestiny14]

@Blake logging the two issues. I see what you mean for the icons being too big if your window size is smaller. As for the the snippet server I was unable to repro but will look into it.

@Dad72 Weird I was also not able to repro this, but I will log it and see if anyone else can.

Will keep you posted

[Blake]

Heya, I noticed that the ImageButton is missing from the menu and added the entry for it in the WorkbenchEditor’s createItems method. I’ve been using it locally and it seems like this was the only thing missing, except for a unique icon image for its button on the toolbar (I just used the same one as the TextButton so I could start using it). I would have made a quick PR for it but IDK if it was left out on purpose or what the icon should be.

[Dad72]

@msDestiny14

@Dad72 Weird I was also not able to repro this, but I will log it and see if anyone else can.

I tried to reproduce it in a separate file. But I did not succeed. I’m not sure why it does this to me. Maybe some css conflicts somewhere.

[Dad72]

Ok, I found the problem. I am using this css class which conflict with this same class you are using. And there are others.

Maybe you could add a prefix to your class names and css ids which would avoid conflict with our own css use.

What I use and who create a conflict :

.divider {
	height: 0.5px;
	width: 100%;
	background-color: grey !important;
	margin-top: 1px;
	margin-bottom: 1px;
	z-index: 4;
}

[Blake]

Update, I checked the console and an exception is thrown after I click the “Save to snippet server” button: “Uncaught (in promise) DOMException: Document is not focused.”

Also, I tried calling the same function that you use, navigator.clipboard.writeText, and it worked when I called it in the playground for example.

[Mekaboo]

Sorry about that…

Instead of loop and creating a panel use the editor to create a certain amount of buttons where each button’s position can be adjusted.

I’ve tried to make more than one copy of mesh or button but it came down to doing a loop and couldn’t adjust positions separately

[Blake]

Okay, so I think I’ve got a little fix to the issue of Chrome not being able to copy to the clipboard unless the document has focus. It’s a little change to wait until after the promise for writing to the clipboard has resolved before showing the alert message.

The issue I think was that the alert window was taking the focus away from the document, which is why the “Document is not focused” exception was being thrown on Chrome I suspect.

Here’s a little patch for it

Fix copying snippet id to clipboard for Chrome

Edit: Incidentally, I think there was a race condition, where if writing to the clipboard finished before the the alert message was created then it worked without error, but when the document lost focus to the alert window before writing to the clipboard finished then the “Document is not focused” exception was thrown on Chrome, which I think explains why the error didn’t always occur.

[msDestiny14]

@Dad72 Thank you for finding a repro. I will add a ge- prefix to make it unique and will not conflict with you.

@Blake Thank you so much as well!

@Mekaboo I’d like to be able to see what you’d like. Is this something you’re doing in code? Care to share a PG? One think you can do in the editor is create your button and use the serialize function to copy it in real time and change the position. We are looking to expand on templatized stuff more in the future. .

[Mekaboo]

Here ya go …
This was a PG someone helped me with:
https://www.babylonjs-playground.com/#HTWJPL#7

This was the PG I eventually made and stuck with:
https://playground.babylonjs.com/#HTWJPL#82

I wanted to make more than one copy but realized doing a for loop it seems that each mesh/button position can’t be switched around.

I’m wondering that with the GUI editor one can make say 5 or more copies and easily adjust the look so things wont look so uniformed.

BTW If I didn’t say this…excellent work…very cool stuff

[carolhmj]

Amazing work! I’ll see if I try out some things so I can get a sense in how to use it and give feedback!

[msDestiny14]

Hey there @Mekaboo

Now I get what you’re saying. Take a look at the demo I made changes too. Step one was I made my “dream” button template using the GUI editor. Babylon.js Gui Editor

Next thing I did was load it into your playground. Next I found the button in my adt using getControlByName(). Finally in your loop to create the houses I clone the button using serilization and make adjustments.

let serializationObject = {};
button.serialize(serializationObject);
let newControl = BABYLON.GUI.Control.Parse(serializationObject, advancedTexture);
newControl.left = (index * 10) + "%";
newControl.children[0].text = name;
advancedTexture.addControl(newControl);

https://www.babylonjs-playground.com/#HTWJPL#85

Let me know if you have any questions!

[Blake]

Is there a way to set the displayed background color in the GUI editor? Currently it’s white, but for a darker scene I would want lighter-colored controls/outlines, which are hard to see in the preview because they aren’t as visible against the bright white background.

For example here I tried to set the background color of the root container, but really I just want to change the color from white on the preview and let it remain transparent on the texture.

[Dad72]

Indeed, the color of the canvas of the editor could receive another background color.

[Blake]

Good call, a simple setting to control the canvas’ background color would prob do the trick

[msDestiny14]

Hey @Dad72 have a present! Adding ge- prefix and changing tooltip by msDestiny14 · Pull Request #11297 · BabylonJS/Babylon.js · GitHub

Also @Blake I wanted to talk more about the image button and the background color. Originally we had image button and text button in. However what you can actually do is just create a normal text button and parent an image inside it. Looking towards the future we want to have some kind of component like system where you will be able to checkbox flag. “Add image” or “Add text” for example.

As for the background. This is an up and coming feature for sure! Originally we wanted to have a checkered board background like what you would see in photoshop. This would indicate transparency. There were some difficulties getting it perfectly in for alpha but I think I have a better idea what to do. I think we will be adding it as a node material to the mesh holding the adt and then changing the root color should update in real time.

Both of these will be something we look into in the coming milestone so we will keep you posted!

[Blake]

Excellent, I didn’t realize image buttons were already supported but just played around with it a little more and got one working by parenting like you said

https://gui.babylonjs.com/#Q1WLYG#1
https://playground.babylonjs.com/#4RTUCB#23