Pada tutorial kali ini, kita akan menunjukkan bagaimana cara membuat web server dengan ESP32 yang dapat mengontrol posisi shaft pada servo motor dengan slider.
Bahan- bahan yang dibutuhkan :
• ESP32
• Motor servo sg90
• Jumper
Menghubungkan servo motor
dengan ESP32 :
Schematic
Bagaimana cara mengontrol servo motor? Posisikan poros servo dalam berbagai sudut dari 0 hingga 180º. Servo dikontrol menggunakan sinyal modulasi lebar pulsa (PWM). Artinya sinyal PWM yang dikirimkan ke motor akan menentukan posisi shaft. Kita akan menggunakan library yang ada pada Arduino IDE agar lebih mudah
Menyiapkan Arduino IDE
Library Servo Arduino ESP32 memudahkan untuk mengontrol motor servo dengan ESP32 Anda, menggunakan Arduino IDE. Ikuti langkah selanjutnya untuk menginstal library pada Arduino IDE :
1. Cari library Arduino uno
servo motor pada github.
2. Anda harus memiliki folder
.zip di folder Unduhan Anda
3. Buka zip folder .zip dan
Anda akan mendapatkan folder ESP32-Arduino-Servo-Library-Master
4. Ganti nama folder Anda
dari ESP32-Arduino-Servo-Library-Master menjadi ESP32_Arduino_Servo_Library
5. Pindahkan folder
ESP32_Arduino_Servo_Library ke folder perpustakaan instalasi Arduino IDE Anda
6. Terakhir, buka kembali Arduino IDE Anda
Setelah menginstal perpustakaan, buka Arduino IDE Anda. Pastikan Anda telah memilih papan ESP32, lalu buka File > Contoh > ServoESP32 > Simple Servo.
Lalu setelah itu kita simpan dan coba pada rangkaian yang telah kita buat.
Membuat Web Server untuk ESP32 dan Servo
Pada kesempatan kali ini, saya akan menggunakan notepad ++ untuk membuat web server.
1. Dimulai dengan melihat teks HTML yang perlu dikirim ESP32 ke browser Anda.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon"
href="data:,">
<style>
body {
text-align: center;
font-family: "Trebuchet MS",
Arial;
margin-left:auto;
margin-right:auto;
}
.slider {
width: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>ESP32 with Servo</h1>
<p>Position: <span
id="servoPos"></span></p>
<input type="range" min="0" max="180" class="slider" id="servoSlider" onchange="servo(this.value)"/>
2. Membuat slider
Halaman HTML untuk proyek ini melibatkan pembuatan slider. Untuk membuat slider dalam HTML Anda menggunakan tag <input>. Tag <input> menentukan kolom dimana pengguna dapat memasukkan data. Ada berbagai macam jenis masukan. Untuk menentukan penggeser, gunakan atribut “type” dengan nilai “range”. Di penggeser, Anda juga perlu menentukan rentang minimum dan maksimum menggunakan atribut “min” dan “max”.
<input type="range" min="0" max="180" class="slider" id="servoSlider" onchange="servo(this.value)"/>
3. Cuplikan kode ini
memperbarui halamaMenambahkan JavaScript ke File HTML
Selanjutnya, Anda perlu menambahkan beberapa kode JavaScript ke file HTML Anda menggunakan tag <script> dan </script>n web dengan posisi penggeser saat ini :
var
slider = document.getElementById("servoSlider");
var servoP =
document.getElementById("servoPos");
servoP.innerHTML = slider.value;
slider.oninput = function() {
slider.value = this.value;
servoP.innerHTML = this.value;
}
Code
#include
<WiFi.h>
#include
<Servo.h>
Servo
myservo; // create servo object to
control a servo
//
twelve servo objects can be created on most boards
// GPIO
the servo is attached to
static
const int servoPin = 13;
//
Replace with your network credentials
const
char* ssid =
"REPLACE_WITH_YOUR_SSID";
const
char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set
web server port number to 80
WiFiServer
server(80);
//
Variable to store the HTTP request
String
header;
//
Decode HTTP GET value
String
valueString = String(5);
int pos1
= 0;
int pos2
= 0;
//
Current time
unsigned
long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const
long timeoutTime = 2000;
void
setup() {
Serial.begin(115200);
myservo.attach(servoPin); //
attaches the servo on the servoPin to the servo object
// 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,
currentTime =
millis();
previousTime = currentTime;
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() && 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();
// 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 on/off buttons
// Feel
free to change the background-color and font-size attributes to fit your
preferences
client.println("<style>body { text-align: center;
font-family: \"Trebuchet MS\", Arial; margin-left:auto;
margin-right:auto;}");
client.println(".slider { width: 300px; }</style>");
client.println("<script
src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
// Web
Page
client.println("</head><body><h1>ESP32 with Servo</h1>");
client.println("<p>Position: <span id=\"servoPos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"180\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");
client.println("<script>var slider =
document.getElementById(\"servoSlider\");");
client.println("var servoP =
document.getElementById(\"servoPos\"); servoP.innerHTML =
slider.value;");
client.println("slider.oninput = function() { slider.value =
this.value; servoP.innerHTML = this.value; }");
client.println("$.ajaxSetup({timeout:1000});
function servo(pos) { ");
client.println("$.get(\"/?value=\" + pos +
\"&\"); {Connection: close};}</script>");
client.println("</body></html>");
//GET
/?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
pos1 =
header.indexOf('=');
pos2 =
header.indexOf('&');
valueString = header.substring(pos1+1, pos2);
//Rotate the servo
myservo.write(valueString.toInt());
Serial.println(valueString);
}
// 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 connectio
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
void
setup() {
Serial.begin(115200);
myservo.attach(servoPin); // attaches the servo on the servoPin to the
servo object
// 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,
currentTime = millis();
previousTime = currentTime;
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() && 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();
// 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 on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preference
client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
client.println(".slider { width: 300px; }</style>");
client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
// Web Pag
client.println("</head><body><h1>ESP32 with Servo</h1>")
client.println("<p>Position: <span
id=\"servoPos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"180\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");
client.println("<script>var slider =
document.getElementById(\"servoSlider\");");
client.println("var servoP = document.getElementById(\"servoPos\"); servoP.innerHTML = slider.value;");
client.println("slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }");
client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
client.println("$.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");
client.println("</body></html>");
//GET /?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
pos1 =
header.indexOf('=');
pos2 =
header.indexOf('&');
valueString = header.substring(pos1+1, pos2);
//Rotate
the servo
myservo.write(valueString.toInt());
Serial.println(valueString);
}
// 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("");
}
}
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();
// 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 on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
client.println(".slider {
width: 300px; }</style>");
client.println("<script
src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
// Web
Page
client.println("</head><body><h1>ESP32 with
Servo</h1>");
client.println("<p>Position: <span id=\"servoPos\"></span></p>");
client.println("<input type=\"range\"
min=\"0\" max=\"180\" class=\"slider\"
id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");
// Web
Page
client.println("</head><body><h1>ESP32 with
Servo</h1>");
client.println("<p>Position: <span
id=\"servoPos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"180\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value= \""+valueString+"\"/>");
client.println("<script>var slider =
document.getElementById(\"servoSlider\");");
client.println("var servoP =
document.getElementById(\"servoPos\"); servoP.innerHTML =
slider.value;");
client.println("slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }");
client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
client.println("$.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");
client.println("</body></html>");
//GET /?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
pos1 = header.indexOf('=');
pos2 = header.indexOf('&');
valueString = header.substring(pos1+1, pos2);
//Rotate the servo
myservo.write(valueString.toInt());
Serial.println(valueString);
}
// 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("");
}
}
Menguji Server Web
Sekarang Anda dapat mengunggah kode ke ESP32 Anda – pastikan Anda memilih board dan port COM yang tepat. Juga jangan lupa untuk mengubah kode untuk memasukkan kredensial jaringan Anda.
Setelah mengupload kode, buka Serial Monitor dengan baud rate 115200.
Tekan tombol "Aktifkan" ESP32 untuk memulai ulang board, dan salin alamat IP ESP32 yang muncul di Serial Monitor. Buka browser , tempel alamat IP ESP, dan halaman web yang Anda buat sebelumnya.Gerakkan penggeser untuk mengontrol motor servo.
Kesimpulan
Dalam tutorial ini kita telah mempelajari cara mengontrol motor servo dengan ESP32 dan cara membuat server web dengan penggeser untuk mengontrol posisinya.Ini hanyalah contoh cara mengendalikan motor servo dengan peritah sederahana yaitu menggunakan slider .
0 on: "ESP32 Servo Motor Web Server dengan Arduino IDE "