ESP8266 Web Server 1
ESP8266 kullanarak bir web server yapalım. Hazırladığımız bir web sayfasını yayınlasın.
Kullanılan Programlar : Arduino Ide 1.8.9
ESP8266, Arduino IDE'nin standard kurulumunda gelmiyor bunun için ön hazırlık yapmalıyız.
Dosya>Tercihler menüsünden Ek Devre Kartları Yöneticisi URL'leri kısmına aşağıdaki adresi ekleyelim.
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Daha sonra Araçlar>Kart>Kart Yöneticisinden ESP8266'yı bulup kuralım:
Daha sonra kullanacağımız tek kütüphane olan ESP8266WebServer'ı eklememiz gerekiyor. Taslak>library ekle>libraryleri düzenle
Arduino Ide Kodları:
/*
* ESP8266 ile
* İlk Web Sayfam
* Kodla Gitsin
*/
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include "index.h" //html kodlarınızı index.h dosyası içine yazınız
//Ağınızın (büyük bir ihtimalle evinizdeki): SSID(ağ adınız) ve Password(şifreniz)
const char* ssid = "ağ_adı";
const char* password = "şifre";
ESP8266WebServer server(80); //Sunucu => port 80
//===============================================================
// Bu yordam IP'inizi tarayıcıda açtığınızda yürütülür.
//===============================================================
void handleRoot() {
String s = MAIN_page; //HTML içeriğini oku
server.send(200, "text/html", s); // web sayfasını gönder
}
//==============================================================
// SETUP (Kurulum/Ayarlar)
//==============================================================
void setup(void){
Serial.begin(9600);
WiFi.begin(ssid, password); // WiFi yönlendiricinize bağlanın
Serial.println("");
// Bağlantı için bekleyin
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
//Bağlantı başarılıysa, IP adresini seri monitörde göster
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); //ESP'nize atanan IP adresi
server.on("/", handleRoot); //Kök konumunda hangi rutinin işlenmesi gerektiği
server.begin(); //Sunucuyu başlat
Serial.println("HTTP server started");
}
//==============================================================
// LOOP(DÖNGÜ)
//==============================================================
void loop(void){
server.handleClient(); //İstemci isteklerini işleme al
}
index.h dosyası:
const char MAIN_page[] PROGMEM = R"=====(
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Kodla Gitsin</title>
</head>
<body>
<center>
<b><br>ESP8266 ile Web Sunucusu<br></b>
<br>İlk web sayfam<br>
<br>Türkçe Karakterler:
<br> ı - ü - ö - ş - ğ
<br>Örnek: ilhan - yüksel - ışık - ömür - uğur<br>
<br>
<b><br>Kodla Gitsin<br></b>
<b><br>kodlagitsin.blogspot.com<br></b>
<b><br>kodlagitsin ==> youtube<br></b>
<br>
<canvas id="cnTuval" width="200" height="200" style="border:1px solid red">
Tarayıcınız HTML5 desteklemiyor
</canvas><br />
<input type="button" value="Mavi" onclick="ciz()" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(
100, // Merkez noktasının yatay konumu
100, // Merkez noktasının dikey konumu
70, // Yarıçap uzunluğu
0, // Başlangıç açısı
Math.PI * 2 // Bitiş açısı
);
ctx.stroke();
}
</script>
<input type="button" value="Kırmızı" onclick="boya()" />
<script>
function boya() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(
100, // Merkez noktasının yatay konumu
100, // Merkez noktasının dikey konumu
70, // Yarıçap uzunluğu
0, // Başlangıç açısı
Math.PI * 2 // Bitiş açısı
);
ctx.stroke();
}
</script>
<input type="button" value="Yeşil" onclick="yesil()" />
<script>
function yesil() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(
100, // Merkez noktasının yatay konumu
100, // Merkez noktasının dikey konumu
70, // Yarıçap uzunluğu
0, // Başlangıç açısı
Math.PI * 2 // Bitiş açısı
);
ctx.stroke();
}
</script>
<input type="button" value="Yaz" onclick="Yaz()" />
<script>
function Yaz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
ctx.fillStyle = "red";
ctx.font = "bold 20px Arial";
// x=40, y=110 konumunda kırmızı (dolgu stiliyle) "Kodla Gitsin" metnini görüntüle
ctx.fillText("Kodla Gitsin", 40, 110);
}
</script>
<input type="button" value="Sayfayı Yenile" onClick="document.location.reload(true)">
</center>
</body>
</html>
)=====";
Merhaba.Çalışmalarınızı takip ediyorum. Başarılar dilerim. Sizden ufak bi ricam olacak. Sizin esp-01 acces point çalışmanızı 2 röle ve dht11 ile birleştirerek proje yapmak istiyorum. Çeşitli maker bloglarından kod denemeleri yaptım ama olmadı. Kodlama da yardımcı olabilirmisiniz.
YanıtlaSil