Build. Learn.
Innovate.
Light Intensity Monitor with Web Dashboard
Project Overview
This project teaches students how to build a light intensity monitoring system using an ESP32 microcontroller, a photoresistor, and an OLED screen. A built-in web dashboard visualizes real-time light data using Chart.js. It demonstrates how environmental sensors and web interfaces can be combined for data monitoring and analysis.
Educational Goals
- Learn how analog sensors (photoresistors) work
- Connect and program an OLED display using MicroPython
- Set up a Wi-Fi connection and create a simple web server
- Visualize data in real time using HTML, JavaScript, and Chart.js
- Understand how sensors can lead to actionable insights through visualization
Detailed Parts List
- 1x ESP32 Dev Board (36-pin)
- 1x Photoresistor (LDR)
- 1x 10kΩ Resistor
- 1x OLED Display (SSD1306 128×64 I2C)
- Jumper wires
- Breadboard
- USB Cable (for flashing and power)
Circuit Diagram Description
- LDR connected to 3.3V and GPIO34 with a 10kΩ resistor pulling down to GND (voltage divider).
- OLED I2C Display connected to GPIO21 (SDA) and GPIO22 (SCL) on the ESP32.
(3.3V) —- LDR —-+—- GPIO34 (ADC)
|
[10kΩ]
|
(GND)
I2C OLED:
SCL (ESP32 GPIO22)
SDA (ESP32 GPIO21)
VCC → 3.3V
GND → GND
Software Functionality
- Reads analog value from LDR via GPIO34
- Displays current light level on OLED screen
- Hosts a local Wi-Fi web server
- Serves an HTML page with a Chart.js graph
- Streams light sensor data every second to the web client
Web Interface Features
- Live updating line chart using Chart.js
- Y-axis scaled to 0–1023 for light levels
- Responsive design with dark theme
- Fetches new data from ESP32 every 1 second
Implementation Steps
- Connect components on breadboard
- Flash ESP32 with MicroPython firmware
- Upload “** driver to ESP32**
- Write and upload the “** code (provided below)**
- Power the ESP32 and connect to Wi-Fi
- Visit the IP address shown on OLED to view dashboard
Extensions and Challenges
- Add a second photoresistor to measure differential lighting
- Log light data to Google Sheets or local file
- Add LED or buzzer alert if light level is too low
- Compare readings indoors vs outdoors
- Create a downloadable report of light trends
Troubleshooting Guide
- OLED not displaying: Check I2C pin wiring and address
- Wi-Fi not connecting: Ensure correct SSID/password
- No chart on web page: Confirm ESP32 is reachable via browser, check JavaScript console
- Sensor reads 0 or 1023 always: Double-check LDR voltage divider wiring
Project Code
from machine import Pin, ADC, SoftI2C
from ssd1306 import SSD1306_I2C
import network
import socket
from time import sleep
ldr = ADC(Pin(34))
ldr.atten(ADC.ATTN_11DB)
ldr.width(ADC.WIDTH_10BIT)
i2c = SoftI2C(scl=Pin(22), sda=Pin(21))
oled = SSD1306_I2C(128, 64, i2c)
ssid = 'YOUR_WIFI_SSID'
password = 'YOUR_WIFI_PASSWORD'
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(ssid, password)
while not wlan.isconnected():
pass
ip = wlan.ifconfig()[0]
print('Connected on', ip)
html = """<!DOCTYPE html>
<html><head><title>Light Dashboard</title>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<style>body{background:#111;color:white;text-align:center;font-family:sans-serif}.container{width:90%%;margin:auto}canvas{background:#222;border-radius:10px}</style>
</head><body><h1>Light Level</h1><div class='container'><canvas id='chart'></canvas></div>
<script>
const ctx=document.getElementById('chart').getContext('2d');
const chart=new Chart(ctx,{type:'line',data:{labels:[],datasets:[{label:'Light',borderColor:'lime',data:[],tension:0.3}]},options:{animation:false,responsive:true,scales:{y:{min:0,max:1023}}}});
async function update(){const r=await fetch('/light');const d=await r.json();const t=new Date().toLocaleTimeString();if(chart.data.labels.length>30){chart.data.labels.shift();chart.data.datasets[0].data.shift();}chart.data.labels.push(t);chart.data.datasets[0].data.push(d.value);chart.update();}
setInterval(update,1000);
</script></body></html>"""
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
while True:
try:
cl, addr = s.accept()
request = cl.recv(1024).decode()
if 'GET /light' in request:
cl.send('HTTP/1.1 200 OK\r\nContent-Type: application/json\r\n\r\n')
cl.send('{{"value": {}}}'.format(ldr.read()))
else:
cl.send('HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n')
cl.send(html)
oled.fill(0)
oled.text('Light Level:', 0, 0)
oled.text(str(ldr.read()), 0, 16)
oled.text('IP:', 0, 40)
oled.text(ip, 0, 52)
oled.show()
cl.close()
except Exception as e:
print('Error:', e)
cl.close()
STEM Benefits
- Science: Understand light as an energy form and how light sensors work.
- Technology: Use of sensors, OLED displays, and microcontrollers to measure environmental data.
- Engineering: Design and assemble circuits and integrate with software for data display.
- Math: Analyze light levels as numerical data and interpret trends using real-time graphs.
Project Code
Insights, Ideas
& How-Tos
Help, Support, and
Common Questions
What types of projects can I find on your website?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.
How do I download project files?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.
Can I buy the hardware required for the projects directly from the website?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.
Can I buy the hardware required for the projects directly from the website?
You can explore a wide range of microcontroller and electronics projects, including Arduino, ESP32, IoT, and more. Each project comes with downloadable code, detailed guides, and the necessary hardware list.