Overview: ESP32 MicroPython Web Server
In this article, we are going to learn about ESP32 MicroPython Based Web Server. We will interface DS18B20 Waterproof Temperature Sensor with ESP32 & read the temperature. We will then create a Web Server & Send the DS18B20 Temperature Data to the Web Server. Using the IP Address we will monitor the Sensor data on the Webpage. You can access the Sensor data on your Local Network.
But before beginning, I will highly recommend you to follow the following tutorial to boost up your MicroPython skill. I have explained how you can install MicroPython & use uPyCraft IDE. Similarly, I have also explained how you can interface DS18B20 Temperature Sensor with ESP32 using MicroPython Code.
1. Getting Started with MicroPython on ESP32 using PyCraft IDE
2. Interfacing DS18B20 Temperature Sensor with ESP32 using MicroPython
Bill of Materials
Following are the components required for making the ESP32 MicroPython Web Server Project. All the components can be eaily purchased from Amazon. The components purchase link is given below.
| S.N. | Components Name | Quantity | Purchase Links |
|---|---|---|---|
| 1 | ESP32 Board | 1 | Amazon | AliExpress |
| 2 | DS18B20 Temperature Sensor | 1 | Amazon | AliExpress |
| 3 | Resistor 4.7K | 1 | Amazon | AliExpress |
| 4 | Connecting Jumper Wires | 5 | Amazon | AliExpress |
| 5 | Breadboard | 1 | Amazon | AliExpress |
In my case I am using a MakePython ESP32 Board as this board is cheaper with additional 1.3″ OLED Display and is specially designed for Python support.
To learn more about this board and purchase it online, you can visit this link: MakePython ESP32 Board.
What is Web Server?
A Web Server is server software dedicated to run the software, that can satisfy client requests on the World Wide Web. A web server may contain one or more websites. A web server processes incoming network requests over HTTP and several other related protocols.
The primary function of a web server is to store, process, and deliver web pages to clients. The communication between client and server takes place using the Hypertext Transfer Protocol (HTTP). Pages delivered are most frequently HTML documents, which may include images, style sheets, and scripts in addition to the text content.
A user agent, commonly a web browser or web crawler, initiates communication by making a request for a specific resource using HTTP and the server responds with the content of that resource or an error message if unable to do so.
You can check the following tutorial to learn more about the ESP32 Web Server: ESP32 Weather Station on Web Server
Circuit Diagram & Connections
Here is a circuit diagram for Interfacing DS18B20 Temperature Sensor with ESP32 using MicroPython Code. The digital output pin is connected to ESP32 GPIO22 Pin. A 4.7K Resistor is used as a pull-up resistor & is connected between digital output pin & VCC Pin. If you want to learn more about the DS18B20 Temperature Sensor you can follow this post: Interfacing DS18B20 Temperature Sensor with ESP32.
In case if you are using MakePython ESP32 Board, you can do the following connection as shown in the connection diagram below.
MicroPython Code/Program
Now let us check the ESP32 MicroPython Code for Creating Web Server. The code contains two parts.
1. boot.py
2. main.py
The boot.py runs after device starts and immediately sets up multiple configuration options like your network credentials, importing libraries. Similarly, main.py executes immediately after boot.py. It is the main script where we’ll handle the webserver.
boot.py Code
Create a new file in the uPyCraft IDE and save it as boot.py. Then copy the following code and upload it to the ESP32 Board.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
try: import usocket as socket except: import socket from time import sleep from machine import Pin import onewire, ds18x20 import network import esp esp.osdebug(None) import gc gc.collect() ds_pin = Pin(22) ds_sensor = ds18x20.DS18X20(onewire.OneWire(ds_pin)) ssid = 'Alexahome' password = 'loranthus' station = network.WLAN(network.STA_IF) station.active(True) station.connect(ssid, password) while station.isconnected() == False: pass print('Connection successful') print(station.ifconfig()) |
main.py Code
Create another file in the uPyCraft IDE and save it as main.py. Then copy the following code and upload it to the ESP32 Board.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
def read_ds_sensor(): roms = ds_sensor.scan() print('Found DS devices: ', roms) print('Temperatures: ') ds_sensor.convert_temp() for rom in roms: temp = ds_sensor.read_temp(rom) if isinstance(temp, float): msg = round(temp, 2) print(temp, end=' ') print('Valid temperature') return msg return b'0.0' def web_page(): temp = read_ds_sensor() html = """<!DOCTYPE HTML><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <style> html { font-family: Arial; display: inline-block; margin: 0px auto; text-align: center; } h2 { font-size: 3.0rem; } p { font-size: 3.0rem; } .units { font-size: 1.2rem; } .ds-labels{ font-size: 1.5rem; vertical-align:middle; padding-bottom: 15px; } </style></head><body><h2>ESP32 DS18B20 WebServer</h2> <p><i class="fas fa-thermometer-half" style="color:#059e8a;"></i> <span class="ds-labels">Temperature</span> <span id="temperature">""" + str(temp) + """</span> <sup class="units">°C</sup> </p> <p><i class="fas fa-thermometer-half" style="color:#059e8a;"></i> <span class="ds-labels">Temperature</span> <span id="temperature">""" + str(round(temp * (9/5) + 32.0, 2)) + """</span> <sup class="units">°F</sup> </p></body></html>""" return html s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s.bind(('', 80)) s.listen(5) while True: try: if gc.mem_free() < 102000: gc.collect() conn, addr = s.accept() conn.settimeout(3.0) print('Got a connection from %s' % str(addr)) request = conn.recv(1024) conn.settimeout(None) request = str(request) print('Content = %s' % request) response = web_page() conn.send('HTTP/1.1 200 OK\n') conn.send('Content-Type: text/html\n') conn.send('Connection: close\n\n') conn.sendall(response) conn.close() except OSError as e: conn.close() print('Connection closed') |
Monitor Sensor Data on ESP32 MicroPython Web Server
After uploading both the code, press the Reset Button on ESP32 Board. The ESP32 will now try connecting to the network using the network credentials. Once connected it will show the IP Address in Shell Window.
You can copy the IP Address and go to any web browser and paste it there. You will see the DS18B20 Sensor Data displayed on Web Page.
Video Tutorial & Guide
2 Comments
Is uPyCraft IDE the best option for MicroPython development?
I had a lot of trouble with uPyCraft. “Install” was awkward, and it was not able to re-establish connection with a running application after a restart or power cycle of the device. Trying Thonny at the moment. It seems much better.