936: Realtime LED Wall With React + Websockets (I Let Strangers Control It)

Key takeaways

Combining hardware and software can lead to engaging projects that are both fun and educational.
Understanding power management is crucial when designing projects involving high numbers of LEDs.
Using real-time web technologies like Cloudflare Durable Objects can enhance interactivity in applications.
Experimentation and a hands-on approach are essential for debugging and improving DIY electronics projects.

Summary

Wes' Hackweek Project Introduction

The podcast opens with Wes detailing his Hackweek project focused on building a real-time web-controlled LED grid. This project involves both hardware and software components, emphasizing the fun and educational aspects of the build. Wes encourages listeners to check out the video version on platforms like Spotify or YouTube, where visual elements enhance understanding.

Hardware Components of the LED Grid

Discussions about the hardware component highlight the use of WS2812 LED panels, which are individually addressable and modular. Wes explains the process of wiring and soldering the panels together into a cohesive grid structure, addressing practical challenges he encountered during assembly, such as soldering issues and the importance of power management.

ESP32 Microcontroller and WLED Firmware

Wes dives into the critical role of the ESP32 microcontroller, which is paired with WLED firmware. This section details how the microcontroller drives the LED grid with real-time color changes and how it can operate both locally and over Wi-Fi. Wes also shares insights about the power requirements and challenges of controlling large numbers of LEDs.

Power Management Solutions

Addressing power concerns, Wes explains his strategy for handling the high power demand of the LED grid, including the use of power injection methods to reduce overheating. He also discusses the limitations of USB power supplies and the solutions he implemented to ensure efficient operation.

Real-time Software Architecture

Exploring the software side, Wes breaks down how he used Cloudflare Durable Objects and Party Server to manage state and provide real-time interaction among users drawing on the LED grid. He emphasizes how web socket connections facilitate instantaneous updates across clients.

Live Demo and Future Plans

Towards the end of the episode, Wes performs a live demonstration of the LED grid's capabilities, allowing for real-time drawing and pixel control. Future project ideas are discussed, including enhancements like adding social statistics, improving user interfaces, and creating personalized drawing rooms.

Show notes

Scott, Wes, and CJ dive into Wes’s Hackweek project: a real-time, web-controlled LED grid. They break down the hardware build, custom 3D-printed diffuser, ESP32 microcontroller, and Cloudflare durable objects powering live pixel art, GitHub activity displays, and interactive web drawings.

Show Notes

00:00 Welcome to Syntax!

02:03 Wes’ Hackweek project: a web-controlled LED grid

03:52 The hardware: LED panels, soldering, and power

WS2812 LED panels

06:38 ESP32 microcontroller and WLED firmware explained

ESP32 Microcontroller

10:57 Power supply challenges and injection fixes

15:05 Debugging and testing a DIY LED matrix

15:56 Shorts, blown circuits, and melted wires

17:58 Designing and 3D-printing the diffuser for crisp pixels

21:29 The software: Cloudflare Durable Objects + Party Server

Cloudflare Durable Objects

Party.server

22:18 Real-time sync and state management across clients

Party Client

28:43 Connecting the server to the LED hardware

41:51 Open access fun: scripts, NSFW images, and moderation

Cloudflare tunnel

44:10 Live demos

45:34 Future plans: stats, rooms, and making it always-on

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads