ESP32 Smart Battery Dashboard V1

Project

ESP32

ESP32 Smart Battery Dashboard V1

Wiring Schematic

ARDUINO / C++

#include <WiFi.h>
#include <WebServer.h>

#define BATTERY_PIN 34
#define CHARGER_PIN 35

const char* WIFI_SSID="wifi-name";
const char* WIFI_PASSWORD="your-passwor";

WebServer server(80);

const float BATTERY_DIVIDER_RATIO=2.0;
const int SAMPLE_COUNT=15;

const float BATTERY_REMOVED_THRESHOLD=1.0;

const float CHARGER_ON_THRESHOLD=1.0;
const float CHARGER_OFF_THRESHOLD=0.7;

const float VOLTAGE_SMOOTHING=0.35;
const float PERCENT_SMOOTHING=0.08;

const unsigned long SENSOR_INTERVAL=400;
const unsigned long PERCENT_INTERVAL=3000;
const unsigned long SERIAL_INTERVAL=2000;

float rawBatteryVoltage=0.0;
float displayVoltage=0.0;
float percentageVoltage=0.0;
float chargerVoltage=0.0;

int batteryPercentage=0;

bool batteryPresent=false;
bool chargerConnected=false;

unsigned long lastSensorUpdate=0;
unsigned long lastPercentUpdate=0;
unsigned long lastSerialUpdate=0;

const char MAIN_page[] PROGMEM=R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Live Battery Dashboard</title>

body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top,#10233d,#02070f 60%);
  color:#fff;
  display:flex;
  justify-content:center;
}

.container{
  width:100%;
  max-width:500px;
  padding:32px 18px 35px;
}

.header{
  text-align:center;
  margin-bottom:28px;
}

.title{
  font-size:34px;
  font-weight:800;
  letter-spacing:1px;
  line-height:1.05;
}

.title span{
  color:#2498ff;
}

.main-card{
  background:linear-gradient(145deg,#0d223d,#06111f);
  border:1px solid #1469b5;
  border-radius:28px;
  padding:30px 20px 25px;
  box-shadow:0 0 40px rgba(36,152,255,.10);
}

.battery-label{
  text-align:center;
  color:#48aaff;
  font-size:18px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:25px;
}

.battery-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:25px;
}

.battery{
  width:190px;
  height:330px;
  border:7px solid #2498ff;
  border-radius:28px;
  position:relative;
  overflow:visible;
  background:linear-gradient(180deg,#102b45,#030b13);
  box-shadow:0 0 28px rgba(36,152,255,.22);
  transition:.4s;
}

.battery::before{
  content:"";
  position:absolute;
  width:70px;
  height:22px;
  background:#2498ff;
  top:-27px;
  left:50%;
  transform:translateX(-50%);
  border-radius:7px 7px 0 0;
  transition:.4s;
}

.battery-fill{
  position:absolute;
  left:9px;
  right:9px;
  bottom:9px;
  height:0%;
  overflow:hidden;
  border-radius:18px 18px 13px 13px;
  background:linear-gradient(to top,#06366f,#087ed9,#39cfff);
  transition:height .8s cubic-bezier(.22,.8,.25,1);
}

.wave{
  position:absolute;
  width:220%;
  height:80px;
  left:-60%;
  top:-35px;
  border-radius:45%;
  background:rgba(255,255,255,.30);
  animation:waveMove 4s linear infinite;
}

.wave.two{
  top:-20px;
  background:rgba(90,220,255,.35);
  animation:waveMoveReverse 5.5s linear infinite;
}

@keyframes waveMove{
  from{
    transform:translateX(-10%) rotate(2deg);
  }
  to{
    transform:translateX(10%) rotate(2deg);
  }
}

@keyframes waveMoveReverse{
  from{
    transform:translateX(10%) rotate(-2deg);
  }
  to{
    transform:translateX(-10%) rotate(-2deg);
  }
}

.percent{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  font-size:54px;
  font-weight:800;
  text-shadow:0 3px 15px rgba(0,0,0,.85);
}

.charging-icon{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  font-size:38px;
  opacity:0;
  transition:.3s;
}

.charging-icon.active{
  opacity:1;
  animation:chargePulse 1s ease-in-out infinite;
}

@keyframes chargePulse{
  0%,100%{
    transform:translateX(-50%) scale(.85);
    opacity:.45;
  }

50%{
    transform:translateX(-50%) scale(1.2);
    opacity:1;
  }
}

.battery.charging{
  border-color:#ffb347;
  box-shadow:0 0 38px rgba(255,179,71,.38);
}

.battery.charging::before{
  background:#ffb347;
}

.battery-fill.charging{
  background:linear-gradient(to top,#8a3500,#e87500,#ffb12e,#ffe28c);
}

.battery-fill.charging .wave{
  animation-duration:2s;
  background:rgba(255,255,255,.45);
}

.battery-fill.charging .wave.two{
  animation-duration:2.8s;
  background:rgba(255,220,120,.45);
}

.battery.low{
  border-color:#ff5c5c;
  box-shadow:0 0 30px rgba(255,92,92,.25);
}

.battery.low::before{
  background:#ff5c5c;
}

.battery-fill.low{
  background:linear-gradient(to top,#681010,#c83232,#ff7373);
}

.battery.empty{
  border-color:#536170;
  box-shadow:none;
}

.battery.empty::before{
  background:#536170;
}

.divider{
  height:1px;
  background:#16436c;
  margin:10px 0 25px;
}

.info-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.info-box{
  text-align:center;
}

.info-label{
  color:#b5bdc8;
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:10px;
}

.info-value{
  font-size:27px;
  font-weight:700;
}

.voltage{
  color:#2498ff;
}

.status{
  color:#55d68a;
}

.status.charging{
  color:#ffb347;
}

.status.low{
  color:#ff5c5c;
}

.status.no-battery{
  color:#7e8a96;
  font-size:20px;
}

.connection{
  margin-top:22px;
  padding:22px;
  border-radius:22px;
  background:linear-gradient(145deg,#0c1c31,#071321);
  border:1px solid #164d7d;
}

.connection-left{
  display:flex;
  align-items:center;
  gap:15px;
}

.dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2498ff;
  box-shadow:0 0 15px rgba(36,152,255,.8);
}

.connection-label{
  color:#b8c0ca;
  font-size:13px;
  letter-spacing:1px;
  margin-bottom:5px;
}

.connection-status{
  color:#2498ff;
  font-size:22px;
  font-weight:700;
}

.footer{
  margin-top:28px;
  text-align:center;
  color:#2498ff;
  font-size:20px;
  letter-spacing:1px;
}

@media(max-width:380px){
  .title{
    font-size:29px;
  }

.battery{
    width:165px;
    height:285px;
  }

.percent{
    font-size:48px;
  }
}
</style>
</head>

<body>

<div class="header">
    <div class="title">
      LIVE <span>BATTERY</span><br>
      DASHBOARD
    </div>
  </div>

<div class="battery-label">BATTERY LEVEL</div>

</div>
    </div>

<div class="info-box">
        <div class="info-label">VOLTAGE</div>
        <div class="info-value voltage" id="voltage">
          0.00 V
        </div>
      </div>

<div class="info-box">
        <div class="info-label">STATUS</div>
        <div class="info-value status" id="status">
          --
        </div>
      </div>

</div>

<div>
        <div class="connection-label">
          CONNECTION
        </div>

<div class="connection-status">
          Connected
        </div>
      </div>

</div>
  </div>

<div class="footer">
    lifetronix.in
  </div>

</div>

let requestRunning=false;

async function updateData(){

if(requestRunning)return;

requestRunning=true;

try{

const response=await fetch(
      "/data?time="+Date.now(),
      {
        method:"GET",
        cache:"no-store"
      }
    );

if(!response.ok){
      throw new Error("ESP32 error");
    }

const data=await response.json();

const battery=document.getElementById("battery");
    const fill=document.getElementById("batteryFill");
    const icon=document.getElementById("chargingIcon");
    const status=document.getElementById("status");

document.getElementById("voltage").textContent=
      Number(data.voltage).toFixed(2)+" V";

document.getElementById("percentage").textContent=
      data.percentage+"%";

fill.style.height=data.percentage+"%";

battery.className="battery";
    fill.className="battery-fill";
    status.className="info-value status";

icon.classList.remove("active");

if(data.status==="Charging"){

battery.classList.add("charging");
      fill.classList.add("charging");
      status.classList.add("charging");

icon.classList.add("active");

}

else if(data.status==="Low"){

battery.classList.add("low");
      fill.classList.add("low");
      status.classList.add("low");

}

else if(data.status==="No Battery"){

battery.classList.add("empty");
      status.classList.add("no-battery");

}

status.textContent=data.status;

}

catch(error){

console.log("Dashboard update failed");

}

finally{

requestRunning=false;

}
}

updateData();

setInterval(
  updateData,
  500
);

</script>

</body>
</html>
)rawliteral";

float readADCVoltage(int pin){

uint32_t total=0;

for(int i=0;i<SAMPLE_COUNT;i++){

total+=analogReadMilliVolts(pin);

delay(2);

}

return(total/(float)SAMPLE_COUNT)/1000.0;
}

int calculatePercentage(float voltage){

if(voltage>=4.20)return 100;

if(voltage>=4.15)
    return map((int)(voltage*1000),4150,4200,95,100);

if(voltage>=4.10)
    return map((int)(voltage*1000),4100,4150,88,95);

if(voltage>=4.00)
    return map((int)(voltage*1000),4000,4100,75,88);

if(voltage>=3.90)
    return map((int)(voltage*1000),3900,4000,60,75);

if(voltage>=3.80)
    return map((int)(voltage*1000),3800,3900,45,60);

if(voltage>=3.70)
    return map((int)(voltage*1000),3700,3800,30,45);

if(voltage>=3.60)
    return map((int)(voltage*1000),3600,3700,15,30);

if(voltage>=3.50)
    return map((int)(voltage*1000),3500,3600,8,15);

if(voltage>=3.40)
    return map((int)(voltage*1000),3400,3500,3,8);

if(voltage>=3.30)
    return map((int)(voltage*1000),3300,3400,1,3);

return 0;
}

void updateCharger(){

chargerVoltage=
    readADCVoltage(CHARGER_PIN);

if(chargerConnected){

if(chargerVoltage<
       CHARGER_OFF_THRESHOLD){

chargerConnected=false;

}

else{

if(chargerVoltage>
       CHARGER_ON_THRESHOLD){

chargerConnected=true;

}

}
}

void updateBattery(){

float adcVoltage=
    readADCVoltage(BATTERY_PIN);

rawBatteryVoltage=
    adcVoltage*
    BATTERY_DIVIDER_RATIO;

// Battery removed
  if(rawBatteryVoltage<
     BATTERY_REMOVED_THRESHOLD){

batteryPresent=false;

rawBatteryVoltage=0.0;
    displayVoltage=0.0;
    percentageVoltage=0.0;
    batteryPercentage=0;

return;
  }

// Battery connected
  if(!batteryPresent){

batteryPresent=true;

displayVoltage=
      rawBatteryVoltage;

percentageVoltage=
      rawBatteryVoltage;

batteryPercentage=
      calculatePercentage(
        rawBatteryVoltage
      );

return;
  }

// Smooth displayed voltage
  displayVoltage+=
    VOLTAGE_SMOOTHING*
    (
      rawBatteryVoltage-
      displayVoltage
    );
}

void updatePercentage(){

if(!batteryPresent){

batteryPercentage=0;

return;
  }

if(
    millis()-
    lastPercentUpdate
    <
    PERCENT_INTERVAL
  ){
    return;
  }

lastPercentUpdate=millis();

percentageVoltage+=
    PERCENT_SMOOTHING*
    (
      rawBatteryVoltage-
      percentageVoltage
    );

int target=
    calculatePercentage(
      percentageVoltage
    );

if(chargerConnected){

// While charging percentage
    // only moves upward
    if(target>
       batteryPercentage){

batteryPercentage++;

}

else{

// Slowly follow real battery level
    if(target>
       batteryPercentage){

batteryPercentage++;

}

else if(target<
            batteryPercentage){

batteryPercentage--;

}

batteryPercentage=
    constrain(
      batteryPercentage,
      0,
      100
    );
}

String getBatteryStatus(){

if(!batteryPresent){
    return"No Battery";
  }

if(chargerConnected){
    return"Charging";
  }

if(batteryPercentage<=10){
    return"Low";
  }

if(batteryPercentage>=95){
    return"Full";
  }

return"Normal";
}

void updateSystem(){

updateBattery();

updateCharger();

updatePercentage();
}

void handleData(){

String json="{";

json+="\"voltage\":"+
        String(
          displayVoltage,
          3
        );

json+=",\"percentage\":"+
        String(
          batteryPercentage
        );

json+=",\"status\":\""+
        getBatteryStatus()+
        "\"";

json+="}";

server.sendHeader(
    "Cache-Control",
    "no-store, no-cache, must-revalidate, max-age=0"
  );

server.sendHeader(
    "Pragma",
    "no-cache"
  );

server.sendHeader(
    "Expires",
    "0"
  );

server.send(
    200,
    "application/json",
    json
  );
}

void setup(){

Serial.begin(115200);

analogReadResolution(12);

analogSetPinAttenuation(
    BATTERY_PIN,
    ADC_11db
  );

analogSetPinAttenuation(
    CHARGER_PIN,
    ADC_11db
  );

WiFi.mode(WIFI_STA);

WiFi.begin(
    WIFI_SSID,
    WIFI_PASSWORD
  );

Serial.println();
  Serial.print(
    "Connecting to WiFi"
  );

while(
    WiFi.status()!=WL_CONNECTED
  ){

delay(500);

Serial.print(".");

}

Serial.println();

Serial.println(
    "WiFi Connected"
  );

Serial.print(
    "Open: http://"
  );

Serial.println(
    WiFi.localIP()
  );

updateSystem();

server.on(
    "/",
    HTTP_GET,
    [](){

server.sendHeader(
        "Cache-Control",
        "no-store"
      );

server.send_P(
        200,
        "text/html",
        MAIN_page
      );

}
  );

server.on(
    "/data",
    HTTP_GET,
    handleData
  );

server.begin();

Serial.println(
    "Web Server Started"
  );
}

void loop(){

server.handleClient();

if(
    millis()-
    lastSensorUpdate
    >=
    SENSOR_INTERVAL
  ){

lastSensorUpdate=
      millis();

updateSystem();

}

if(
    millis()-
    lastSerialUpdate
    >=
    SERIAL_INTERVAL
  ){

lastSerialUpdate=
      millis();

Serial.print(
      "Battery: "
    );

Serial.print(
      rawBatteryVoltage,
      3
    );

Serial.print(
      "V | Display: "
    );

Serial.print(
      displayVoltage,
      3
    );

Serial.print(
      "V | Percentage: "
    );

Serial.print(
      batteryPercentage
    );

Serial.print(
      "% | Charger: "
    );

Serial.print(
      chargerConnected?
      "YES":"NO"
    );

Serial.print(
      " | Status: "
    );

Serial.println(
      getBatteryStatus()
    );

}

ESP32 Smart Battery Dashboard V1

Project Overview

The ESP32 WiFi Battery Monitor teaches advanced techniques for creating real-time battery monitoring applications with animated web dashboards using ADC voltage reading and WiFi connectivity.

This project monitors battery voltage levels and charging status wirelessly through a modern web dashboard accessible from phones or computers on the same WiFi network. The system displays live battery percentage with animated charging indicators, wave animations, and status information updated in real-time with smooth visual transitions.

When you run the project, the ESP32 reads battery voltage through an analog input pin and charging status through a digital detection pin while connecting to WiFi. The web interface displays an animated battery icon that fills as the battery charges with wave effects and live voltage readouts showing percentage, voltage, and charging status.

Key Features: WiFi connectivity to existing networks without access point creation, real-time battery voltage monitoring through ADC analog input pins, charging status detection with configurable thresholds, animated battery icon with charging wave effects, live battery percentage and voltage display, dark-themed responsive web dashboard, JSON data transmission for live updates, mobile-friendly interface adapting to any screen size, lightweight code optimized for microcontroller platforms.

Components Required

To build this project, collect these specific items from your kit and ensure each component is in good working condition.

ESP32 Development Board x 1, Battery Cell or Power Supply x 1, Voltage Divider Resistors (2kΩ and 1kΩ) x 1, Charger Module or Detection Circuit x 1, Breadboard x 1, Jumper Wires x 4, USB Cable x 1.

Circuit Connections

Step 1: Connect Ground Rail for Shared Reference

Connect the ESP32 GND ground pin directly to the negative rail of your breadboard to establish a shared ground connection for your entire circuit and all connected electronic components throughout the system.

Step 2: Create Voltage Divider for Battery Monitoring

Build a voltage divider using a 2kΩ resistor in series with a 1kΩ resistor connecting the battery positive terminal through both resistors to ground. The junction between resistors connects to ESP32 GPIO pin 34 for battery voltage measurement through the ADC.

Step 3: Connect Battery Positive to Voltage Divider Input

Connect the positive terminal of your battery or power supply to the first resistor in the voltage divider circuit. This allows the ADC pin to read a scaled-down voltage safe for the microcontroller while maintaining accurate battery monitoring.

Step 4: Connect Voltage Divider Ground Reference

Step 5: Connect Charger Detection to GPIO Pin

Connect a charging detection circuit output to ESP32 GPIO pin 35 for monitoring charging status and state. Use a simple comparator circuit or charging module output that provides a digital signal indicating whether the charger is connected.

Step 6: Configure Battery Connection Safety

Ensure the battery or power supply is properly rated for your monitoring circuit and includes appropriate protection. Verify all connections are secure and no exposed wire ends could cause short circuits or damage.

Step 7: Verify All Connections Before Upload

Double-check all resistor values in the voltage divider for accurate scaling and verify GPIO pin connections match the code configuration. Test continuity with a multimeter and confirm voltage at the ADC pin falls within safe operating range before uploading code.

Important: Voltage dividers must scale battery voltage to safe levels for ESP32 ADC input pins which accept maximum 3.3V. The 2kΩ to 1kΩ ratio provides appropriate scaling for typical battery monitoring applications ensuring accurate readings.

Software Requirements

Before uploading code to your ESP32, install the following software components, libraries, and drivers on your development system.

Arduino IDE : Download and install the latest version from the official Arduino website for code development, editing, and uploading to your microcontroller board.

ESP32 Board Package : Add the ESP32 board package to Arduino IDE by accessing Boards Manager and searching for ESP32 with proper version selection.

WiFi Library : This library comes built-in with the ESP32 Board Package providing WiFi connection and network management capabilities for wireless networking.

WebServer Library : This library comes built-in with the ESP32 Board Package enabling HTTP server functionality for hosting web interfaces on the microcontroller. implementation.

CH340 USB Driver : Download and install the CH340 USB driver for your specific operating system to enable ESP32 board serial communication with your computer.

Verify Installation : Open Arduino IDE, select your ESP32 board from Tools menu, and confirm the COM port shows your connected microcontroller device.

How the Project Code Works

Initialize WiFi Connection and ADC Battery Monitoring Setup

The setup function configures ESP32 GPIO pin 34 as an analog input for battery voltage measurement and GPIO pin 35 for charging detection. The WiFi connection is established using stored credentials while the WebServer initializes on port 80 for dashboard hosting.

Configure ADC Sampling and Voltage Calculation Parameters

The battery monitoring system averages multiple ADC samples for noise reduction and smoothing using exponential filtering on voltage readings. Constants define the battery divider ratio, sample count, and voltage thresholds for charging status detection.

Implement HTTP Handlers for Battery Data Requests

The web server includes handler functions for serving the dashboard HTML page and processing JSON data requests from the browser. The handleData function formats battery voltage, percentage, and charging status as JSON for real-time dashboard updates.

Calculate Battery Percentage from Voltage Readings

The voltage to percentage conversion uses calibration points mapping minimum voltage to 0 percent and maximum voltage to 100 percent. The charging status detection compares charging pin voltage against configurable thresholds to determine charging or full states.

Generate Animated Dashboard with Real-Time Display Updates

The embedded HTML page includes animated SVG battery icon elements that fill with color as percentage increases and wave animations that activate during charging. JavaScript handles periodic data requests and smooth animations creating an engaging user experience.

Expected Output

After uploading your code to the ESP32, open the Serial Monitor at 115200 baud and observe the connection status messages displayed.

The ESP32 connects to WiFi and displays its local IP address while continuously monitoring battery voltage through the ADC pin. Copy the IP address from Serial Monitor and open it in a browser on any device connected to the same WiFi network.

The animated web dashboard displays a battery icon that fills progressively as battery charge increases with live voltage readings and percentage display. The charging indicator shows wave animations when charging is detected and updates all values in real-time every 500 milliseconds.

Operational Troubleshooting

Battery Voltage Readings Appear Incorrect or Percentage Does Not Match :- Verify the voltage divider resistor values match the 2kΩ to 1kΩ configuration in the code calculations. Check that the battery divider ratio constant is correctly set in code to match your physical resistor values. Test the ADC voltage at GPIO pin 34 with a multimeter to confirm proper scaling from your battery voltage.

ESP32 Fails to Connect to Wi-Fi or No IP Address Appears in Serial Monitor :- Verify the Wi-Fi network name and password in the code match your actual wireless network credentials exactly including capitalization. Check that your WiFi network is broadcasting and within range of the ESP32 board. Restart the ESP32 using the reset button and monitor Serial output for connection status updates.

Web Dashboard Loads But Battery Readings Do Not Update or Show Incorrect Values :- Ensure both the ESP32 and your device are connected to the same WiFi network without using separate networks. Verify the IP address copied from Serial Monitor is correct and try refreshing the browser page multiple times. Check that the ADC sampling is functioning properly by monitoring Serial output for voltage readings.

Charging Detection Does Not Work or Shows Incorrect Charging Status :- Confirm the charger detection circuit is properly connected to GPIO pin 35 and provides correct digital signal levels. Verify the charging threshold values in code match your charger detection circuit output characteristics. Test the GPIO pin 35 voltage with a multimeter while charger is connected and disconnected.

What You Learned

By finishing this project, you understand how to create real-time battery monitoring applications combining WiFi connectivity with analog sensor inputs and status detection. You have learned techniques for implementing animated web dashboards with live data updates, voltage division circuits, and charging state detection on microcontroller platforms.

You can apply battery monitoring techniques to create battery-powered IoT devices with wireless status reporting and cloud integration capabilities. You have experienced how animated dashboards enhance user experience and provide intuitive real-time feedback for monitoring applications on embedded systems.

WHAT'S NEXT?

Ready to Build More?

Explore more Lifetronix projects, improve your skills, and turn your ideas into real working prototypes.

Project

ESP32

ESP32 Smart Battery Dashboard V1

Instagram

Youtube

Wiring Schematic

ESP32 Smart Battery Dashboard V1

Project Overview

Components Required

Circuit Connections

Step 1: Connect Ground Rail for Shared Reference

Step 2: Create Voltage Divider for Battery Monitoring

Step 3: Connect Battery Positive to Voltage Divider Input

Step 4: Connect Voltage Divider Ground Reference

Step 5: Connect Charger Detection to GPIO Pin

Step 6: Configure Battery Connection Safety

Step 7: Verify All Connections Before Upload

Software Requirements

How the Project Code Works

Initialize WiFi Connection and ADC Battery Monitoring Setup

Configure ADC Sampling and Voltage Calculation Parameters

Implement HTTP Handlers for Battery Data Requests

Calculate Battery Percentage from Voltage Readings

Generate Animated Dashboard with Real-Time Display Updates

Expected Output

Operational Troubleshooting

What You Learned

WHAT'S NEXT?

Ready to Build More?