Bu yazımızda ESP12E ile web server üzerinden iki LED’i yakıp söndürmeyi anlatacağız. Belki LED yak söndür basit gibi görünebilir ama LED yerine bir role bağlayarak bir çok şeyi çalıştırıp durdurabiliriz.

Kodu satır satır açıklayacağız. Son kısımdan .ino dosyasını kopyalayabilirsiniz.

Eğer arduino IDE ye ESP yi tanıtmamış iseniz bunun nasıl yapılacağını önceki yazılarımızı inceleyerek yapabilirsiniz.

Bu program ile ESP12E nin GPIO4 ve GPIO5 pinlerine bağlı LED’leri yakıp söndüreceğimiz için gerekli bağlantıları yapmamız gerekir.

Kod nasıl çalışıyor

Şimdi, nasıl çalıştığını görmek için koda daha yakından bakalım, böylece ihtiyaçlarınızı karşılamak için değiştirebilirsiniz. Yapmanız gereken ilk şey ESP8266WiFi kütüphanesini dahil etmektir.

#include

ESP nin modeminize bağlanabilmesi için "Kablosuz ağ adı” ve " şifrenizi” çift ​​tırnak içinde aşağıdaki satırlara yazınız.

const char* ssid = "wifi modem adını yazınız”;

const char* password = "wifi şifrenizi yazınız”;

Ardından, aşağıdaki satır ile web sunucunuzu 80 numaralı bağlantı noktasına ayarlıyoruz.

WiFiServer server(80);

HTTP isteğini saklamak için değişken oluşturuyoruz.

String header;

Ardından, çıktılarınızın mevcut durumunu saklamak için yardımcı değişkenler oluşturuyoruz.

Daha fazla çıkış eklemek ve durumunu kaydetmek istiyorsanız, daha fazla değişken oluşturmanız gerekir

Biz iki LED kullanacağımız için bunların durumunu saklamak için iki adet değişken oluşturuyoruz ve içine ilk değer olarak "off” yazıyoruz.

String output5State = "off”;

String output4State = "off”;

Ayrıca her LED için bir GPIO atamanız gerekir. İşte kullandığımız ESP12E nin hangi pinine LED bağlayacaksak onu burada belirliyoruz.

const int output5 = 5;

const int output4 = 4;

setup()

Şimdi ilk ayarları yapalım. Setup () işlevi, yalnızca ESP’niz ilk enerjilendiğinde bir defa olarak çalışır. İlk olarak, seri haberleşme için bir baud hızı belirledik ve seri haberleşmeyi başlattık.

Serial.begin(115200);

Pinleri çıkış olarak tanımladık ve durumunu DÜŞÜK olarak ayarladık.

pinMode(output5, OUTPUT);

pinMode(output4, OUTPUT);

digitalWrite(output5, LOW);

digitalWrite(output4, LOW);

Aşağıdaki satırlarda " WiFi.begin (ssid, şifre);” başarılı bir bağlantı bekliyoruz ve ESP IP adresini seri monitörde yazdırıyoruz.

Serial.print("Bağlanıyor ");

Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".”);

}

Bağlantı sağlanana kadar seri ekranda ".” yazar.

// wifi ağa bağlanan ESP nin aldığı IP adresini yazdırıyoruz.

Serial.println("”);

Serial.println("WiFi bağlandı.”);

Serial.println("IP adresi: ");

Serial.println(WiFi.localIP());

server.begin();

loop()

ESP her zaman bu hatla gelen bilgiyi dinliyor:

WiFiClient client = server.available();

Bir istemciden istek alındığında, gelen verileri kaydedeceğiz. while döngüsü, istemci bağlı kaldığı sürece çalışır. Yani burada telefon veya bilgisayarımızda ki LED yakıp söndüreceğimiz web sayfasından gelecek olan bilgiyi bekliyoruz. Size kodun bu kısmını değiştirmenizi önermiyoruz

Her satırın ne yaptığına bakalım.

if (client) { // Yeni bir istemci bağlanırsa,

Serial.println("Yeni ESP.”); // Seri ekrana Yeni ESP yazarız.

String currentLine = "”; // gelen bilgileri saklamak için bir değişken oluşturuyoruz içini boş olarak ayarlıyoruz.

while (client.connected()) { // İstemci bağlı olduğu sürece döngü olur

if (client.available()) { // byte gelirse buraya girer ve

char c = client.read(); // byte ları okur , sonra

Serial.write(c); // seri monitörde yazar.

header += c;

if (c == ‘\n’) { // eğer yeni satır işareti gelirse "\n” bilginin sona erdiğini belirtir.

Eğer gelen bilgi uzunluğu 0 ise yani bilgi gelmemiş ise seri ekrana aşağıdakileri yazdırır.

if (currentLine.length() == 0) {

client.println("HTTP/1.1 200 OK”);

client.println("Content-type:text/html”);

client.println("Connection: close”);

client.println();

İf ve else ifadeleri bundan sonraki bölümü hangi düğmeye basıldığını kontrol eder.

Duruma göre çıkışlarınızı uygun şekle getirir.

if (header.indexOf("GET /5/on”) >= 0) {

Serial.println("GPIO 5 on”);

output5State = "on”;

digitalWrite(output5, HIGH);

} else if (header.indexOf("GET /5/off”) >= 0) {

Serial.println("GPIO 5 off”);

output5State = "off”;

digitalWrite(output5, LOW);

} else if (header.indexOf("GET /4/on”) >= 0) {

Serial.println("GPIO 4 on”);

output4State = "on”;

digitalWrite(output4, HIGH);

} else if (header.indexOf("GET /4/off”) >= 0) {

Serial.println("GPIO 4 off”);

output4State = "off”;

digitalWrite(output4, LOW);

}

Örneğin, "GPIO 5 ON " düğmesine bastıysanız, URL olarak değişir

ESP IP adresini ve ardından / 5 / ON yazdığınızda bu bilgileri

HTTP header değişkeninden okuruz. Böylece, başlığın ifadeyi içerip içermediğini kontrol edebiliriz

GET / 5 / on İçerirse, kod seri monitörde bir ileti yazdırır, değişir output5State değişkeni on konuma getirir ve LED’i açar.

Bu, diğer düğmeler de benzer şekilde çalışır. Yani, daha fazla eklemek istiyorsanız yeni pinler için, kodun bu kısmını istediğiniz şekilde değiştirmeniz gerekir.

HTML Web Sayfasını Görüntüleme:

Yapmamız gereken bir sonraki şey, web sayfasını oluşturmak. ESP8266 nın gönderdiği cevabı görüntülemek için bir tarayıcıya ihtiyaç vardır.

Web sayfası, client.println () işlevi kullanılarak istemciye gönderilir. Değişken olarak istemciye göndermek istediğinizi bilgi girilmelidir.

Her zaman göndermeniz gereken ilk metini, HTML gönderiyoruz.

Ardından, aşağıdaki satır, web sayfasını herhangi bir web tarayıcısına cevap verecek hale getirir.

client.println("

initial-scale=1\”>”);

Bir sonraki, favicon ile ilgili istekleri önlemek için kullanılır

client.println("”);

Web Sayfasını Şekillendirme

Ardından, düğmeleri ve web sayfasının görünümünü stilize etmek için bazı CSS’lerimiz var.

Helvetica yazı tipini seçiyoruz, blok olarak gösterilecek içeriği tanımlıyoruz ve ortaya hizalıyoruz.

client.println("”);

Web Sayfasının İlk Başlığını Ayarlama:

Bir sonraki satırda web sayfanızın ilk başlığını ayarladığınızda, bu metni istediğiniz gibi değiştirebiliriz.

client.println("

Makers Dukkan ESP8266

”);

Düğmeleri ve Karşılık gelen Durumu Gösterme:

Ardından, GPIO 5’in geçerli durumunu görüntülemek için bir satır yazılır.

output5State değişkenini kullandığımızı görelim, böylece bu değişken değiştiğinde durum anında güncellenir

client.println("

GPIO 5 — State ” + output5State + "

”);

Ardından, mevcut durumuna bağlı olarak açık veya kapalı düğmesini gösteririz.

if (output5State==”off”) {

client.println("

ON

”);

} else {

client.println("

button2\”>OFF

”);

}

GPIO 4 için aynı prosedürü kullanıyoruz.

client.println("

GPIO 4 — State ” + output4State + "

”);

if (output4State==”off”) {

client.println("

ON

”);

} else {

client.println("

OFF

”);

}

Bağlantıyı Kapatma

Son olarak, yanıt sona erdiğinde, başlık değişkenini temizleriz ve

client.stop () ile bağlantıyı bitiriyoruz.

// Değişkeni temizleme kısmı

header = "”;

// Bağlantıyı bitirme

client.stop();