Arduino - LED Matrix via Web
In this tutorial, we are going to learn how to control an LED Matrix through a web interface using a browser on a PC or smartphone, utilizing the Arduino Uno R4 WiFi. In detail, the Arduino Uno R4 WiFi will be programmed to work as a web server. Let's assume that the IP address of the Arduino Uno R4 WiFi is 192.168.0.2. Here are the details of how it works:
- When you enter 192.168.0.2 into the web browser, the browser sends a request to the Arduino, and the Arduino responds with a web page that contains a message box.
- You type a message to the message box and click the send button. The message is sent to Arduino.
- Arduino displays the message on the LED Matrix.
Or you can buy the following sensor kit:
|DIYables Sensor Kit 30 types, 69 units
About LED Matrix and Arduino Uno R4
If you do not know about LED Matrix and Arduino Uno R4 (pinout, how it works, how to program ...), learn about them in the following tutorials:
This image is created using Fritzing. Click to enlarge image
- If this is the first time you use Arduino Uno R4, see how to setup environment for Arduino Uno R4 on Arduino IDE.
- Open the Arduino IDE.
- Search “MD_Parola”, then find the MD_Parola library
- Click Install button.
- You will be asked to install the MD_MAX72XX library for dependency. Click Install All button.
- Create a new sketch. Give it a name, for example, ArduinoGetStarted.com.ino.
- Copy the code provided below and paste it to the created file.
- Change the WiFi information (SSID and password) in the code to yours
- 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 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: ArduinoGetStarted.com.ino and index.h
- Click Upload button on Arduino IDE to upload code to Arduino
- See the result on Serial Monitor.
- You will see an IP address, for example: 192.168.0.2. This is the IP address of the Arduino Web Server
- Open a web browser and enter one of the IP address into the address bar.
- Kindly be aware that the IP address might vary. Please verify the current value on the Serial Monitor.
- You will also see the below output on Serial Monitor
- You will see the web page of Arduino board on the web browser as below
- Type a message and click the send button to send the message to Arduino.
- Check out the LED Matrix display.
※ NOTE THAT:
- If alterations are made to the HTML content within the index.h file without any modifications to the ArduinoGetStarted.com.ino file, the Arduino IDE will not automatically refresh or update the HTML content during the compilation and upload of the code to the ESP32.
- To compel the Arduino IDE to update the HTML content in such a scenario, it is necessary to make a modification in the ArduinoGetStarted.com.ino file. For instance, you can add an empty line or insert a comment. This action prompts the IDE to acknowledge the changes in the project, ensuring that the revised HTML content is included in the upload.