By Jeremy Cook
Interfacing with a microcontroller over a Wi-Fi network for an Arduino web server was once a rather exotic affair. Today you can get a local ESP32 web server up and running in just a few minutes using an ESP32 dev board and the Arduino IDE.
For this demo, you will need an Adafruit ESP32 Feather, plus access to a Wi-Fi network running at 2.4 GHz. We’ll program the ESP32 using an Arduino 2.0 IDE. A magnet, an LED, and a resistor are also employed but are optional.
ESP32 web server software prep
Begin the ESP32 web server setup by installing the Arduino 2.0 IDE. To allow this to work with ESP32 devices, open the Arduino IDE > Preferences dialog and add this line to the Additional boards manager URLs field:
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
Navigate to Tools > Board > Boards manager, and search for “esp32”. Install the “esp32 by Espressif Systems” board definition that comes up and you will be able to program ESP32 boards, plus gain access to an array of examples.
LED server control
Plug in your ESP32 Feather dev board to your computer via USB and select the appropriate port in the drop-down menu to the right of the debug icon. Once selected, you’re presented with a list of boards. In this case, type in Adafruit esp32 and select the Adafruit ESP32 Feather option that appears.
Navigate to File > Examples > WiFi and load SimpleWiFiServer. Modify code lines 30 and 31 to include your actual SSID and password. Ensure you’re accessing a 2.4 GHz network if multiple options exist. Hit the upload button, and it will compile and send the program to your board.
Once programmed, the ESP32 Feather will attempt to connect to your network. Open the serial monitor in the Arduino IDE (icon in the upper-right corner) and set it to 115200 baud. It will list an IP address for access, though you may need to reset and/or scroll down for it to display. Navigate to the listed IP address in your browser, and you’ll be greeted with two lines of text and links that invite you to turn pin 5 on or off.
You can hook up an LED/resistor to pin 5 (as shown in the first image) to allow the code to work as-is. Alternatively, you can set it to the built-in LED to sidestep this minor hardware complication. To do so, substitute LED_BUILTIN for [pin] 5 on lines 38, 103, and 106, and it will light up with no external hardware whatsoever. Optionally, you can also change “LED on pin 5” to “builtin LED” in lines 87 and 88 to make the user interface accurate. Re-upload to allow changes to take effect.
Hall effect sensors for your ESP32 web server
Remote control is great, but what do you want your ESP32 web server to sense in a remote location? Here we will take advantage of the ESP32-WROOM-32E module’s built-in Hall effect sensor to show us the nearby magnetic fields.
Add the following lines of code directly under the client.print function on line 88:
int val = 0;
val = hallRead();
client.print("magnet status ");
client.print(val);
This code establishes a variable “val” in which to store the Hall effect readings. It reads the onboard Hall sensor and prints the results on the client’s web browser. Note that this is an analog value that depends on the field direction, as outlined in this article comparing Hall effect sensors and reed switches.
Image by Jeremy Cook
To test, upload the code to your ESP32 Feather and point your browser to the correct IP address. You’ll now notice a third line showing magnetic field readings.
Place a magnet on top of the ESP32-WROOM-32E module and then refresh your browser. This value will update depending on the magnetic field present. You can still turn the lights off and on by following the page links or simply navigating to the corresponding addresses, but now this action will also update the magnetic field value.
Going further with the ESP32
This article outlines how to set up a very simple web server with Arduino using an ESP32 dev board and a Wi-Fi network. The ESP32’s Wi-Fi abilities allow access to the cloud and onto the broader Internet with the proper setup. This module can be employed in a wide range of consumer, DIY, and prototyping applications.
Before creating your ESP32 web server in Arduino IDE, check out the huge selection of products from industry-leading manufacturers on Arrow.com, like the ones below, to get you started.
関連商品を見る
