scene.debugLayer : Copy last command to Clipboard

[Tricotou]

Hello all,

When it comes to debuging a scene, using

scene.debugLayer.show();

Is very helpfull, for sure.

But something which would be nice would be a button on each param, which would copy the last command to the clipboard. For example :

Let’s say I just tweeked Environment param, in the Levels panel of a Material.
The arborescence in the debugLayer : Material --> Levels --> Environment
Is in fact quite different from the actual attribute path : material.environmentIntensity;

Something great would be to edit the way the UI is built by adding some copy buttons. And when you hit the copy button :

It would be sooooo great, when you are tunning stuffs, (particles settings, colors, levels, etc, etc…)

Who is in ?

++
Tricotou

[Cedric]

I love the idea! This makes total sense when developping on the playrgound and less when tweaking a scene in the sandbox. So, make it optional if you want to start a PR

[dennemark]

+1 !

Was also missing this recently! Naming is not always consistent with code, so this would be super beneficial!

[sebavan]

cc @Deltakosh

[Deltakosh]

Love it!! who wants to try to do a PR??

[Deltakosh]

of course!

[j-te]

Please consider responsiveness, for the narrow-sized UI

Plus what would be good is zero-ing (or defaulting) the value with a right-click on the control.

[Tricotou]

Hello guys !

@Deltakosh

Love it!! who wants to try to do a PR??

Glad you love the idea !
I would very interested in starting my contribution to Babylon.JS with this idea, but maybe it’s a bit too early considering my knowledge of the repo which is quite new.

@Heaust-ops

I’ll work on it

Ah ! Did you already started ? Yesterday night I gave it a try. I would be interested in knowing from you guys, how far am I to being validated a PR. If you already worked on it no worries, I’ll consider my work as a training

---

Here is what I did so far :

• I forked + cloned
• I edited some files in order to achieve the new features
• Running npm run build:dev gives no error
• Running npm run serve -w @tools/babylon-server Allows me to try and it works great
• I pushed back to my branch tricotou-feature on my Babylon.js fork.

Here is a screenshot of the new inspector :

And here is a live screencast of the result :

---

About my work, here is what I did :
I edited some files such as
dev/sharedUiComponents/src/lines/sliderLineComponent.tsx to add the copy button :

<div className="copy hoverIcon" onClick={() => this.onCopyClick()} title="Copy to clipboard">
    <img src={copyIcon} alt="Copy" />
</div>

I have done it for Sliders, Checkboxes, Color3&4, Vector3, List … (5 files edited)
As well I had to edit some CSS in :
dev/inspector/src/components/actionTabs/actionTabs.scss
In order to include the structure change.

I inspired from the copy button which was already available for color pickers. (And that I modified by adding the command to the hex code retreived)

---

Now, what I would like to understand :

• Why is there no comments in the source file I’ve cloned ?
• Should I add some comments and push again ?
• What are exactly the next steps ? (From going to “it works on my machine” to having my code being released ? )

See you
++ Tricotou

[Tricotou]

@Heaust-ops

Oh that’s awesome!

Thanks

@Deltakosh did you have a look at the video ? What do you think ?

Also, maybe I did not understand well the point about comments.
Having a look at the docs about contribution comments it seems that I need to comment indeed. I’m just surprised that the files I’ve worked on (example here) are absolutely free of any comments. Is it because there is some kind of CI/CD which gets rids of the comments at master merge, or something ? Should I comment my stuffs before doing a PR ?

++
Tricotou

[Deltakosh]

Man! This is HUGE!! Let me ping @PatrickRyan just for the UI aspect but man! I love it

Regarding comments: we are enforcing them on the main core library but tools (for now) are in a grace period where we do not yet enforce it. THAT BEING SAID, for new PR we expect comments

[Tricotou]

Thanks !
Ok for the comments, got it. I’ll comment, for sure

[Joe_Kerr]

@Tricotou may I be so bold and kindly ask for a feature request to the feature request

Copy last node to Console

Like you do in DevTools of Chrome (Firefox too?):

That would be cool in the Inspector.

[Tricotou]

@Joe_Kerr I’m not sure I understand what you mean by “copy last node” Can you develop the idea or eventually edit a screenshot of the inspector to show the concept ?

[Joe_Kerr]

Sure thing

Like so?

[Tricotou]

Ah yes, I see, nice idea !
I don’t know exactly the rules about global scope variables in BJS, so for now I extended the existing window interface, by adding a debugNode property :

declare global {
    interface Window {debugNode: any;}
}

And I’m overriding it in the onSelect of the treeItemComponents

Result is cool :

What do you think ?

++
Tricotou

[Joe_Kerr]

No way You did and already?

Voting for making today the “Tricotou-Inspector-Magic” day

[Tricotou]

@Joe_Kerr

You did and already?

Yes, it works like a charm

If you want to give it a try easily, I build it (and already used it, by the way )
You can get the inspector bundle HERE

---

By the way, about adding the debugNode triggered by click in the Scene Viewer… The commit is 10 lines ! I have seen much worse commits in my life, to be honest, ahah. The ratio Usefull / Lines of Codes is good, I’m happy

---

@Joe_Kerr

Voting for making today the “Tricotou-Inspector-Magic” day

Ahah, sure

++
Tricotou

[Joe_Kerr]

@Tricotou

You can get the inspector bundle HERE

I tried, in the console, “debugNode” and “window.debugNode” but it returns undefined

…wait, does the Inspector need the same version as Babylon - because I am still at 7.0.0 with Babylon?

[Tricotou]

@Joe_Kerr

does the Inspector need the same version as Babylon

I’m too new to the repo to answer a definitive “YES”, but anyway I would advise indeed to keep the core at same version.

In addition to the babylon.inspector.bundle.js, on the same server I’m also hosting babylon.js, babylon.gui.min.js, babylonjs.material.min.js and babylon.glTFFileLoader.min.js. They have been build together.

---

[EDIT] I apologize, indeed the repo on hover.tricotools.com what not on the last commit. copyCommandToClipboard was ok, but not the last debugNode update. I just pushed, you can give it a new try

---

++
Tricotou

[Joe_Kerr]

It is working and it is so cool Thanks Tricotou.