아두이노 나노 ESP32 - 웹을 통한 자동차 제어 | Arduino Nano ESP32 - Control Car via Web
이 가이드는 WiFi를 사용하여 스마트폰이나 PC의 웹 브라우저에서 Arduino Nano ESP32를 사용하여 로봇 자동차를 무선으로 조종하는 방법을 보여줍니다. 컨트롤은 WebSocket이라고 하는 것을 사용하는 그래픽 웹 사용자 인터페이스를 통해 이루어지며, 자동차의 매끄럽고 동적인 조종을 가능하게 합니다.
준비물
| 1 | × | Arduino Nano ESP32 | Amazon | |
| 1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
| 1 | × | 2WD RC Car | 쿠팡 | Amazon | |
| 1 | × | L298N Motor Driver Module | 쿠팡 | Amazon | |
| 1 | × | IR Remote Controller Kit | Amazon | |
| 1 | × | CR2025 Battery (for IR Remote controller) | Amazon | |
| 1 | × | 1.5V AA Battery (for Arduino Nano ESP32 and Car) | Amazon | |
| 1 | × | Jumper Wires | Amazon | |
| 1 | × | Breadboard | 쿠팡 | Amazon | |
| 1 | × | (Recommended) Screw Terminal Expansion Board for Arduino Nano | 쿠팡 | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
2WD RC 자동차 및 WebSocket에 관하여
이제, 왜 WebSocket을 사용해야 할까요? 여기 정말 중요한 정보가 있습니다:
- WebSocket이 없으면 차의 방향을 바꿀 때마다 페이지를 매번 새로고침해야 합니다. 바람직하지 않죠!
- 하지만, WebSocket을 이용하면 웹페이지와 아두이노 나노 ESP32 사이에 특별한 연결을 설정합니다. 이를 통해 페이지를 새로고침하지 않고도 아두이노 나노 ESP32에 명령을 백그라운드에서 보낼 수 있습니다. 결과는? 로봇 자동차가 실시간으로 매끄럽게 움직입니다. 꽤 멋지지 않나요?
간단히 말해서, WebSocket 연결은 로봇의 부드럽고 실시간 제어를 가능하게 합니다.
2WD RC 자동차 및 WebSocket에 관한 구체적인 튜토리얼이 있습니다. 각 튜토리얼에는 하드웨어 핀아웃, 작동 원리, ESP32, Arduino Nano ESP32 코드에 대한 연결 방법 등에 대한 자세한 정보와 단계별 지침이 포함되어 있습니다... 다음 링크에서 자세히 알아보십시오:
- Arduino Nano ESP32 - 2WD RC Car tutorial
- Arduino Nano ESP32 - WebSocket tutorial
작동 방식
아두이노 나노 ESP32 코드는 웹 서버와 웹소켓 서버 모두를 생성합니다. 작동 원리는 다음과 같습니다:
웹 브라우저에 ESP32의 IP 주소를 입력하면, 그것은 아두이노 나노 ESP32에서 웹페이지(사용자 인터페이스)를 요청합니다.
ESP32의 웹 서버는 웹페이지의 내용(HTML, CSS, JavaScript)을 보내 응답합니다.
그러면 웹 브라우저가 웹페이지를 표시합니다.
웹페이지 내의 JavaScript 코드는 아두이노 나노 ESP32에 있는 WebSocket 서버에 WebSocket 연결을 설정합니다.
이 WebSocket 연결이 설정되면, 웹페이지의 버튼을 누르거나 놓으면 JavaScript 코드가 이 WebSocket 연결을 통해 백그라운드에서 아두이노 나노 ESP32에 명령을 조용히 보냅니다.
ESP32의 WebSocket 서버는 명령을 받은 후에 그에 따라 로봇 카를 제어합니다.
아래 표는 사용자의 조작에 따라 웹페이지가 Arduino Nano ESP32에 보내는 명령어 목록을 보여줍니다:
| User's Action | Button | Command | Car Action |
|---|---|---|---|
| PRESS | UP | 1 | MOVE FORWARD |
| PRESS | DOWN | 2 | MOVE BACKWARD |
| PRESS | LEFT | 4 | TURN LEFT |
| PRESS | RIGHT | 8 | TURN RIGHT |
| PRESS | STOP | 0 | STOP |
| RELEASE | UP | 0 | STOP |
| RELEASE | DOWN | 0 | STOP |
| RELEASE | LEFT | 0 | STOP |
| RELEASE | RIGHT | 0 | STOP |
| RELEASE | STOP | 0 | STOP |
2WD RC 자동차와 Arduino Nano ESP32 사이의 배선도
이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.
일반적으로 두 개의 전원이 필요합니다:
- L298N 모듈을 통한 모터용 하나.
- 아두이노 나노 ESP32 보드, L298N 모듈(모터 드라이버)용 또 다른 하나.
하지만, 모든 것을 위해 하나의 전원원만 사용하여 간소화할 수 있습니다 - 1.5V 배터리 4개를 사용해 총 6V입니다. 방법은 다음과 같습니다:
- 아래와 같이 배터리를 L298N 모듈에 연결하십시오.
- L298N 모듈의 5볼트에서 ENA 및 ENB 핀에서 점퍼 3개를 모두 제거하십시오.
- 위의 다이어그램대로 배선을 하십시오.
2WD RC 자동차에 온/오프 스위치가 있기 때문에, 스위치를 통해 배터리를 연결하여 자동차의 전원을 켜고 끌 수 있습니다. 간단하게 하고 싶다면 스위치는 무시하세요.
아두이노 나노 ESP32 코드
웹페이지의 내용(HTML, CSS, JavaScript)은 index.h 파일에 별도로 저장됩니다. 그러므로, 우리는 Arduino IDE에 두 개의 코드 파일을 가지게 될 것입니다:
- 아두이노 나노 ESP32 코드인 .ino 파일로, 웹 서버와 웹소켓 서버를 생성하고 자동차를 제어합니다.
- 웹페이지의 내용을 담고 있는 .h 파일입니다.
사용 방법
- 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 버튼을 클릭하세요.
- 아두이노 IDE에서 새 스케치를 생성하고 이름을 지정하세요. 예를 들어, newbiely.kr.ino
- 아래 코드를 복사하고 아두이노 IDE로 열어주세요
/*
* 이 Arduino Nano ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino Nano ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-car-via-web
*/
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define CMD_STOP 0
#define CMD_FORWARD 1
#define CMD_BACKWARD 2
#define CMD_LEFT 4
#define CMD_RIGHT 8
#define ENA_PIN D7 // L298N의 ENA 핀에 연결된 아두이노 나노 ESP32 핀
#define IN1_PIN D6 // L298N의 IN1 핀에 연결된 아두이노 나노 ESP32 핀
#define IN2_PIN D5 // L298N의 IN2 핀에 연결된 아두이노 나노 ESP32 핀
#define IN3_PIN D4 // L298N의 IN3 핀에 연결된 아두이노 나노 ESP32 핀
#define IN4_PIN D3 // L298N의 IN4 핀에 연결된 아두이노 나노 ESP32 핀
#define ENB_PIN D2 // L298N의 ENB 핀에 연결된 아두이노 나노 ESP32 핀
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 command = angle.toInt();
Serial.print("command: ");
Serial.println(command);
switch (command) {
case CMD_STOP:
Serial.println("Stop");
CAR_stop();
break;
case CMD_FORWARD:
Serial.println("Move Forward");
CAR_moveForward();
break;
case CMD_BACKWARD:
Serial.println("Move Backward");
CAR_moveBackward();
break;
case CMD_LEFT:
Serial.println("Turn Left");
CAR_turnLeft();
break;
case CMD_RIGHT:
Serial.println("Turn Right");
CAR_turnRight();
break;
default:
Serial.println("Unknown command");
}
break;
}
}
void setup() {
Serial.begin(9600);
pinMode(ENA_PIN, OUTPUT);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
pinMode(ENB_PIN, OUTPUT);
digitalWrite(ENA_PIN, HIGH); // 최대 속도 설정
digitalWrite(ENB_PIN, HIGH); // 최대 속도 설정
// 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 연결을 생성하는 자바스크립트가 포함된 기본 HTML 페이지 제공
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("웹 서버: 웹 페이지 요청을 받았습니다");
String html = HTML_CONTENT; // servo_html.h 파일에서 HTML 내용 사용
request->send(200, "text/html", html);
});
server.begin();
Serial.print("아두이노 나노 ESP32 웹 서버의 IP 주소: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
// 할 일: 여기에 코드를 작성하세요
}
void CAR_moveForward() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_moveBackward() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, HIGH);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, HIGH);
}
void CAR_turnLeft() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
void CAR_turnRight() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_stop() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
- 다음 방법 중 하나를 사용하여 Arduino IDE에서 index.h 파일을 생성하세요:
- 직렬 모니터 아이콘 바로 아래에 있는 버튼을 클릭하고 새 탭을 선택하거나, Ctrl+Shift+N 키를 사용하세요.
- 이제 코드가 두 개의 파일에 있습니다: newbiely.kr.ino 와 index.h
- 코드를 Arduino Nano ESP32에 업로드하려면 Arduino IDE에서 Upload 버튼을 클릭하십시오.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인하세요.
파일 이름을 index.h로 지정하고 OK 버튼을 클릭하세요.
아래 코드를 복사한 뒤 index.h에 붙여넣으세요.
/*
* 이 Arduino Nano ESP32 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino Nano ESP32 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano ESP32 Control Car via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no">
<style type="text/css">
body { text-align: center; font-size: 24px;}
button { text-align: center; font-size: 24px;}
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
height: 400px;
position: relative;
margin-bottom: 10px;
}
div[class^='button'] { position: absolute; }
.button_up, .button_down { width:214px; height:104px;}
.button_left, .button_right { width:104px; height:214px;}
.button_stop { width:178px; height:178px;}
.button_up {
background: url('https://esp32io.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://esp32io.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://esp32io.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://esp32io.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://esp32io.com/images/tutorial/stop_inactive.png') no-repeat;
background-size: contain;
left:200px;
top: 200px;
transform: translate(-50%, -50%);
}
</style>
<script>
var CMD_STOP = 0;
var CMD_FORWARD = 1;
var CMD_BACKWARD = 2;
var CMD_LEFT = 4;
var CMD_RIGHT = 8;
var img_name_lookup = {
[CMD_STOP]: "stop",
[CMD_FORWARD]: "up",
[CMD_BACKWARD]: "down",
[CMD_LEFT]: "left",
[CMD_RIGHT]: "right"
}
var ws = null;
function init()
{
var container = document.querySelector("#container");
container.addEventListener("touchstart", mouse_down);
container.addEventListener("touchend", mouse_up);
container.addEventListener("touchcancel", mouse_up);
container.addEventListener("mousedown", mouse_down);
container.addEventListener("mouseup", mouse_up);
container.addEventListener("mouseout", mouse_up);
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
//alert("msg : " + e_msg.data);
}
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "OPEN";
document.getElementById("wc_conn").innerHTML = "Disconnect";
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "CLOSED";
document.getElementById("wc_conn").innerHTML = "Connect";
console.log("socket was closed");
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function wc_onclick()
{
if(ws == null)
{
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
function mouse_down(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(id);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_active.png')";
}
event.stopPropagation();
event.preventDefault();
}
function mouse_up(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(CMD_STOP);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_inactive.png')";
}
event.stopPropagation();
event.preventDefault();
}
function send_command(cmd)
{
if(ws != null)
if(ws.readyState == 1)
ws.send(cmd + "\r\n");
}
window.onload = init;
</script>
</head>
<body>
<h2>Arduino Nano ESP32 - RC Car via Web</h2>
<div id="container">
<div id="0" class="button_stop"></div>
<div id="1" class="button_up"></div>
<div id="2" class="button_down"></div>
<div id="8" class="button_right"></div>
<div id="4" class="button_left"></div>
</div>
<p>
WebSocket : <span id="ws_state" style="color:blue">closed</span><br>
</p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<br>
<br>
<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.2
Autoscroll
Clear output
9600 baud
Newline
표시된 IP 주소를 메모하고, 스마트폰이나 PC의 웹 브라우저 주소창에 이 주소를 입력하세요.
아래와 같이 웹페이지가 보일 것입니다:
웹 페이지의 JavaScript 코드는 자동으로 Arduino Nano ESP32로 WebSocket 연결을 생성합니다.
이제 웹 인터페이스를 통해 차를 좌/우로 전환하거나 앞/뒤로 이동시킬 수 있습니다.
ESP32의 메모리를 절약하기 위해, 컨트롤 버튼의 이미지는 Arduino Nano ESP32에 저장되지 않습니다. 대신, 인터넷에 저장되므로 웹 제어 페이지에 이미지를 로드하려면 휴대폰이나 PC가 인터넷 연결이 되어 있어야 합니다.
※ NOTE THAT:
index.h 파일의 HTML 내용을 수정하고 newbiely.kr.ino 파일을 건드리지 않는다면, ESP32에 코드를 컴파일하고 업로드할 때 Arduino IDE는 HTML 내용을 업데이트하지 않습니다.
이 경우에 Arduino IDE가 HTML 내용을 업데이트하게 하려면, newbiely.kr.ino 파일에 변경을 가하세요(예: 빈 줄 추가, 주석 추가...).
코드 줄별 설명
위의 Arduino Nano ESP32 코드에는 줄별 설명이 포함되어 있습니다. 코드의 주석을 읽어 주세요!