Setelah anda berhasil mengenal fungsi dasar dari Wemos D1 R2 dan berhasil mengirim data pengukuran suhu DHT 11 melalui protokol TCP ke smartphone, kini saatnya membawa data suhu kelembaban dan kontrol I/O ke luar rumah melalui jalur Internet. Jika sebelumnya data hanya berupa teksmelalui TCP, maka ini akan terlihat menjadi kurang menarik. Kita akan manfaatkan fasilitas Web Server yg dimiliki oleh ESP8266. Wihh kok canggih ? alat sekecil itu bisa menjadi web server ?
Library dasar yg digunakan adalah ESP8266WiFi.h dimana ada class WifiServer yg bisa dimasukkan kedalamnya teks berformat HTML dan juga terdapat fungsi dasar response HTTP baik GET maupun POST.
Masih ingat kan, project sebelumnya untuk menghidupkan LED pada board wemos ? Kali ini kita buat versi lain dalam bentuk website yg lebih menarik dan mengandung CSS, sehingga UI tombolnya tampil lebih keren, script nya seperti berikut :
// Load Wi-Fi library
#include <ESP8266WiFi.h>
// Ganti dengan nama wifi yg digunakan
const char* ssid = "nama wifi";
const char* password = "password";
// Set web server port :80
WiFiServer server(80);
// Variable menyimpan HTTP request
String header;
// Variabel menyimpan status LED SCK(14) dan Led ESP (2)
String LedSCKState = "off";
String LedESPState = "off";
// Pilih GPIO pin untuk kedua LED
const int LedSCK = 14; //LED SCK
const int LedESP = 2; //LED ESP
// variabel untuk delay timer asynchronous tanpa mengganggu fungsi utama
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(9600);
// Inisialisasi PIN
pinMode(LedSCK, OUTPUT);
pinMode(LedESP, OUTPUT);
// Buat LED mati
digitalWrite(LedSCK, LOW);
digitalWrite(LedESP, HIGH); //logika terbalik aktif LOW
// konek ke wifi
Serial.print("Terhubung ke jaringan ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address lalu mulai web server
Serial.println("");
Serial.println("WiFi terhubung ...");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// Nyalain LED on and off sesuai header GET
if (header.indexOf("GET /SCK/on") >= 0) {
Serial.println("Led SCK on");
LedSCKState = "on";
digitalWrite(LedSCK, HIGH);
} else if (header.indexOf("GET /SCK/off") >= 0) {
Serial.println("Led SCK off");
LedSCKState = "off";
digitalWrite(LedSCK, LOW);
} else if (header.indexOf("GET /ESP/on") >= 0) {
Serial.println("Led ESP on");
LedESPState = "on";
digitalWrite(LedESP, LOW);
} else if (header.indexOf("GET /ESP/off") >= 0) {
Serial.println("Led ESP off");
LedESPState = "off";
digitalWrite(LedESP, HIGH);
}
// Display the HTML web page & CSS
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style></head>");
// Web Page Header
client.println("<body><h1>ESP8266 Web Server</h1>");
// Display current state, and ON/OFF buttons for LED SCK
client.println("<p>Status LED SCK " + LedSCKState + "</p>");
// If the output5State is off, it displays the ON button
if (LedSCKState=="off") {
client.println("<p><a href=\"/SCK/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/SCK/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for LED ESP
client.println("<p>Status LED ESP " + LedESPState + "</p>");
// If the output4State is off, it displays the ON button
if (LedESPState=="off") {
client.println("<p><a href=\"/ESP/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/ESP/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}Dan lanjutkan mengcompile dan download menuju wemos, perhatikan IP address yg muncul pada serial monitor :
Lanjutkan masuk ke alamat IP tadi pada browser dan akan muncul layar berisikan status LED dan tombol ON - OFF :
Perhatikan ketika salah satu tombol ditekan maka akan ada perintah GET menuju ke header dari websever, mengikuti script a href sepert berikut :
client.println("<p><a href=\"/ESP/on\"><button class=\"button\">ON</button></a></p>");
Artinya saat tombol ditekan maka a href akan mengarahkan browser masuk ke http://ipnya/ESP/on , lalu dibaca headernya dan di baca oleh IF untuk menentukan LED mana yang nyala dan yang mati.
if (header.indexOf("GET /SCK/on") >= 0) {
Serial.println("Led SCK on");
LedSCKState = "on";
digitalWrite(LedSCK, HIGH);
} else if (header.indexOf("GET /SCK/off") >= 0) {
Serial.println("Led SCK off");
LedSCKState = "off";
digitalWrite(LedSCK, LOW);
} else if (header.indexOf("GET /ESP/on") >= 0) {
Serial.println("Led ESP on");
LedESPState = "on";
digitalWrite(LedESP, LOW);
} else if (header.indexOf("GET /ESP/off") >= 0) {
Serial.println("Led ESP off");
LedESPState = "off";
digitalWrite(LedESP, HIGH);
}
Memang agak sedikit primitive, ada juga cara lain yg asyncronous tapi memerlukan pemahaman webserver lebih lanjut seperti tulisan saya disini.
Lalu bagaimana jika ingin menambahkan pembacaan sensor DHT 11 dan tampil pada laman web ? Cukup ambahkan library DHT11 seperti penjelasan di tulisan sebelumnya dan buat function berikut, letakkan diatas setup :
String SendTempHumid(){
String datae ="";
float h = dht.readHumidity();
float t = dht.readTemperature();
if (isnan(h) || isnan(t) ) {
Serial.println(F("Failed to read from DHT sensor!"));
return "error";
}
datae+= String(t).substring(0, 4); // tampilkan hanya 3 digit
datae+= "°C / " ;
datae+= String(h).substring(0, 2); //tapilkan hanya 2 digit
datae+= "%";
Serial.println(datae);
return datae;
}
client.println("<br>");
client.println("<p>Kondisi : " + SendTempHumid() + "</p>");
client.println("<p><a href=\"/refresh/\"><button class=\"button\">Refresh</button></a></p>");
- Masuk ke konsole GPON atau wifi router (IP nya belakangnya mesti 1) , syukur-syukur masih admin:admin atau user passwordnya kamu ketahui, kalau tidak ya jangan lanjutkan praktek ini.
- Cek WAN status dan bandingkan dengan IP yg muncul dari myipadress.com
- Daftar ke noip.com , tambahkan nama domain DDNS sesuai yg kamu inginkan seperti contoh diatas.
- Lanjut tambahkan DDNS pada wifi router seperti gambar berikut ini.
- Pada DDNS masukkan username dan password noip.com
- Lakukan port forwarding di 80 (wan dan lan) sehingga setiap yg masuk ke domain akan di routing forward menuju IP Wemo s8266. Jadi jangan sampai salah menambahkan IP wemos kamu.
- Buka website seperti contoh dibawah ini : http://rumahnyo.ddns.net dan kini bisa mengontrol lampu dan mengetahui suhu dari luar rumah menggunakan jaringan GSM / Internet.
