ESP8266 NodeMCU Web Sunucusunda Çoklu DS18B20 den veri okuma

Evinizin ve bahçenizin her yerine dağılmış sensörlerin sıcaklıklarını düzenli olarak merkezi bir sunucuya bildirmesini istediniz mi? O halde, bu IoT projesi sizin için sağlam bir başlangıç ​​noktası olabilir!

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 birden fazla DS18B20 Sıcaklık sensöründen sıcaklığı okur ve güzel bir arayüzle bu cihazın web tarayıcısına gönderir. 

Tek Veriyolunda Çoklu DS18B20'ler

DS18B20'nin en büyük özelliklerinden biri, birden fazla DS18B20'nin aynı 1-Wire veri yolunda bir arada bulunabilmesidir. Her bir DS18B20, fabrikada yazılmış benzersiz bir 64 bit seri koduna sahip olduğundan , bunları birbirinden ayırt etmek daha kolaydır.Bu özellik, geniş bir alana dağılmış birçok DS18B20'yi kontrol etmek istediğinizde büyük bir avantaj olabilir. Bu eğitimde biz de aynısını yapacağız.

DS18B20 sensörlerini ESP8266 NodeMCU'ya bağlamak oldukça basittir.

Tüm DS18B20'leri paralel bağlayarak başlayın, yani tüm VDD pinlerini, GND pinlerini ve sinyal pinlerini ortak kullanın. Ardından VDD'yi 3.3V çıkışa, GND'yi toprağa bağlayın ve sinyal pinini ESP8266 NodeMCU üzerindeki dijital pin D2'ye bağlayın.

Ardından, veri aktarımını sabit tutmak için sinyal ve güç pimi arasına tüm veri yolu için bir adet 4.7k çekme direnci eklemeniz gerekir .

Birden Fazla DS18B20 Sıcaklık Sensörünün ESP8266'ya Kablolanması

DS18B20 için Kitaplığı Yükleme

Dallas 1-Wire protokolü biraz karmaşıktır ve iletişimi ayrıştırmak için bir sürü kod gerektirir. Bu gereksiz karmaşıklığı gizlemek için DallasTemperature.h kitaplığını yükleyeceğiz, böylece sensörden sıcaklık okumaları almak için basit komutlar verebiliriz.

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ı ' ds18b20 ' yazarak filtreleyin . Birkaç giriş olmalı. Miles Burton tarafından yazılan DallasTemperature'ı arayın . Bu girişe tıklayın ve ardından Yükle'yi seçin.

Bu Dallas Temperature kitaplığı, daha düşük seviyeli işlevleri işleyen donanıma özgü bir kitaplıktır. Yalnızca DS18B20 ile değil, herhangi bir tek kablolu cihazla iletişim kurmak için Tek Telli Kitaplık ile eşleştirilmesi gerekir. Bu kitaplığı da kurun.

Otobüste DS18B20'lerin Adreslerini Bulma

Her bir DS18B20'nin, onları birbirinden ayırmak için kendisine atanmış benzersiz bir 64 bit adrese sahip olduğunu biliyoruz. İlk olarak, her bir sensörü uygun şekilde etiketlemek için bu adresi bulacağız . Adres daha sonra her bir sensörü ayrı ayrı okumak için kullanılabilir .

Aşağıdaki çizim, veri yolunda bulunan tüm DS18B20'leri algılar ve tek kablolu adreslerini seri monitöre yazdırır.Adresini bulmak için her seferinde yalnızca bir sensör bağlayabilirsiniz (veya art arda yeni bir sensör ekleyebilirsiniz), böylece her birini adresiyle tanımlayabilirsiniz. Ardından her bir sensörü etiketleyebilirsiniz.

#include <OneWire.h>
#include <DallasTemperature.h>

// Data wire is plugged into port D2 on the ESP8266
#define ONE_WIRE_BUS D2

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

// variable to hold device addresses
DeviceAddress Thermometer;

int deviceCount = 0;

void setup(void)
{
  // start serial port
  Serial.begin(115200);

  // Start up the library
  sensors.begin();

  // locate devices on the bus
  Serial.println("Locating devices...");
  Serial.print("Found ");
  deviceCount = sensors.getDeviceCount();
  Serial.print(deviceCount, DEC);
  Serial.println(" devices.");
  Serial.println("");
  
  Serial.println("Printing addresses...");
  for (int i = 0;  i < deviceCount;  i++)
  {
    Serial.print("Sensor ");
    Serial.print(i+1);
    Serial.print(" : ");
    sensors.getAddress(Thermometer, i);
    printAddress(Thermometer);
  }
}

void loop(void)
{ }

void printAddress(DeviceAddress deviceAddress)
{ 
  for (uint8_t i = 0; i < 8; i++)
  {
    Serial.print("0x");
    if (deviceAddress[i] < 0x10) Serial.print("0");
    Serial.print(deviceAddress[i], HEX);
    if (i < 7) Serial.print(", ");
  }
  Serial.println("");
}

Şimdi, seri monitörü açın. Aşağıdaki gibi bir şey almalısınız.

İhtiyacımız olan tüm adresleri bir sonraki taslağa kopyalayın.

ESP8266 Web Sunucusu In Station (STA) modu oluşturun

Ş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.

Krokiyi yüklemeye başlamadan önce, işinize yaraması için bazı değişiklikler 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

• Bir web sayfasını sunmadan önce ESP8266, her bir DS18B20'deki sıcaklığı adresine göre okur, bu nedenle DS18B20'lerin adreslerini önceki çizimde bulduğunuzla değiştirmeniz gerekir.

  uint8_t sensor1[8] = { 0x28, 0xEE, 0xD5, 0x64, 0x1A, 0x16, 0x02, 0xEC };
  uint8_t sensor2[8] = { 0x28, 0x61, 0x64, 0x12, 0x3C, 0x7C, 0x2F, 0x27 };
  uint8_t sensor3[8] = { 0x28, 0x61, 0x64, 0x12, 0x3F, 0xFD, 0x80, 0xC6 };

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

#include <ESP8266WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>

// Data wire is plugged into port D2 on the ESP8266
#define ONE_WIRE_BUS D2

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

float tempSensor1, tempSensor2, tempSensor3;

uint8_t sensor1[8] = { 0x28, 0xEE, 0xD5, 0x64, 0x1A, 0x16, 0x02, 0xEC  };
uint8_t sensor2[8] = { 0x28, 0x61, 0x64, 0x12, 0x3C, 0x7C, 0x2F, 0x27  };
uint8_t sensor3[8] = { 0x28, 0x61, 0x64, 0x12, 0x3F, 0xFD, 0x80, 0xC6  };

/*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);
  
  sensors.begin();              

  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() {
  sensors.requestTemperatures();
  tempSensor1 = sensors.getTempC(sensor1); // Gets the values of the temperature
  tempSensor2 = sensors.getTempC(sensor2); // Gets the values of the temperature
  tempSensor3 = sensors.getTempC(sensor3); // Gets the values of the temperature
  server.send(200, "text/html", SendHTML(tempSensor1,tempSensor2,tempSensor3)); 
}

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

String SendHTML(float tempSensor1,float tempSensor2,float tempSensor3){
  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 Temperature Monitor</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 Temperature Monitor</h1>\n";
  ptr +="<p>Living Room: ";
  ptr +=tempSensor1;
  ptr +="&deg;C</p>";
  ptr +="<p>Bedroom: ";
  ptr +=tempSensor2;
  ptr +="&deg;C</p>";
  ptr +="<p>Kitchen: ";
  ptr +=tempSensor3;
  ptr +="&deg;C</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 RST 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 .

Ardından, bir tarayıcı yükleyin ve seri monitörde gösterilen IP adresine yönlendirin. ESP8266, tüm DS18B20'lerden sıcaklıkları gösteren bir web sayfası sunmalıdır.

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.
• DallasTemperature.h kitaplığı, daha düşük düzeyli işlevleri işleyen donanıma özgü bir kitaplıktır. Çalışması için One Wire Library ile eşleştirilmesi gerekir.
• OneWire.h kitaplığı, yalnızca DS18B20 ile değil, herhangi bir tek kablolu cihazla iletişim kurar.

#include <ESP8266WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>

Daha sonra sıcaklık sensörü ve değişkenlerin sıcaklık okumalarını depolaması için gereken örnekleri oluşturuyoruz. Sıcaklık sensörü GPIO D2'ye bağlanır.

// Data wire is plugged into port D2 on the ESP8266
#define ONE_WIRE_BUS D2

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

float tempSensor1, tempSensor2, tempSensor3;

Ardından, her bir sıcaklık sensörü için önceden bulunan adresleri giriyoruz. Bizim durumumuzda aşağıdakilere sahibiz.

uint8_t sensor1[8] = { 0x28, 0xEE, 0xD5, 0x64, 0x1A, 0x16, 0x02, 0xEC  };
uint8_t sensor2[8] = { 0x28, 0x61, 0x64, 0x12, 0x3C, 0x7C, 0x2F, 0x27  };
uint8_t sensor3[8] = { 0x28, 0x61, 0x64, 0x12, 0x3F, 0xFD, 0x80, 0xC6  };

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 DallasTemperature nesnesini başlatıyoruz . Veriyolunu başlatır ve üzerinde bulunan tüm DS18B20'leri algılar. Her sensöre daha sonra bir indeks atanır ve bit çözünürlüğü 12 bit olarak ayarlanır.

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

Ş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, bağlantı durumunu WiFi.status()fonksiyon ile 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, her sensörden sıcaklık okuması 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ü "metin / html" olarak belirliyoruz ve son olarak, sıcaklık okumalarını içeren dinamik bir HTML sayfası oluşturan özel işlevi çağırıyoruz .SendHTML()

void handle_OnConnect() {
  sensors.requestTemperatures();
  tempSensor1 = sensors.getTempC(sensor1);
  tempSensor2 = sensors.getTempC(sensor2);
  tempSensor3 = sensors.getTempC(sensor3);
  server.send(200, "text/html", SendHTML(tempSensor1,tempSensor2,tempSensor3)); 
}

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 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 tempSensor1,float tempSensor2,float tempSensor3){
  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 Temperature Monitor</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 daha sonra 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 Temperature Monitor</h1>\n";

Web Sayfasında Sıcaklık Okumalarının Görüntülenmesi

Sıcaklık 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>Living Room: ";
ptr +=tempSensor1;
ptr +="&deg;C</p>";
ptr +="<p>Bedroom: ";
ptr +=tempSensor2;
ptr +="&deg;C</p>";
ptr +="<p>Kitchen: ";
ptr +=tempSensor3;
ptr +="&deg;C</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.

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 tempSensor1,float tempSensor2,float tempSensor3){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP8266 Temperature Monitor</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-top: 50px;} ";
  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 +=".temperature{font-weight: 300;font-size: 50px;padding-right: 15px;}";
  ptr +=".living-room .temperature{color: #3B97D3;}";
  ptr +=".bedroom .temperature{color: #F29C1F;}";
  ptr +=".kitchen .temperature{color: #26B99A;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -5px;top: 15px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:82px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP8266 Temperature Monitor</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data living-room'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 65.178 45.699'height=45.699px id=Layer_1 version=1.1 viewBox='0 0 65.178 45.699'width=65.178px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><polygon fill=#3B97D3 points='8.969,44.261 8.969,16.469 7.469,16.469 7.469,44.261 1.469,44.261 1.469,45.699 14.906,45.699 ";
  ptr +="14.906,44.261 '/><polygon fill=#3B97D3 points='13.438,0 3,0 0,14.938 16.438,14.938 '/><polygon fill=#3B97D3 points='29.927,45.699 26.261,45.699 26.261,41.156 32.927,41.156 '/><polygon fill=#3B97D3 points='58.572,45.699 62.239,45.699 62.239,41.156 55.572,41.156 '/><path d='M61.521,17.344c-2.021,0-3.656,1.637-3.656,3.656v14.199H30.594V21c0-2.02-1.638-3.656-3.656-3.656";
  ptr +="c-2.02,0-3.657,1.636-3.657,3.656v14.938c0,2.021,1.637,3.655,3.656,3.655H61.52c2.02,0,3.655-1.637,3.655-3.655V21";
  ptr +="C65.177,18.98,63.54,17.344,61.521,17.344z'fill=#3B97D3 /><g><path d='M32.052,30.042c0,2.02,1.637,3.656,3.656,3.656h16.688c2.019,0,3.656-1.638,3.656-3.656v-3.844h-24";
  ptr +="L32.052,30.042L32.052,30.042z'fill=#3B97D3 /><path d='M52.396,6.781H35.709c-2.02,0-3.656,1.637-3.656,3.656v14.344h24V10.438";
  ptr +="C56.053,8.418,54.415,6.781,52.396,6.781z'fill=#3B97D3 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Living Room</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)tempSensor1;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data bedroom'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 43.438 35.75'height=35.75px id=Layer_1 version=1.1 viewBox='0 0 43.438 35.75'width=43.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='M25.489,14.909H17.95C13.007,14.908,0,15.245,0,20.188v3.688h43.438v-3.688";
  ptr +="C43.438,15.245,30.431,14.909,25.489,14.909z'fill=#F29C1F /><polygon fill=#F29C1F points='0,31.25 0,35.75 2.5,35.75 4.5,31.25 38.938,31.25 40.938,35.75 43.438,35.75 43.438,31.25 ";
  ptr +="43.438,25.375 0,25.375 	'/><path d='M13.584,11.694c-3.332,0-6.033,0.973-6.033,2.175c0,0.134,0.041,0.264,0.105,0.391";
  ptr +="c3.745-0.631,7.974-0.709,10.341-0.709h1.538C19.105,12.501,16.613,11.694,13.584,11.694z'fill=#F29C1F /><path d='M30.009,11.694c-3.03,0-5.522,0.807-5.951,1.856h1.425V13.55c2.389,0,6.674,0.081,10.444,0.728";
  ptr +="c0.069-0.132,0.114-0.268,0.114-0.408C36.041,12.668,33.34,11.694,30.009,11.694z'fill=#F29C1F /><path d='M6.042,14.088c0-2.224,3.376-4.025,7.542-4.025c3.825,0,6.976,1.519,7.468,3.488h1.488";
  ptr +="c0.49-1.97,3.644-3.489,7.469-3.489c4.166,0,7.542,1.801,7.542,4.025c0,0.17-0.029,0.337-0.067,0.502";
  ptr +="c1.08,0.247,2.088,0.549,2.945,0.926V3.481C40.429,1.559,38.871,0,36.948,0H6.49C4.568,0,3.009,1.559,3.009,3.481v12.054";
  ptr +="c0.895-0.398,1.956-0.713,3.095-0.968C6.069,14.41,6.042,14.251,6.042,14.088z'fill=#F29C1F /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Bedroom</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)tempSensor2;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data kitchen'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 48 31.5'height=31.5px id=Layer_1 version=1.1 viewBox='0 0 48 31.5'width=48px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><circle cx=24.916 cy=15.75 fill=#26B99A r=15.75 /><path d='M14.917,15.75c0-5.522,4.478-10,10-10c2.92,0,5.541,1.26,7.369,3.257l1.088-1.031";
  ptr +="c-2.103-2.285-5.106-3.726-8.457-3.726c-6.351,0-11.5,5.149-11.5,11.5c0,3.127,1.252,5.958,3.277,8.031l1.088-1.031";
  ptr +="C16.011,20.945,14.917,18.477,14.917,15.75z'fill=#FFFFFF /><path d='M45.766,2.906c-1.232,0-2.232,1-2.232,2.234v11.203c0,0,2.76,0,3,0v12H48v-12V2.906";
  ptr +="C48,2.906,46.035,2.906,45.766,2.906z'fill=#26B99A /><path d='M6.005,2.917v5.184c0,0.975-0.638,1.792-1.516,2.083V2.917H3.021v7.267c-0.878-0.29-1.516-1.107-1.516-2.083";
  ptr +="V2.917H0v5.458c0,1.802,1.306,3.291,3.021,3.592v16.376H4.49v-16.38c1.695-0.318,2.979-1.8,2.979-3.588V2.917H6.005z'fill=#26B99A /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Kitchen</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)tempSensor3;
  ptr +="<span class='superscript'>&deg;C</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 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.