Detect Google Cardboard Magnetic Button Click in J

Question

With refering to Detecting Magnetic Button on Cardboard in C# is there anyway to access the magnetic cardboard button within Javascript in a browser of a mobile phone?

cheers Stefan

Answer 1

I was finally able to solve the problem myself. Fortunately time and a bit of luck helped for solution (it wouldn't have been possible by the time I was actually asking for it).

The solution is based on the "Generic Sensor API" proposed by the W3C and in particular the implementation for the Magnetometer API.

see the following specs - https://developers.google.com/web/updates/2017/09/sensors-for-the-web - https://www.w3.org/TR/generic-sensor/ - https://w3c.github.io/magnetometer/

However, there are some caveats:

• You need to have at least Chrome version 63 (and I am not aware that any other browser currently supports it) which by the time of my writing is only available as a developer edition.

• You need to enable

  • chrome://flags/#enable-generic-sensor

  • chrome://flags/#enable-generic-sensor-extra-classes

• Code must be delivered via HTTPs or from localhost! If not, you get Security exceptions...

I have extracted the following code from my much more complex code. I hope I did not overlook anything.

this.lastSensorX = 0;

try {
  this.sensor = new Magnetometer();
  if (this.sensor!==undefined) {
       this.sensor.start();
  }
} catch(err) {
            console.log("Magnetometer not supported. Make sure you configure chrome://flags/#enable-generic-sensor-extra-classes and deliver via HTTPS.");
}

....

// Check major differences on Magnetometer and identify this as a button-click

if (this.sensor !== undefined) {
  this.sensor.onreading = () => {
     var delta= this.sensor.x-this.lastSensorX;
      
     if (delta > 100 ) {
           // do whatever you want to do, in case the cardboard magnet has been "clicked"
     }
     this.lastSensorX = this.sensor.x;
  }
  
  this.sensor.onerror = event => console.log(event.error.name + " (Magnetometer): ", event.error.message);

}

I used the above snipped in my own application it it works perfectly.

Answer 2

You can actually just listen for a touchstart event on the canvas that is rendering your WebGL scene.

canvas.addEventListener( "touchstart", onCardboardClick );

function onCardboardClick() {}

Click is technically happening on a mouseup so you might want to attache the touchend event instead. That is up to you.

EDIT FOR COMMENT

Make sure that the event listener gets added to the right canvas. You mentioned you used THREE.js. So I assume you have an instance of WebGLRenderer. You can make sure you get the right element by taking the reference there. After everything is setup you can add

renderer.domElement.addEventListener( "touchstart", onCardboardTouch );