Bicycle GPS Tracker Display

Starting this project, I aimed to integrate a GPS module with a microcontroller mounted on my bike to track my real-time position. Using a prerendered 2D map of the Georgia Tech campus and surrounding area, the system will process incoming GPS coordinates and dynamically plot my location. The live position will then be displayed on a uLCD screen mounted to the handlebars.

ECE Skills Learned: Embedded systems design, circuit design, programming (mostly in C), sensing, software design/communication, and product integration (fabrication of enclosures, weatherproofing, mounts, etc)

Collecting Raw GPS Data

Before getting to the map part, I first needed to make sure my ESP32 could handle the data coming from the GPS module I used. Going in between the data sheet and Youtube videos, I was able to get it properly working using UART communication and the library TinyGPS++, which interfaces with a wide variety of simple GPS modules to provide an intuitive API for extracting data from my external module.

After lots of trial and error/tweaking, I was able to finally get the GPS module to give accurate results. The image on the left shows the coordinates of my apartment precisely.

Displaying Prerendered Map

The next step was to get a detailed, prerendered map onto the ESP32. This was going to be a challenge as a typical png or jpg image would not properly display on the uLCD. 4D Workshop IDE allowed me to convert the png produced from the API into a compressed serial format (.raw) that can be read to the uLCD.

Fetching Map Data

To create a custom map for display on my uLCD screen, I utilized the Google Maps Static API to generate a precisely sized 128x128 pixel image of Midtown Atlanta. First, I obtained an API key through the Google Cloud Console by enabling the Maps Static API service. I then constructed a specific URL targeting mid town Atlanta location at coordinates 33.7833, -84.3814 with a zoom level of 15, which provided an ideal balance between detail and area coverage for the small display.

Prerendered Midtown Map

Prerendered Campus Map

Issues I ran into:

My Initial idea was to have the ESP-32 use its wireless capabilities and fetch map data directly from Google Map's API, with the following URL Structure:

https://maps.googleapis.com/maps/api/staticmap?center=LOCATION&zoom=LEVEL&size=128x128&key=MY_API_KEY

with "LOCATION" being the coordinates collected from the GPS module.

API Costs: Google gives $300 free credit. Static Maps API costs $2 per 1000 requests.
Caching: Save the image locally rather than fetching it repeatedly.
Image Format: The API returns PNG by default, which needed to convert to RGB565 RAW format for the uLCD.
Serial Rendering: Used 4D workshop IDE to reformat standard png into processable raw format.
Displaying 36,000+ bytes serially takes a long time, especially for a microcontroller

Where I'm At Today + Future

With the GPS coordinates being received by the microcontroller, and the microcontroller able to successfully display a working map, all that is left is to calibrate the position onto the map itself. This is tricky, because the maps coordinates and the GPS coordinates have to be translated into pixel locations for it to properly display. Furthermore, anytime the user moves, its position has to be redrawn on the display (~30 seconds per draw), but I believe this can be fixed through making the map a background instead of an actual image.

In addition, the whole setup itself draws a good amount of power and is bulky. The setup would likely need to be optimized further for practicable bike usage. Solutions include: more efficient code, larger battery packs, and even creating a custom PCB that allows everything to be compact and cleaner.

Attached below is my Git Repository for this project:

Page updated

Google Sites

Report abuse