MARS | Devpost

Inspiration

The front end of our application was inspired by many things, mainly the HMAR website, but also previous projects and Google’s simplistic take on formatting. We wanted our application to have a clean interface with enough color to keep a user’s attention whilst not distracting them from the main function of the site. We used a white background along with the HMAR logo and emergency and support call buttons.

What it does

MARS is a program that allows users to help marine wildlife in distress. For sightings, users fill out a form with information on the animal, its environment, and photos. For emergencies, users are provided with contact information to HMAR. In both options, HMAR is notified with the information needed to best support the animal reported.

Allows you to report sightings of marine wildlife in distress
- Sends your location to HMAR
- Allows you to send images and information to help the animal
Allows HMAR volunteer to look through submissions via spreadsheet
- Provides them with information on animal (i.e. location, injury) to best help the animal

How we built it

Frontend: HTML, Bootstrap, CSS, Javascript Django Framework Backend: Python. MongoDB

Organized data then used data to sort, add converted times
We built our part in the program by organizing the data and uploading it into pycharm in a csv file. Then we sorted the data and reformatted it to translate well when uploaded in Mongodb. We also created a script to retrieve specific data from the original spreadsheet and input that data into a function we built to be converted into a unix timestamp. Once this was all complete, we uploaded each post with the added unix timestamp into MongoDB.
Gridfs to upload photos and pull photos from MongoDB

Challenges we ran into

We had many challenges with uploading images and a unix time conversion to mongodb, inconsistencies between datasets, discrepancies within data sets, and formatting of the data. While attempting to upload images, we were able to put the data of the image into MongoDB, but we had a difficult time retrieving the data of the image file. Along with that, when we were able to upload the file, it did not change the id number, but instead gave an ObjectID.

We also integrated a UNIX time conversion into each post to make our data more parsable and accessible across different systems. This gave our data a callable label which was useful when data needed to be retrieved. The unix time conversion was difficult to feasibly manage due to the date and time data being stored in different ways. One spreadsheet would store a type of data as a 5 digit integer, and the other would be stored as a 6 digit. On top of that, there was mistyped information in the database that caused value and index errors that we had to correct in order to run our script. We also had to edit and adjust the headers of each post when uploading to Mongo because of non-accepted special characters and problems with spaces.

Accomplishments that we're proud of

Our team was very successful in coding new things in HTML that would add to the functionality of our site. For example, one of our members coded a working search bar that allows volunteers to easily find specific information. We are also quite proud of our working buttons that automatically call, find location, and do other useful things for our users. Finally, we have forms that size up to the device screen properly, which is a function we are proud of because it makes using the app easier while on the road.

Our team was proud of creating useful and callable functions to upload and store our data in Mongodb. We also managed to add an additional feature that was a unix time conversion upload. The functions created to sort and upload our data were effective and efficient as we managed to combine it with our unix time conversion and uploaded all of the completed posts simultaneously. The unix time conversion upload was challenging to add to our script but we are especially proud of it because of the added functionality it brings to our program. The unix time conversion function we created adds a specific unix timestamp to each piece of data stored which allows us to parse the data and use it across different systems.

What we learned

For many of us, this was our first time working in HTML, Bootstrap and CSS, so we learned how to format and make working code. We learned how to create and move around the text and buttons we wanted on our page, and we even had someone learn to use a bit of Javascript to make the functioning search bar for volunteer ease of access. We also learned how to find useful resources and information that aided in our coding process.

We learned how to use MongoDB to store and manipulate data. We formatted spreadsheet data and uploaded it to our database, and used this data for conversions and test sorting functions.

How to insert and delete data into MongoDB, upload images
Using the combination of gridfs and pillow, we were able to insert the image data into MongoDB and used the ‘put’ and ‘get’ command to put the image data into Mongo and retrieve it. Then, we later
imported ‘Image’ from the pillow, where we were able to show an image. We also learned how to create UNIX timestamps and sort through data. While creating a function for UNIX timestamps conversions, we had to extract specific columns of data from the data set. We found that there were typos and errors within the dataset which inhibited our scripts ability to run. Because of this, we also learned how to sort through faulty data by integrating try and except statements into our code.

What's next for MARS

We feel that our site encompasses majority of the features and tools that HMAR volunteers need to perform their duties. However, the design element and many of our features have room to be improved and optimized. For example, many of our pages are quite blank in terms of color, design, and space utilization. We would like to standardize our pages, in terms of design, color, and font in the future as well. The HMAR database may also be difficult to read through, even with our search function, so we would love to be able to put the data on multiple pages to make it easier to find reports.