It includes the JavaScript canvas-gauges library in the head of the HTML file: The HTML file for this project is very simple. We’ll upload these files to the ESP32 filesystem (SPIFFS).Ĭopy the following to the index.html file. You should save the HTML, CSS, and JavaScript files inside a folder called datainside the Arduino sketch folder, as shown in the previous diagram. For that, wire the sensor to the default ESP32 SCL ( GPIO 22) and SDA ( GPIO 21) pins, as shown in the following schematic diagram. We’re going to use I2C communication with the BME280 sensor module. We’ll send temperature and humidity readings from a BME280 sensor. You can use the preceding links or go directly to /tools to find all the parts for your projects at the best price! If you don’t have the sensor, you can also experiment with random values to learn how the project works. You can use any other sensor, or display any other values that are useful for your project.

ESP32 (read Best ESP32 development boards).

To follow this tutorial you need the following parts:

If you’re programming the ESP32 using PlatformIO, you should add the following lines to the platformio.ini file to include the libraries (also change the Serial Monitor speed to 115200): monitor_speed = 115200Īdafruit/Adafruit Unified Sensor ^1.1.4 Parts Required Installing Libraries (VS Code + PlatformIO) zip Library and select the libraries you’ve just downloaded. zip folders, and then, in your Arduino IDE, go to Sketch > Include Library > Add. The ESPAsyncWebServer and AsynTCP libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation Libraries folder. Go to Sketch > Include Library > Manage Libraries and search for the libraries’ names. You can install the first three libraries using the Arduino Library Manager. Arduino_JSON library by Arduino version 0.1.0 (Arduino Library Manager).

Adafruit_Sensor library (Arduino Library Manager).Adafruit_BME280 (Arduino Library Manager).To build this project, you need to install the following libraries: ESP32 with VS Code and PlatformIO: Upload Files to Filesystem (SPIFFS).If you’re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem: ESP32: Install SPIFFS FileSystem Uploader Plugin in Arduino IDE.Follow the next tutorial to install the filesystem uploader plugin: To upload the HTML, CSS, and JavaScript files to the ESP32 flash memory (SPIFFS), we’ll use a plugin for Arduino IDE: SPIFFS Filesystem uploader. Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu).If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:

Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux).Follow the next tutorial if you haven’t already: So, you must have the ESP32 add-on installed. We’ll program the ESP32 using Arduino IDE. Make sure you check all the prerequisites in this section before continuing with the project. ESP32 Web Server using SPIFFS (SPI Flash File System).Learn more about building a web server with files saved on the filesystem:

To keep our project better organized and easier to understand, we’ll save the HTML, CSS, and JavaScript files to build the web page on the board’s filesystem (SPIFFS).

ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically).

Esp8266 arduino web server example