Di saat maraknya kasus virus corona, kami tetap melakukan eksperimen yang berkaitan dengan ESP32, melanjutkan eksperimen baru yaitu membangun web server dengan ESP32. Walaupun dengan keterbatasan yang ada, dengan adanya kebijakan social distancing ,kami yang biasanya melakukan eksperimen bersama kelompok, kali ini kami tetap mengerjakan bersama namun dari jarak jauh. Kami tetap saling berkoordinasi dengan adanya keterbatasan saat ini.
Haihai, percobaan kali ini udah pake LED lhooo..
Berikut percobaan menggunakan LED :')
Ok lanjut, eksperimen kali ini adalah membuat web server, yang nantinya hasil output dari ESP32 akan ditampilkan melalui web. Seblumnya kami menampilkan output ESP32 pada layar monitor, LCD display, atau serial terminal bluetooth.
Sumber pembelajaran kali ini dari https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
Sebenarnya dari modul pada sumber pembelajaran, digunakan dua LED dan dua resistor 330ohm, namun percobaan saya ini tidak menggunakan LED dan resistor karena keterbatasan alat. Akhirnya saya memutuskan untuk menggunakan LED internal pada ESP32.
Alat dan Bahan
- ESP32 development board
- Breadboard
- Jumper
- Usb cable
ESP32 Web Server Code
/*********
Rui Santos
Complete project details at http://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>
//uncomment the following lines if you're using SPI
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
// Replace with your network credentials
const char* ssid = "Galaxy A20s1216";
const char* password = "123456788";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
void setup() {
Serial.begin(115200);
bool status;
// default settings
// (you can also pass in a Wire library object like &Wire2)
//status = bme.begin();
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
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
while (client.connected()) { // loop while the client's connected
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();
// Display the HTML web page
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 table
client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; border:1}");
client.println("th { padding: 12px; background-color: #0043af; color: white; }");
client.println("tr { border: 1px solid #ddd; padding: 12px; }");
client.println("tr:hover { background-color: #a8caff; color: black }");
client.println("td { border: none; padding: 12px; }");
client.println(".sensor { color:black; font-weight: bold; background-color: #a8caff; padding: 1px; }");
// Web Page Heading
client.println("</style></head><body><h1>ESP32 with BME280</h1>");
client.println("</style></head><body><h5>oleh: Sulis Tiana 18218036</h5>");
client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
client.println(bme.readTemperature());
client.print(" *C</span></td></tr>");
client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">");
client.print(1.8 * bme.readTemperature() + 32);
client.print(" *F</span></td></tr>");
client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
client.print(bme.readPressure() / 100.0F);
client.print(" hPa</span></td></tr>");
client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
client.print(bme.readAltitude(SEALEVELPRESSURE_HPA));
client.println(" m</span></td></tr>");
client.println("<tr><td>Humidity</td><td><span class=\"sensor\">");
client.print(bme.readHumidity());
client.print(" %</span></td></tr>");
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("");
}
}
Eits… bagi kalian yang mau uji coba dengan code ini, jangan lupa setting networknya dulu, yaitu bagian
const char* ssid = "ubah_dengan_ssid_kalian"
const char* password = "ubah_dengan_password_kalian"
Upload the Code..
Setelah upload berhasil, selanjutnya lihat ESP IP address, pada bagian Serial Monitor.
Setelah dapat IP addressnya, kemudian akses web dengan IP address tersebut.
Berikut hasil Percobaannya:’)
Haihai, percobaan kali ini udah pake LED lhooo..
Berikut percobaan menggunakan LED :')
Terima kasiih!
Lihat Berikutnya: Membangun web server pada ESP32 dan BME280
Komentar
Posting Komentar