Inspector/debugLayer suggestions

[fenomas]

1. A parameter to specify an HTMLElement for the Inspector to add itself to?

2. Could the inspector take a parameter for which tab to start on?

Reasons: (1) So games with a UI can see the inspector, and (2) so I can use it as an FPS meter  

I know I'm late to this party, but since it's such a big feature an options argument might be warranted:

scene.debugLayer.show({
    popup: false,
    parentElement: document.body,
    initialTab: 3,
})

...or similar.

[Temechon]

Hi, 

These are good ideas  I'll see what I can do this week about it.

[fenomas]

Awesome, thanks! 

[Temechon]

Hi @fenomas, I didn't forget you  You can now use a 'config' object when you create the inspector. The doc is here: http://doc.babylonjs.com/overviews/using_the_debuglayer#control-the-debug-layer

[fenomas]

Hey, looks awesome!

Is there some magic required to test this locally? I tried updating to the latest BJS preview and running "scene.debugLayer.show()", but I get this sort of error:

ReferenceError: __extends is not defined at 
http://www.babylonjs.com/babylon.inspector.bundle.js:408:10782 at INSPECTOR 
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:11433) at Object.<anonymous> 
(http://www.babylonjs.com/babylon.inspector.bundle.js:408:11464) at __webpack_require__ 
(http://www.babylonjs.com/babylon.inspector.bundle.js:21:30) at Object.<anonymous> 
(http://www.babylonjs.com/babylon.inspector.bundle.js:49:19) at __webpack_require__ 
(http://www.babylonjs.com/babylon.inspector.bundle.js:21:30) at 
http://www.babylonjs.com/babylon.inspector.bundle.js:41:18 at 
http://www.babylonjs.com/babylon.inspector.bundle.js:44:10

This could be an artifact of my local build process, but with the inspector bundle minimized it's hard to tell what's going on.

[Temechon]

Are you testing from your BJS fork ? or your own repo ?

[fenomas]

I'm just using the packaged scripts from the github repo - in "/dist/preview release/babylon.js" and so forth.

Are your changes not in those builds yet, or where should I be looking?

[Temechon]

Yes it's the correct folder, and my changes are here: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/inspector/babylon.inspector.bundle.js

Locally you just have to import it (after babylon.js)...

[Dad72]

Hi Temechon,

I noticed something in the file compile js here: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/inspector/babylon.inspector.js

There are unnecessary extra semicolon. but the .ts file, it does not exist. I suppose there are added after compilation. I do not think this is normal?

exemple in _build and dispose: (I notice that this happens with the empty function)

var INSPECTOR;
(function (INSPECTOR) {
    /**
     * Represents a html div element.
     * The div is built when an instance of BasicElement is created.
     */
    var BasicElement = (function () {
        function BasicElement() {
            this._div = INSPECTOR.Helpers.CreateDiv();
        }
        /**
         * Returns the div element
         */
        BasicElement.prototype.toHtml = function () {
            return this._div;
        };
        /**
         * Build the html element
         */
        BasicElement.prototype._build = function () { };
        ;
        /** Default dispose method if needed */
        BasicElement.prototype.dispose = function () { };
        ;
        return BasicElement;
    }());
    INSPECTOR.BasicElement = BasicElement;
})(INSPECTOR || (INSPECTOR = {}));

 

and in passing I have a suggestion. would not it be nice to add the show Options () the opportunity to add the css file to create our own theme? I wish I could make a theme white rather than black.

Or maybe have three options to change the backgroundColor and TextColor and elementBackground ways has to change colors quickly as desired. it would be really great.

scene.debugLayer.show({
    ...
    fileCSS: "http://www....",
    // Or
    backgroundColor: "white",
    TextColor: "black",
    ElementColor: "white"
});

Thank you Temechon

[GameMonetize]

Ping @Temechon

[Dad72]

Re Ping @Temechon. 

[Temechon]

Sorry I checked the post and thought I'll answer later, but forgot

About semicolon, I have no idea. I'll check in the code just to be sure.

About the theme, it's not easy to do it as everything is done in css right now (and not in JS). I have one idea I have to test, as it can be possible to do it by rewriting the whole css file by replacing colors with new ones... But that would mean a link between the css file and the js one (the variable name at least).

I'll let you know once this is done.

[Dad72]

Temechon thank you. Because I do not see how to create a different color theme.

[Temechon]

It's explained in the doc : http://doc.babylonjs.com/overviews/customize_debug_layer

[Dad72]

Sounds me complicated. I thought a simpler ways by simply referencing the css file you create. then a link to this in the options would be much easier.

[Temechon]

Wait for bjs new build, you'll have a gift : 

scene.debugLayer.show({
    popup:true, 
    initialTab : 2, 
    parentElement:document.getElementById('#inspector'),
    newColors: {
        backgroundColor: '#eee',
        backgroundColorLighter: '#fff',
        backgroundColorLighter2: '#fff',
        backgroundColorLighter3: '#fff',
        color: '#333',
        colorTop:'red', 
        colorBottom:'blue'
    }
});

The doc is ready, will be deployed on next monday.

[Dad72]

Cool, it's perfect. thank you Temechon

[GameMonetize]

Inspector updated