Lập trình ESP32 – Bài 10: Điều khiển Servo SG90 qua Web Server

Bài học này sẽ hướng dẫn cách điều khiển Servo SG90 bằng ESP32 thông qua giao diện Web. Dùng thanh trượt để thay đổi góc quay Servo theo thời gian thực.

Mục lục

  1. Giới thiệu
  2. Servo SG90 hoạt động thế nào?
  3. Phần cứng cần chuẩn bị
  4. Sơ đồ kết nối
  5. Mã nguồn điều khiển Servo
  6. Giải thích mã
  7. Demo & kết quả
  8. Gợi ý mở rộng

1) Giới thiệu

Servo là loại động cơ có khả năng xoay góc chính xác nhờ tín hiệu PWM.
Trong bài này, bạn sẽ học cách:

  • Kết nối Servo SG90 với ESP32
  • Điều khiển góc quay Servo từ trình duyệt Web

2) Servo SG90 hoạt động thế nào?

  • Servo nhận tín hiệu điều khiển dạng PWM (Pulse Width Modulation).
  • Chu kỳ tín hiệu: ~20ms (50Hz).
  • Độ rộng xung (pulse width) xác định góc quay:
    • 0.5ms → 0°
    • 1.5ms → 90°
    • 2.5ms → 180°

3) Phần cứng cần chuẩn bị

Linh kiệnSố lượngGhi chú
ESP32 DevKit V11Board điều khiển
Servo SG901Nguồn 5V
Nguồn ngoài 5V (tùy chọn)1Nếu nhiều servo
Dây nốiVài sợi
Breadboard1Khuyến khích

4) Sơ đồ kết nối (Connection Diagram)

  • Servo VCC → 5V (ESP32 hoặc nguồn ngoài)
  • Servo GND → GND
  • Servo Signal → GPIO13
  • ESP32 cấp nguồn qua USB
  • Laptop hoặc điện thoại truy cập Web Server để điều khiển góc.

5) Mã nguồn điều khiển Servo

#include <WiFi.h>
#include <WebServer.h>
#include <ESP32Servo.h>

#define SERVO_PIN 13

const char* ssid     = "YourWiFiName";
const char* password = "YourPassword";

Servo servo;
WebServer server(80);
int angle = 90;

const char HTML_PAGE[] PROGMEM = R"HTML(
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP32 Servo Control</title>
<style>
body{font-family:system-ui;text-align:center;padding:30px;}
input[type=range]{width:80%;margin-top:20px;}
h1{color:#0f766e;}
</style>
</head>
<body>
<h1>ESP32 Servo SG90 Control</h1>
<p>Góc hiện tại: <span id="val">90</span>°</p>
<input type="range" min="0" max="180" value="90" id="slider">
<script>
const s=document.getElementById('slider');
const v=document.getElementById('val');
s.oninput=()=>{v.textContent=s.value;fetch('/angle?val='+s.value);}
</script>
</body></html>
)HTML";

void handleRoot() {
  server.send_P(200, "text/html", HTML_PAGE);
}

void handleAngle() {
  if (server.hasArg("val")) {
    int val = server.arg("val").toInt();
    val = constrain(val, 0, 180);
    servo.write(val);
    angle = val;
    Serial.printf("Servo angle: %d°\n", val);
  }
  server.send(200, "text/plain", String(angle));
}

void setup() {
  Serial.begin(115200);
  servo.attach(SERVO_PIN);

  WiFi.begin(ssid, password);
  Serial.print("Connecting WiFi");
  while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
  Serial.println("\n✅ WiFi connected: " + WiFi.localIP().toString());

  server.on("/", handleRoot);
  server.on("/angle", handleAngle);
  server.begin();
  Serial.println("✅ Web Server started");
}

void loop() {
  server.handleClient();
}

6) Giải thích mã

  • ESP32Servo.h hỗ trợ tạo xung PWM chính xác để điều khiển Servo.
  • HTML + Slider gửi giá trị góc qua /angle?val=....
  • Mỗi lần thay đổi thanh trượt → Servo quay tức thì đến góc tương ứng.

7) Demo & kết quả

  1. Nạp code, mở Serial Monitor để xem địa chỉ IP.
  2. Mở trình duyệt → truy cập: http://<ESP32_IP>/
  3. Dịch chuyển thanh trượt → Servo quay tương ứng theo góc.
  4. Có thể mở từ điện thoại để điều khiển không dây tiện lợi.

8) Gợi ý mở rộng

  • Điều khiển 2–4 Servo đồng thời bằng nhiều thanh trượt.
  • Thêm WebSocket để cập nhật góc realtime hai chiều.
  • Dùng Servo MG996R (mô-men lớn hơn).
  • Tạo giao diện joystick để điều khiển góc X/Y cho robot.

Comments

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *