Week 12: Interface and Application Programming
Goal: Write an application that interfaces a user with an input &/or output device that you made
Motivation and Design
This week I built an interphase using React to allow for user input to the LED system I built last week. The interphase was pretty simple, but it allowed the use to connect to the LEDs (through an esp32) over bluetooth, turn them on and off, do various patterns, and start it reacting to Spotify. I had done some basic web development in React before so I thought it would be a good thing to explore further this week in order to create my user Interphase.
Output Device
The output device I am using for this week consists of a strip of addressable Neopixel LEDs and an ESP32. If you are curious about how this was made you can check my last weeks page as much of the process is detailed there. For this week, however, all you need to know is that it works and the lights can be controlled over bluetooth.
User Interface
To make my app look a little nicer I decided to use a frontend framework to make a lot of the styling of the interphase much quicker. I opted to use material UI since it looks very minimalist and clean. From here I designed a simple front end that consisted of 9 total buttons. I decided to allow the user to control connecting over bluetooth, turning off the lights, picking from a set selection of patterns (piano, pong, twinkle, fade, rainbow, and solid), or letting my system pick up what is currently being played on spotify to pick the pattern and tempo of the lights.
Making the Buttons Work
The next step was to make the buttons actually do stuff. I had already written code to send information from the computer to the lights over bluetooth so now I just needed to have that function be called with specific info whenever the buttons were pressed. To do this, I defined functions for each of the different buttons (pictured below) so that I could decide exactly what would happen for each one. I then added these functions to the buttons onClick parameter which essentially just calls the function when they button registers a click action. More simply, the overall flow consists of 1) clicking the button, 2) calling the function that corresponds to that button, 3) executing the code within the function to craft the message to be sent to the ESP32 output system, 4) Sending the json formatted data to the device.
Final Product
Here is the system working end to end with user input!