Logging and Displaying Real-Time Distance in an AR Ionic app with Wikitude
We are human and can make mistakes.
When it comes to debugging an application, logging is the most important feature to detect them. Let's be honest, I have been carried away by this awesome AR technology and should have done this tutorial a while ago (mea culpa).
We will get this done in this tutorial.
Alongside with real-time distance tracking.
Having the distance displayed is a primary tool to help the user locate its progress to the location.
Don't forget to have a look at the first tutorial otherwise you might get lost.
So let's get to it!
Logging
As usual, four types of logging:
- Error
- Warning
- Debug
- Info
To be sure that the Debug Console is available as soon as possible, it's enabled using the onLoad hook on the body in the index.html file:
<body onLoad="javascript:AR.logger.activateDebugMode();">
And we can now log like this:
AR.logger.debug("This is a debug log");
The logs are available after tapping this little icon:
And selecting the type of logs to display:
Real-Time Distance
Now that we have a new tool in our arsenal, we can start coding.
Let's start with the locationChanged method:
locationChanged: function locationChangedFn(lat, lon, alt, acc) {
if (!World.initiallyLoadedData) {
World.requestDataFromLocal(lat, lon);
World.initiallyLoadedData = true;
} else {
World.updateMarkersDistance();
}
}
Everytime the user moves, its location changes, the first time we have an initialization phase, this only happens once.
Once this is done we can continuously update the distance with the following method:
updateMarkersDistance: function updateMarkersDistanceFn() {
for (var i = 0, len = this.markerList.length; i < len; i++) {
this.markerList[i].updateDistance();
}
}
Looping through each marker we tell them to update the distance. The loop here is optimized (have a look here for more details).
In the marker.js file, we add the following method:
updateDistance() {
// this.descriptionLabel.text = this.markerLocation.distanceToUser();
this.descriptionLabel.text =
this.markerObject.locations[0].distanceToUser() + " meters away";
}
The text gets updated there.
A GeoLocation object has a distanceToUser method that is quite helpful, once again Wikitude thought about the potential required features!
This method returns the distance between a Marker and the User in meters.
Otherwise, we would have to reproduce the haversine formula.
Normally I'd have directly used the method from the markerLocation GeoLocation object, however Wikitude advises us to use the one located on the GeoObject locations property for better performance.
Finally we can admire the result:
Conclusion
Being able to show in real-time how far an objective is located is primordial for any Augmented Reality application using POIs.
This can be easily done with the distanceToUser method, however that method will run on every location changes and the performance can be an issue if there are many markers.
I haven't yet measured how the application's performances are impacted so I might update this post once I've done it or just post it on Twitter, so be sure to follow me there to get informed.
Performance aside, this brings some new UX issues that we don't have at the moment with our traditional applications. All the new type of information we will be able to integrate in our future AR application (distance, location, description, etc) will force us to rewrite our brain and rethink how we build applications.