Using ESP32 as a HTTP Server
In this homework you will use the ESP32 WiFi capabilities to connect to WiFi and serve a HTML webpage from a HTTP server.
Base code
Fetch the base arduino code here.
Study the code, try to run it. The code is based on one the examples provided with in Arduino IDE (File -> Examples -> WebServer -> AdvancedWebServer ). This code:
- Tries to connect to the WiFi whose credentials have been defined. It will print to Serial whether the connection is successful, including the IP address the ESP32 is assigned.
- Runs a HTTP webserver on port 80
Now if you are connected to the same WiFi network as the ESP32 you should be able to access the server from a browser using the IP shown in the serial console.
The basic idea behind this code is to take a sensor measurement every 3 seconds and store the sensor values in an array. The array size is fixed to hold 10 measurements. Adding an element follows a FIFO logic, i.e. the oldest value get removed.
The base project generates the values randomly, and displays the list values and draws a HTML SVG graph with random values. The uptime of the device is also shown and two HTML links for controlling LED state.
Updating the project
Make the following changes
- Make the the <a> links actually change the state of the LED. (1pt)
- Update the implementation of takeNewMeasurement(), so that it reads an actual analog sensor (photoresistor) value instead of a random number. (1 pt)
- Update the drawGraph() function, so that it draws lines onto the SVG based on the actual sensor measurement values stored in the measurements int array. (3 pts)
- The y-axis should represent the sensor value. Make sure that higher sensor values appear above lower values, not vice versa!
- The x-axis should represent the index of the measurement in the array (newer measurements should appear on the right of the graph)
- The graphed sensor values should take up the entire area of the SVG rectangle, in other words you have to scale the values accordingly to match the dimension of the SVG rectangle (which is 400x150 in the code). This means that while the max y-value in terms of the SVG is 150, the max sensor value from the 12bit ADC is 2^12 = 4095! A value of 4095 should be translated to 150 in this case and not appear out of bounds of the SVG graph. It is OK to add some padding for better "readability" of the graph.
Important:
- Some of the ADC pins of ESP32 are not usable together with WiFi. For example, pin D2, which we used in the lab for the sensor, corresponds to ADC2_2 and will not work together with WiFi.
- For a full overview of pins, you can refer here
- The ADC1_ pins are still usable (such as ADC1_6, marked as D34 on the board), however they are located on the opposite side of the board compared to what we worked with in the lab.
Since space on our breadboard is limited, you can use the following 'trick' to use for example pin D34. The idea is to use the part of the breadboard which is under the ESP32. By bending one of the jumper wire ends, you can run wires underneath without interfering with the microcontroller.
