Hi,
I’m using the plugin for the background geolocation (@mauron85/cordova-plugin-background-geolocation": “^3.0.7”) to get the speed and the position of a device in an Ionic4 app.
It seems that the plugin returns the right data, but I can’t show them in an Ionic page.
This is the page that should show the data:
<ion-row>
<ion-col>
<span>{{'Speed raw'}}</span>
</ion-col>
<ion-col>
<span>{{ geolocationSpeedRaw }}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<span>{{'Speed'}}</span>
</ion-col>
<ion-col>
<span>{{ geolocationSpeed | number:'1.1-2' }}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<span>{{'Latitude'}}</span>
</ion-col>
<ion-col>
<span>{{ geolocationLat }}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<span>{{'Longitude'}}</span>
</ion-col>
<ion-col>
<span>{{ geolocationLong }}</span>
</ion-col>
</ion-row>
This is the code that should update the page:
startGeolocation() {
this.showSpinner = true;
this.geolocationSpeedRaw = '-';
this.geolocationSpeed = 0;
this.geolocationLat = 0;
this.geolocationLong = 0;
// start recording location
this.backgroundGeolocation.configure(BACKGROUND_GEOLOCATION_CONFIG).then(() => {
this.backgroundGeolocation
.on(BackgroundGeolocationEvents.location)
.subscribe((location: BackgroundGeolocationResponse) => {
alert('Speed: ' + location.speed);
try {
this.geolocationSpeedRaw = String(location.speed);
} catch (e) {
alert('Error geolocationSpeedRaw');
}
try {
this.geolocationSpeed = Number.isNaN(location.speed) ? 0 : (location.speed * 3.6);
} catch (e) {
alert('Error geolocationSpeed');
}
try {
this.geolocationLat = location.latitude;
} catch (e) {
alert('Error geolocationLat');
}
try {
this.geolocationLong = location.longitude;
} catch (e) {
alert('Error geolocationLong');
}
this.backgroundGeolocation.finish();
});
});
}
The problem is that the alert shows the right speed, but the content of the page is never updated.
No other alerts are shown, so I don’t think that the assignments generate an error.
So, why the page never updates?
it seems that Ionic does not notice that the value of the variable has changed.
Is it possible?
Thank you
Claudio
try having a console output after assigning the values to the variables and you can find that if there is an problem with your assignment or the control doesn’t even entered the try catch
Hi,
yes I’ve already done this test.
The print after the assignment shows the right value (the new value).
try {
this.geolocationSpeed = Number.isNaN(location.speed) ? 0 : (location.speed * 3.6);
alert(this.geolocationSpeed);
} catch (e) {
alert('Error geolocationSpeed');
}
I really don’t understand why it is not shown on the page.
Claudio
if the print after assignment shows the correct value then it will automatically get updated on the UI.
give me some time and will get you the solution asap
also a question for clarification the function you used to update the value startGeolocation() which is on the same page of the HTML you want to render or it lies in some other page?
try printing the variable’s at the end of the function
if the value printed at the end of the function is the same as you have assigned at the top of the function( this.showSpinner = true; this.geolocationSpeedRaw = '-'; this.geolocationSpeed = 0; this.geolocationLat = 0; this.geolocationLong = 0;)
try moving them to the constructor
not sure this will work cause in my case assigning values gets rendered on UI
if still the issue persists let me know and I will try to solve this issue asap
Yes, but the idea is to move the code to manage the background geolocation into a service.
I execute startGeolocation without the await directive so the function terminates soon.
The background process however still works and shows the alert message with the right content.
I have a button to stop the background geolocation and when I click it, the background process stops and the values on the page are updated.
However this is the example I’m working on: mytest1.
cld
An update, it seems that changing the page accessing directly to the DOM of the page the values change.
Adding this code to the page:
<ion-row>
<ion-col>
<span>{{'Speed raw'}}</span>
</ion-col>
<ion-col>
<span id="rawSpeed">{{ geolocationSpeedRaw }}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<span>{{'Speed raw by DOM'}}</span>
</ion-col>
<ion-col>
<span id="rawSpeedDOM">0</span>
</ion-col>
</ion-row>
And modifying the content of the page in this way:
try {
this.geolocationSpeedRaw = String(location.speed);
document.getElementById('rawSpeedDOM').innerHTML = this.geolocationSpeedRaw;
alert('Speed-after-assignment: ' + this.geolocationSpeedRaw);
} catch (e) {
alert('Error geolocationSpeedRaw');
}
rawSpeed is not updated, while rawSpeedDOM is updated.
I’m using this configuration;
cordova-plugin-mauron85-background-geolocation 3.0.7 "CDVBackgroundGeolocation"
Ionic:
Ionic CLI : 5.2.1
Ionic Framework : @ionic/angular 4.9.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 6 other plugins)
Utility:
cordova-res : 0.6.0
native-run : 0.2.2
System:
Android SDK Tools : 26.1.1 (
NodeJS : v10.15.3
npm : 6.9.0
OS : Windows 10
cld