Control a LED Matrix via web interface with Arduino ESP32

Name: Control a LED Matrix via web interface with Arduino ESP32
Rating: 4.3 (26 reviews)

Via a local web server at the ESP we can change the ticker on the LED matrix (MAX7219 8x32)

Created byMarkus Edenhauser

Last updated 12/2021

English

English [Auto],

What you'll learn

Control of LED matrix via created web interface
Using HTTP request to load data from public APIs
Using JSON objects in Arduino
Displaying graphics and text on a display

Course content

5 sections • 28 lectures • 2h 22m total length

Overview LED Matrix0:46
Explore wiring the LED matrix for the Arduino ESP32 project, cover ESP32 and ESP8266 hardware, and begin assembling the cross-platform design.
Power supply with step-down module2:06
Use a 12-volt supply with a step-down module to deliver 5 volts for the Arduino and LCD/OLED panels on a breadboard, enabling flexible power for multiple panels.
Wiring ESP323:47
Connect the ESP32 to a power supply and breadboard, linking plus and ground, with the green pin on GPIO 23 and the clock on GPIO 18.
Wiring ESP82663:21
Wire the ESP8266 to the Arduino on a breadboard, connect plus and ground to the power supply, and set data to D7 and clock to D5 as defined.
All files from this online course0:03

Intro0:47
IDE Setup3:05
Set up the Arduino IDE for the ESP32 by configuring preferences, installing ESP32 boards via board manager, and selecting the correct port in tools on Windows.
Libraries and first text output9:17
Set up the ESP32 led matrix library, create a dedicated header file for modular code, and display the first scrolling text with the MD Parola library on the Arduino IDE.
Adjust the sliding text2:35
Learn to control a LED matrix via a web interface with an Arduino ESP32. Adjust sliding text speed and position, invert text, and upload sketches to explore matrix capabilities.
Interconnect LED module1:55
Connect led panels to form an eight-by-eight matrix by interconnecting two panels along the edges. Upload the sketch to the Arduino and expand with more panels to slide text across.
Pacman and text4:24
Animate a Pac-Man sprite on an eight-by-eight led matrix using sprite data. Have Pac-Man enter from the left and eat static text as it travels.
Rocket, bunny, heart and other content13:39
Learn to drive led matrix with Arduino ESP32 by cycling graphics like rocket, bunny, pac-man, ghosts, and hearts using a change_display function and blink without delay loop, enabling web control.
Create and display your own graphic Let's go online5:24
Design and display an emoji graphic on a led matrix controlled by an Arduino ESP32, using a web interface to generate and edit frames, and animate two frames per second.

Intro0:59
Explore building a web interface to control a LED matrix with an Arduino ESP32, using get requests to send data, store content in flash memory, and render graphics and text.
Establish wifi connection4:13
Establish a wifi connection for the LED matrix project using an Arduino ESP32, including credentials, access points, and an IP address, then verify the connection.
SPIFFS9:32
Use the spivs library on the Arduino ESP32 to save, delete, and read a text file in flash memory with a global message buffer.
SPIFFS Data uploader3:59
Set up the SPIFFS data uploader in the Arduino IDE to save index items to flash memory and the web server, then load data from SPIFFS for the browser.
Web server for this project9:19
Learn to set up a web server on the ESP32 project, configure a static local IP, and serve index.html with data, style, and jQuery for led matrix control.
HTML Input und GET-Request7:58
Build a web interface with an input field and submit button to send text to an Arduino ESP32 via a get request, using a url parameter.
GET parameters on the Arduino7:01
Explore how to implement get requests on an Arduino ESP32 web server, save parameters to SPIFF, and display the latest text on the serial monitor and web interface.
Pass text from website6:34
Pass text from website updates the LED matrix display via the ESP32, using the select text function and scroll left to reflect website changes in real time.
Show SPIFFS data on website5:21
load spifs data from the esp32 and display it on a website for an LED matrix via an index.html and a variable; send updates from the site to flash memory.
Control graphics and text via website7:02
Learn to control the led matrix via a website by selecting graphics and text with radio buttons and updating the display through user input.

Intro0:38
learn to fetch external data via an api, convert timestamps to readable date and time, and display the results on a led matrix with Arduino ESP32, including bitcoin price.
Show current time via NTP server8:53
Show the current time on an LED matrix using Arduino ESP32 by fetching a timestamp from an NTP server, converting it to a readable date, and updating every 15 seconds.
Cryptocurrency via free API9:00
Fetch bitcoin price data from the CoinGecko api using an http client on the Arduino ESP32 and display BTC USD on a led matrix with a 20-second update interval.

Adapt to ESP82668:35
Adapt the existing project to the ESP8266 by reconfiguring wiring, boards, and libraries, enabling wifi over ssl, fetching crypto data via api, parsing json, and updating the web interface.
Conclusio and goodbye2:14
Conclude by wiring four-by-eight led matrix with Arduino ESP32, setting up wifi, and building a web interface to edit text, graphics, and display bitcoin prices on the matrix via API.

Requirements

First experience in Arduino development. You know how to use the IDE and include libraries.

Description

We build this practical project step by step and you can download all the codes for each chapter. Frustration-free development is guaranteed!

In this video course you will learn how to control a 8x32 LED matrix (or a MAX72xx module). We use the MD_Parola library for this project. With this library we can control the text in many different ways. With this library we have the possibility to implement different ticker settings easily and fast. A text can slide in from one side and stop in the middle of the matrix for a certain time. The duration of the ticker can be adjusted and also the speed and brightness of the ticker can be easily adjusted.

We will also insert dot graphics that will make the text "disappear" as soon as the graphic slides over the text.

We will create a website in the course using a local web server running on the ESP32/8266. The web server will be configured in such a way that you can access the created (also in this course) website using a fixed IP address. On the website there is an input field where you can enter text. Using jQuery we send a GET request to the Arduino, which evaluates the content and displays it on the LED matrix. This way you can individually control the text via the web server.

The text as well as the website data are stored on the ESP using SPIFFS. This is the flash memory of the Arduino. This means that the current text can be displayed on the website after each opening. By storing the data on the flash memory, every person/end device that calls up the website can see the current text on the LED matrix. Thus, one could also design a larger advertising space via a web server. If the Arduino were disconnected from power, the content of the output would not disappear and would automatically output the text again when the power source is connected again.

We will also display the local time. For this we connect to a NTP server and download the current timestamp. We convert this timestamp into a readable date/time.

Last but not least, we fetch the current bitcoin price from a public interface. Thus you learn how to control public APIs with the Arduino and how to evaluate the return value using Arduino JSON.

After each video I have saved my code. You can download all codes, so you can get to the result without frustration.

We use the following components in this project.

ESP32/ESP8266
MAX7219 8x32 LED-Matrix
Step-down-Modul for external 12v power supply (optional)

See you in class.
pixelEDI

Who this course is for:

To all DIY enthusiasts and hobby developers who develop with the Arduino platform.

Control a LED Matrix via web interface with Arduino ESP32

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 10min

LED Matrix8 lectures • 41min

Let's go online10 lectures • 1hr 2min

Display external data3 lectures • 19min

Conclusio2 lectures • 11min

Requirements

Description

Who this course is for: