Arduino Nano ESP32 - LED Matrix via Web
In this tutorial, we will learn how to control LED matrix signboard via web interface using Arduino Nano ESP32. In detail, we will program Arduino Nano ESP32 to become a web server that does the following:
- Returns a web interface to users when receiving a request from a web browser.
- Provides the web interface that users can send the message to Arduino Nano ESP32
- Displays the messages on the LED matrix once receiving the message.
Hardware Preparation
1 | × | Arduino Nano ESP32 | |
1 | × | USB Cable Type-C | |
1 | × | FC-16 LED Matrix 32x8 | |
1 | × | Breadboard | |
1 | × | Jumper Wires | |
1 | × | (Optional) DC Power Jack | |
1 | × | (Recommended) Screw Terminal Adapter for Arduino Nano |
Or you can buy the following sensor kits:
1 | × | DIYables Sensor Kit (30 sensors/displays) | |
1 | × | DIYables Sensor Kit (18 sensors/displays) |
Overview of LED Matrix and Web Server
We can use a pure HTTP to send a text from web interface to Arduino Nano ESP32. However, using WebSocket makes it looks more responsive and does not add much difficuity, So in this tutorial, we will use the WebSocket.
Unfamiliar with LED Matrix and Web Server and WebSocket, including their pinouts, functionality, and programming? Explore comprehensive tutorials on these topics below:
- Arduino Nano ESP32 - LED Matrix tutorial
- Arduino Nano ESP32 - Web Server tutorial
- Arduino Nano ESP32 - WebSocket tutorial
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
Arduino Nano ESP32 Code
The webpage's content (HTML, CSS, JavaScript) are stored separately on an index.h file. So, we will have two code files on Arduino IDE:
- An .ino file that is Arduino Nano ESP32 code, which creates a web sever and WebSocket server
- An .h file, which contains the webpage's content.
Detailed Instructions
- If this is the first time you use Arduino Nano ESP32, see how to setup environment for Arduino Nano ESP32 on Arduino IDE.
- Connect the Arduino Nano ESP32 board to your PC via a micro USB caweb server
- Open Arduino IDE on your PC.
- Select the right Arduino Nano ESP32 board (e.g. Arduino Nano ESP32) and COM port.
- Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
- Search “ESPAsyncWebServer”, then find the ESPAsyncWebServer created by lacamera.
- Click Install button to install ESPAsyncWebServer library.
- You will be asked to install the dependency. Click Install All button.
- Search “WebSockets”, then find the WebSockets created by Markus Sattler.
- Click Install button to install WebSockets library.
- Search “MD_Parola”, then find the MD_Parola library
- Click Install button.
- You will be asked to install the “MD_MAX72XX” library
- Click Install All button to install the dependency.
- On Arduino IDE, create new sketch, Give it a name, for example, newbiely.com.ino
- Copy the below code and open with Arduino IDE
- Create the index.h file On Arduino IDE by:
- Either click on the button just below the serial monitor icon and choose New Tab, or use Ctrl+Shift+N keys.
- Give the file's name index.h and click OK button
- Copy the below code and paste it to the index.h.
- Now you have the code in two files: newbiely.com.ino and index.h
- Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32.
- Open the Serial Monitor
- Check out the result on Serial Monitor.
- Take note of the IP address displayed, and enter this address into the address bar of a web browser on your smartphone or PC.
- You will see the webpage it as below:
- Click the CONNECT button to connect the webpage to Arduino Nano ESP32 via WebSocket.
- Type some words and send them to Arduino Nano ESP32.
- You will see the response from Arduino Nano ESP32.
- If you modify the HTML content in the index.h and does not touch anything in newbiely.com.ino file, when you compile and upload code to ESP32, Arduino IDE will not update the HTML content.
- To make Arduino IDE update the HTML content in this case, make a change in the newbiely.com.ino file (e.g. adding empty line, add a comment....)
※ NOTE THAT:
Line-by-line Code Explanation
The above Arduino Nano ESP32 code contains line-by-line explanation. Please read the comments in the code!