ESP32 MicroPython Web Server - Sensor Data on Webpage

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.

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())

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.

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">&deg;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">&deg;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')

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>

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>

Temperature

""" + str(temp) + """

°C

Temperature

""" + str(round(temp * (9/5) + 32.0, 2)) + """

°F

</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

Episode 2: MicroPython on ESP32 - Interfacing OLED Display, DS18B20 Sensor & Creating Web Server

Watch this video on YouTube.

View 2 Comments

2 Comments

Andy on January 24, 2023 2:57 PM

Is uPyCraft IDE the best option for MicroPython development?

Peter on April 20, 2023 11:41 PM

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.