Garage Lights Control ESP8266

//===========================================================================================
//BEGIN # MAIN TAB
//===========================================================================================
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "webpage.h"  // Include the HTML code from the second tab

//My Add/
#if true  // true
// Replace with your network credentials
const char* ssid = "Your SSID"; //In quotes as shown
const char* password = "your password";//In quotes as shown

//My Add/
// DEFINE STATIC IP 192.168.1.X WORKING! https://www.youtube.com/watch?v=B9jJI7p2Gw4

//STATIC IP ADDRESS


IPAddress local_IP(192.168.1.X);  // X for Garage Lights ESP8266 Module
IPAddress gateway(192.168.1.X);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(208, 67, 222, 222); //you could use google DNS  8.8.8.8
IPAddress secondaryDNS(208, 67, 220, 220); //you could use google DNS 8.8.4.4
#endif


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

// Define states
enum State {
  IDLE,
  CHECK_SENSOR,
  LIGHT_ON,
  LIGHT_OFF
};

State currentState = IDLE;

// Define pins
const int sensorPin = A0; // Analog pin connected to the current sensor
const int relayPin = 5;  // Digital pin connected to the relay

// Current sensor threshold
int threshold = 512;

void setup() {
  Serial.begin(115200);
  pinMode(sensorPin, INPUT);
  pinMode(relayPin, OUTPUT);

  // Connect to WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  // Define server routes
  server.on("/", HTTP_GET, handleRoot);
  server.on("/toggle", HTTP_POST, handleToggle);
  server.begin();
}

void loop() {
  server.handleClient();
  checkSensor();
}

void checkSensor() {
  int sensorValue = analogRead(sensorPin);
  Serial.println("Sensor Value: " + String(sensorValue));

  switch (currentState) {
    case IDLE:
      currentState = CHECK_SENSOR;
      break;

    case CHECK_SENSOR:
      if (sensorValue > threshold) {
        currentState = LIGHT_ON;
      } else {
        currentState = LIGHT_OFF;
      }
      break;

    case LIGHT_ON:
      digitalWrite(relayPin, HIGH);
      Serial.println("Light is ON");
      currentState = IDLE;
      break;

    case LIGHT_OFF:
      digitalWrite(relayPin, LOW);
      Serial.println("Light is OFF");
      currentState = IDLE;
      break;
  }
}

void handleRoot() {
  server.send(200, "text/html", webpage);  // Send HTML page
}

void handleToggle() {
  String state = server.arg("state");
  if (state == "on") {
    currentState = LIGHT_ON;
  } else if (state == "off") {
    currentState = LIGHT_OFF;
  }
  server.send(200, "text/plain", "OK");
}

//===========================================================================================
//END # MAIN TAB
//===========================================================================================


WEBPAGE TAB

//===========================================================================================
//BEGIN # WEBPAGE TAB
//===========================================================================================

const char webpage[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
  <title>Garage Light Control</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
    .button { padding: 20px; font-size: 20px; margin: 10px; cursor: pointer; }
    .on { background-color: green; color: white; }
    .off { background-color: red; color: white; }
  </style>
</head>
<body>
  <h1>Garage Light Control</h1>
  <button id="onButton" class="button on" onclick="toggleLight('on')">Turn On</button>
  <button id="offButton" class="button off" onclick="toggleLight('off')">Turn Off</button>

  <script>
    function toggleLight(state) {
      fetch('/toggle', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'state=' + state
      })
      .then(response => response.text())
      .then(data => {
        if (state === 'on') {
          document.getElementById('onButton').style.backgroundColor = 'darkgreen';
          document.getElementById('offButton').style.backgroundColor = 'red';
        } else {
          document.getElementById('onButton').style.backgroundColor = 'green';
          document.getElementById('offButton').style.backgroundColor = 'darkred';
        }
      });
    }
  </script>
</body>
</html>
)=====";

//===========================================================================================
//END # WEBPAGE TAB
//===========================================================================================