ESP32 MPU-6050 가속도계 및 자이로스코프 웹 서버

MPU-6050 가속도계 및 자이로스코프(3D 객체 표현)가 있는 ESP32 웹 서버

 

아래 내용은 읽지 마세요. 같은 포스팅은 이 링크를 따라가세요.

 

이 프로젝트에서는 ESP32를 사용하여 MPU-6050 가속도계 및 자이로스코프 센서의 판독값을 표시하는 웹 서버를 빌드합니다. 또한 웹 브라우저에서 센서 방향의 3D 표현을 만듭니다. 판독값은 Server-Sent Events를 사용하여 자동으로 업데이트되고 3D 표현은 three.js라는 JavaScript 라이브러리를 사용하여 처리됩니다. ESP32 보드는 Arduino 코어를 사용하여 프로그래밍됩니다.

 

ESP32 웹 서버 MPU-6050 가속도계 자이로스코프 3D 객체 표현 Arduino

 

웹 서버를 빌드하기 위해 비동기 웹 서버를 빌드하고 Server-Sent Events를 처리하는 쉬운 방법을 제공하는 ESPAsyncWebServer 라이브러리를 사용합니다.

 

Server-Sent Events에 대해 자세히 알아보려면 다음을 참조하세요. Server-Sent Events를 사용하는 ESP32 웹 서버(센서 판독값 자동 업데이트)

 

 

프로젝트 개요

 

프로젝트로 바로 넘어가기 전에 웹 서버가 무엇을 할 것인지 간략히 설명하는 것이 중요합니다. 그러면 이해하기가 더 쉬워집니다.

 

 

• 웹 서버는 X, Y, Z 축의 자이로스코프 값을 표시합니다.
• 자이로스코프 값은 10밀리초마다 웹 서버에서 업데이트됩니다.
• 가속도계 값(X, Y, Z)을 표시합니다. 이 값은 200밀리초마다 업데이트됩니다.
• MPU-6050 센서 모듈은 온도도 측정하므로 온도 값도 표시하겠습니다. 온도는 1초마다(1000밀리초) 업데이트됩니다.
• 모든 판독값은 Server-Sent Events를 사용하여 업데이트됩니다.
• 센서의 3D 표현이 있습니다. 3D 객체의 방향은 센서 방향에 따라 변경됩니다. 센서의 현재 위치는 자이로스코프 값을 사용하여 계산됩니다.
• 3D 객체는 three.js라는 JavaScript 라이브러리를 사용하여 생성됩니다.
• 3D 객체의 위치를 조정하는 버튼이 네 개 있습니다.

RESET POSITION: 모든 축에서 각도 위치를 0으로 설정합니다.

 

X: X 각도 위치를 0으로 설정합니다;
Y: Y 각도 위치를 0으로 설정합니다;
Z: Z 각도 위치를 0으로 설정합니다;

 

 

MPU-6050 가속도계 자이로스코프 웹 서버 ESP32 작동 원리

 

ESP32 파일 시스템

 

프로젝트를 체계적으로 정리하고 이해하기 쉽게 하기 위해 웹 서버를 빌드하는 네 가지 다른 파일을 만듭니다.

 

웹 서버를 처리하는 Arduino 코드;

 

HTML 파일: 웹 페이지의 콘텐츠를 정의합니다.

 

CSS 파일: 웹 페이지의 스타일을 지정합니다.

 

JavaScript 파일: 웹 페이지의 동작을 프로그래밍합니다(웹 서버 응답, 이벤트 처리 및 3D 객체 생성).

 

HTML, CSS 및 JavaScript 파일은 ESP32 LittleFS 파일 시스템에 업로드됩니다. ESP32 파일 시스템에 파일을 업로드하려면 LittleFS 업로더 플러그인을 사용합니다. Arduino IDE에 설치했는지 확인하세요.

 

Arduino IDE 2: ESP32 LittleFS 업로더 설치(파일 시스템에 파일 업로드)

 

PlatformIO + VS Code를 사용하는 경우 이 문서를 읽고 ESP32 파일 시스템에 파일을 업로드하는 방법을 알아보세요.

 

VS Code 및 PlatformIO가 있는 ESP32: LittleFS 파일 시스템에 파일 업로드

 

MPU-6050 자이로스코프 및 가속도계

 

MPU-6050은 3축 가속도계와 3축 자이로스코프가 있는 모듈입니다.

 

MPU6050 모듈 가속도계 자이로스코프 온도 센서

 

자이로스코프는 회전 속도(rad/s)를 측정합니다. 이는 X, Y 및 Z 축(롤, 피치 및 요)을 따라 시간에 따른 각 위치의 변화입니다. 이를 통해 물체의 방향을 결정할 수 있습니다.

 

롤 피치 요 각도 자이로스코프

 

가속도계는 가속도(물체의 속도 변화율)를 측정합니다. 중력(9.8m/s2)과 같은 정적 초점이나 진동이나 움직임과 같은 동적 힘을 감지합니다. MPU-6050은 X, Y, Z축에 대한 가속도를 측정합니다. 이상적으로는 정적 물체에서 Z축에 대한 가속도는 중력과 같고 X축과 Y축에서는 0이어야 합니다.

 

가속도계의 값을 사용하면 삼각법을 사용하여 롤 및 피치 각도를 계산할 수 있지만 요를 계산할 수는 없습니다.

 

두 센서의 정보를 결합하여 센서 방향에 대한 정확한 정보를 얻을 수 있습니다.

 

MPU-6050 센서에 대해 자세히 알아보세요: MPU-6050 가속도계, 자이로스코프 및 온도 센서가 있는 ESP32

 

회로도 - MPU-6050이 있는 ESP32

 

이 프로젝트에는 다음 부품이 필요합니다.

 

 

 

MPU-6050 가속도계 자이로스코프(ESP32 가이드)

 

ESP32(최고의 ESP32 개발 보드 읽기)

 

브레드보드

 

점퍼 와이어

 

이전 링크를 사용하거나 MakerAdvisor.com/tools로 직접 이동하여 프로젝트에 필요한 모든 부품을 최고의 가격으로 찾을 수 있습니다!

 

다음 회로도에 표시된 대로 ESP32를 MPU-6050 센서에 연결합니다. SCL 핀을 GPIO 22에 연결하고 SDA 핀을 GPIO 21에 연결합니다.

 

MPU6050 가속도계 자이로스코프를 ESP32 회로도 회로에 연결 Arduino IDE 준비

 

Arduino IDE를 사용하여 ESP32 보드를 프로그래밍합니다. 따라서 ESP32 애드온이 설치되어 있는지 확인하세요. 다음 튜토리얼을 따르세요:

 

Arduino IDE에 ESP32 보드 설치

 

VSCode + PlatformIO를 사용하는 것을 선호한다면 대신 다음 튜토리얼을 따르세요:

 

VS Code 및 ESP32 및 ESP8266용 PlatformIO IDE 시작하기 MPU-6050 라이브러리 설치

 

센서에서 판독값을 얻는 방법에는 여러 가지가 있습니다. 이 튜토리얼에서는 Adafruit MPU6050 라이브러리를 사용합니다. 이 라이브러리를 사용하려면 Adafruit Unified Sensor 라이브러리와 Adafruit Bus IO 라이브러리도 설치해야 합니다.

 

Arduino IDE를 열고 Sketch > Include Library > Manage Libraries로 이동합니다. Library Manager가 열립니다.

 

검색 상자에 "adafruit mpu6050"을 입력하고 라이브러리를 설치합니다.

 

Adafruit MPU6050 Library Arduino IDE 설치

 

그런 다음 "Adafruit Unified Sensor"를 검색합니다. 맨 아래로 스크롤하여 라이브러리를 찾아 설치합니다.

 

Adafruit Unified Library Arduino IDE 설치

 

마지막으로 "Adafruit Bus IO"를 검색하여 설치합니다.

 

Adafruit Bus IO 라이브러리 Arduino IDE 설치

 

 

 

비동기 웹 서버 라이브러리 설치

 

웹 서버를 빌드하려면 ESPAsyncWebServer 라이브러리를 사용합니다. 이 라이브러리는 제대로 작동하려면 AsyncTCP 라이브러리가 필요합니다. 아래 링크를 클릭하여 라이브러리를 다운로드하세요.

 

ESPAsyncWebServer

 

AsyncTCP

 

이러한 라이브러리는 Arduino 라이브러리 관리자를 통해 설치할 수 없으므로 라이브러리 파일을 Arduino 설치 라이브러리 폴더에 복사해야 합니다. 또는 Arduino IDE에서 Sketch > 라이브러리 포함 > .zip 라이브러리 추가로 이동하여 방금 다운로드한 라이브러리를 선택할 수 있습니다.

 

Arduino_JSON 라이브러리 설치

 

이 예에서는 JSON 형식으로 센서 판독값을 브라우저로 보냅니다. JSON 변수를 더 쉽게 처리할 수 있도록 Arduino_JSON 라이브러리를 사용합니다.

 

Arduino IDE 라이브러리 관리자에서 이 라이브러리를 설치할 수 있습니다. Sketch > 라이브러리 포함 > 라이브러리 관리로 이동하여 다음과 같이 라이브러리 이름을 검색하기만 하면 됩니다. Arduino_JSON.

 

Arduino_JSON 라이브러리 Arduino IDE 설치

 

PlatformIO와 함께 VS Code를 사용하는 경우 다음 줄을 platformio.ini 파일에 복사하여 필요한 모든 라이브러리를 포함하고 직렬 모니터 전송 속도를 115200으로 설정하고 기본 파일 시스템을 LittleFS로 설정합니다.

 

파일 시스템 업로더 플러그인

 

이 튜토리얼을 따르려면 Arduino IDE에 ESP32 파일 시스템 업로더 플러그인이 설치되어 있어야 합니다. 그렇지 않은 경우 다음 튜토리얼을 따라 설치하세요.

 

Arduino IDE에 ESP32 LittleFS 파일 시스템 업로더 설치

 

VS Code + PlatformIO를 사용하는 경우 다음 튜토리얼을 따라 ESP32 파일 시스템에 파일을 업로드하는 방법을 알아보세요.

 

VS Code 및 PlatformIO가 포함된 ESP32: LittleFS 파일 시스템에 파일 업로드

 

파일 구성

 

웹 서버를 빌드하려면 4가지 다른 파일이 필요합니다. Arduino 스케치, HTML 파일, CSS 파일 및 JavaScript 파일입니다. HTML, CSS 및 JavaScript 파일은 아래에 표시된 대로 Arduino 스케치 폴더 내의 data라는 폴더에 저장해야 합니다.

 

ESP 프로젝트 파일 구성 HTML CSS JavaScript Arduino 파일

 

모든 프로젝트 파일을 다운로드할 수 있습니다.

 

ESP_Web_Server_MPU6050.ino, index.html, style.css 및 script.js 다운로드

 

HTML 파일 만들기

 

다음 콘텐츠로 index.html 파일을 만들거나 모든 프로젝트 파일을 다운로드하세요.

 

헤드

 

및태그는 헤드의 시작과 끝을 표시합니다. 머리글은 최종 사용자에게 직접 보이지 않지만 웹 페이지에 기능을 추가하는 HTML 문서에 대한 데이터를 삽입하는 곳입니다. 이를 메타데이터라고 합니다.

 

다음 줄은 웹 페이지의 제목을 지정합니다. 이 경우 ESP 웹 서버로 설정됩니다. 원하는 경우 변경할 수 있습니다. 제목은 정확히 그 이름 그대로입니다. 웹 브라우저의 제목 표시줄에 표시되는 문서의 제목입니다.

 

 

 

다음 메타 태그는 웹 페이지를 반응형으로 만듭니다. 반응형 웹 디자인은 다양한 화면 크기와 뷰포트에 맞게 자동으로 조정됩니다.

 

 

 

이 프로젝트에서는 웹 페이지에 파비콘을 제공하지 않으므로 다음 메타 태그를 사용합니다.

 

웹 페이지의 스타일을 지정하는 스타일은 style.css 파일이라는 별도의 파일에 있습니다. 따라서 다음과 같이 HTML 파일에서 CSS 파일을 참조해야 합니다.

 

자이로스코프 아이콘과 같은 아이콘을 웹 페이지에 포함하려면 Font Awesome 웹사이트 스타일을 포함합니다.

 

마지막으로 센서의 3D 표현을 만들기 위해 three.js 라이브러리를 포함해야 합니다.

 

본문

 

및태그는 본문의 시작과 끝을 표시합니다. 이러한 태그 안에 들어가는 모든 것은 보이는 페이지 콘텐츠입니다.

 

상단 바

 

웹 페이지에 제목이 있는 상단 바가 있습니다. 제목 1이고 클래스 이름이 topnav인

태그 안에 배치됩니다.

태그 사이에 HTML 요소를 배치하면 CSS를 사용하여 스타일을 지정하기 쉽습니다.

 

콘텐츠 그리드

 

다른 모든 콘텐츠는 콘텐츠라는

태그 안에 배치됩니다.

 

CSS 그리드 레이아웃을 사용하여 서로 다른 정렬된 상자(카드)에 판독값을 표시합니다. 각 상자는 그리드 셀에 해당합니다. 그리드 셀은 그리드 컨테이너 안에 있어야 하므로 상자는 다른

태그 안에 배치해야 합니다. 이 새로운 태그의 클래스 이름은 cards입니다.

 

CSS 그리드 레이아웃에 대해 자세히 알아보려면 이 문서를 추천합니다: 그리드에 대한 완전한 가이드. 자이로스코프 판독값 카드는 다음과 같습니다.

 

카드에는 카드 이름이 있는 제목이 있습니다.

 

그리고 X, Y, Z 축에 자이로스코프 값을 표시하는 세 개의 단락이 있습니다.

 

각 단락에는 고유한 ID가 있는 태그가 있습니다. 이것은 나중에 JavaScript를 사용하여 올바른 위치에 판독값을 삽입할 수 있도록 필요합니다. 사용된 ID는 다음과 같습니다.

 

가속도계 판독값을 표시하는 카드는 비슷하지만 각 판독값에 대해 고유한 ID가 다릅니다.

 

가속도계 판독값 ID는 다음과 같습니다.

 

마지막으로 다음 줄은 온도 및 재설정 버튼에 대한 카드를 표시합니다.

 

온도 판독의 고유 ID는 temp입니다.

 

그런 다음 클릭하면 나중에 resetPosition() JavaScript 함수를 호출하는 네 가지 다른 버튼이 있습니다. 이 함수는 모든 축에서든 개별 축에서든 위치를 재설정하려는 요청을 ESP32에 보내는 역할을 합니다. 각 버튼에는 고유한 ID가 있으므로 어떤 버튼을 클릭했는지 알 수 있습니다.

 

3D 표현

 

3D 표현을 표시할 섹션을 만들어야 합니다.

 

3D 객체는 3Dcube ID로

에 렌더링됩니다.

 

JavaScript 파일 참조

 

마지막으로 HTML 요소를 처리하고 3D 애니메이션을 만드는 모든 함수가 있는 외부 JavaScript 파일을 사용하므로 다음과 같이 해당 파일(script.js)을 참조해야 합니다.

 

 

CSS 파일 만들기

 

다음 콘텐츠가 있는 style.css라는 파일을 만들거나 모든 프로젝트 파일을 다운로드합니다.

 

이 파일은 웹 페이지의 스타일을 지정하는 역할을 합니다.

 

이 프로젝트의 CSS가 어떻게 작동하는지는 이 프로젝트의 목표와 관련이 없으므로 설명하지 않겠습니다.

 

JavaScript 파일 만들기

 

다음 내용이 있는 script.js라는 파일을 만들거나 모든 프로젝트 파일을 다운로드합니다.

 

코드를 업로드하기 전에 다음 변수에 네트워크 자격 증명을 삽입해야 합니다.

 

// 네트워크 자격 증명으로 대체

 

const char* ssid = "REPLACE_WITH_YOUR_SSID";

 

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

 

코드 작동 방식

 

코드 작동 방식을 알아보려면 계속 읽거나 다음 섹션으로 넘어가세요.

 

라이브러리

 

먼저 이 프로젝트에 필요한 모든 라이브러리를 가져옵니다.

 

네트워크 자격 증명

 

다음 변수에 네트워크 자격 증명을 삽입합니다.

 

// 네트워크 자격 증명으로 대체

 

const char* ssid = "REPLACE_WITH_YOUR_SSID";

 

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

 

AsyncWebServer 및 AsyncEventSource

 

포트 80에서 AsyncWebServer 객체를 만듭니다.

 

AsyncWebServer server(80);

 

다음 줄은 /events에서 새 이벤트 소스를 만듭니다.

 

AsyncEventSource events("/events");

 

변수 선언

 

readings 변수는 JSON 형식으로 센서 판독값을 보관하는 JSON 변수입니다.

 

JSONVar readings;

 

이 프로젝트에서는 자이로스코프 판독값을 10밀리초마다, 가속도계 판독값을 200밀리초마다, 온도 판독값을 1초마다 보냅니다. 따라서 각 판독값에 대한 보조 타이머 변수를 만들어야 합니다. 원하는 경우 지연 시간을 변경할 수 있습니다.

 

MPU-6050

 

mpu라는 Adafruit_MPU5060 객체를 만들고, 센서 판독값에 대한 이벤트와 판독값을 보관하는 변수를 만듭니다.

 

// 센서 객체 만들기 Adafruit_MPU6050 mpu;

 

자이로스코프 오프셋

 

모든 축에서 자이로스코프 센서 오프셋을 조정합니다.

 

센서 오프셋을 얻으려면 파일 > 예제 > Adafruit MPU6050 > basic_readings로 이동합니다.센서를 정적 위치에 두고 자이로스코프 X, Y, Z 값을 확인합니다.그런 다음 해당 값을 gyroXerror, gyroYerror, gyroZerror 변수에 추가합니다.

 

MPU-6050 초기화

 

initMPU() 함수는 MPU-6050 센서를 초기화합니다.

 

LittleFS 초기화

 

initLittleFS() 함수는 ESP32 파일 시스템을 초기화하여 LittleFS에 저장된 파일(index.html, style.css, script.js)에 액세스할 수 있도록 합니다.

 

Wi-Fi 초기화

 

initWiFi() 함수는 ESP32를 로컬 네트워크에 연결합니다.

 

 

 

자이로스코프 판독값 가져오기

 

getGyroReadings() 함수는 새로운 자이로스코프 판독값을 가져오고 X, Y, Z축의 현재 각도 방향을 JSON 문자열로 반환합니다.

 

자이로스코프는 현재 각속도를 반환합니다. 각속도는 rad/s로 측정됩니다. 객체의 현재 위치를 확인하려면 각속도에 경과 시간(10밀리초)을 곱하고 이전 위치에 더해야 합니다.

 

현재 각도(rad) = 마지막 각도(rad) + 각속도(rad/s) * 시간(초)

 

gyroX_temp 변수는 현재 자이로스코프 X 값을 일시적으로 보관합니다.

 

float gyroX_temp = g.gyro.x;

 

센서의 작은 진동을 방지하기 위해(자이로스코프 오프셋 참조) 먼저 센서의 값이 오프셋보다 큰지 확인합니다.

 

if(abs(gyroX_temp) > gyroXerror) {

 

현재 값이 오프셋 값보다 큰 경우 유효한 판독값이 있다고 간주합니다. 따라서 이전 공식을 적용하여 현재 센서의 각 위치(gyroX)를 구할 수 있습니다.

 

gyroX += gyroX_temp / 50.0;

 

참고: 이론적으로 현재 각속도에 경과 시간(10밀리초 = 0.01초(gyroDelay))을 곱하거나 100으로 나누어야 합니다. 그러나 몇 가지 실험을 거친 후 50.0으로 나누면 센서가 더 잘 반응한다는 것을 알게 되었습니다. 센서가 다를 수 있으며 값을 조정해야 할 수도 있습니다.

 

Y 및 Z 값을 구하기 위해 비슷한 절차를 따릅니다.

 

마지막으로 JSON 변수(readings)에서 판독값을 연결하고 JSON 문자열(jsonString)을 반환합니다.

 

가속도계 판독값 가져오기

 

getAccReadings() 함수는 가속도계 판독값을 반환합니다.

 

온도 판독값 가져오기

 

getTemperature() 함수는 현재 온도 판독값을 반환합니다.

 

setup()

 

setup()에서 직렬 모니터, Wi-Fi, LittleFS 및 MPU 센서를 초기화합니다.

 

요청 처리

 

ESP32가 루트 URL에서 요청을 받으면 LittleFS에 저장된 HTML 파일(index.html) 콘텐츠와 함께 응답을 보내고 싶습니다.

 

send() 함수의 첫 번째 인수는 파일이 저장된 파일 시스템이며, 이 경우 LittleFS에 저장됩니다. 두 번째 인수는 파일이 있는 경로입니다. 세 번째 인수는 콘텐츠 유형(HTML 텍스트)을 참조합니다.

 

HTML 파일에서 style.css 및 script.js 파일을 참조합니다. 따라서 HTML 파일이 브라우저에 로드되면 해당 CSS 및 JavaScript 파일에 대한 요청을 합니다. 이들은 같은 디렉토리(LittleFS)에 저장된 정적 파일입니다. 따라서 루트 URL에서 요청 시 디렉토리에 정적 파일을 제공하기 위해 다음 줄을 간단히 추가할 수 있습니다. CSS와 JavaScript 파일을 자동으로 제공합니다.

 

server.serveStatic("/", LittleFS, "/");

 

또한 재설정 버튼을 눌렀을 때 발생하는 일을 처리해야 합니다. RESET POSITION 버튼을 누르면 ESP32가 /reset 경로에서 요청을 수신합니다. 그런 경우 gyroX, gyroY 및 gyroZ 변수를 0으로 설정하여 센서 초기 위치를 복원합니다.

 

요청이 성공했음을 나타내는 "OK" 응답을 보냅니다.

 

다른 요청(X, Y 및 Z 버튼)에 대해서도 비슷한 절차를 따릅니다.

 

다음 줄은 서버에서 이벤트 소스를 설정합니다.

 

마지막으로 서버를 시작합니다.

 

server.begin();

 

loop() – 이벤트 전송

 

loop()에서 새 센서 판독값과 함께 이벤트를 클라이언트로 전송합니다.

 

다음 줄은 10밀리초마다(gyroDelay) gyro_readings 이벤트에 자이로스코프 판독값을 보냅니다.

 

events 객체에서 send() 메서드를 사용하고 보내려는 콘텐츠와 이벤트 이름을 인수로 전달합니다. 이 경우 getGyroReadings() 함수에서 반환된 JSON 문자열을 보내고 싶습니다. send() 메서드는 char 유형의 변수를 허용하므로 c_str() 메서드를 사용하여 변수를 변환해야 합니다. 이벤트 이름은 gyro_readings입니다.

 

가속도계 판독값에 대해서도 비슷한 절차를 따르지만 다른 이벤트(accelerometer_readings)와 다른 지연 시간(accelerometerDelay)을 사용합니다.

 

마지막으로 온도 판독값에 대해서도:

 

코드 및 파일 업로드

 

네트워크 자격 증명을 삽입한 후 코드를 저장합니다. 스케치 > 스케치 폴더 표시로 이동하여 data라는 폴더를 만듭니다.

 

Arduino IDE Sketch 폴더를 열어 데이터 폴더를 만듭니다. 해당 폴더 안에 HTML, CSS, JavaScript 파일을 저장해야 합니다.

 

그런 다음 코드를 ESP32 보드에 업로드합니다. 올바른 보드와 COM 포트를 선택했는지 확인합니다. 또한 네트워크 자격 증명을 코드에 추가했는지 확인합니다.

 

Arduino IDE 2 업로드 버튼

 

코드를 업로드한 후 파일을 업로드해야 합니다. Arduino IDE에서 Windows에서는 [Ctrl] + [Shift] + [P]를 누르고 MacOS에서는 [⌘] + [Shift] + [P]를 눌러 명령 팔레트를 엽니다. LittleFS를 Pico/ESP8266/ESP32에 업로드 명령을 검색하여 클릭합니다.

 

LittleFS를 Pico ESP8266 ESP32 Arduino IDE에 업로드

 

이 옵션이 없는 경우 파일 시스템 업로더 플러그인을 설치하지 않았기 때문입니다. 이 튜토리얼을 확인하세요.

 

중요: 파일 시스템에 업로드하기 전에 직렬 모니터가 닫혔는지 확인하세요. 그렇지 않으면 업로드가 실패합니다.

 

모든 것이 성공적으로 업로드되면 115200의 전송 속도로 직렬 모니터를 엽니다. ESP32 EN/RST 버튼을 누르면 ESP32 IP 주소가 인쇄됩니다.

 

Arduino IDE 직렬 모니터에 인쇄된 ESP32 IP 주소

 

데모

 

브라우저를 열고 ESP32 IP 주소를 입력합니다. 센서 판독값을 표시하는 웹 페이지에 액세스할 수 있습니다.

 

센서를 움직여 브라우저에서 3D 객체와 함께 판독값이 변경되는 것을 확인하세요.

 

ESP32 ESP8266 NodeMCU 웹 서버 데모

 

참고: 코드에 약간의 조정이 있었음에도 불구하고 센서가 X축에서 약간 이동합니다. 많은 독자들이 이런 종류의 MCU에서는 정상적인 현상이라고 언급했습니다. 일부 독자는 이동을 줄이기 위해 보완 필터나 칼만 필터를 사용할 것을 제안했습니다.

 

마무리

 

MPU-6050은 단일 모듈에 가속도계, 자이로스코프 및 온도 센서가 들어 있습니다. 이 튜토리얼에서는 ESP32로 웹 서버를 빌드하여 MPU-6050 센서의 센서 판독값을 표시하는 방법을 알아보았습니다. 서버에서 전송한 이벤트를 사용하여 판독값을 클라이언트로 전송했습니다.

 

three.js JavaScript 라이브러리를 사용하여 자이로스코프 판독값에서 각도 위치를 보여주는 센서의 3D 표현을 빌드했습니다. 이 시스템은 완벽하지는 않지만 센서 방향에 대한 아이디어를 제공합니다. 이 주제에 대해 더 잘 아는 사람이 센서 보정에 대한 몇 가지 팁을 공유해 주시면 정말 감사하겠습니다.

 

이 튜토리얼이 유용했기를 바랍니다.

 

다음 리소스를 통해 ESP32에 대해 자세히 알아보세요.

 

ESP32 및 ESP8266 eBook으로 웹 서버 구축

 

Arduino IDE로 ESP32 배우기

 

더 많은 ESP32 프로젝트 및 가이드… 

 

이 튜토리얼의 원본 문서를 보시려면 이 링크를 따라가세요. 작성한 저자에게 감사합니다.