Author: mandyh

This week, I first spent time finishing up the final presentation slides, and helping my teammate with her script. Next, I wrote some test cases to test the accuracy of the http request  calls. I used jest to mock out the functions and their return values, and I was able to pass all of the tests 100%.

This week we also started working on the mechanical portion of our project. Once the basic outline of the shelf was cut out, my teammates and I planned out the size of the swinging door and the table around it and went to the laser cutters and cut out the acrylic.

I also finished making the table on which the recycling information is going to be displayed. I had some issues with it displaying everything in the chart on one line, and discovered that multiline chart cells were not supported by that particular dependancy, so I switched to another one and custom made a chart that suited my purposes.

In addition, I worked on changing the code on the jetson so that if the data was successfully sent to the front end, the data would be wiped so that it wouldn’t be resending repetitive data. I have not been able to fully implement this yet, as I came into the issue of figuring out when the data had been successfully sent, as there wasn’t a response returned from the front end to tell me when it was successful.

My project is mostly on schedule, but a little bit behind due to not being finished with repetitive data issue. Other than that, I just have to finally test the web app with the rest of the project, and also add elements to it to make it look better to users.

In the next week, I will finish solving the repetitive data issue, as well as finish the aesthetic components, and finish testing with the rest of the project.

This week I started off by first fixing async issues that I had with the data. When data was sent from the jetson to the web app, the chart wasn’t able to immediately display the data sent because the graph was being displayed before the data from the jetson was fully sent. In order to fix this issue, I had to rewrite some of the get data functions as well as data organizing functions so that they would wait for data to be fully sent before returning a value. In addition, I added a new setState variable to pass through the different functions so that I can reload the graph everytime the information has been updated.

Next, I implemented the week/day button so that clicking on either week or day would allow users to see the corresponding data for that time frame. This required me to write a new function that reorganizes the chart data by the days of the week, whereas before I only had data for every hour of the day. I also decided to use a different chart dependency for the graphs, because the original one that I was using cut off the numbers at the edges weirdly, and I wasn’t able to modify the look of the graph as easily as I wanted to.

 

Next, I started working on another page of the web app that displays a table of recyclable vs. non-recyclable items based off of Pittsburgh recycling laws. I was able to download the dependancy and display the chart with the necessary information, but I realized soon afterwards that the particular dependency that I used didn’t allow me to display multiple newlines of information within the same cell,  so I want to do more research and find a different dependancy to use.

Finally, I also started working on the slides for the final presentation.

I believe that I am on schedule for the project. The remaining things that I need to implement are largely visual and aesthetic purposes, as well as extra things that would make users more engaged. I am a little bit worried about the mechanical part of our project, as we are still waiting on parts to arrive.

In the next week, I plan to start writing unit tests for the graphs and the context that I have implemented, as well as finish the recycling information table.

One thing that I learned from this project was how to use the react-native app. React native has a lot of helpful documentation for new users to use, including a step by step tutorial to starting the app. The react-native website was one of the most useful sources that I used when learning how to create the website. Online there is also a lot of articles about the best dependencies to use for different components of the app, and things to take into consideration. I also learned how to send information through different servers. I watched youtube tutorials to learn how to do this, and used several different articles to learn how to debug it, such as learning how to curl the json information.

This week I worked on connecting the Jetson to the web app, as well as finishing one page of the front end for the demo. I finished writing the server code for the Jetson and constructed json data to send from the jetson to the server, and then to the front end. However, I encountered several different issues with it. One of the first issues that I noticed was that when trying to console.log the returned json on the front end, the only thing that was printing was “undefined”. I wasn’t sure whether the issue was with the fetch request from the front end, or if it was from the backend, so I temporarily took out the server in the middle, and just tried to fetch the json data from the jetson to the front end directly. When that didn’t work, I tried just making curl requests to the jetson’s server directly and pinging it to make sure that I was able to get a response. This still did not work for me, so I asked my team members to try connecting to the jetson’s server using the url aswell. When they were able to easily connect, I realized that the problem was probably with my laptop. After some initial research, I had to go into my firewall and allow for connections specifically for the jetson’s ip address, as well as the port that it was running on, which allowed me to successfully curl the data from the jetson, but still gave a “cors no-access-allowed” error  when trying to retrieve data from the front end. This required me to enable cors, which added in the correct Access-Control-Allow-Origin header to allow my app to make cross-origin requests. Once there were no errors showing up in console, I still saw that the recieved json response was still empty, so I printed out the json response that the jetson was sending the server, and saw that when the server first starts, it recieves the correct json response from the jetson, but any subsequent calls would just be empty. I realized that this was because of the way that I was calling my fetchData function, so I changed my server.js logic so that the fetchData function would be called within app.get, which allowed for the correct data to be fetched everytime I made a fetch request from the front end, and also turned the app.get function into an async function so that it waits for a response from the jetson.

Once I was able to get the communication between the jetson and the app working, I wrote code within my app to take the json responses and rearrange it in formats that made it easily accessible when trying to use the data from graphs. I created new context for weekly data and daily data and passed it into the chart component that I had already made, allowing for the data to be displayed correctly.

I think that I am pretty much on track for my schedule. The only thing left I would like to do before the demo is to actually pass in real data from the cv instead of stubbed data, which I am planning on working on tomorrow. I also think that improvements can be made on the page so that it looks prettier and more cohesive, but I think that is something that I can work on within the last few weeks of the project once everything else has been settled. One thing that I’m concerned about is that since we have yet to implement the weight sensor, the current data computations are being made with just the number of items being processed. I’m fairly certain that once we do have the weight sensor working, it won’t be too hard to integrate that into the existing code, but it might be a little unpredictable.

At the end of tomorrow, I want to be able to send real data from the jetson to the front end. In the following week, I also want to be able to finish the page of the web app where users can look for recycling facts and tips.

For verification, I plan to first write unit test cases for all of the components within my app, such as the graph, the buttons, and the fetchData function, the buttons, and the different context being created. The unit test cases are mostly to make sure that everything that is supposed to show up on the screen are showing up 100% of the time, and that inputs to those components are being correctly reflected. These test cases should be passing 100% of the time. Afterwards, I will write interaction test cases for the fetchData functions and the context, as well as the context and the graphs, showing how data being passed into one component will correctly display in another component that it’s been connected to. Finally, I will implement full testing of the app, from opening and loading it, as well as fetching data when necessary, with different users and asking them about ease of use, and how the app looks so that I can make improvements based on other sources.

This week I worked on the backend portion of the web app. I started by creating a server.js file and writing in code that starts and runs the server. I also wrote code to request data from the json payload, fetches and parses the data into the structure that I want it to be in. A lot of the time that I spent working  this week was spent on researching and learning more about backend code, and how to connect it to the jetson. While I didn’t have the jetson available for me to use this weekend, I have written some baseline code that should work for recieving http requests and sending json messages.

I think that I am slightly behind still on my schedule. Ideally, I would have had the jetson and web app connection set up by the end of this week, but since that wasn’t possible I spent my time working on the front end of the app instead.

In the upcoming week, I hope to have successfully sent http requests to the jetson and recieved the json responses successfully. I also want to have one fully working front end by the time of the interim demo.

This week, I continued working on the web application portion of the project. I started creating more components that would be used throughout the app, as well as creating context that would be passed through the different layers of the app as well. I ran into one issue in which the context passed through was returning undefined despite being used properly. This issue took me a long time to debug, but I hope that solving these issues will make the rest of the process easier when I am creating more context.

My original plan for this week was to complete an entire page. As I worked on the app, I realized that it would be more prudent to finish the backend first so that we could start integrating it with the jetson. However, I am not as familiar with backend engineering as I am with front end, so for the rest of the week, I spent more time learning about coding backend. I did write a model from our app and started trying to write a server.js.

I believe that due to the issues that I’m having with the backend, I am slightly behind compared to the Gantt chart schedule. In order to catch up on the schedule, if I’m still stuck on the backend I will ask for help from my teammates or TAs to help me implement it.

I plan to finish the entire backend by the end of next week, and to write unit tests for it.

This week, I finally recieved the display screens, so I started off by connecting them to the arduino and running the code that I had previously written. I ran into a few issues with the connection and some bugs that I had to fix, such as displaying the words legibly on the screen, and downloading extra assets to make the arduino and elegoo screen compatible. I also continued working on the web app portion of the website. I set up a new react app and created the three new pages corresponding to the ones that I had decided on in the app designs. I coded the base portions of the app, such as the logo and the navigation bar, which appear on every page of the app. I also spent a considerable amount of time reading through react’s documentation and tutorials to become better acquainted with their features.

I am currently on schedule for my portion of the the project. The display screen portion is finished, and only needs to be integrated with the rest of the project. I also have started working on coding the app and since reading through documentation, I also have a good plan on how to finish the rest of the app as well.

In the next week, I hope to completely finish at least one of the pages of the app.

 

In the week before spring break, I spent most of my time working on the design report. In the few days before spring break, we also decided to add onto our display screen portion of our project by also including a web app for users to track their recycling  statistics, and learn more about recycling. In order to prepare for this new portion of the project, I started doing research about creating phone apps. Since I wanted the app to be accessible for as many people as possible, I needed to design an app that was for both android and ios. Because of that, I decided to use the React Native framework, since it supported both ios and android, and because I also had experience using it in previous projects. I also started planning out what I wanted the app to look like, as well as what features it should have.

One important point was that the app should connect to the recycling bin, and only that recycling bin. Even though we would be making only one bin, I wanted to plan for future scenarios where EcoSort was a more common household item, so I decided that users would have to manually connect to the bin by entering the jetson’s ip address.

When planning for the app, I also originally wanted to use a Web Socket connection so that the jetson could send continuous updates to the app without the app needing to send a request each time. However, I realized that users will not always be within range of wifi, and that if the jetson were to send information while the user is disconnected, it will cause a loss of data. Therefore, I decided that the best way to update the app would be to send HTTP requests whenever the users open the app. The app should also display a little note at the bottom letting users know when the last time the app had been updated, so that users will know whether or not the app is out of date.

Finally, over spring break I drew up mock sketches of what the app would look like. I incorporated the graphs that we had originally planned for the display screen on the bin, as well as extra information about recycling, a recycling streak, as well as an achievements page where users can earn badges by achieving goals. I think that including these features will go further to gameify the process of recycling, and allow for users to become more involved in recycling.

Currently, according to the adjustments to the Gantt chart that we made, I am on time for my role in the project. However, I realize that since this portion of the project was added on rather late, I will have to put in more effort throughout the next few weeks in order to ensure that I stay on time.

This week, I spent most of Sunday rehearsing for the design presentation. I also did more research about the types of display screens that we could use, and decided to switch to an OLED display screen instead of the arduino display shield, because it seems to be more compatible with our project. I also ordered the screens, and started writing out the code for the displays, although I have been unable to test it since the screens have not arrived. In addition, I have started working on the design document by writing out information from our presentation and compiling it into the proper format.

I am currently on schedule for my part of the project. The schedule has me completing this display portion of the project by the end of next week, which I am currently working on. However, since I sent in the request for the screens late, I’m don’t think that they’ll arrive until Thursday of next week, and I am unsure of what kinds of complications will come up once I actually test my code with the screens. If I am unable to finish by the end of the week, I will catch up by working on it during spring break.

In the next week, I hope to have a fully functioning display screen that works with stubbed responses from the jetson.

This week, I started by preparing for the design presentation. Since we made a lot of changes to our project, we had to add these changes to the presentation. In addition, since I am presenting for  the design presentation, I spent the majority of our time writing out a basic script of things that I need to say, and spent time rehearsing it.

Since we also added a new section to our project, I spent some time researching equipment and materials that we could use, including the type of display. Originally, I thought about using a raspberry pi, since raspberry pis have more compatible display screens. However, I decided on using an Arduino GIGA display shield, as it is a display that is compatible with Arduino, which we were already using to control the door.  In addition, it is a touch screen display, which can allow users to interact with it, making it feel more like a game.

I am slightly behind on my schedule, since we just decided to add an extra part to our project a few days ago. I have been able to do some basic research and brainstorming about it, but in the following week I must finalize the equipment that I need to use, and place orders for it within the first few days of the week.

In the next week, I plan to place orders for the items that I need, draw out specific diagrams for what the display would look like and what it kinds of statics need to be shown. I will also begin the coding for the assignment.

https://store.arduino.cc/collections/displays/products/giga-display-shield