Showing ESP8266 battery voltage in a graph

In a previous post, I dabbled around with presenting sensor readings with the Highcharts graphic library, based on a post on the randomnerdtutorials website.

It might be educational to add another channel to it that reads battery voltage and presents that in a graph as well.
In the picture above there are two colours: when the voltage is above 3.3Volt, the colour is green, when it goes below 3.3Volt the colour turns red.

This is how to do it:
First, grab the Arduino Sketch file from the randomnerdsturorial website. Open it up and add two procedures:

1 locate the procedure called readBME280Humidity() and right above that, add the following lines:

String readBatt(){
float v=analogRead(A0);
v=4.2*(v/1023);
return String(v);
}

2 locate the section that says // Start server.
right above that add:

server.on("/voltage", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readBatt().c_str());
  });

That’s all we need to do in the Arduino Sketch. Now get the index.html file from the randomnerdstutorial website.
Open up the file in an editor like Notepad++ and find the </script> tag.
Right above that tag, add the following code.

var chartV = new Highcharts.Chart({
chart:{ renderTo:'chart-voltage' },
title: { text: 'LipoVoltage' },
series: [{
showInLegend: false,
name: 'Voltage',
data: [],

zones: [{
value: 0,
color: '#0000ff'
}, {
value: 3.3,
color: '#ff0000'
}, {
color: '#00ff00'
}]

}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {

title: { text: 'Voltage (V)' },
min: 0,
max:5
},
credits: { enabled: false }
});

setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if(chartV.series[0].data.length > 40) {
chartV.series[0].addPoint([x, y], true, true, true);
} else {
chartV.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/voltage", true);
xhttp.send();
}, 30000 ) ;

Next, locate the following section in the file, and add the indicated line

Save the html file in the data folder of your Arduino sketch.

Now we have to take care of the hardware section.
The ADC of the ESP8266 chip can only read a maximum of 1Volt, whereas a lipo battery will have a max voltage of 4.2 Volt. So we need a voltage divider that makes 1 Volt uit of 4.2 Volt. If you are using the Wemos D1 mini, that already has a voltage divider in place. It connects the A0 of the Wemos with the ADC of the ESP8266 chip.

A 220k over 100k however will not be giving the required ratio. We will need to add an extra 100k resistor between the battery and the A0 pin. That gives us a ratio of 100/(100+220+100)=100/420=1/4.2.
If you happen to use the new, version 1.3 battery shield, I think that already has an extra 130k in place, which gives a slightly different division factor of 100/(130+220+100)=1/4.5.

Upload the Arduinosketch to an ESP8266 and upload the HTML file to the SPIFFS. Open up your IDE terminal window to check the ip nr and open a browser to that ip nr.

Advertisement