Introduction: ESP01-8266 and Sensors
Reading sensors is a frequent activity and the ESP8266 CPU is not one of the most powerful currently, however even the smallest version, the ESP01, is capable of doing interesting tasks. Two problems are related to the use of sensors and they are:
a) Visualization.
b) Registration.
This instructable will show an example of using the ESP01 in which the daily values are recorded in a graph that can be viewed on a Web page, either on the desktop or on a cell phone, solving both problems. The cell phone must be on the same LAN as the sensor device.
In the example, the temperature and atmospheric pressure will be displayed, using the BMP280 sensor or any other sensor that supports I2C access.
The program allows us to store a day of data as long as we measure after a few seconds, which is suitable for weather variables, as in the present example
Supplies
a) ESP01 CPU US $0.49/lot of 10 units
b) Digital barometric pressure sensor BMP280 or BME280 US$ 0.60
c) ESP01 UART programmer adapter US $1.01
The total cost is around 1.7 USD approximately plus shipping costs in Ali Express values
d) A computer is also needed to develop the program in an Arduino IDE environment.
Step 1: Operational Idea.
Since the 8266 has a TCP/IP stack, a web server is generated for visualization and to obtain a time measurement using an NTP server on the network.
The Web capability allows us to display the data in any browser, especially a cell phone, and use a graphics system to give us a view of the changes in the day and we can even compare with the previous day. All of this can be achieved using SVG (Scalable Graphics) based graphical rendering.
The example developed here uses ideas from several creators, especially the brilliant Random Nerds, Sara and Rui Santos from Portugal. I also used the idea of another creator whose reference I lost but to whom I owe the idea of using SVG.
An important aspect is that this scheme allows us to store the historical information in the ESP01 itself, so it is not necessary to have an active Web to maintain the history.
To see the web page with the results you need to know the IP address that the router assigns to the device. I use the 'NET Analyzer” program available on Android. It can also be found out by logging into the router as an Administrator.
Step 2: The Circuit
The only solders necessary are those that allow the connection of the ESP01 with the sensor through 4 wires:
- Vcc, 3.3 Volts.
-GND,
- SDA to IO pin 0 of the 8-pin connector.
- SCL to its IO 2 pin.
Step 3: The Program
Without a doubt, the reader will find several resources that teach how to use the Arduino IDE with the ESP8266 CPU and a USB programmer. This setup also allows powering the system with a 5V charger and connecting to a computer for debugging.
The program is divided into modules for customization with different sensors. The main program has areas for sensor libraries, instances, and measurement parameters.
In the example, you'll see:
· Areas for sensor libraries and instances
· Areas for sensor-specific parameters
· A routine to initialize the sensor (inisensor();)
· A routine to read the sensor and store readings in sensor variables (getSensorReadings();)
The rest of the program doesn't require alteration.
Step 4: Web Routine (Copy-Paste Required)
· The handleRoot() routine must be manually copied into a .ino file in the main program directory. Could not be uploaded (why?)
void handleRoot() {/////////////////////////////////////////
StreamString buff;
buff.reserve(640);// Preallocate a large chunk to avoid memory fragmentation OJO con '\'= continuacion
buff.printf("\
<html>\
<head>\
<meta http-equiv='refresh' content='%d'/>\
<title>%s</title>\
<style>\
body {background-color: #cccccc; font-family: Arial; Color: #000088; }\
</style>\
</head>\
<body><h1>%S</h1>\
<p>Fecha incio : %4d-%2d-%2d %02d:%02d:%02d \
Fecha actual: %4d-%2d-%2d %02d:%02d:%02d</p>\
<p> Ultimo valor rojo = %7.2f %S</p>\
<p> Ultimo valor azul = %7.2f %S</p>\
<p> en x = %7d cada: %7d segundos= %7d = %7.2f minutos</p>\
<p>Escala del sensor rojo: minimo= %7.1f maximo= %7.1f %S</p>\
<p>Escala del sensor azul: minimo= %7.1f maximo= %7.1f %S</p>\
<p>%S - %S</p>\
<img src=\"/test.svg\" />\
</body>\
</html>", cada, titulo.c_str(), H1.c_str(), annoi, mesi, diai, horai, minutoi, segundoi, \
anno, mes, dia, hora, minuto, segundo, sensor1 / rango1, unidad1, sensor2 / rango2, unidad2, \
h , cada, h * cada, h * cada / 60., minH1 / rango1, maxH1 / rango1, unidad1, \
minH2 / rango2, maxH2 / rango2, unidad2, CPU.c_str(), WiFi.localIP().toString().c_str());
// Serial.print(" buff "); Serial.println(buff.length());
server.send(200, "text/html", buff.c_str());
}//////////////////////////////////////
Step 5: How It Works
Program Parameters to personalize:
// Parametros a personalizar segun SENSOR<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
String CPU = "ESP01 BMP280 ";
String titulo = "Clima con BMP280";
String unidad1="pascales";
String unidad2="grados C";
String H1 = "Pascales y grados C";
int lapso=86400; // segundos a medir= 1 dia
float escala1 = 1.005; // margen sobre maximo y minimo del grafico=+/-escala
float escala2 = 1.1; // margen sobre el maximo y minimo del grafico=+/-escala
//factores para manejar multiplos o submultiplos de las medidas
float rango1 = 1; // segun unidades directas del sensor
float rango2 = 100.; //centesimas de grado
· First Strings: Manage text definitions on the web page.
· int lapso: Number of seconds in a measurement cycle (e.g., 86400 seconds for a day).
· float escala... parameters: Indicate vertical range of the graph (e.g., 1.015 limits the scale to +/- 1.5% of the central value).
· float rango... parameters: Modify the range of the reading for graphing hundredths (e.g., 100 for hundredths, 1 for direct sensor readings).
Memory and Sampling:
· ESP01's 1Mb memory limits plotting to 410 points for 2 variables.
· For a 24-hour graph, measure 86400 seconds/400 points = 211 seconds/sample.
· More memory (in other CPU versions) allows longer periods or higher frequencies.
· A series of parameters define the graph structure, most importantly:
const int longH = 410;
· This value is limited by the available memory (1MB in ESP01).
Step 6: The Routines
· Sensor-Specific Routines:
o void inisensor(); initializes the sensor.
o void getSensorReadings(); reads sensor values and stores them in sensor1 and sensor2.
· Other Routines:
o void iniwifi(); connects to the router.
o void date(); retrieves time from an NTP server.
o void calculations(); processes data and defines scales.
o void handleRoot(); generates the web page.
o void handleNotFound(); handles web errors.
o void drawGraph(); generates an SVG graphic.
o static void smartDelay(unsigned long ms); manages web delays.
· principal.ino contains setup() and loop() routines (see attached file).
·
· Core routines:
o void handleRoot(); generates the web page.
o void drawGraph(); generates the SVG.
Step 7: Comments
Time Measurement:
o NTP server provides date and time.
o Readings occur every few minutes, minimizing server load.
· Graphic:
o Web server uses JavaScript to build an SVG graphic.
o Communication is entirely ASCII.
o Points are plotted every 2 SVG pixels for better visibility.
o Canvas width is duplicated (e.g., 410 points * 2 = 820 pixels).
· Limitations:
o Measurement frequency limited to 2-3 seconds per sample.
o Suitable for measurements like meteorological data where infrequent updates are acceptable.
· Adaptations:
o Code can be improved for various applications.
o Focus is on a simple, low-cost system.
· Power:
o Circuit powered by the programmer (5V USB to 3.3V).
o Batteries or solar cells can be used, considering ESP01's power consumption.
· Potential Improvements:
o Utilize ESP8266's "sleep" capabilities for more efficient power usage. Not available in ESP-01
o Consider other Espressif boards with more memory and sleep functionality.
Consider other sensors.
Step 8: Results
In the figure you can see a screenshot that shows the pressure, in Pascals, and the temperature in degrees Celsius.
A vertical line indicates the separation between the current data and the previous day's data, which is swept away as the measurement continues. To the left of the magenta cursor is the current information. On the right, it is the one from the previous day.
Considering the small cost, it is feasible to make several specimens and measure, for example, temperatures in different parts of the house.
