Habitat for Humanity: Aging in Place - Assessment Tool

Background & Purpose

This project was through Bradley University as part of my capstone project, in coordination with the Greater Des Moines Habitat for Humanity. This overview will cover my development, struggles, and experiences working on this project.

The Habitat for Humanity: Aging in Place program aims to keep elderly people living in their homes by accomodating their current space, eliminating the need or fears associated with moving as you get older. Our goal was to create an assessment tool for H.F.H. surveyors to be able to easily markdown a house which needs rennovations or installations for accomodated living, and track the project's progress. Once surveying is complete, you can print the rennovations easily to a pdf file and pass them to the carpenters and contractors who finalize the accomodations.

My Development Timeline

Our team was given this project in a half-completed state. The project is built on HTML/CSS, PHP, JS, and MySQL- and we used XAMPP as a dev environment. It had a rudamentory login system, a static assessment tool which you could place icons into, but not too much else.

My next task was getting the icons refactored and able to be saved to the database. The icons I'm referring to are what the surveyors place down on the house layout image to flag where specific rennovations need to happen. The icons in their initial state did not save to the database, and were just images placed into the div which housed both the toolbar and the image.

Obviously this wasn't the best solution to the issue, so I gutted everything related to icons and started with finalizing an 'icons' table for our database. After doing that, I built out an Icon object in JS- and wrote the PHP scripts I'd need to add, update, and delete icons. PHP was relatively new to me, and MySQL was something I hadn't used outside of classwork previously. (I used to prefer NoSQL, but have grown to appreciate MySQL) This really forced me out of my comfort zone, but I'm glad I was tasked with tackling this. Here's a version of the database schema during this point:

After the database was finalized and the icons were able to be placed, we needed to be able to edit the icons. Whenever we place an icon, we append it into the "clickableArea" div with a className="alert-icon". I created some JS listeners to watch for clicks on divs with the alert-icon class name. If we detect a click, we call a function to open a popup. I created a form entry field which accepts a drop-down for icon type, a delete button, and a section for notes. Another teammate was tasked with inserting photo upload functionality into each icon, which was added soon after.

After icons were in a minimal state, I decided to work on figuring out icon positioning. There were critical errors where placing an icon in one context may cause it to load in the wrong spot in another context. (Different resolution, zoomed in browser, etc.) This made me go to the drawing board for solutions for this. I came up with a nested div solution. The current div structure had the toolbar for the icons as well as the image for the layout, and the icons themselves. The solution I went with was to keep the toolbar within the clickableArea div, but add the layout image to an assessmentArea div, and append the icons within this div, with their x, y positions saved as percentages to ensure screen-scale compatibility.

Finalizing this feature, and ensuring the placement and resizing was definitely a headache to wrap my head around. Initially, upon resizing I used JS to delete the icon and place it in the correct screen position. This was a mistake-filled rabbit hole which I followed down for about a month. Initially the icons would delete as soon as you started resizing the page, and then when you let go they'd place back into the page. This sucked. It clear the local storage and delete all the divs just to request them all back, as the placeIcon function would position the icon properly on any resolution.

After much time of rebuilding the onResize function, and working on ideas for duplicating objects, creating functions to force reposition, and other wackjob solutions- I finally came to the eureka moment to simply delete the onResize function. I learned a very valuable lesson through this: CSS First. This onResize function was brought from the intial codebase and was conflicting with any attempt at fixing the issues through CSS. Any JS solution I did implement either flickered as the page resized, or blinked the icons in and out of existence. Keeping the assessmentArea centered, and setting the icons to relative, fixed the issue entirely and allowed for smooth resizing.

With two seperate instances of the previous codebase being the root of my issues, much of my remaining time on the project was spent refactoring and bugfixing previous logic within the assessment tool, deleting functions including swapping the cursor to a brush tool, deleting unused variables, ensuring localStorage within the DOM gets cleaned appropriately as new icons are loaded and deleted, and other optimizations. As team members worked on more and more functions within the assessment tool, I assisted with implementation and merging.

The remaining time on the project was spent re-doing the toolbar and icon priority system. The toolbar was fun to tackle, as building one from scratch was something I'd never done before. Having dynamic buttons that swap images depending on if they're selected or not, and swapping them when another tool is pressed was difficult yet rewarding to tackle. I created the toolbar images in a fixed size, along with selected variants of each tool to visually indicate which tool is selected.

Each icon type (electrical, window, roofing) has its own associated priority (low, medium, high) to show the contractors what needs to be done ASAP to ensure livable conditions. Another student built logic to popout a secondary tool selection for either low/medium/high for the selected tool. Instead of hard-coding every asset path for every possibly combination of type and priority, we used to cool string math to get the job done. This required all of the images to get standardized, which I undertook.

From here we added the dropdown selector to track the progress of the project within the assessment tool, updated the legend for the tools, and cleaned up the bugs we found along the way. Concurrently during this time, the other group members were working on the pdf printouts via the assessment tool, search for assessments by address or project manager, updating login logic, and overall cleaning the look and feel of the rest of the website. Everything was merged, and the minimum viable product was finalized.

My Experience

I'm very grateful for this experience. As the Computer Science side built out the assessment tool itself, there was another sector of busuiness students working to revitalize the Aging in Place program. Business students built out a PowerBI dashboard to get an overview of yearly project data, and we finalized a tool which will be used in the greater Des Moines area.

There are definitely things with the assessment tool which could be improved upon. For instance, if a home layout is not available, perhaps have a mark-up studio which allows surveyors to draw home layouts. But the work that was done will make an impact, which is something I'm proud of.

I learned a lot about working concurrently with other people on the same project. Consistentcy is key, and breaking down functions into smaller functions all helps contribute to an environment where multiple hands can work on multiple things without conflict. My version control knowledge was pretty minimal prior to this project, and now employ these tactics in my own personal projects.

Awards & Recognition

This project was showcased at the Capstone Convergence Expo as well as the Student Scholarship Expo, both at Bradley University. Our deliverables for these expos were demos for both the PowerBI dashboard and the assessment tool running on an iPad. We had information relating to the program's purpose- and other additional creations such as mailers for the program.

Our project won the Interdisciplinary Award at the Student Scholarship Expo for the combined efforts of the business and CS teams.