Exercise Database

on

Josh Miller

Among other things, one of the main elements of the app I worked on this week was fully integrating a new exercise database for our app. The original database we were pulling exercise information from had a limited number of exercises, was missing images for many of the exercises, and had many spelling and grammatical errors. After searching for additional sources, I came across a new database that seemed to meet all of our needs.

This new database came with hundreds of exercises, images for many of them, excellent descriptions, and it was open source and free to use. However, the data was in a format that was unusable to the app in its current state. The first problem I had to resolve was how to convert all the data into a usable list of exercises. Our original database had been consolidated into a single json file which the app could parse through and pull information from. The new database had hundreds of subdirectories, each with its own json file and two pairs of images.
Exercise database folder structure
I decided to fix this by designing a method to iterate through each subdirectory and read each individual json file and save its data to a new java class I designed to hold all the new exercise information. The new code did its job, and now I had an list of usable data to work with, but I noticed a new problem. Some of the images from the new database were cut off at the bottom, and none of them were transparent, which meant they could not be used in the app's dark mode.
Cut-off image from database
Luckily, each subfolder came with two sets of images. One pair of png images and one pair of vector-based svgs. The svg images did not suffer from the same cutoff issue as the pngs, but the way our app's layouts are set up require a png image, and cannot use an svg. This would require me to somehow rasterize almost 600 images and make them transparent at the same time. After some research, I could not find any software designed to handle such a unique problem, so I would have to fix this on my own. I settled on using Python coupled with some powerful 3rd party image libraries called Pillow and Wand. Using these tools, I was able to write a few scripts to iterate through each subdirectory and perform the necessary actions to each:
  • Convert each svg to a png at 300dpi
  • Remove the background from each new png, making it compatible for dark mode usage
  • Remove the now unused images
After running for a few minutes, the scripts had finished their job and gave me a new pair of transparent png images for each exercise that were no longer cut off. Now that I had all the new data, I set to work adding the new images to the app. By using a java class called AnimationDrawable, I was able to use both images for each exercise to form a short animation that is presented to the user each time they click on an exercise description.
Completed animation in app