Week 11: Interface and Application Programming

Group Assignment

Group assignment answers can be found here: Group Assignments

Individual Assignment

For this week's assignment, I built off last week's work with my ESP32. For my final project (a lamp), I want to be able to have a user interface that will allow me to control the lamp from my computer or device as well. I decided to use this week's assignment to start working toward that, by first programming the simple controls for turning an LED on and off and also controlling the brightness.
I first connected an external LED to my board by attaching a resistor and LED to an ESP32 pin and ground pin respectively.

I then started off with some sample code that created a web server with a simple on and off button that controlled the LED. I managed to get this code working on my board - but I forgot to take a video. However, the code seemed a little complicated to implement, so I found another example that used XML. First, I got the example code to work on my board (but just the LED part, because the rest of the code wasn't relevant to what I wanted to do). I ran into some issues here - when I first copied the example code into my own files and tried to run it from the Arduino, the .h file that was supposed to be read wasn't getting read properly. The code was getting stuck at the very beginning. I realized it was because I had a .c file with the same name in the folder, so Arduino was defaulting to the .c file when compiling even though I specified the .h file, and that was causing issues. Once that was fixed, the example code seemed to work. The code uploaded, and I was able to access the ip code address from my device and turn the LED on and off with the button.
After trying to make sense of their code, I started to go through and remove all the code they had that I didn't want, so I could then start to build up on it. It was honestly quite hard understanding what the code was doing because there was the arduino code, and then there was also the html code and the XML and Javascript and it was hard to figure out which parts were actually doing things. My initial pass through, I accidentally removed a couple brackets I was supposed to keep. So, the server was rendering, but the buttons weren't actually buttons and just said "toggle" on them, and they didn't work.
I had to leave for class at this point, and when I came back, the IP address stopped working, and I was really confused. I had left the board in lab so I thought nothing could have happened to it. Anthony and I both spent a while trying to debug, and nothing was fixing the problem. We tried connecting to other Wifi and the IP address still didn't work. When Anthony grabbed a devkit, the IP address for that board was working, so we thought it was an issue with my board. At this point, Anthony gave me an ESP32 devkit to work with for the time being so I could at least work on the code. He thought maybe something just randomly happened to the board that just broke it with no explanation.
So back to the code, after I fixed the brackets, I got the LED on/off button to work!

I had to leave again for another commitment, and when I got back, I discovered that now the ESP32 dev kit IP address also wasn't allowing me to connect. We realized that it must have been that the IP addresses were detected as suspicious or something because I kept trying to connect to them, so they were shut down or something. Anthony said the best option now as to probably have the ESP32 create a network that I could connect to, so I ended up doing that.
Now, I wanted to have a way to control the brightness of the LED, which I knew happened through PWM. Originally I was going to just do it by manually looping through code and setting the on and off times, and just have a switch to control whether the light was bright or not. However, I discovered that with the ESP32, it has a built-in PWM function that would allow me to vary the brightness between 1 and 255. I decided to them use a slider, which I thought would be much better for controlling brightness than just a switch with two brightness options. I got the switch working, but at this point, the on/off button stopped working.

I played around a bit more with the code, and managed to get it so that the on/off button worked again, and would turn the brightness to max when on and to 0 when off. However, the button and the slider were disjoint, so the slider wouldn't reflect the state determined by the on/off button, and the on/off button didn't reflect what the slider showed.

Now, the slider will move when I click the on/off button to correspond with the appropriate brightnesses. However, I still have not yet been able to figure out how to make the button correspond to the slider. It works temporarily but doesn't stay.