Choices

Our very basic idea for interaction on the Binmax recycling bin was to have a touchscreen and that naturally meant that it would have to be some sort of user interface and that naturally led to the need for a graphical user application (GUI). The GUI could either be done as a native application that runs off Ubuntu or a web application that runs in the browser.

The main advantages that a web application had over a native application were as such:

• A web application can be run on any modern browser and we are not confined to just Ubuntu anymore. That means development and testing can be done on other platforms then transferred to the Jetson Nano.
• Web development frameworks have a greater degree of support with guides and tutorials and a larger developer community
• Skills that were going to be learned through this process would also be much more transferable to our future work since web development is a crucial element behind many projects, especially in Computer Science.

Hence, going for a web application made the most sense. The next decision we had to make was the specific framework for web development we were going to use. There are quite a few frameworks out there, such as React, Vue, Angular, vanilla Nodejs, or even more vanilla HTML+CSS+JS. I had experience with the latter two options before and neither were too particularly enjoyable to use and I also wanted to learn a new framework that was going to be the definitive framework that I will continue using for my future projects hence the choice was down to React or Vue or Angular. I do acknowledge that there are other frameworks besides the ones I mentioned but most of them did not have a large community or libraries behind them as they were rather new. Out of the three options left, React was the most popular one, with the greatest degree of existing and future support from developers, so I decided to make a React web application. React also has a mobile app development cousin called React Native, which could possibly be used for the mobile BinMini app if I were to end up developing it.

Learning React

Usually, when starting on a new language or framework, people find it best to look at books or online courses, but I had recently discovered the wonderful world of YouTube crash courses which I felt were tremendously more useful and easier to grasp compared to other kinds of learning materials. Perhaps it was due to having prior knowledge of related content and so I did not have to learn the basics.

Now, I could go into much detail about what I learned and how React works, but I’m not a teacher and you are probably not a student from Computer Science. So let’s just agree that it was a hard 2 weeks of learning and trying out demo applications and discovering that whatever I was learning was actually outdated because React reacted too fast and changed how things work so I had to relearn again but it turned out to be better than expected because it was much more straight forward the second time around.

After two weeks, I felt confident enough that I could start working on the web application needed for Binmax. This was around the 3rd-4th week of May, as I started off learning straight after I finished my final paper in early May.

Web App Flowchart

The first thing to figure out when starting out on a web app is what exactly is going to happen with the app and that usually comes in the form of flowcharts. But this usually is in the form of very ambitious goals and lofty ideas which eventually gets narrowed down to a more streamlined and achievable application.

Some examples of flowcharts that we came up with earlier on in the planning process. As you can see (or probably not since nobody is reading this besides Evelyn, hi Evelyn!), we had a lot of wild ideas.

We also planned out the databases that we were going to have, and the databases were going to be in Firebase, as we had planned for it to be a combined database with the mobile application, so a local database was out of the question. React, being a web application framework, had great support for Firebase which is meant for web and mobile development.

Some examples of database planning that we came up with earlier on in the planning process.

Templates, Templates Everywhere

In web development, it is commonly understood that unless you are a one-in-a-million genius child prodigy talent creative person or has been trained and working as a graphics designer, you probably are going to use someone else’s works, in the form of templates. Icons are never created by ourselves too unless it’s for a very specific icon, there are libraries for that. Even design schemes and standards already exist, and the most popular and trendy one right now that is visually pleasing is Material UI. Go to this website and tell me you don’t feel at peace and how well everything looks. It has templates and designs for every component you could ever think of, all of which are properly thought out by professionals. So it was natural that we used Material UI as our design scheme.

Colors, Taste, A Thin Green Line

Next, we had to decide the color palette for our application. Binmax being about the environment and recycling, green was the obvious choice. But even then, there are a million shades of green and a little movement up and down the scale can cause the green to shift from the army green to jungle green to environment green to pastel green to toxic green. We chose to have our main colors somewhere between the environment green and pastel green, since that was the most pleasing to our eyes. A complementary color of pastel blue was also chosen.

Our initial color palette

Early Drafts

 

 

 

 

 

 

 

 

 

 

 

As you can see, the early drafts had some design ideas done like the navigation bar at the bottom, but the different components had a lot of work to do. There was a lot of trial and error involved in the process to see what works and what looked good.

This went on for a good week and a half until we iterated to our first version.

Binmax V1

The first version had the basic functionality done, but the user interface was still incomplete, and we sought feedback from our friends to further fine-tune the user interface to make it more user friendly. We have also not tested it out on the touch screen at that point in time yet so we did not know how small or large the different components would appear on the screen and whether it would be conducive to the user’s experience.

After some more rounds of UI adjustments, we came up with the next version.

Binmax V2

This version had some font size changes, but we have yet to test it on the touchscreen then. After testing it out on the touchscreen, we realised that it was too cluttered and we can clear a lot of it up in Version 3.

Binmax V3

With this version, the UI became a lot cleaner and the size of the components were increased to be more conducive on the touchscreen.

Next, we wanted to add some interactions with the front facing proximity sensor in the form of a ‘screensaver’ mode that only turns on the camera when there is someone standing in front of Binmax.

Binmax V4

This is our current and latest version of the web application.