ESP32 Home Server Code

-

 

#include <WiFi.h>

#include <DNSServer.h>

#include <WebServer.h>


// --- Configuration ---

const char* ssid = "HOME SERVER";

const char* password = "12345678"; // Must be at least 8 characters!


const byte DNS_PORT = 53;

IPAddress apIP(192, 168, 4, 1);

DNSServer dnsServer;

WebServer server(80);


// --- HTML & CSS Payload ---

// Using PROGMEM saves RAM by storing the HTML in flash memory

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Home Server</title>

    <style>

        :root {

            --primary: #005aa7;

            --secondary: #ffffff;

        }

        body {

            margin: 0;

            padding: 0;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            /* Blue and White Gradient Background */

            background: linear-gradient(135deg, #c3cfe2 0%, #c3cfe2 0%, #1d976c 0%, #93f9b9 0%, #005aa7 0%, #fff 100%);

            background-attachment: fixed;

            min-height: 100vh;

            display: flex;

            flex-direction: column;

            align-items: center;

        }

        header {

            text-align: center;

            padding: 40px 20px 20px;

            color: #1a365d;

            animation: fadeInDown 1s ease;

        }

        header h1 {

            margin: 0;

            font-size: 2.5rem;

            letter-spacing: 2px;

            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);

        }

        .container {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

            gap: 20px;

            width: 90%;

            max-width: 800px;

            padding: 20px;

            animation: fadeInUp 1s ease;

        }

        /* Modern Animated Cards */

        .card {

            background: rgba(255, 255, 255, 0.9);

            border-radius: 20px;

            padding: 30px 20px;

            text-align: center;

            text-decoration: none;

            color: #333;

            box-shadow: 0 10px 20px rgba(0,0,0,0.1);

            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

            cursor: pointer;

            backdrop-filter: blur(10px);

            border: 1px solid rgba(255,255,255,0.5);

        }

        .card:hover {

            transform: translateY(-10px) scale(1.02);

            box-shadow: 0 15px 30px rgba(0,90,167,0.3);

            background: #ffffff;

        }

        .icon {

            font-size: 3rem;

            margin-bottom: 15px;

            display: block;

        }

        .title {

            font-weight: 600;

            font-size: 1.2rem;

            color: var(--primary);

        }

        /* Keyframe Animations */

        @keyframes fadeInDown {

            from { opacity: 0; transform: translateY(-30px); }

            to { opacity: 1; transform: translateY(0); }

        }

        @keyframes fadeInUp {

            from { opacity: 0; transform: translateY(30px); }

            to { opacity: 1; transform: translateY(0); }

        }

    </style>

</head>

<body>


    <header>

        <h1>🏠 HOME SERVER</h1>

        <p>Welcome to the family hub</p>

    </header>


    <div class="container">

        <a href="/photos" class="card">

            <span class="icon">📸</span>

            <span class="title">Photos</span>

        </a>

        <a href="/videos" class="card">

            <span class="icon">🎥</span>

            <span class="title">Videos</span>

        </a>

        <a href="/documents" class="card">

            <span class="icon">📄</span>

            <span class="title">Documents</span>

        </a>

        <a href="/family" class="card">

            <span class="icon">👨‍👩‍👧‍👦</span>

            <span class="title">Family Album</span>

        </a>

    </div>


</body>

</html>

)rawliteral";


// --- Server Routing Logic ---


void handleRoot() {

  server.send(200, "text/html", index_html);

}


// The core of the Captive Portal: Redirect all unknown requests to the home page

void handleNotFound() {

  server.sendHeader("Location", String("http://") + WiFi.softAPIP().toString(), true);

  server.send(302, "text/plain", "");

}


// Setup placeholder pages for the buttons

void handlePlaceholder() {

  String message = "<h2>Under Construction</h2><p>Connect an SD Card module to host real files!</p><br><a href='/'>Go Back</a>";

  server.send(200, "text/html", message);

}


void setup() {

  Serial.begin(115200);

  Serial.println();

  Serial.println("Starting Home Server...");


  // 1. Setup Access Point

  WiFi.mode(WIFI_AP);

  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));

  WiFi.softAP(ssid, password);

  

  Serial.print("AP IP address: ");

  Serial.println(WiFi.softAPIP());


  // 2. Setup DNS Server for Captive Portal

  // The "*" means route ALL DNS requests to the ESP32's IP

  dnsServer.start(DNS_PORT, "*", apIP);


  // 3. Setup Web Server Routes

  server.on("/", handleRoot);

  server.on("/photos", handlePlaceholder);

  server.on("/videos", handlePlaceholder);

  server.on("/documents", handlePlaceholder);

  server.on("/family", handlePlaceholder);

  

  // Catch-all route to redirect everything else back to the captive portal

  server.onNotFound(handleNotFound);


  server.begin();

  Serial.println("HTTP server started");

}


void loop() {

  // Continuously handle DNS and Web requests

  dnsServer.processNextRequest();

  server.handleClient();

}

Comments

Post a Comment

Popular posts from this blog

ESP32 Wi-Fi Extender Code

-
 #include <WiFi.h> // Credentials of existing WiFi const char* ssid = "Your_WiFi_SSID"; const char* password = "Your_WiFi_Password"; // Credentials for new AP const char* ap_ssid = "ESP32_Extender"; const char* ap_password = "12345678"; void setup() {   Serial.begin(115200);   // Connect to existing WiFi   WiFi.begin(ssid, password);   Serial.print("Connecting to WiFi");   while (WiFi.status() != WL_CONNECTED) {     delay(1000);     Serial.print(".");   }   Serial.println("Connected!");   // Start Access Point   WiFi.softAP(ap_ssid, ap_password);   Serial.println("Access Point Started");   Serial.print("AP IP Address: ");   Serial.println(WiFi.softAPIP()); } void loop() {   // Nothing needed here }
Read more

WiFi Remote Control RC Car Code For ESP32

-
  #include <WiFi.h> #include <WebServer.h> #include <esp_wifi.h> #define RELAY_FORWARD 26 #define RELAY_LEFT 27 #define ACTIVE_MODE LOW WebServer server ( 80 ) ; const char * ap_ssid = "CarRemote" ; const char * ap_password = "123456789" ; int lastRssi = - 100 ; unsigned long lastRssiUpdate = 0 ; void setup () {    Serial . begin ( 115200 ) ;    pinMode ( RELAY_FORWARD, OUTPUT ) ;    pinMode ( RELAY_LEFT, OUTPUT ) ;    digitalWrite ( RELAY_FORWARD, !ACTIVE_MODE ) ;    digitalWrite ( RELAY_LEFT, !ACTIVE_MODE ) ;    WiFi . softAP ( ap_ssid, ap_password ) ;      server . on ( "/" , handleRoot ) ;    server . on ( "/forward" , [] { controlRelay ( RELAY_FORWARD, ACTIVE_MODE ) ; }) ;    server . on ( "/left" , [] { controlRelay ( RELAY_LEFT, ACTIVE_MODE ) ; }) ;    server . on ( "/stop" , handleStop ) ;    server . on ( "/status" , handleS...
Read more