WEB GPS tracking app created during a student internship.

1. GPS TRACKING APP
Stipe Vicković
Mentor: Ivan Pašić

2. App concept
2
Sensor
Gateway
TCP request
Publish on MQTT channel Subscribe to
MQTT Channel
Save in database
Publish to
WebSocket
channel
Subscribe to
WebSocket
Update location
on message

3. MQTT
▰ Subscribing to MQTT channel
• broker address: eu.thethings.network
• broker port: 1883
• username: gps_tracker_lora
• password: <app_access_key>
• topic to subcribe to:
gps_tracker_lora/devices/<dev_id>/up
3
{"app_id":"gps_tracker_lora","dev_id":"rak811_tracker","hardware_serial":"00679391F46E8D8E","port":1,"counter":0,"payl
oad_raw":"AYgFN6kQnVsAwPgAFg==","payload_fields":{"gps":{"altitude":4.94,"latitude":34.1929,"longitude":108.8859,"sn":"0
001"}},"metadata":{"time":"2019-07-25T09:38:32.956669447Z"}}

4. Save in databse
4

5. def on_message(client, userdata, message):
"""Save recived payload in database and send it on websocket """
SQL = """INSERT INTO gps_tracking_app_log(gps_id, location, date_time)
VALUES (%s, ST_GeometryFromText('POINT(%s %s)', 4326), %s);"""
# Extracting from payload
gps_payload = json.loads(message.payload.decode())
gps_serial = gps_payload['hardware_serial']
gps_lat = gps_payload['payload_fields']['gps']['latitude']
gps_long = gps_payload['payload_fields']['gps']['longitude']
gps_time = gps_payload['metadata']['time’]
# Connecting to database and executing SQL
cur = connection.cursor()
cur.execute(SQL, (gps_device.id, gps_long, gps_lat, gps_time))
connection.commit()
cur.close()
5

6. Publish to WebSocket channel
6
# Send payload to websocket
channel_layer = get_channel_layer()
group_name = 'device_{}'.format(gps_serial)
data = {'type': 'location update', 'long': gps_long, 'lat': gps_lat}
async_to_sync(channel_layer.group_send)(
group_name,
{
'type': 'location_update',
'message': json.dumps(data)
}
)
var ws = new WebSocket("ws://127.0.0.1:8000/ws/gps/<sn>/");
ws.onmessage = function (event) {
…;
}

7. Create API endpoints
7

8. Background channel task
8
# Send payload to locatin-check channels
async_to_sync(channel_layer.send)('location-check', {'type': 'position_check’,
'gps_serial': gps_serial, 'long': gps_long, 'lat': gps_lat})
class PositionCheckConsumer(SyncConsumer):
def position_check(self, message):
"""
Check if there are zones in wich GPS device is not
located and send those location on websocket
"""
# Filter associated Geofence zones in which device is not located
exclude_zones = GeofenceZone.objects.filter(gps=gps_device).exclude(geom__contains=last_location)
# If there are zones without GPS signal, send their ID via websocket
if exclude_zones.exists():
# Send payload to websocket
channel_layer = get_channel_layer()
group_name = 'device_{}'.format(message['gps_serial'])
data = {'type': 'zone warning', 'long': message['long'],
'lat': message['lat'], 'zone': [zone.id for zone in exclude_zones]}
async_to_sync(channel_layer.group_send)(
group_name,
{
'type': 'location_update',
'message': json.dumps(data)
}
)
application = ProtocolTypeRouter({
'websocket': AuthMiddlewareStack(
URLRouter([
url(r'^ws/gps/(?P<serial_number>[-w]+)/$', GpsLogConsumer)
])
),
'channel': ChannelNameRouter({
'location-check': PositionCheckConsumer,
})
})

9. Leaflet map
9

10. Subscribe to WebSocket
10
var gps_sn = event.target.id;
var ws = new WebSocket(`ws://127.0.0.1:8000/ws/gps/${gps_sn}/`);
ws.open;
var locationMarkers = L.layerGroup().addTo(mymap);
if (event.target.classList.value == 'activated') {
ws.onmessage = function (event) {
locationMarkers.clearLayers();
var message = JSON.parse(event.data);
if (message.type == 'zone warning') {
L.marker(
[message.lat, message.long], {icon: outsideIcon}
).addTo(locationMarkers).bindPopup(`<b>Device ${gps_sn} is out of zone: ${message.zone}</b>`).openPopup();
} else {
L.marker(
[message.lat, message.long], {icon: insideIcon}
).addTo(locationMarkers).bindPopup(`<b>Device ${gps_sn}</b>`).openPopup();;
}
if (mymap.getZoom() < 13) {mymap.flyTo([message.lat, message.long], 13)
} else {mymap.flyTo([message.lat, message.long])}
}

11. 11

12. 12
Thank you!