Jangan biarkan aplikasi cuaca ponsel pintar atau stasiun cuaca komersial (yang menyediakan data dari stasiun yang berjarak bermil-mil jauhnya) merusak rencana kegiatan luar ruangan Anda. Dengan proyek IoT ini, Anda bisa menjadi peramal cuaca untuk diri sendiri!
Proyek ini menggunakan ESP8266 NodeMCU sebagai perangkat kontrol yang mudah terhubung ke jaringan WiFi yang ada & membuat Server Web. Ketika perangkat yang terhubung mengakses server web ini, ESP8266 akan membaca suhu, kelembapan, tekanan barometrik & ketinggian dari BME280 & mengirimkannya ke peramban web perangkat tersebut dengan antarmuka yang menarik. Bersemangat? Ayo mulai!
Sensor Suhu, Kelembaban, dan Tekanan BME280
Pertama, mari kita lihat sekilas modul BME280.
BME280 adalah sensor suhu, kelembaban, dan tekanan digital generasi terbaru yang diproduksi oleh Bosch. Modul ini merupakan penerus sensor seperti BMP180, BMP085, atau BMP183.
Tegangan operasi modul BME280 berkisar antara 3,3V hingga 5V – Sempurna untuk berinteraksi dengan mikrokontroler 3,3V seperti ESP8266.
Modul ini dilengkapi antarmuka I2C dua kabel yang sederhana untuk komunikasi. Alamat I2C default modul BME280 adalah 0x76 dan dapat diubah menjadi 0x77 dengan mudah melalui prosedur ini.
Menghubungkan Sensor BME280 ke ESP8266 NodeMCU
Koneksinya cukup sederhana. Mulailah dengan menghubungkan pin VIN ke output 3,3V pada ESP8266 NodeMCU dan hubungkan GND ke ground.
Selanjutnya, hubungkan pin SCL ke pin clock I2C D1 pada ESP8266 Anda dan hubungkan pin SDA ke pin data I2C D2 pada ESP8266 Anda.
Diagram berikut menunjukkan cara menyambungkan kabel semuanya.
Mempersiapkan Arduino IDE
Terdapat add-on untuk Arduino IDE yang memungkinkan Anda memprogram NodeMCU ESP8266 menggunakan Arduino IDE. Ikuti tutorial di bawah ini untuk mempersiapkan Arduino IDE Anda agar dapat bekerja dengan ESP8266, jika Anda belum melakukannya.
Menginstal Library untuk BME280
Berkomunikasi dengan modul BME280 membutuhkan banyak pekerjaan. Untungnya, Library Adafruit BME280 dirancang untuk menyembunyikan semua kerumitan sehingga kita dapat mengeluarkan perintah sederhana untuk membaca data suhu, kelembapan relatif, & tekanan barometrik.
Untuk menginstal library, buka Arduino IDE > Sketch > Include Library > Manage Libraries… Tunggu Library Manager mengunduh indeks library dan memperbarui daftar library yang terinstal.
Filter pencarian Anda dengan mengetik 'bme280'. Akan ada beberapa entri. Cari Adafruit BME280 Library dari Adafruit. Klik entri tersebut, lalu pilih Instal.
Pustaka sensor BME280 menggunakan backend dukungan Adafruit Sensor. Jadi, cari Adafruit Unified Sensor di pengelola pustaka dan instal juga (Anda mungkin perlu sedikit menggulir).
Menampilkan Suhu, Kelembapan, Tekanan & Ketinggian pada Server Web ESP8266
Sekarang, kita akan mengonfigurasi ESP8266 ke mode Stasiun (STA), dan membuat server web untuk menyajikan halaman web kepada klien mana pun yang terhubung dalam jaringan yang ada.
Jika Anda ingin mempelajari cara membuat server web dengan ESP8266 dalam mode AP/STA, lihat tutorial ini.
Sebelum Anda mulai mengunggah sketsa, Anda perlu membuat satu perubahan agar sketsa berfungsi. Anda perlu mengubah dua variabel berikut dengan kredensial jaringan Anda agar ESP8266 dapat terhubung dengan jaringan yang ada.
const char* ssid = "YourNetworkName"; // Enter SSID here
const char* password = "YourPassword"; //Enter Password here
Setelah selesai, lanjutkan dan coba sketsa tersebut.
#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 +="°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;
}
Mengakses Server Web
Setelah mengunggah sketsa, buka Serial Monitor dengan laju baud 115200. Lalu tekan tombol EN pada NodeMCU. Jika semuanya beres, program akan menampilkan alamat IP dinamis yang diperoleh dari router Anda dan menampilkan pesan server HTTP dimulai.
Selanjutnya, buka peramban dan arahkan ke alamat IP yang ditampilkan pada monitor serial. ESP8266 akan menampilkan halaman web yang menampilkan suhu, kelembapan, tekanan, dan ketinggian dari BME280.
Penjelasan Kode Detail
Sketsa dimulai dengan menyertakan pustaka berikut.
Pustaka ESP8266WebServer.h menyediakan metode WiFi khusus ESP8266 yang kita panggil untuk terhubung ke jaringan. Pustaka ini juga menyediakan beberapa metode yang akan membantu kita menyiapkan server dan menangani permintaan HTTP yang masuk tanpa perlu khawatir tentang detail implementasi tingkat rendah.
Pustaka Wire.h berkomunikasi dengan perangkat I2C apa pun, tidak hanya BME280.
Pustaka Adafruit_BME280.h & Adafruit_Sensor.h adalah pustaka khusus perangkat keras yang menangani fungsi tingkat rendah.
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
Berikutnya kita membuat objek sensor dan variabel untuk menyimpan suhu, kelembaban, tekanan dan ketinggian.
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme;
float temperature, humidity, pressure, altitude;
Karena kita mengonfigurasi ESP8266 dalam mode Stasiun (STA), perangkat ini akan terhubung ke jaringan WiFi yang sudah ada. Oleh karena itu, kita perlu memberikan SSID & Kata Sandi jaringan Anda. Selanjutnya, kita akan memulai server web di port 80.
/*Put your SSID & Password*/
const char* ssid = "YourNetworkName"; // Enter SSID here
const char* password = "YourPassword"; //Enter Password here
ESP8266WebServer server(80);
Di dalam Fungsi Setup()
Di dalam Fungsi Setup(), kita mengonfigurasi server HTTP kita sebelum menjalankannya.
Pertama-tama, kita menginisialisasi komunikasi serial dengan PC dan menginisialisasi objek BME menggunakan fungsi begin(). Fungsi ini menginisialisasi antarmuka I2C dengan Alamat I2C yang diberikan (0x76) dan memeriksa apakah ID chip sudah benar. Kemudian, fungsi ini mereset chip menggunakan soft-reset & menunggu sensor untuk kalibrasi setelah bangun.
Serial.begin(115200);
delay(100);
bme.begin(0x76);
Sekarang, kita perlu terhubung ke jaringan WiFi menggunakan fungsi WiFi.begin(). Fungsi ini menggunakan SSID (Nama Jaringan) dan kata sandi sebagai parameter.
Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);
Saat ESP8266 mencoba terhubung ke jaringan, kita dapat memeriksa status konektivitas dengan fungsi WiFi.status().
//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Setelah ESP8266 terhubung ke jaringan, sketsa mencetak alamat IP yang ditetapkan ke ESP8266 dengan menampilkan nilai WiFi.localIP() pada monitor serial.
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());
Untuk menangani permintaan HTTP yang masuk, kita perlu menentukan kode mana yang akan dieksekusi ketika sebuah URL diakses. Untuk melakukannya, kita menggunakan metode on. Metode ini membutuhkan dua parameter. Parameter pertama adalah jalur URL dan parameter kedua adalah nama fungsi yang ingin kita jalankan ketika URL tersebut diakses.
Kode di bawah ini menunjukkan bahwa ketika server menerima permintaan HTTP pada jalur root (/), server akan memicu fungsi handle_OnConnect. Perhatikan bahwa URL yang ditentukan adalah jalur relatif.
server.on("/", handle_OnConnect);
Kami belum menentukan apa yang harus dilakukan server jika klien meminta URL selain yang ditentukan dengan server.on. Server akan merespons dengan status HTTP 404 (Tidak Ditemukan) dan pesan untuk pengguna. Kami juga memasukkan ini ke dalam sebuah fungsi, dan menggunakan server.onNotFound untuk memberi tahu server bahwa ia harus mengeksekusinya ketika menerima permintaan untuk URL yang tidak ditentukan dengan server.on.
server.onNotFound(handle_NotFound);
Sekarang, untuk memulai server kita, kita memanggil metode begin pada objek server.
server.begin();
Serial.println("HTTP server started");
Di Dalam Fungsi Loop()
Untuk menangani permintaan HTTP masuk yang sebenarnya, kita perlu memanggil metode handleClient() pada objek server.
server.handleClient();
Selanjutnya, kita perlu membuat fungsi yang kita lampirkan ke URL root (/) dengan server.on. Ingat?
Di awal fungsi ini, kita mendapatkan pembacaan suhu, kelembapan, tekanan, & ketinggian dari sensor. Untuk merespons permintaan HTTP, kita menggunakan metode send. Meskipun metode ini dapat dipanggil dengan serangkaian argumen yang berbeda, bentuk paling sederhananya terdiri dari kode respons HTTP, tipe konten, dan konten.
Dalam kasus kami, kami mengirimkan kode 200 (salah satu kode status HTTP) yang sesuai dengan respons OK. Kemudian, kami menetapkan tipe konten sebagai "text/html", dan terakhir, kami memanggil fungsi kustom SendHTML() yang membuat halaman HTML dinamis berisi pembacaan suhu, kelembapan, tekanan, dan ketinggian.
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));
}
Demikian pula, kita perlu membuat fungsi untuk menangani halaman Error 404.
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
Menampilkan Halaman Web HTML
Fungsi SendHTML() bertanggung jawab untuk menghasilkan halaman web setiap kali server web ESP8266 menerima permintaan dari klien web. Fungsi ini hanya menggabungkan kode HTML menjadi string besar dan kembali ke fungsi server.send() yang telah dibahas sebelumnya. Fungsi ini menggunakan pembacaan suhu, kelembapan, tekanan, & ketinggian sebagai parameter untuk menghasilkan konten HTML secara dinamis.
Teks pertama yang harus selalu Anda kirim adalah deklarasi <!DOCTYPE> yang menunjukkan bahwa kita sedang mengirimkan kode HTML.
String SendHTML(float temperature,float humidity,float pressure,float altitude){
String ptr = "<!DOCTYPE html> <html>\n";
Berikutnya, elemen viewport <meta> membuat halaman web responsif di browser web apa pun, sementara tag judul menetapkan judul halaman.
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP8266 Weather Station</title>\n";
Menata Halaman Web
Selanjutnya, kita akan menggunakan CSS untuk menata tampilan halaman web. Kita pilih font Helvetica, tentukan konten yang akan ditampilkan sebagai blok sebaris, dan ratakan di tengah.
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
Kode berikut mengatur warna, font, dan margin di sekitar tag body, H1, dan p.
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";
Mengatur Judul Halaman Web
Selanjutnya, judul halaman web akan diatur; Anda dapat mengubah teks ini menjadi apa pun yang sesuai dengan aplikasi Anda.
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 Weather Station</h1>\n";
Menampilkan Hasil di Halaman Web
Untuk menampilkan hasil suhu, kelembapan, tekanan, dan ketinggian secara dinamis, kami menempatkan nilai-nilai tersebut dalam tag paragraf. Untuk menampilkan simbol derajat, kami menggunakan entitas HTML °
ptr +="<p>Temperature: ";
ptr +=temperature;
ptr +="°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;
}
Menata Halaman Web agar Terlihat Lebih Profesional
Programmer seperti kami sering kali terintimidasi oleh desain – tetapi sedikit usaha dapat membuat halaman web Anda terlihat lebih menarik dan profesional. Tangkapan layar di bawah ini akan memberi Anda gambaran dasar tentang apa yang akan kita lakukan.
Keren banget, kan? Tanpa basa-basi lagi, mari kita terapkan sedikit gaya pada halaman HTML kita sebelumnya. Pertama, salin dan tempel kode di bawah ini untuk menggantikan fungsi SendHTML() dari sketsa di atas.
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'>°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;
}
Jika Anda mencoba membandingkan fungsi ini dengan yang sebelumnya, Anda akan menyadari bahwa keduanya serupa, kecuali beberapa perubahan ini.
Kami menggunakan font web Open Sans yang ditugaskan Google untuk halaman web kami. Harap dicatat bahwa Anda tidak dapat melihat font Google tanpa koneksi internet aktif di perangkat. Font Google dimuat secara otomatis.
ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
Ikon yang digunakan untuk menampilkan pembacaan suhu, kelembapan, tekanan, & ketinggian sebenarnya adalah Scalable Vector Graphics (SVG) yang didefinisikan dalam tag <svg>. Membuat SVG tidak memerlukan keahlian pemrograman khusus. Anda dapat menggunakan Google SVG Editor untuk membuat grafik untuk halaman Anda. Kami telah menggunakan ikon-ikon SVG ini.
Peningkatan Kode – Penyegaran Halaman Otomatis
Salah satu peningkatan yang dapat Anda lakukan dengan kode kami adalah menyegarkan halaman secara otomatis untuk memperbarui nilai sensor.
Dengan menambahkan satu tag meta ke dalam dokumen HTML Anda, Anda dapat menginstruksikan browser untuk memuat ulang halaman secara otomatis pada interval yang ditentukan.
<meta http-equiv="refresh" content="2" >
Letakkan kode ini di tag <head> dokumen Anda. Tag meta ini akan menginstruksikan browser untuk memuat ulang setiap dua detik. Cukup praktis!
Muat Data Sensor Secara Dinamis dengan AJAX
Memperbarui halaman web kurang praktis jika Anda memiliki halaman web yang berat. Metode yang lebih baik adalah menggunakan Javascript dan XML Asinkron (AJAX) agar kita dapat meminta data dari server secara asinkron (di latar belakang) tanpa perlu memuat ulang halaman.
Objek XMLHttpRequest dalam JavaScript umumnya digunakan untuk mengeksekusi AJAX di halaman web. Objek ini menjalankan permintaan GET secara diam-diam di server dan memperbarui elemen di halaman. AJAX bukanlah teknologi baru, atau bahasa pemrograman yang berbeda, melainkan teknologi yang sudah ada yang digunakan dengan cara baru. Selain itu, AJAX juga memungkinkan untuk:
Meminta data dari server setelah halaman dimuat
Menerima data dari server setelah halaman dimuat
Mengirim data ke server di latar belakang
Berikut skrip AJAX yang akan kita gunakan. Tempatkan skrip ini tepat sebelum Anda menutup tag </head>.
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";
Skrip dimulai dengan tag <script>. Karena skrip AJAX tidak lain adalah JavaScript, kita perlu menuliskannya dalam tag <script>. Agar fungsi ini dapat dipanggil berulang kali, kita akan menggunakan fungsi JavaScript setInterval(). Fungsi ini membutuhkan dua parameter – fungsi yang akan dieksekusi dan interval waktu (dalam milidetik) untuk seberapa sering fungsi tersebut dieksekusi.
ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";
Inti dari skrip ini adalah fungsi loadDoc(). Di dalam fungsi ini, sebuah objek XMLHttpRequest() dibuat. Objek ini digunakan untuk meminta data dari server web.
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
Fungsi xhttp.onreadystatechange() dipanggil setiap kali readyState berubah. Properti readyState menyimpan status XMLHttpRequest. Properti ini memiliki salah satu nilai berikut.
0: permintaan belum diinisialisasi
1: koneksi server dibuat
2: permintaan diterima
3: permintaan diproses
4: permintaan selesai dan respons siap
Properti status menyimpan status objek XMLHttpRequest. Properti ini memiliki salah satu nilai berikut.
200: "OK"
403: "Terlarang"
404: "Halaman tidak ditemukan"
Ketika readyState bernilai 4 dan status bernilai 200, respons siap. Sekarang, isi body (yang berisi pembacaan suhu) diperbarui.
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
Permintaan HTTP kemudian dimulai melalui fungsi open() dan send().
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
0 Komentar