# **Creating a WiFi-Connected Web Server with ESP8285 and MicroPython**
## **Introduction**
In the world of IoT (Internet of Things), connecting a microcontroller to WiFi and hosting a small web page is a fundamental skill. This guide will walk you through setting up an **ESP8285** (a WiFi-enabled microcontroller) with **MicroPython** to create a simple web server. By the end, you’ll have a device that connects to WiFi and serves a web page displaying real-time data.
---
## **1. Hardware and Software Requirements**
### **Hardware Needed:**
- **ESP8285 Module** (or ESP8266 with built-in WiFi)
- **RP2040 (Raspberry Pi Pico)** or another microcontroller with UART support
- **USB-to-Serial Adapter** (if not using a dev board)
- **Breadboard & Jumper Wires** (for connections)
- **3.3V Power Supply** (ESP modules are not 5V tolerant!)
### **Software Needed:**
- **MicroPython Firmware** (flashed on the microcontroller)
- **Thonny IDE / VS Code with Pico-W-Go** (for coding)
- **AT Command Firmware** (if using ESP8285 in AT command mode)
---
## **2. Connecting the ESP8285 to WiFi**
### **Step 1: Wiring the Hardware**
Connect the ESP8285 to your microcontroller (RP2040) as follows:
| **ESP8285 Pin** | **RP2040 Pin** |
|----------------|---------------|
| TX | RX (GP1) |
| RX | TX (GP0) |
| VCC | 3.3V |
| GND | GND |
### **Step 2: Sending AT Commands**
The ESP8285 uses **AT commands** for WiFi configuration. Here’s how to connect it to a network:
```python
from machine import UART, Pin
import time
uart = UART(0, baudrate=115200, tx=Pin(0), rx=Pin(1)) # UART0 on GPIO0 (TX) and GPIO1 (RX)
def send_at_command(cmd, timeout=2000):
print(">>", cmd)
uart.write(cmd + "\r\n")
start = time.ticks_ms()
response = ""
while time.ticks_diff(time.ticks_ms(), start) < timeout:
if uart.any():
response += uart.read().decode()
if "OK" in response or "ERROR" in response:
print("<<", response)
return response
print("Timeout:", response)
return response
# Connect to WiFi
send_at_command('AT+CWMODE=1') # Set to Station mode
send_at_command('AT+CWJAP="YourWiFiSSID","YourPassword"', timeout=10000) # Join network
```
**Expected Output:**
```
>> AT+CWJAP="YourWiFiSSID","YourPassword"
<< WIFI CONNECTED
<< WIFI GOT IP
<< OK
```
### **Step 3: Verify Connection**
Check the assigned IP address:
```python
ip_response = send_at_command("AT+CIFSR")
print("IP Address:", ip_response.split('STAIP,"')[1].split('"')[0])
```
---
## **3. Creating a Basic Web Server**
### **Step 1: Start a TCP Server**
The ESP8285 can host a simple web server on **port 80** (or another port if needed).
```python
send_at_command('AT+CIPMUX=1') # Enable multiple connections
send_at_command('AT+CIPSERVER=1,80') # Start server on port 80
```
### **Step 2: Handle HTTP Requests**
When a browser connects, the ESP8285 receives a request like:
```
GET / HTTP/1.1
Host: 192.168.1.100
```
We respond with a simple HTML page:
```python
def handle_request():
html = """HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>
<html>
<head>
<title>ESP8285 Web Server</title>
</head>
<body>
<h1>Hello from ESP8285!</h1>
<p>IP: {ip}</p>
<p>Signal: {rssi} dBm</p>
</body>
</html>"""
while True:
if uart.any():
data = uart.read().decode()
if "+IPD," in data: # New connection
conn_id = data.split(',')[0][-1]
ip = send_at_command("AT+CIFSR").split('STAIP,"')[1].split('"')[0]
rssi = send_at_command("AT+CWJAP?").split(',')[-1].replace('"','')
response = html.format(ip=ip, rssi=rssi)
send_at_command(f'AT+CIPSEND={conn_id},{len(response)}')
time.sleep(1) # Wait before sending data
uart.write(response)
send_at_command(f'AT+CIPCLOSE={conn_id}')
handle_request()
```
### **Step 3: Access the Web Page**
Open a browser and enter:
```
http://[ESP_IP]
```
Example: `http://192.168.1.100`
---
## **4. Troubleshooting Common Issues**
### **1. No WiFi Connection?**
- Check power supply (3.3V only!)
- Verify SSID/password
- Ensure the ESP8285 is in **Station Mode** (`AT+CWMODE=1`)
### **2. Web Page Not Loading?**
- Ensure the server is running (`AT+CIPSERVER=1,80`)
- Check if another service (like Apache) is blocking port 80
- Test with `curl`:
```bash
curl http://192.168.1.100
```
### **3. Slow Response?**
- Increase UART baud rate (`AT+UART_DEF=115200,8,1,0,0`)
- Reduce HTML size (avoid large files)
---
## **5. Enhancing the Web Server**
### **1. Adding Dynamic Data**
You can display sensor data (e.g., temperature):
```python
html = """
<p>Temperature: {temp}°C</p>
"""
response = html.format(temp=read_sensor())
```
### **2. Adding Interactive Buttons**
Use HTML forms to control GPIOs:
```html
<form action="/led" method="GET">
<button name="state" value="on">Turn LED ON</button>
<button name="state" value="off">Turn LED OFF</button>
</form>
```
### **3. Using CSS for Better UI**
Embed styles for a modern look:
```html
<style>
body { font-family: Arial; margin: 20px; }
.card { background: #f5f5f5; padding: 15px; border-radius: 5px; }
</style>
```
---
## **Conclusion**
By following this guide, you’ve learned how to:
✅ Connect an **ESP8285 to WiFi** using AT commands
✅ Create a **basic web server** in MicroPython
✅ Serve **dynamic HTML content**
✅ Troubleshoot common issues
This setup is perfect for **IoT dashboards, sensor monitoring, or remote device control**. For more advanced projects, consider using **WebSockets** or **MQTT** for real-time updates.
### **Next Steps**
- Try adding **authentication** (`AT+CWSAP`)
- Experiment with **HTTPS** (requires TLS support)
- Integrate with **cloud services** (AWS IoT, Blynk)
Happy coding!
