ESP32, güçlü Wi-Fi yetenekleri ve düşük güç tüketimi sayesinde Nesnelerin İnterneti (IoT) projeleri için mükemmel bir mikrodenetleyicidir. Bu projede, ESP32'yi kullanarak yerel ağınızdaki herhangi bir cihazdan (telefon, tablet veya bilgisayar) iki ayrı LED'i kontrol etmenizi sağlayacak bağımsız (standalone) bir web sunucusu oluşturacağız.
🛠️ Neler Gerekiyor?
Bu projeyi tamamlamak için ihtiyacınız olan temel bileşenler şunlardır:
- ESP32 Geliştirme Kartı: (Herhangi bir modeli kullanabilirsiniz)
- İki Adet LED: (Farklı renklerde olabilir)
- İki Adet Akım Sınırlayıcı Direnç: (Genellikle 220 ohm idealdir)
- Breadboard (Devre Tahtası)
- Jumper Kabloları
- Arduino IDE: (Gerekli ESP32 kart desteği kurulu olmalıdır)
🛠️ Devre Şeması ve Bileşenler
Bu projede, iki LED'i kontrol etmek için ESP32'nin iki farklı GPIO pinini kullanıyoruz:
| Bileşen | ESP32 Pini | Açıklama |
| Yeşil LED | GPIO 2 (D2) | Açma/Kapama komutları bu pini kontrol eder. |
| Kırmızı LED | GPIO 4 (D4) | Açma/Kapama komutları bu pini kontrol eder. |
| Direnç (220 ohm) | Seride | Her iki LED'in de akımını sınırlamak için kullanılır. |
Kurulum Adımları:
- Yeşil LED Bağlantısı: LED'in uzun bacağını (anot) bir 220 Ohm direnç ile seri bağlayın ve bu direncin diğer ucunu GPIO 2'ye takın. LED'in kısa bacağını (katot) ESP32'deki GND pinine bağlayın.
- Kırmızı LED Bağlantısı: Aynı işlemi Kırmızı LED için tekrarlayın: LED'in anodu, bir 220 Ohm direnç üzerinden GPIO 4'e bağlanır. Katot ucu ise GND'ye bağlanır.
Bu kurulum, LED'lerin güvenliğini sağlarken ESP32 üzerinden kontrol edilebilmelerini mümkün kılar.
Arduino IDE Kodumuz
// Load Wi-Fi library
#include <WiFi.h>
// Wi-Fi Ağ Bilgilerinizi Buraya Girin
const char* ssid = "SSID"; // Ağınızın Adı (SSID)
const char* password = "password"; // Ağınızın Şifresi
// Web Sunucusu 80. Portta Çalışacak
WiFiServer server(80);
// HTTP İsteğini Depolayacak Değişken
String header;
// LED Durumlarını Saklayacak Yardımcı Değişkenler
String greenLedState = "off";
String redLedState = "off";
// LED'lerin Bağlı Olduğu GPIO Pinleri
const int greenLed = 2; // D2 -> Yeşil LED (ESP32 için GPIO 2)
const int redLed = 4; // D4 -> Kırmızı LED (ESP32 için GPIO 4)
// Zamanlama Değişkenleri (İstemci Zaman Aşımı İçin)
unsigned long currentTime = millis();
unsigned long previousTime = 0;
const long timeoutTime = 2000; // 2 saniye zaman aşımı
void setup() {
Serial.begin(115200);
// Pinleri Çıkış Olarak Ayarla
pinMode(greenLed, OUTPUT);
pinMode(redLed, OUTPUT);
// Başlangıçta Tüm LED'leri Kapat
digitalWrite(greenLed, LOW);
digitalWrite(redLed, LOW);
// Wi-Fi Ağına Bağlan
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
// Bağlantı Başarılı Olana Kadar Bekle
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// IP Adresini Yazdır ve Sunucuyu Başlat
Serial.println("");
Serial.println("WiFi connected.");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
// Yeni İstemci Bağlantısı Kontrolü
WiFiClient client = server.available();
if (client) {
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client.");
String currentLine = "";
// İstemci Bağlı Olduğu Sürece Veya Zaman Aşımı Dolana Kadar Oku
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
// HTTP İsteğinin Sonuna Gelindi
if (currentLine.length() == 0) {
// HTTP Cevap Başlıkları
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// ===================================
// LED Kontrol Mantığı (HTTP İsteğine Göre)
// ===================================
if (header.indexOf("GET /green/on") >= 0) {
Serial.println("Green LED ON");
greenLedState = "on";
digitalWrite(greenLed, HIGH);
} else if (header.indexOf("GET /green/off") >= 0) {
Serial.println("Green LED OFF");
greenLedState = "off";
digitalWrite(greenLed, LOW);
} else if (header.indexOf("GET /red/on") >= 0) {
Serial.println("Red LED ON");
redLedState = "on";
digitalWrite(redLed, HIGH);
} else if (header.indexOf("GET /red/off") >= 0) {
Serial.println("Red LED OFF");
redLedState = "off";
digitalWrite(redLed, LOW);
}
// ===================================
// Web Sayfası İçeriği (HTML/CSS)
// ===================================
client.println("<!DOCTYPE html><html lang='tr'>");
client.println("<head><meta name='viewport' content='width=device-width, initial-scale=1'>");
client.println("<link rel='icon' href='data:,'>");
// CSS Stilleri (Mobil Uyumlu Tasarım)
client.println("<style>");
client.println("html, body { font-family: 'Segoe UI', Helvetica, Arial, sans-serif; background: linear-gradient(135deg, #1f1c2c, #928dab); color: #fff; text-align: center; height: 100%; margin: 0; }");
client.println("h1 { font-size: 2.5rem; margin-top: 40px; letter-spacing: 2px; }");
client.println("h2 { margin-top: 30px; font-weight: 500; color: #ffe082; }");
client.println("p { font-size: 1.2rem; margin: 10px 0; }");
client.println(".button { display: inline-block; background: #00c853; border: none; color: white; padding: 16px 50px; text-decoration: none; font-size: 22px; margin: 10px; cursor: pointer; border-radius: 10px; transition: 0.3s; }");
client.println(".button:hover { background: #00e676; transform: scale(1.05); }");
client.println(".button2 { background: #ff1744; }");
client.println(".button2:hover { background: #ff5252; transform: scale(1.05); }");
client.println(".led-section { background: rgba(255,255,255,0.1); margin: 30px auto; width: 80%; max-width: 400px; padding: 20px; border-radius: 15px; box-shadow: 0 0 20px rgba(0,0,0,0.3); }");
client.println("</style></head>");
client.println("<body>");
client.println("<h1>ESP32 LED Kontrol Paneli</h1>");
client.println("<p>Yerel Ag Uzerinden IoT Kontrolu</p>");
// Yeşil LED Bölümü (Dinamik Buton)
client.println("<div class='led-section'>");
client.println("<h2>Yesil LED (D2)</h2>");
client.println("<p>Durum: " + greenLedState + "</p>");
if (greenLedState == "off") {
client.println("<p><a href='/green/on'><button class='button'>AÇ</button></a></p>");
} else {
client.println("<p><a href='/green/off'><button class='button button2'>KAPAT</button></a></p>");
}
client.println("</div>");
// Kırmızı LED Bölümü (Dinamik Buton)
client.println("<div class='led-section'>");
client.println("<h2>Kirmizi LED (D4)</h2>");
client.println("<p>Durum: " + redLedState + "</p>");
if (redLedState == "off") {
client.println("<p><a href='/red/on'><button class='button'>AÇ</button></a></p>");
} else {
client.println("<p><a href='/red/off'><button class='button button2'>KAPAT</button></a></p>");
}
client.println("</div>");
client.println("</body></html>");
// Cevabı Gönderdikten Sonra Döngüden Çık
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
// Başlık Değişkenini Temizle ve Bağlantıyı Kapat
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}Projeyi Derleme ve Çalıştırma
- Kod Güncelleme: Kod içindeki Wi-Fi bilgilerinizi (
ssidvepassword) kendi ağ bilgilerinize göre güncelleyin. - Yükleme: Kodu ESP32 kartınıza yükleyin.
- Erişim: Seri Monitörden elde ettiğiniz IP adresini (Örnek:
192.168.1.42) cep telefonunuzun veya bilgisayarınızın web tarayıcısına girin. - Kontrol: Karşınıza çıkan şık kontrol paneli ile her iki LED'i de anında açıp kapatabilirsiniz. Sayfayı cep telefonunuzda açtığınızda, düğmelerin parmağınızla kolayca dokunulabilir boyutta olduğunu göreceksiniz.
Bu proje, temel donanım kontrolünü modern ve kararlı bir web arayüzüyle birleştirmenin harika bir örneğidir. Projenizin bir sonraki aşamasında bu yapıya sensör verilerini veya daha fazla çıkışı kolayca entegre edebilirsiniz!
