fenomas Posted February 13, 2017 Share Posted February 13, 2017 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. adam and jerome 2 Quote Link to comment Share on other sites More sharing options...
Temechon Posted February 13, 2017 Share Posted February 13, 2017 Hi, These are good ideas I'll see what I can do this week about it. adam and jerome 2 Quote Link to comment Share on other sites More sharing options...
fenomas Posted February 13, 2017 Author Share Posted February 13, 2017 Awesome, thanks! Quote Link to comment Share on other sites More sharing options...
Temechon Posted March 20, 2017 Share Posted March 20, 2017 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 jerome 1 Quote Link to comment Share on other sites More sharing options...
fenomas Posted March 21, 2017 Author Share Posted March 21, 2017 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. Quote Link to comment Share on other sites More sharing options...
Temechon Posted March 21, 2017 Share Posted March 21, 2017 Are you testing from your BJS fork ? or your own repo ? Quote Link to comment Share on other sites More sharing options...
fenomas Posted March 21, 2017 Author Share Posted March 21, 2017 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? Quote Link to comment Share on other sites More sharing options...
Temechon Posted March 21, 2017 Share Posted March 21, 2017 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)... Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 22, 2017 Share Posted March 22, 2017 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 22, 2017 Share Posted March 22, 2017 Ping @Temechon Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 28, 2017 Share Posted March 28, 2017 Re Ping @Temechon. Quote Link to comment Share on other sites More sharing options...
Temechon Posted March 28, 2017 Share Posted March 28, 2017 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. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 28, 2017 Share Posted March 28, 2017 Temechon thank you. Because I do not see how to create a different color theme. Quote Link to comment Share on other sites More sharing options...
Temechon Posted March 28, 2017 Share Posted March 28, 2017 It's explained in the doc : http://doc.babylonjs.com/overviews/customize_debug_layer Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 28, 2017 Share Posted March 28, 2017 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. Quote Link to comment Share on other sites More sharing options...
Temechon Posted March 28, 2017 Share Posted March 28, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted March 28, 2017 Share Posted March 28, 2017 Cool, it's perfect. thank you Temechon Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 28, 2017 Share Posted March 28, 2017 Inspector updated Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.