ESP32 - Temperatuur via Web
In deze handleiding verkennen we hoe u de ESP32 programmeert als webserver, zodat u temperatuurgegevens via een webinterface kunt raadplegen. Met behulp van een aangesloten DS18B20 temperatuursensor kunt u eenvoudig de actuele temperatuur bekijken door uw smartphone of pc te verbinden met de webpagina die de ESP32 serveert. Hier is een korte samenvatting van hoe het werkt:
- De ESP32 is geprogrammeerd als webserver.
- U typt het IP-adres van de ESP32 in een webbrowser op uw smartphone of pc.
- De ESP32 reageert op het verzoek van de webbrowser met een webpagina die de temperatuur toont, gemeten door de DS18B20 sensor.
We behandelen twee voorbeeldcodes:
- ESP32 code die een zeer eenvoudige webpagina levert met de temperatuur van de DS18B20 sensor. Dit maakt het u makkelijk om te begrijpen hoe het werkt. De HTML-inhoud is geïntegreerd in de ESP32 code.
- ESP32 code die een grafische webpagina levert met de temperatuur van de DS18B20 sensor. De HTML-inhoud is gescheiden van de ESP32 code.
Hardware Benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Aankoopadvies: Veel DS18B20-sensoren op de markt zijn van lage kwaliteit. We raden u ten zeerste aan de sensor van het merk DIYables te kopen via de bovenstaande link. We hebben het getest en het werkte goed.
Over ESP32 Web Server en DS18B20 Temperatuursensor
Als u nog niet bekend bent met de ESP32 Web Server en de DS18B20 temperatuursensor (pinout, werking, hoe te programmeren ...), leer hier meer in de volgende tutorials:
Bedradingsschema
This image is created using Fritzing. Click to enlarge image
ESP32 Code - Eenvoudige Webpagina
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-temperature-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN 17 // ESP32 pin GPIO17 connected to DS18B20 sensor's DATA pin
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
DS18B20.begin(); // initialize the DS18B20 sensor
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Snelle Stappen
- Als u voor het eerst de ESP32 gebruikt, bekijk dan hoe u de omgeving voor ESP32 instelt in Arduino IDE.
- Maak de bedrading zoals op de bovenstaande afbeelding.
- Verbind de ESP32 board met uw pc via een micro USB-kabel.
- Open de Arduino IDE op uw pc.
- Selecteer de juiste ESP32 board (bijvoorbeeld ESP32 Dev Module) en COM-poort.
- Open de Library Manager door te klikken op het Library Manager icoon in de linker navigatiebalk van de Arduino IDE.
- Zoek op “DIYables ESP32 WebServer” en vind de Web Server bibliotheek gemaakt door DIYables.
- Klik op de Installeren knop om de Web Server bibliotheek te installeren.
- Zoek op “DallasTemperature” in de zoekbalk en zoek de DallasTemperature bibliotheek van Miles Burton.
- Klik op de Installeren knop om de DallasTemperature bibliotheek te installeren.
- U wordt gevraagd om de afhankelijkheid te installeren. Klik op Alles installeren om de OneWire bibliotheek te installeren.
- Kopieer de bovenstaande code en open deze met Arduino IDE.
- Pas de wifi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen gegevens.
- Klik op de Uploaden knop in Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Seriële Monitor.
- Bekijk het resultaat op de Seriële Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- U ziet een IP-adres verschijnen. Typ dit IP-adres in de adresbalk van een webbrowser op uw smartphone of pc.
- U ziet de volgende output in de Seriële Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- U ziet een zeer eenvoudige webpagina van de ESP32 board in de webbrowser, zoals hieronder weergegeven:
※ Notiz:
Met de bovenstaande code moet u de webpagina opnieuw laden in de browser om de temperatuur te updaten. In een volgend deel leren we hoe u de webpagina automatisch de temperatuur laat verversen op de achtergrond zonder de pagina te herladen.
ESP32 Code - Grafische Webpagina
Omdat een grafische webpagina veel HTML-inhoud bevat, is het onpraktisch om deze zoals voorheen in de ESP32 code te integreren. Om dit op te lossen, scheiden we de ESP32 code en de HTML code in aparte bestanden:
- De ESP32 code plaatsen we in een .ino bestand.
- De HTML code (inclusief HTML, CSS en JavaScript) plaatsen we in een apart .h bestand.
Voor details over het scheiden van de HTML code van de ESP32 code verwijzen we naar de tutorial ESP32 - Web Server.
Snelle Stappen
- Open Arduino IDE en maak een nieuw sketch aan. Geef het een naam, bijvoorbeeld newbiely.com.ino.
- Kopieer onderstaande code en open deze met Arduino IDE.
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-temperature-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN 17 // ESP32 pin GPIO17 connected to DS18B20 sensor's DATA pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received"); // for debugging
server.sendResponse(client, webpage); // webpage is from index
}
// Page handlers
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received"); // for debugging
float temperature = getTemperature();
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
DS18B20.begin(); // initialize the DS18B20 sensor
Serial.println("ESP32 Web Server");
// Define a route to get the web page
server.addRoute("/", handleHome);
// Define a route to get the temperature data
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Pas de WiFi-gegevens (SSID en wachtwoord) in de code aan naar uw eigen gegevens.
- Maak het index.h bestand in Arduino IDE aan door:
- Ofwel te klikken op de knop net onder het seriële monitor icoon en New Tab te kiezen, of gebruik de toetscombinatie Ctrl+Shift+N.
- Geef het bestand de naam index.h en klik op OK.
- Kopieer onderstaande code en plak deze in index.h.
- Nu hebt u de code in twee bestanden: newbiely.com.ino en index.h.
- Klik op de Uploaden knop in Arduino IDE om de code naar ESP32 te uploaden.
- Open de webpagina van de ESP32 board via een webbrowser op uw pc of smartphone zoals eerder. U ziet de pagina zoals hieronder:
- Als u de HTML-inhoud in het index.h bestand wijzigt zonder iets aan te passen in het newbiely.com.ino bestand, zal Arduino IDE bij compileren en uploaden de HTML-inhoud niet updaten.
- Om Arduino IDE de HTML-inhoud te laten updaten, maakt u een wijziging in het newbiely.com.ino bestand (bijv. een lege regel toevoegen of een commentaarlijn toevoegen).
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/tutorials/esp32/esp32-temperature-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
}
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {update_view(data);});
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -cvs_height + 80, cvs_width, cvs_height + 50);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
#endif
※ Notiz: