Exporting Javascript from the GUI editor

Questions
1

Hello all, Ive been using the Babylon online GUI editor and it is great, but was wonderign id there anyway to get a javascript document of what you create there, rather then a JSON that need to be parsed? im thinking something similar to how the Node Material Editor works - just so I can create things more dynamivcally and swap out certain values

many thanks

2

I’m not sure what you mean by this? Can you elaborate?

1 Like
3

sorry, I was a bit unclear…

I mean instead of the nested json objec tthat you currently get exported, that looks something like this:

{
  "root": {
    "tags": null,
    "renderToIntermediateTexture": false,
    "maxLayoutCycle": 3,
    "adaptHeightToChildren": false,
    "adaptWidthToChildren": false,
    "background": "",
    "metadata": {
      "_previousCenter": {
        "x": 1,
        "y": 1
      }
    },
    "isHitTestVisible": true,
... etc etc

I would like something that is closer to the code you would use to create the GUI elements in Javascript, ie:

  const textGUI = new TextBlock(name, text);

  textGUI.color = 'white';
  textGUI.fontSize = 24;
  textGUI.textVerticalAlignment = 1;
  textGUI.textHorizontalAlignment = 1;
  textGUI.textWrapping = true;
  textGUI.paddingRight = 20;
  textGUI.paddingBottom = 20;
  textGUI.isPointerBlocker = false;
  textGUI.isHitTestVisible = false;

So, this is similar to how the node material editor can export both a json file (when clicking ‘Save’) and a javascript file where every node block is imported from the library as an object and then connected, and wrapped as a function that returns the material (when clicking ‘Get Code’).

It would be greate to have a similar approach in the GUI editor where I have a series of GUI elements declared and parented, as they have been organised in the online editor, and then returning a container that has this GUI element hierarchy attached, but could be extracted into functions with parameters that would make it more reusable.

4

You can submit this as a Feature requests so it can be considered :slight_smile:

2 Likes