Robotik Kodlama

Robotik Kodlama
Ana Sayfa

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

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

4 Mayıs 2021 Salı

BME280 ile Basit Bir ESP8266 Hava İstasyonu

 

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'yi hazırlama

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

BME280 için Kitaplığı 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 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.

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

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.
    SVG Simgeleri

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.
at Hiç yorum yok:
Labels: , ,
Kaydol: Kayıtlar (Atom)