CODEWITHSUNDEEP
ionic-frameworkionic3360-panorama
Setu Kumar Basak
Setu Kumar Basak

Reputation: 12042

Rotate the 360 degree image when device is tilted in Ionic 3?

I am using ricoh-theta-viewer plugin for viewing a panaroma image in 360 degree view. I could easily have a 360 degree view of the panaroma image using this library. When i touch the image, it will slide in the direction of the touch in the 360 degree view. But, i want to tilt the image when the device orientation has been changes means when user is rotating or orienting the device left, right, up or down. I tried to use below code:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {RicohView} from 'ricoh-theta-viewer';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  ricohView: any;
  previousAlpha = 0;
  previousBeta = 0;
  previousGamma = 0;


  constructor(public navCtrl: NavController) {
    window.addEventListener("deviceorientation", (event) => this.onDeviceOrientation(event), true)
  }

  initialize = () => {
    this.ricohView = new RicohView({
      id: "ricoh-360-viewer",
      file: 'assets/imgs/sample.jpg', rendererType: 0,
      height: window.innerHeight, width: window.innerWidth, zoom: 130
    });
  };

  onDeviceOrientation(ev) {

    if (this.canSetCameraDir(ev.alpha, ev.beta, ev.gamma)) {
      this.previousAlpha = ev.alpha;
      this.previousBeta = ev.beta;
      this.previousGamma = ev.gamma;
      this.ricohView.setCameraDir(ev.alpha, ev.beta, ev.gamma)
    }
  }

  ionViewDidLoad() {
    this.initialize();
  }

  canSetCameraDir(alpha, beta, gamma) {
    let canSet = false;
    let calculatedAlpha = Math.abs(this.previousAlpha - alpha);
    let calculatedBeta = Math.abs(this.previousBeta - beta);
    let calculatedGamma = Math.abs(this.previousGamma - gamma);

    if (calculatedAlpha > 40 || calculatedBeta > 40 || calculatedGamma > 40) {
      canSet = true;
    }

    return canSet;
  }

}

But, the problem is that, the image is being rotated using the alpha, beta and gamma of the deviceorientation event listener which is wrong. May be i need to manipulate the alpha, beta and gamma and then fit in the this.ricohView.setCameraDir function so that i can get accurate rotation of the image.

Can anyone point me out my mistake?

Upvotes: 0

Views: 902

Answers (1)

Rajesh Panda
Rajesh Panda

Reputation: 646

Set 'orientationChange' = true in the constructor.

That should enable the device orientation event inside package. That feature enables the gesture movement.

Upvotes: 1

Related Questions