work-flow-realtime-energy-monitoring-system

Yarana IoT Guru | ESP32 Power Monitor – Code Explainer
Yarana IoT Guru • YouTube Channel • ESP32 Power Monitor Explainer
Yarana IoT Guru • Code Explainer

⚡ ESP32 Power Monitor
How does it work?

ESP32 Microcontroller
PZEM-004T Sensor
WebSocket Real-Time
I2C LCD Display
Chart.js Dashboard
🔌
Sensor
PZEM-004T v3
📡
Protocol
WebSocket + HTTP
📟
Display
16×2 I2C LCD
📊
Readings
6 Parameters
🌐
Port
HTTP:80 / WS:81
⏱️
Update Rate
Every 1 sec
Slide 01 • Big Picture

Complete System Flow

🔌 AC Power Line
Live Current
📡 PZEM-004T Sensor
Voltage, Current, Power…
🧠 ESP32 Microcontroller
Reads data from Serial2 → UART
📟 LCD Display
I2C (Pin 32/33)
←→
📶 Wi-Fi
ssid + password
🌐 Web Dashboard
View in browser
←→
⚡ WebSocket :81
Real-Time Push
Slide 02 • setup() Function

setup() – ESP32 starts up

① LCD Initialize

First, I2C Wire initializes.
LCD shows “Yarana IoT Guru / Starting…”.

Wire.begin(33, 32) // SDA=33, SCL=32

② PZEM Serial2 Start

Connects the PZEM sensor on Serial2 at 9600 baud rate.
RX=Pin 23, TX=Pin 22

Serial2.begin(9600, SERIAL_8N1, 23, 22)

③ Wi-Fi Connect

Joins Wi-Fi using SSID and password. Until connected, LCD shows “Connecting WiFi”.

WiFi.begin(ssid, password)

④ Servers Start

HTTP Server serves the web page on Port 80.
WebSocket Server sends real-time data on Port 81.

server.begin() webSocket.begin()

⏱️ setup() runs only once when ESP32 boots

Slide 03 • loop() Function

loop() – This happens every 1 second

🔄 loop() Start
📥 Client Handle
📡 WS Loop
⏱️ 1 sec Check?
📊 sendSensorData()
📟 updateLCD()
🔁 Back to loop()
↑                                                  ↑

👉 if (millis() - lastUpdate >= 1000) checks whether 1 second has passed.
If yes → reads the sensor, sends data via WebSocket, and updates the LCD.

Slide 04 • sendSensorData()

How does data come from PZEM?

⚡ voltage()
Volts
🔌 current()
Ampere
💡 power()
Watts
⚙️ energy()
kWh
📊 frequency()
Hz
🎯 pf()
Power Factor

🔐 Safety Check (NaN Guard)

If PZEM returns an invalid value (NaN or Infinity), it replaces it with 0.0.
This is very important, otherwise the app can crash.

isnan(v) ? 0.0 : v

Then it packs all values into JSON format and sends them to the browser via WebSocket ↓

“voltage”:231.50, “current”:1.234, “power”:285.60, “energy”:0.012, “frequency”:50.00, “pf”:0.98 }
Slide 05 • updateLCD()

What is shown on the LCD?

⏰ First 90 Seconds

After boot, the LCD shows the ESP32 IP Address for 90 seconds.
So you can type the address in the browser.

IP Address:
192.168.1.45

⚡ After 90 Seconds

The LCD starts showing live readings.
Voltage, Current (Row 1) and Power, Power Factor (Row 2).

V:231.5 I:1.23
P:285.6 PF:0.98

📌 I2C LCD Pin Connection

  • SDA → ESP32 GPIO 33
  • SCL → ESP32 GPIO 32
  • I2C Address: 0x27 (16×2 LCD)
  • Updates every 1 second
Slide 06 • Web Dashboard

How does the Dashboard work in browser?

🌐 HTTP Server (Port 80)

When the browser opens the ESP32 IP, the HTTP server sends the full HTML page at once.

server.on("/", handleRoot)

⚡ WebSocket (Port 81)

After page load, JavaScript receives incoming JSON data every second, without page refresh.

ws://[ESP32-IP]:81

📈 Chart.js Graphs

There are two real-time charts:
• Power & Current Trend
• Voltage & Frequency Monitor
Stores a maximum of 20 data points.

📌 Reconnect Logic: If WebSocket disconnects, JavaScript automatically reconnects in 3 seconds.
📌 Live Update: On every message, both card values and charts are updated.

Slide 07 • Hardware Wiring

ESP32 Pin Connection Map

ComponentSignalESP32 PinNotes
PZEM-004TTX (Sensor) GPIO 23ESP32 RX
PZEM-004TRX (Sensor) GPIO 22ESP32 TX
I2C LCDSDA GPIO 33Wire.begin(33, 32)
I2C LCDSCL GPIO 32Wire.begin(33, 32)
I2C LCDVCC / GND 3.3V / GNDPower supply
PZEM-004TVCC / GND 5V / GND5V input

⚠️ Safety Note

PZEM-004T connects directly to AC mains (220V/50Hz). Do hardware wiring very carefully. Wrong connections can be dangerous.

Slide 08 • Summary

Complete System Summary

🔌

PZEM-004T Sensor

Measures voltage, current, power, energy, frequency, and power factor from the AC line. Sends data to ESP32 via UART (Serial2).

🧠

ESP32 Brain

Reads sensor data, validates it, creates JSON, pushes it to browser via WebSocket, and updates the LCD.

📟

LCD Display

Shows IP address on boot (for 90s). Then live V, I, P, PF values update every second.

🌐

Web Dashboard

Any device (Phone/PC) can open the ESP32 IP in browser and view real-time charts and values. No page refresh needed!

Created by Mr. Abhishek • Yarana IoT Guru
YouTube Channel Branding • Power Monitor Series