This tutorial demonstrates how to set up a MicroPython web server on an ESP32.
For the web server we’ll be using an open source MicroPython library called MicroWebSrv created by a fantastic programmer named Jean-Christophe. He’s done a great job making a very powerful lightweight web server that’s easy to get up and running on ESP32’s and also Pycom modules. The library is very feature-rich:
• Use it to embed a cool Web site in yours modulesHandle POST requests to interract with user and configure options
• Exchange in JSON format on HTTP methods to make an embedded full REST API
• Serve files on the fly to export any data to the user
• Play with AJAX to interact speedily with a Web application
• Use WebSockets for fast and powerful data exchange
• Make HTML/Python files for rendering more efficient web pages
UPDATE: Jean-Christophe released version 2.0 of microWebSrv which is more robust, more efficient and faster.
Use git clone to download the original repo.
Change into the download directory and list the contents using tack A (almost all) to display hidden items.
In addition to the library files (microWebSrv.py, microWebTemplate.py and microWebSocket.py) there is an example web server file called main.py. Main is a reserved file name in MicroPython that will automatically run at boot after the boot.py file. Since the ESP32 does not currently retain WiFi settings, I usually create a main.py file to connect to my WiFi access point at boot. It would look something like this:
You could prepend the main.py example with the above code or you can rename the main.py example so it doesn’t automatically run at start up. For example, you could rename it start.py.
The MicroWebSrv library was originally written for Pycomm modules which have a slightly different root path than the ESP32. Therefore when on an ESP32, it is necessary to modify the web server example to specify the webPath when the MicroWebSrv class is instantiated.
After making this one modification the example web server and supporting files can be transferred to the ESP32. Rshell can be used to sync an entire folder and subfolders to the ESP32. However, first delete the boot.py file so it doesn’t overwrite your existing boot.py file and I’d also recommend deleting any superfluous files to expedite the transfer.
Now run Rshell . Make sure you are in the MicroWebSrv folder and then issue the rsync command.
The above command starts rshell and connects to the ESP32 on ttyUSB0. Tack A enables ASCII encode binary file transfers which I currently find to be more reliable. Tack E nano enables editing files directly on the ESP32 with the Nano text editor. Rsync copies all files in the current directory to the root directory of the ESP32. Once the sync is complete enter the repl and import start.py to start the web server.
The MicroWebSrv www folder contains several example files:
The example index.html demonstrates a simple HTML file. It includes a separate stylesheet and an image. It also has a link to download a PDF. In a web browser, enter the IP address of you ESP32 followed by /index.html.
Another example, test.pyhtml demonstrates the Python templating language. This allows you to dynamically generate content on the server using Python code. A third example, wstest.html provides websocket functionality which I’ll probably explore more in a future tutorial.
The start.py file (which I renamed above from main.py) also has route handling examples for gets and posts. Browsing to the test route brings up a sample form that hits the test route get handler. Submitting the form hits the test route post handler.
The ESP32 is a very powerful chip that can easily integrate with sensors and other electronic components. This makes it easy to display sensor data on a web page such as a DHT-22 temperature/humidity sensor. Controls can also be added to a web page to manipulate hardware attached to an ESP32 such as NeoPixel RGB LED’s.
The wiring is very simple. The DHT-22 Vcc pin 1 is connected to a 3.3 V pin on the ESP32. The ground pin 4 is connected to a ground on the ESP32. The sensor data pin 2 is attached to GPIO 15. You could use any available GPIO pin as long as you specify it in your code. The NeoPixel LED Vcc is connected to a 5 V power pin on the ESP32. It is necessary to step down the 5 V to 4.3 V using a diode. The grounds are connected and the data-in line is attached to GPIO 13. Again any available pin could be used.
I’m using a Wemos Lolin32 ESP32 breakout board. It is inexpensive and is narrow so it fits on a breadboard. It also has a lithium battery jack and charging circuit.
Here’s the code for a web server that display real-time temperature humidity data. The single dht route polls the DHT-22 and returns a server-sent event stream.
Here’s the HTML page to connect to the DHT event source.
When you browse to the html file the sensor data is displayed and updated every few seconds.
Another MicroPython web server provides a single led route to handle JSON posts. The posted color data is read and the NeoPixel LED is set accordingly.
The NeoPixel LED attached to the ESP32 can now be controlled from any device with a web browser.
Part 4 of this tutorial demonstrates how to drive an OLED display and also looks at using the ADC pins and FTP file management.
MicroPython and HTML code for DHT-22 and NeoPixel web pages – (10-04-2017).