Wheater Station — Data Visualization
15 April 2020.
Halo! Setelah 2 minggu lebih gak nulis di blog ini, akhirnya seperti biasa, gue akan menuliskan hasil dari project yang gue telah kerjakan dalam mata kuliah ‘Sistem Embedded’.
Seperti yang kita tau, outbreaks dari virus covid-19 ini belum juga kunjung reda. Kuliah gue saat ini pun masih menggunakan sistem PJJ, dan yaa akses jalan diluar juga terbatas. Bahkan, sekarang udah ada beberapa provinsi yang mengadakan PSBB atau biasa kita kenal dengan karantina mandiri dalam rangka mengurangi risiko penyebaran virus covid-19 ini. Jadi yaa, otomatis jarak sekarang juga jadi constraint dari pengerjaan project ini sama kelompok gue.
Sebenernya sih bisa-bisa aja kalo gue ngerjain projectnya sendiri karena alatnya pun semua ada di gue. Tapi, kalo gue ngerjain sendiri pun pasti merekanya malah yang jadi kesusahan karena gabisa ngerjain project ini yang padahal jadi salah satu aspek penilaian untuk mata kuliah ‘Sistem Embedded’ ini. Oleh karena itu, akhirnya gue pun memutuskan untuk ngajakin kelompok gue ngerjain bareng via google meet. Yaa padahal sih sebenernya sama aja kayak gua ngerjain sendiri cuma live streaming gt wkwk. Tapi seenggaknya pas gue ngerjain jadinya gak sendiri-sendiri amat lah ya wkwk.
Berhubung tutorial untuk project ini mulai sulit, dan gue takut untuk salah memberikan tutorial, jadi pada postingan kali ini mungkin gue hanya akan menceritakan proses dan hasil dari project gue kali ini.
Eitss, Tapi tenang aja. Kalo kalian tetep mau nyoba-nyoba ngerjain project gue kali ini, kalian bisa baca tutorialnya di: “ESP32/ESP8266 Plot Sensor Readings in Real Time Charts — Web Server”.
Alat dan Bahan
Nah sebelum ngerjain project gue kali ini, berikut adalah alat-alat yang akan gue gunakan:
1. Laptop
2. ESP32
3. DHT11/22
4. Arduino IDE
5. Kabel jumper
6. Kabel micro USB
7. Breadboard
Berikut penampakannya:
Skema Rangkaian
Pada project ini, skema rangkaian yang gue gunakan mirip seperti skema rangkaian pada project gue sebelumnya yang bisa dilihat di “Web Server Arising”. Berikut adalah skemanya:
Dokumentasi:
Kode Program
Pada projcet ini, kurang lebih langkah-langkkah yang gue lakukan sama dengan langkah-langkah yang ada pada tulisan di “ESP32/ESP8266 Plot Sensor Readings in Real Time Charts — Web Server”, termasuk dengan kode programnya. Hanya saja karena pada blog tersebut tutorial yang diberikan adalah untuk sensor BME280, sedangkan sensor yang gue gunakan DHT11, maka gue harus memodifikasi beberapa langkah serta kode program yang akan gue gunakan.
/*********
Rui Santos
Complete project details at https://RandomNerdTutorials.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/// Import required libraries
#ifdef ESP32
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <DHT.h>
#else
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#endif
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
#include <Adafruit_BME280.h>#define DHTPIN 32 // Digital pin connected to the DHT sensor#define DHTTYPE DHT11 // DHT 11DHT dht(DHTPIN, DHTTYPE);// Replace with your network credentials
const char* ssid = "Gedung_B1";
const char* password = "Putra123";// Create AsyncWebServer object on port 80
AsyncWebServer server(80);String readDHTTemperature() {
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Convert temperature to Fahrenheit
//t = 1.8 * t + 32;
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "";
}
else {
Serial.println(t);
return String(t);
}
}String readDHTHumidity() {
float h = dht.readHumidity();
if (isnan(h)) {
Serial.println("Failed to read from DHT sensor!");
return "";
}
else {
Serial.println(h);
return String(h);
}
}void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
bool status;
// default settings
// (you can also pass in a Wire library object like &Wire2)
dht.begin();// Initialize SPIFFS
if(!SPIFFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html");
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTHumidity().c_str());
});// Start server
server.begin();
}
void loop(){
}
Kode diatas merupakan hasil dari modifikasi kode dari potongan kode yang digunakan logika ESP pada “ESP32/ESP8266 Plot Sensor Readings in Real Time Charts — Web Server”.
Selain itu terdapat kode yang akan digunakan sebagai dasar html pada project kali ini. Berikut adalah hasil modifikasinya:
<!DOCTYPE HTML><html><!-- Rui Santos - Complete project details at https://RandomNerdTutorials.comPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. --><head>
<meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://code.highcharts.com/highcharts.js"></script><style>
body {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style</head><body>
<h2>ESP Weather Station</h2>
<div id="chart-temperature" class="container"></div>
<div id="chart-humidity" class="container"></div>
</body><script>
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'DHT Temperature' },
series: [{
showInLegend: false,
data: []
}],plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: { type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Temperature (Celsius)' }//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);//console.log(this.responseText);
if(chartT.series[0].data.length > 40) {
chartT.series[0].addPoint([x, y], true, true, true);
} else {
chartT.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 3000 ) ;var chartH = new Highcharts.Chart({
chart:{ renderTo:'chart-humidity' },
title: { text: 'DHT Humidity' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Humidity (%)' }
},
credits: { enabled: false }
})
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);//console.log(this.responseText);
if(chartH.series[0].data.length > 40) {
chartH.series[0].addPoint([x, y], true, true, true);
} else {
chartH.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 3000 ) ;
</script>
</html>
Dokumentasi:
Testing
Setelah mengatur skema dan kode yang akan digunakan telah siap, maka selanjutnya kita dapat mencoba menjalankan program tersebut dengan menguploadnya ke ESP32. Selanjutnya jika berhasil, maka pada serial monitor akan ditampilkan pesan sebagai berikut:
Apabila ESP32 berhasil terhubung dengan WiFi, maka ESP nantinya akan membuat sebuah halaman yang berisikan tampilan dari program yang akan dijalankan dengan menggunakan private IP address dan menampilkan nomor IP address tersebut pada serial monitor. Selanjutnya kita dapat mengakses halaman tersebut dengan menuliskan IP address tersebut pada browser.
Note: Wifi yang digunakan oleh device dan ESP haruslah sama.
Lalu, Voila! selesai deh project kali ini hehehe. Berikut adalah dokumentasi hasil pengerjaan project kali ini:
Pada awalnya, gue sempet ngerjain project ini lumayan susah sih karena ngerasa beda aja cara ngerjain project kali ini. Kalo biasanya kode yang ada di sketch-nya tinggal langsung upload, di project kali ini gue harus bikin file htmlnya terlebih dahulu yang nantinya bakal dimuat di browser sebagai tampilan dari visualisasi data yang diterima sensor.
Selain itu gue juga mengalami kendala yang cukup lama karena gaksadar kalo pin esp yang gue gunain salah colok gitu hehehe. Maklumin deh ya ngerjainnya malem2 dan masih kepikiran tugas yang lain huehue.
Selain itu, berikut ada dokumentasi proses pengerjaan project kali ini bersama kelompk gue:
gif:
Oiya, pada saat ngerjain project ini, setelahnya pun kita langsung ngelanjutin ke pengerjaan selanjutnya yaitu Data Logging. Tentunya project tersebut gak akan gue tulis di laman yang sama. Jadi tungguin aja ya tulisan gue yg berikutnya hehehe.
Semoga tulisan ini bermanfaat, Semoga sehat selalu,
Enjoy!
