Friday, May 18, 2018

Profile Pictures

Now that the user system was up I could add in profile pictures. For this I added a profile page which would hold the profile picture, buttons to let you upload a new picture, and a button to go to the map. The first step was letting the user pick the picture they wanted to use from the picture gallery on their phone. For this I used the Xam.Plugin.Media plugin which provides that functionality for Android and iOS. Next I added a new Table to the sql server which would store a persons username and their profile picture in a BLOB. BLOB stands for binary large object and is used to store large chunks of data. So the way it would work is a user would tap the upload picture button select a picture using the Media plugin that would then give us the picture converted into a byte array. The data in the array and the users username would then be stored in the sql server.

Next I had to take care of how someone would look like without a profile picture. I didn't want to store a picture on the server for every person that didn't have a profile picture so I found a "no avatar" picture and stored it in the resource folder on both iOS and Android. So when somebody that hadn't uploaded a profile picture posted their location or went to their profile page the "no avatar" would be loaded from resources.

The final problem to take care of was having a uniform size for the profile pictures. For this I needed to be able to resize the pictures before storing them in the database. I tried using a plugin for it but the plugin would always maintain the aspect ratio of image meaning I would always get images with varying sizes. So instead I decided to code my own image resizer. The way this works is you write an interface in the shared code and then write two classes that extend it, one in the Android code and one in the iOS. Then when calling a method from the class you use Xamarins DependencyService which selects the correct class for you depending on what system its running on. So using this I wrote my own ImageResizer class that took an image byte array and resized it to whatever size I needed.

No comments:

Post a Comment