Proyek ini dirancang untuk membangun sistem pemantauan suhu terdistribusi dengan memanfaatkan jaringan sensor yang ditempatkan di seluruh area rumah maupun taman. Setiap sensor akan mengirimkan data suhu secara berkala ke server pusat melalui koneksi Wi-Fi. ESP8266 NodeMCU digunakan sebagai modul utama karena kemampuannya untuk terhubung ke jaringan nirkabel dan mengoperasikan server web bawaan, memungkinkan perangkat klien mengakses data suhu secara langsung dari browser melalui antarmuka berbasis web.
Sistem ini memanfaatkan sensor suhu DS18B20 yang mendukung protokol 1-Wire, sehingga beberapa sensor dapat dipasang pada satu jalur komunikasi yang sama. Setiap DS18B20 memiliki alamat unik 64-bit yang diprogram dari pabrik, sehingga perangkat dapat membedakan masing-masing sensor meskipun berada dalam satu bus. Fitur ini sangat ideal untuk implementasi pemantauan pada banyak titik ukur yang tersebar dalam area yang luas tanpa memerlukan banyak pin input pada mikrokontroler.
Proses integrasi sensor ke NodeMCU cukup sederhana. Semua sensor DS18B20 dihubungkan secara paralel, meliputi jalur VDD, GND, dan pin data. Jalur VDD dihubungkan ke output 3,3V, GND ke ground, dan pin data ke pin digital D2 pada ESP8266 NodeMCU. Untuk menjaga kestabilan komunikasi 1-Wire, satu resistor pull-up 4,7 kΩ dipasang antara jalur data dan VDD. Dengan konfigurasi ini, seluruh sensor dapat beroperasi dalam satu rangkaian terpusat dan mengirimkan pembacaan suhu ke server web secara konsisten.
Konfigurasi Arduino IDE
Arduino IDE memerlukan pemasangan add-on khusus agar dapat digunakan untuk memprogram modul NodeMCU ESP8266. Jika Anda belum melakukan konfigurasi tersebut, ikuti panduan berikut untuk menambahkan dukungan ESP8266 ke dalam Arduino IDE sehingga lingkungan pengembangan siap digunakan.
Menginstal Pustaka untuk Sensor DS18B20
Komunikasi menggunakan protokol Dallas 1-Wire memerlukan proses pemrosesan data yang cukup kompleks. Untuk menyederhanakan implementasi, digunakan pustaka *DallasTemperature.h* yang memungkinkan pembacaan suhu dilakukan melalui perintah tingkat tinggi.
Untuk memasangnya, buka Arduino IDE kemudian pilih **Sketch > Include Library > Manage Libraries…**. Setelah *Library Manager* selesai memuat daftar pustaka terbaru, lakukan pencarian dengan kata kunci **“ds18b20”**. Pilih pustaka **DallasTemperature** yang dikembangkan oleh Miles Burton, kemudian klik **Install**.
Pustaka DallasTemperature berfungsi sebagai pengelola komunikasi tingkat rendah khusus perangkat keras, sehingga memerlukan pustaka pendukung **OneWire** agar proses komunikasi 1-Wire dapat berjalan dengan benar. Pastikan pustaka OneWire juga diinstal melalui *Library Manager* sebelum melanjutkan ke tahap berikutnya.
Gambar
Menemukan Alamat Unik DS18B20 pada Bus 1-Wire
Setiap sensor DS18B20 memiliki alamat unik 64-bit yang digunakan sebagai identitas perangkat dalam jaringan 1-Wire. Langkah pertama yang perlu dilakukan adalah mengidentifikasi alamat tersebut agar setiap sensor dapat diberi label dan dibaca secara individual melalui program.
Sketsa berikut berfungsi untuk memindai seluruh sensor DS18B20 yang terhubung pada satu bus dan menampilkan alamat 1-Wire masing-masing sensor melalui *Serial Monitor*.
Anda dapat menghubungkan sensor satu per satu atau menambahkannya secara bertahap untuk mempermudah proses identifikasi. Setelah alamat masing-masing sensor ditemukan, Anda dapat memberikan label fisik pada sensor tersebut untuk memudahkan pengelolaan pada instalasi selanjutnya.
#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("");
}
Selanjutnya, buka *Serial Monitor*. Hasil pemindaian akan ditampilkan dalam bentuk daftar alamat masing-masing sensor.
Gambar
Setelah output muncul, salin seluruh alamat yang terdeteksi karena data tersebut akan digunakan pada sketsa program berikutnya.
Membangun Server Web pada ESP8266 dalam Mode Stasiun (STA)
Pada tahap ini, ESP8266 akan dikonfigurasi untuk beroperasi dalam mode Stasiun (STA) sehingga dapat terhubung ke jaringan Wi-Fi yang tersedia dan menjalankan server web untuk melayani permintaan dari perangkat klien di dalam jaringan tersebut.
Apabila Anda ingin mempelajari penerapan server web pada mode AP maupun STA secara lebih mendalam, Anda dapat merujuk pada panduan terkait.
- Sebelum mengunggah sketsa, lakukan penyesuaian pada beberapa bagian kode agar program dapat berjalan sesuai kebutuhan. Dua variabel yang berisi kredensial jaringan harus diperbarui dengan informasi Wi-Fi Anda sehingga ESP8266 dapat terhubung ke jaringan yang akan digunakan.
const char* ssid = "YourNetworkName"; // Enter SSID here
const char* password = "YourPassword"; //Enter Password here
- Sebelum halaman web dikirimkan ke klien, ESP8266 akan melakukan pembacaan suhu dari setiap sensor DS18B20 menggunakan alamat uniknya. Oleh karena itu, Anda perlu mengganti nilai alamat DS18B20 di dalam sketsa dengan alamat yang telah diperoleh dari pemindaian sebelumnya.
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 };
Setelah selesai, lanjutkan dan coba sketsa tersebut.
#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 +="°C</p>";
ptr +="<p>Bedroom: ";
ptr +=tempSensor2;
ptr +="°C</p>";
ptr +="<p>Kitchen: ";
ptr +=tempSensor3;
ptr +="°C</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}
Mengakses Server Web
Setelah sketsa berhasil diunggah, buka *Serial Monitor* dengan kecepatan baud 115200 dan tekan tombol **RST** pada NodeMCU. Jika konfigurasi berjalan dengan benar, modul akan menampilkan alamat IP dinamis yang diperoleh dari router serta pesan bahwa server HTTP telah aktif.
Selanjutnya, buka peramban web dan akses alamat IP yang muncul pada *Serial Monitor*. Halaman web yang disajikan oleh ESP8266 akan menampilkan data suhu dari seluruh sensor DS18B20 yang terhubung.
Penjelasan Kode Secara Detail
Sketsa diawali dengan mengimpor beberapa pustaka utama yang diperlukan untuk menjalankan fungsi program.
- Pustaka **ESP8266WebServer.h** menyediakan berbagai fungsi Wi-Fi khusus untuk ESP8266, termasuk proses koneksi ke jaringan serta mekanisme untuk membangun dan mengelola server web. Selain itu, pustaka ini menyederhanakan penanganan permintaan HTTP sehingga pengguna tidak perlu menangani detail implementasi pada level rendah.
- Pustaka **DallasTemperature.h** digunakan untuk mengelola komunikasi dan fungsi tingkat rendah pada sensor DS18B20. Pustaka ini memerlukan dukungan dari **OneWire.h**, yang berfungsi sebagai antarmuka komunikasi umum untuk seluruh perangkat berbasis protokol 1-Wire, bukan hanya sensor DS18B20.
#include <ESP8266WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
Selanjutnya, dibuat instance objek yang diperlukan untuk inisialisasi sensor suhu serta variabel yang berfungsi menyimpan hasil pembacaan temperatur. Pada konfigurasi ini, jalur data sensor DS18B20 dihubungkan ke pin GPIO D2.
// 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;
Berikutnya, alamat unik untuk setiap sensor dimasukkan ke dalam sketsa sesuai hasil pemindaian sebelumnya. Pada implementasi ini, alamat-alamat tersebut digunakan untuk mengidentifikasi masing-masing sensor secara individual.
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 };
Karena ESP8266 dikonfigurasi untuk beroperasi dalam mode Stasiun (STA), modul akan menghubungkan dirinya ke jaringan Wi-Fi yang telah tersedia. Untuk itu, SSID dan kata sandi jaringan harus ditetapkan terlebih dahulu. Setelah proses konfigurasi jaringan selesai, server web kemudian diinisialisasi dan dijalankan pada 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 DallasTemperature menggunakan fungsi begin(). Fungsi ini menginisialisasi bus dan mendeteksi semua DS18B20 yang ada di dalamnya. Setiap sensor kemudian diberi indeks dan mengatur resolusi bit ke 12-bit.
Serial.begin(115200);
delay(100);
sensors.begin();
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 dari setiap 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.
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));
}
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 mengambil pembacaan suhu 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 tempSensor1,float tempSensor2,float tempSensor3){
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 Temperature Monitor</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 kemudian 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 Temperature Monitor</h1>\n";
Menampilkan Pembacaan Suhu di Halaman Web
Untuk menampilkan pembacaan suhu secara dinamis, kita menempatkan nilai-nilai tersebut di tag paragraf. Untuk menampilkan simbol derajat, kita menggunakan entitas HTML °
ptr +="<p>Living Room: ";
ptr +=tempSensor1;
ptr +="°C</p>";
ptr +="<p>Bedroom: ";
ptr +=tempSensor2;
ptr +="°C</p>";
ptr +="<p>Kitchen: ";
ptr +=tempSensor3;
ptr +="°C</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 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'>°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'>°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'>°C</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 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 memerintahkan browser untuk memuat ulang setiap dua detik. Keren banget!
Memuat Data Sensor Secara Dinamis dengan AJAX
Me-refresh halaman web kurang praktis jika Anda memiliki halaman web yang berat. Metode yang lebih baik adalah menggunakan Asynchronous Javascript And XML (AJAX) agar kita dapat meminta data dari server secara asinkron (di latar belakang) tanpa perlu me-refresh halaman.
Objek XMLHttpRequest dalam JavaScript umumnya digunakan untuk mengeksekusi AJAX pada halaman web. Objek ini menjalankan permintaan GET secara diam-diam pada server dan memperbarui elemen pada 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. Letakkan 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 tidak diinisialisasi
1: koneksi server terjalin
2: permintaan diterima
3: permintaan sedang diproses
4: permintaan selesai dan respons siap
Properti status menyimpan status objek XMLHttpRequest. Properti ini memiliki salah satu nilai berikut.
200: "OK"
403: "Dilarang"
404: "Halaman tidak ditemukan"
Ketika readyState bernilai 4 dan status bernilai 200, respons siap. Sekarang, isi body (yang menyimpan 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";
Siap Untuk Membuat Proyek Impianmu Menjadi Kenyataan?
Klik di sini untuk chat langsung via WhatsApp dan dapatkan dukungan langsung dari tim ahli kami!
0 Komentar