IoT Basis Web dengan ESP32-Nyala LP pakai HP

Minggu, 01 Desember 2024
Elektronika
Administrator
0 komentar

Tutorial ESP32 Indonesia : Introduction

KOMPONEN :

Devkit ESP32
Project Board
Resistor 100 Ohm (2 Pcs)
LED 5 mm (2 Pcs) Warna bebas tergantung selera
Kabel Jumper Male to Male
USB Tansfer (Micro USB

WIRING :

Wiring Web Server ESP32

Kaki Anoda Led1 ke pin D26 (Sebelumnya diberi resistor 100 Ohm)
Kaki Anoda Led2 ke pin D27 (Sebelumnya diberi resistor 100 Ohm)
Kaki Katoda ke GND

PROGRAM/KODING :

/*
Bismillahirrahmanirrahim, Assalamualaikum
Allahumma sholli ‘ala Muhammad wa ‘ala ali Muhammad

Tutorial IOT Web server by IOTkece
*/

#include <WiFi.h>

const char* ssid = "Rumahku Surgaku";
const char* password = "Bismillah#1";

WiFiServer server(80);

String header;

String Lamp1State = "off";
String Lamp2State = "off";

const int Lamp1 = 26;
const int Lamp2 = 27;

unsigned long currentTime = millis();
unsigned long previousTime = 0;
const long timeoutTime = 2000;

void setup() {
Serial.begin(115200);

pinMode(Lamp1, OUTPUT);
pinMode(Lamp2, OUTPUT);

digitalWrite(Lamp1, LOW);
digitalWrite(Lamp2, LOW);

Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}

Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available();

if (client) {
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client.");
String currentLine = "";
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
Lamp1State = "on";
digitalWrite(Lamp1, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
Lamp1State = "off";
digitalWrite(Lamp1, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
Lamp2State = "on";
digitalWrite(Lamp2, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
Lamp2State = "off";
digitalWrite(Lamp2, LOW);
}

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:,\">");

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #3DE31B; border: none; color: black; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #DB240F;}</style></head>");

client.println("<body><h1>ESP32 IOT Web Server Control Lamp</h1>");
client.println("<p>Lamp 1 - Current Condition <b>" + Lamp1State + "</b></p>");
if (Lamp1State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}

client.println("<p>Lamp 2 - Current Condition <b>" + Lamp2State + "</b></p>");
if (Lamp2State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

CARA MENAMBAHKAN BOARD ESP32 :

Isikan link berikut pada kolom tersebut https://dl.espressif.com/dl/package_esp32_index.json lalu Klik Ok

SETELAH UPLOAD KODING : Setelah selesai buka Serial Monitor dengan Ctrl + Shift + M atau Klik Ikon Serial Monitor

setting Baud Rate ke 115200 sesuai dengan program diatas

Setelah disetting maka ketikan IP Addres pada Serial Monitor ke Browser Sobat, jika tidak muncul maka Restart Board sobat dengan menekan tombol EN sesaat

IOT Web Server Laptop