Build a Smart PC Display with ESP32-P4

Mukesh Sankhla Sep 03.2026

0 32 Easy

PC builds are becoming more than just powerful machines—they're also becoming showcases. For this project, we built a compact PC cabinet display using the FireBeetle 2 ESP32-P4 and an 8.8" IPS Bar Display with a resolution of 1920×480 pixels.

The ultra-wide format makes it ideal for mounting inside a PC cabinet while providing enough screen real estate for animations, videos, system information, clocks, temperatures, CPU/GPU usage, and other custom dashboards.

The ESP32-P4 handles the display and multimedia workload, allowing the screen to play videos at 24 FPS, render images, and display dynamically updated information. The result is a standalone, highly customizable display that adds both functionality and a unique visual element to a PC build.

HARDWARE LIST

1 DFRobot FireBeetle 2 ESP32-P4

Link

1 8.8" IPS Bar Display — 480×1920, DSI

Link

1x SD Card
2× M2 Phillips Screws
3D-printed parts
Screwdriver
Soldering station

CAD Designing & 3D Printing

I designed the complete enclosure in Fusion 360, keeping the design simple and modular. The enclosure consists of three main parts:

Main Housing – Holds the 8.8" IPS bar display and the FireBeetle 2 ESP32-P4.
ESP32-P4 Mounting Bracket – A dedicated bracket that secures the ESP32-P4 to the main housing using screws.
Back Cover – A snap-fit cover that attaches to the back of the housing, protecting the electronics while keeping the assembly clean.

Once the design was finalized, I 3D printed all three parts using black PLA, giving the finished display a clean look that blends nicely into a PC cabinet.

Copy Animations to the SD Card

Before we start assembling the hardware, let's prepare the SD card with the animation files that the ESP32-P4 will play.

Insert the SD card into your PC using an SD card reader.

Download the animation package from Google Drive: Download the Animation Files

Extract the downloaded ZIP file. You should find two folders:

Vertical
Horizontal

Copy both folders directly to the root directory of the SD card.

The final folder structure should look like this:

SD Card/
├── Vertical/
│ ├── 1.mjpeg
│ ├── 2.mjpeg
│ ├── 3.mjpeg
│ └── ...
│
└── Horizontal/
├── 1.mjpeg
├── 2.mjpeg
├── 3.mjpeg
└── ...

Make sure the Vertical and Horizontal folders are directly on the SD card root, not inside another folder.

Once the files have finished copying, safely eject the SD card from your PC.

Insert the SD card into the ESP32-P4.

The ESP32-P4 firmware will automatically read the .mjpeg animation files from the appropriate folder during playback.

ESP32-P4 Mounting Assembly

Take the FireBeetle 2 ESP32-P4, the 3D-printed mounting bracket, and 2× M2 Phillips screws.

Align the ESP32-P4 with the mounting holes on the bracket, as shown in the image. Once aligned, use the two M2 screws to securely fasten the board to the bracket.

Make sure the board is seated properly and the screws are tightened snugly without overtightening.

Display Assembly

Now take the Display, the 3D-printed housing, and the ESP32-P4 mounting assembly.

First, align the display with the main housing. Slide the display toward the side with the display holding groove and carefully seat it into place. Make sure the display is properly aligned and fully supported by the housing.

Next, take the ESP32-P4 mounting assembly and position it inside the housing. Align the USB Type-C port with the opening in the housing, then secure the mounting bracket to the housing using the 2× M2 Phillips screws.

Once secured, check that the display and ESP32-P4 are firmly seated and that the Type-C port is accessible from the outside.

Connecting the Display

Now it’s time to connect the display to the ESP32-P4.

Take the DSI cable that came with the display and connect it between the ESP32-P4 and the display’s DSI connector. Pay close attention to the cable orientation and refer to the image to make sure the connector is inserted in the correct direction.

Next, take a suitable wire and connect the VCC pin on the ESP32-P4 to the 5V input of the display. This provides power to the display directly from the ESP32-P4.

Double-check both connections before powering up the assembly, especially the DSI cable orientation and 5V/VCC connection.

Attaching the Back Cover

Finally, take the 3D-printed back cover and align it with the main housing.

Simply press the cover into place until all the snap-fit points securely click into position. Make sure the cover is fully seated and there are no gaps around the edges.

And that's it—the ESP32-P4 PC Cabinet Display is now fully assembled and ready to connect to your PC.

Flashing the Firmware

This step is easy thanks to the EasyFlash Web App. There is no need to install Arduino IDE or manually configure the ESP32-P4 board.

Open the EasyFlash Web Appin your web browser.
Connect the ESP32-P4 to your PC using a USB Type-C cable.
Make sure you are using a USB cable that supports data transfer, not a charge-only cable.
Click Connect & Flash.
Your browser will ask you to select the ESP32-P4's COM port. Select the correct port and it will start the flashing process.

That's it!

The firmware will be downloaded and flashed automatically. The entire flashing process should take less than two minutes.

We have two firmware versions available:

1. Animation Player Edition: Hardware-accelerated 24 FPS MJPEG video playback from SD card with automatic looping and PWM backlight dimming.

2. Telemetry HUD Edition: Real-time PC CPU/GPU stats overlay with background MJPEG animation video loops and USB-C serial streaming.

Choose the firmware based on how you want to use the display.

Source Code

If you want to explore, modify, or build the firmware yourself, the complete source code is available on GitHub: MukeshSankhla/ESP32_P4_DSI - GitHub

Button Setup

I have soldered a 2-pin header directly to GND and GPIO 32, as these two pins are adjacent to each other.

This connector is used to connect the control button. Instead of adding a separate button, I connected the 2-pin LED/button connector from my PC cabinet to these pins. This allows me to use the existing cabinet LED button as the control button, so I don't need to add another physical button or worry about the aesthetics of the enclosure.

With this setup, the button functions are:

Animation Player Edition — Button Actions

Single click → Next background/animation
Double click → Change Vertical ↔ Horizontal
Long press ≥ 2 sec → Restart ESP32

Telemetry HUD Edition — Button Actions

Single click → Next background animation
Double click → Next HUD layout
Triple click → Toggle Vertical ↔ Horizontal
Long press ≥ 2 sec → Restart ESP32

Code 1 - Animation Player Edition( Basic MJPEG Display Player)

The first code is essentially a background animation/video player.

Working

Hardware initialization

Configures the DSI LCD reset pin, backlight, I²C backlight controller, SD_MMC pins, and button.
The display is configured as 480 × 1920 RGB565 with double frame buffers.

SD card

The program scans either:

/Vertical
/Horizontal
The program scans either:/Vertical
/Horizontal
It looks for .mjpeg files and creates a playlist.

MJPEG playback

Each .mjpeg file is read from the SD card in 4096-byte blocks.
The program detects JPEG start (FF D8) and end (FF D9) markers.
Each JPEG frame is sent to the hardware JPEG decoder.
The decoded RGB565 frame is then copied to the display framebuffer.

Vertical / Horizontal mode

In Vertical mode, the decoded 480 × 1920 frame is copied directly.
In Horizontal mode, a 1920 × 480 frame is rotated 90° so it can be displayed on the physical 480 × 1920 panel.

Frame rate

Playback is paced at 24 FPS.
Button events are checked between frames so the user can change the animation without waiting for the current video to finish.

Settings memory

The current animation number and display orientation are stored in NVS/Preferences.
Therefore, after reboot, the device remembers the last animation and orientation.