Esp8266 turns on relay

Projects General Guidance
1

Here's a code that works. With this I'm using two buttons one is a standby mode button and the other is a relay on/off button, the relay is also triggered by a dht11 temperature sensor. It's on a esp8266 board and uses a webserver to change both buttons and also displays the temperature and humidity. When the relay is triggered it sends me an email telling me. Also if the relay is triggered by the button it only turns it on for 40 seconds will be longer after I'm finished. This project is to turn on a fan when the temperature is above a set temperature. I've figured out how to make the text on the web page larger and I'd like some help moving it to the center of the page. I can't seem to figure it out.

#include <Arduino.h>
#include <EMailSender.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>

#define BUTTON_PIN D4  // The Arduino UNO R4 pin connected to the button
#define BUTTON_PIN2 D3
#define RELAY_PIN D2  // The Arduino UNO R4 pin connected to the LED
const byte ledPin1 = D1;
const byte ledPin2 = D5;
const byte ledPin3 = D6;

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";

uint8_t connection_state = 0;
uint16_t reconnect_interval = 10000;

ESP8266WebServer server(80); // Web server on port 80

byte lastButtonState = LOW;
byte lastButtonState2 = LOW;
byte relayState = LOW;
byte standByState = LOW;
byte temperatureState;
byte temperatureStateChange;
byte tempF;
byte hum;
boolean standByMode;
boolean relayStateChange;
boolean buttonStateChange;
boolean buttonChanged;
boolean buttonOn;
boolean sensorTrigger;
boolean buttonTrigger;
boolean buttonTimer;
boolean sendmail;
int m = 0;
int relay_state = LOW;
const byte DHT_SENSOR_PIN = D7;  // The ESP8266 pin D7 connected to DHT11 sensor
#define DHT_SENSOR_TYPE DHT11

DHT dht_sensor(DHT_SENSOR_PIN, DHT_SENSOR_TYPE);

int ledCounter = 0;

char *myStrings[] = {"The button was triggered", "The temperature is at or above 75", "The temperature is at or below 74"};

unsigned long debounceDuration = 100;  // millis
unsigned long lastTimeButtonStateChanged = 0;
unsigned long lastTimeButtonStateChanged2 = 0;
unsigned long tempRead = 0;
unsigned long relayOnTime = 0;

EMailSender emailSend("xxxxxxxxxx", "xxxxxxxx");

uint8_t WiFiConnect(const char* nSSID = nullptr, const char* nPassword = nullptr)
{
  static uint16_t attempt = 0;
  Serial.print("Connecting to ");
  if (nSSID) {
    WiFi.begin(nSSID, nPassword);
    Serial.println(nSSID);
  }

  uint8_t i = 0;
  while (WiFi.status() != WL_CONNECTED && i++ < 50) {
    delay(200);
    Serial.print(".");
  }
  ++attempt;
  Serial.println("");
  if (i == 51) {
    Serial.print("Connection: TIMEOUT on attempt: ");
    Serial.println(attempt);
    if (attempt % 2 == 0)
      Serial.println("Check if access point available or SSID and Password\r\n");
    return false;
  }
  Serial.println("Connection: ESTABLISHED");
  Serial.print("Got IP address: ");
  Serial.println(WiFi.localIP());
  return true;
}

void Awaits() {
  uint32_t ts = millis();
  while (!connection_state) {
    delay(50);
    if (millis() > (ts + reconnect_interval) && !connection_state) {
      connection_state = WiFiConnect();
      ts = millis();
    }
  }
}

String getHTML() {
  String html = "<!DOCTYPE HTML>";
  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "<span style=font-size:4em>"; 
  html += "</head>";
  html += "<p>Temperature F: <span style='color: red;'>";

    html += (tempF);
  
  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Humidity: <span style='color: red;'>";

    html += (hum);

  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Relay State: <span style='color: red;'>";
  
  if (relayState == HIGH)
    html += ("On");
  else
    html += ("Off");
  

  html += "</span></p>";
  html += "<a href='/standby/on'>Turn Off Standby Mode</a>";
  html += "<br><br>";
  html += "<a href='/standby/off'>Turn On Standby Mode</a>";
  html += "<br><br>";
  html += "<a href='/relayis/on'>Turn relay ON</a>";
  html += "<br><br>";
  html += "<a href='/relayis/off'>Turn relay OFF</a>";
  html += "</html>";

  return html;
}

void setup() {
  Serial.begin(9600);                 // initialize serial
  pinMode(BUTTON_PIN, INPUT_PULLUP);  // set arduino pin to input pull-up mode
  pinMode(BUTTON_PIN2, INPUT_PULLUP);
  pinMode(RELAY_PIN, OUTPUT);  // set arduino pin to output mode
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  pinMode(ledPin3, OUTPUT);
  standByMode = true;
  ledCounter = 1;
  relayStateChange = false;
  buttonStateChange = false;
  buttonChanged = false;
  buttonOn = false;
  sensorTrigger = false;
  buttonTrigger = false;
  sendmail = false;
  temperatureStateChange = 0;
  dht_sensor.begin();  // initialize the DHT sensor

  connection_state = WiFiConnect(ssid, password);
  if (!connection_state)  // if not connected to WIFI
    Awaits();

     // home page
  server.on("/", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /");
    server.send(200, "text/html", getHTML());
  });

  // Route to control the Relay
  server.on("/standby/on", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /standby/on");
    standByState = HIGH;
    buttonStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  server.on("/standby/off", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /standby/off");
    standByState = LOW;
    buttonStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  server.on("/relayis/on", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /relayis/on");
    relayState = HIGH;
    buttonChanged = true;
    relayStateChange = true;
    buttonOn = true;
    relayOnTime = millis();
    server.send(200, "text/html", getHTML());
  });
  server.on("/relayis/off", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /relayis/off");
    relayState = LOW;
    buttonStateChange = true;
    relayStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  // Start the server
  server.begin();
}

void loop() {
  button();
  standby();
  led();
  relay();
  temperature();
  email();
  server.handleClient();
}

void button() {
  int buttonState = digitalRead(BUTTON_PIN);  // read new state
  int buttonState2 = digitalRead(BUTTON_PIN2);

  if (millis() - lastTimeButtonStateChanged >= debounceDuration) {
    if (buttonState != lastButtonState) {
      lastTimeButtonStateChanged = millis();
      lastButtonState = buttonState;
      if ((buttonState == LOW) && (standByMode == false) && (sensorTrigger == false)) {
        relayStateChange = true;
        buttonChanged = true;
        m = 0;
        sendmail = true;
        relayOnTime = millis();
        relayState = (relayState == HIGH) ? LOW : HIGH;
        Serial.print("relayStateState");
        Serial.println(relayState);
      }
      if (relayState == HIGH) {
        buttonOn = true;
        Serial.print("buttonOn");
        Serial.print(buttonOn);
        relayOnTime = millis();
      }
    }
  }
  if (millis() - lastTimeButtonStateChanged2 >= debounceDuration) {
    if (buttonState2 != lastButtonState2) {
      lastTimeButtonStateChanged2 = millis();
      lastButtonState2 = buttonState2;
      if (buttonState2 == LOW) {
        buttonStateChange = true;
        standByState = (standByState == HIGH) ? LOW : HIGH;
        Serial.print("standByState");
        Serial.println(standByState);
      }
    }
  }
  if ((buttonOn == true) && (buttonChanged == true)) {
    buttonTrigger = true;
    buttonChanged = false;
    buttonTimer = true;
    Serial.print("buttonTrigger");
    Serial.println(buttonTrigger);
  }
  if (buttonTimer == true) {
    if (millis() - relayOnTime >= 40000) {
      relayState = LOW;
      buttonOn = false;
      buttonTimer = false;
      Serial.print("buttonTimer");
      Serial.println(buttonTimer);
      buttonChanged = true;
      relayStateChange = true;
    }
  } else if ((buttonOn == false) && (buttonChanged == true)) {
    buttonTrigger = false;
    buttonChanged = false;
    Serial.print("buttonTrigger2");
    Serial.println(buttonTrigger);
  }
}

void standby() {
  if ((standByState == HIGH) && (buttonStateChange == true)) {
    standByMode = false;
    buttonStateChange = false;
    ledCounter = 2;
    Serial.print("ledCounter not in standby mode");
    Serial.println(ledCounter);
  }
  if ((standByState == LOW) && (buttonStateChange == true)) {
    standByMode = true;
    buttonStateChange = false;
    ledCounter = 1;
    temperatureStateChange = 0;
    sensorTrigger = false;
    buttonTrigger = false;
    Serial.print("ledCounter in standy mode");
    Serial.println(ledCounter);
  }
  if (standByMode == true) {
    digitalWrite(RELAY_PIN, LOW);
  }
}

void led() {
  if (ledCounter == 1) {
    digitalWrite(ledPin3, HIGH);
    digitalWrite(ledPin2, LOW);
    digitalWrite(ledPin1, LOW);
    ledCounter = 0;
  }
  if (ledCounter == 2) {
    digitalWrite(ledPin3, LOW);
    digitalWrite(ledPin2, HIGH);
    digitalWrite(ledPin1, LOW);
    ledCounter = 0;
  }
  if (ledCounter == 3) {
    digitalWrite(ledPin3, LOW);
    digitalWrite(ledPin2, LOW);
    digitalWrite(ledPin1, HIGH);
    ledCounter = 0;
  }
}

void relay() {
  if ((relayState == HIGH) && (relayStateChange == true)) {
    digitalWrite(RELAY_PIN, HIGH);
    relayStateChange = false;
    ledCounter = 3;
    Serial.print("ledCounter relay on");
    Serial.println(ledCounter);
    Serial.println("Relay state changed");
    Serial.println("Relay On");
  }
  if ((relayState == LOW) && (relayStateChange == true)) {
    digitalWrite(RELAY_PIN, LOW);
    relayStateChange = false;
    ledCounter = 2;
    Serial.print("ledCounter relay off");
    Serial.println(ledCounter);
    Serial.println("Relay state changed");
    Serial.println("Relay Off");
  }
}

void temperature() {
  if (standByMode == false) {
    if (millis() - tempRead >= 30000) {
      tempRead = millis();
      // read humidity
      float humi = dht_sensor.readHumidity();
      // read temperature in Celsius
      float temperature_C = dht_sensor.readTemperature();
      // read temperature in Fahrenheit
      float temperature_F = dht_sensor.readTemperature(true);
         tempF = temperature_F;
         hum = humi;
      // check whether the reading is successful or not
      if (isnan(temperature_C) || isnan(temperature_F) || isnan(humi)) {
        Serial.println("Failed to read from DHT sensor!");
      } else {
        Serial.print("Humidity: ");
        Serial.print(humi);
        Serial.print("%");

        Serial.print("  |  ");

        Serial.print("Temperature: ");
        Serial.print(temperature_C);
        Serial.print("°C  ~  ");
        Serial.print(temperature_F);
        Serial.println("°F");
        Serial.print("buttonChanged");
        Serial.println(buttonChanged);
        Serial.print("buttonOn");
        Serial.println(buttonOn);
        Serial.print("sensorTrigger");
        Serial.println(sensorTrigger);
        Serial.print("relayState");
        Serial.println(relayState);
      }

      if (temperature_F >= 75) {
        temperatureState = 1;
        Serial.print("temperatureState");
        Serial.println(temperatureState);
       
      } else if (temperature_F <= 74){
        temperatureState = 2;
        Serial.print("temperatureState");
        Serial.println(temperatureState);
      }
      if ((temperatureState != temperatureStateChange)) {
        if ((temperature_F >= 75) && (buttonTrigger == false)) {
          sensorTrigger = true;
          relayState = HIGH;
          relayStateChange = true;
          m = 1;
          sendmail = true;
          temperatureStateChange = temperatureState;
          Serial.print("relayStateChange");
          Serial.println(relayStateChange);
        }
        if ((temperature_F <= 74) && (buttonTrigger == false)) {
          sensorTrigger = false;
          relayState = LOW;
          relayStateChange = true;
          m = 2;
          sendmail = true;
          temperatureStateChange = temperatureState;
          Serial.print("relayStateChange2");
          Serial.println(relayStateChange);
        }
      }
    }
  }
}

void email() {
  if ((sendmail == true) && (relayStateChange == false)){
  EMailSender::EMailMessage message;
  message.subject = "from esp";
  message.message = (myStrings[m]);

  EMailSender::Response resp = emailSend.send("xxxxxxxxxx", message);
  sendmail = false;

  Serial.println("Sending status: ");

  Serial.println(resp.status);
  Serial.println(resp.code);
  Serial.println(resp.desc);
  }
}
2

HTML uses<center> stuff </center> to center elements on a page, heading, table, column, row or cell.

3

thank you so much. it is really much appreciated.

4

The text on the web page is now centered. Thanks to xfpd.

#include <Arduino.h>
#include <EMailSender.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>

#define BUTTON_PIN D4  // The Arduino UNO R4 pin connected to the button
#define BUTTON_PIN2 D3
#define RELAY_PIN D2  // The Arduino UNO R4 pin connected to the LED
const byte ledPin1 = D1;
const byte ledPin2 = D5;
const byte ledPin3 = D6;

const char* ssid = "xxxxxxxxxx";
const char* password = "xxxxxxxxxx";

uint8_t connection_state = 0;
uint16_t reconnect_interval = 10000;

ESP8266WebServer server(80); // Web server on port 80

byte lastButtonState = LOW;
byte lastButtonState2 = LOW;
byte relayState = LOW;
byte standByState = LOW;
byte temperatureState;
byte temperatureStateChange;
byte tempF;
byte hum;
boolean standByMode;
boolean relayStateChange;
boolean buttonStateChange;
boolean buttonChanged;
boolean buttonOn;
boolean sensorTrigger;
boolean buttonTrigger;
boolean buttonTimer;
boolean sendmail;
int m = 0;
int relay_state = LOW;
const byte DHT_SENSOR_PIN = D7;  // The ESP8266 pin D7 connected to DHT11 sensor
#define DHT_SENSOR_TYPE DHT11

DHT dht_sensor(DHT_SENSOR_PIN, DHT_SENSOR_TYPE);

int ledCounter = 0;

char *myStrings[] = {"The button was triggered", "The temperature is at or above 75", "The temperature is at or below 74"};

unsigned long debounceDuration = 100;  // millis
unsigned long lastTimeButtonStateChanged = 0;
unsigned long lastTimeButtonStateChanged2 = 0;
unsigned long tempRead = 0;
unsigned long relayOnTime = 0;

EMailSender emailSend("xxxxxxxxxx", "xxxxxxxxxxx");

uint8_t WiFiConnect(const char* nSSID = nullptr, const char* nPassword = nullptr)
{
  static uint16_t attempt = 0;
  Serial.print("Connecting to ");
  if (nSSID) {
    WiFi.begin(nSSID, nPassword);
    Serial.println(nSSID);
  }

  uint8_t i = 0;
  while (WiFi.status() != WL_CONNECTED && i++ < 50) {
    delay(200);
    Serial.print(".");
  }
  ++attempt;
  Serial.println("");
  if (i == 51) {
    Serial.print("Connection: TIMEOUT on attempt: ");
    Serial.println(attempt);
    if (attempt % 2 == 0)
      Serial.println("Check if access point available or SSID and Password\r\n");
    return false;
  }
  Serial.println("Connection: ESTABLISHED");
  Serial.print("Got IP address: ");
  Serial.println(WiFi.localIP());
  return true;
}

void Awaits() {
  uint32_t ts = millis();
  while (!connection_state) {
    delay(50);
    if (millis() > (ts + reconnect_interval) && !connection_state) {
      connection_state = WiFiConnect();
      ts = millis();
    }
  }
}

String getHTML() {
  String html = "<!DOCTYPE HTML>";
  html += "<center>";
  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "<span style=font-size:4em>"; 
  html += "</head>";
  html += "<p>Temperature F: <span style='color: red;'>";

    html += (tempF);
  
  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Humidity: <span style='color: red;'>";

    html += (hum);

  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Relay State: <span style='color: red;'>";
  
  if (relayState == HIGH)
    html += ("On");
  else
    html += ("Off");
  

  html += "</span></p>";
  html += "<a href='/standby/on'>Turn Off Standby Mode</a>";
  html += "<br><br>";
  html += "<a href='/standby/off'>Turn On Standby Mode</a>";
  html += "<br><br>";
  html += "<a href='/relayis/on'>Turn relay ON</a>";
  html += "<br><br>";
  html += "<a href='/relayis/off'>Turn relay OFF</a>";
  html += "</html>";
  html += "</center>";

  return html;
}

void setup() {
  Serial.begin(9600);                 // initialize serial
  pinMode(BUTTON_PIN, INPUT_PULLUP);  // set arduino pin to input pull-up mode
  pinMode(BUTTON_PIN2, INPUT_PULLUP);
  pinMode(RELAY_PIN, OUTPUT);  // set arduino pin to output mode
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  pinMode(ledPin3, OUTPUT);
  standByMode = true;
  ledCounter = 1;
  relayStateChange = false;
  buttonStateChange = false;
  buttonChanged = false;
  buttonOn = false;
  sensorTrigger = false;
  buttonTrigger = false;
  sendmail = false;
  temperatureStateChange = 0;
  dht_sensor.begin();  // initialize the DHT sensor

  connection_state = WiFiConnect(ssid, password);
  if (!connection_state)  // if not connected to WIFI
    Awaits();

     // home page
  server.on("/", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /");
    server.send(200, "text/html", getHTML());
  });

  // Route to control the Relay
  server.on("/standby/on", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /standby/on");
    standByState = HIGH;
    buttonStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  server.on("/standby/off", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /standby/off");
    standByState = LOW;
    buttonStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  server.on("/relayis/on", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /relayis/on");
    relayState = HIGH;
    buttonChanged = true;
    relayStateChange = true;
    buttonOn = true;
    relayOnTime = millis();
    server.send(200, "text/html", getHTML());
  });
  server.on("/relayis/off", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /relayis/off");
    relayState = LOW;
    buttonChanged = true;
    relayStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  // Start the server
  server.begin();
}

void loop() {
  button();
  standby();
  led();
  relay();
  temperature();
  email();
  server.handleClient();
}

void button() {
  int buttonState = digitalRead(BUTTON_PIN);  // read new state
  int buttonState2 = digitalRead(BUTTON_PIN2);

  if (millis() - lastTimeButtonStateChanged >= debounceDuration) {
    if (buttonState != lastButtonState) {
      lastTimeButtonStateChanged = millis();
      lastButtonState = buttonState;
      if ((buttonState == LOW) && (standByMode == false) && (sensorTrigger == false)) {
        relayStateChange = true;
        buttonChanged = true;
        m = 0;
        sendmail = true;
        relayOnTime = millis();
        relayState = (relayState == HIGH) ? LOW : HIGH;
        Serial.print("relayStateState");
        Serial.println(relayState);
      }
      if (relayState == HIGH) {
        buttonOn = true;
        Serial.print("buttonOn");
        Serial.print(buttonOn);
        relayOnTime = millis();
      }
    }
  }
  if (millis() - lastTimeButtonStateChanged2 >= debounceDuration) {
    if (buttonState2 != lastButtonState2) {
      lastTimeButtonStateChanged2 = millis();
      lastButtonState2 = buttonState2;
      if (buttonState2 == LOW) {
        buttonStateChange = true;
        standByState = (standByState == HIGH) ? LOW : HIGH;
        Serial.print("standByState");
        Serial.println(standByState);
      }
    }
  }
  if ((buttonOn == true) && (buttonChanged == true)) {
    buttonTrigger = true;
    buttonChanged = false;
    buttonTimer = true;
    Serial.print("buttonTrigger");
    Serial.println(buttonTrigger);
  }
  if (buttonTimer == true) {
    if (millis() - relayOnTime >= 40000) {
      relayState = LOW;
      buttonOn = false;
      buttonTimer = false;
      Serial.print("buttonTimer");
      Serial.println(buttonTimer);
      buttonChanged = true;
      relayStateChange = true;
    }
  } else if ((buttonOn == false) && (buttonChanged == true)) {
    buttonTrigger = false;
    buttonChanged = false;
    Serial.print("buttonTrigger2");
    Serial.println(buttonTrigger);
  }
}

void standby() {
  if ((standByState == HIGH) && (buttonStateChange == true)) {
    standByMode = false;
    buttonStateChange = false;
    ledCounter = 2;
    Serial.print("ledCounter not in standby mode");
    Serial.println(ledCounter);
  }
  if ((standByState == LOW) && (buttonStateChange == true)) {
    standByMode = true;
    buttonStateChange = false;
    ledCounter = 1;
    temperatureStateChange = 0;
    sensorTrigger = false;
    buttonTrigger = false;
    Serial.print("ledCounter in standy mode");
    Serial.println(ledCounter);
  }
  if (standByMode == true) {
    digitalWrite(RELAY_PIN, LOW);
  }
}

void led() {
  if (ledCounter == 1) {
    digitalWrite(ledPin3, HIGH);
    digitalWrite(ledPin2, LOW);
    digitalWrite(ledPin1, LOW);
    ledCounter = 0;
  }
  if (ledCounter == 2) {
    digitalWrite(ledPin3, LOW);
    digitalWrite(ledPin2, HIGH);
    digitalWrite(ledPin1, LOW);
    ledCounter = 0;
  }
  if (ledCounter == 3) {
    digitalWrite(ledPin3, LOW);
    digitalWrite(ledPin2, LOW);
    digitalWrite(ledPin1, HIGH);
    ledCounter = 0;
  }
}

void relay() {
  if ((relayState == HIGH) && (relayStateChange == true)) {
    digitalWrite(RELAY_PIN, HIGH);
    relayStateChange = false;
    ledCounter = 3;
    Serial.print("ledCounter relay on");
    Serial.println(ledCounter);
    Serial.println("Relay state changed");
    Serial.println("Relay On");
  }
  if ((relayState == LOW) && (relayStateChange == true)) {
    digitalWrite(RELAY_PIN, LOW);
    relayStateChange = false;
    ledCounter = 2;
    Serial.print("ledCounter relay off");
    Serial.println(ledCounter);
    Serial.println("Relay state changed");
    Serial.println("Relay Off");
  }
}

void temperature() {
  if (standByMode == false) {
    if (millis() - tempRead >= 30000) {
      tempRead = millis();
      // read humidity
      float humi = dht_sensor.readHumidity();
      // read temperature in Celsius
      float temperature_C = dht_sensor.readTemperature();
      // read temperature in Fahrenheit
      float temperature_F = dht_sensor.readTemperature(true);
         tempF = temperature_F;
         hum = humi;
      // check whether the reading is successful or not
      if (isnan(temperature_C) || isnan(temperature_F) || isnan(humi)) {
        Serial.println("Failed to read from DHT sensor!");
      } else {
        Serial.print("Humidity: ");
        Serial.print(humi);
        Serial.print("%");

        Serial.print("  |  ");

        Serial.print("Temperature: ");
        Serial.print(temperature_C);
        Serial.print("°C  ~  ");
        Serial.print(temperature_F);
        Serial.println("°F");
        Serial.print("buttonChanged");
        Serial.println(buttonChanged);
        Serial.print("buttonOn");
        Serial.println(buttonOn);
        Serial.print("sensorTrigger");
        Serial.println(sensorTrigger);
        Serial.print("relayState");
        Serial.println(relayState);
      }

      if (temperature_F >= 75) {
        temperatureState = 1;
        Serial.print("temperatureState");
        Serial.println(temperatureState);
       
      } else if (temperature_F <= 74){
        temperatureState = 2;
        Serial.print("temperatureState");
        Serial.println(temperatureState);
      }
      if ((temperatureState != temperatureStateChange)) {
        if ((temperature_F >= 75) && (buttonTrigger == false)) {
          sensorTrigger = true;
          relayState = HIGH;
          relayStateChange = true;
          m = 1;
          sendmail = true;
          temperatureStateChange = temperatureState;
          Serial.print("relayStateChange");
          Serial.println(relayStateChange);
        }
        if ((temperature_F <= 74) && (buttonTrigger == false)) {
          sensorTrigger = false;
          relayState = LOW;
          relayStateChange = true;
          m = 2;
          sendmail = true;
          temperatureStateChange = temperatureState;
          Serial.print("relayStateChange2");
          Serial.println(relayStateChange);
        }
      }
    }
  }
}

void email() {
  if ((sendmail == true) && (relayStateChange == false)){
  EMailSender::EMailMessage message;
  message.subject = "from esp";
  message.message = (myStrings[m]);

  EMailSender::Response resp = emailSend.send("xxxxxxxxxx", message);
  sendmail = false;

  Serial.println("Sending status: ");

  Serial.println(resp.status);
  Serial.println(resp.code);
  Serial.println(resp.desc);
  }
}
5

<CENTER>zzz</center> is normally placed immediately after <HTML> and immediately before </HTML>

6

<center> and </center> are normally placed only around the sections/text that need to be centred. Otherwise everything on the page will be centred, which might be ok in this case but isn't what is generally required.

So I wouldn't say that they are normally placed immediately inside the <html> and </html> tags.

But I would agree they shouldn't be placed outside the <html> and </html> tags. I would not have been surprised if that had not worked at all!

@johnathonj you have marked one of your own posts as the solution. That's like thanking yourself instead of thanking the forum member who helped you. Please review which post you marked as the solution.

7

Markup language is a non-strict language. It works in the most unusual ways, as OP demonstrated.

Back when we had access to the markup in a Wordstar or WordPerfect document, you could remove the hundreds of extra "bold" or "italics" or "underline" (et c.) tags that made your one page document the same size as your 100s-page document. The excess and poorly placed tags never crashed the document app, but all but one matched pair were superfluous.

My "immediately inside" was not fully correct, as you and I noted, it is meant for inside any element, but it is valid to want a non-centered <head> (or centered), so I pointed to the rule-of-thumb with least effort.

HTML is the free-jazz of languages. It's noise to normal humans, and "beautiful" (very forgiving) to the HTML groupie.

8

Move web text center html code to correct place. I think
added standby status to webpage
fixed webpage glitch for relay status
added homepage link to webpage
fixed slow physical led light change

#include <Arduino.h>
#include <EMailSender.h> //EMAILSENDER by Renzo Mischianti
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h> //DHT11 library by Adafruit

const byte BUTTON_PIN = D4;
const byte BUTTON_PIN2 = D3;
const byte RELAY_PIN = D2;
const byte ledPin1 = D1;
const byte ledPin2 = D5;
const byte ledPin3 = D6;

const char* ssid = "xxxxxxxxx"; //the name off your wifi router
const char* password = "xxxxxxxx"; //the password of your wifi router

uint8_t connection_state = 0;
uint16_t reconnect_interval = 10000;

ESP8266WebServer server(80); // Web server on port 80

byte lastButtonState = LOW;
byte lastButtonState2 = LOW;
byte relayState = LOW;
byte standByState = LOW;
byte temperatureState;
byte temperatureStateChange;
byte tempF;
byte hum;
boolean standByMode;
boolean relayStateChange;
boolean buttonStateChange;
boolean buttonChanged;
boolean buttonOn;
boolean sensorTrigger;
boolean buttonTrigger;
boolean buttonTimer;
boolean sendmail;
int m = 0;
int h = 75; //high temperature to turn relay on
int l = 74; //low temeratrue to turn relay off
const byte DHT_SENSOR_PIN = D7;  // The ESP8266 pin D7 connected to DHT11 sensor
#define DHT_SENSOR_TYPE DHT11

DHT dht_sensor(DHT_SENSOR_PIN, DHT_SENSOR_TYPE);

int ledCounter = 0;

char *myStrings[] = {"The button was triggered", "The temperature is at or above 75", "The temperature is at or below 74"};

unsigned long debounceDuration = 100;  // millis
unsigned long lastTimeButtonStateChanged = 0;
unsigned long lastTimeButtonStateChanged2 = 0;
unsigned long tempRead = 0;
unsigned long relayOnTime = 0;

EMailSender emailSend("xxxxxxxxxxxx", "xxxxxxxxxxx"); //sending email address and app password

uint8_t WiFiConnect(const char* nSSID = nullptr, const char* nPassword = nullptr)
{
  static uint16_t attempt = 0;
  Serial.print("Connecting to ");
  if (nSSID) {
    WiFi.begin(nSSID, nPassword);
    Serial.println(nSSID);
  }

  uint8_t i = 0;
  while (WiFi.status() != WL_CONNECTED && i++ < 50) {
    delay(200);
    Serial.print(".");
  }
  ++attempt;
  Serial.println("");
  if (i == 51) {
    Serial.print("Connection: TIMEOUT on attempt: ");
    Serial.println(attempt);
    if (attempt % 2 == 0)
      Serial.println("Check if access point available or SSID and Password\r\n");
    return false;
  }
  Serial.println("Connection: ESTABLISHED");
  Serial.print("Got IP address: ");
  Serial.println(WiFi.localIP());
  return true;
}

void Awaits() {
  uint32_t ts = millis();
  while (!connection_state) {
    delay(50);
    if (millis() > (ts + reconnect_interval) && !connection_state) {
      connection_state = WiFiConnect();
      ts = millis();
    }
  }
}

String getHTML() {
  String html = "<!DOCTYPE HTML>";
  html += "<html>";
  html += "<center>";
  html += "<span style=font-size:4em>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "<span style=text-align: center>"; 
  html += "</head>";
  html += "<p>Temperature F: <span style='color: red;'>";

    html += (tempF);
  
  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Humidity: <span style='color: red;'>";

    html += (hum);

  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Relay State: <span style='color: red;'>";
  
  if (relayState == HIGH)
    html += ("On");
  else
    html += ("Off");

  html += "<html>";
  html += "<head>";
  html += "<link rel='icon' href='data:,'>";
  html += "</head>";
  html += "<p>Standby State: <span style='color: red;'>";
  
  if (standByState == HIGH)
    html += ("Not in standby mode");
  else
    html += ("In standby mode");
  
  html += "</span></p>";
  html += "<span><p>";
  html += "<a href='/'>Homepage/refresh</a>";
  html += "<br><br>";
  html += "Use Homepage link to refresh status";
  html += "<br><br>";
  html += "<a href='/standby/on'>Turn Off Standby Mode</a>";
  html += "<br><br>";
  html += "<a href='/standby/off'>Turn On Standby Mode</a>";
  html += "<br><br>";
  html += "<a href='/relayis/on'>Turn relay ON</a>";
  html += "<br><br>";
  html += "<a href='/relayis/off'>Turn relay OFF</a>";
  html += "</span></p>";
  html += "</center>";
  html += "</html>";
  
return html;
}

void setup() {
  Serial.begin(9600);                 // initialize serial
  pinMode(BUTTON_PIN, INPUT_PULLUP);  // set arduino pin to input pull-up mode
  pinMode(BUTTON_PIN2, INPUT_PULLUP);
  pinMode(RELAY_PIN, OUTPUT);  // set arduino pin to output mode
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
  pinMode(ledPin3, OUTPUT);
  standByMode = true;
  ledCounter = 1;
  relayStateChange = false;
  buttonStateChange = false;
  buttonChanged = false;
  buttonOn = false;
  sensorTrigger = false;
  buttonTrigger = false;
  sendmail = false;
  temperatureStateChange = 0;
  dht_sensor.begin();  // initialize the DHT sensor

  connection_state = WiFiConnect(ssid, password);
  if (!connection_state)  // if not connected to WIFI
    Awaits();

     // home page
  server.on("/", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /");
    server.send(200, "text/html", getHTML());
  });

  // Route to control the Relay
  server.on("/standby/on", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /standby/on");
    standByState = HIGH;
    buttonStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  server.on("/standby/off", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /standby/off");
    standByState = LOW;
    buttonStateChange = true;
    relayState = LOW;
    server.send(200, "text/html", getHTML());
  });
  server.on("/relayis/on", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /relayis/on");
    relayState = HIGH;
    buttonChanged = true;
    relayStateChange = true;
    buttonOn = true;
    sendmail = true;
    relayOnTime = millis();
    server.send(200, "text/html", getHTML());
  });
  server.on("/relayis/off", HTTP_GET, []() {
    Serial.println("ESP8266 Web Server: New request received:");
    Serial.println("GET /relayis/off");
    relayState = LOW;
    buttonChanged = true;
    relayStateChange = true;
    server.send(200, "text/html", getHTML());
  });
  // Start the server
  server.begin();
}

void loop() {
  button();
  standby();
  led();
  relay();
  temperature();
  email();
  server.handleClient();
}

void button() {
  int buttonState = digitalRead(BUTTON_PIN);  // read new state
  int buttonState2 = digitalRead(BUTTON_PIN2);

  if (millis() - lastTimeButtonStateChanged >= debounceDuration) {
    if (buttonState != lastButtonState) {
      lastTimeButtonStateChanged = millis();
      lastButtonState = buttonState;
      if ((buttonState == LOW) && (standByMode == false) && (sensorTrigger == false)) {
        relayStateChange = true;
        buttonChanged = true;
        m = 0;
        sendmail = true;
        relayOnTime = millis();
        relayState = (relayState == HIGH) ? LOW : HIGH;
        Serial.print("relayStateState");
        Serial.println(relayState);
      }
      if (relayState == HIGH) {
        buttonOn = true;
        Serial.print("buttonOn");
        Serial.print(buttonOn);
        relayOnTime = millis();
      }
    }
  }
  if (millis() - lastTimeButtonStateChanged2 >= debounceDuration) {
    if (buttonState2 != lastButtonState2) {
      lastTimeButtonStateChanged2 = millis();
      lastButtonState2 = buttonState2;
      if (buttonState2 == LOW) {
        buttonStateChange = true;
        standByState = (standByState == HIGH) ? LOW : HIGH;
        Serial.print("standByState");
        Serial.println(standByState);
      }
    }
  }
  if ((buttonOn == true) && (buttonChanged == true)) {
    buttonTrigger = true;
    buttonChanged = false;
    buttonTimer = true;
    Serial.print("buttonTrigger");
    Serial.println(buttonTrigger);
  }
  if (buttonTimer == true) {
    if (millis() - relayOnTime >= 40000) { //time relay is on after button push 1000 equals 1 second
      relayState = LOW;
      buttonOn = false;
      buttonTimer = false;
      Serial.print("buttonTimer");
      Serial.println(buttonTimer);
      buttonChanged = true;
      relayStateChange = true;
    }
  } else if ((buttonOn == false) && (buttonChanged == true)) {
    buttonTrigger = false;
    buttonChanged = false;
    Serial.print("buttonTrigger2");
    Serial.println(buttonTrigger);
  }
}

void standby() {
  if ((standByState == HIGH) && (buttonStateChange == true)) {
    standByMode = false;
    buttonStateChange = false;
    ledCounter = 2;
    Serial.print("ledCounter not in standby mode");
    Serial.println(ledCounter);
  }
  if ((standByState == LOW) && (buttonStateChange == true)) {
    standByMode = true;
    relayState = LOW;
    buttonStateChange = false;
    ledCounter = 1;
    temperatureStateChange = 0;
    sensorTrigger = false;
    buttonTrigger = false;
    Serial.print("ledCounter in standy mode");
    Serial.println(ledCounter);
  }
  if (standByMode == true) {
    digitalWrite(RELAY_PIN, LOW);
  }
}

void led() {
  if (ledCounter == 1) {        //pins are pmw and this is an RGB led change to (example)
    digitalWrite(ledPin3, HIGH); //analogWrite(ledPin3, 110);
    digitalWrite(ledPin2, LOW);  //analogWrite(ledPin2, 0);  =purple
    digitalWrite(ledPin1, LOW);  //analogWrite(ledPin1, 90);
    relayStateChange = false;
    ledCounter = 0;
  }
  if (ledCounter == 2) {
    digitalWrite(ledPin3, LOW);
    digitalWrite(ledPin2, HIGH);
    digitalWrite(ledPin1, LOW);
    relayStateChange = false;
    ledCounter = 0;
  }
  if (ledCounter == 3) {
    digitalWrite(ledPin3, LOW);
    digitalWrite(ledPin2, LOW);
    digitalWrite(ledPin1, HIGH);
    relayStateChange = false;
    ledCounter = 0;
  }
}

void relay() {
  if ((relayState == HIGH) && (relayStateChange == true)) {
    digitalWrite(RELAY_PIN, HIGH);
    ledCounter = 3;
    Serial.print("ledCounter relay on");
    Serial.println(ledCounter);
    Serial.println("Relay state changed");
    Serial.println("Relay On");
  }
  if ((relayState == LOW) && (relayStateChange == true)) {
    digitalWrite(RELAY_PIN, LOW);
    ledCounter = 2;
    Serial.print("ledCounter relay off");
    Serial.println(ledCounter);
    Serial.println("Relay state changed");
    Serial.println("Relay Off");
  }
}

void temperature() {
  if (standByMode == false) {
    if (millis() - tempRead >= 30000) {
      tempRead = millis();
      // read humidity
      float humi = dht_sensor.readHumidity();
      // read temperature in Celsius
      float temperature_C = dht_sensor.readTemperature();
      // read temperature in Fahrenheit
      float temperature_F = dht_sensor.readTemperature(true);
         tempF = temperature_F;
         hum = humi;
      // check whether the reading is successful or not
      if (isnan(temperature_C) || isnan(temperature_F) || isnan(humi)) {
        Serial.println("Failed to read from DHT sensor!");
      } else {
        Serial.print("Humidity: ");
        Serial.print(humi);
        Serial.print("%");

        Serial.print("  |  ");

        Serial.print("Temperature: ");
        Serial.print(temperature_C);
        Serial.print("°C  ~  ");
        Serial.print(temperature_F);
        Serial.println("°F");
        Serial.print("buttonChanged");
        Serial.println(buttonChanged);
        Serial.print("buttonOn");
        Serial.println(buttonOn);
        Serial.print("sensorTrigger");
        Serial.println(sensorTrigger);
        Serial.print("relayState");
        Serial.println(relayState);
      }

      if (temperature_F >= h) {
        temperatureState = 1;
        Serial.print("temperatureState");
        Serial.println(temperatureState);
       
      } else if (temperature_F <= l){
        temperatureState = 2;
        Serial.print("temperatureState");
        Serial.println(temperatureState);
      }
      if ((temperatureState != temperatureStateChange)) {
        if ((temperature_F >= h) && (buttonTrigger == false)) {
          sensorTrigger = true;
          relayState = HIGH;
          relayStateChange = true;
          m = 1;
          sendmail = true;
          temperatureStateChange = temperatureState;
          Serial.print("relayStateChange");
          Serial.println(relayStateChange);
        }
        if ((temperature_F <= l) && (buttonTrigger == false)) {
          sensorTrigger = false;
          relayState = LOW;
          relayStateChange = true;
          m = 2;
          sendmail = true;
          temperatureStateChange = temperatureState;
          Serial.print("relayStateChange2");
          Serial.println(relayStateChange);
        }
      }
    }
  }
}

void email() {
  if ((sendmail == true) && (relayStateChange == false)){
  EMailSender::EMailMessage message;
  message.subject = "from esp";
  message.message = (myStrings[m]);

  EMailSender::Response resp = emailSend.send("xxxxxxxxxx", message); //email address for message to be
  sendmail = false;                                                               //sent to

  Serial.println("Sending status: ");

  Serial.println(resp.status);
  Serial.println(resp.code);
  Serial.println(resp.desc);
  }
}