Di bagian ini, kami telah membuat contoh server web yang memungkinkan Anda untuk mengontrol relai sebanyak yang Anda inginkan melalui server web apakah mereka dikonfigurasi sebagai biasanya dibuka atau ditutup secara normal. Anda hanya perlu mengubah beberapa baris kode untuk menentukan jumlah relai yang ingin Anda kontrol dan penetapan pin.
Untuk membangun server web ini, kami menggunakan library ESPAsyncWebServer .
Menginstal Library ESPAsyncWebServer
Ikuti langkah-langkah selanjutnya untuk menginstal library ESPAsyncWebServer :
1. Klik di sini untuk mengunduh library ESPAsyncWebServer . Anda harus memiliki folder .zip di folder Unduhan Anda
2. Buka zip folder .zip dan Anda akan mendapatkan folder master ESPAsyncWebServer
3. Ganti nama folder Anda dari ESPAsyncWebServer - masterESPAsyncWebServer-master ke ESPAsyncWebServer
4. Pindahkan folder ESPAsyncWebServer ke folder library instalasi Arduino IDE Anda
Atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .ZIP library… dan pilih library yang baru saja Anda unduh.
Menginstal Library Async TCP untuk ESP32
Ikuti langkah-langkah selanjutnya untuk menginstal library AsyncTCP :
1. Klik di sini untuk mengunduh library AsyncTCP . Anda harus memiliki folder .zip di folder Unduhan Anda
2. Buka zip folder .zip dan Anda akan mendapatkan folder master AsyncTCP
3. Ganti nama folder Anda dari AsyncTCP-master ke AsyncTCP
4. Pindahkan folder AsyncTCP ke folder library instalasi Arduino IDE Anda
Atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .ZIP library… dan pilih library yang baru saja Anda unduh.
PROGRAM
Setelah menginstal Library yang diperlukan, salin kode berikut ke Arduino IDE Anda.
//MONSTERCHIP INDONESIA
// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
// Set to true to define Relay as Normally Open (NO)
#define RELAY_NO true
// Set number of relays
#define NUM_RELAYS 5
// Assign each GPIO to a relay
int relayGPIOs[NUM_RELAYS] = {2, 26, 27, 25, 33};
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
const char* PARAM_INPUT_1 = "relay";
const char* PARAM_INPUT_2 = "state";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {font-size: 3.0rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
input:checked+.slider {background-color: #2196F3}
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
<h2>ESP Web Server</h2>
%BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }
else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
xhr.send();
}</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons ="";
for(int i=1; i<=NUM_RELAYS; i++){
String relayStateValue = relayState(i);
buttons+= "<h4>Relay #" + String(i) + " - GPIO " + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label>";
}
return buttons;
}
return String();
}
String relayState(int numRelay){
if(RELAY_NO){
if(digitalRead(relayGPIOs[numRelay-1])){
return "";
}
else {
return "checked";
}
}
else {
if(digitalRead(relayGPIOs[numRelay-1])){
return "checked";
}
else {
return "";
}
}
return "";
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH
for(int i=1; i<=NUM_RELAYS; i++){
pinMode(relayGPIOs[i-1], OUTPUT);
if(RELAY_NO){
digitalWrite(relayGPIOs[i-1], HIGH);
}
else{
digitalWrite(relayGPIOs[i-1], LOW);
}
}
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
String inputParam;
String inputMessage2;
String inputParam2;
// GET input1 value on <ESP_IP>/update?relay=<inputMessage>
if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {
inputMessage = request->getParam(PARAM_INPUT_1)->value();
inputParam = PARAM_INPUT_1;
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
inputParam2 = PARAM_INPUT_2;
if(RELAY_NO){
Serial.print("NO ");
digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());
}
else{
Serial.print("NC ");
digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());
}
}
else {
inputMessage = "No message sent";
inputParam = "none";
}
Serial.println(inputMessage + inputMessage2);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}Tentukan Konfigurasi Relay
Ubah variabel berikut untuk menunjukkan apakah Anda menggunakan relai dalam konfigurasi biasanya terbuka (NO) atau biasanya tertutup (NC). MengaturRELAY_NOvariabel ke true untuk os yang biasanya terbuka diatur ke false untuk biasanya tertutup.
#define
RELAY_NO true
Tentukan Jumlah Relay (Saluran)
Anda dapat menentukan jumlah relai yang ingin Anda kendalikan padaNUM_RELAYSvariabel. Untuk tujuan demonstrasi, kami menyetelnya ke 5.
#define
NUM_RELAYS 5
Tentukan Tugas Pin Relay
Dalam variabel array berikut, Anda dapat menentukan GPIO ESP32 yang akan mengontrol relay:
int
relayGPIOs[NUM_RELAYS] = {2, 26, 27, 25, 33};
Jumlah relay yang disetel padaNUM_RELAYSvariabel harus sesuai dengan jumlah GPIO yang ditetapkan dalamrelayGPIOHimpunan.
Kredensial Jaringan
Masukkan kredensial jaringan Anda dalam variabel berikut.
const char*
ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Rangkaian Relay 8 Channel ke ESP32
Untuk tujuan demonstrasi, kami mengendalikan 5 saluran relai. Hubungkan ESP32 ke modul relai seperti yang ditunjukkan pada diagram skema berikut.
Demonstrasi
Setelah melakukan perubahan yang diperlukan, unggah kode ke ESP32 Anda.
Buka Serial Monitor pada baud rate 115200 dan tekan tombol ESP32 EN untuk mendapatkan alamat IP-nya.
Kemudian, buka browser di jaringan lokal Anda dan ketik alamat IP ESP32 untuk mendapatkan akses ke server web.
Anda harus mendapatkan sesuatu sebagai berikut dengan tombol sebanyak jumlah relay yang telah Anda tentukan dalam kode Anda.
Sekarang, Anda dapat menggunakan tombol untuk mengontrol relai Anda dari jarak jauh menggunakan ponsel cerdas Anda.
Tutorial by : Riki & Bagas
