Robotik Kodlama: BME280

BME280 etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

29 Haziran 2021 Salı

BME280 Sıcaklık, Nem, Basınç, Yükseklik Sensörü Arduino ile

BME280 ile bir sonraki Arduino projenize etrafındaki dünyayı algılama yeteneği verin . Bu sensörlerin kullanımı oldukça basittir, önceden kalibre edilmiştir ve ekstra bileşen gerektirmez, böylece bağıl nem, sıcaklık, barometrik basınç ve yakl. hiçbir zaman irtifa.

BME280 Sıcaklık, Nem ve Basınç Sensörü

Modülün merkezinde, Bosch tarafından üretilen yeni nesil dijital sıcaklık, nem ve basınç sensörü - BME280 bulunmaktadır. BMP180, BMP085 veya BMP183 gibi sensörlerin en modernidir.

Bu hassas sensör, bağıl nemi ±% 3 doğrulukla% 0 ila% 100, barometrik basıncı ± 1 hPa mutlak doğrulukla ve -40 ° C ila 85 ° C arasındaki sıcaklığı ± 1.0 ° C doğrulukla ölçebilir.

Basınç ölçümleri o kadar hassastır (0,25 m'lik düşük irtifa gürültüsü), ± 1 metre hassasiyetle altimetre olarak bile kullanabilirsiniz.

Güç Gereksinimi

Modül, yerleşik bir LM6206 3.3V regülatörü ve I2C Voltaj Seviye Çeviricisi ile birlikte gelir, böylece Arduino gibi bir 3.3V veya 5V mantık mikrodenetleyicisi ile endişelenmeden kullanabilirsiniz.

BME280 Modül I2C Voltaj Çevirici ve 3.3V Regülatör

BME280, ölçümler sırasında 1mA'dan daha az ve boşta iken yalnızca 5μA tüketir. Bu düşük güç tüketimi, el cihazları, GPS modülleri veya saatler gibi batarya ile çalışan cihazlarda uygulamaya izin verir.

I2C Arayüzü

Modül, seçtiğiniz herhangi bir mikro denetleyiciyle kolayca arabirim oluşturabilen basit bir iki kablolu I2C arabirimine sahiptir.

BME280 modülünün varsayılan I2C adresidir 0x76 HEX ve 0x77 olarak değiştirilebilir HEX çip yanında lehim jumper ile kolayca.

BME280 Modülü I2C Adres Seçici Lehimleme Jumper'ı

I2C Adresini Değiştirme Prosedürü

Çipin yanında lehim bağlantı telini bulun. Varsayılan olarak orta bakır ped sol pede bağlanır.
Keskin bir bıçak kullanarak olanların bağlantısını kesmek için orta ve sol bakır ped arasındaki bağlantıyı çizin.
Orta ve sağ bakır ped arasına bir lehim damlası ekleyin. I2C adresini 0x77 HEX ayarlamanıza izin verir .

BME280 Sensör Pin Çıkışı

BME280 modülü, kendisini dış dünyaya arayüzleyen yalnızca 4 pime sahiptir. Bağlantılar aşağıdaki gibidir:

BME280 Pinout - Sıcaklık Nem Barometrik Basınç Sensörü

VIN modül için 3.3V ila 5V arasında herhangi bir yerde olabilen güç kaynağıdır.

GND Arduino'nun zeminine bağlanmalıdır

SCL I2C arayüzü için bir seri saat pinidir.

SDA I2C arayüzü için bir seri veri pinidir.

BME280 Modülünü Arduino UNO'ya Kablolama

BME280 modülünü Arduino ya bağlayalım.

Bağlantılar oldukça basit. VIN pinini Arduino'daki 5V çıkışına bağlayarak başlayın ve GND'yi toprağa bağlayın.

Şimdi I2C iletişimi için kullanılan pinlerde kaldık. Her Arduino Board'un uygun şekilde bağlanması gereken farklı I2C pinlerine sahip olduğunu unutmayın. R3 düzenine sahip Arduino kartlarında, SDA (veri hattı) ve SCL (saat hattı), AREF pinine yakın pin başlıkları üzerindedir. A5 (SCL) ve A4 (SDA) olarak da bilinirler.

Bir Mega'nız varsa, iğneler farklıdır! Dijital 21 (SCL) ve 20 (SDA) kullanmak isteyeceksiniz. Hızlı anlamak için aşağıdaki tabloya bakın.

	SCL	SDA
Arduino Uno	A5	A4
Arduino Nano	A5	A4
Arduino Mega	21	20
Leonardo / Mikro	3	2

Aşağıdaki şema, her şeyi nasıl bağlayacağınızı gösterir.

Fritzing Kablolama BME280 Modülünü Arduino'ya

BME280 Modülünü Arduino ya Kablolama

Gerekli kitaplıkları yükleme

Bir BME280 modülüyle iletişim kurmak bir sürü iştir. Neyse ki, Adafruit BME280 Kütüphanesi , sıcaklık, bağıl nem ve barometrik basınç verilerini okumak için basit komutlar verebilmemiz için tüm karmaşıklıkları gizlemek için yazılmıştır.

Kitaplığı kurmak için Sketch> Dahil Et> Kitaplıkları Yönet'e gidin … Kitaplık Yöneticisinin kitaplıklar dizinini indirmesini ve kurulu kitaplıkların listesini güncellemesini bekleyin.

Arduino Kitaplığı Kurulumu - Arduino IDE'de Kitaplıkları Yönetmeyi Seçme

Aramanızı ' bme280 ' yazarak filtreleyin . Birkaç giriş olmalı. Arayın Adafruit BME280 Kütüphanesi tarafından Adafruit . Bu girişe tıklayın ve ardından Yükle'yi seçin.

Arduino IDE'de BME280 Kitaplığını Kurmak

BME280 sensör kitaplığı, Adafruit Sensör desteği arka ucunu kullanır . Bu nedenle, kütüphane yöneticisinde Adafruit Unified Sensor'ü arayın ve onu da kurun (biraz kaydırmanız gerekebilir)

Adafruit Birleşik Sensör Kitaplığı Kurulumu

Arduino Kodu - Sıcaklık, Bağıl Nem ve Barometrik Basınç Okuma

Aşağıdaki taslak, BME280 modülünden sıcaklık, bağıl nem ve barometrik basıncın nasıl okunacağı konusunda size tam bir anlayış verecektir ve daha pratik deneyler ve projeler için temel oluşturabilir.

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

void setup() {
	Serial.begin(9600);

	if (!bme.begin(0x76)) {
		Serial.println("Could not find a valid BME280 sensor, check wiring!");
		while (1);
	}
}

void loop() {
	Serial.print("Temperature = ");
	Serial.print(bme.readTemperature());
	Serial.println("*C");

	Serial.print("Pressure = ");
	Serial.print(bme.readPressure() / 100.0F);
	Serial.println("hPa");

	Serial.print("Approx. Altitude = ");
	Serial.print(bme.readAltitude(SEALEVELPRESSURE_HPA));
	Serial.println("m");

	Serial.print("Humidity = ");
	Serial.print(bme.readHumidity());
	Serial.println("%");

	Serial.println();
	delay(1000);
}

Seri monitörde çıkışın nasıl göründüğü aşağıda açıklanmıştır.

BME280 Sıcaklık Nem Basıncı ve Serail Monitörde Yükseklik Çıkışı

Kod Açıklaması:

Taslak, dört kitaplık dahil olmak üzere başlar. Wire.h , SPI.h , Adafruit_Sensor.h ve Adafruit_BME280.h .

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Ardından, SEALEVELPRESSURE_HPArakımı hesaplamak için gerekli değişkeni tanımlıyoruz ve onunla ilgili işlevlere erişebilmemiz için Adafruit_BME280 kitaplığının bir nesnesini oluşturuyoruz.

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

Kodun kurulum bölümünde PC ile seri iletişimi başlatıyoruz ve begin()fonksiyonu çağırıyoruz .

begin(I2C_ADDR)İşlev parametre olarak modülün I2C adresi alır. Modülünüzün I2C adresi farklıysa veya değiştirdiyseniz , doğru şekilde belirtmeniz gerekir. Bu işlev, verilen I2C Adresiyle I2C arayüzünü başlatır ve çip kimliğinin doğru olup olmadığını kontrol eder. Ardından, yumuşak sıfırlama kullanarak çipi sıfırlar ve uyandıktan sonra kalibrasyon için sensör için bekler.

Serial.begin(9600);

if (!bme.begin(0x76)) {
	Serial.println("Could not find a valid BME280 sensor, check wiring!");
	while (1);
}

Kodun döngü bölümünde, BME280 modülünden sıcaklık, bağıl nem ve barometrik basıncı okumak için aşağıdaki işlevleri kullanıyoruz.

readTemperature () işlevi, sensörden sıcaklığı döndürür.

readPressure () işlevi sensörden barometrik basıncı döndürür.

readAltitude (SEALEVELPRESSURE_HPA) işlevi, belirtilen atmosferik basınçtan (hPa cinsinden) ve deniz seviyesi basıncından (hPa cinsinden) yüksekliği (metre cinsinden) hesaplar.

readHumidity () işlevi sensörden bağıl nemi döndürür.

Serial.print("Temperature = ");
Serial.print(bme.readTemperature());
Serial.println("*C");

Serial.print("Pressure = ");
Serial.print(bme.readPressure() / 100.0F);
Serial.println("hPa");

Serial.print("Approx. Altitude = ");
Serial.print(bme.readAltitude(SEALEVELPRESSURE_HPA));
Serial.println("m");

Serial.print("Humidity = ");
Serial.print(bme.readHumidity());
Serial.println("%");

ANA SAYFAYA DÖN
Bahadır ÖZGEN
Electronic Robotic Coding Research and Development 1975 - ∞
Learn Forever
If you want, let's learn together...
https://roboticcode2020.blogspot.com/
bahadirozgen1975@gmail.com
facebook    robotic.code
instagram    @roboticcode

Sayfalarımı ziyaret ettiğiniz için teşekkür ederim.Bu sitede mevcut olan içerikler kendi oluşturduğum projeler yazı,resim ve videolardan oluşmaktadır.İçerik oluşturmak çok uzun sürdüğü için bazı projelerde yurtdışı kaynaklardan faydalandım.Buradaki amacım ticari değildir.Kaynağı belli olan ve bizim kaynağına ulaşabildiğimiz materyal (yazı, fotoğraf, resim, video v.b.) için ilgili konularda fotoğraflarda logo varsa v.b. not olarak gösterilecektir.Sitemizde yayınlanan tüm içerik, bizim tarafımızdan ve internet üzerinden youtube, facebook ve blog gibi paylaşıma sunulmuş kaynak sitelerden alındığı için, sitemiz yasal yükümlülüğe tabi tutulamaz. Sitemizde telif haklarının size ait olduğu bir içerik varsa ve bunu kaldırmamızı isterseniz, iletişim sayfamızdan bizimle iletişime geçtiğiniz takdirde içerik yayından kaldırılacaktır.Bu konu ve modüller ile uğraşarak, ileride çok güzel makine ve elektronik aletler yapabilirsiniz.

4 Mayıs 2021 Salı

BME280 ile Basit Bir ESP8266 Hava İstasyonu

Akıllı telefon hava durumu uygulamalarının veya ticari hava istasyonlarının (sizi kilometrelerce uzaktaki istasyonlardan gelen verilerle besleyen) dış mekan planlarınızı mahvetmesine izin vermeyin. Bu IoT projesi ile kendi hava durumu uzmanınız olabilirsiniz!

Bu proje, mevcut WiFi ağına kolayca bağlanan ve bir Web Sunucusu oluşturan kontrol cihazı olarak ESP8266 NodeMCU'yu kullanır. Bağlı herhangi bir cihaz bu web sunucusuna eriştiğinde, ESP8266 BME280'den sıcaklık, nem, barometrik basınç ve irtifa değerlerini okur ve güzel bir arayüzle bu cihazın web tarayıcısına gönderir.

BME280 Sıcaklık, Nem ve Basınç Sensörü

Öncelikle BME280 modülüne hızlıca bir göz atalım.

BME280, Bosch tarafından üretilen yeni nesil dijital sıcaklık, nem ve basınç sensörüdür. BMP180, BMP085 veya BMP183 gibi sensörlerin halefidir.

BME280 Sıcaklık Nem Basınç Yükseklik Sensörü Özellikleri

BME280 modülünün çalışma voltajı 3,3V ila 5V arasındadır - ESP8266 gibi 3,3V mikro denetleyicilerle arayüz oluşturmak için mükemmeldir.

Modül , iletişim için basit bir iki kablolu I2C arayüzüne sahiptir . BME280 modülünün varsayılan I2C adresi 0x76'dır ve bu prosedürle kolayca 0x77 olarak değiştirilebilir .

BME280 Sensörünün ESP8266 NodeMCU'ya Kablolanması

Bağlantılar oldukça basit. ESP8266 NodeMCU üzerindeki 3,3V çıkışa VIN pinini bağlayarak başlayın ve GND'yi toprağa bağlayın .

Ardından, SCL pinini ESP8266'nızdaki I2C clock D1 pinine bağlayın ve SDA pinini ESP8266'nızdaki I2C data D2 pinine bağlayın.

Aşağıdaki şema, her şeyi nasıl bağlayacağınızı gösterir.

Fritzing Wiring ESP8266 ve BME280 Sıcaklık Nem Basınç Sensörü — Kablolama ESP8266 ve BME280 Sıcaklık Nem Basınç Sensörü

Arduino IDE için, Arduino IDE'yi kullanarak ESP8266 NodeMCU'yu programlamanıza izin veren bir eklenti var.

BME280 için Kitaplığı Yükleme

Kitaplığı kurmak için Arduino IDE> Taslak> Kitaplığı Dahil Et> Kitaplıkları Yönet'e gidin… Kitaplık Yöneticisinin kitaplıklar dizinini indirmesini ve kurulu kitaplıkların listesini güncellemesini bekleyin.Aramanızı ' bme280 ' yazarak filtreleyin . Birkaç giriş olmalı. Arayın Adafruit BME280 Kütüphanesi tarafından Adafruit . Bu girişe tıklayın ve ardından Yükle'yi seçin.

ESP8266 Web Sunucusunda Sıcaklık, Nem, Basınç ve Rakımı Görüntüleme

Şimdi, ESP8266'mızı İstasyon (STA) moduna yapılandıracağız ve web sayfalarını mevcut ağ altındaki herhangi bir bağlı istemciye sunmak için bir web sunucusu oluşturacağız.

AP / STA modunda ESP8266 ile bir web sunucusu oluşturmayı öğrenmek istiyorsanız, bu eğiticiye göz atın.Krokiyi yüklemeye başlamadan önce, işinize yaraması için bir değişiklik yapmanız gerekir. ESP8266'nın mevcut ağ ile bağlantı kurabilmesi için aşağıdaki iki değişkeni ağ kimlik bilgilerinizle değiştirmeniz gerekir.

const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

İşiniz bittiğinde, devam edin ve taslağı deneyin.

#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);              
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  bme.begin(0x76);   

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

}
void loop() {
  server.handleClient();
}

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  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 Weather Station</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 +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>ESP8266 Weather Station</h1>\n";
  ptr +="<p>Temperature: ";
  ptr +=temperature;
  ptr +="&deg;C</p>";
  ptr +="<p>Humidity: ";
  ptr +=humidity;
  ptr +="%</p>";
  ptr +="<p>Pressure: ";
  ptr +=pressure;
  ptr +="hPa</p>";
  ptr +="<p>Altitude: ";
  ptr +=altitude;
  ptr +="m</p>";
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Web Sunucusuna Erişim

Krokiyi yükledikten sonra 115200 baud hızında Seri Monitörü açın. Ve NodeMCU üzerindeki EN düğmesine basın. Her şey yolundaysa, yönlendiricinizden alınan dinamik IP adresini çıkaracak ve HTTP sunucusu başlatıldı mesajını gösterecektir .

Seri Monitörde ESP8266 İstasyon Modu Web Sunucusu IP Adresi

Ardından, bir tarayıcı yükleyin ve seri monitörde gösterilen IP adresine yönlendirin. ESP8266, BME280'den sıcaklık, nem, basınç ve rakımı gösteren bir web sayfası sunmalıdır.

ESP8266 Web Sunucusunda BME280 Okumaları

Ayrıntılı Kod Açıklaması

Çizim, aşağıdaki kitaplıkları dahil ederek başlar.

ESP8266WebServer.h kitaplığı, ağa bağlanmak için çağırdığımız ESP8266'ya özgü WiFi yöntemlerini sağlar. Ayrıca, düşük seviyeli uygulama ayrıntıları hakkında endişelenmenize gerek kalmadan bir sunucu kurmamıza ve gelen HTTP isteklerini işlememize yardımcı olacak bazı yöntemler de mevcuttur.
Wire.h kitaplığı yalnızca BME280 ile değil, herhangi bir I2C cihazıyla iletişim kurar.
Adafruit_BME280.h & Adafruit_Sensor.h kitaplıkları, daha düşük seviyeli işlevleri işleyen donanıma özgü kitaplıklardır.

#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Daha sonra sıcaklık, nem, basınç ve yüksekliği depolamak için sensör ve değişkenlerin bir nesnesini oluşturuyoruz.

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

ESP8266'yı İstasyon (STA) modunda yapılandırırken, mevcut WiFi ağına katılacaktır. Bu nedenle, ona ağınızın SSID ve Parolasını sağlamamız gerekir. Daha sonra web sunucusunu 80 numaralı bağlantı noktasından başlatıyoruz.

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);

İç Kurulum () İşlevi

Kurulum () Fonksiyonu İçinde HTTP sunucumuzu çalıştırmadan önce yapılandırıyoruz.

Öncelikle, PC ile seri iletişimi başlatıyoruz ve begin()fonksiyon kullanarak BME nesnesini başlatıyoruz . Verilen I2C Adresi (0x76) ile I2C arayüzünü başlatır ve çip kimliğinin doğru olup olmadığını kontrol eder. Ardından, yumuşak sıfırlama kullanarak çipi sıfırlar ve uyandıktan sonra kalibrasyon için sensör için bekler.

Serial.begin(115200);
delay(100);

bme.begin(0x76);

Şimdi, WiFi.begin()işlevi kullanarak WiFi ağına katılmamız gerekiyor . İşlev, parametre olarak SSID (Ağ Adı) ve parolayı alır.

Serial.println("Connecting to ");
Serial.println(ssid);

//connect to your local wi-fi network
WiFi.begin(ssid, password);

ESP8266 ağa bağlanmaya çalışırken, WiFi.status () işlevi ile bağlantı durumunu kontrol edebiliriz .

//check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

ESP8266 ağa bağlandıktan sonra, çizim, WiFi.localIP()değeri seri monitörde görüntüleyerek ESP8266'ya atanan IP adresini yazdırır .

Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

Gelen HTTP isteklerini işlemek için, bir URL'ye basıldığında hangi kodun çalıştırılacağını belirtmemiz gerekir. Bunu yapmak için yöntem kullanırız . Bu yöntem iki parametre alır. Birincisi bir URL yolu ve ikincisi, o URL'ye ulaşıldığında yürütmek istediğimiz fonksiyonun adıdır.

Aşağıdaki kod, bir sunucu kök ( / ) yolunda bir HTTP isteği aldığında handle_OnConnectişlevi tetikleyeceğini belirtir . Belirtilen URL'nin göreli bir yol olduğuna dikkat edin.

server.on("/", handle_OnConnect);

İstemci, ile belirtilenden farklı bir URL isterse sunucunun ne yapması gerektiğini belirtmedik server.on. Bir HTTP durumu 404 (Bulunamadı) ve kullanıcı için bir mesajla yanıt vermelidir. Bunu da bir işleve koyarız ve server.onNotFoundona belirtilmemiş bir URL için istek aldığında yürütmesi gerektiğini söylemek için kullanırız .server.on

server.onNotFound(handle_NotFound);

Şimdi, sunucumuzu başlatmak için, sunucu nesnesi üzerinde başlangıç yöntemini çağırıyoruz.

server.begin();
Serial.println("HTTP server started");

Inside Loop () Fonksiyonu

Gerçek gelen HTTP isteklerini işlemek için, handleClient()yöntemi sunucu nesnesinde çağırmamız gerekir .

server.handleClient();

Daha sonra, server.onhatırladın mı? İle kök (/) URL'ye eklediğimiz bir işlev oluşturmamız gerekiyor.

Bu fonksiyonun başlangıcında sensörden sıcaklık, nem, basınç ve yükseklik okumalarını alıyoruz. HTTP isteğine yanıt vermek için gönderme yöntemini kullanıyoruz. Yöntem farklı bir bağımsız değişken kümesiyle çağrılabilse de, en basit biçimi HTTP yanıt kodu, içerik türü ve içerikten oluşur.Bizim durumumuzda, Tamam yanıtına karşılık gelen 200 kodunu ( HTTP durum kodlarından biri) gönderiyoruz . Ardından, içerik türünü "text / html" olarak belirliyoruz ve son olarak , sıcaklık, nem, basınç ve yükseklik okumalarını içeren dinamik bir HTML sayfası oluşturan özel işlevi çağırıyoruz .SendHTML()

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

Aynı şekilde 404 Hata sayfasını işlemek için bir fonksiyon oluşturmamız gerekiyor.

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

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

SendHTML()işlevi, ESP8266 web sunucusu bir web istemcisinden bir istek aldığında bir web sayfası oluşturmaktan sorumludur. Yalnızca HTML kodunu büyük bir dizeye birleştirir ve server.send()daha önce tartıştığımız işleve geri döner . İşlev, HTML içeriğini dinamik olarak oluşturmak için sıcaklık, nem, basınç ve yükseklik okumalarını bir parametre olarak alır.

Her zaman göndermeniz gereken ilk metin, HTML kodu gönderdiğimizi belirten <! DOCTYPE> beyanıdır.

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html> <html>\n";

Daha sonra, <meta> görüntü alanı öğesi, web sayfasını herhangi bir web tarayıcısında duyarlı hale getirirken, başlık etiketi sayfanın başlığını belirler.

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP8266 Weather Station</title>\n";

Web Sayfasını Biçimlendirme

Ardından, web sayfası görünümünü şekillendirmek için biraz CSS'miz var. Helvetica yazı tipini seçiyoruz, görüntülenecek içeriği satır içi blok olarak tanımlıyoruz ve ortaya hizalıyoruz.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

Aşağıdaki kod gövde, H1 ve p etiketlerinin etrafındaki rengi, yazı tipini ve kenar boşluğunu ayarlar.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";

Web Sayfası Başlığını Ayarlama

Ardından web sayfasının başlığı belirlenir; bu metni uygulamanıza uygun herhangi bir şekilde değiştirebilirsiniz.

ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 Weather Station</h1>\n";

Okumaları Web Sayfasında Görüntüleme

Sıcaklık, nem, basınç ve yükseklik okumalarını dinamik olarak görüntülemek için bu değerleri paragraf etiketine koyarız. Derece sembolünü görüntülemek için HTML entity & deg;

ptr +="<p>Temperature: ";
ptr +=temperature;
ptr +="&deg;C</p>";
ptr +="<p>Humidity: ";
ptr +=humidity;
ptr +="%</p>";
ptr +="<p>Pressure: ";
ptr +=pressure;
ptr +="hPa</p>";
ptr +="<p>Altitude: ";
ptr +=altitude;
ptr +="m</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

Web Sayfasını Daha Profesyonel Görünecek Şekilde Şekillendirme

Bizim gibi programcılar genellikle tasarımdan korkar - ancak biraz çaba, web sayfanızın daha çekici ve profesyonel görünmesini sağlayabilir. Aşağıdaki ekran görüntüsü size ne yapacağımız hakkında temel bir fikir verecektir.

ESP8266 Web Sunucusunda BME280 Okumaları - Profesyonel Görünüm

Oldukça şaşırtıcı, değil mi? Daha fazla uzatmadan, önceki HTML sayfamıza biraz stil uygulayalım. Başlamak için, SendHTML()yukarıdaki çizimden işlevi değiştirmek için aşağıdaki kodu kopyalayıp yapıştırın .

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP8266 Weather Station</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP8266 Weather Station</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

Bu işlevi bir öncekiyle karşılaştırmaya çalışırsanız, bu değişiklikler dışında benzer olduklarını anlarsınız.

Web sayfamız için Google tarafından yaptırılan Open Sans web fontunu kullandık. Cihazda aktif internet bağlantısı olmadan Google yazı tipini göremeyeceğinizi unutmayın. Google yazı tipleri anında yüklenir.
```
ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
```
Sıcaklık, nem, basınç ve yükseklik okumalarını görüntülemek için kullanılan simgeler aslında <svg> etiketinde tanımlanan Ölçeklenebilir Vektör Grafikleridir (SVG). SVG oluşturmak, herhangi bir özel programlama becerisi gerektirmez. Sayfanız için grafikler oluşturmak için Google SVG Editör'ü kullanabilirsiniz . Bu SVG simgelerini kullandık.

Kodda İyileştirme - Otomatik Sayfa Yenileme

Kodumuzla yapabileceğiniz iyileştirmelerden biri, sensör değerini güncellemek için sayfayı otomatik olarak yenilemektir.

HTML belgenize tek bir meta etiket eklenerek, tarayıcıya sayfayı belirli bir aralıkta otomatik olarak yeniden yüklemesi talimatını verebilirsiniz.

<meta http-equiv="refresh" content="2" >

Bu kodu belgenizin <head> etiketine yerleştirin, bu meta etiket tarayıcıya her iki saniyede bir yenileme talimatı verecektir. Oldukça şık!

Sensör Verilerini AJAX ile dinamik olarak yükleyin

Yoğun bir web sayfanız varsa bir web sayfasını yenilemek çok pratik değildir. Sayfayı yenilemeden sunucudan eşzamansız olarak (arka planda) veri talep edebilmemiz için Eşzamansız Javascript Ve Xml ( AJAX ) kullanmak daha iyi bir yöntemdir .

XMLHttpRequest JavaScript içindeki nesne genellikle web sayfalarında AJAX çalıştırmak için kullanılır. Sessiz GET isteğini sunucu üzerinde gerçekleştirir ve sayfadaki elemanı günceller. AJAX yeni bir teknoloji veya farklı bir dil değil, sadece yeni şekillerde kullanılan mevcut teknolojilerdir. AJAX, bunun yanı sıra şunları da mümkün kılar:

Sayfa yüklendikten sonra bir sunucudan veri isteyin
Sayfa yüklendikten sonra bir sunucudan veri alın
Arka planda bir sunucuya veri gönderin

İşte kullanacağımız AJAX betiği. Bu komut dosyasını </head> etiketini kapatmadan hemen önce yerleştirin.

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";

Komut dosyası <script> etiketiyle başlar. AJAX betiği bir javascript'ten başka bir şey olmadığı için, onu <script> etiketi ile yazmamız gerekiyor. Bu işlevin tekrar tekrar çağrılması için javascript setInterval()işlevini kullanacağız . İki parametre alır - yürütülecek bir işlev ve işlevin ne sıklıkla çalıştırılacağına ilişkin zaman aralığı (milisaniye cinsinden).

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";

Bu betiğin kalbi bir loadDoc()işlevdir. Bu işlevin içinde bir XMLHttpRequest()nesne oluşturulur. Bu nesne, bir web sunucusundan veri talep etmek için kullanılır.

ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";

xhttp.onreadystatechange()Fonksiyon readyState her değiştirdiğinde denir. ReadyState özelliği, XMLHttpRequest'in durumunu tutar. Aşağıdaki değerlerden birine sahiptir.

0: istek başlatılmadı
1: sunucu bağlantısı kuruldu
2: istek alındı
3: işleme isteği
4: istek tamamlandı ve yanıt hazır

Status özelliği, XMLHttpRequest nesnesinin durumunu tutar. Aşağıdaki değerlerden birine sahiptir.

200: "Tamam"
403 yasak"
404 Sayfa Bulunamadı"

ReadyState 4 ve durum 200 olduğunda, yanıt hazırdır. Şimdi, vücut içeriği (tutma sıcaklığı okumaları) güncellenir.

ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";

HTTP isteği daha sonra open () ve send () işlevleri aracılığıyla başlatılır.

ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";

ANA SAYFAYA DÖN
Bahadır ÖZGEN
Electronic Robotic Coding Research and Development 1975 - ∞
Learn Forever
If you want, let's learn together...
https://roboticcode2020.blogspot.com/
bahadirozgen1975@gmail.com
facebook    robotic.code
instagram    @roboticcode

Sayfalarımı ziyaret ettiğiniz için teşekkür ederim.Bu sitede mevcut olan içerikler kendi oluşturduğum projeler yazı,resim ve videolardan oluşmaktadır.İçerik oluşturmak çok uzun sürdüğü için bazı projelerde yurtdışı kaynaklardan faydalandım.Buradaki amacım ticari değildir.Kaynağı belli olan ve bizim kaynağına ulaşabildiğimiz materyal (yazı, fotoğraf, resim, video v.b.) için ilgili konularda fotoğraflarda logo varsa v.b. not olarak gösterilecektir.Sitemizde yayınlanan tüm içerik, bizim tarafımızdan ve internet üzerinden youtube, facebook ve blog gibi paylaşıma sunulmuş kaynak sitelerden alındığı için, sitemiz yasal yükümlülüğe tabi tutulamaz. Sitemizde telif haklarının size ait olduğu bir içerik varsa ve bunu kaldırmamızı isterseniz, iletişim sayfamızdan bizimle iletişime geçtiğiniz takdirde içerik yayından kaldırılacaktır.Bu konu ve modüller ile uğraşarak, ileride çok güzel makine ve elektronik aletler yapabilirsiniz.

Robotik Kodlama

İLGİNİZİ ÇEKEBİLECEK LİNKLER :

29 Haziran 2021 Salı

BME280 Sıcaklık, Nem, Basınç, Yükseklik Sensörü Arduino ile

BME280 Sıcaklık, Nem, Basınç, Yükseklik Sensörü Arduino ile

BME280 Sıcaklık, Nem ve Basınç Sensörü

Güç Gereksinimi

I2C Arayüzü

I2C Adresini Değiştirme Prosedürü

BME280 Sensör Pin Çıkışı

BME280 Modülünü Arduino UNO'ya Kablolama

Gerekli kitaplıkları yükleme

Arduino Kodu - Sıcaklık, Bağıl Nem ve Barometrik Basınç Okuma

Kod Açıklaması:

4 Mayıs 2021 Salı

BME280 ile Basit Bir ESP8266 Hava İstasyonu

BME280 ile Basit Bir ESP8266 Hava İstasyonu

BME280 Sıcaklık, Nem ve Basınç Sensörü

BME280 Sensörünün ESP8266 NodeMCU'ya Kablolanması

ESP8266 Web Sunucusunda Sıcaklık, Nem, Basınç ve Rakımı Görüntüleme

Web Sunucusuna Erişim

Ayrıntılı Kod Açıklaması

İç Kurulum () İşlevi

Inside Loop () Fonksiyonu

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

Web Sayfasını Biçimlendirme

Web Sayfası Başlığını Ayarlama

Okumaları Web Sayfasında Görüntüleme

Web Sayfasını Daha Profesyonel Görünecek Şekilde Şekillendirme

Kodda İyileştirme - Otomatik Sayfa Yenileme

Sensör Verilerini AJAX ile dinamik olarak yükleyin