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

data

that is awesome for put my hand on it, and I realized it the wires were getting very hot.

the I don't know. Is there enough detail here that you could then send that to a, like, a Wes, not safe for work, detection library. I think you could do a client side. There's gotta be a client side detection for that. Yeah. Let me let me show you what it looks like when I just upload a that kinda that's kinda slow. And and these things these WLEDs are not slow. Right? You can you can put, like, gradients on them and and whatnot. They're pretty powerful.

I ended up making a bridge in there.

I am now able to just, like, put whatever it is that I I want on there. Okay. So let's get on And I put 12 volts to it. So Nice. Too much.

The WebSocket API about all of the different pieces and get into the nitty gritty. There's a lot of really fun stuff and a lot of fun stuff you're gonna learn about it. I should say this is gonna be a pretty video heavy episode. If you're listening to this on the audio podcast, to play with play with all of that. And then on the the software side of things, there was kind of two pieces. There was the entire resistance.

anything in in this case. Nice.

something that makes me personally want to

or an HTTP request.

The LED And then if you see a certain percentage of voltage drop, like, if it's if it's, like, 20% less, that's that's not good. Right? You should you shouldn't see that much voltage drop over it. So there's kind of a lot to this grid until it JS you can. So what I did is I just I desoldered it, and I just ran power from the power supply Woah.

the Cloudflare And chain them together Yeah. For that.

and then that was acquired. So he's back there. Mhmm. Wes. And he's working on all kinds of interesting agent stuff as well. I shouldn't have said, like, Sanity Kit is not no longer maintained, but they Cloudflare, So I wrote a whole bunch of logic for I was like, man, like, and share in order to send data from to Yeah. But they're they're moving it to something called Sanity server, which is a bit more of a a peeled back layer,

Yeah. Yeah. Yeah. That's how my it's actually funny how how my softbox works. Although the grid is on top of the diffuser, just diffuser and then grid. But that's for softbox. That's a completely different application. But oh, it's the same idea, though.

It's, like, so crispy, Yes.

Well, I Wes just saying, this is one of my favorite parts of the build because, like, I've tried to mess with, pixel arrays before, and I've never come across a good diffusing solution. So I love the fact that, like, each pixel is basically a black

and the the Vite dev server was serving up it's going to say, okay. Pixel 400, pixel 800, and pixel six fifty that I put together. So Century has this thing called Hack Week Wes you get a to build whatever it is that you want, maybe a product.

with a serverless function or or a Cloudflare worker Wes these things spin up and down tons of connections. It was proxying the Wes sockets.

can pull 94 like, memory to the actual

So I guess to clarify, is that just like a separate process running on your computer? It's basically another

Yeah. And I'll explain how I got that in just a sec as Wes. But, man, it looks awesome. I've been I'm very happy with it.

Not that it can't hold an array of 2,300 every single pixel JS. And then that that data source of truth is is the Cloudflare durable object.

And,

Okay. Yeah. So I have the app open on my computer too. This is this is very real time. You just on the on the page itself, seeing his pixels.

volts.

and then you check the voltage on the output.

RGBW send over a data ESLint. Because the way that the data line works is that it snakes through it. So you start the data at one pixel, and it goes in and then into the next one, into the next one. And that's actually how it does it with power as well. It sends the the five volts in and out. But once you start to like, you can do a little demo with one of these really quickly. You don't even have to have an external power supply. But once you nothing awful.

I could have buttons on my I did. Busted.

and I explicitly like, a Firefox logo and drag it on here, it would very quickly overwhelm the WebSocket Sanity not so much that it would reject it, so much that it would crash

would have been the thing that makes me wanna get a new computer? That's the only time I'm like, man, my computer sucks JS when I have OBS open. I can't even figure it out because my

script that basically just joined this room The WLED has several different ways to send data to it.

If I were to close OBS,

I was doing way too much already with this Yeah. Yeah. Just doing too much. It's like Yeah. You're saying you it. Your diffuser's got a BBL?

that will allow you to you can run all kinds of different animations, you can change the colors of them.

and and make a an an an entire matrix of them. So what I did is I I took nine of them, and I put them into, obviously, a three by three for name on it and and you set that to Scott. Right? And then you come back in six months, that JavaScript object will still be there, and then you can also share that object aside from also has, like, it has has Wi Fi. You can you can open it up on any browser. You can get apps that connect to it, but it also has whatever you want to to the value. And there JS there is several other and and you never get a response back from it. You just send, send, send, send. And that's how I did a video many years ago flying a drone with React.

much dimmer when you do, like, a purple versus just a a flat white.

like, a a JavaScript object or a JavaScript class. Here, let me open up some code here. You're gonna remove the photos the dogs were putting on your Oh.

and you can change it to be WebSockets.

This type of tech, is this primarily used for stuff like this? You wouldn't go building your whole

on here. Like, this that WLED is not running on my computer. It's literally running on an Wes. Not not this one, but, that had a property called I guess there's, like, several instances

So would you say WLED

an actual photo here. Let me just find a photo of myself here.

you don't have to do this, but it it's awesome that you're able to get low level to the Vercel. And, yeah, let's see it. That was pretty fun. The future,

and it's 256 LEDs on here, I actually hit the limit of $8 a piece, You could buy that, and I think I might try that at one point Wes you just print shoot them out the door as fast as I could. At that point, I scrapped it. And I said, like, does not fire

is like a custom firmware for Wes 32, or is it something that's also running on top of the firmware, like, as a separate app or something like that? No. It's a it's a totally custom firmware that you flash

is what connects the WebSockets you would stick your your regular application in, that will then solves the problem of how do you maintain this, so this is running at local.westboss.com.

people who do this LED stuff professionally,

And then

updated the pixels.

grid itself, obviously, it has, like, a positive, negative. It's a five volt LED. There's also 12 volts that you can get, which I kinda wish I had done because this is this is a lot of LEDs. It actually takes quite a bit of power what I'm doing and what you see right now is it's a function called

but being able to broadcast that state gives you the real timeness, and and that's more of, like, the WebSocket client. Is that accurate to say? Exactly. Yeah. That's so there is something on the client side. There's something called

you'll be able to update. I guess I guess I can just show you because we have the code here. Right? Yeah. Show me.

I printed it And and that's like like, literally, it's sending the payload from 2,000 are JSON based, microcontroller, keep it going. You're gonna learn a few things. We're talking about durable objects and Wes sockets and React and microcontrollers as part of the server, But what is slow is, I'm pretty sure, is this the JSON parsing

Well, that's the kind of thing that I would do because I just wouldn't know any better. You know? Yeah. Not put a few yeah. And the next thing you know, you're catching something on fire.

the the LED hardware.

well, which allows you to get nice, warm and night much brighter.

century errors, the a the WebSocket and the HTTP like, you can tell that's me.

And the data has to go from pixel zero to pixel 2,300, where I accidentally UDP

yeah. That's what's up. That's what's up. No. No. No. It's taken out. I'm just excited to see how you built this. I love stuff like this. I was very jealous when you started doing this project because I would love to build a little drawing interface like this. So now it's super cool. And I I gotta say just,

be able to put, like, maybe build status of the the Syntax site, maybe some stats for the podcast or, successfully me, CJ, and Scott before it it actually paints to the thing. So it's directly to these chips, and it's it's written in, So, And I luckily, I grabbed it and unplugged it and realized I had crossed some wires, but I I had created a short circuit, how it works. Let's start with the hardware, and then we'll get into the actual software side of things. So first of all, the the LED grid itself So consecutive fetch requests.

And that is so much faster than than the fetch based API. However, you can only send, and then that data is is available I don't know, four that. But I I had I bought an external power supply, which JS, like, like, this big. And then I also go into my WLED settings, the hang up here. I like, I sorry. There's two web sockets at play. There's one to the durable object, and then there's another one that like like CJ suggested Wes I made a server side And as those changes happened, at the same time.

I'm calling it memory, but just like just the state of the object. Imagine you had a JavaScript object You don't abstract anything away now when you're using PartyServer. You can just add it to, an existing CloudFlare worker, which is I I like that as well. They're you're not they're not hiding that you're using a worker like PartyKit was. So that's the the server. It's obviously syncing state between all of the open browsers.

my durable object called update LED.

but I I tested it. I kept crashing it. I think I'm sending something like 800 all of the currently changed pixels. Right? So if I you have to fuss a lot less with it. But I had bought these, I don't know, six months ago, and I just,

where it looks sense to be able to doing is you're you're that's kind of a micro optimization

meaning that the microcontroller client side app, which is the real time drawing, and then there was the whole And I The diffuser itself. So the LED grid is Mhmm. And the initial time that I did it, I I used some, like, premade frame that somebody designed, is also on my home network. And then in order to send the data from my machine to that, they have to either be exposed to the Internet, which I can do, or you just have it have it locally.

a count of how many open errors we have on our century. There's just, like, a lot you can do like, somebody has drawn to a one of these grids right here, it's sending that data over a WebSocket to And what that allowed me to do is implementations it's not bad. And I think if you were to it's it's pretty much real time just drawing on it and then uploading a photo drag and drop. It does it in two or three and then they also are working on something called party sync, which, Scott, you'll probably like to hear as well Yeah. Which is just like, yeah, all of this this data as well. But the party like a 100 pixel change at once. So if somebody was to take, I have it at half brightness right now, and it's it is plenty bright. If any to the of the durable object, which is of white filament.

gives you the ability to do, like, real time.

from the LED ought to to show, like, if you're in Node or reverse, they weren't working. So I tried to put the battery voltage straight to the LED, It's that this process is just running on my local machine just so I can I can get it going? And also, it needs to run on my local machine because the 2,300 in order to get to the two thousand three hundredth API Is PartyKit a part of CloudFlare now? Yes. Okay. PartyKit was made by Sunil Pai, and he worked at Cloudflare for a long time, have burned several of these out And then I immediately API endpoint that you can hit with, like, a fetch request.

So that was the first way that I did it. And I'll I'll tell you about the the problems that I hit and and then the the real time like, one frame a second. It's really slow to actually draw.

a couple But that that was the hardware aspect of it. So that was was relatively fun, what do we need to send WLED software.

party ESLint,

You Bos in. Did you release the magic smoke?

So one, two, three. And I have three different pins on my, when when people do, like, like, big things dear god, no. No. No. My computer my computer right now is butter, but there's something about the browsers. Graphics or what? And the drag or the mouse drag drop.

And then if so, it will send it to the WLED. And I wrote a whole another WLED Yeah. And now that room is is being painted. Cool. So I could have, like, a, like, a syntax room. I could have a drawing room. I could have, like, a stats room, and then I could just have them cycle through those rooms, or I don't. The first time I did it, I did it about six months ago, and I I tried to get people to draw on it. And somebody did upload, like, a on my little stream deck here that would switch them. There's just so much so much fun stuff that you could do with it. But that was my project. That was just all it was a ton of fun. I can't believe I get to talk about it for an hour.

and I didn't have a fuse in it. So it was just running the the amperage over and over through the things, and it was melting the wires, which would have caught on fire if I had left it. So that was my one scary moment there, and I after that, I'd quickly put a a fuse is, like, And UDP is is not like like TCP. UDP is a one way signal where you can just send commands four or five to tell it which pixels on this grid to now change. And the way that that works is there's a little bit of a diffing algorithm. It detects which pixels are dirty, mean meaning they have changed from what is currently on

beat you and and step up and do something better. So,

server side part, which is keeping track of what has changed, sending that data over to

shout out for to you for always being so ambitious about Hack Week because I I'm a competitive type of Vercel. And if I I feel like if our team didn't go hard on the Hack Week, then it would be less fun. Yeah. And I I'm excited to learn how you did this because it's it JS, in a sense, a full stack project because you've got hardware, You've got a front end. You've got a server that's gotta sync these things. It's real time. Yeah. I'm excited to hear all all the parts and pieces that make this thing work. So I'm gonna show you what I built here, and then we're gonna break down all of the different pieces. So there JS, obviously, the hardware LED grid here. There's a diffuser panel that has been three d printed over top of it as as well as with a frame. Then there's a web app where you can

you shouldn't be using a JSON API objects and and party kit. It's called party server now. The whole party kit thing doesn't look like it's being super maintained, but they are moving Really? utilities, so I can paint my GitHub contributions.

But then there's also the aspect of, like, how does it get to the Wes 32.

several APIs that will accept incoming data. And those are the APIs that I used any color that you want. Right? They're RGB, yeah, that might even work. I didn't even think about that to flip it around.

millimeter lip on two of the edges.

I just have a, like, a like, a JavaScript map and set Mhmm. For maintaining all of this data. Right? It's just an array of of 2,300 There is a WebSocket API, and there is an HTTP, And then, basically, people are visiting my Mhmm. And I turned it on. I plugged it in, and it has a Wi Fi chip in it, it has a Bluetooth chip in it, and then it has all of these different pins. And these pins

structure of your entire application in something. So would you or would you? I I No. No. You

and it wasn't working.

I guess on top of that, the client side library is what gives you the the sync. Because I think Wes. You could use this as, like, persistent data for your serverless functions,

both I think, it's something like c plus plus. I I when I did my controlling my Roomba, I I dipped into that as Wes, writing my own lower level code that would send serial data out of these different pins. But it's it's quite amazing because WALED I don't know about the future. This JS this is a really fun project. I think what I would like to do is is to hang it on my wall, probably not over Wi Fi, probably not over and then shows you the initial thing, and then the WebSocket reconnects. It's not a big deal. Like, it recovers, but it obviously goes goes blank entirely.

go ahead and draw on. You can upload. Yeah. One of the features is you can drag and drop images. You can obviously draw on it in real time. I do have And then every single time to Yeah.

individually addressable LEDs. And and how that works is that you send power to all of these LEDs, but then you can also send data signal to every single LED, raw and parse it from JSON to and something pixels. So what it is is I bought these sends it from the client to the server.

this thing here because there's only so much memory

It's a a single controller

into with via the undeseoldering It's it's jacking the mouse events somehow which which I moved it in in like an hour because I initially built it in Sanity kit.

So what I did is I just went to my code and commented out that feature, and it I live updated on everybody who had it currently open's website.

and it it literally exploded. And it LEDs are glass.

over there's a whole bunch of logic as to how it gets sent over. I'll talk about that in just a second as well. And then that will just that's a recursive function, which will try to it will call itself

Sick. Wow. That was awesome, Wes. I love it every single time.

a scantily clad microcontroller any brighter than that, you gotta start worrying about, like, thermal problems. Right? Like, it it already gets kinda hot. Yeah. If you cranked it, what would happen? Oh my goodness. Look at this, Scott. Cloudflare Durable Object a, There we go. WebSocket There we go. It's a funk it's just a method inside

circuit board. You're you're you're bringing it right to the panel that needs it. Yeah. Lot of fun stuff. Crazy. Yeah. Well, my problems could have been solved with code. And, like, to me, it puts me in such a place of, like,

is

Who would have thought that OBS

maybe maybe, like, an hour or or so, that somebody draws, that data comes into the server, it updates it, and then broadcast that out to to everybody else that is on it. In in fact, as I'm drawing on this thing, it's actually not painted to overlap them over the years, but I did not have a single in these microcontrollers.

very similar to if you were to, like, just stick something in memory on a long running server, except that when you restart it, it it's it's it's actually saved to a database, so it it stays there.

You know? Like, I can work on something locally, because you then you you have to end up sticking that in a database somewhere or stick it in key value, which is absolutely wild, there JS, like check like, 10¢ I should have put in at the very first.

and those are each sending three different pieces of data out. And then you can go into the software and set up the layout of it. You can see here I've got all nine of the Sanity. And then it takes care of No. Same thing. But this would be butter. I this is butter smooth when I'm drawing on it,

to handle that?

just so that you can share it amongst anyone. And and this is simply just, like, variables that exist and can be shared for everybody.

Is that a a common solution,

those changes to everybody else JS well as letting the wider Internet be able to control it, and it was a super fun project. I learned a lot about it. And today, we're here to talk they have their runtime is not Node. Js. Their their runtime is something called Worker d, and they support web controlled from a CloudFlare worker. It has to either be

Not much. I brought a salad to the Sanity.

c very slightly so you didn't have a very defined have changed, and those are whatever to it, and and that's via something called the UDP.

So what was happening with with these ones is if the power has to go through every single LED quickly enough to the thing. So it's it's I see. Not a resource problem at all. It's it's that like a halogen. You know, you go to, like, your dentist office, and they have those, like, tube lights.

Otherwise, the socket API. So you cannot open a UDP socket library And then I I did the rest of it in just black, and that was the that was the winning ticket to to do it. And I had nine of them. I ended up I ended up just gluing it. I I wanted so badly client millimeters pixels, and and that array durable object, bytes, and then HTTP byte limit is 5,000 bytes.

Scott and CJ did some really cool stuff. I opted to do something that was a mix of both hardware and software my browser and I've tried every browser on my computer very defined line, but there still is a bit of a slight line. I think if you could also buy, like, second way, which you suggested.

little 16 by 16.

byte limit, so,

Yeah.

So I was slightly over the actual limit. So what I ended up doing is image, I have to send and it was kinda fun because people were drawing, like, you could tell that they were Oh, also, another thing I didn't dip into, which is I'm only sending the dirty Vercel. But one thing you can Node, like, if I were to draw from pixel three to pixel eight all blue, there is the ability to tell it, start at Vercel three, go to pixel eight, put to make them all blue. So that would compress it a little bit. But even just looking at this, like, Firefox logo, there's like, just a normal just not amps, as soon as it gets a response back from the WLED saying it has 1,400 That's so exciting. A couple other things you can do with it. I photo, but when, like, the biggest optimization would simply come from Just not using it. Approach. Right. Exactly. Exactly. You're you're not gonna get that big of a a gain from that Wes where switching over protocols would be much better. Opening up I have admin controls where I can the durable object was really cool. And then on top of that, party server durable object server. It's it's a Cloudflare worker. It's running locally on my machine, to the the durable object, and then it is then broadcasting an Wes saving that grid state over long runs can can start to drift, and it can start to can start to die out. So if you have a very long run or if you have a this is not a long run, but it is a lot of of pixels, then the data can start to get weak as it goes through. And there's there's solutions to boosting it, but the the better solution is to simply just chop it up into multiple run a bunch of code that checks if there are dirty indices.

That was a UDP socket just sending data from the React app Right. Yeah. Over Wi Fi. That's a UDP sockets.

and then it's just getting its data signal separately?

red. And then what it it's going to do is it it bundles that then up GPIO pins on the microcontroller, will implement. I just haven't had the had had the time to that's running WLED basically, they took the Party Kit repo on on Cloudflare's own GitHub, and and they're they're they're different packages but the power can go anywhere. You can inject power at the end, in the middle, at the start, ideally, as often who currently has this some stuff to it. You kinda learn over time, and and there's just things you you understand about the basics of of electronics and and how data is is sent over the wire. A lot of, trial and error. Yeah. Scott of trial and error. Well, did you burn any circuits or bust any pixels during this project? Surprisingly, Node. Anything busted.

because my initial created PartyKit, and just to find a way for it to just be always open and put it on my website in these LEDs, and WLED powers all of that because That's that's pretty good. Yeah. Let me see if I can get the webcam stuff going real quick. Anyways, what I was saying about the the real time stuff is that this is a Vite server running locally on my computer, Boom. Woah. So that's my, is faster And what I ended up doing is at first, I downloaded a couple things on three d printer world and whatever and and printed them out, but I just was not happy

five watts. So, like, is there a separate power supply for the

CJ just uploaded

wow. I remember any time of Yarn hardware project I've ever tried to do, you know, you get things soldered up, you plug it in, and then, like, nothing happens. And then I'm just like, okay. I guess I'm done with this. Like, how do you how do you get better at debugging this stuff? You just understand

They're about, I don't know, $10, it's it's butter, that WLED But then when you when you draw a lot of changes, a, and just have people come by at any time, draw on it, or I the other thing is that I can

seem to bring a level to Hack Week that is,

I putting a lot of them together, you hit the limitation of how many LEDs you can possibly send data through, which is 2,048.

So that was was still a bit of overhead, But Wes, essentially, am just recreating video and and and monitors, from Scott's computer to the durable object, and then the durable object is then sending Here's the webcam code. And the funny part about that is, like, people were abusing the drag and drop images.

up the side in white, and then that allowed me to not get nice big black lines.

the problem with with serverless compute is that it it spins down. And and then if you wanna save literally anything or you wanna share workers, the update to one that's behind here right now. Since I have so many, and then it will send that to grid and soldered them all together. I actually ended up what's powering it and and sending the actual data, which is the third line on these, is something called segments.

to this one, you'll see it's it's not mirrored to the LED. But if I go to the admin, like, a like, a 4.5 or a five volt to show, like, a one. Right? And then it might show send, like, like, a one volt or a 0.5 volt to show a zero. Right? And you're basically just sending ones and zeros. And then, as you know, like, voltages

I have a question. Do you have any, like, not safe for work detection

There was once literally anything across multiple instances of that serverless function, So that's I can send,

Right? So what's happening is It literally just the whole screen goes blank, and then it reboots get into and I couldn't get access to the back. So I kept breaking it, trying to, like, put the wires underneath it. It was so annoying. So I ended up just scrapping the entire thing that I found online and designing my own frame for it. But Mhmm. I don't know. Soldering Something. And and they are very laggy. So, yeah, this if you're not impressed by this, it's it's butter when I don't have OBS open.

something. They're they're sending it, like, raw it it's a piece of software that can then send the data signal with this. Now that I have this, like, sort of

intricate are those messages?

voltages.

and then they they cool down right a lot after that because there was not as much you're not trying to pull a lot of amps through this tiny little flexible So if you're running, like, a five volt system, it might send, over

just having to quickly desolder everything, and then I I put leads on it directly to it. And when you said you send messages to that, like, what are you able it's it's more than just an on off kinda thing, or, like, what how

and watched for changes.

on five volts or 3.3 volts.

But I just love pixels.

workers.

Because if you've ever tried to use, like, an RGB light, you tried to do, like, colors, you'll notice that it gets when you connect to it, you have a you have a single socket connection open. And then anytime you want, you just send updated pixels.

Stadium things? Yeah. Like a stadium, they'll use, like, 48 volts. Like, that's commercial, right, or or 24 volts. And and and most hobbyists will use either 12 or five volts. So I almost do everything in in 12 volts now just cause it's like like, a d one database or something on CloudFlare. The idea with the durable object is that at my cottage before I really understood and and the WebSocket connections and and and having to run a web server. So, ideally, you would use a lower level thing that would simply just send you have to diffuse them.

most of Node. Js. Part of what they don't support is like a a WebSocket

the top layer is just thin enough so that it can shine through. Like, because I don't have a three d printer, and, like, when I was trying to do this, I was, like, trying to use, like, foam board and pieces of paper or, like, bottle Gosh. You could buy, like, craft paper that's, like, slightly opaque, but then you run into the bleeding issue. So, like, it just looks blurry.

you try it. You try it.

segments. And then that way, you can also send data out the different pins Both of them have limitations.

via ones and zeros.

that was, like, 18. And then times I had a 100 people in there Okay. It was it was too much. So then what I had to end up to do is I would have to collect them as they're coming in and then but you could deploy this thing to to the cloud as well.

stick data on the object, as as far as, like, you, the user, is concerned, it's just now it's just a one single grid, and WLED figures out how to LEDs.

And then anytime if you think so.

the number of pixels that you can, like, the way I knew I needed is I you you check the voltage on the input, What that does is when somebody is is drawing on this grid, the back end. And then the back end is then anytime you come back to that instance Yeah. Now, which I like because, like, Sanity kit was built on top of

server is running on the same computer as OBS. Like, if this were running in the cloud, this would you wouldn't have that limitation. Is that accurate to say? No. No. The problem is that my literally Browser. My mouse event in the browser is not being fired

Yeah. Syntax logo So WLED is just this really nice piece of software your local IP address, which was was awesome. At one point, somebody wrote like a like a thing to send, Welcome to Syntax. Today, I am going to be detailing my Hack Week project, which is my Yeah. That's what I'm saying. I want some Luckily, it didn't get it in my eye. And the the solution is LEDs, like, those little tiny little pin ones, those are 1.2 that's pretty fun. But I think you could my resources are not pegged at all. It's just It's just something about opening OBS. It makes my it's not even, like like, look. It scrolls fine. I can hover over stuff fine. You open it, and your computer just goes, directly to every single Sanity. And that brought the they were getting pretty hot just regularly, from your browser

I guess to clarify, that's because your

It spits it out in serial and is able to deliver it to the different types of chips

too big to fit behind the frame that I made. How long did that soldering take you? Because I'm so slow.

draw on it. If Scott and CJ, if you guys go to local.westboss.com, it will crash and and reboot the the entire microcontroller.

but so, like, clean-cut pixels.

this looks So I'll start with the server side because I I feel like this is the most interesting. So I built a has to take the JSON payload ESP 32 these are, set which room is on there? So I can have one room which JS, like, forward slash syntax.

I didn't put a fuse in it at first. I had the fuse on my desk, and I was like, I'll put that in at the end.

ones and zeros my computer from the Internet without having to expose your variables as to, like, limits.

Yeah. And then I did black, like, baffles or grid on the end. And what that did is it gave me, like, a very crisp through the data line. And on this little Wes p 32 runs a little piece of software called

What happens when that crashes?

And then you can also buy little adapters that has a direct connection to the the grid because it's on your local network? I actually did it both ways, and and I'll tell you about the problems that I had it. So were to just take red and and paint, like, two or three of these, I'm getting better at it. It's just that I had to I did it, like, several times, is kind of hard to look at. You look like a gamer that just bought some LED strips and and put them up. So in order to make them look nice, it's not butter for, like Totally not butter. Entire images.

square. It has, like it has walls around it to prevent it from bleeding.

party server client

how to

and all that. But if you want to cut to the video version of it either on Spotify or on YouTube, I'm going to recommend that since there's gonna be a lot of visual stuff. Hell, yeah. What's up, Scott and CJ? Not much.

Then you can actually the WebSocket API can't send too big of payloads, Like, it's over GPIO to say if this is a large, like, I have a bunch of or not. I don't don't like that there are little lines in here. I modeled it with a 0.2 anytime that you wanna have long running processes or come back to something because

the panel grid itself,

But that still only allowed me to to do 400 pixels at once.

the grid, and then you put a single sheet of diffuser material on the top. Yeah.

we are checking as frequently as we can for what are called dirty pixels. Right? So data JS coming in all the time, and then every now and then, we run a function that then checks the LED thing.

with with other people that have it. So GitHub activity in in real time being painted to the LED. I will note Sick. That whatever the CSS based array JS, and then it has to then send that data set the maximum power supply current to 18 amps digging into all of this fun stuff.

So Yeah. It's it's really nice to be able to to do that. A lot of people I do regret in absence of volts, I'm just pushing more amps.

look. I did it all in white first, and it it bled a little, which is a cool it's a vibe, but it wasn't what I was going for with the whole pixel art here. I also didn't want, like, very defined lines as well. So I I printed it. I'm not sure if you can see this or not. Let me see if I can I feel like a makeup reviewer? from the client my application to turn all of these on. And then it was getting really, really hot. So what I did is there's the second wire in the middle right here. This is the power injection.

which is 94 times what it should do over USB. I didn't do that because you you literally cannot buy a 94 amp five volt power supply. The the real solution when you do bigger stuff like this is the LED grid, and then it creates just an array of check values better, whether that's, like Yeah. Voltage or Like, you can add logging. Yeah. You you check voltage as Wes. Like, application open. There there is ability to even do rooms in this one as well. I've I have it built into the app, but when you come to the Node page, it's just the the default room. And it's really cool because, like, there's you you can get into, like, doing database schemas and whatnot, but I'm just simply just But, anyways, I'm I'm putting these on my house, which I'm really excited about. And, like, the people that do this professionally, they they have, like, whole like, they have Elsa dancing on a grid, like, eight times the size of this, and it's, like, six 60 frames a second. So it's it's definitely possible, it can maintain to to this thing here. Yeah. I think if I were to take the microcontroller out of the picture, I could get it to work pretty quickly.

crossed the positive and negative wires.

But the fact that you have like, you've isolated each pixel to then shine through, like, is awesome.

otherwise. But, obviously, it's not butter for live this is very washed out in the video. In person, properly send the data to each of them in in which order.

a request, I use this in several places. The little on air sign that I have behind me, I have it off right now because it's blowing it out. The gym lighting, I'm I'm currently doing my house So they have a they have a white pixel Wes Would it catch on fire, or would they explode like in, The Goofy Movie? If you cranked it, then you have to start worrying about cooling. And and the other thing about it is is, like, heat comes from and then I expose that Vite server to the Internet with a Cloudflare tunnel.

But when I did the receipt detection yeah. People Yarn pretty pretty good. The thing that people did when I opened it up is they started writing scripts in the console that would programmatically send pixel changes, writing, like, nested loops to change the colors, and I thought that's The server then updates it, and then it broadcasts it back to everybody, including yourself.

with any of them. So I designed my own diffuser. And after a couple trials, this is what I ended up with JS it is a 0.3

on here?

like, GPIO pins. Right? You're actually physically connected to it, and you're sending the data. There's no parsing or anything. You're simply just sending it straight from to it. It's it's running it's literally running a web server Yes. Yeah. This is and in this case right now, it is a little bit slow because I have OBS open. It's totally unrelated.

how LEDs worked, Yes. Exactly. So Okay. The ESP 32 will run on into a, and then the HTTP API can send I split them into three different sections.

and and they haven't moved it. But now now, like, the main code Bos for Party Vercel, party client, and party sync, those all now that run on these these very common LED strips or LED grids.

all of the leads on the back of them and just going doing my own soldering because these clips were just a little bit too state or how do you maintain, when they're needed, and they spin up multiple versions of them when when you need lots of them. And it's really cool because you can simply just for them as well. I'm a big fan of this one where you can put, like, a 12 volts into it as well, and it will just it'll has a buck converter. It'll it'll dump it down. But you can power, like, one panel off of a USB, like, a one amp Mhmm. Off of USB. But once you go over one amp, it's actually funny. Mac OS X will be like, we disconnected your USB thing because it was using too much power. Yeah. So once you once you pull more than that this all of these together values, but

So the it doesn't paint it until it comes back from from the servers. It's like the opposite of Scott's. It's not Logan First at all.

32. And this is just a $5 if you were to, like I don't think that the WebSocket is the is different like, a million requests through. Yeah. And my Internet was getting kinda weird where it was just kept dropping in and out, but I just I killed it at that point. I think they they went away. You probably would have to put some sort of rate limiting paint tells you which color I I just call that the fetch API as it's simpler.

amazing.

I didn't think about

you always,

it would send them over the UDP socket. And then I ran into a whole bunch of trouble over, like, I was sending too many. You know? Like, if you draw, like, Give it a sec. It's going off to the GitHub API and pulling down all of my activity.

or it's it's bytes. It's not pixels. But, basically, when I'm writing a full these events. What if I use my built in mouse?

In your in your demo video, that's one of the last things you said. And it's so funny because, like,

to dip into it. So is this as fast as you could get it refreshing with your current strategy?

So I could just switch it.

they send the raw data WLED.

a couple millimeters, like, one millimeter up in hope to, like, put some social stats on it or,

No problem. It just asked me if I wanted to start my camera. Oh,

LED,

So,

that is sending the data across three. Because I guess you could have also maybe had three different controllers, but this lets you use a single one Yeah. And then split up the the signal. I guess you'll probably talk about it, but, like, this requires a lot of power too. Right? So each panel is

right here. And and that is plenty bright. I don't even have it.

to, like, make some sort of click together system, but, like, something with Cloudflare durable LED grid

literally, just buy an external HDMI monitor and put images on it. Like,

base thing built up, I once when I was working on the ATV And if I were to draw So CloudFlare durable objects are essentially what's happening is that there's a WebSocket connection the web server that's running on the the ESP 32 are used for sending serial data. Most of them are used for sending serial data out something like it says it can do 2,400, times just under four times more via fetch Wes over than a WebSocket. So when you're drawing, like, a little bit, this is all WebSocket.

instead of having to do more amps, what you do is you just increase the voltage. So I kind of regret buying five volt panels because it has required me to left, Nice work. Cool. Alright. Let me know if you, enjoyed that or if you have any suggestions on things I said add. Leave them down in the comments below, and, I guess we'll catch you in the next one.

Yeah. Yeah. Like, to use WLED or No. To to break up, to send it in in groups like that. The the way that serial data works is that it it sends high and low Yeah. It's butter, though. Not butter, though. Yeah. Yeah. But that that whole like, I'm working on a project right now where I'm decking out our whole house in these things here. I love this. Wes is turning his whole house into an LED panel. Like, my house is it's gonna be like a gamer street, but I'm gonna deck out my whole house in these, which is and it had the the downside of Cloudflare