Arkadaşlar merhaba, bu yazımızda NodeMCU kullanarak Web Server üzerinden led, sıcaklık ve nem değerlerimizi gözlemleyebileceğimiz bir ara yüz tasarımı yapacağız.

[embedyt] https://www.youtube.com/watch?v=IewULFKDinU[/embedyt]

IoT projeleri artık hayatımızın vazgeçilmezi oldu. Daha önceki yazılarımızda home assistant, arduino ıot cloud vey blynk gibi uygulamalar sayesinde hazır şablonlar kullanarak butonlarımızı, ledlerimizi veya sıcaklık gibi değerlerimizi kontrol ettik. Şimdi beraber yapacağımız bu proje sayesinde herhangi bir uygulamaya ihtiyacımız olmadan, hiç bir ücret ödemeden ve en önemlisi proje sınırlaması olmadan kendi tasarlayacağımız ara yüz sayesinde verilerimizi kontrol edeceğiz.

nomdecu web arayuz

Not: Bu projemizde web ara yüz için nodemcu ile aynı Wİ-Fİ ağında olmamız gerekmektedir. HTML dili ve Arduino IDE kullanarak projemizi gerçekleştireceğiz.

HTML

Web sayfalarını oluşturma aşamasında kullanılan standart bir metin işaret dili olan HTML açılımı “Hyper Text Markup Language” olarak bilinir. Genel bilinen yanlış kanının aksine HTML bir programlama dili değildir. Daha açık anlatmak gerekirse, Chrome, Firefox, Yandex gibi tarayıcıların okuyup anlamlandırdığı dil HTML dilidir.

htlm nedir

En Çok Kullanılan HTML Kodları

  • <html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket arasında tanımlanmak zorundadır.
  • <body>: Görünebilir tüm HTML kod parçalarının eklendiği etiket alanıdır.
  • <head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.
  • <title>: Web sitesinin başlık alanını tanımlamak için kullanılır. (Üst kısım)
  • <h>: Başlık kodu.( Arayüz üzerindeki başlıklar)
  • <a>: Bağlantı Kodu (Link)
  • <button>: Buton kodu, buton oluşturmanızı sağlar.
  • <img>: Resim eklemenizi sağlayan koddur.
  • <br>: Satır sonu kodu.
  • <p>: Paragraf kodu.

Malzemeler:

NodeMCU ile Web Server Kullanımı için Devre Şeması

nodemcu html akilli ev

NodeMCU ile Web Server Kullanımı Kodlar

Gerekli kütüphaneleri kurduktan sonra kodları yükleyin. Kodları yükledikten sonra seri port ekranında karşınıza bir “IP” adresi çıkacak. IP adresini tarayıcıya yazdığınız zaman ara yüz karşınıza çıkacaktır. HTML kısmında değişiklikler yaparak daha güzel ara yüzler tasarlayacağınıza eminim. 🚀

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"
#define DHTTYPE DHT11 // DHT 11
/*Put your SSID & Password*/
const char* ssid = "******"; //Wifi adınız
const char* password = "******"; //wifi şifreniz
ESP8266WebServer server(80); //80 portunu kullanarak bir web server nesnesi oluşturduk
uint8_t DHTPin = D4;
uint8_t LED1pin = D2;
bool LED1status = LOW; //durumlarını tanımlıyoruz.
uint8_t LED2pin = D3;
bool LED2status = LOW;
// DHT'yi tanımlıyoruz..
DHT dht(DHTPin, DHTTYPE);
float Temperature;
float Humidity;
void setup() {
Serial.begin(115200);
delay(100);
pinMode(DHTPin, INPUT);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);
dht.begin();
Serial.println("wifi'ya bağlanılıyor ");
Serial.println(ssid);
//yerel ağınıza bağlanmanız için gerekli komut
WiFi.begin(ssid, password);
//bağlantı gerçekleştiğini kontrol ediyoruz
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print("."); //bağlantı sağlanana kadar ekranda "." çıkmasını sağlıyoruz.(Loading gibi)
}
Serial.println("");
Serial.println("WiFi Bağlandı..!");
Serial.print("IP Adresiniz: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect); //Bağlantı sağlandıktan sonra server kontrolleri.
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP Sunucusu Başladı");
}
void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}
if(LED2status)
{digitalWrite(LED2pin, HIGH);}
else
{digitalWrite(LED2pin, LOW);}
}
void handle_OnConnect() {
Temperature = dht.readTemperature(); //
Humidity = dht.readHumidity(); //
LED1status = LOW;
server.send(200, "text/html", SendHTML(Temperature,Humidity,LED1status,LED2status));
}
void handle_led1on() {
LED1status = HIGH;
Serial.println("D2 Durumu: ON");
server.send(200, "text/html", SendHTML(Temperature,Humidity,true,LED2status));
}
void handle_led1off() {
LED1status = LOW;
Serial.println("D2 Durumu: OFF");
server.send(200, "text/html", SendHTML(Temperature,Humidity,false,LED2status));
}
void handle_led2on() {
LED2status = HIGH;
Serial.println("D3 Durumu: ON");
server.send(200, "text/html", SendHTML(Temperature,Humidity,LED1status,true));
}
void handle_led2off() {
LED2status = LOW;
Serial.println("D3 Durumu: OFF");
server.send(200, "text/html", SendHTML(Temperature,Humidity,LED1status,false));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(float Temperaturestat,float Humiditystat,uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP8266 NodeMCU Akilli Ev</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #1abc9c ;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #0095c7;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body bgcolor= BlanchedAlmond style=color:white>\n";
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 NodeMCU Akilli Ev</h1>\n";
ptr +="<p>SICAKLIK: ";
ptr +=(int)Temperaturestat;
ptr +="°C</p>";
ptr +="<p>NEM: ";
ptr +=(int)Humiditystat;
ptr +="%</p>";
if(led1stat)
{ptr +="<p>LED1 Durum: ACIK</p><a class=\"button button-off\" href=\"/led1off\">KAPAT</a>\n";}
else
{ptr +="<p>LED1 Durum: KAPALI</p><a class=\"button button-on\" href=\"/led1on\">AC</a>\n";}
if(led2stat)
{ptr +="<p>LED2 Durum: ACIK</p><a class=\"button button-off\" href=\"/led2off\">KAPAT</a>\n";}
else
{ptr +="<p>LED2 Durum: KAPALI</p><a class=\"button button-on\" href=\"/led2on\">AC</a>\n";}
//Robolink Logo
ptr += "<a target=”_blank” a href='https://www.robolinkmarket.com'>";
ptr += "<br/><br/><img src= 'https://akademi.robolinkmarket.com/wp-content/uploads/2018/10/RLT1_Logo-309×90-Copy.png' Z\" width=\"240\" height=\"70\" alt=\"logo\\\">\n";
ptr += "<br/><br/><iframe width='560' height='315' src='https://www.youtube.com/embed/xSpENoUZJkU' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>" ;
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}
view raw nodemcu-webserver.ino hosted with ❤ by GitHub

Detaylı anlatım için Robolink Teknoloji Youtube kanalındaki videomuzu izlemenizi tavsiye ederim. Sorularınız olursa mutlaka yorum olarak yazın. 🙂 Herkese iyi çalışmalar…

İlgili HaberlerYazarın Diğer İçerikleri

2 YORUMLAR

  1. Blink:3:10: fatal error: DHT.h: No such file or directory
    3 | #include “DHT.h”
    | ^~~~~~~
    compilation terminated.
    exit status 1
    DHT.h: No such file or directory

    Böyle bir hatayla karşılaşıyorum

    • Sadece gerekli kütüphane yok. İnternette birçok DHT11 kütüphanesi var. Bu projede kullanılan kütüphaneyi “Kütüphaneleri Yönet” bölümünden DHT11 yazıp indirebilirsin.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz