Mozilla AFRAME a-frame launch inspector from button onclick instead keystroke

3
votes

We all know that you can launch the inspector using strg+alt+i, but I am right now trying to add a button to my user interface that does the same thing: 

function customEnterInspector () {
        var scene = document.querySelector('a-scene');
        if (scene) {
            if (scene.hasLoaded) {
                this.injectInspector();
            } else {
                scene.addEventListener('loaded', this.injectInspector());
            }
        }
    }

    $( "#intoinspector" ).click(function() {
        customEnterInspector();
    });

However, I do get the error: 

 Uncaught TypeError: this.injectInspector is not a function
at customEnterInspector (index.html:925)
at HTMLAnchorElement.<anonymous> (index.html:933)
at HTMLAnchorElement.dispatch (jquery-3.1.1.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.1.1.min.js:3)

I suppose the element (a-scene) that I am referencing is not the right one. I already tried with "window", but that didn't work either. Any advice on what I could else try?

Thanks & Best, - Max

2
javascriptmozillaaframe
Side note on JS syntax: foo.addListener('event', callback()) will not work, because callback() is called immediately, not passed to the listener. Instead, you'll want foo.addListener('event', callback), which just hands the function to the listener so that it can be called later. Adding () makes the function run immediately, which we don't want. More details. - Don McCurdy

2 Answers

1
votes

This code is working great too. 

function openEditor()
{
    window.postMessage('INJECT_AFRAME_INSPECTOR','*');
}

I have attached this function to a image that executes the previous code:

<input type="image" src="images/edit.png" width="35" height="35" onclick="openEditor();"/>
0
votes

The injectInspector() method is part of the inspector component on the scene object. In the code snippet you've posted above, this is referring to the button element, which does not have that method. To refer to the component, you can do this:

 var inspector = scene.components.inspector;

 // Show inspector immediately.
 inspector.injectInspector();

 // Show inspector after event.
 scene.addEventListener('loaded', function () {
   inspector.injectInspector();
 });