ESP32/ESP8266 Thermostat Web Server – Control Output Based on Temperature

In this project, you’ll build an ESP32 / ESP8266 Thermostat Web Server with an
input field
to set a temperature threshold value. This allows you to automatically control an output based on the current temperature reading. The output will be set to on if the temperature is above or set to off if it’s below the threshold – this can be used to build a simple thermostat project.
As an example, we’ll read the temperature using a DS18B20 temperature sensor. You can use any other temperature sensor like
DHT11/DHT22, BME280 or LM35
To better understand how this project works, we recommend reading these tutorials:
Input Data on HTML Form ESP32/ESP8266 Web Server (Arduino IDE)
ESP32 with DS18B20 (one sensor, multiple sensors, web server)
ESP8266 NodeMCU with DS18B20 (one sensor, multiple sensors, web server)
ESP32 Web Server
or
ESP8266 NodeMCU Web Server
Project Overview
The following image shows a high-level overview of the project we’ll build.
The ESP32/ESP8266 hosts a web server that shows the latest temperature readings from a DS18B20 temperature sensor.
There’s an input field to set up a temperature threshold value. When the temperature goes above the threshold, an output will be automatically turned on. You can invert this logic depending on your project application.
When the temperature goes below the threshold, the output will be turned off.
The system can be activated or deactivated through the web server. If you choose to deactivate the system, the output will keep its state, no matter the temperature value.
The following image shows how the web server page looks like.
Prerequisites
Make sure you check each of the following prerequisites before proceeding with this project.
1. ESP32 or ESP8266 Add-on Arduino IDE
This project is compatible with both the ESP32 and ESP8266 boards. We’ll program these boards using Arduino IDE, so make sure you have the necessary add-ons installed:
Install ESP32 Board in Arduino IDE
Install ESP8266 Board in Arduino IDE
2. Async Web Server Libraries
To build the web server you need to install the following libraries:
ESP32:
install the
ESPAsyncWebServer
and the
AsyncTCP
libraries (by ESP32Async).
ESP8266:
install the
ESPAsyncWebServer
and the
ESPAsyncTCP
libraries (by ESP32Async).
You can install those libraries in the Arduino IDE Library Manager. Go to
Sketch
>
Include Library
>
Manage Libraries
and search for the libraries’ names.
3. Parts Required
To follow this tutorial you need the following parts:
ESP32
(read
Best ESP32 boards
)
or
ESP8266
(read
Best ESP8266 boards
)
LED
220 Ohm resistor
DS18B20 temperature sensor
(
waterproof version
)
4.7k Ohm resistor
Jumper wires
Breadboard
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Schematic Diagram
Before proceeding, wire the DS18B20 temperature sensor to your board.
ESP32 with DS18B20 and LED
If you’re using an ESP32,
wire the DS18B20
temperature sensor as shown in the following schematic diagram, with the data pin connected to
GPIO 4
ESP8266 with DS18B20 and LED
If you’re using an ESP8266,
wire the DS18B20
temperature sensor as shown in the following schematic diagram, with the data pin connected to
GPIO 4
(D2).
Code – Thermostat Web Server with Threshold Input
Copy the following code to your Arduino IDE, but don’t upload it yet. You need to make some changes to make it work for you. You need to insert your network credentials and your default threshold value.
/*********
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/

#ifdef ESP32
#include `WiFi.h`
#include `AsyncTCP.h`
#else
#include `ESP8266WiFi.h`
#include `ESPAsyncTCP.h`
#endif
#include `ESPAsyncWebServer.h`
#include `Wire.h`
#include `OneWire.h`
#include `DallasTemperature.h`

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";
const char* password = \"REPLACE_WITH_YOUR_PASSWORD\";

// Default Threshold Temperature Value
String inputMessage = \"25.0\";
String lastTemperature;
String enableArmChecked = \"checked\";
String inputMessage2 = \"true\";

// HTML web page to handle 2 input fields (threshold_input, enable_arm_input)
const char index_html[] PROGMEM = R\"rawliteral(
<!DOCTYPE HTML><html><head>
<title>Temperature Threshold Output Control</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
</head><body>
DS18B20 Temperature</h2>
%TEMPERATURE% °C</h3>
ESP Arm Trigger</h2>
<form action=\"/get\">
Temperature Threshold <input type=\"number\" step=\"0.1\" name=\"threshold_input\" value=\"%THRESHOLD%\" required>
Arm Trigger <input type=\"checkbox\" name=\"enable_arm_input\" value=\"true\" %ENABLE_ARM_INPUT%>
<input type=\"submit\" value=\"Submit\">
</form>
</body></html>)rawliteral\";

void notFound(AsyncWebServerRequest *request) {
request->send(404, \"text/plain\", \"Not found\");
}

AsyncWebServer server(80);

// Replaces placeholder with DS18B20 values
String processor(const String& var){
//Serial.println(var);
if(var == \"TEMPERATURE\"){
return lastTemperature;
}
else if(var == \"THRESHOLD\"){
return inputMessage;
}
else if(var == \"ENABLE_ARM_INPUT\"){
return enableArmChecked;
}
return String();
}

// Flag variable to keep track if triggers was activated or not
bool triggerActive = false;

const char* PARAM_INPUT_1 = \"threshold_input\";
const char* PARAM_INPUT_2 = \"enable_arm_input\";

unsigned long previousMillis = 0;
const long interval = 5000;

// GPIO where the output is connected to
const int output = 2;

// GPIO where the DS18B20 is connected to
const int oneWireBus = 4;
// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(oneWireBus);
// Pass our oneWire reference to Dallas Temperature sensor
DallasTemperature sensors(&oneWire);

void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.println(\"WiFi Failed!\");
return;
}
Serial.println();
Serial.print(\"ESP IP Address: http://\");
Serial.println(WiFi.localIP());

pinMode(output, OUTPUT);
digitalWrite(output, LOW);

// Start the DS18B20 sensor
sensors.begin();

// Send web page to client
server.on(\"/\", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, \"text/html\", index_html, processor);
});

// Receive an HTTP GET request at <ESP_IP>/get?threshold_input=<inputMessage>&enable_arm_input=<inputMessage2>
server.on(\"/get\", HTTP_GET, [] (AsyncWebServerRequest *request) {
// GET threshold_input value on <ESP_IP>/get?threshold_input=<inputMessage>
if (request->hasParam(PARAM_INPUT_1)) {
inputMessage = request->getParam(PARAM_INPUT_1)->value();
// GET enable_arm_input value on <ESP_IP>/get?enable_arm_input=<inputMessage2>
if (request->hasParam(PARAM_INPUT_2)) {
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
enableArmChecked = \"checked\";
}
else {
inputMessage2 = \"false\";
enableArmChecked = \"\";
}
}
Serial.println(inputMessage);
Serial.println(inputMessage2);
request->send(200, \"text/html\", \"HTTP GET request sent to your ESP.<a href=\\"/\\">Return to Home Page</a>\");
});
server.onNotFound(notFound);
server.begin();
}

void loop() {
unsigned long currentMillis = millis();
if (current