<h1><p style="font-family:georgia; font-size:x-large"> <i><b> INFINITY MIRROR BOX </i></b> </p> </h1> <video width="1050" height="600" controls> <source src="wifi1.mp4" type="video/mp4"> </video> <h3><p style="font-family:georgia; font-size:x-large"> <i><b> background </i></b> </p> </h3> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> This week was a group project where we programmed a microcontroller to obtain and respond to information from the internet or radio. The setup needed at least one input (web app) and one output (LED light strip). Anh and Christina focused on the structure including power, design, and construction and Al set up the Firebase and web app. <h4><p style="font-family:georgia; font-size:x-large"> <i><b> materials </i></b> </p> </h4> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> For the structure, we used 12 wood blocks and 5 mirrors. For the electronics, we used an ESP32-S2-DevKitC, a breadboard, and an LED light strip. For the software, we used VS Code, Firebase, and PlatformIO. </p> <h5><p style="font-family:georgia; font-size:x-large"> <i><b> building the structure </i></b> </p> </h5> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> To build the structures, we constructed a frame and fit mirrors into the frame. We took .5 x .5 x 12 inch wooden blocks and cut 8 blocks that were 9 inches long and 4 blocks that were 10 inches long. We then assembled the blocks into a cube structure using nails. </p> <img src="wifi1.png" alt="box" width="500" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> Our mirrors were cut 9x9 inches, so we fit them into the frame and secured them using hot glue. Then, we attached the LEDs to wrap around the wooden frame inside the box. Finally, we covered the box in a reflective material </p> <img src="wifi 3.png" alt="big box" width="500" </img> <img src="wifi 2.png" alt="box" width="615" </img> <img src="wifi 4.png" alt="box" width="1120" </img> <h6><p style="font-family:georgia; font-size:x-large"> <i><b> wiring the structure </i></b> </p> </h6> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> We ran into the most difficulties attempting to turn on the LED strip. It appeared that a strip of this length requires higher current than we were providing, and that we were using the wrong end of the strip to power the LEDs, which meant information was sent to the end of the LED strip as opposed to the beginning. To fix this, we used a power supply that Nathan gave us (5 V 10 A), and we soldered new wiring onto the opposite end of the LED strip and reattached the strip to the box. </p> <h6><p style="font-family:georgia; font-size:x-large"> <i><b> creating the firebase web app </i></b> </p> </h6> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> We thought this was a helpful diagram from RandomNerd to illustrate our project.</p> <img src="wifi 5.png" alt="diagram" width="900" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> We followed <a href="https://randomnerdtutorials.com/esp32-firebase-realtime-database/">this tutorial</a> (the VS code version) to set up the Firebase, <a href="https://randomnerdtutorials.com/esp32-firebase-web-app/">this tutorial</a> for the web app, and <a href="https://randomnerdtutorials.com/esp32-firebase-realtime-database/">this tutorial</a> to read data from Firebase. There were a few additional steps because the tutorials are intended for the esp32 and we were using an esp32-s2. The changes:</p> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> First, we received the error:</p> <img src="wifi 10.png" alt="diagram" width="900" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> To fix this error, the board needs to be updated to board = esp32-s2-saola-1 which is the closest board to the esp32-s2-DevKitC. </p> <img src="wifi 6.png" alt="diagram" width="900" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> There are two other changes that need to be made before trying the blinking light tutorial. Download the NeoPixel library to add the code that includes NeoPixel as shown below. Then updated the LED pin number to 18. </p> <img src="wifi 7.png" alt="diagram" width="1100" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> Now on to using the code for the LED strip… To make the LED strip work, we incorporated the code from the FastLED library example ColorPalette.ino. We could not get the LEDs to turn off using write functions so we opted to turn the brightness to 0. To make the development process faster we used the local Firebase emulator so we did not have to push to Firebase each time. Additionally, the tutorial helped us identify that anonymous sign-ins would make the process quicker. The Firebase web app has a simple on / off switch. </p> <img src="wifi 8.png" alt="diagram" width="900" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> It uses simple boolean as shown below in Firebase.</p> <img src="wifi 9.png" alt="diagram" width="900" </img> <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"> You can find the repo for this project on github at AlexandraWeiner/ps70-group and the web app on https://ps70-d90a6.firebaseapp.com/ </p>