How much is my speed?

rsa · July 22, 2017, 3:54pm

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();

}
}

kvnjo · March 28, 2018, 1:26am

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

rsa · March 28, 2018, 5:22pm

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

kvnjo · April 4, 2018, 12:55am

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

rsa · April 7, 2018, 5:40pm

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

kvnjo · April 11, 2018, 2:12am

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 ??

rsa · April 11, 2018, 3:47am

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();

  }
}

kvnjo · April 12, 2018, 2:18am

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 ??

rsa · April 12, 2018, 6:28pm

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);

kvnjo · April 18, 2018, 2:50am

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();

// }

}

kvnjo · April 18, 2018, 3:53am

Hi RSA…

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

rsa · April 18, 2018, 5:16am

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.

kvnjo · April 25, 2018, 2:41am

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 ??

rsa · April 25, 2018, 3:57am

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" />

kvnjo · April 25, 2018, 4:22am

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…

ioclaudio · May 22, 2019, 10:01am

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

Thank you

abhishekp · January 13, 2021, 2:34pm

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

ghostriderus · January 13, 2021, 3:46pm

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

abhishekp · January 14, 2021, 4:49am

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

ghostriderus · January 14, 2021, 4:57am

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