Realtime train traffic in augmented reality

--

A while ago the NMBS, the Belgian train company, released the web app Train Map (https://trainmap.belgiantrain.be/). This app displays a map with the realtime train traffic.

I love this concept and I always wanted to experiment with Android ARCore. So why not create an augmented reality app where you can experience this? That would be a cool idea.

I don’t have a lot of experience with Android development, so it wasn’t easy at first. But eventually my dedication payed off. In this article I will share how I’ve created this augmented reality app.

Sceneform SDK

The Android Sceneform SDK makes it easy to work with 3D objects, without having to learn OpenGL. It’s quite straightforward, read more here.

I’ve found a 3D model of a Belgian train on the internet. Thank you Arman Y. This saved me a lot of time.

All I had to do was convert the model to OBJ with Blender and import it with the SDK plugin.

Building the map

The Sceneform SDK provides a shapefactory. This factory enables you to create simple shapes like a cube. I’ve used tiles from OpenStreetMap as a texture. My application calculates the tiles it needs and fetches it from the internet. To speed this up, I’ve created a PHP proxy script to cache the images and reduce the calls to OpenStreetMap.

Train map data

The next thing I had to do was implement the realtime data. If you inspect the Train Map website with the Chrome developer tools, you can find out that they are using socket.io to update the dots on the map. In the frame tab of this call (wss://trainmap.belgiantrain.be/socket.io/?EIO=3&transport=websocket) you can see the updates.

The socket.io server is sending JSON data to the clients. So that was awesome. All I had to do was write my own client, let it connect to the server and map the data to my own train object. The server sends an update every 10 seconds.

Animating the trains

The realtime train data contains all the trips (trains) currently active in Belgium. The server returns, among other things, the latitude, longitude, title of the train.

To animate the train I stored the previous location of the train and animated it to the next position. With these two locations I could also point the train in the correct direction.

Android provides an ObjectAnimator, this class takes parameters to define the target object that will be animated in time. In my case I’ve animated the latitude and longitude property of my train objects.

In the update function of my app I’ve set the position of my nodes (train). Only the trains in a specific radius of my center latitude and longitude were positioned on the map.

It was fun

It was a very good and challenging idea for a first Android AR app, using realtime data in AR. It helped me to understand the basic of Android app development.

The app works, but it’s not completely ready yet. At the moment I don’t have the intention to publish it as a fully functional app yet.

Don’t forget to give us your 👏 !

--

--