Ionicv3 with ionic native Device Orientation

Ionic Framework ionic-v3
1

hi
its seems i got into a big wall here really dont know what going on and i hope some would help me
am trying to use ionic native Device Orientation plugin to get magnatic heading for the device compass since am just trying to create a compass app

now i followed the steps in the doc
so i imported the cordova plugin then imported the ionic native
the i declard this in my app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    DeviceOrientation,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

and this is my home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  
  magneticHeading: any;
  constructor(public navCtrl: NavController,private deviceOrientation: DeviceOrientation,private platform: Platform) {
    this.magneticHeading = 0;
    



 platform.ready().then(() => {
deviceOrientation.getCurrentHeading().then(
  (data1: DeviceOrientationCompassHeading) => this.magneticHeading=data1.magneticHeading,
  (error: any) => console.log(error+"err")
);
   const options={frequency:100};
   const subscription = deviceOrientation.watchHeading(options).subscribe(
  (data3: DeviceOrientationCompassHeading) => this.magneticHeading=data3
,(error: any) => console.log(error+"errtt"));

 

subscription.unsubscribe();
 });

    
  }



  


  }
}

and always the result in my console is [object object ] err which means it was cought in the first step
deviceOrientation.getCurrentHeading().then(
(data1: DeviceOrientationCompassHeading) => this.magneticHeading=data1.magneticHeading,
(error: any) => console.log(error+“err”)
);

and these are my system info
Ionic Framework: 3.0.1
Ionic Native: ^3.5.0
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 7.2.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

if some one really nows where am wrong they will be a real life saver

regards

2

it looks like my code was solid but i needed to test it on a real device only so it was solved by its own

3

Word of advise: native functionality should be tested on a native device, unless it’s mocked appropriately.

4

Hi warbadev,

I am also trying to build a compass with Ionic and your code was already pretty helpful. I am not so experienced with Ionic and Angular, but managed to test the app on a mobile device. There is no error message popping up, so Cordova seems to work. But when I pass {{ getDegree() }} into the HTML, it shows still [object Object].

Here is my compass.ts file:

import { Component } from '@angular/core';
import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

/**
 * Generated class for the CompassComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'ion-compass',
  templateUrl: 'compass.html'
})

export class CompassComponent {
  magneticHeading: any;
  degree: number;
  
  constructor(public navCtrl: NavController,private deviceOrientation: DeviceOrientation,private platform: Platform) {
    this.magneticHeading = 0;
    this.degree = 0;
    
    

    platform.ready().then(() => {
      deviceOrientation.getCurrentHeading().then(
        (data1: DeviceOrientationCompassHeading) => this.magneticHeading=data1.magneticHeading,
        (error: any) => console.log(error+"err")
      );
      const options={frequency:100};
      const subscription = deviceOrientation.watchHeading(options).subscribe(
      (data3: DeviceOrientationCompassHeading) => this.magneticHeading=data3
      ,(error: any) => console.log(error+" - error message"));      
    });

  }

  getDegree(){
    return this.degree = this.magneticHeading;
  }

How did you solve it in the end?

Thanks!

5

Hi pfleigo…
am happy that my code helped u and regarding ur question u shouldn’t use a function to get magneticHeading since its already being handeld by the constructor so u just use it directly
remove the function getDegree() from ur code and just use {{magneticHeading}} in ur html

i hope this solves ur problem
regards

6

Hi warbadev,

thanks for your quick reply!

I took out the function and changed it to {{ magneticHeading }} in the HTML and still receive [object Object].

To check if there is any data coming through, I put a console.log to the subscription part and yes, in the console I can see constantly new values coming in from the device.

const options={frequency:100};
      const subscription = deviceOrientation.watchHeading(options).subscribe(
      (data3: DeviceOrientationCompassHeading) => console.log(data3)
      ,(error: any) => console.log(error+" - error message"));      
    });

But I have no clue how to make this data visible in the app. I end up with [object Object]. If you have any further idea, I would appreciate it!

Best

7

hi again…,
can u please share ur full code ts and html so i can find whats going on it should work if u just use it directly
regards

8

Hi,

in the end I managed to do it without using the cordova plugin, but using this method: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

But I still don’t understand why it did not work with the plugin. This is the code of the version with the cordova plugin:

This is the HTML:

<ion-grid>
  <h1>Degree:</h1> 
  <p id="degree">{{ magneticHeading }}</p>
  <img id="image" src="https://openclipart.org/image/2400px/svg_to_png/247149/dual-compass-rose.png" alt=""> 
</ion-grid>

And this is the ts file:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation';

@Component({
    selector: 'ion-compass',
    templateUrl: 'compass.html'
})
export class CompassComponent {
  
    magneticHeading: any;
  
    constructor(public navCtrl: NavController,private deviceOrientation: DeviceOrientation,private platform: Platform) {
        this.magneticHeading = 0;
        platform.ready().then(() => {
            deviceOrientation.getCurrentHeading().then(
                (data1: DeviceOrientationCompassHeading) => this.magneticHeading=data1.magneticHeading,
                (error: any) => console.log(error+" - error message")
            );
        const options={frequency:100};
        const subscription = deviceOrientation.watchHeading(options).subscribe(
            (data3: DeviceOrientationCompassHeading) => this.magneticHeading=data3
            ,(error: any) => console.log(error+" - error message"));
        });
        document.getElementById('image').style.transform =
            'rotate(' + this.magneticHeading + 'deg)';
    }
}

Thanks for looking into it!

9

Hello, sorry I have the same problem, and you told us that you had an answer, in the link above, you could change how you adapted it for ionic

1 Like
10

So, stringifying “data3” in “this.magneticHeading=JSON.stringify(data3)” solves the [object, object] issue, but now I need to know how to make the image move with the result. Any ideas?

11

Can you update your answer please

12

i just followed your code . but here i am facing the problem when i load the component it doesnt console any compass heading until the app goes to background and again reload .
Can you please help ?