ESP8266 Nodemcu V3 Wifi geliştirme modülü ile basit bir WebServer yapalım ve evimizdeki/iş yerimizdeki herhangi bir cihazı kontrol edelim.
Bu projede ESP8266 Nodemcu V3 Wifi Geliştirme Modülü üzerindeki LED'i kullandım. Siz de projeyi geliştirip birden fazla cihaz kontrol edebilirsiniz. Aşağıdaki kodlar size bir fikir vermesi açısından derlenmiştir, geliştirmeye açıktır.
Arduino IDE kodlarını aşağıda veriyorum:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Wi-Fi Bilgileriniz
const char* ssid = "BURAYA_WIFI_ADINI_YAZIN";
const char* password = "BURAYA_WIFI_SIFRESINI_YAZIN";
// --- SABİT IP AYARLARI ---
IPAddress local_IP(192, 168, 1, 150);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(8, 8, 8, 8);
ESP8266WebServer server(80);
const int ledPin = LED_BUILTIN;
// Çalışma modlarını takip etmek için değişken: 0 = Kapalı, 1 = Açık, 2 = Yanıp Sönüyor
int ledMode = 0;
// Yanıp sönme modu için zamanlayıcı değişkenleri
unsigned long previousMillis = 0;
const long interval = 500; // Yarım saniye (500 milisaniye)
bool flashState = HIGH;
// Ana Sayfa
void handleRoot() {
String html = "<!DOCTYPE html>";
html += "<html><head><meta charset='utf-8'>";
html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
html += "<title>ESP8266 Kontrol Paneli</title>";
html += "<style>";
html += "body{font-family:Arial, sans-serif; text-align:center; margin:0; padding:20px; background-color:#f4f4f9;}";
html += "h1{font-size:22px; color:#333; margin-top:15px; margin-bottom:5px;}";
html += ".custom-text{font-size:14px; color:#666; margin-bottom:20px; font-style:italic;}";
html += ".container{max-width:400px; margin:0 auto; background:white; padding:20px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.1); display:flex; flex-direction:column; min-height:400px; box-sizing:border-box;}";
html += ".content{flex:1;}";
html += ".status{font-size:18px; font-weight:bold; margin:20px 0; padding:15px; border-radius:8px; transition: all 0.3s ease;}";
html += ".on{color: #2e7d32; background-color: #c8e6c9;}";
html += ".off{color: #c62828; background-color: #ffcdd2;}";
html += ".flash{color: #e65100; background-color: #ffe0b2;}";
html += ".btn{display:block; width:100%; box-sizing:border-box; background-color:#4CAF50; color:white; padding:16px; text-decoration:none; font-size:18px; font-weight:bold; border-radius:8px; margin-top:12px; text-align:center;}";
html += ".btn-flash{background-color:#ff9800;}";
html += ".btn-off{background-color:#f44336;}";
html += "footer{margin-top:20px; font-size:12px; color:#888; border-top:1px solid #eee; padding-top:10px;}";
html += "</style>";
// --- JAVASCRIPT: Sayfa yenilenmeden LED durumunu canlı takip et ---
html += "<script>";
html += "setInterval(function() {";
html += " fetch('/status').then(response => response.text()).then(data => {";
html += " var statusDiv = document.getElementById('statusBox');";
html += " if (data == '1') {";
html += " statusDiv.className = 'status on';";
html += " statusDiv.innerHTML = 'LED DURUMU: AÇIK 🟢';";
html += " } else if (data == '2') {";
html += " statusDiv.className = 'status flash';";
html += " statusDiv.innerHTML = 'LED DURUMU: YANIP SÖNÜYOR 🟡';";
html += " } else {";
html += " statusDiv.className = 'status off';";
html += " statusDiv.innerHTML = 'LED DURUMU: KAPALI 🔴';";
html += " }";
html += " });";
html += "}, 300);"; // Her 300 milisaniyede bir durumu kontrol et
html += "</script>";
html += "</head><body>";
html += "<div class='container'>";
html += "<div class='content'>";
html += "<h1>ESP8266 Web Kontrol</h1>";
// İstediğiniz özel metin alanı (<br> kullanarak alt satıra geçebilirsiniz)
html += "<div class='custom-text'>Buraya istediğiniz açıklamayı<br>veya metni yazabilirsiniz.</div>";
// LED Durumu Göstergesi (JavaScript buradaki ID'yi güncelleyecek)
if (ledMode == 1) {
html += "<div id='statusBox' class='status on'>LED DURUMU: AÇIK 🟢</div>";
} else if (ledMode == 2) {
html += "<div id='statusBox' class='status flash'>LED DURUMU: YANIP SÖNÜYOR 🟡</div>";
} else {
html += "<div id='statusBox' class='status off'>LED DURUMU: KAPALI 🔴</div>";
}
// Butonlar
html += "<a href=\"/ledON\" class=\"btn\">LED'İ AÇ</a>";
html += "<a href=\"/ledFLASH\" class=\"btn btn-flash\">YANIP SÖNDÜR (0.5 sn)</a>";
html += "<a href=\"/ledOFF\" class=\"btn btn-off\">KAPAT</a>";
html += "</div>";
// Alt Bilgi
html += "<footer>© 2026 | Yayımcı: Sizin Adınız | ESP8266 Otomasyon Sistemi</footer>";
html += "</div>";
html += "</body></html>";
server.send(200, "text/html", html);
}
// Sadece anlık durumu (0, 1 veya 2) döndüren arka plan adresi
void handleStatus() {
server.send(200, "text/plain", String(ledMode));
}
void handleLedOn() {
ledMode = 1;
digitalWrite(ledPin, LOW);
server.sendHeader("Location", "/");
server.send(303);
}
void handleLedFlash() {
ledMode = 2;
server.sendHeader("Location", "/");
server.send(303);
}
void handleLedOff() {
ledMode = 0;
digitalWrite(ledPin, HIGH);
server.sendHeader("Location", "/");
server.send(303);
}
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
if (!WiFi.config(local_IP, gateway, subnet, primaryDNS)) {
Serial.println("Sabit IP yapılandırması başarısız!");
}
WiFi.begin(ssid, password);
Serial.print("Wi-Fi'ye bağlanılıyor");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Wi-Fi bağlandı!");
Serial.print("Sabit IP Adresi: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/status", handleStatus); // Canlı durum kontrol adresi eklendi
server.on("/ledON", handleLedOn);
server.on("/ledFLASH", handleLedFlash);
server.on("/ledOFF", handleLedOff);
server.begin();
Serial.println("Web sunucusu başlatıldı!");
}
void loop() {
server.handleClient();
// Yanıp sönme modundaysak (ledMode == 2)
if (ledMode == 2) {
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
previousMillis = currentMillis;
flashState = !flashState;
digitalWrite(ledPin, flashState);
}
}
}
Yorumlar
Yorum Gönder