# Headset support

**URL:** <https://forum.8thwall.com/t/headset-support/3197>\
**Category:** Technical Support\
**Created:** [October 16, 2024, 6:23pm UTC](https://forum.8thwall.com/t/headset-support/3197 "2024-10-16T18:23:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ze\_ev\_Gilad](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ze_ev_gilad/32/294_2.png) [@Ze\_ev\_Gilad](https://forum.8thwall.com/u/Ze_ev_Gilad)\
**Post date:** [October 16, 2024, 6:23pm UTC](https://forum.8thwall.com/t/headset-support/3197/1 "2024-10-16T18:23:28Z")

</div>

I recently loaded a project on a Quest which was designed for mobile, and was amazed to see that it runs very well.

But there are some HTML elements that appear in a nifty floating window – how do I control this thing? What is it called?

And how can I have the project adapt to the platform? I.e., have certain elements appear ONLY on mobile, and others only on headset?

Thanks

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [October 16, 2024, 6:35pm UTC](https://forum.8thwall.com/t/headset-support/3197/2 "2024-10-16T18:35:08Z")

</div>

It seems like you might be working with a sample project that involves AFrame. Could you share a bit more context?

---

<div class="post-metadata">

**Author:** ![Ze\_ev\_Gilad](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ze_ev_gilad/32/294_2.png) [@Ze\_ev\_Gilad](https://forum.8thwall.com/u/Ze_ev_Gilad)\
**Post date:** [October 16, 2024, 6:57pm UTC](https://forum.8thwall.com/t/headset-support/3197/3 "2024-10-16T18:57:07Z")

</div>

Yes it is an A-Frame project. Here is a published link: [Healthy Living with Physician's Weekly](https://ar.physiciansweekly.com/?experience=Psor-24-Jul)

Not sure what you mean by context?

The project loads on headset – but we don’t like the floating window for the HTML buttons. I.e., the non-XR non-Aframe non-ThreeJS elements on the page.

How can we hide/show nodes based on the client platform, i.e., mobile or headset?

Or are you saying that this is all being handled directly by A-Frame?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [October 16, 2024, 9:30pm UTC](https://forum.8thwall.com/t/headset-support/3197/4 "2024-10-16T21:30:24Z")

</div>

Thanks for sharing!

I was wondering if you cloned one of our [sample projects](https://www.8thwall.com/projects)—I’d like to take a look at the structure and frameworks for reference 🙂

Yes, AFrame would handle that. If you haven’t already, I recommend checking out their [docs](https://aframe.io/docs/1.6.0/introduction/) and sample projects—they have examples that run across multiple devices with variations for each one.

---

<div class="post-metadata">

**Author:** ![Ze\_ev\_Gilad](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ze_ev_gilad/32/294_2.png) [@Ze\_ev\_Gilad](https://forum.8thwall.com/u/Ze_ev_Gilad)\
**Post date:** [October 16, 2024, 10:02pm UTC](https://forum.8thwall.com/t/headset-support/3197/5 "2024-10-16T22:02:10Z")

</div>

No this was not a clone of a sample … it was built from scratch using aframe.

![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/0/03d2f61a66a9a90cf1d5009a0b95d5f018eebc61.jpeg)

I’m not finding any documentation about this panel, which contains our 2D elements.

What is generating this?

How can I hide it?

And, again, mainly,  
_How can we hide/show nodes based on the client platform, i.e., mobile or headset?_

If the site is run on a headset, we want to show 3D buttons for these actions, rather than 2D HTML buttons.

THanks

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [October 16, 2024, 10:49pm UTC](https://forum.8thwall.com/t/headset-support/3197/6 "2024-10-16T22:49:42Z")

</div>

This should point you in the right direction, I didn’t realize you we’re talking about the XR tablet.

> [@Hide "hands UI" and popup window for headset (Cloud Editor)](https://forum.8thwall.com/t/hide-hands-ui-and-popup-window-for-headset-cloud-editor/3182/2):
>
> Solved pray : Need to add disableXrTablet: true; in the a-scene’s xrweb parameters xrweb=“allowedDevices: any; disableDefaultEnvironment: true; disableXrTablet: true;”\>

To answer your other question:

AFrame provides some helpful components for hiding and showing things based on current device.

> **[A-Frame – Make WebVR](https://aframe.io/docs/1.6.0/components/hide-on-enter-vr.html)**
>
> A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

> **[A-Frame – Make WebVR](https://aframe.io/docs/1.6.0/components/hide-on-enter-ar.html)**
>
> A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

---

<div class="post-metadata">

**Author:** ![Ze\_ev\_Gilad](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ze_ev_gilad/32/294_2.png) [@Ze\_ev\_Gilad](https://forum.8thwall.com/u/Ze_ev_Gilad)\
**Post date:** [October 17, 2024, 12:42am UTC](https://forum.8thwall.com/t/headset-support/3197/9 "2024-10-17T00:42:31Z")

</div>

Thanks, that was very useful!

And what’s the best way to check from my AFrame components whether user is in AR or XR? There are various behaviors that need to be adjusted.

E.g., say I want to disable `xrextras-pinch-scale` ?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [October 17, 2024, 2:07am UTC](https://forum.8thwall.com/t/headset-support/3197/10 "2024-10-17T02:07:29Z")

</div>

I’d do a custom component to manage everything like this.

```auto

AFRAME.registerComponent('check-xr-mode', {
  init: function () {
    const renderer = this.el.sceneEl.renderer;

    // Wait for the renderer to be initialized
    if (renderer && renderer.xr) {
      const session = renderer.xr.getSession();

      if (session) {
        // Check the mode of the XR session
        const mode = session.mode;

        if (mode === 'immersive-ar') {
          // User is in AR mode
          console.log('User is in AR mode');
          // Disable xrextras-pinch-scale
          this.el.removeAttribute('xrextras-pinch-scale');
        } else if (mode === 'immersive-vr') {
          // User is in VR mode
          console.log('User is in VR mode');
          // Enable xrextras-pinch-scale if needed
          this.el.setAttribute('xrextras-pinch-scale', '');
        } else {
          // User is not in an XR session
          console.log('User is not in XR mode');
          // Adjust behaviors for non-XR mode if necessary
        }
      } else {
        // No XR session is active
        console.log('No XR session is active');
      }
    }
  }
});

```

---

<div class="post-metadata">

**Author:** ![Jeremy\_Immordino](https://avatars.discourse-cdn.com/v4/letter/j/e19adc/32.png) [@Jeremy\_Immordino](https://forum.8thwall.com/u/Jeremy_Immordino)\
**Post date:** [October 17, 2024, 2:10am UTC](https://forum.8thwall.com/t/headset-support/3197/11 "2024-10-17T02:10:03Z")

</div>

Hey !

We faced the same problems 😁 I scratched my head a lot yesterday on this panel and AR/XR behaviours

To complement @GeorgeButler answer,  
This template has a responsive-immersive component that also does exactly what we need

> **[World Tracking Portal | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/portal-aframe/code/components/responsive-immersive.js)**
>
> This example shows off the popular portal illusion in WebAR using hider materials and the camera position as an event trigger.

It is very well done  
In my case for exemple I had to adapt the fog parameters depending the device  
It will work for false/true parameters

 ![image](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/b/b596a798286c31440ed13b59f9c2b4ab7432b100.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [October 21, 2024, 2:10am UTC](https://forum.8thwall.com/t/headset-support/3197/12 "2024-10-21T02:10:52Z")

</div>

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.