Published March 10, 2019 © GPL3+

WiFi Thermostat ESP32 and Arduino

Make a thermostat from available modules that you can control via a web browser over local WiFi.

IntermediateFull instructions provided8 hours32,337

Things used in this project

Hardware components

ESP32-DevKitC V4

DHT22/AM2302 Digital Temperature And Humidity Sensor Module

2 Channel DC 5V Relay Module with Optocoupler Low Level Trigger Expansion Board for Arduino

Breadboard Jumper Wires Prototype Board Dupont Wire Male to Male, Male to Female, Female to Female

USB Wall Charger

You might have one laying around already. You will also need a usb cable with micro connector, which everyone has laying around.

solderless prototype breadboard

You might have this laying around.

Software apps and online services

Arduino IDE

Firefox web browser

This is what I had. I am sure other browsers with built in dev tools could be used for troubleshooting.

Story

I built this project because I had a need for a device like this and I also wanted to learn about web technology. I wanted a way to turn on my garage heater from the house using my smart phone so that I could let it warm up before going in there. I also wanted to see if I could build a nice looking mobile web app that is simple and light-weight enough for the ESP32 web server. This was a learning process for me in using HTML5, Javascript, JSON, Bootstrap, Knockout and other web technologies. I spent most of my time here, doing web research and trial and error. I'll be sharing my debugging setup.

The ESP32 Arduino code uses theESP32 libraries and is not super complicated, letting you see the nuts and bolts of HTML protocols. Although this is a complete working system (except for the enclosure) and a fully functional web application it would also be a good starting point to hack for other applications.

Warnings

Some warnings about this project.

This project should only be used for low-voltage (24v or less) low-current (2A or less) two wire thermostat applications where a separate relay in the heating unit controls the mains current and the heater unit itself has its own safety systems. It should not be used to control any heater element directly.
It is up to the builder to use it safely as a thermostat and monitor its operation since it is not designed to any safety standard. If it fails for some reason and stays in an open state and its below freezing outside your room would freeze. If it fails and stays in a closed state the heater could run continuously and generate a high temperature. One option is to put it in series (or in parallel) with an existing thermostat so that there is a backup in case the project gets stuck in a closed (or open) position. This can help avoid one failure mode, but not the other so monitoring is required.

Prerequisites

Familiarity with Arduino environment and board management
Prototyping practices using jumpers and solderless breadboards
Basic understanding of web technical concepts

High Level Steps

1. Load board definition for ESP32 into Arduino IDE.

2. Edit the Arduino code to configure the WiFi access name, security code, and name of the thermostat.

3. Compile the code and load into the ESP32 board. (Can use the WiFi remote programming)

4. Wire the circuit per the schematic.

5. Locate the IP address and open in web browser

6. Turn on thermostat and change set-point.

How it works - Hardware

The ESP32 board supports the WiFi connectivity and has IO capabilities to interface with the relay board and turn on and off the relay and interface with the DHT22 temperature and humidity sensor. The relay contacts connect to the heating system's 2 wire thermostat terminals. When the relay closes, it completes the 2 wire thermostat circuit and causes the heating system to heat.

The Relay board accepts two inputs that are active-low to control each of the individual relays. This project only uses one relay. The other could be used for other purposes. The relay board handles electrically isolating the sensitive MCU digital I/O pins from the heating system using two stages an opto-isolator and the relay itself. For real-world MCU projects, ensuring isolation is important for reliable and robust operation. Static electricity, AC noise, power supply noise/variability can cause MCUs to get spurious input signals, lock up, or worst of all become permanently destroyed. Debugging these types of problems is a major headache, so isolation is important. The opto-isolator converts the digital output from the MCU into light (via an LED) and then an optical detector picks up the light and turns it into an electrical voltage on an isolated circuit. In this way the MCU pin is electrically insulated from the potential driving the relay. In this circuit the power to drive the relay is still supplied by the same source as the ESP32 board power (the USB power). Using a separate power supply is also possible, that is why there are jumpers on the board. The relay itself, as a mechanical switch, also provides a second stage of electrical isolation between the two-wire heating system thermostat terminals and this project's power source.

The DHT22 temperature and humidity sensor has the measurement range and accuracy needed for our application.

DHT22 Specifications

It uses a serial one-wire communication interface to send 5 bytes of data representing the temperature and humidity. For more details, see this link: http://www.ocfreaks.com/basics-interfacing-dht11-dht22-humidity-temperature-sensor-mcu/

During normal operation (after initial programming) the ESP32 board is powered via the 5v USB charger. This 5v power is also distributed to the other boards. In this project, jumpers are used to connect the components, but after the prototyping phase, soldering the connections would increase long term reliability.

How it Works - Software

The ESP32 implements a simple temperature controller and also a web server.

The simple temperaturecontroller does the following functions:

1. Acquire temperature and humidity data serially from the DHT22 sensor via a one wire interface.

2. Turn on and off the relay depending on whether the temperature is below or above the set-point. The controller has some hysterisis so that when the temperature is near the setpoint, the controller does not switch on and off repeatedly due to measurement error.

3. Acquire time data from a server on the internet in order to synchronize the internal ESP32 clock with this internet server to get an official time.

4. Maintains a watchdog timer to detect system locking or malfunction and automatically restart. This timer is constantly reset as long as the main program loop functions normally. If the main loop does not repeat due to some error or failure, the timer counts down and resets the MCU.

The web server can respond to four different types of requests from the client browser:

1. HTTP - When it receives this request, the ESP32 send the HTML file, in the form of a long string to the browser. The HTML file has the javascript that runs on the browser client and makes the other types of requests to the web server.

2. GET - When it receives this request, the ESP32 sends the temperature, humidity, relay status (on/off), set-point, time and other info in the form of a JSON message. In general JSON is a text message with key-value pairs in a hierarchical structure. In this application we keep it simple and do not use any hierarchy.

{ Type: "TH&Relay", Name: "Cave", Temp: "69.44", RelH: "34.60", Tset: "40", Heater: "0", Control: "0", StartTime: "1552185144", CurrentTime: "1552185151", Wifi_ssi: "-42" }

The javascript on the browser client receives this and parses it to update data objects kept in the browser. These can be displayed and manipulated on the client.

3. OPTIONS- This is a required request done before the POST operation to do a security check that the client can post information to the server.

4. POST - When the web server receives this request, it receives a JSON message from the client containing the set-point temperature and whether the temperature control should be active.

{Control: "1", Tset: "72"}

The web server parses this data and sets internal variables for further processing.

Web page Design and Debugging

This project uses some web technologies and standards that allowed me to keep the HTML file content static and small, while still providing a dynamic and responsive web page. This was the focus of my learning on this project, and where I spent the most time researching the web and learning by trial and error.

Debugging Setup

I think the best way to learn the web interface is to use the developer debugging capabilities in a browser. I used Firefox. In the menu there is a selection called 'Web Developer' and then 'Web Console'. This allows you to see the messages being passed to the server, error messages, javascript exceptions, etc. Since the web server on the ESP32 only handles the 4 different requests above, it does not really care what web page is making these requests. It could be the web page loaded using request 1. But it could also be another web page - for example an "index.html" file that you open on your local machine. So this allows you to make small changes to this file in a text editor (I used Notepad++ because it knows html formatting) and then refresh the browser and see what happens to the page rendered, including page layout, formatting, and also requests to the ESP32 server.

Firefox browser Web Console showing the JSON messages being passed to the ESP32 web server

Design of web page

The HTML file contains embedded CSS, HTML, and Javascript all in one file. It uses Bootstrap, which is a collection of CSS (Cascading Style Sheets), HTML, and Javascript to design responsive web sites. It uses a javacript library KnockoutJS to dynamically update the browser view when data changes occur. In order to keep the HTML file small, these libraries are not kept in the HTML file itself. They are linked in using what is called a CDN (Content Delivery Network) provider. In addition, the javascript uses the newish native fetch() function, to implement the server calls 2-4. Finally it uses some glyphicon fonts in fontawesome for the reload button (circular arrow), and the flame icon - indicating that the heater is being asked to turn on.

Bootstrap simplifies layout of the web page and the layout can adapt appropriately for mobile screens or larger screens. It has a collection of widgets and styles to assist with making a clean looking web site. There are some good training sources, and examples of code on the web:

Here is a site that provides explanation of the various parts of Bootstrap as try it yourself tutorials: https://www.w3schools.com/bootstrap4/default.asp
Here is a site that provides the contents, try changes and see what happens: https://hackerthemes.com/bootstrap-cheatsheet/.
Here was the starting point for my project web site - does it look similar? https://hackerthemes.com/bootstrap-templates/spur/

KnockoutJS is a lightweight framework in javascript that seems to have fallen out of favor somewhat, but for my requirements seemed perfect. What I learned in my research is that now people use Angular and react, which seem to require their own dev tools and seem to require a lot of learning. The KnockoutJS framework automatically updates the UI when data changes. It is meant to isolate the UI from the underlying data kept in the browser DOM (Data Object Model.) For me this was the most challenging part of the web design, as it depends on many Object Oriented concepts of Javascript. The knockout site provides some tutorials and examples to wade through. Luckily once this was working, I did not have to make any further refinements, as its not tied to UI changes, which is the whole point.

fetch() is a newish function native to javascipt that handles client-server communication for http protocols like GET, OPTIONS, and POST. The alternative is to use additional jQuery AJAX calls or other javascript libraries. Here is some more information. https://davidwalsh.name/fetch

CDNs are used to provide CSS and javascript libraries and code to the browser so that the ESP32 web server does not have to supply these. Content Delivery Networks are a collection of geographically dispersed servers that provide this content, usually for a fee for large volumes or fast response. For this project we use free services which work fine for the volume and response time we need. If you look at the "index.html" file you will see url links to these servers, for example boostrap 4.3.1 is incorporated using the link below.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

fontawsome is used to add some nice looking glyphicons to the UI to reflect the heater status and for the refresh button. In the HTML, this:

<i class="fas fa-burn" ></i>

produces this in the UI:

fontawesome burn icon

Serving a web page from Arduino code- The HTML file was stored a string constant for simplicity of handling it in the web server. However for debugging, I kept the file as "index.html" on my PC's local drive and opened the file in the browser. The browser does not really care how it receives this file (locally or from the ESP32 web server), and so this way I could make HTML changes quickly in this file, refresh the browser, and see the results. Once it was finalized, I used an online tool to convert the index.html to a string. This string is then pasted into the Arduino code.

Enclosure

I designed an enclosure that you can 3D print and attach it to your wall with two screws. The boards can be glued in with hot melt.

Enclosure

Left - picture of open enclosure. Right-final system

Further References

ESP32 - https://docs.espressif.com/projects/esp-idf/en/latest/get-started/get-started-devkitc.html

Bootstrap- https://getbootstrap.com/

KnockoutJS -https://knockoutjs.com/

native javascript fetch() - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fontawesome - https://fontawesome.com/

Schematics

Code

/*
   Garage theromstat
   Sketch to read temperatures with an ESP32 board and a DHTxx sensor connected to pin 26, and to control a Relay connected to Pin 27
*/

#include <Time.h>
#include <TimeLib.h>
#include <WiFi.h>

#include <ESPmDNS.h>
#include <WiFiUdp.h>
#include <ArduinoOTA.h>

#include <DHTesp.h>
#include "esp_system.h"
#include "soc/rtc.h"
#include "rom/uart.h"


/****** Start configuration section ******/

const char* ssid     = "XXXXXXX"; //Replace with your network SSID
const char* password = "XXXXXXXX"; //Replace with your network password
const String nodeName = "Cave"; //Replace with the name for this Thermostat

/****** End configuration section ******/

DHTesp::DHT_MODEL_t DHT_TYPE = DHTesp::DHT22;





const String sketchVersion = "3";
const String nodeType = "TH&Relay";
unsigned long lastReceivedRelayCommandMilis;
const unsigned int TIMEOUT_REICEIVED_COMMANDS_MILIS = 1000 * 60 * 2; //Two minutes
String relayError = "";
String thError = "";
WiFiServer server(80);
WiFiClient client;
const int RELAY_PIN = 27;
const int ONBOARD_LED_PIN = 2;
const int DHT_PIN = 26;
DHTesp dht;
int Tset = 72.0; //Use a number higher than 40 to avoid being on edge of screen fix for #2
double Td = 0.5;

int hys=0;

int control =0;
time_t currentTime = 0,startTime=0;

      double humidity = dht.getHumidity();
      double celsiusTemp = dht.getTemperature();
      double fahrenheitTemp = -10000;
      int currentStatus = digitalRead(RELAY_PIN);

hw_timer_t *timer = NULL;

void IRAM_ATTR resetModule(){
    //ets_printf("reboot\n"); //comment out to avoid issues fix #1
    //esp_restart_noos();
    esp_restart();
}


void setup() {
  
  Serial.begin(115200);
  slowDownCpu();
  pinMode(ONBOARD_LED_PIN, OUTPUT);

  pinMode(RELAY_PIN, OUTPUT);
  
  digitalWrite(RELAY_PIN, HIGH); //shut off relay
  dht.setup(DHT_PIN, DHT_TYPE);

  setUpWifi();

  lastReceivedRelayCommandMilis = millis();


    // Port defaults to 3232
  // ArduinoOTA.setPort(3232);

  // Hostname defaults to esp3232-[MAC]
  // ArduinoOTA.setHostname("myesp32");

  // No authentication by default
  // ArduinoOTA.setPassword("admin");

  // Password can be set with it's md5 value as well
  // MD5(admin) = 21232f297a57a5a743894a0e4a801fc3
  // ArduinoOTA.setPasswordHash("21232f297a57a5a743894a0e4a801fc3");

  ArduinoOTA
    .onStart([]() {
      String type;
      if (ArduinoOTA.getCommand() == U_FLASH)
        type = "sketch";
      else // U_SPIFFS
        type = "filesystem";

      // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
      Serial.println("Start updating " + type);
    })
    .onEnd([]() {
      Serial.println("\nEnd");
    })
    .onProgress([](unsigned int progress, unsigned int total) {
      Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
    })
    .onError([](ota_error_t error) {
      Serial.printf("Error[%u]: ", error);
      if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
      else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
      else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
      else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
      else if (error == OTA_END_ERROR) Serial.println("End Failed");
    });

  ArduinoOTA.begin();
  

}

void slowDownCpu() {
  rtc_clk_cpu_freq_set(RTC_CPU_FREQ_160M);
  uart_tx_wait_idle(0);
  int clockspeed = rtc_clk_cpu_freq_get();

  char* clockSpeeds[5] = {"XTAL", "80Mhz", "160Mhz", "240Mhz", "2Mhz"};
  Serial.print("Setting CPU freq to: ");
  Serial.println(clockSpeeds[clockspeed]);
  Serial.println("");
}

void setUpWifi() {
  //WiFi.config(ip,dns,gateway,subnet);


  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);


  // attempt to connect to Wifi network:
  int counter = 0;
  while (WiFi.status() != WL_CONNECTED) {
    WiFi.disconnect();
    WiFi.begin(ssid, password);
    int counter = 0;
    while (WiFi.status() != WL_CONNECTED) {
      delay(1000);
      Serial.print(".");
      counter++;
      if (counter > 10) {
        break;
      }
    }
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  Serial.print("MAC: ");
  Serial.println(WiFi.macAddress());
  // print the received signal strength:
  long rssi = WiFi.RSSI();
  Serial.print("Signal strength (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");
  

  server.begin();

  Serial.println(" Server started");

//Create a timer for watchdog timer  
timer = timerBegin(0, 80, true); //timer 0, div 80
    timerAttachInterrupt(timer, &resetModule, true);
    timerAlarmWrite(timer, 15000000, false); //set time in us to 15 seconds fixes #1
    timerAlarmEnable(timer); //enable interrupt

}



double celsius2Fahrenheit(double celsius)
{
  return celsius * 9 / 5 + 32;
}



void loop() {

timerWrite(timer, 0); //reset timer (feed watchdog)

ArduinoOTA.handle();

  if (WiFi.status() != WL_CONNECTED) {
    setUpWifi();
  } else {
    // listen for incoming clients
    client = server.available();
    if (client.connected()) {
      digitalWrite(ONBOARD_LED_PIN, HIGH);
      client.setTimeout(5);  //set timeout to 5 second - must be done after connecting fix #1
      String req = client.readStringUntil('\r');  //read first line
      Serial.println("Received request: " + req);
      
      String response = String();
      if (req.startsWith("GET /ajax_inputs")){
      
      // send a standard http response header for json
      
      json_HTTP_header(response);
      response += "{\n";
      response += "\"Type\":\"" + nodeType + "\",\n";
      response += "\"Name\":\"" + nodeName + "\",\n";
   
      String ff = String(fahrenheitTemp);
      ff.trim();
      response += "\"Temp\":\"" + ff + "\",\n";

      String hh = String(humidity);
      hh.trim();
      response += "\"RelH\":\"" + hh + "\",\n";

      String jj = String(Tset);
      jj.trim();
      
      response += "\"Tset\":\"" + jj + "\",\n";
      
      response += "\"Heater\": \"" + String(currentStatus) + "\",\n";
      response += "\"Control\": \"" + String(control) + "\",\n"; 
      response += "\"StartTime\": \"";
      //time_and_date_string(response, startTime);
      unix_time_string(response,startTime);
      response += "\",\n";
      response += "\"CurrentTime\": \"";
      //time_and_date_string(response, now());
      unix_time_string(response,now());
      
      response += "\",\n";
      
      //response += "\"Mac\":\"" + WiFi.macAddress() + "\",\n";
            
      long rssi = WiFi.RSSI();
      response += "\"Wifi_ssi\": \"" + String(rssi) + "\"\n";
      response += "}\n";
      Serial.println("GET: Resp sent:" + response);
      client.println(response);
          
      }else if (req.startsWith("OPTIONS")) {
       response += "HTTP/1.1 200 OK\n";
       response += "Access-Control-Allow-Origin: *\n";

        response += "Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE\n";
        response += "Access-Control-Allow-Headers: access-control-allow-origin,Content-Type\n";
        response += "Access-Control-Max-Age: 100\n";
        response += "\n"; //This carry return is very important. Without it the response will not be sent.
        Serial.println("OPTIONS: Resp sent:" + response);   
        client.println(response);    
        //String msg = client.readString();
        //Serial.println(msg);

      }else if (req.startsWith("POST")) {
        
      
      
      Serial.print("POST: Remaining message:");
      int ct=0;
      while (ct<4 && client.available()){  //check for \r\n\r\n designating a blank line
        char c=client.read();
        Serial.print(c);
        if(c=='\r' || c=='\n')
          ct=ct+1;
        else
          ct=0;
      }

      //Crudely parse the JSON.  {Tset: 70, Control: 1}
      //parsing ignores the non numerics and stops after a non numeric character
      Serial.println("parsing 1...");
      Tset=client.parseInt();
      Serial.println("parsing 2...");
      control=client.parseInt();
      Serial.println("parsing complete");


      
      
     
      
      response += "HTTP/1.1 200 OK\n";
      response += "Access-Control-Allow-Origin: *\n";
      response += "\n"; //This carry return is very important. Without it the response will not be sent.
      Serial.println("POST: Resp sent:" + response);
      client.println(response);
        
      
      } else //standard HTML Page
      {
        
      response += "HTTP/1.1 200 OK\n";
      response += "Content-Type: text/html\n";
      response += "Access-Control-Allow-Origin: *\n";
      response += "\n"; //This carry return is very important. Without it the response will not be sent.

     //Below is the web page HTML that is served by the ESP32 server.
     //the index.html is converted to a string via http://tomeko.net/online_tools/cpp_text_escape.php?lang=en
      response += "<!doctype html>\n<html lang = \"en\">\n  <head>\n\t\t<meta http-equiv=\"content-type\" content=\"text/html\" charset=\"utf-8\">\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n    \n\n    \n\t\t<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\n\n\t\t<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.7.2/css/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\">  \n    \n\t\t<script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>\n\t\t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigin=\"anonymous\"></script>\n\t\t<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM\" crossorigin=\"anonymous\"></script>\n\t\t<script src=\"https://cdn.jsdelivr.net/npm/knockout@3.3.0/build/output/knockout-latest.debug.min.js\"></script>\n\n\t\t<style>\t\n\t\t\t/*Make slider thumb black in all browsers*/\n\t\t\tinput[type=range]::-webkit-slider-thumb {background: #000000;}\n\t\t\tinput[type=range]::-moz-range-thumb {background: #000000;}\n\t\t\tinput[type=range]::-ms-thumb {background: #000000;}\n\t\n\t\t</style>\n  </head>\n  \n  \n  <body>\n  \n\t<nav class=\"navbar navbar-l bg-white\">\t\t\t\n\t\t\t<span class=\"navbar-text\">\n\t\t\t\t<h4 class=\"text-black\"><bdi data-bind=\"text:Name\"></bdi> Thermostat</h4>\n\t\t\t</span>\n\t\t\n\t\t <div class=\"custom-control custom-switch\">\n\t\t\t<input type=\"checkbox\" data-bind=\"checked: ControlUI, click: save\" class=\"custom-control-input\" checkedValue=\"1\" id=\"switch1\" name=\"example\">\n\t\t\t<label class=\"custom-control-label\" for=\"switch1\">Control</label>\n\t\t</div>\n\t</nav>\n\t\t\n\t<div data-bind=\"visible: refresh()\"> </div>\t\n\t\n\t<div class=\"container-fluid\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col m-2 bg-primary text-white\">\n\t\t\t\t<h5 class=\"text-left\" > Temperature </h5>\n\t\t\t\t<h4 class=\"text-right\"><bdi data-bind=\"text: Math.round(Temp()*10)/10\"></bdi></h4>\n\t\t\t</div>\n  \n\t\t\t<div class=\"col m-2 bg-primary text-white\">\n\t\t\t\t<h5 class=\"text-left\">Humidity</h5>\n\t\t\t\t<h4 class=\"text-right\"><bdi data-bind=\"text: Math.round(RelH())\"></bdi> % </h4>\n\t\t\t</div>\n\t\t</div>\n\t\n\t\t<div class=\"row\" data-bind=\"visible: ControlUI\">\n\t\t\t<div class=\"col  m-2 bg-primary text-white\">\n\t\t\t\t<h4> Set point </h4>\t\t\t\t\n\t\t\t\t<span style=\"display:inline-block\">40</span> \n\t\t\t\t<span style=\"float: right;\">100</span>\n\t\t\t\t\n\t\t\t\t<input type=\"range\" class=\"custom-range\" data-bind=\" value: Tset, valueUpdate: 'input'\" min=\"40\" max=\"100\" >\n\t\t\t\t\n\t\t\t\t \n\t\t\t\t<span style=\"float: right;\">\n\t\t\t\t\t<h4 class=\"text-right\"><bdi data-bind=\"text: Math.round(Tset()*10)/10\"></bdi>\n\t\t\t\t\t<i class=\"fas fa-burn\" data-bind=\"visible: Heater()&gt;0 ? 1 : 0 \" ></i> </h4>\n\t\t\t\t</span>\t\t\t\t\t\t\t\t\t\n\t\t\t</div>\n\t\t</div>\n\t\t\t\n\t\t<button type=\"button\" class=\"btn btn-primary btn-sm\" data-bind=\"click: refresh\">   <i class=\"fas fa-redo-alt\"></i> </button> \n\t\n\t</div>  \n\t  \n    <footer class=\"container-fluid\">\n\t\t<h6 class=\"text-right text-muted small\">Start Time: <bdi data-bind=\"text: StartDate().toUTCString()\"></bdi></h6>\n\t\t<h6 class=\"text-right text-muted small\">Current Time: <bdi data-bind=\"text: CurrentDate().toUTCString()\"></bdi></h6>\n\t\t<h6 class=\"text-right text-muted small\">WiFi dbm= <bdi data-bind=\"text: Wifi_ssi\"></bdi></h6>\n    </footer>\n\t\n    <script>\n     \n\n\t \n    function status(response) {\n\t\tif (response.status >= 200 && response.status < 300) {\n\t\treturn Promise.resolve(response)\n\t\t} else {\n\t\treturn Promise.reject(new Error(response.statusText))\n\t\t}\n\t};\n\n   \n    // This is a simple *viewmodel*\n\tfunction AppViewModel() {\n    //data\n\tvar self = this;\n  \tself.Name = ko.observable(\"\");\n    self.Temp = ko.observable(\"\");\n    self.RelH = ko.observable(\"\");\n    self.Tset = ko.observable(\"\");\n  \tself.Heater = ko.observable(\"\");   \n    self.CurrentTime = ko.observable(\"\");\n    self.StartTime = ko.observable(\"\");\n\tself.ControlUI = ko.observable(\"\");\n\tself.Wifi_ssi = ko.observable(\"\");\n\t\n\tself.TsetDelayed = ko.pureComputed(self.Tset)\n        .extend({ rateLimit: { method: \"notifyWhenChangesStop\", timeout: 400 } });\n\t\n\tself.RefreshDelayed =ko.pureComputed(self.TsetDelayed).extend({ rateLimit: { method: \"notifyWhenChangesStop\", timeout: 400 } });\n\t\t\n\tself.Control = ko.computed({\n\tread: function(){return this.ControlUI() ? 1 : 0},\n\twrite: function(value){\n\tvar r=(value>0);\n\tthis.ControlUI(r);\n\t\n\t},\n\towner: this\n\t});\n\t\n\t\n\t\n\t\t\n\tself.StartDate = ko.computed(function() {\n\t\tvar event = new Date(self.StartTime()*1000);   \n\t\treturn event;\n    });\n  \n\tself.CurrentDate = ko.computed(function() {\n\t\tvar event = new Date(self.CurrentTime()*1000);   \n\t\treturn event;\n    });\n \n  \n  \n\tself.refresh =function(){\n\t\tfetch(\"http://192.168.0.222/ajax_inputs\").then (status)\n\t\t.then(function(response) {\n\t\treturn response.json();\n\t\t}).then(function(myJson) {\n\t\tconsole.log('Get request succeeded with resp ',myJson);\n\t\tself.Name(myJson.Name); \n\t\tself.Temp(myJson.Temp);\n\t\tself.RelH(myJson.RelH);\n\t\tself.Tset(myJson.Tset);\n\t\tself.Heater(myJson.Heater);\n\t\tself.Control(myJson.Control);\n\t\tself.CurrentTime(myJson.CurrentTime);\n\t\tself.StartTime(myJson.StartTime);\n\t\tself.Wifi_ssi(myJson.Wifi_ssi);\n\t\t}).catch(function(error){\n\t\tconsole.log('Request Failed',error);\n\t\t})\n\t};\n\n\tself.save = function(){\n\t\tvar plainJs = ko.toJS(self); \n\t\tconsole.log('Testing, Testing',plainJs.Tset);  \n\t\tfetch('http://192.168.0.222', {\n\t\tmethod: 'POST',\n\t\theaders: {\n\t\t'Accept': 'application/json',\n\t\t'Access-Control-Allow-Origin': '*',\n\t\t'Content-Type': 'application/json'\n\t\t},\n\t\tcredentials: 'same-origin',\n\t\tbody: JSON.stringify({\"Tset\":plainJs.TsetDelayed, \"Control\":plainJs.Control})\n\t\t}).then (status).catch(function(error){\n\t\tconsole.log('Request Failed',error);  \n\t\t});\n\treturn true};  \n  \n    \n\t\n  \n\tself.TsetDelayed.subscribe(function(newValue) {self.save()});\n\tself.RefreshDelayed.subscribe(function(newValue) {self.refresh()});\n  \n};\n    \n// Activates knockout.js\nko.applyBindings(new AppViewModel());    \n   \n</script>\n</body>\n</html>\n";
      response += "\n";   

       Serial.println("HTML Page: Resp sent:" + response);
       client.println(response);
      }

      humidity = dht.getHumidity();
      celsiusTemp = dht.getTemperature();
      fahrenheitTemp = -10000;
     currentStatus = 1-digitalRead(RELAY_PIN);


      if (dht.getStatus() != 0) {
        thError = String(dht.getStatusString());
        Serial.println("DHT Error status: " + thError);
        humidity = -10000;
        celsiusTemp = -10000;
      } else {
        thError = "";
        fahrenheitTemp = celsius2Fahrenheit(celsiusTemp);
        Serial.println("DHT OK");
      }

     
      
      
      delay(100);
      client.stop();
      digitalWrite(ONBOARD_LED_PIN, LOW);
      String tad = String();
      time_and_date_string(tad, now());
      Serial.println("Time: " + tad);
      Serial.println("Client_Stop _________________________________________");
    }

    
 
      
  }



 if(startTime<24*60*60) //Check if start time is less than 24 hrs, meaning no internet time fix #1
      {
        setTime(webUnixTime());
        setSyncProvider(webUnixTime);
       // adjustTime(-6*SECS_PER_HOUR);  //set to central time
        startTime=now();
        String tad = String();
        time_and_date_string(tad, startTime);
        Serial.println("Server time sync: " + tad);
      }

      humidity = dht.getHumidity();
      celsiusTemp = dht.getTemperature();
      fahrenheitTemp = 10000;
     


      if (dht.getStatus() != 0) {
        thError = String(dht.getStatusString());
        Serial.println("DHT Error status: " + thError);
        humidity = -10000;
        celsiusTemp = -10000;
      } else {
        thError = "";
        fahrenheitTemp = celsius2Fahrenheit(celsiusTemp);
        //Serial.println("DHT OK");
      }
     
        if (control==1)
      {
        if( fahrenheitTemp<(float(Tset)-Td))  //add some hysteresis
          {
            digitalWrite(RELAY_PIN, LOW); 
            currentStatus=1;
            
          }
        if ( fahrenheitTemp>(float(Tset)+Td))
        {
            digitalWrite(RELAY_PIN, HIGH); 
            currentStatus=0;          
        }
      }else
        {
            digitalWrite(RELAY_PIN, HIGH);
        }
}

<!doctype html>
<html lang = "en">
  <head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    

    
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">  
    
		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/knockout@3.3.0/build/output/knockout-latest.debug.min.js"></script>

		<style>	
			/*Make slider thumb black in all browsers*/
			input[type=range]::-webkit-slider-thumb {background: #000000;}
			input[type=range]::-moz-range-thumb {background: #000000;}
			input[type=range]::-ms-thumb {background: #000000;}
	
		</style>
  </head>
  
  
  <body>
  
	<nav class="navbar navbar-l bg-white">			
			<span class="navbar-text">
				<h4 class="text-black"><bdi data-bind="text:Name"></bdi> Thermostat</h4>
			</span>
		
		 <div class="custom-control custom-switch">
			<input type="checkbox" data-bind="checked: ControlUI, click: save" class="custom-control-input" checkedValue="1" id="switch1" name="example">
			<label class="custom-control-label" for="switch1">Control</label>
		</div>
	</nav>
		
	<div data-bind="visible: refresh()"> </div>	
	
	<div class="container-fluid">
		<div class="row">
			<div class="col m-2 bg-primary text-white">
				<h5 class="text-left" > Temperature </h5>
				<h4 class="text-right"><bdi data-bind="text: Math.round(Temp()*10)/10"></bdi></h4>
			</div>
  
			<div class="col m-2 bg-primary text-white">
				<h5 class="text-left">Humidity</h5>
				<h4 class="text-right"><bdi data-bind="text: Math.round(RelH())"></bdi> % </h4>
			</div>
		</div>
	
		<div class="row" data-bind="visible: ControlUI">
			<div class="col  m-2 bg-primary text-white">
				<h4> Set point </h4>				
				<span style="display:inline-block">40</span> 
				<span style="float: right;">100</span>
				
				<input type="range" class="custom-range" data-bind=" value: Tset, valueUpdate: 'input'" min="40" max="100" >
				
				 
				<span style="float: right;">
					<h4 class="text-right"><bdi data-bind="text: Math.round(Tset()*10)/10"></bdi>
					<i class="fas fa-burn" data-bind="visible: Heater()&gt;0 ? 1 : 0 " ></i> </h4>
				</span>									
			</div>
		</div>
			
		<button type="button" class="btn btn-primary btn-sm" data-bind="click: refresh">   <i class="fas fa-redo-alt"></i> </button> 
	
	</div>  
	  
    <footer class="container-fluid">
		<h6 class="text-right text-muted small">Start Time: <bdi data-bind="text: StartDate().toUTCString()"></bdi></h6>
		<h6 class="text-right text-muted small">Current Time: <bdi data-bind="text: CurrentDate().toUTCString()"></bdi></h6>
		<h6 class="text-right text-muted small">WiFi dbm= <bdi data-bind="text: Wifi_ssi"></bdi></h6>
    </footer>
	
    <script>
     

	 
    function status(response) {
		if (response.status >= 200 && response.status < 300) {
		return Promise.resolve(response)
		} else {
		return Promise.reject(new Error(response.statusText))
		}
	};

   
    // This is a simple *viewmodel*
	function AppViewModel() {
    //data
	var self = this;
  	self.Name = ko.observable("");
    self.Temp = ko.observable("");
    self.RelH = ko.observable("");
    self.Tset = ko.observable("");
  	self.Heater = ko.observable("");   
    self.CurrentTime = ko.observable("");
    self.StartTime = ko.observable("");
	self.ControlUI = ko.observable("");
	self.Wifi_ssi = ko.observable("");
	
	self.TsetDelayed = ko.pureComputed(self.Tset)
        .extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } });
	
	self.RefreshDelayed =ko.pureComputed(self.TsetDelayed).extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } });
		
	self.Control = ko.computed({
	read: function(){return this.ControlUI() ? 1 : 0},
	write: function(value){
	var r=(value>0);
	this.ControlUI(r);
	
	},
	owner: this
	});
	
	
	
		
	self.StartDate = ko.computed(function() {
		var event = new Date(self.StartTime()*1000);   
		return event;
    });
  
	self.CurrentDate = ko.computed(function() {
		var event = new Date(self.CurrentTime()*1000);   
		return event;
    });
 
  
  
	self.refresh =function(){
		fetch("http://192.168.0.222/ajax_inputs").then (status)
		.then(function(response) {
		return response.json();
		}).then(function(myJson) {
		console.log('Get request succeeded with resp ',myJson);
		self.Name(myJson.Name); 
		self.Temp(myJson.Temp);
		self.RelH(myJson.RelH);
		self.Tset(myJson.Tset);
		self.Heater(myJson.Heater);
		self.Control(myJson.Control);
		self.CurrentTime(myJson.CurrentTime);
		self.StartTime(myJson.StartTime);
		self.Wifi_ssi(myJson.Wifi_ssi);
		}).catch(function(error){
		console.log('Request Failed',error);
		})
	};

	self.save = function(){
		var plainJs = ko.toJS(self); 
		console.log('Testing, Testing',plainJs.Tset);  
		fetch('http://192.168.0.222', {
		method: 'POST',
		headers: {
		'Accept': 'application/json',
		'Access-Control-Allow-Origin': '*',
		'Content-Type': 'application/json'
		},
		credentials: 'same-origin',
		body: JSON.stringify({"Tset":plainJs.TsetDelayed, "Control":plainJs.Control})
		}).then (status).catch(function(error){
		console.log('Request Failed',error);  
		});
	return true};  
  
    
	
  
	self.TsetDelayed.subscribe(function(newValue) {self.save()});
	self.RefreshDelayed.subscribe(function(newValue) {self.refresh()});
  
};
    
// Activates knockout.js
ko.applyBindings(new AppViewModel());    
   
</script>
</body>
</html>

void time_and_date_string(String & s, time_t t)
{
      s +=  String((hour(t))) + ":";
      s +=  String((minute(t))) + ":";
      s +=  String((second(t)))  + "  ";

      s +=  String((month(t))) + "/";
      s +=  String((day(t))) + "/";
      s +=  String((year(t))) ;
}

void unix_time_string (String & s, time_t t)
{
   s+= String(t);
}

void json_HTTP_header(String & s)
  {
      s += "HTTP/1.1 200 OK\n";
      s += "Access-Control-Allow-Origin: *\n";
      s += "Content-Type: application/json\n";
      s += "\n"; //This carry return is very important. Without it the response will not be sent.
  }

/*
 *  Francesco Potort 2013 - GPLv3
 *
 * Send an HTTP packet and wait for the response, return the Unix time
 */

//time_t webUnixTime (Client &client)
time_t webUnixTime()
{
  time_t time = 0;

  // Just choose any reasonably busy web server, the load is really low
  if (client.connect("g.cn", 80))
    {
      // Make an HTTP 1.1 request which is missing a Host: header
      // compliant servers are required to answer with an error that includes
      // a Date: header.
      client.print(F("GET / HTTP/1.1 \r\n\r\n"));

      char buf[5];      // temporary buffer for characters
      client.setTimeout(5000);
      if (client.find((char *)"\r\nDate: ") // look for Date: header
    && client.readBytes(buf, 5) == 5) // discard
  {
    unsigned day = client.parseInt();    // day
    client.readBytes(buf, 1);    // discard
    client.readBytes(buf, 3);    // month
    int year = client.parseInt();    // year
    byte hour = client.parseInt();   // hour
    byte minute = client.parseInt(); // minute
    byte second = client.parseInt(); // second

    int daysInPrevMonths;
    switch (buf[0])
      {
      case 'F': daysInPrevMonths =  31; break; // Feb
      case 'S': daysInPrevMonths = 243; break; // Sep
      case 'O': daysInPrevMonths = 273; break; // Oct
      case 'N': daysInPrevMonths = 304; break; // Nov
      case 'D': daysInPrevMonths = 334; break; // Dec
      default:
        if (buf[0] == 'J' && buf[1] == 'a')
    daysInPrevMonths = 0;   // Jan
        else if (buf[0] == 'A' && buf[1] == 'p')
    daysInPrevMonths = 90;    // Apr
        else switch (buf[2])
         {
         case 'r': daysInPrevMonths =  59; break; // Mar
         case 'y': daysInPrevMonths = 120; break; // May
         case 'n': daysInPrevMonths = 151; break; // Jun
         case 'l': daysInPrevMonths = 181; break; // Jul
         default: // add a default label here to avoid compiler warning
         case 'g': daysInPrevMonths = 212; break; // Aug
         }
      }

    // This code will not work after February 2100
    // because it does not account for 2100 not being a leap year and because
    // we use the day variable as accumulator, which would overflow in 2149
    day += (year - 1970) * 365; // days from 1970 to the whole past year
    day += (year - 1969) >> 2;  // plus one day per leap year 
    day += daysInPrevMonths;  // plus days for previous months this year
    if (daysInPrevMonths >= 59  // if we are past February
        && ((year & 3) == 0)) // and this is a leap year
      day += 1;     // add one day
    // Remove today, add hours, minutes and seconds this month
    time = (((day-1ul) * 24 + hour) * 60 + minute) * 60 + second;
  }
    }
  delay(10);
  client.flush();
  client.stop();

  return time;
}

Credits

filipmu

2 projects • 12 followers

Engineer since the age of 10. In that time let the smoke out of many components and had many burned fingers while soldering.

WiFi Thermostat ESP32 and Arduino

Things used in this project

Hardware components

Software apps and online services

Story

Prerequisites

High Level Steps

How it works - Hardware

How it Works - Software

Web page Design and Debugging

Debugging Setup

Further References

Custom parts and enclosures

Enclosure for the ESP32 thermostat

Schematics

Schematic

Code

sketch_esp32_thermostat.zip

sketch_esp32_thermostat.ino

index.html

stringmanipulation.ino

webunixtime.ino

Github repository for code

Credits

filipmu

Comments

Embed the widget on your own site

WiFi Thermostat ESP32 and Arduino

WiFi Thermostat ESP32 and Arduino

Things used in this project

Hardware components

Software apps and online services

Story

Prerequisites

High Level Steps

How it works - Hardware

How it Works - Software

Web page Design and Debugging

Debugging Setup

Further References

Custom parts and enclosures

Enclosure for the ESP32 thermostat

Schematics

Schematic

Code

sketch_esp32_thermostat.zip

sketch_esp32_thermostat.ino

index.html

stringmanipulation.ino

webunixtime.ino

Github repository for code

Credits

filipmu

Comments

Related channels and tags