Smart Garage Door Controller

Locate the manual trigger button terminals on your garage door opener motor unit. Wire the relay module's COM and NO terminals in parallel with the button so the relay can trigger the opener just like a button press. Connect the relay's IN pin to GPIO pin 26 on the ESP32 and power the relay module from the ESP32's 5V pin.

Mount the magnetic reed switch on the garage door frame with one half on the fixed frame and the other on the moving door panel. Wire the sensor to GPIO pin 27 with a pull-up resistor so the pin reads HIGH when the door is closed and LOW when open. Position the sensor at a height where the magnets align properly when the door is fully closed.

Create an Arduino sketch that connects the ESP32 to your WiFi network and starts a web server on port 80. Define endpoints for toggling the garage door, checking door status, and viewing connection information. Implement a safety feature that prevents the door from being triggered twice within 5 seconds to avoid accidental rapid opening and closing cycles.

#include <WiFi.h>
#include <WebServer.h>

const int relayPin = 26;
const int doorPin = 27;
unsigned long lastTrigger = 0;
WebServer server(80);

void handleToggle() {
  if (millis() - lastTrigger < 5000) {
    server.send(429, "text/plain", "Too soon");
    return;
  }
  digitalWrite(relayPin, HIGH);
  delay(300);
  digitalWrite(relayPin, LOW);
  lastTrigger = millis();
  server.send(200, "text/plain", "Toggled");
}

void handleStatus() {
  bool closed = digitalRead(doorPin) == HIGH;
  server.send(200, "application/json",
    "{\"door\":\"" + String(closed ? "closed" : "open") + "\"}");
}

Design a simple HTML/CSS/JavaScript web interface with a large toggle button and a status indicator showing whether the door is open or closed. Use the Fetch API to send requests to the ESP32 endpoints when the user taps the button. Add CSS animations for visual feedback and auto-refresh the door status every 3 seconds so the display stays current without manual page reloads.