Webxr-buttons div moved or removed?

🌵 Needle Engine
1

I was using this before the latest Needle WebXR changes to grab the WebXR buttons div and hide or show them, is it renamed?

  start() {
    console.log("started");
    this.mainContext = this.context;
    const div = this.context.domElement.shadowRoot!.querySelector(
      ".webxr-buttons"
    ) as HTMLElement;
    if (!div) {
      console.warn("Could not find webxr-buttons element");
      return;
    }

Original Post on Discord

by user 103054507105067008

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

3

You can access it via the getButtonsContainer here for example: Discord

4

Or alternatively:
this.context.domElement.queryElement("needle-webxr-buttons")should also work (it’s a custom webcomponent now)
Capto_Capture_2024-01-30_10-55-54_PM.png

5

Sweet, investigating how to hide/show those send to quest and qr code buttons now as those are new, very cool to have the QR code one I’m using it a lot now rather than Chrome’s send QR code

by user 103054507105067008

6

You can just disable them in the WebXr component (there are options in unity)

7

Capto_Capture_2024-01-30_10-58-41_PM.png

8

At runtime is it possible now to enable or disable those buttons showing? I have a model viewer using url params to dictate if AR or VR buttons show etc

by user 103054507105067008

9

getButtonsContainer().arButton.style.display = "none" or remove()

10

My functionality for it already sort of works so I’m just checking what I need to add for the QR code one

by user 103054507105067008

11

Looks easy enough thank you

by user 103054507105067008

12

For this I get this.context.domElement.queryElement is not a function

by user 103054507105067008

13

sorry it’s querySelector

14

How do I get the QRbutton like this example for the sendToQuestButton? xr.getButtonsContainer().sendToQuestButton.style.display = "none";

by user 103054507105067008

15

There’s no such button built-in right now - but you can use the QR code function to generate the image (import via @needle-tools/engine)

            const size = 200;
            const code = await generateQRCode({
                text: window.location.href,
                width: size,
                height: size,
            });
            qrCodeContainer.innerHTML = "";
            qrCodeContainer.appendChild(code);