True north drag calibration only works on iPad and with camera smoothing disabled

[Platform-Group]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Using the following attributes on your a-camera to try and smooth it:

      look-controls-enabled='true'
      arjs-device-orientation-controls='smoothingFactor: 0.1'

Disables the ability to drag over the bottom of your screen to adjust true north

If the current behavior is a bug, please provide the steps to reproduce.

Just did

Edit: oh yeah, make sure location services are turned off too, that also seems to disable true north drag calibration (which is very annoying)

Please mention other relevant information such as the browser version, Operating System and Device Name

I can only get the drag to calibrate true north to work on an iPad, but it stops working when smoothing is enabled

What is the expected behavior?

Drag calibration on true north works on all devices and works when smoothing is enabled

I'll add, no idea what I've been calling 'drag calibration' is actually called, couldn't find anything on it in the docs.

[nickw1]

@Platform-Group not sure what this "true north drag calibration" is, is it something enabled by default?

I don't believe it's part of AR.js, I haven't seen anything like this anywhere in the code so guessing it's part of A-Frame.

Note that arjs-device-orientation-controls is a replacement for the default DeviceOrientationControls component present by default in A-Frame, which fixes a few issues. So it's conceivable that this "true north drag calibration" feature is present in the default A-Frame code and not the replacement.

Do you still get the problem if you add the arjs-device-orientation-controls without the smoothingFactor?

i.e.

  arjs-device-orientation-controls

[Platform-Group]

Edit: Skip to the bulletpoints on my latest comment where I summarise the problem, if you don't want to look over my debugging comments.

@Platform-Group not sure what this "true north drag calibration" is, is it something enabled by default?

@nickw1 Basically on iPad's I've found that the compass doesn't work, literally no idea why. Instead north is always the direction you're pointing the device, what you can do to adjust that is drag on the screen to rotate entities around you.

I assumed it was part of https://aframe.io/docs/1.4.0/components/look-controls.html as this mentions dragging.

No it doesn't work with only arjs-device-orientation-controls, my bad in mentioning the smoothing.

[Platform-Group]

Okay, confirmed that this is part of look-controls. I was able to modify the component so that I could drag vertically as well as horizontally:

      AFRAME.components["look-controls"].Component.prototype.onTouchMove = function (t) {
        console.log('on touch move event!')
          if (this.touchStarted && this.data.touchEnabled) {
              this.pitchObject.rotation.x += .6 * Math.PI * (t.touches[0].pageY - this.touchStart.y) / this.el.sceneEl.canvas.clientHeight;
              this.yawObject.rotation.y += /*  */ Math.PI * (t.touches[0].pageX - this.touchStart.x) / this.el.sceneEl.canvas.clientWidth;
              this.pitchObject.rotation.x = Math.max(Math.PI / -2, Math.min(Math.PI / 2, this.pitchObject.rotation.x));
              this.touchStart = {
                  x: t.touches[0].pageX,
                  y: t.touches[0].pageY
              }
          }
      }

So I suppose my bug report is that arjs-device-orientation-controls breaks this part of look-controls, and that this part of look controls isn't working on android devices for some reason.

[Platform-Group]

So from modifying look-controls further: on the iPad, look controls's updateOrientation function is being reached every tick, but it isn't on android. updateOrientation just isn't ever called, which doesn't seem right. So I looked into the tick function. And it simply seems that despite having look controls enabled in my html attributes, data.enabled is false within tick().

look-controls-enabled='true'
look-controls='enabled: true; magicWindowTrackingEnabled: true; touchEnabled: true; mouseEnabled: true'

Pretty weird that android decides to selectively change enabled to false somewhere. Anyway, looking into inspect element I see that

look-controls-enabled="false" despite the fact it's explicitly set to true. So something in ar.js is disabling it by setting that attribute to false.

[Platform-Group]

I think this is the only place in the codebase which disables this attribute:

    const mobile = this._isMobile();
    this.el.setAttribute("look-controls-enabled", !mobile);
    if (mobile) {
      this.el.setAttribute("arjs-device-orientation-controls", true);
    }

So my guess is that _isMobile is flawed. But even then I think that whole 4 line snippet should be removed as it's overriding control from the developer.

The problem here seems to be twofold:

• That arjs-device-orientation-controls simply doesn't work with touch drag, which does work fine in the original look-controls
• That the _isMobile() check is forcing arjs-device-orientation-controls on android but not on iPad. I'll add that this isn't a tablet vs mobile thing, as my samsung tablet doesn't have touch drag controls working either. But either way I think the check is a bad idea.

Edit: removed those 4 lines locally, touch drag orientation is now working on all devices as long as arjs-device-orientation-controls isn't used.

[nickw1]

Thanks for that. Note that arjs-device-orientation-controls allows the smoothing; it won't work without it.

Again I'll put this on the todo list, but again feel free to submit a PR if you want it done quickly :-)