How much is my speed?

In fallowing code I’m trying to access new geolocation of current device and speed of motion but I don’t know am i did it right or no, the output is attached also bellow Ho much is my speed?


@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {
  public lat;
  public lng;
  public speed;
  public watch: any;
  constructor(public navCtrl: NavController, public Geolocation: Geolocation, public zone: NgZone,
  public backgroundGeolocation: BackgroundGeolocation,
  private deviceMotion: DeviceMotion
  ) {
this.startTracking();
  }
  startTracking() {
 this.deviceMotion.getCurrentAcceleration().then(
  (acceleration: DeviceMotionAccelerationData) => console.log(acceleration),
  (error: any) => console.log(error)
);
var subscription = this.deviceMotion.watchAcceleration().subscribe((acceleration: DeviceMotionAccelerationData) => {
  console.log(acceleration);
});

  let config = {
    desiredAccuracy: 0,
    stationaryRadius: 20,
    distanceFilter: 10, 
    debug: true,
    interval: 2000 
  };

  this.backgroundGeolocation.configure(config).subscribe((location) => {

    console.log('BackgroundGeolocation:  ' + location.latitude + ',' + location.longitude);

    this.zone.run(() => {
      this.lat = location.latitude;
      this.lng = location.longitude;
      this.speed = location.speed;
    });

  }, (err) => {

    console.log(err);

  });

  this.backgroundGeolocation.start();

let options = {
  frequency: 3000, 
  enableHighAccuracy: true
};

this.watch = this.Geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {

  console.log(position);

  this.zone.run(() => {
    this.lat = position.coords.latitude;
    this.lng = position.coords.longitude;
  });

});

}
stopTracking() {
  console.log('stopTracking');
  this.backgroundGeolocation.finish();
  this.watch.unsubscribe();

}
}

is it work ? because i have tried it and nothing coming out…

At that time that was working for me. I used to check with car speed it was about same meter per secconds i think.

Can i get the .TS file and the .html file ? because i had tried your code but it doesnt work on my laptop…
Please send the .TS file and the .html file to my email : jonathankevin88@gmail.com

I don’t have them now but I used this link.

Hi…
I had succeed used your code on my device…
But the speed doesnt show on my device…(i will show it on my attach file

)
can u explain why ???
And where do u try the code ?? at the car, motorcycle, or just walking ??

I used the same code. speed is Meter / second and if you multiply ((speed *3600)/1000) you will get the Km/Hrs this is my code

**HTML:**
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
  <ion-item>
    <ion-label color="primary">Latitued</ion-label>
    <ion-label color="danger">{{lat}}</ion-label>
  </ion-item>
  <ion-item>
<ion-label color="primary">Longitued</ion-label>
<ion-label color="danger">{{lng}}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label color="primary" >Speed</ion-label>
    <ion-label color="secondery" >{{speed}}</ion-label>
  </ion-item>
</ion-list>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BackgroundGeolocation} from '@ionic-native/background-geolocation';
import { DeviceMotion, DeviceMotionAccelerationData } from '@ionic-native/device-motion';
import { NgZone } from '@angular/core';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public lat;
  public lng;
  public speed;
  public watch: any;
  public x;
  constructor(public navCtrl: NavController, public Geolocation: Geolocation, public zone: NgZone,
    public backgroundGeolocation: BackgroundGeolocation,
    private deviceMotion: DeviceMotion
  ) {
    this.startTracking();
  }
  startTracking() {
    /*this.deviceMotion.getCurrentAcceleration().then(
      (acceleration: DeviceMotionAccelerationData) => //console.log(acceleration)
      this.x=0,
      (error: any) => console.log(error)
    );
    var subscription = this.deviceMotion.watchAcceleration().subscribe((acceleration: DeviceMotionAccelerationData) => {
      //console.log(acceleration);
    });
*/
    let config = {
      desiredAccuracy: 0,
      stationaryRadius: 5,
      distanceFilter: 10,
      debug: true,
      interval: 1000
    };

    this.backgroundGeolocation.configure(config).subscribe((location) => {

      //console.log('BackgroundGeolocation:  ' + location.latitude + ',' + location.longitude);
//      console.log(this.lat ,      this.lng,      this.speed);

      this.zone.run(() => {
        this.lat = location.latitude;
        this.lng = location.longitude;
        this.speed = (location.speed * 3600)/1000 ; // can be speed * 3.6 and should be round for 2 decimal
        
      });

    }, (err) => {
      console.log(err);

    });

    this.backgroundGeolocation.start();

    let options = {
      frequency: 1000,
      enableHighAccuracy: true
    };

    this.watch = this.Geolocation.watchPosition(options).filter((p) => p.coords !== undefined)
    .subscribe((position: Geoposition) => {

      //console.log(position);

      this.zone.run(() => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
      });

    });

  }
  stopTracking() {
    console.log('stopTracking');
    this.backgroundGeolocation.finish();
    this.watch.unsubscribe();

  }
}


Hi RSA…
I had tried your code and its work on my device but there’s one problem…
The speed just return Nan (Not a Number) ?
Screenshot_20180412-081256
Do u know how to fix it ??

I don’t saw this before. it is because of multiplying and dividing on starting moment, i guess you can solve it by using + oprator:

this.speed = (+location.speed * 3600)/1000 ;
or
this.speed = Number.isNaN(location.speed * 3.6) ? 0 : (location.speed * 3.6);

Hi RSA,

Thanks a lot for your help. But the speed still not shown on my device. Even though i set the speed = location.speed, without the multiplication with 3.6. What should i do now…??
This my app.ts script…

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { NgZone } from ‘@angular/core’;
import { BackgroundGeolocation, BackgroundGeolocationConfig, BackgroundGeolocationResponse} from ‘@ionic-native/background-geolocation’;
// // import { DeviceMotion, DeviceMotionAccelerationData } from ‘@ionic-native/device-motion’;
import { Geolocation,Geoposition } from ‘@ionic-native/geolocation’;
import ‘rxjs/add/operator/filter’

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public lat;
public lng;
public speed: number;
public watch: any;
constructor(public navCtrl: NavController, public Geolocation: Geolocation, public zone: NgZone, private backgroundGeolocation: BackgroundGeolocation) {
this.startTracking();
}
startTracking() {
/*this.deviceMotion.getCurrentAcceleration().then(
(acceleration: DeviceMotionAccelerationData) => //console.log(acceleration)
this.x=0,
(error: any) => console.log(error)
);
var subscription = this.deviceMotion.watchAcceleration().subscribe((acceleration: DeviceMotionAccelerationData) => {
//console.log(acceleration);
});
*/
const config: BackgroundGeolocationConfig = {
desiredAccuracy: 0,
stationaryRadius: 5,
distanceFilter: 10,
debug: true,
interval: 1000
};

  this.backgroundGeolocation.configure(config)
  .subscribe((location: BackgroundGeolocationResponse) => {

    //console.log('BackgroundGeolocation:  ' + location.latitude + ',' + location.longitude);

// console.log(this.lat , this.lng, this.speed);
console.log(“cekaja”);

      this.lat = location.latitude;
      this.lng = location.longitude;
      this.speed = location.speed; // can be speed * 3.6 and should be round for 2 decimal
      console.log("coba");
  
  });

  this.backgroundGeolocation.start();
  
  this.backgroundGeolocation.stop();
  
  let options = {
    frequency: 1000,
    enableHighAccuracy: true
  };

  this.watch = this.Geolocation.watchPosition(options).filter((p) => p.coords !== undefined)
  .subscribe((position: Geoposition) => {

    //console.log(position);

    this.zone.run(() => {
      this.lat = position.coords.latitude;
      this.lng = position.coords.longitude;
      this.speed = position.coords.speed;
      console.log(position.coords.speed);
      console.log("coba2");
    });

  });

}
// stopTracking() {
//   console.log('stopTracking');
//   this.backgroundGeolocation.finish();
//   this.watch.unsubscribe();

// }

}

Hi RSA…

One question again. If i’m not moving what should the speed return ??
Is it 0 or doesnt show anything ??
Thanks…

If you set public speed = 0; then should be zero at first.
For me speed is blank in beginning, after starting to moving it shows the moment speed (km/hrs) like cars.

Hi RSA…
Thank you for your help.Your code is already running on my device, but the app can’t run on all phones. I have tried the app in samsung galaxy a3 and the app doesnt running but the app running in asus zenfone. Does ionic not support all mobile phones ??

What was your problem? is that crash on starting? if it crash with can not fine index.html
you had to add some delay on loading in config.xml

<preference name="SplashScreenDelay" value="3000" />
to
<preference name="SplashScreenDelay" value="7000" />

also ionic use minimu sdk 19 you may use 16 like in same file.

<preference name="android-minSdkVersion" value="16" />
<preference name="android-targetSdkVersion" value="16" />

the problem is when i tried the app on my samsung speed feature does not want to appear while on my asus feature speed would appear…

Hi did you solve your problem?
Are you able to show the device speed using Background geolocation?

Thank you

Hi
I am getting the lat lng by geolocation.
But when I am trying to build the app I am getting error. Plz tell how to resolve

I see that folder not found. First try to delete and add again android project to cordova.

I did that many time. I also did uninstall/install npm, but still facing the same issue

Create a directory : platforms\android\app\src\main\res\mipmap.
Then copy resources\splash.png to icon.png in the new mipmap directory.