ESP32 Web Server with MPU-6050 Accelerometer and Gyroscope (3D object representation)

In this project we’ll build a web server with the ESP32 to display readings from the MPU-6050 accelerometer and gyroscope sensor. We’ll also create a 3D representation of the sensor orientation on the web browser. The readings are updated automatically using Server-Sent Events and the 3D representation is handled using a JavaScript library called three.js. The ESP32 board will be programmed using the Arduino core.
To build the web server we’ll use the ESPAsyncWebServer library that provides an easy way to build an asynchronous web server and handle Server-Sent Events.
To learn more about Server-Sent Events, read:
ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)
Watch the following video for a preview of the project we’ll build.
Project Overview
Before going straight to the project, it’s important to outline what our web server will do, so that it is easier to understand.
The web server displays the gyroscope values of the X, Y an Z axis;
The gyroscope values are updated on the web server every 10 milliseconds;
It displays the accelerometer values (X, Y, Z). These values are updated every 200 milliseconds;
The MPU-6050 sensor module also measures temperature, so we’ll also display the temperature value. The temperature is updated every second (1000 milliseconds);
All the readings are updated using Server-Sent Events;
There is a 3D representation of the sensor. The orientation of the 3D object changes accordingly to the sensor orientation. The current position of the sensor is calculated using the gyroscope values;
The 3D object is created using a JavaScript library called
three.js
;
There are four buttons to adjust the position of the 3D object:
RESET POSITION: sets angular position to zero on all axis;
X: sets the X angular position to zero;
Y: sets the Y angular position to zero;
Z: sets the Z angular position to zero;
ESP32 Filesystem
To keep our project organized and make it easier to understand, we’ll create four different files to build the web server:
the Arduino code that handles the web server;
HTML file: to define the content of the web page;
CSS file: to style the web page;
JavaScript file: to program the behavior of the web page (handle web server responses, events and creating the 3D object).
The HTML, CSS and JavaScript files will be uploaded to the ESP32 LittleFS filesystem. To upload files to the ESP32 filesystem, we’ll use the
LittleFS Uploader Plugin
. Make sure you install it on your Arduino IDE:
Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)
If you’re using PlatformIO + VS Code, read this article to learn how to upload files to the ESP32 filesystem:
ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem
MPU-6050 Gyroscope and Accelerometer
The MPU-6050 is a module with a 3-axis accelerometer and a 3-axis gyroscope.
The gyroscope measures rotational velocity (rad/s) – this is the change of the angular position over time along the X, Y and Z axis (roll, pitch and yaw). This allows us to determine the orientation of an object.
The accelerometer measures acceleration (rate of change of the velocity of an object). It senses static foces like gravity (9.8m/s
2
) or dynamic forces like vibrations or movement. The MPU-6050 measures acceleration over the X, Y an Z axis. Ideally, in a static object the acceleration over the Z axis is equal to the gravitational force, and it should be zero on the X and Y axis.
Using the values from the accelerometer, it is possible to calculate the roll and pitch angles using trigonometry, but it is not possible to calculate the yaw.
We can combine the information from both sensors to get accurate information about the sensor orientation.
Learn more about the MPU-6050 sensor:
ESP32 with MPU-6050 Accelerometer, Gyroscope and Temperature Sensor
Schematic Diagram – ESP32 with MPU-6050
For this project you need the following parts:
MPU-6050 Accelerometer Gyroscope
(
ESP32 Guide
)
ESP32
(read
Best ESP32 development boards
)
Breadboard
Jumper wires
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Wire the ESP32 to the MPU-6050 sensor as shown in the following schematic diagram: connect the SCL pin to
GPIO 22
and the SDA pin to
GPIO 21
Preparing Arduino IDE
We’ll program the ESP32 board using Arduino IDE. So, make sure you have the ESP32 add-on installed. Follow the next tutorial:
Install the ESP32 Board in Arduino IDE
If you prefer using VSCode + PlatformIO, follow the next tutorial instead:
Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266
Installing Libraries
There are different ways to get readings from the sensor. In this tutorial, we’ll use the
Adafruit MPU6050 library
. To use this library you also need to install the
Adafruit Unified Sensor library
and the
Adafruit Bus IO Library
To build the web server, we’ll use the
ESPAsyncWebServer
and the
AsyncTCP
libraries. In this example, we’ll send the sensor readings to the browser in JSON format. To make it easier to handle JSON variables, we’ll use the
Arduino_JSON library
by Arduino.
Here’s the list of libraries you need to install:
Adafruit MPU6050 library
Adafruit Unified Sensor library
Adafruit Bus IO Library
ESPAsyncWebServer
by ESP32Async
AsyncTCP
by ESP32Async
Arduino_JSON library
by Arduino
Open your Arduino IDE and go to
Sketch
>
Include Library
>
Manage Libraries
. The Library Manager should open. Search for the libraries’ names and install them.
Filesystem Uploader Plugin
To follow this tutorial you should have the ESP32 Filesystem Uploader plugin installed in your Arduino IDE. If you don’t, follow the next tutorial to install it:
Install ESP32 LittleFS Filesystem Uploader on Arduino IDE
If you’re using VS Code + PlatformIO, follow the next tutorial to learn how to upload files to the ESP32 filesystem:
ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem
Organizing Your Files
To build the web server you need four different files. The Arduino sketch, the HTML file, the CSS file and the JavaScript file. The HTML, CSS and JavaScript files should be saved inside a folder called
data
inside the Arduino sketch folder, as shown below:
You can download all project files:
Download ESP_Web_Server_MPU6050.ino, index.html, style.css and script.js
Creating the HTML File
Create an
index.html
file with the following content or
download all the project files
<!--

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->

<!DOCTYPE HTML><html>
<head>
<title>ESP Web Server</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"icon\" href=\"data:,\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.7.2/css/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\">
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js\"></script>
</head>
<body>
<div class=\"topnav\">
<i class=\"far fa-compass\"></i> MPU6050 <i class=\"far fa-compass\"></i></h1>
</div>
<div class=\"content\">
<div class=\"cards\">
<div class=\"card\">
<p class=\"card-title\">GYROSCOPE</p>
<span class=\"reading\">X: <span id=\"gyroX\"></span> rad</span></p>
<span class=\"reading\">Y: <span id=\"gyroY\"></span> rad</span></p>
<span class=\"reading\">Z: <span id=\"gyroZ\"></span> rad</span></p>
</div>
<di