{"id":173,"date":"2024-04-21T01:39:53","date_gmt":"2024-04-21T01:39:53","guid":{"rendered":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/?p=173"},"modified":"2024-04-21T01:39:53","modified_gmt":"2024-04-21T01:39:53","slug":"alanas-status-report-for-4-20-24","status":"publish","type":"post","link":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/2024\/04\/21\/alanas-status-report-for-4-20-24\/","title":{"rendered":"Alana\u2019s Status Report for 4\/20\/24"},"content":{"rendered":"<h3><b>Personal<\/b><strong>\u00a0Accomplishments:<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">A problem we found with the project is that while we could load in a clean room model pretty consistently, getting clean models of the individual furniture models was a lot trickier as our scanner could detect distance but lacked a depth field. To counteract this, I implemented a system that loads in a room model and replaces the messy furniture models with template furniture models (like the ones you see below) and place them in the appropriate furniture locations.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">There were a couple of problems along the way. The first problem was that Javascript doesn\u2019t have a lot of good tools to play around with its file system. What is there is good enough when the files are static, but not when the files change dynamically. Since the scanner would be sending new files to the web app as it scanned a room, this was a problem. I looked into a lot of different ways to get Javascript to do what I wanted but ultimately, I managed to get it done with the help of django. Since django already takes care of running the code that creates and sends the files to the web app, we just had it send a json file that includes the position and object type for each piece of furniture detected in the room. Javascript had a much easier time reading from a json file rather than the other methods I had tried. Getting the position of the furniture was tricky due to the mentioned problem of our scanner\u2019s lack of depth perception but Grace was able to get position data into the file.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Aside from that, I added in a couple more tweaks like some instructions on how to use the site and fixed a few bugs.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-174\" src=\"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-content\/uploads\/sites\/286\/2024\/04\/3dview-300x158.png\" alt=\"\" width=\"300\" height=\"158\" srcset=\"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-content\/uploads\/sites\/286\/2024\/04\/3dview-300x158.png 300w, http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-content\/uploads\/sites\/286\/2024\/04\/3dview-768x404.png 768w, http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-content\/uploads\/sites\/286\/2024\/04\/3dview.png 831w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>Progress:<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">I managed to complete my goal from last week and we are approaching the endgame for this project. The only thing left to do on the web app side of things is more testing to make sure the models are displayed properly when scanning different types of rooms and fix any of the potential bugs that may arise.<\/span><\/p>\n<p><b>Schedule<\/b><strong>\u00a0Status: <\/strong>On time.<\/p>\n<h3><b>What I learned during the project:<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Starting this project, I already had a good amount of experience with web app design and React. However, something I had to learn a lot about during the project was how to display 3D models in a web app. The first step was just finding a library that could do most of that for me. When it comes to web app design, there are tons of free libraries there to get specific jobs done. Low and behold, I found Three.js to load up 3D models. Three.js on its own didn\u2019t sync up great with my React setup but then I found React Three Fiber, a free React library that uses Three.js as its base. That saved me a lot of time compared to trying to get base Three.js to work with my React setup. From there I learned how to use React Three Fiber by reading its documentation and watching Youtube tutorials on how it worked. There were instances where I couldn&#8217;t find a good Youtube tutorial for what I was trying to do so I had to use the documentation and examples of React Three Fiber projects I found online to reverse engineer the mechanics of the library to get it to do what I wanted it to do in my code. Not to mention the trips to sites like StackOverflow to see if anyone had already posted solutions to specific programming problems I ran into.<\/span><\/p>\n<h3><b>Next Week&#8217;s Deliverables:<\/b><\/h3>\n<p><span style=\"font-weight: 400\">I want to make sure that the code displays the models correctly when using different types of room scans. I\u2019ve been testing the current code on dummy data as it&#8217;s hard to collect new data on the fly. That requires having the whole setup with scanner lift in place and that isn\u2019t feasible to do whenever. Further testing will make sure the code works in a majority of cases.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Personal\u00a0Accomplishments: A problem we found with the project is that while we could load in a clean room model pretty consistently, getting clean models of the individual furniture models was a lot trickier as our scanner could detect distance but lacked a depth field. To counteract this, I implemented a system that loads in a &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/2024\/04\/21\/alanas-status-report-for-4-20-24\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Alana\u2019s Status Report for 4\/20\/24&#8221;<\/span><\/a><\/p>\n","protected":false},"author":840,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[2],"_links":{"self":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/posts\/173"}],"collection":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/users\/840"}],"replies":[{"embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":1,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":175,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/posts\/173\/revisions\/175"}],"wp:attachment":[{"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/categories?post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/course.ece.cmu.edu\/~ece500\/projects\/s24-teamc2\/wp-json\/wp\/v2\/tags?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}