التحكم في سيرفو موتور من خلال خادم الويب ESP32 مع الاردوينو IDE الجزء الثاني اكتب تعليقُا

ESP32 Servo Motor Web Server with Arduino IDE

سنشرح لك في هذا المشروع كيفية إنشاء خادم ويب باستخدام ESP32 الذي يتحكم في موضع العمود الخاص بمحرك سرفو موتور باستخدام شريط التمرير . أولاً ، سنلقي نظرة سريعة على كيفية التحكم في السرفو موتور باستخدام ESP32 ، ومن ثم سنقوم بإنشاء خادم الويب .

فمعا لمتابعة الجزء الثاني ….

إنشاء خادم الويب ESP32 Servo Motor Web Server

الآن بعد أن عرفت كيفية التحكم في سيرفو باستخدام ESP32 ، فلنقم بإنشاء خادم الويب للتحكم فيه (تعرف على المزيد حول إنشاء خادم ويب ESP32). خادم الويب الذي سننشئه :

  • يحتوي على شريط تمرير من 0 إلى 180 ، يمكنك ضبطه للتحكم في موضع عمود السيرفو .
  • يتم تحديث قيمة شريط التمرير الحالية تلقائيًا في صفحة الويب ، وكذلك في موضع العمود ، دون الحاجة إلى تحديث صفحة الويب . لهذا ، نستخدم أجاكس لإرسال طلبات HTTP إلى ESP32 في الخلفية .
  • تحديث صفحة الويب لا يغير قيمة شريط التمرير ، ولا موضع العمود .
esp32-servo-web-server-browser

إنشاء صفحة HTML للتحكم ESP32 Servo Motor

لنبدأ من خلال إلقاء نظرة على نص HTML الذي يحتاج ESP32 إلى إرساله إلى متصفحك .

<!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)"/>
  <script>
    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;
    }
    $.ajaxSetup({timeout:1000});
    function servo(pos) {
      $.get("/?value=" + pos + "&");
      {Connection: close};
    }
  </script>
</body>
</html>

الآن ، نحتاج إلى تضمين نص HTML السابق في المخطط وتدوير السيرفو وفقًا لذلك . الكود التالي يفعل ذلك بالضبط .

انسخ الكود التالي إلى الاردوينو IDE ،وقم بتحميله .

#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;

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,
    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 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("");
  }
}

اختبار خادم الويب ESP32 Servo Motor

بعد تحميل الكود على ESP32 – تأكد من تحديد اللوحة اليمنى ومنفذ COM . لا تنسَ أيضًا تعديل الشفرة لتضمين بيانات اعتماد الشبكة .

بعد تحميل الكود ، افتح Serial Monitor بسرعة 115200 .

serial-monitor

اضغط على زر “تمكين” ESP32 لإعادة تشغيل اللوحة ، وانسخ عنوان IP ESP32 الذي يظهر على الشاشة التسلسلية .

ESP-IP-address-1

افتح المتصفح الخاص بك ، والصق عنوان IP الخاص بـ ESP ، وسترى صفحة الويب التي قمت بإنشائها مسبقًا . حرك المنزلق للتحكم في محرك سيرفو .

move-slider

في Serial Monitor ، يمكنك أيضًا مشاهدة طلبات HTTP التي ترسلها إلى ESP32 عند تحريك شريط التمرير .

servo-motor-esp32-serial-monitor

باختصار ، لقد تعلمت في هذا المشروع كيفية التحكم في محرك سيرفو باستخدام ESP32 وكيفية إنشاء خادم ويب باستخدام شريط تمرير للتحكم في موقعه .

هذا مجرد مثال على كيفية التحكم في محرك سيرفو . بدلاً من شريط التمرير ، يمكنك استخدام حقل إدخال نص أو عدة أزرار بزوايا محددة مسبقًا أو أي حقول إدخال أخرى مناسبة .

 

أنتهت !!!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *