ESP8266 - 웹을 통한 서보 모터 제어 | ESP8266 - Control Servo Motor via Web
이 튜토리얼은 스마트폰이나 PC의 브라우저에서 웹을 통해 ESP8266을 사용하여 서보 모터를 제어하는 방법을 지시합니다. 우리는 그래픽 웹 사용자 인터페이스를 통해 서보 모터를 원활하고 동적으로 제어하기 위해 WebSocket이라는 것을 사용할 것입니다.
지금, 왜 WebSocket을 사용하는가? 이것이 핵심입니다:
- WebSocket 없이는 서보의 각도를 변경할 때마다 페이지를 다시 로드해야 합니다. 별로죠!
- 하지만 WebSocket을 사용하면 웹페이지와 ESP8266 사이에 특별한 연결을 설정합니다. 이는 페이지를 다시 로드하지 않고도 배경에서 ESP8266에 각도 값을 보낼 수 있다는 것을 의미합니다. 그러면 서보가 부드럽고 실시간으로 움직입니다. 꽤 멋지지 않나요?
시작합시다!
준비물
| 1 | × | ESP8266 NodeMCU | Amazon | |
| 1 | × | Micro USB Cable | Amazon | |
| 1 | × | Servo Motor | Amazon | |
| 1 | × | Breadboard | 쿠팡 | Amazon | |
| 1 | × | Jumper Wires | Amazon | |
| 1 | × | (Optional) DC Power Jack | 쿠팡 | Amazon | |
| 1 | × | (Optional) ESP8266 Screw Terminal Adapter | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
서보 모터와 웹소켓에 대하여
우리는 서보 모터와 WebSocket에 대한 구체적인 튜토리얼을 가지고 있습니다. 각 튜토리얼은 하드웨어 핀아웃, 작동 원리, ESP8266에 대한 배선 연결, ESP8266 코드 등에 대한 자세한 정보와 단계별 지침을 포함하고 있습니다. 다음 링크에서 더 자세히 알아보세요:
- ESP8266 - Servo Motor tutorial
- ESP8266 - WebSocket tutorial
작동 원리
ESP8266 코드는 웹 서버와 WebSocket 서버 둘 다를 생성합니다. 이것이 작동하는 방식은 다음과 같습니다:
- 웹 브라우저에 ESP8266의 IP 주소를 입력하면 ESP8266에서 웹 페이지(사용자 인터페이스)를 요청합니다.
- ESP8266의 웹 서버는 웹 페이지의 내용(HTML, CSS, JavaScript)을 보내 응답합니다.
- 그러면 웹 브라우저에서 웹 페이지를 표시합니다.
- 웹 페이지 내의 JavaScript 코드는 ESP8266상의 WebSocket 서버에 WebSocket 연결을 설정합니다.
- 이 WebSocket 연결이 설정되면, 웹 페이지에서 핸들을 돌리면 JavaScript 코드가 이 WebSocket 연결을 통해 ESP8266에 각도 값을 조용히 보냅니다.
- ESP8266 상의 WebSocket 서버는 각도 값을 받으면, 그에 따라 서보 모터를 제어합니다.
간단히 말해서, WebSocket 연결은 서보 모터 각도의 원활하고 실시간 제어를 가능하게 합니다.
서보 모터와 ESP8266 사이의 배선도
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP8266의 핀 배치 및 ESP8266 및 다른 구성 요소에 전원을 공급하는 방법에 대해 더 많이 보십시오.
단순함을 위해, 위의 배선도는 테스팅이나 학습 목적, 그리고 작은 토크의 서보 모터를 위해 사용됩니다. 실제로, 서보 모터를 위한 외부 전원 공급 장치 사용을 강력히 권장합니다. 아래 배선도는 서보 모터를 외부 전원원에 연결하는 방법을 보여줍니다.
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
ESP8266 코드
웹페이지의 내용(HTML, CSS, JavaScript)은 index.h 파일에 별도로 저장됩니다. 그래서, 아두이노 IDE에는 두 개의 코드 파일이 있게 될 것입니다:
- ESP8266 코드인 .ino 파일로, 웹 서버와 WebSocket 서버를 생성하고 서보 모터를 제어합니다.
- 웹페이지의 내용이 포함된 .h 파일입니다.
사용 방법
Arduino IDE에서 ESP8266을 시작하려면 다음 단계를 따르십시오:
- 만약 이것이 첫 번째로 ESP8266을 사용하는 경우라면, Arduino IDE에서 ESP8266 환경 설정하는 방법 튜토리얼을 확인하세요.
- 다이어그램에 표시된 대로 구성요소를 연결하세요.
- USB 케이블을 사용하여 ESP8266 보드를 컴퓨터에 연결하세요.
- 컴퓨터에서 Arduino IDE를 엽니다.
- 올바른 ESP8266 보드를 선택하세요. 예를 들어, (NodeMCU 1.0 (ESP-12E Module))과 해당 COM 포트입니다.
- Arduino IDE의 왼쪽 탐색 바에 있는 Library Manager 아이콘을 클릭하여 라이브러리 관리자를 엽니다.
- “WebSockets”를 검색한 다음, Markus Sattler이 만든 WebSockets를 찾습니다.
- WebSockets 라이브러리를 설치하려면 Install 버튼을 클릭하세요.
- 아두이노 IDE에서 새 스케치를 생성하고 이름을 지어주세요. 예를 들어, newbiely.kr.ino
- 아래 코드를 복사하고 아두이노 IDE로 열어주세요.
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define SERVO_PIN D7 // ESP8266의 D7 핀에 연결된 서보 모터
Servo servo;
const char* ssid = "YOUR_WIFI_SSID"; // 변경하세요
const char* password = "YOUR_WIFI_PASSWORD"; // 변경하세요
ESP8266WebServer server(80); // 포트 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] 연결 끊김!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] %d.%d.%d.%d에서 연결됨\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
//Serial.printf("[%u] 받은 텍스트: %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); // ESP8266의 핀에 서보 연결
// 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, []() {
Serial.println("웹 서버: 웹 페이지 요청을 받음");
String html = HTML_CONTENT; // index.h 파일에서 HTML 내용을 사용
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 웹 서버의 IP 주소: ");
Serial.println(WiFi.localIP());
}
void loop() {
// 클라이언트 요청 처리
server.handleClient();
// WebSocket 이벤트 처리
webSocket.loop();
}
- Arduino IDE에서 index.h 파일을 생성하려면:
- 시리얼 모니터 아이콘 바로 아래 버튼을 클릭한 후 새 탭을 선택하거나, Ctrl+Shift+N 키를 사용하세요.
- 이제 코드가 두 개의 파일에 있습니다: newbiely.kr.ino 및 index.h
- 아두이노 IDE에서 Upload 버튼을 클릭하여 ESP8266에 코드를 업로드합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인하세요.
- 표시된 IP 주소를 기록해 두고, 스마트폰이나 PC의 웹 브라우저 주소창에 이 주소를 입력하세요.
- 아래와 같은 웹페이지가 표시됩니다:
- 웹페이지의 JavaScript 코드는 자동으로 ESP8266에 WebSocket 연결을 생성합니다.
- 이제 웹 인터페이스를 통해 서보 모터의 각도를 제어할 수 있습니다.
- 만약 index.h의 HTML 내용을 수정하고 newbiely.kr.ino 파일은 건드리지 않으면, ESP8266에 코드를 컴파일하고 업로드할 때 Arduino IDE는 HTML 내용을 업데이트하지 않습니다.
- 이 경우 Arduino IDE가 HTML 내용을 업데이트하게 하려면, newbiely.kr.ino 파일에 변경사항을 만들어야 합니다 (예를 들어, 빈 줄 추가, 주석 추가 등).
파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.
아래 코드를 복사해서 index.h에 붙여넣으세요.
/*
* 이 ESP8266 NodeMCU 코드는 newbiely.kr 에서 개발되었습니다
* 이 ESP8266 NodeMCU 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/esp8266/esp8266-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 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>
ESP8266 - 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
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
ESP8266의 메모리를 절약하기 위해 서보 모터의 이미지는 ESP8266에 저장되지 않습니다. 대신 인터넷에 저장되므로, 웹 제어 페이지에 이미지를 불러오기 위해서는 휴대폰이나 PC가 인터넷 연결이 되어 있어야 합니다.
※ NOTE THAT:
코드 줄마다 설명
위의 ESP8266 코드는 줄마다 설명이 포함되어 있습니다. 코드의 주석을 읽어주세요!