Pada artikel ini, Arduino Indonesia akan membahas tentang cara membuat web server sederhana dengan ESP32 atau ESP8266 untuk menampilkan pembacaan dari sensor suhu dan kelembaban DHT11 atau DHT22.
Diagram Rangkaian: ESP32 dengan DHT11/DHT22
Hubungkan sensor DHT11 atau DHT22 ke papan pengembangan ESP32 sesuai dengan skematik berikut ini.
Dalam contoh ini, kami menghubungkan pin data DHT ke GPIO 14. Namun, Anda dapat menggunakan pin digital lain yang tersedia.
Diagram Rangkaian: ESP8266 dengan DHT11/DHT22
Ikuti panduan berikut jika Anda menggunakan papan ESP8266.
Baca juga: MicroPython OLED SSD1306 ESP32/ESP8266 - Cara Scroll Text dan Menggambar Bentuk
Kode Program
Untuk proyek ini, Anda memerlukan dua file, yaitu boot.py dan main.py.
File boot.py berisi kode yang hanya perlu dijalankan sekali saat boot. Ini mencakup pengimporan library, kredensial jaringan, inisialisasi pin, koneksi ke jaringan, dan konfigurasi lainnya.
File main.py berisi kode yang menjalankan web server untuk menayangkan file dan mengeksekusi tugas berdasarkan permintaan dari klien.
boot.py
Buat file baru di IDE MicroPython Anda. Salin kode berikut ke dalam file boot.py.
try:
import usocket as socket
except:
import socket
import network
from machine import Pin
import dht
import esp
esp.osdebug(None)
import gc
gc.collect()
ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
while station.isconnected() == False:
pass
print('Connection successful')
print(station.ifconfig())
sensor = dht.DHT22(Pin(14))
#sensor = dht.DHT11(Pin(14))
Kami telah membahas kode web server secara mendetail dalam tutorial sebelumnya. Jadi, kitahanya akan fokus pada bagian-bagian yang relevan untuk contoh ini.
Impor library yang diperlukan untuk membuat web server.
try:
import usocket as socket
except:
import socket
import network
Impor kelas `Pin` dari modul `machine` dan modul `dht` untuk membaca data dari sensor DHT.
from machine import Pin
import dht
Anda juga perlu menginisialisasi sensor dengan membuat instance dht pada GPIO 14 seperti berikut:
sensor = dht.DHT22(Pin(14))
Jika Anda menggunakan sensor DHT11, hapus komentar pada baris berikut dan berikan komentar pada baris sebelumnya:
sensor = dht.DHT11(Pin(14))
Jangan lupa untuk menambahkan kredensial jaringan Anda pada baris berikut:
ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'
main.py
Salin kode berikut ke dalam file main.py Anda.
def read_sensor():
global temp, hum
temp = hum = 0
try:
sensor.measure()
temp = sensor.temperature()
hum = sensor.humidity()
if (isinstance(temp, float) and isinstance(hum, float)) or (isinstance(temp, int) and isinstance(hum, int)):
msg = (b'{0:3.1f},{1:3.1f}'.format(temp, hum))
# uncomment for Fahrenheit
#temp = temp * (9/5) + 32.0
hum = round(hum, 2)
return(msg)
else:
return('Invalid sensor readings.')
except OSError as e:
return('Failed to read sensor.')
def web_page():
html = """<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>ESP DHT Server</h2>
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperature</span>
<span>"""+str(temp)+"""</span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span>"""+str(hum)+"""</span>
<sup class="units">%</sup>
</p>
</body>
</html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
print('Content = %s' % str(request))
sensor_readings = read_sensor()
print(sensor_readings)
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
Membaca Sensor DHT
Pertama, buat fungsi bernama read_sensor yang membaca suhu dan kelembaban. Anda dapat menggunakan fungsi ini di proyek lain yang membutuhkan pembacaan sensor DHT.
def read_sensor():
Fungsi ini dimulai dengan membuat dua variabel global, sehingga kita dapat menggunakannya di semua bagian kode program (keduanya diinisialisasi dengan nilai 0).
global temp, hum
temp = hum = 0
Variabel temp menyimpan pembacaan suhu dari sensor, dan variabel hum menyimpan pembacaan kelembaban.
Selanjutnya, gunakan blok try dan except. Di dalam blok try, kita mencoba mengambil nilai suhu dan kelembaban.
Catatan: try dan except memungkinkan kita untuk melanjutkan eksekusi program ketika terjadi pengecualian (exception). Misalnya, saat error terjadi, eksekusi kode dalam blok try dihentikan dan dialihkan ke blok except. Dalam contoh kita, pengecualian ini sangat berguna untuk mencegah web server crash ketika gagal membaca sensor.
Kita membaca sensor dengan menggunakan metode measure() pada objek sensor.
try:
sensor.measure()
Kemudian, baca suhu dengan sensor.temperature() dan kelembaban dengan sensor.humidity(). Simpan pembacaan tersebut ke dalam variabel temp dan hum.
temp = sensor.temperature()
hum = sensor.humidity()
Pembacaan suhu dan kelembaban yang valid seharusnya bertipe float (jika menggunakan sensor DHT22) atau int (jika menggunakan DHT11). Oleh karena itu, kita memeriksa apakah pembacaan valid dengan fungsi isinstance() sebelum melanjutkan.
if (isinstance(temp, float) and isinstance(hum, float)) or (isinstance(temp, int) and isinstance(hum,int)):
Catatan: Fungsi isinstance() menerima dua argumen, yaitu variabel dan tipe data: isinstance(variable, tipe_data). Fungsi ini mengembalikan True jika variabel sesuai dengan tipe data yang dimasukkan, dan False jika tidak.
Jika pembacaan valid, siapkan pesan untuk dicetak di Shell yang mencakup hasil pembacaan suhu dan kelembaban:
msg = (b'{0:3.1f},{1:3.1f}'.format(temp, hum))
Jika Anda ingin menampilkan suhu dalam satuan Fahrenheit, hapus komentar pada baris berikut:
#temp = temp * (9/5) + 32.0
Bulatkan pembacaan kelembaban menjadi dua angka desimal. Nilai ini akan ditampilkan nanti pada halaman web server.
hum = round(hum, 2)
Terakhir, kembalikan pesan yang berisi suhu dan kelembaban:
return(msg)
Jika pembacaan sensor tidak valid (bukan tipe float), kita mengembalikan pesan "Invalid sensor readings."
else:
return('Invalid sensor readings.')
Jika kita gagal membaca dari sensor (misalnya, karena terputus), kembalikan pesan error.
except OSError as e:
return('Failed to read sensor.')
Halaman Web
Fungsi web_page mengembalikan halaman HTML. Kita akan membahas setiap baris HTML dan fungsinya.
Tag <meta> berikut membuat halaman web Anda responsif di semua browser.
<meta name="viewport" content="width=device-width, initial-scale=1">
Tag <link> diperlukan untuk memuat ikon yang digunakan di halaman web dari situs Font Awesome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
Gaya (Styles)
Di antara tag <style></style>, kami menambahkan CSS untuk memperindah tampilan halaman web.
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
Intinya, kami mengatur halaman HTML untuk menampilkan teks dengan font Arial, dalam bentuk blok tanpa margin, dan rata tengah.
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
Kami mengatur ukuran font untuk judul (h2), paragraf (p), dan satuan (.units) dari pembacaan sensor.
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
Label untuk pembacaan sensor diberi gaya seperti di bawah ini:
dht-labels {
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
Semua tag di atas harus ditempatkan di antara tag <head> dan </head>. Tag ini digunakan untuk menyisipkan konten yang tidak langsung terlihat oleh pengguna, seperti <meta>, <link>, dan gaya (style).
Isi HTML (Body)
Di dalam tag <body></body> adalah tempat kita menambahkan konten halaman web.
Tag <h2></h2> menambahkan judul ke halaman web. Dalam hal ini, teks "ESP DHT Server", tetapi Anda dapat menggantinya dengan teks lain.
<h2>ESP DHT Server</h2>
Kemudian, terdapat dua paragraf. Satu untuk menampilkan suhu dan satunya lagi untuk kelembaban. Paragraf dibatasi oleh tag <p> dan </p>. Paragraf untuk suhu adalah sebagai berikut:
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperature</span>
<span>"""+str(temp)+"""</span>
<sup class="units">°C</sup>
</p>
Cuplikan kode program paragraf untuk kelembaban:
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span>"""+str(hum)+"""</span>
<sup class="units">%</sup>
</p>
Tag <i> menampilkan ikon dari Font Awesome.
Cara Menampilkan Ikon
Untuk memilih ikon, kunjungi situs Font Awesome Icons.
Cari ikon yang Anda butuhkan. Misalnya, "thermometer".
Klik ikon yang diinginkan. Kemudian, Anda tinggal menyalin kode HTML yang diberikan.
<i class="fas fa-thermometer-half">
Untuk memilih warna, Anda hanya perlu menambahkan parameter style dengan nilai warna dalam format heksadesimal, seperti berikut:
<i class="fas fa-tint" style="color:#00add6;"></i>
Melanjutkan dengan kode HTML...
Baris berikut menuliskan kata "Temperature" ke dalam halaman web.
<span class="dht-labels">Temperature</span>
Setelah itu, kami menambahkan nilai suhu aktual ke halaman HTML dengan menggabungkan (concatenate) variabel temp seperti di bawah ini.
<span>"""+str(temp)+"""</span>
Terakhir, kami tambahkan simbol derajat.
<sup class="units">°C</sup>
Tag <sup></sup> membuat teks menjadi superskrip (superscript).
Kami menggunakan pendekatan yang sama untuk paragraf kelembaban.
Membuat Web Server
Setelah itu, lakukan prosedur standar untuk membuat server socket.
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
print('Content = %s' % str(request))
sensor_readings = read_sensor()
print(sensor_readings)
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
Untuk penjelasan mendetail tentang prosedur ini, silakan merujuk ke tutorial ini.
Di dalam perulangan while, saat kita memanggil fungsi read_sensor() untuk mencetak pembacaan sensor dan memperbarui variabel global temp dan hum.
sensor_readings = read_sensor()
print(sensor_readings)
Dengan demikian, fungsi web_page() akan menghasilkan teks HTML yang menampilkan pembacaan sensor terkini.
response = web_page()
Mengunggah Kode
Setelah menyalin kode dan melakukan penyesuaian yang diperlukan, Anda dapat mengunggah kode ke ESP32 atau ESP8266.
1. Unggah file boot.py terlebih dahulu, lalu file main.py ke ESP32 atau ESP8266.
2. Jika menggunakan Thonny IDE, cukup navigasi ke Device > Upload current script as boot script atau Upload current script as main script.
3. Setelah mengunggah kode, tekan tombol RESET pada papan ESP.
Alamat IP ESP32 atau ESP8266 akan ditampilkan di Shell MicroPython.
Demonstrasi
Buka browser dan ketikkan alamat IP ESP. Anda akan mengakses halaman web yang menampilkan pembacaan sensor terkini:
Pada saat yang sama, Anda dapat melihat di Shell MicroPython apa yang terjadi di latar belakang.
Untuk mendapatkan pembacaan sensor terbaru, Anda hanya perlu me-refresh halaman web.
Baca juga: Panduan Lengkap MicroPython ESP8266 - Deep Sleep, Wake Up Source, dan Manajemen Daya
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 on: "Panduan Lengkap MicroPython ESP32/ESP8266 - Web Server DHT11/DHT22 sebagai Stasiun Cuaca"