{"id":93918,"date":"2020-02-13T15:23:32","date_gmt":"2020-02-13T15:23:32","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=93918"},"modified":"2025-03-17T12:17:11","modified_gmt":"2025-03-17T12:17:11","slug":"esp32-esp8266-thermostat-web-server","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-esp8266-thermostat-web-server\/","title":{"rendered":"ESP32\/ESP8266 Thermostat Web Server &#8211; Control Output Based on Temperature"},"content":{"rendered":"\n<p>In this project, you&#8217;ll build an ESP32 \/ ESP8266 Thermostat Web Server with an <a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-input-data-html-form\/\">input field<\/a> 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&#8217;s below the threshold &#8211; this can be used to build a simple thermostat project.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-Temperature-Threshold-Trigger-Control-Output-Arduino-IDE.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 or ESP8266 Control Output Based on Temperature Threshold build a Thermostat Web Server\" class=\"wp-image-93957\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-Temperature-Threshold-Trigger-Control-Output-Arduino-IDE.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-Temperature-Threshold-Trigger-Control-Output-Arduino-IDE.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-Temperature-Threshold-Trigger-Control-Output-Arduino-IDE.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-Temperature-Threshold-Trigger-Control-Output-Arduino-IDE.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p>As an example, we&#8217;ll read the temperature using a DS18B20 temperature sensor. You can use any other temperature sensor like <a href=\"https:\/\/randomnerdtutorials.com\/dht11-vs-dht22-vs-lm35-vs-ds18b20-vs-bme280-vs-bmp180\/\">DHT11\/DHT22, BME280 or LM35<\/a>.<\/p>\n\n\n\n<p>To better understand how this project works, we recommend reading these tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-input-data-html-form\/\">Input Data on HTML Form ESP32\/ESP8266 Web Server (Arduino IDE)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-ds18b20-temperature-arduino-ide\/\">ESP32 with DS18B20 (one sensor, multiple sensors, web server)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-ds18b20-temperature-sensor-web-server-with-arduino-ide\/\">ESP8266 NodeMCU with DS18B20 (one sensor, multiple sensors, web server)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide\/\">ESP32 Web Server<\/a> or <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide\/\">ESP8266 NodeMCU Web Server<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n\n<p>The following image shows a high-level overview of the project we&#8217;ll build. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"894\" height=\"627\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-threshold-project-overview.png?resize=894%2C627&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Web Server with Temperature Threshold Value Project Overview\" class=\"wp-image-93945\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-threshold-project-overview.png?w=894&amp;quality=100&amp;strip=all&amp;ssl=1 894w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-threshold-project-overview.png?resize=300%2C210&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-threshold-project-overview.png?resize=768%2C539&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 894px) 100vw, 894px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>The ESP32\/ESP8266 hosts a web server that shows the latest temperature readings from a DS18B20 temperature sensor.<\/li>\n\n\n\n<li>There&#8217;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.<\/li>\n\n\n\n<li>When the temperature goes below the threshold, the output will be turned off.<\/li>\n\n\n\n<li>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.<\/li>\n<\/ul>\n\n\n\n<p>The following image shows how the web server page looks like.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"534\" height=\"409\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Temperature-threshold-trigger-web-server-Arduino-IDE.png?resize=534%2C409&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32\/ESP8266 Temperature Web Server with Threshold for Automatic Output Control\" class=\"wp-image-93943\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Temperature-threshold-trigger-web-server-Arduino-IDE.png?w=534&amp;quality=100&amp;strip=all&amp;ssl=1 534w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Temperature-threshold-trigger-web-server-Arduino-IDE.png?resize=300%2C230&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Make sure you check each of the following prerequisites before proceeding with this project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. ESP32 or ESP8266 Add-on Arduino IDE<\/h3>\n\n\n\n<p>This project is compatible with both the ESP32 and ESP8266 boards. We&#8217;ll program these boards using Arduino IDE, so make sure you have the necessary add-ons installed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp32-arduino-ide-2-0\/\" title=\"\">Install ESP32 Board in Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp8266-nodemcu-arduino-ide-2-0\/\" title=\"\">Install ESP8266 Board in Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Async Web Server Libraries<\/h3>\n\n\n\n<p>To build the web server you need to install the following libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ESP32:<\/strong>&nbsp;install the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer<\/a> and the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/AsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">AsyncTCP&nbsp;<\/a>libraries&nbsp;(by ESP32Async).<\/li>\n\n\n\n<li><strong>ESP8266:<\/strong>&nbsp;install the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer<\/a>&nbsp;and the&nbsp;<a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncTCP<\/a>&nbsp;libraries (by ESP32Async).<\/li>\n<\/ul>\n\n\n\n<p>You can install those libraries in the Arduino IDE Library Manager. Go to <strong>Sketch <\/strong>&gt; <strong>Include Library<\/strong> &gt; <strong>Manage Libraries<\/strong> and search for the libraries&#8217; names.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Parts Required<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/esp32-vs-esp8266-devlopment-boards.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 vs ESP8266 Development Boards\" class=\"wp-image-88121\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/esp32-vs-esp8266-devlopment-boards.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/esp32-vs-esp8266-devlopment-boards.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>To follow this tutorial you need the following parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32<\/a><span style=\"font-size: inherit; background-color: initial;\">&nbsp;(read&nbsp;<\/span><a style=\"font-size: inherit; background-color: initial;\" href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP32 boards<\/a><span style=\"font-size: inherit; background-color: initial;\">)<\/span> or <a aria-label=\"ESP8266  (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP8266 <\/a>(read <a aria-label=\"Best ESP8266 development boards (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best ESP8266 boards<\/a>)<\/li>\n\n\n\n<li><a aria-label=\"LED (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">LED<\/a><\/li>\n\n\n\n<li><a aria-label=\"220 Ohm resistor\u2028 (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noreferrer noopener\">220 Ohm resistor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/ds18b20-temperature-sensor-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">DS18B20 temperature sensor<\/a> (<a aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/ds18b20-digital-temperature-sensor\/\" target=\"_blank\" rel=\"noreferrer noopener\">waterproof version<\/a>)<\/li>\n\n\n\n<li><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/ds18b20-temperature-sensor-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">4.7k Ohm resistor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jumper wires<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noreferrer noopener\">Breadboard<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematic Diagram<\/h2>\n\n\n\n<p>Before proceeding, wire the DS18B20 temperature sensor to your board.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">ESP32 with DS18B20 and LED<\/h3>\n\n\n\n<p>If you&#8217;re using an ESP32, <a href=\"https:\/\/randomnerdtutorials.com\/esp32-ds18b20-temperature-arduino-ide\/\">wire the DS18B20<\/a> temperature sensor as shown in the following schematic diagram, with the data pin connected to <span class=\"rnthl rntcblue\">GPIO 4<\/span>.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"896\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ds18b20-led-schematic-diagram.png?resize=760%2C896&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Wiring Schematic diagram with DS18B20 temperature sensor connected to ESP32 board\" class=\"wp-image-93964\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ds18b20-led-schematic-diagram.png?w=760&amp;quality=100&amp;strip=all&amp;ssl=1 760w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ds18b20-led-schematic-diagram.png?resize=254%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 254w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">ESP8266 with DS18B20 and LED<\/h3>\n\n\n\n<p>If you&#8217;re using an ESP8266, <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-ds18b20-temperature-sensor-web-server-with-arduino-ide\/\">wire the DS18B20<\/a> temperature sensor as shown in the following schematic diagram, with the data pin connected to <span class=\"rnthl rntcblue\">GPIO 4<\/span> (D2).<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"826\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP8266-ds18b20-led-schematic-diagram.png?resize=610%2C826&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Wiring Schematic diagram with DS18B20 temperature sensor connected to ESP8266 board (NodeMCU)\" class=\"wp-image-93965\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP8266-ds18b20-led-schematic-diagram.png?w=610&amp;quality=100&amp;strip=all&amp;ssl=1 610w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP8266-ds18b20-led-schematic-diagram.png?resize=222%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 222w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Code &#8211; Thermostat Web Server with Threshold Input<\/h2>\n\n\n\n<p>Copy the following code to your Arduino IDE, but don&#8217;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.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-thermostat-web-server\/\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n#ifdef ESP32\n  #include &lt;WiFi.h&gt;\n  #include &lt;AsyncTCP.h&gt;\n#else\n  #include &lt;ESP8266WiFi.h&gt;\n  #include &lt;ESPAsyncTCP.h&gt;\n#endif\n#include &lt;ESPAsyncWebServer.h&gt;\n#include &lt;Wire.h&gt;\n#include &lt;OneWire.h&gt;\n#include &lt;DallasTemperature.h&gt;\n\n\/\/ REPLACE WITH YOUR NETWORK CREDENTIALS\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Default Threshold Temperature Value\nString inputMessage = &quot;25.0&quot;;\nString lastTemperature;\nString enableArmChecked = &quot;checked&quot;;\nString inputMessage2 = &quot;true&quot;;\n\n\/\/ HTML web page to handle 2 input fields (threshold_input, enable_arm_input)\nconst char index_html[] PROGMEM = R&quot;rawliteral(\n&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;\n  &lt;title&gt;Temperature Threshold Output Control&lt;\/title&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;\/head&gt;&lt;body&gt;\n  &lt;h2&gt;DS18B20 Temperature&lt;\/h2&gt; \n  &lt;h3&gt;%TEMPERATURE% &amp;deg;C&lt;\/h3&gt;\n  &lt;h2&gt;ESP Arm Trigger&lt;\/h2&gt;\n  &lt;form action=&quot;\/get&quot;&gt;\n    Temperature Threshold &lt;input type=&quot;number&quot; step=&quot;0.1&quot; name=&quot;threshold_input&quot; value=&quot;%THRESHOLD%&quot; required&gt;&lt;br&gt;\n    Arm Trigger &lt;input type=&quot;checkbox&quot; name=&quot;enable_arm_input&quot; value=&quot;true&quot; %ENABLE_ARM_INPUT%&gt;&lt;br&gt;&lt;br&gt;\n    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;\n  &lt;\/form&gt;\n&lt;\/body&gt;&lt;\/html&gt;)rawliteral&quot;;\n\nvoid notFound(AsyncWebServerRequest *request) {\n  request-&gt;send(404, &quot;text\/plain&quot;, &quot;Not found&quot;);\n}\n\nAsyncWebServer server(80);\n\n\/\/ Replaces placeholder with DS18B20 values\nString processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if(var == &quot;TEMPERATURE&quot;){\n    return lastTemperature;\n  }\n  else if(var == &quot;THRESHOLD&quot;){\n    return inputMessage;\n  }\n  else if(var == &quot;ENABLE_ARM_INPUT&quot;){\n    return enableArmChecked;\n  }\n  return String();\n}\n\n\/\/ Flag variable to keep track if triggers was activated or not\nbool triggerActive = false;\n\nconst char* PARAM_INPUT_1 = &quot;threshold_input&quot;;\nconst char* PARAM_INPUT_2 = &quot;enable_arm_input&quot;;\n\n\/\/ Interval between sensor readings. Learn more about ESP32 timers: https:\/\/RandomNerdTutorials.com\/esp32-pir-motion-sensor-interrupts-timers\/\nunsigned long previousMillis = 0;     \nconst long interval = 5000;    \n\n\/\/ GPIO where the output is connected to\nconst int output = 2;\n\n\/\/ GPIO where the DS18B20 is connected to\nconst int oneWireBus = 4;     \n\/\/ Setup a oneWire instance to communicate with any OneWire devices\nOneWire oneWire(oneWireBus);\n\/\/ Pass our oneWire reference to Dallas Temperature sensor \nDallasTemperature sensors(&amp;oneWire);\n\nvoid setup() {\n  Serial.begin(115200);\n  WiFi.mode(WIFI_STA);\n  WiFi.begin(ssid, password);\n  if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n    Serial.println(&quot;WiFi Failed!&quot;);\n    return;\n  }\n  Serial.println();\n  Serial.print(&quot;ESP IP Address: http:\/\/&quot;);\n  Serial.println(WiFi.localIP());\n  \n  pinMode(output, OUTPUT);\n  digitalWrite(output, LOW);\n  \n  \/\/ Start the DS18B20 sensor\n  sensors.begin();\n  \n  \/\/ Send web page to client\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(200, &quot;text\/html&quot;, index_html, processor);\n  });\n\n  \/\/ Receive an HTTP GET request at &lt;ESP_IP&gt;\/get?threshold_input=&lt;inputMessage&gt;&amp;enable_arm_input=&lt;inputMessage2&gt;\n  server.on(&quot;\/get&quot;, HTTP_GET, [] (AsyncWebServerRequest *request) {\n    \/\/ GET threshold_input value on &lt;ESP_IP&gt;\/get?threshold_input=&lt;inputMessage&gt;\n    if (request-&gt;hasParam(PARAM_INPUT_1)) {\n      inputMessage = request-&gt;getParam(PARAM_INPUT_1)-&gt;value();\n      \/\/ GET enable_arm_input value on &lt;ESP_IP&gt;\/get?enable_arm_input=&lt;inputMessage2&gt;\n      if (request-&gt;hasParam(PARAM_INPUT_2)) {\n        inputMessage2 = request-&gt;getParam(PARAM_INPUT_2)-&gt;value();\n        enableArmChecked = &quot;checked&quot;;\n      }\n      else {\n        inputMessage2 = &quot;false&quot;;\n        enableArmChecked = &quot;&quot;;\n      }\n    }\n    Serial.println(inputMessage);\n    Serial.println(inputMessage2);\n    request-&gt;send(200, &quot;text\/html&quot;, &quot;HTTP GET request sent to your ESP.&lt;br&gt;&lt;a href=\\&quot;\/\\&quot;&gt;Return to Home Page&lt;\/a&gt;&quot;);\n  });\n  server.onNotFound(notFound);\n  server.begin();\n}\n\nvoid loop() {\n  unsigned long currentMillis = millis();\n  if (currentMillis - previousMillis &gt;= interval) {\n    previousMillis = currentMillis;\n    sensors.requestTemperatures();\n    \/\/ Temperature in Celsius degrees \n    float temperature = sensors.getTempCByIndex(0);\n    Serial.print(temperature);\n    Serial.println(&quot; *C&quot;);\n    \n    \/\/ Temperature in Fahrenheit degrees\n    \/*float temperature = sensors.getTempFByIndex(0);\n    Serial.print(temperature);\n    Serial.println(&quot; *F&quot;);*\/\n    \n    lastTemperature = String(temperature);\n    \n    \/\/ Check if temperature is above threshold and if it needs to trigger output\n    if(temperature &gt; inputMessage.toFloat() &amp;&amp; inputMessage2 == &quot;true&quot; &amp;&amp; !triggerActive){\n      String message = String(&quot;Temperature above threshold. Current temperature: &quot;) + \n                            String(temperature) + String(&quot;C&quot;);\n      Serial.println(message);\n      triggerActive = true;\n      digitalWrite(output, HIGH);\n    }\n    \/\/ Check if temperature is below threshold and if it needs to trigger output\n    else if((temperature &lt; inputMessage.toFloat()) &amp;&amp; inputMessage2 == &quot;true&quot; &amp;&amp; triggerActive) {\n      String message = String(&quot;Temperature below threshold. Current temperature: &quot;) + \n                            String(temperature) + String(&quot; C&quot;);\n      Serial.println(message);\n      triggerActive = false;\n      digitalWrite(output, LOW);\n    }\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP\/ESP_Thermostat_Web_Server.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>Continue reading to learn how the code works, or skip to the Demonstration section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Libraries<\/h3>\n\n\n\n<p>Start by importing the required libraries. The <span class=\"rnthl rntliteral\">WiFi<\/span> (or <span class=\"rnthl rntliteral\">ESP8266WiFi<\/span>), <span class=\"rnthl rntliteral\">AsyncTCP<\/span> (or <span class=\"rnthl rntliteral\">ESPAsyncTCP<\/span>) and <span class=\"rnthl rntliteral\">ESPAsyncWebServer<\/span> are required to build the web server. <\/p>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">OneWire<\/span> and <span class=\"rnthl rntliteral\">DallasTemperature<\/span> are required to interface with the DS18B20.<\/p>\n\n\n\n<p>The code automatically imports the right libraries accordingly to the selected board (ESP32 or ESP8266).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#ifdef ESP32\n  #include &lt;WiFi.h&gt;\n  #include &lt;AsyncTCP.h&gt;\n#else\n  #include &lt;ESP8266WiFi.h&gt;\n  #include &lt;ESPAsyncTCP.h&gt;\n#endif\n#include &lt;ESPAsyncWebServer.h&gt;\n#include &lt;Wire.h&gt;\n#include &lt;OneWire.h&gt;\n#include &lt;DallasTemperature.h&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Network Credentials<\/h3>\n\n\n\n<p>Insert your network credentials in the following lines:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ REPLACE WITH YOUR NETWORK CREDENTIALS\nconst char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Default Temperature Threshold Value<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">inputMessage<\/span> variable insert your default temperature threshold value. We&#8217;re setting it to <span class=\"rnthl rntliteral\">25.0<\/span>, but you can set it yo any other value.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String inputMessage = \"25.0\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Auxiliar Variables<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">lastTemperature<\/span> variable will hold the latest temperature reading to be compared with the threshold value.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String lastTemperature;<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">enableArmChecked<\/span> variable will tell us whether the checkbox to automatically control the output is checked or not.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String enableArmChecked = \"checked\";<\/code><\/pre>\n\n\n\n<p>In case it&#8217;s checked, the value saved on the <span class=\"rnthl rntliteral\">inputMessage2<\/span> should be set to <span class=\"rnthl rntliteral\">true<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String inputMessage2 = \"true\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Text<\/h3>\n\n\n\n<p>Then, we have some basic HTML text to build a page with two input fields: a temperature threshold input field and a checkbox to enable or disable automatically controlling the output. <\/p>\n\n\n\n<p>The web page also displays the latest temperature reading from the DS18B20 temperature sensor.<\/p>\n\n\n\n<p>The following lines display the temperature:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;h2&gt;DS18B20 Temperature&lt;\/h2&gt; \n&lt;h3&gt;%TEMPERATURE% &amp;deg;C&lt;\/h3&gt;<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">%TEMPERATURE%<\/span> is a placeholder that will be replaced by the actual temperature value when the ESP32\/ESP8266 serves the page.<\/p>\n\n\n\n<p>Then, we have a form with two input fields and a &#8220;Submit&#8221; button. When the user types some data and clicks the \u201cSubmit\u201d button, those values are sent to the ESP to update the variables.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;form action=\"\/get\"&gt;\n  Temperature Threshold &lt;input type=\"number\" step=\"0.1\" name=\"threshold_input\" value=\"%THRESHOLD%\" required&gt;&lt;br&gt;\n  Arm Trigger &lt;input type=\"checkbox\" name=\"enable_arm_input\" value=\"true\" %ENABLE_ARM_INPUT%&gt;&lt;br&gt;&lt;br&gt;\n  &lt;input type=\"submit\" value=\"Submit\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>The first input field is of type <span class=\"rnthl rntliteral\">number<\/span> and the second input field is a <span class=\"rnthl rntliteral\">checkbox<\/span>. To learn more about input fields, we recommend taking a look at following resources of the w3schools website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a aria-label=\"HTML Input Tags (opens in a new tab)\" href=\"https:\/\/www.w3schools.com\/tags\/tag_input.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML Input Tag<\/a><\/li>\n\n\n\n<li><a aria-label=\"HTML Input Types (opens in a new tab)\" href=\"https:\/\/www.w3schools.com\/html\/html_form_input_types.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML Input Types<\/a><\/li>\n<\/ul>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">action<\/span> attribute of the form specifies where to send the data inserted on the form after pressing submit. In this case, it makes an HTTP GET request to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/get?threshold_input=value&amp;enable_arm_input=value<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">value<\/span> refers to the text you enter in each of the input fields. To learn more about handling input fields with the ESP32\/ESP8266, read: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-input-data-html-form\/\">Input Data on HTML Form ESP32\/ESP8266 Web Server using Arduino IDE<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">processor()<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">processor()<\/span> function replaces all placeholders in the HTML text with the actual values.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span class=\"rnthl rntliteral\">%TEMPERATURE%<\/span> \u00bb <span class=\"rnthl rntliteral\">lastTemperature<\/span><\/li>\n\n\n\n<li><span class=\"rnthl rntliteral\">%THRESHOLD%<\/span> \u00bb <span class=\"rnthl rntliteral\">inputMessage<\/span><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if(var == \"TEMPERATURE\"){\n    return lastTemperature;\n  }\n  else if(var == \"THRESHOLD\"){\n    return inputMessage;\n  }\n  else if(var == \"ENABLE_ARM_INPUT\"){\n    return enableArmChecked;\n  }\n  return String();\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Input Field Parameters<\/h3>\n\n\n\n<p>The following variables will be used to check whether we&#8217;ve received an HTTP GET request from those input fields and save the values into variables accordingly.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* PARAM_INPUT_1 = \"threshold_input\";\nconst char* PARAM_INPUT_2 = \"enable_arm_input\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Interval Between Readings<\/h3>\n\n\n\n<p>Every 5000 milliseconds (5 seconds), we&#8217;ll get a new temperature reading from the DS18B20 temperature sensor and compare it with the threshold value. To keep track of the time, we use <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pir-motion-sensor-interrupts-timers\/\">timers<\/a>. <\/p>\n\n\n\n<p>Change the <span class=\"rnthl rntliteral\">interval<\/span> variable if you want to change the time between each sensor reading.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>unsigned long previousMillis = 0;\nconst long interval = 5000;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">GPIO Output<\/h3>\n\n\n\n<p>In this example, we&#8217;ll control <span class=\"rnthl rntcorange\">GPIO 2<\/span>. This GPIO is connected to the ESP32 and ESP8266 built-in LED, so it allows us to easily check if the project is working as expected. You can control any other output and for many applications you&#8217;ll want to <a href=\"https:\/\/randomnerdtutorials.com\/esp32-relay-module-ac-web-server\/\">control a relay module<\/a>. <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ GPIO where the output is connected to\nconst int output = 2;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">DS18B20 Temperature Sensor Init<\/h3>\n\n\n\n<p>Initialize the DS18B20 temperature sensor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ GPIO where the DS18B20 is connected to\nconst int oneWireBus = 4;\n\/\/ Setup a oneWire instance to communicate with any OneWire devices\nOneWire oneWire(oneWireBus);\n\/\/ Pass our oneWire reference to Dallas Temperature sensor \nDallasTemperature sensors(&amp;oneWire);<\/code><\/pre>\n\n\n\n<p>To learn more about interfacing the DS18B20 temperature sensor with the ESP board, read: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-ds18b20-temperature-arduino-ide\/\">ESP32 DS18B20 Temperature Sensor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-ds18b20-temperature-sensor-web-server-with-arduino-ide\/\">ESP8266 NodeMCU DS18B20 Temperature Sensor<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, connect to Wi-Fi in station mode and print the ESP IP address:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.begin(115200);\nWiFi.mode(WIFI_STA);\nWiFi.begin(ssid, password);\nif (WiFi.waitForConnectResult() != WL_CONNECTED) {\n  Serial.println(\"WiFi Failed!\");\n  return;\n}\nSerial.println();\nSerial.print(\"ESP IP Address: http:\/\/\");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\n<p>Set <span class=\"rnthl rntcorange\">GPIO 2<\/span> as an output and set it to <span class=\"rnthl rntliteral\">LOW<\/span> when the ESP first starts.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>pinMode(output, OUTPUT);\ndigitalWrite(output, LOW);<\/code><\/pre>\n\n\n\n<p>Initialize the DS18B20 temperature sensor:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>sensors.begin();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Handle Web Server<\/h3>\n\n\n\n<p>Then, define what happens when the ESP32 or ESP8266 receives HTTP requests. When we get a request on the root \/ url, send the HTML text with the processor (so that the placeholders are replaced with the latest values).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\n<p>When, a form is submitted, the ESP receives a request on the following URL:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;ESP_IP&gt;\/get?threshold_input=&lt;inputMessage&gt;&amp;enable_arm_input=&lt;inputMessage2&gt;<\/code><\/pre>\n\n\n\n<p>So, we check whether the request contains input parameters, and save those parameters into variables:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/get\", HTTP_GET, &#091;] (AsyncWebServerRequest *request) {\n  \/\/ GET threshold_input value on &lt;ESP_IP&gt;\/get?threshold_input=&lt;inputMessage&gt;\n  if (request-&gt;hasParam(PARAM_INPUT_1)) {\n    inputMessage = request-&gt;getParam(PARAM_INPUT_1)-&gt;value();\n    \/\/ GET enable_arm_input value on &lt;ESP_IP&gt;\/get?enable_arm_input=&lt;inputMessage2&gt;\n    if (request-&gt;hasParam(PARAM_INPUT_2)) {\n      inputMessage2 = request-&gt;getParam(PARAM_INPUT_2)-&gt;value();\n      enableArmChecked = \"checked\";\n    }\n    else {\n      inputMessage2 = \"false\";\n      enableArmChecked = \"\";\n    }\n  }<\/code><\/pre>\n\n\n\n<p>This is the part of the code where the variables will be replaced with the values submitted on the form. The <span class=\"rnthl rntliteral\">inputMessage<\/span> variable saves the temperature threshold value and the <span class=\"rnthl rntliteral\">inputMessage2<\/span> saves whether the checkbox is ticked or not (if we should control the GPIO or not).<\/p>\n\n\n\n<p>After submitting the values on the form, it displays a new page saying the request was successfully sent to your board an with a link to return to the homepage.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>request-&gt;send(200, \"text\/html\", \"HTTP GET request sent to your ESP.&lt;br&gt;&lt;a href=\\\"\/\\\"&gt;Return to Home Page&lt;\/a&gt;\");\n});<\/code><\/pre>\n\n\n\n<p>Finally, start the server:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.begin();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">loop()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">loop()<\/span>, we use <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pir-motion-sensor-interrupts-timers\/\">timers<\/a> to get new temperature readings every 5 seconds.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>unsigned long currentMillis = millis();\nif (currentMillis - previousMillis &gt;= interval) {\n  previousMillis = currentMillis;\n  sensors.requestTemperatures();\n  \/\/ Temperature in Celsius degrees \n  float temperature = sensors.getTempCByIndex(0);\n  Serial.print(temperature);\n  Serial.println(\" *C\");\n    \n  \/\/ Temperature in Fahrenheit degrees\n  \/*float temperature = sensors.getTempFByIndex(0);\n  Serial.print(temperature);\n  Serial.println(\" *F\");*\/\n  \n  lastTemperature = String(temperature);<\/code><\/pre>\n\n\n\n<p>After getting a new temperature reading, we check whether it is above or below the threshold and turn the output on or off accordingly.<\/p>\n\n\n\n<p>In this example, we set the output state to <span class=\"rnthl rntliteral\">HIGH<\/span>, if all these conditions are met:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The current temperature is above the threshold;<\/li>\n\n\n\n<li>Automatic output control is enabled (the checkbox is ticked on the web page);<\/li>\n\n\n\n<li>If the output hasn&#8217;t been triggered yet.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Check if temperature is above threshold and if it needs to trigger output\nif(temperature &gt; inputMessage.toFloat() &amp;&amp; inputMessage2 == \"true\" &amp;&amp; !triggerActive){\n  String message = String(\"Temperature above threshold. Current temperature: \") \n                   + String(temperature) + String(\"C\");\n  Serial.println(message);\n  triggerActive = true;\n  digitalWrite(output, HIGH);\n}<\/code><\/pre>\n\n\n\n<p>Then, if the temperature goes below the threshold, set the output to <span class=\"rnthl rntliteral\">LOW<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>else if((temperature &lt; inputMessage.toFloat()) &amp;&amp; inputMessage2 == \"true\" &amp;&amp; triggerActive) {\n  String message = String(\"Temperature below threshold. Current temperature: \") \n                   + String(temperature) + String(\" C\");\n  Serial.println(message);\n  triggerActive = false;\n  digitalWrite(output, LOW);\n}<\/code><\/pre>\n\n\n\n<p>Depending on your application, you may want to change the output to <span class=\"rnthl rntliteral\">LOW<\/span>, when the temperature is above the threshold and to <span class=\"rnthl rntliteral\">HIGH<\/span> when the output is below the threshold.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration &#8211; ESP Thermostat<\/h2>\n\n\n\n<p>Upload the code to your ESP board (with the DS18B20 wired to your ESP32 or ESP8266 board).<\/p>\n\n\n\n<p>Open the Serial Monitor at a baud rate of 115200 and press the on-board RST\/EN button. The ESP will print its IP address and it will start displaying new temperature values every 5 seconds.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"433\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-when-Temperature-above-threshold-Arduino-IDE-Serial-Monitor.png?resize=709%2C433&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Temperature threshold Arduino IDE Serial Monitor\" class=\"wp-image-93942\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-when-Temperature-above-threshold-Arduino-IDE-Serial-Monitor.png?w=709&amp;quality=100&amp;strip=all&amp;ssl=1 709w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-when-Temperature-above-threshold-Arduino-IDE-Serial-Monitor.png?resize=300%2C183&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 709px) 100vw, 709px\" \/><\/figure><\/div>\n\n\n<p>Open a browser and type the ESP IP address. A similar web page should load with the default values (defined in your code):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"409\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Temperature-threshold-trigger-web-server-Arduino-IDE.png?resize=534%2C409&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Temperature threshold trigger web server Arduino IDE\" class=\"wp-image-93943\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Temperature-threshold-trigger-web-server-Arduino-IDE.png?w=534&amp;quality=100&amp;strip=all&amp;ssl=1 534w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Temperature-threshold-trigger-web-server-Arduino-IDE.png?resize=300%2C230&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/figure><\/div>\n\n\n<p>If the arm trigger is enabled (checkbox ticked) and if the temperature goes above the threshold, the LED should turn on (output is set to <span class=\"rnthl rntliteral\">HIGH<\/span>).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-triggered-Temperature-above-threshold.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Control Output when Temperature is above threshold web server\" class=\"wp-image-93953\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-triggered-Temperature-above-threshold.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-triggered-Temperature-above-threshold.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>After that, if the temperature goes below the threshold, the output will turn off.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Output-Temperature-threshold-web-server.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Control Output when Temperature is below threshold web server\" class=\"wp-image-93952\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Output-Temperature-threshold-web-server.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Output-Temperature-threshold-web-server.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>You can use the web page input fields to change the threshold value or to arm and disarm controlling the output. For any change to take effect, you just need to press the &#8220;Submit&#8221; button.<\/p>\n\n\n\n<p>At the same time, you should get the new input fields in the Serial Monitor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"350\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-when-Temperature-above-threshold-Arduino-IDE.png?resize=619%2C350&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Change temperature threshold on web server\" class=\"wp-image-93941\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-when-Temperature-above-threshold-Arduino-IDE.png?w=619&amp;quality=100&amp;strip=all&amp;ssl=1 619w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Control-Output-when-Temperature-above-threshold-Arduino-IDE.png?resize=300%2C170&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this project you&#8217;ve learn how to create a web server with a threshold value to automatically control an output accordingly to the current temperature reading thermostat web server). As an example, we&#8217;ve controlled an LED. For real world applications, you&#8217;ll probably want to control a relay module. You can read the following guides to learn how to control a relay with the ESP:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-relay-module-ac-web-server\/\">ESP32 Relay Module \u2013 Control AC Appliances (Web Server)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-relay-module-ac-web-server\/\">ESP8266 NodeMCU Relay Module \u2013 Control AC Appliances (Web Server)<\/a><\/li>\n<\/ul>\n\n\n\n<p>We&#8217;ve used raw HTML text, to make the project easier to follow. We suggest adding some CSS to style your web page to make it look nicer. You may also want to <a href=\"https:\/\/randomnerdtutorials.com\/esp32-send-email-smtp-server-arduino-ide\/\">add email notifications<\/a> to this project.<\/p>\n\n\n\n<p>If you want to learn more about the ESP32 and ESP8266, try our projects and resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\">Home Automation using ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/micropython-programming-with-esp32-and-esp8266\/\">MicroPython Programming with ESP32 and ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">More ESP32 resources\u2026<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\">More ESP8266 resources&#8230;<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project, you&#8217;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 &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32\/ESP8266 Thermostat Web Server &#8211; Control Output Based on Temperature\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-thermostat-web-server\/#more-93918\" aria-label=\"Read more about ESP32\/ESP8266 Thermostat Web Server &#8211; Control Output Based on Temperature\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":93957,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[276,281,277,299,264],"tags":[],"class_list":["post-93918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32","category-esp32-project","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/02\/ESP32-ESP8266-Web-Server-Temperature-Threshold-Trigger-Control-Output-Arduino-IDE.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/93918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=93918"}],"version-history":[{"count":2,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/93918\/revisions"}],"predecessor-version":[{"id":168085,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/93918\/revisions\/168085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/93957"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=93918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=93918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=93918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}