<div class="textcontainer"> <p class="margin"></p> <h3>Final Project: Spend the Night Light</h3> Demo Video <div class="flexrow"> <video src="./FinalVideo.mov" width="900" controls autoplay loop> Your browser does not support the video tag. </video> </div> <p class="margin"></p> <p class="margin"></p> <div class="flexrow"> <a id="btn" href="finalproject.zip" download>Download the files used for my final project! </a> </div> <p class="margin"></p> <h3>Phase 1: Brainstorming</h3> <p class="margin"></p> <p class="margin"></p> <ol> <li>Activates a light on the receiver. </li> <li>Sends a text message to anyone else in the house or dorm who needs to know when privacy is requested. </li> </ol> <p class="margin"></p> This phase has also included a lot of discussions with Bobby about long term goals with the device, such as a marriage of Strava with Snap Map to create a live view of everyone who's busy. My strategy is to start simple and make a basic product that WORKS. Then I can tinker with it over time. <p class="margin"></p> <div class="flexrow"> <img src="Button.jpeg" width = 400 alt="a piece of paper with some diagrams drawn in black marker"> <img src="Receiver.jpeg" width = 400 alt="a screenshot of possible keypad layouts"> <img src="Receiver Casing.jpeg" width = 400 alt="a screenshot of possible keypad layouts"> </div> <p class="caption">Button (left) and receiver (center) with casing (right).</p> <p class="margin"></p> <h3>Phase 2</h3> <h4>MVP</h3> </p> The first step was to create something that could talk wirelessly between the light and the button. I scoured the internet to find a way to do this with two micro controllers and I was 90% of the way to making it too complicated, then Bobby told me about ESP now, which let me use to ESP 32s to talk to each other. If you want to see more of my MVP, check out my <a href="./07_outputs/index.html" style="color: black;">MVP Page</a> <p class="margin"> </p> <div class="flexrow"> <img src="./1-talking.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> <div class="flexrow"> <img src="./1-success.jpeg" width = 300 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> I was surprised when it finally worked. <p class="margin"> </p> <div class="flexrow"> <img src="./1-firstlight.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="margin"> </p> <p class="caption"></p> Next, I had to figure out how to get the ES32 send a text to my phone when I press a button. I thought this was easy, and it should have been. But it was not. I used the CallMeBot's API, and the way it works is sends an HTTP post request to connect to What'sApp. <p class="margin"> </p> <div class="flexrow"> <img src="./1-whatsapp.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> Next, I had to get the rotaryencoder working. This took a while as I had to tune the acceleration, debouncing, and how it dealt with the steps. <p class="margin"> </p> <div class="flexrow"> <img src="./1-rotaryworking.MOV" width = 500 alt="thermosistor experiment with LED"> </div> <p class="margin"> </p> <p class="caption"></p> <div class="flexrow"> <video src="./1-mvp.MOV" width="500" controls autoplay loop> Your browser does not support the video tag. </video> </div> <p class="margin"> </p> <h3>Phase 3</h3> <h4>Exterior Design</h3> </p> While I may seem like a man who knows what to do all the time, sometimes I struggle with the vision. To help myself out, I did a brain dump to set about creating the final product. <p class="margin"> </p> <div class="flexrow"> <img src="./2-boarddesign.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="margin"> </p> <p class="caption"></p> Once I had thought through all the parts, it became easier to craft a vision. <p class="margin"> </p> <div class="flexrow"> <img src="./2-designboard Large.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> <div class="flexrow"> <img src="./2-design.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> Then, it was time to do the math. Feeling like a real SEAS student, I put my 800-dollar iPad to use and sketched out the exact dimensions of the encasing. It was perfect. Every angle, tangent, tooth, and plane was accounted for in my designs. The plan was to laser cut the box, and make it look as much like a classic high end 70s stereo as possible. <p class="margin"> </p> <div class="flexrow"> <img src="./diagram.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> <div class="flexrow"> <img src="./diagram2.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> Then it all came crashing down. <p class="margin"> </p> It was 1am and I was 5 episodes deep into season 8 of Always Sunny in Philadelphia when I realized that I had to change everything. The only way forward was to make an orb. I fired up fusion and designed a simple ball-shaped interface. <p class="margin"> </p> <div class="flexrow"> <img src="./2-orb1.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> <div class="flexrow"> <img src="./2-orbprint.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> <h3>Phase 4</h3> <h4>Final Assembly</h3> </p> As I brought everything together, a few things didn't fit quite right, and I needed to add an extra few pieces to accomodate an extra button for a hard reset. I also spraypainted it black, with the help of my friend Isabel. <p class="margin"> </p> <div class="flexrow"> <img src="./3-assembly.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="margin"> </p> <p class="caption"></p> <p class="margin"> </p> <div class="flexrow"> <img src="./3-graveyard Large.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> I killed a number of ESP32s from short circuiting. This was probably because I didn't cover 80% of the live wires in my circuit. I solved this problem using tape. Not electrical tape, because that's bad for the environment. I used fabric-ish tape instead. <p class="margin"> </p> <div class="flexrow"> <video src="./3-solder.MOV" width="400" controls autoplay loop> Your browser does not support the video tag. </video> </div> <p class="margin"> </p> When I tell you that I am a master of hardware assembly (video below), you better believe it. Look how difficult this is. That's an M2 screw. Hear me? M2. And I'm installing it with a pair of pliers. <p class="margin"> </p> <div class="flexrow"> <video src="./3-surgery.MOV" width="400" controls autoplay loop> Your browser does not support the video tag. </video> </div> <p class="margin"> </p> <p class="margin"> </p> <div class="flexrow"> <img src="./3-orb Large.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> The cliché of PS70 is that that everyone's project "looks like a bomb," but mine really did. Specifically, one of those silly bombs with a thick, 6 inch fuse that they use in pirate movies. As I write this, it doesn't seem like that much work. But if you're a sophomore or something reading this website while taking PS70, know that my project is impressive and I belong here at Harvard. <p class="margin"> </p> <div class="flexrow"> <img src="./3-bomb Large.jpeg" width = 500 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> <div class="flexrow"> <img src="./bomb.jpeg" width = 200 alt="thermosistor experiment with LED"> </div> <p class="caption"></p> <p class="margin"> </p> <p class="margin"> </p> After 36 hours without sleep, it was finally done. Check out the demo video for more, but here are the functions: <p class="margin"> </p> Set alarm times from one of the menu options, or set a custom alarm from yourself. When the button gets activated, a light turns on (presumably outside your door, but just wherever you choose to put it). Also, it sends a text to your phone. You have to pay an API service like Twillo if you want it to send a text to more poeple, which I'm not willing to do. <p class="margin"> </p> Check out the zip file for code and print files. <p class="margin"></p> <p class="margin"></p> <div class="flexrow"> <a id="btn" href="finalproject.zip" download>Download the files used for my final project! </a> </div> <p class="margin"></p> <div class="flexrow"> <video src="./lastmovie.MOV" width="500" controls autoplay loop> Your browser does not support the video tag. </video> </div> </div>