DIYables ESP32 Web Apps Web Temperature merupakan salah satu contoh aplikasi web yang disediakan oleh DIYables ESP32 WebApps Library untuk menampilkan data suhu secara real-time melalui web browser. Aplikasi ini menyajikan hasil pembacaan sensor dalam bentuk termometer digital interaktif, sehingga pengguna dapat memantau perubahan suhu tanpa harus membuka Serial Monitor pada Arduino IDE. Komunikasi antara ESP32 dan browser menggunakan teknologi WebSocket, sehingga setiap perubahan nilai suhu dapat langsung ditampilkan pada halaman web tanpa perlu melakukan refresh. Dengan mekanisme ini, aplikasi sangat cocok digunakan untuk berbagai proyek Internet of Things (IoT) yang membutuhkan sistem monitoring suhu secara langsung. Aplikasi ini dapat diintegrasikan dengan berbagai jenis sensor suhu, baik sensor digital maupun analog, seperti DS18B20, DHT22, maupun TMP36. Selain itu, rentang pengukuran suhu, satuan yang digunakan, serta tampilan termometer dapat dikonfigurasi sesuai kebutuhan proyek.
Fitur Utama DIYables ESP32 Web Apps Web Temperature
Library ini menyediakan berbagai fitur yang memudahkan proses visualisasi data suhu pada ESP32.
1. Tampilan Termometer Interaktif
Nilai suhu ditampilkan dalam bentuk termometer digital yang menarik dan mudah dipahami. Perubahan suhu divisualisasikan melalui animasi sehingga pengguna dapat melihat kenaikan maupun penurunan temperatur secara intuitif.
2. Rentang Suhu yang Fleksibel
Nilai minimum dan maksimum termometer dapat ditentukan langsung melalui kode program. Dengan demikian, aplikasi dapat disesuaikan untuk berbagai kebutuhan pengukuran, mulai dari suhu ruangan hingga suhu proses industri.
3. Pembaruan Data Secara Real-Time
Setiap kali ESP32 memperoleh data baru dari sensor, nilai tersebut langsung dikirim ke browser menggunakan WebSocket. Halaman web akan memperbarui tampilan secara otomatis tanpa perlu dimuat ulang.
4. Mendukung Berbagai Satuan Suhu
Aplikasi dapat menampilkan hasil pengukuran menggunakan beberapa satuan, yaitu:
- Celsius (°C)
- Fahrenheit (°F)
- Kelvin (K)
Pemilihan satuan dapat dilakukan langsung melalui kode program.
5. Konfigurasi yang Mudah
Berbagai parameter seperti rentang suhu, satuan temperatur, hingga interval pembaruan data dapat diatur melalui beberapa baris konfigurasi sehingga mudah disesuaikan dengan kebutuhan aplikasi.
6. Komunikasi Berbasis WebSocket
Library memanfaatkan WebSocket untuk mengirim data secara dua arah antara ESP32 dan browser. Teknologi ini menghasilkan komunikasi yang cepat, ringan, dan responsif dibandingkan metode HTTP biasa.
7. Antarmuka Responsif
Dashboard dapat diakses melalui berbagai perangkat, seperti komputer, laptop, tablet, maupun smartphone. Tata letak antarmuka akan menyesuaikan ukuran layar secara otomatis.
8. Visualisasi Modern
Animasi perubahan level termometer dibuat halus sehingga setiap perubahan suhu dapat diamati dengan lebih jelas.
Perangkat Keras yang Digunakan
Untuk mengikuti tutorial ini, siapkan perangkat berikut:
- Modul ESP32 ESP-WROOM-32 Dev Board (38 Pin)
- Kabel USB yang mendukung transfer data
Cara Menjalankan Contoh Web Temperature
Ikuti langkah-langkah berikut untuk mencoba contoh program yang tersedia pada DIYables ESP32 WebApps Library:
1. Hubungkan ESP32 ke Komputer
Sambungkan board ESP32 menggunakan kabel USB yang mendukung transfer data.
2. Jalankan Arduino IDE
Pastikan Arduino IDE telah terinstal pada komputer.
3. Pilih Board dan Port
Melalui menu Tools, pilih jenis board ESP32 yang digunakan kemudian tentukan port COM yang sesuai.
4. Instal DIYables ESP32 WebApps Library
Buka Library Manager, kemudian cari library DIYables ESP32 WebApps. Pilih library tersebut, kemudian klik Install.
5. Instal Seluruh Dependensi
Setelah proses instalasi selesai, Arduino IDE akan meminta pemasangan beberapa library tambahan yang diperlukan. Klik Install All agar seluruh dependensi terpasang secara otomatis.
6. Membuka Contoh Program
Buka contoh program melalui menu File → Examples → DIYables ESP32 WebApps → WebTemperature
7. Konfigurasikan WiFi
Masukkan nama jaringan WiFi beserta password pada bagian berikut:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
8. Upload Program
Klik tombol Upload untuk mengunggah program ke board ESP32.
9. Buka Serial Monitor
Setelah proses upload selesai, buka Serial Monitor.
10. Periksa Alamat IP
Apabila ESP32 berhasil terhubung ke jaringan WiFi, alamat IP akan muncul pada Serial Monitor.
Jika tidak muncul informasi apa pun, lakukan restart pada board ESP32.
11. Akses Dashboard
Masukkan alamat IP tersebut ke browser.
Contoh: http://10.195.113.32
Halaman utama akan muncul seperti berikut:
Selanjutnya klik menu Web Temperature.
Dashboard juga dapat diakses secara langsung melalui alamat: http://10.195.113.32/web-temperature. Setelah halaman terbuka, Anda akan melihat termometer digital yang menampilkan hasil pembacaan sensor secara real-time.
Mengenal Antarmuka Web Temperature
1. Tampilan Termometer Digital
Dashboard menampilkan visualisasi suhu dalam bentuk termometer dengan beberapa komponen utama.
- Termometer digital dengan animasi level cairan.
- Skala temperatur yang menyesuaikan rentang pengukuran.
- Tampilan satuan suhu (°C, °F, atau K).
- Desain antarmuka yang sederhana dan mudah dipahami.
2. Monitoring Suhu Secara Real-Time
Selain tampilan termometer, dashboard juga memiliki beberapa kemampuan berikut.
- Data diperbarui secara otomatis melalui WebSocket.
- Animasi perubahan suhu berjalan dengan halus.
- Terdapat indikator status koneksi.
- Antarmuka dioptimalkan untuk perangkat layar sentuh.
Konfigurasi Program
1. Mengatur Rentang Suhu
// Configure temperature range and units
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 to 50°C
// Set up temperature value request callback
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
2. Mengirim Nilai Suhu ke Dashboard
void onTemperatureValueRequested() {
// Read temperature from sensor (example with simulation)
float currentTemp = readTemperatureSensor();
// Send to thermometer display
temperaturePage.sendTemperature(currentTemp);
}
Integrasi dengan Sensor Suhu
Library ini dapat digunakan bersama berbagai jenis sensor suhu.
1. Sensor Suhu Digital DS18B20
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Configure temperature page for sensor range
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
2. Sensor Suhu dan Kelembapan DHT22
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Configure for DHT22 range
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Returns °C
}
3. Sensor Suhu Analog TMP36
#define TEMP_PIN A0
float readTemperatureSensor() {
int reading = analogRead(TEMP_PIN);
float voltage = reading * 5.0 / 1024.0;
float temperatureC = (voltage - 0.5) * 100.0; // TMP36 formula
return temperatureC;
}
Konversi Satuan Suhu
Library mendukung konversi hasil pengukuran ke berbagai satuan temperatur.
Mendukung Berbagai Satuan
// Temperature in different units
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Conversion functions
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Opsi Kustomisasi
1. Mengatur Rentang Pengukuran
Beberapa parameter yang dapat dikonfigurasi antara lain:
- Nilai suhu minimum.
- Nilai suhu maksimum.
- Satuan suhu yang digunakan.
- Skala termometer yang menyesuaikan rentang pengukuran.
2. Mengatur Interval Pembaruan Data
// Control update rate to avoid overwhelming the interface
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 second
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Update temperature display
lastUpdate = millis();
}
}
Contoh Implementasi Menggunakan Sensor DS18B20
Berikut merupakan contoh implementasi lengkap DIYables ESP32 Web Apps Web Temperature menggunakan sensor suhu DS18B20.
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
#include <OneWire.h>
#include <DallasTemperature.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
#define ONE_WIRE_BUS 17
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
// Create web app instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81); // HTTP port 80, WebSocket port 81
DIYablesHomePage homePage;
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // Min: -10°C, Max: 50°C
// Temperature simulation variables
float currentTemp = 25.0; // Starting temperature
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(9600);
Serial.println("Starting Web Temperature Server...");
sensors.begin();
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());
// Set up temperature callback for value requests
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
// Start the server
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
// Handle web server and WebSocket communications
server.loop();
// Simulate temperature readings
//simulateTemperature();
currentTemp = readTemperature();
// Send temperature update every 2 seconds
if (millis() - lastUpdate >= 2000) {
temperaturePage.sendTemperature(currentTemp);
// Print temperature to Serial Monitor
Serial.println("Temperature: " + String(currentTemp, 1) + "°C");
lastUpdate = millis();
}
delay(10); // Small delay for stability
}
void simulateTemperature() {
// Simple temperature simulation - slowly increases and decreases
static bool increasing = true;
if (increasing) {
currentTemp += 0.1; // Increase temperature slowly
if (currentTemp >= 35.0) {
increasing = false; // Start decreasing when it reaches 35°C
}
} else {
currentTemp -= 0.1; // Decrease temperature slowly
if (currentTemp <= 15.0) {
increasing = true; // Start increasing when it reaches 15°C
}
}
}
/**
* Callback function called when web interface requests temperature value
* Send current temperature value to web interface
*/
void onTemperatureValueRequested() {
Serial.println("Temperature value requested from web interface");
// Send current temperature value (config is automatically sent by the library)
temperaturePage.sendTemperature(currentTemp);
}
float readTemperature() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
Contoh Penerapan
1. Proyek Pembelajaran
Aplikasi ini dapat dimanfaatkan pada berbagai kegiatan pembelajaran, antara lain:
- Monitoring suhu ruangan maupun lingkungan.
- Praktikum perpindahan kalor.
- Monitoring suhu pada rumah kaca.
- Pembelajaran antarmuka sensor menggunakan ESP32.
2. Aplikasi IoT
Selain untuk pembelajaran, aplikasi ini juga sesuai diterapkan pada berbagai proyek nyata, misalnya:
- Sistem otomasi rumah (Smart Home).
- Monitoring HVAC.
- Monitoring suhu ruang penyimpanan makanan.
- Monitoring suhu proses industri.
- Pengendalian suhu rumah kaca.
Penyelesain Masalah (Troubleshooting)
1. Nilai Suhu Tidak Berubah
Jika tampilan suhu tidak diperbarui, lakukan pemeriksaan berikut.
- Pastikan ESP32 telah terhubung ke jaringan WiFi.
- Periksa koneksi WebSocket.
- Pastikan callback telah dikonfigurasi dengan benar.
- Amati hasil pembacaan pada Serial Monitor.
2. Nilai Suhu Tidak Akurat
Beberapa penyebab yang umum terjadi adalah:
- Sensor belum dikalibrasi.
- Referensi tegangan sensor analog tidak sesuai.
- Sensor belum diinisialisasi dengan benar.
- Library sensor belum terpasang dengan benar.
3. Sensor Tidak Terdeteksi
Lakukan pemeriksaan berikut:
- Periksa kabel VCC, GND, dan DATA.
- Pastikan resistor pull-up telah dipasang pada sensor digital seperti DS18B20.
- Uji sensor menggunakan program sederhana.
- Pastikan library sensor kompatibel dengan perangkat yang digunakan.
Fitur Lanjutan
1. Monitoring Beberapa Sensor Suhu
Dashboard dapat dikembangkan untuk memantau beberapa sensor suhu secara bersamaan.
DIYablesWebTemperaturePage indoorTemp(-10.0, 40.0, "°C");
DIYablesWebTemperaturePage outdoorTemp(-30.0, 50.0, "°C");
DIYablesWebTemperaturePage waterTemp(0.0, 100.0, "°C");
server.addApp(&indoorTemp);
server.addApp(&outdoorTemp);
server.addApp(&waterTemp);
2. Menyimpan Data Historis
Integrasikan dengan Web Plotter untuk menampilkan grafik perubahan suhu dari waktu ke waktu.
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
3. Sistem Peringatan Suhu
Tambahkan sistem alarm atau notifikasi ketika suhu melewati batas tertentu.
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ High temperature alert!");
// Send alert via web interface
} else if (temp < 5.0) {
Serial.println("🧊 Low temperature alert!");
// Send alert via web interface
}
}
Integrasi dalam Pembelajaran STEM
1. Tujuan Pembelajaran
Tutorial ini dapat digunakan sebagai media pembelajaran STEM (Science, Technology, Engineering, and Mathematics) untuk memahami konsep pengukuran suhu dan komunikasi data berbasis IoT. Melalui proyek ini, peserta didik dapat mempelajari:
- Konsep dasar pengukuran suhu.
- Cara kerja sensor suhu analog dan digital.
- Visualisasi data sensor pada dashboard web.
- Implementasi komunikasi WebSocket menggunakan ESP32.
- Integrasi perangkat keras dan perangkat lunak dalam sistem IoT.
2. Aktivitas Pembelajaran
Beberapa kegiatan yang dapat dilakukan antara lain:
- Membandingkan karakteristik beberapa jenis sensor suhu.
- Melakukan kalibrasi sensor.
- Mengamati perubahan suhu lingkungan secara berkala.
- Mengintegrasikan sensor suhu dengan sensor kelembapan maupun kualitas udara.
3. Contoh Praktikum
Beberapa eksperimen yang dapat dilakukan menggunakan proyek ini meliputi:
- Mengamati proses perpindahan kalor.
- Mengamati perubahan wujud zat akibat perubahan suhu.
- Menguji kemampuan berbagai material sebagai isolator panas.
- Melakukan pencatatan suhu dalam jangka waktu tertentu untuk analisis tren temperatur.
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 Komentar