UberCarAnimation: A try to make animation of cars on map — Part II

In the previous part I covered that how we can dispatch an animation to move a car on map if we have the steps between the source and destination. In this part, I am going to explain a real life problem and the solution to it.

The Problem:

How the driver app publishes the location updates and the animation occurs simultaneously on the user’s app?

How this animation happens?

For this I used MQTT protocol, which helped me to push the location updates on the android client and then dispatch the animations simultaneously. Let’s see step by step that how I achieved this:

Setting up the Client Side:

1. Establish a MQTT broker by logging into one of the MQTT providers. I used CloudMQTT service. You can log in from the following link: https://customer.cloudmqtt.com/login
2. Generate the necessary credentials. You will have following things generated: username, password and the serverURI. Also remember to choose a free plan so that you are not charged. On CloudMQTT the free plan is named as Cute Cat. Your dashboard will be displayed as following:

Credentials on the Dashboard

3. Integrate the MQTT Paho Client for android by including following in your app module build.gradle:

implementation 'org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.1.0'
implementation 'org.eclipse.paho:org.eclipse.paho.android.service:1.1.1'

4. Create a class MQTTHelper. Now add the following data variables in this class: subscriptionTopic, username, password and ServerURI. Here username, password and ServerURI are the credentials which are generated by the CloudMQTT server.

Subscription topic is the topic or an event on which your clients are interested in. The clients subscribed to the topic will be notified when something will change on the server. Here the topic will be a type of a regular expression. For example, we have selected it as location/+.

5. Add a connect( ) function in the constructor of the MQTTHelper class:

Here we just create MQTTConnectOptions object and on the successful connection we try to subscribe to the topic we have mentioned above in the class file.

6. Add the following in the subscribeToTopic( ) function:

Here we call subscribe function by passing the respective subscription Topic and the callback which returns the result of subscription as onSuccess or onFailure.

7. Now in the DriverModeActivity in which your car will be animating, we add a function startMQTT( ) in onCreate( ) and add the following code:

Here we will be receiving the location updates and converting the MQTTMessage object in String and then to LatLng type by simple string formatting. For processing these messages we use a RxRelay to consume the LatLng objects.

RxRelay is used because it is a subject without termination event that is without the ability of onError or onComplete.

8. We will be subscribing to the RxRelay in onResume of activity before the events are consume by the relay. Now as soon as we receive 2 consecutive location updates we want to fire a translation animation of the car. Thus we want a type of operator which emits 2 LatLng pairs in a group together. This can be done by the buffer operator by keeping the buffer as 2. This can also be explained by the following marble diagram:

Buffer operator marble diagram

The buffer operator will wait as soon as we have 2 LatLng emissions and as soon as we get them it emits them in a list. Like for example, in above marble diagram the buffer is kept as 3 and the emissions occur in a list of 3.

9. In the consumer of this RxRelay now we will dispatch the animation. This is shown in the following code:

10. In the animateCarOnMap function we will be animating the car between the 2 LatLng in the list with the ValueAnimator with the similar concept that I explained in the previous part here. Here is the code snippet:

Here:

• We create a LatLng bound around the 2 LatLng we receive and animate camera of map to that bound.
• We set the marker or the car at the first position in the list
• In the update listener of the ValueAnimator we used the linear interpolation to translate the car between the 2 points in the similar way as we have done in the previous part.
• And finally we start( ) the animation..

After these steps we have finally done with the setup at the client side or the user side.

Setting up the Driver Side:

Let’s setup our driver side

For the driver side I have written a python script which is going to publish location to MQTT broker in interval of 1 second. This interval can be changed according to the use case.

• We will be going to take command line argument as the destination where we want our car to reach.
• We hit Google Maps directions API by providing the source, destination and driving mode and get the “points” key from the “overview_polyline” JSON object from the response similarly as we got in Part 1.
• Now its time to publish the location updates in 1 second interval:

Lets see the results:

Final Output

Here as soon as we start getting the Latitude and Longitude pairs on terminal animation of car starts simultaneously on our android client.

Hope you have enjoyed this series.

Do give any suggestions if you have. Also show some ❤ by clapping on the article if you enjoyed it.