Blog Archive

Arduino Indonesia. Gambar tema oleh Storman. Diberdayakan oleh Blogger.

Supported by Electronics 3 in 1

1. Jasa pencetakan PCB single layer dengan harga paling murah.

(Metode Pembuatan dengan Transfer Toner)
>PCB design sendiri (siap cetak) : Rp.150,-/Cm2
>PCB design dari kami : Rp.250,-/Cm2

(Metode Sablon Full Masking dan Silk Screen minimal pemesanan 100 Pcs)
>PCB design sendiri (siap cetak) : Rp.200,-/Cm2
>PCB design dari kami : Rp.250,-/Cm2

2. Jasa perancangan, perakitan, dan pembuatan trainer pembelajaran elektronika untuk SMK dan Mahasiswa.

3. Jasa perancangan, perakitan, dan pembuatan berbagai macam kontroller, sensor, aktuator, dan tranduser.
>Design Rangkaian / Sistem Elektronika
>Design Rangkaian / Sistem Instrumentasi
>Design Rangkaian / Sistem Kendali
>Kerjasama Riset (data atau peralatan)
>Kerjasama Produksi Produk-Produk KIT Elektronika
>Produksi Instrumentasi Elektronika

4. Jasa Pembuatan Proyek, Tugas Akhir, Tugas Laboratorium, PKM, Karya Ilmiah, SKRIPSI, dll

Like My Facebook

Popular Posts

Senin, 18 September 2023

ESP32 Servo Motor Web Server dengan Arduino IDE

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 : 

Menghubungkan Motor Servo 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

 

Memilih Papan ESP32

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 connection

      

    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 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 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 "