Implementing a new UI for infragram.org by Public Lab, my Outreachy Internship Project

Screen Shot 2022-07-06 at 8.31.34 PM.png

In my first article of my internship series, I spoke to the great range of projects that Outreachy offers and that even if you think you're under-qualified, you're most likely not. If you've read any of my previous posts, you already know that I am self-taught. At the point I applied to Outreachy I knew HTML, CSS and Javascript. I had what I call "paint-by-numbers" experience with NodeJs, Express and MongoDB, this was to the extent that I had done a few code-along tutorials, I hadn't yet created anything of my own nor did I feel completely ready to. In a nutshell, I felt there was no way I would be qualified for any of the internships offered. I tried anyway. I am so glad that I did!

For those not following this series, the project I was chosen for is to implement a new design for the user interface of infragram.org, a project with Public Lab. Might I say, it is such a cool tool!! Infragram is software that converts the pixels of an image or video so that plant health can be analyzed. Moreover, it's affordable, just another example of how Public Lab pursues environmental justice through community science and open technology.

Fortunately for me, understanding the specific inner workings of the tool itself is not a requirement. The functions written to created such pixel conversions are absolutely symphonic. I considered myself lucky that I am getting the opportunity to read through them and understand how they work, but even as I'm writing this I realized that anyone can do this. That's the beauty of Open Source!

My main purpose with this project is to create and implement a "more modern" full screen interface where the image itself is the focus and the tools used to manipulate the images are more easily understood to a newcomer to the site. There are multiple ways that images can be converted. Novice users can utilized the pre-programmed default settings to convert an image to NDVI, the Normalized Difference Vegetation Index, which highlights green health of vegetation. Users are also able to input their own equations into the tool in order to perform other advanced examinations of the infrared light reflected in the images. There is also an option to alter the individual red, green and blue channels of each pixel of the image which results in a pretty cool transformation in itself.

To the end of creating the interface, I have been working with Bootstrap 5. The current site of the tool is written in Bootstrap 3 so it has been great learning and implementing the latest components of Bootstrap. I'll soon be creating a welcome and navigation tour for the tool and then delving into organizing help menus and insuring that the flow of the site is user-friendly. This has been a great experience for me.

Screen Shot 2022-05-30 at 2.50.00 AM.png

If you are considering applying for an Outreachy internship, I hope that reading through my experience has helped you realize that regardless of your level of experience, there is something there for you!

As always, please feel free to reach out to me if you have any questions or would like any further information on my Outreachy and Public Lab journey!