아두이노 나노 ESP32 - 웹을 통해 서보 모터 제어 | Arduino Nano ESP32 - Control Servo Motor via Web
이 튜토리얼은 아두이노 나노 ESP32를 사용하여 스마트폰이나 PC의 웹 브라우저를 통해 서보 모터를 웹상에서 제어하는 방법을 안내합니다. WebSocket이라는 것을 사용하여 그래픽 웹 사용자 인터페이스를 통해 서보 모터를 부드럽고 동적으로 제어할 것입니다.
이제, 왜 WebSocket을 사용하는가? 여기 개념이 있다:
- WebSocket이 없으면 서보의 각도를 변경할 때마다 페이지를 새로 고쳐야 합니다. 별로죠!
- 하지만 WebSocket을 사용하면 웹페이지와 아두이노 나노 ESP32 사이에 특별한 연결을 설정합니다. 이 말은, 페이지를 새로 고치지 않고도 아두이노 나노 ESP32에 각도 값을 백그라운드에서 보낼 수 있다는 뜻입니다. 이로 인해 서보가 부드럽고 실시간으로 움직입니다. 꽤 멋지죠?
시작하자!
준비물
| 1 | × | Arduino Nano ESP32 | Amazon | |
| 1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
| 1 | × | Servo Motor | Amazon | |
| 1 | × | Breadboard | 쿠팡 | Amazon | |
| 1 | × | Jumper Wires | Amazon | |
| 1 | × | (Optional) DC Power Jack | 쿠팡 | Amazon | |
| 1 | × | (Recommended) Screw Terminal Adapter for Arduino Nano | 쿠팡 | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
서보 모터와 웹소켓에 대하여
우리는 서보 모터와 웹소켓에 대한 구체적인 튜토리얼을 가지고 있습니다. 각 튜토리얼에는 하드웨어 핀 아웃, 작동 원리, ESP32, 아두이노 나노 ESP32 코드에 대한 연결 배선에 대한 자세한 정보와 단계별 지침이 포함되어 있습니다. 다음 링크에서 그들에 대해 자세히 알아보세요:
- Arduino Nano ESP32 - Servo Motor tutorial
- Arduino Nano ESP32 - WebSocket tutorial
작동 원리
아두이노 나노 ESP32 코드는 웹 서버와 웹소켓 서버 모두를 생성합니다. 작동 방식은 다음과 같습니다:
웹 브라우저에서 ESP32의 IP 주소를 입력하면, 아두이노 나노 ESP32에서 웹페이지(사용자 인터페이스)를 요청합니다.
ESP32의 웹 서버는 웹페이지의 컨텐츠(HTML, CSS, JavaScript)를 전송하며 응답합니다.
그러면 웹 브라우저가 웹페이지를 표시합니다.
웹페이지 안의 JavaScript 코드는 아두이노 나노 ESP32 상의 웹소켓 서버에 웹소켓 연결을 설정합니다.
이 웹소켓 연결이 설정되면, 웹페이지에서 핸들을 돌리면 JavaScript 코드가 이 웹소켓 연결을 통해 배경에서 조용히 각도 값을 아두이노 나노 ESP32로 전송합니다.
ESP32의 웹소켓 서버는 각도 값을 받으면, 그에 따라 서보 모터를 제어합니다.
간단히 말해서, WebSocket 연결은 서보 모터 각도의 부드럽고 실시간 제어를 가능하게 합니다.
서보 모터와 아두이노 나노 ESP32 간의 전선도
USB 포트를 통해 Arduino Nano ESP32 보드에 전원을 공급할 때.
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
Arduino Nano ESP32 보드를 Vin 핀을 통해 전원을 공급할 때.
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
※ NOTE THAT:
Arduino Nano ESP32 보드를 USB 포트를 통해 전원을 공급할 때, Vin 핀 VBUS 핀을 통해 서보 모터에 전원을 공급해서는 안 됩니다. 이 핀을 통해 서보 모터에 전원을 공급하면 보드가 손상될 수 있습니다.
아두이노 나노 ESP32 코드
웹 페이지의 컨텐츠(HTML, CSS, JavaScript)는 index.h 파일에 따로 저장됩니다. 그래서 우리는 Arduino IDE에 두 개의 코드 파일을 가지게 됩니다.
- Arduino Nano ESP32 코드인 .ino 파일로, 웹 서버와 웹소켓 서버를 생성하고 서보 모터를 제어합니다.
- 웹 페이지 내용을 포함하는 .h 파일입니다.
사용 방법
아두이노 나노 ESP32를 시작하려면 다음 단계를 따르세요:
- Arduino Nano ESP32에 익숙하지 않다면, Arduino IDE에서 Arduino Nano ESP32 환경 설정하는 방법에 대한 튜토리얼을 참고하세요. BASE_URL/tutorials/arduino-nano-esp32/arduino-nano-esp32-software-installation.
- 제공된 다이어그램에 따라 구성 요소를 연결하세요.
- USB 케이블을 사용하여 Arduino Nano ESP32 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 실행하세요.
- Arduino Nano ESP32 보드와 해당하는 COM 포트를 선택하세요.
- Arduino IDE의 왼쪽 탐색 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
- “ESPAsyncWebServer”를 검색한 다음, lacamera가 만든 ESPAsyncWebServer를 찾으세요.
- Install 버튼을 클릭하여 ESPAsyncWebServer 라이브러리를 설치하세요.
- 의존성을 설치하라는 요청을 받게 됩니다. Install All 버튼을 클릭하세요.
“WebSockets”를 검색한 다음, Markus Sattler이 만든 WebSockets를 찾으세요.
WebSockets 라이브러리를 설치하려면 Install 버튼을 클릭하세요.
검색 상자에 ServoESP32를 입력한 다음, Jaroslav Paral에 의한 서보 라이브러리를 찾으세요. 버전 1.1.1과 1.1.0이 버그의 영향을 받고 있음을 유의하시기 바랍니다. 다른 버전을 선택해 주십시오.
Install 버튼을 클릭하여 아두이노 나노 ESP32용 서보 모터 라이브러리를 설치하세요.
- Arduino IDE에서 새 스케치를 생성합니다. 이름을 지정하세요. 예를 들어 newbiely.kr.ino입니다.
- 아래 코드를 복사하고 Arduino IDE로 엽니다.
/*
* 이 Arduino Nano ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino Nano ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define SERVO_PIN D2 // 서보 모터에 연결된 Arduino Nano ESP32 핀
Servo servo;
const char* ssid = "YOUR_WIFI_SSID"; // 변경하세요
const char* password = "YOUR_WIFI_PASSWORD"; // 변경하세요
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // 포트 81에서 WebSocket 서버
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
//Serial.printf("[%u] Received text: %s\n", num, payload);
String angle = String((char*)payload);
int angle_value = angle.toInt();
Serial.println(angle_value);
servo.write(angle_value);
break;
}
}
void setup() {
Serial.begin(9600);
servo.attach(SERVO_PIN); // ESP32 핀에 서보를 연결합니다
// Wi-Fi에 연결
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("WiFi에 연결 중...");
}
Serial.println("WiFi에 연결됨");
// WebSocket 서버 초기화
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// WebSocket 연결을 생성하는 JavaScript가 포함된 기본 HTML 페이지 제공
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: 웹 페이지 요청을 받음");
String html = HTML_CONTENT; // index.h 파일에서 HTML 내용을 사용하세요
request->send(200, "text/html", html);
});
server.begin();
Serial.print("Arduino Nano ESP32 웹 서버의 IP 주소: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
}
- Arduino IDE에서 index.h 파일을 생성하려면:
- 직렬 모니터 아이콘 바로 아래의 버튼을 클릭하고 새 탭을 선택하거나, Ctrl+Shift+N 키를 사용하세요.
- 이제 두 파일에 코드를 가지고 있습니다: newbiely.kr.ino와 index.h
- 아두이노 IDE에서 Upload 버튼을 클릭해 아두이노 나노 ESP32로 코드를 업로드하세요
- 시리얼 모니터를 엽니다
- 시리얼 모니터에서 결과를 확인하세요.
- 표시된 IP 주소를 기록하고 이 주소를 스마트폰이나 PC의 웹 브라우저 주소창에 입력하세요.
- 다음과 같은 웹페이지를 볼 수 있습니다:
- 웹페이지의 자바스크립트 코드는 아두이노 나노 ESP32에 자동으로 WebSocket 연결을 생성합니다.
- 이제 웹 인터페이스를 통해 서보 모터의 각도를 제어할 수 있습니다.
- index.h의 HTML 내용을 수정하고 newbiely.kr.ino 파일은 건드리지 않으면, ESP32에 코드를 컴파일하고 업로드할 때 Arduino IDE가 HTML 내용을 업데이트하지 않습니다.
- 이 경우 Arduino IDE가 HTML 내용을 업데이트하게 하려면, newbiely.kr.ino 파일에 변경 사항을 만드세요 (예: 빈 줄 추가, 주석 추가...).
파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.
아래 코드를 복사하여 index.h에 붙여넣으세요.
/*
* 이 Arduino Nano ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino Nano ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano ESP32 Controls Servo Motor via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align: center; }
canvas { background-color: #ffffff; }
</style>
<script>
var canvas_width = 401, canvas_height = 466;
var pivot_x = 200, pivot_y = 200;
var bracket_radius = 160, bracket_angle = 0;
var bracket_img = new Image();
var click_state = 0;
var last_angle = 0;
var mouse_xyra = {x:0, y:0, r:0.0, a:0.0};
var ws;
bracket_img.src = "https://esp32io.com/images/tutorial/servo-bracket.png";
function init()
{
var servo = document.getElementById("servo");
servo.width = canvas_width;
servo.height = canvas_height;
servo.style.backgroundImage = "url('https://esp32io.com/images/tutorial/servo-body.png')";
servo.style.backgroundPosition = "center";
servo.style.backgroundSize = "contain";
servo.addEventListener("touchstart", mouse_down);
servo.addEventListener("touchend", mouse_up);
servo.addEventListener("touchmove", mouse_move);
servo.addEventListener("mousedown", mouse_down);
servo.addEventListener("mouseup", mouse_up);
servo.addEventListener("mousemove", mouse_move);
var ctx = servo.getContext("2d");
ctx.translate(pivot_x, pivot_y);
rotate_bracket(0);
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "CONNECTED" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
ws.onmessage = ws_onmessage;
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function rotate_bracket(angle)
{
var servo = document.getElementById("servo");
var ctx = servo.getContext("2d");
ctx.clearRect(-pivot_x, -pivot_y, canvas_width, canvas_height);
ctx.rotate(angle / 180 * Math.PI);
ctx.drawImage(bracket_img, -pivot_x, -pivot_y);
ctx.rotate(-angle / 180 * Math.PI);
}
function check_range_xyra(event, mouse_xyra)
{
var x, y, r, a, rc_x, rc_y, radian;
var min_r, max_r, width;
if(event.touches)
{
var touches = event.touches;
x = (touches[0].pageX - touches[0].target.offsetLeft) - pivot_x;
y = pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
min_r = 60;
max_r = pivot_x;
width = 40;
}
else
{
x = event.offsetX - pivot_x;
y = pivot_y - event.offsetY;
min_r = 60;
max_r = bracket_radius;
width = 20;
}
/* cartesian to polar coordinate conversion */
r = Math.sqrt(x * x + y * y);
a = Math.atan2(y, x);
mouse_xyra.x = x;
mouse_xyra.y = y;
mouse_xyra.r = r;
mouse_xyra.a = a;
radian = bracket_angle / 180 * Math.PI;
/* rotate coordinate */
rc_x = x * Math.cos(radian) - y * Math.sin(radian);
rc_y = x * Math.sin(radian) + y * Math.cos(radian);
if((r < min_r) || (r > max_r))
return false;
if((rc_y < -width) || (rc_y > width))
return false;
return true;
}
function mouse_down()
{
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(check_range_xyra(event, mouse_xyra))
{
click_state = 1;
last_angle = mouse_xyra.a / Math.PI * 180.0;
}
}
function mouse_up()
{
click_state = 0;
}
function mouse_move()
{
var angle;
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(!click_state)
return;
if(!check_range_xyra(event, mouse_xyra))
{
click_state = 0;
return;
}
angle = mouse_xyra.a / Math.PI * 180.0;
if((Math.abs(angle) > 90) && (angle * last_angle < 0))
{
if(last_angle > 0)
last_angle = -180;
else
last_angle = 180;
}
bracket_angle += (last_angle - angle);
last_angle = angle;
if(bracket_angle > 90)
bracket_angle = 90;
if(bracket_angle < -90)
bracket_angle = -90;
rotate_bracket(bracket_angle);
if(ws.readyState == 1)
ws.send(Math.floor(90 - bracket_angle) + "\r\n");
debug = document.getElementById("debug");
debug.innerHTML = Math.floor(90 - bracket_angle);
event.preventDefault();
}
window.onload = init;
</script>
</head>
<body>
<h2>
Arduino Nano ESP32 - Servo Motor via Web<br>
<canvas id="servo"></canvas>
<p>
WebSocket : <span id="ws_state" style="color:blue">null</span><br>
Angle : <span id="debug" style="color:blue">90</span>
</p>
</h2>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
ESP32의 메모리를 절약하기 위해 서보 모터의 이미지는 Arduino Nano ESP32에 저장되지 않습니다. 대신, 이들은 인터넷에 저장되어 있으므로, 웹 제어 페이지를 위한 이미지를 불러오기 위해서는 휴대폰이나 PC가 인터넷 연결이 되어 있어야 합니다.
※ NOTE THAT:
코드 줄마다 설명하기
위의 Arduino Nano ESP32 코드에는 줄별 설명이 포함되어 있습니다. 코드의 주석을 읽어주세요!