Hello, friends. Joe here from HackerBoxes.
Welcome to this build session for HackerBox 0057.
This is an extension to our Learn to Solder workshop
that we're doing with the Hardware Hacking Village
as part of DEF CON 28 Safe Mode.
Hope everyone's being safe. Hope you're having a great time.
So, HackerBox is the original monthly subscription box
for DIY electronics, computer enthusiasts, and hacker culture.
The theme of this particular HackerBox, HackerBox 57,
is Safe Mode.
So, the primary content item of HackerBox 0057
that we're working on here
is this really cool kit to build this exclusive indie badge,
which we'll talk about more in a second.
This HackerBox also includes a practice lock
for practicing lockpicking and a set of lockpicks.
There's also some exclusive items.
There's a branded tube bandana that can be used as a Safe Mode mask.
It has a really cool circuit board pattern on it.
There's also some cool hacker stickers.
There's an exclusive lapel pin that has our logo,
our BitHead logo, wearing a mask.
It's a special Safe Mode lapel pin.
Let's see, there's also a USB cable.
Oh, there's an IR remote controller that lets you control your PC.
It's kind of like a remote control mouse to use for presentations.
It also lets you control media functions,
such as turning volume up and down and jumping tracks.
Interestingly, because of the IR features of our indie badge kit,
you can use that remote control, that IR remote control,
to do some cool things with the badge as well.
All right, so the badge kit itself will let you build up this badge.
Of course, it has a pretty nifty PCB with the HackerBox logo on it as its basis.
And then the processing module on it is called an ESP32T display module.
Of course, it includes the ESP32.
A lot of us are pretty familiar with this microcontroller.
This microcontroller has a dual-core 32-bit LX6 microprocessor
that can run up to 240 MHz.
So it's very full-featured for a microcontroller.
It also has built-in Wi-Fi and Bluetooth,
a whole bunch of bus interfaces, all the standard stuff, a lot of GPIOs.
This particular version of it, the T-Display,
has an onboard IPS full-color display.
It's a 240x135 display.
It looks really sharp at that small size.
It's actually quite a lot of pixels.
It has a built-in USB-C interface.
It also has a battery charger.
You can connect a LiPo battery to it,
and it'll keep it charged when it's plugged into USB power.
The kit for this board also includes RCA interfaces for audio and video out.
This can do composite video and audio out,
sort of like what we used to have on the older 8-bit computers.
You may have had a composite output on your Commodore 64 or Apple II computer back in the day,
if you're as old as I am.
So there's also a little five-way joystick.
It's a little tiny joystick. It's a surface-mounted device.
And there's a couple of buttons.
So with this joystick and these two buttons, you can do a lot of nice controls.
There's an infrared receiver and an infrared LED for doing IR blasting.
So you can receive infrared signals and then blast them back out,
or blast out different infrared signals.
Let's see, there's also a little tiny surface-mounted buzzer there for making sounds.
So you can make sounds onboard and then also output audio
through the digital-analog converter built into the ESP32.
All right, so...
Oh, and of course there's a nice, colorful, exclusive HackerBoxes lanyard as part of that kit
that uses a similar graphic to what's on the actual box itself.
Great, so as far as getting started with working on this kit,
we really recommend that you take the T-Display device,
plug it in to your computer.
Just when you power it up, it'll do a little nice graphics demo
showing a little graphical image and then flip through some color screens.
So the advantage of doing that first off before you solder anything is
it just lets you know the thing works.
And then also what you want to do, so before you solder anything to it
or try to do anything with this little module,
we recommend setting up the toolchain.
So this is a good time to probably tell you that every HackerBox has an online box guide,
which has lots of different information about how to use the devices in the box,
for some projects it kind of gets you started,
for some of them it gives you all the build instructions,
sometimes there's some sample code,
or if it's a device that's pre-programmed, we usually try to give you the code
so that you can modify it and do other things with it and hack it and learn from it.
So the box guide for HackerBox 0057, the safe mode box,
has some sample code for exercising the badge,
but even before you put the T-Display module onto the badge,
there are all the instructions for configuring the Arduino IDE as a software tool
that can compile code for that board and interface to it,
and then also, quite importantly, setting up the library for doing graphical displays
and text displays on that little IPS display that's embedded on the board.
So when you go through and set all that up, then when you power the board up,
rather, after powering the board up, you can program it
and then just verify to yourself that your toolchain works well,
that you have the TFTE SPI library set up correctly,
and that you can program the flash on the board
and then have it boot up and run the code you put on it.
So that really builds confidence and lets us know that our toolchain is good
before we start taking it to the next level and putting the module onto the badge itself
and then start programming the badge.
Right, so probably now what we should do is just let's go to the overhead
and we'll jump into soldering this badge together,
and we'll just talk through it as we do it.
All right, so for this kit, we have a baggie of components.
We have the T-Display module and the PCB.
So these are the three things we're going to be working with.
Let's get the actual T-Display module out.
This is the module that has the actual display on it and the ESP32 processor.
The processor has the Wi-Fi and Bluetooth functionality built into it.
So this display doesn't have the pins soldered on, they're separate headers,
and it comes with a little wire JST connector
for attaching the LiPo battery to the battery charger circuit of the module.
All right, like I said, before we get to soldering this module,
let's go ahead and power it up and just make sure that it works fine.
Before we solder it, we want to go through and make sure all the tools can compile a program for it
and load the program with the correct library,
which is the tft-eSPI library for controlling the display driver.
Okay, so let's check out the actual PCB.
This is obviously where we'll be doing our soldering.
You can see it has a side that's a little blacker and a side that's whiter.
The black side is the one we'll be soldering the components onto.
So the front of this board, the silkscreen, is just used for some artwork.
So the silkscreen isn't on here. It gives it a nicer look when it's finished.
It's a little harder to build it, but that's kind of part of the fun.
So make sure you go to the box guide and look at the...
There's a placement diagram that shows where the components go.
So that diagram is sort of what would normally be on the silkscreen
if you weren't going to have artwork on the silkscreen.
So definitely check that out.
And we'll go ahead and start with these three resistors.
You can tell which resistor is which by measuring them.
There's a 220 ohm, a 330 ohm, and a 1k ohm.
1k is 1,000, 1,000 ohm.
You can measure them with a multimeter or you can just look at the little stripes.
This one that has an orange, orange, and black, that's 330.
So that's a 330 ohm resistor.
Go ahead and put it through and just bend the leads back so it holds it in place.
And then the 220 ohm resistor is the one that is red, red, black, black.
And then the 1k resistor.
So these go in right next to each other.
You can, again, make sure you look at the component placement guide.
Or if you can see really closely up here, those three resistors, it almost looks like they touch each other.
The holes for each neighboring resistor are very close to the one next to it.
So in order they go 330 to 21k.
Front order from left to right.
When the wire gets a little kinked on the front side, it's hard to pull it through.
You want to grab some pliers here to pull it through.
All right, so all three of these resistors are through and the wires are bent back so they're going to be held into place.
And we'll go ahead and get some solder on here.
So I have to apologize, the white artwork that's on the silkscreen on the back of this board makes it a little hard to get contrast.
But hopefully you can still see the soldering that's going on.
We're using the standard techniques that we've discussed in the Learn to Solder videos of starting with a very clean tip, make sure it's tinned, have a little solder on the tip.
Because the solder that's on the tip helps conduct heat into the work.
So we want to use the soldering iron to heat each joint up so that it gets a little warm and then bring the solder to it and let the pieces of metal you're trying to solder melt the solder.
Don't melt the solder just with the iron tip or you might get a cold solder joint.
And since there's not a lot of metal here, the vias, the through holes that these leads go through, there's not a lot of metal so they don't take but a very quick touch to heat up.
You don't have to hold the iron on there for very long.
That looks good, let's go ahead and trim these leads off.
This is where you want to make sure you're wearing your safety glasses and hold on to the leads while you cut them.
You don't need leads flying all over the place.
And as we discussed in the first Learning to Solder video, we want to make sure we're not getting a lot of chunks of solder around because solder has lead in it.
So when I'm cutting these, I try to keep the surface clean, my work surface, I wipe it down at the end.
And also when I cut leads, I put them in a little pile so I can easily throw them away.
Next we're going to do the surface mount buzzer.
That little dot just tells you that that's pin 1.
Pin 1 is at the top when the board is oriented like this for this layout.
So this is an example of a surface mount component.
We're going to basically just set it on the surface and get the pad that it sits on, get some solder on that pad, get it tinned,
and then get just enough heat onto the little metal lead on the side of the buzzer, just enough heat on there to melt some solder onto it.
We'll get one side tacked down and then flip it around and get some solder fluid onto the other side
and just make a nice solder flow that fills in the little L-shaped space between the buzzer and the PCB.
The buttons are oriented with the leads up and down.
They won't really fit if you try to put them the other way, but it doesn't matter if you completely rotate them 180 degrees.
There's no top and bottom to the button. We just don't want to have the leads going out of the sides.
Although if they were going out the sides in this configuration, you wouldn't be able to solder them because they wouldn't be over any pads.
It's pretty easy. Again, just tack one little bit down.
When only one part of it is tacked, you can heat it up very easily and move it around again and make sure all the leads line up over the pads
before you go ahead and commit the other three corners of the button to soldering.
You can see from the first one we did, we kind of go to the opposite corner. It helps constrain it nicely.
It's a similar concept to tightening up lug nuts. You want to kind of distribute the tension around.
I'm going across the... you can see there's some... that looks pretty good.
There's a nice flow, a nice shiny flow all over the lead and the pad.
We have one more pin on each one. And if you want, you can hit the original pin, the first pin you did, just to get it reflowed real shiny
and make sure all four of the pins look good.
Buttons are good. And the next component we're going to do is a little joystick, which looks very similar to the buttons,
but it has a lot more leads because it's actually a five-way joystick.
So it has a lead for up, down, left, right, and then it has a lead for center, which is when you're just pushing it straight down.
And then there's a common lead, which in this design, if you check out the schematic, you can see that the common lead on the five-way joystick is grounded,
which means that the other terminals will all float.
So you should probably pull them up using the pull-up description definition for your...
when you do the pin declaration in Arduino, make sure they have a pull-up.
So then when you close that contact, it will go to ground and the ground will overcome the pull-up and it'll go to zero.
So when one of the contacts is not being closed, it'll be a high, and then when you close it, it'll be a low or zero or false.
Now we're just doing this nice and slow, getting each terminal and making sure the solder flows really nicely.
All right, we've got our joystick done, we've got the buttons done.
We're cooking in here.
All right, so next we're going to put the T-display on, which has these headers that come separate.
So I'm just going to put the headers in here and then put something underneath it so that the headers aren't being pushed out by the desk,
just to make sure everything lines up right and it looks good.
I'll get it on here and we'll tack a couple of the points, a couple of the pins while it's in this position, while it's being held up.
And again, usually kind of work from opposite corners.
Make sure when you're doing this, you get the solder to flow all down in the hole.
And remember, when you see the smoke coming out, that means that you're getting the...
Let me cut this little tab off of here.
This tab is so you can pull the protective plastic off of the display, but I'm going to leave the plastic on there for now to catch any flux splatter.
When you see that smoke, what you see right here, some smoke will come out.
That's when the flux is being released and that's when it's the easiest to get the solder to flow.
So right as that smoke's released and the solder starts to melt, that's when you want to make sure your connection is hot and get the solder into the terminal.
So we'll look at this and you'll see there's...
We need to reflow this and drop that down against the plastic of the header.
There we go.
Let me get the other one. Yeah, so now that header's in there nice and tight.
That one looks good.
Great.
Put that back in. We don't need to solder the rest of them quite yet.
Let's just get it mechanically seated and make sure everything fits right and all the headers are all aligned properly.
Tack a couple of the pins all the way through on the other side.
For each pin, you actually have to solder it twice. You're soldering it once to the module and once to the board on the other side.
And again, just like we did with the top, just make sure it's sunken all the way down and it's completely seated properly in at least a few spots or at least the opposite corners.
And then once it's all properly seated, we can go through and make sure we get a good connection and flow on each pin.
There we go. It goes pretty quickly.
It's kind of a weird angle to try to do this underneath the overhead camera.
I like to try to avoid doing this right here where I get too close to this hole because I don't want to get any solder down there inside the T-Display module.
That would be a big pain and we'd have to take it all apart and clean it up.
So maybe just stay to the outside of these headers. Don't go near that hole and that void in the PCB.
I'm going to get these a lot quicker because I have easier access from this direction.
Always cleaning our tip a lot. Keep a nice clean solder and iron tip. Keep the solder flowing.
There's a couple more here.
Now we've just got to get all the pins. So there's 24 pins on this thing so we're having to make 48 solder connections.
This takes a couple minutes. Just take your time.
Like I said, leave that plastic covering on the display in case you splatter some flux up onto the display.
Just turn the temperature up on the solder and iron a little bit.
Yeah, that works a little better.
The posts in these headers are a little thicker than, let's say, the pins on an IC or on a resistor or something.
So it might just help that I turn the temperature up just a little bit.
Turn it up to 30. It looks like it's 360 here.
All right, there's this last row of 12.
It's nice when you have the pin and the through-hole very nicely heated.
You can see the solder almost gets drawn down into the hole and makes a nice shiny kind of cone shape onto the lead.
So you can see the solder totally wets down into the hole and then totally wets the lead in such a way that it fills it in all the way around.
It makes a nice clean, shiny, well-flowed connection.
All right, so there's our T-display.
So, bump the camera a little bit.
The display is all done, all 48 of those connections.
So, let's get on to this little driver transistor.
Notice that one side of it is flat, and if you look at the placement diagram, that flat is down. It's kind of facing the joystick.
So, make sure the flat portion of that transistor is in that direction.
And once you get it into place, if you want, you can fold it over and make it flush to the board, or you can leave it sitting up. That's totally your option.
Just to keep it out of the way of the display, I think I'm going to fold it down.
I kind of like the way that looks. Fold it right down onto its flat face, but you don't need to do that.
See, that solders real quick because the plated holes are very small on these, very thin. There's not a lot of metal there to waste the heat.
It just solders very quickly. It heats up quickly and solders quickly. We'll cut the leads off.
I'm going to keep checking back to our component placement diagram that tells us what direction to put things in.
That's definitely important, even though there's only two leads on this LED, it only works if placed in the right direction.
The short lead goes towards the flat side in the diagram, and I like to leave this sticking up about 3 or 4 millimeters so that I can fold it over.
And it gives it a nice edge-firing, edge-blasting configuration. I like the way that looks.
It feels like it's a little bit more like a transmitter, like it would be on the end of the board of a remote control, like a TV remote or something.
Just two quick leads. Remember the short lead goes on the flat side of the circle in the placement diagram.
All right, and just a few more components here, continuing on with our through-hole components.
A little ceramic capacitor. This is part of the audio circuit for the AV.
And with this, you could also fold it over if you wanted to. Unfortunately, where it's placed right there, it's kind of right next to the reset button.
So if you're going to use the reset button a lot, you might want to fold that cap over before you solder it into place, but it's not really a big deal. It's pretty small.
And again, the heat flows on that real quickly. Very nice, very quick.
Trim the leads off.
And I should mention, we can take the leads off of the headers on the back of the T-display to make it nice and flat if you're going to put a battery on there.
We'll just skip that for now. It's a little time-consuming, and everyone knows how to cut wires.
The display leads are not really in the way until we try to put a battery on there.
All right, and this is our IR sensor device.
You want to put it on there so that the rounded lens faces down towards the bottom of the board, away from the T-display, the ESP32-T display.
And again, that makes it so if you set the badge down, you can aim an IR remote at it, and it'll receive from one side, and then it blasts out of the top, IR blaster style.
So, that's real easy.
And all we have left is our two RCA jacks for our AV, for composite video, and our audio line out.
So the yellow one is the video out. We're going to get that here. That's kind of on the left side.
Again, check the component placement diagram on the box guides.
You're going to want to just get one of these, get just a little solder on one of these, and then, you know, check the positioning, make sure it's the right depth.
There's some, like, alignment holes on the front of these things that don't always work very well.
That's why we just let them hang off the edge of the board there.
Once you get the three posts soldered, it really holds itself in very well, but you don't really need those alignment holes at all, or even in the front.
And then once it's all positioned, we just get a lot of solder in there to make sure it's very mechanically stable and flows very well.
Because there's a lot of pressure, sometimes if you have a tight RCA cable, when you're plugging it on there, it puts a lot of pressure on that jack.
So you want to make sure you have it well soldered.
So not only for a good electrical connection, but to keep it, you know, very solidly seated from a mechanical perspective.
Again, we're going to get one soldered and then we're going to pick it back up and move, position the connector around until it's right in the right orientation and seated the way we want before we put solder on the other three posts.
Alright, that looks nice.
That's the last one here.
I see there's a little bit of the metal on the back there sticking out, so I'm going to heat that up and see if we can force it back into the housing.
There we go, looks a little better.
Now we can go ahead and get a lot of solder in there to hold it into place, now that everything's positioned correctly.
And that'll hold it real solid even when we're plugging cables onto it.
Pulling them off and plugging them back on, it'll keep everything seated properly.
Real good, real solid there.
Alright, there's our fully soldered up board.
We have some keycaps we can pop on the buttons and then also the joystick.
And if you have other buttons like this, you can put different keycaps on.
If you have other compatible caps, customize it a bit.
Alright, so the first sketch we just loaded on here was...
Again, this sketch is in the box guide. It's just a really simple buzzer demo.
And it does use the TFT eSpy library to just put some text on the screen.
And then it just plays some tones out through the buzzer.
So let's power it up and you can see.
A little Mario music there.
So this is a really simple program that you can look at what it does.
Like I said, it's fairly simple and it just shows you how to make some sounds on the buzzer.
So really good kind of first sketch to get running after you've soldered up this board.
Part of the reason for wanting to do that one first is even if the library gets messed up
or something's not quite working right or one of the pins is shorted or something for the display,
as long as you have that one wire that gets between the ESP32T display module and the surface mount buzzer,
there's only one wire necessary for that.
As long as you have that one wire right and you don't have a power ground short elsewhere,
then whatever else is going on, this sketch should work.
So go ahead and try that one out first.
If that works out well, which it should,
the next sketch to try out from the box guide,
there are a couple of links to different sketches within a library,
example sketches that do infrared receiving, infrared transmitting, and then also relay infrared signals.
So that might be a nice thing to try next.
They also exercise the serial output.
They don't use the display because they're not specific to this particular T-display module,
but they do some really interesting things.
Of course, you can add in some display outputs if you want to do that.
So trying out the LED blaster and the infrared receiver next, that might be a good next step.
Then probably another very simple one that isn't too complicated.
It's actually in the guide. You can download it.
Maybe let's go ahead and load it up, the one that exercises the joystick.
It displays the state of the joystick on the display.
So here, let me get that programmed on here.
All right, so on this one here, we've loaded the sketch from the box guide.
That's the joystick sketch.
So let's go ahead and fire that up.
So let's see how that works.
All right, so just says it's launching a joystick test.
And then when you put the joystick, you know, up, down, left, right, or press the center button on it,
it puts it on the display and you can actually do button A and B also.
And you can actually hold them both down to get A and B and then go down or down and sideways and in all at the same time.
And whatever these contacts you close on the joystick and switches, it'll just put it on the display.
So again, just a little sketch you can run that'll let you know that your soldering is right,
you've made all the right connections for the joystick and the two buttons.
So that, you know, exercises the joystick and the buttons.
You know, both of the sketches we've loaded use the display, onboard display.
And then there's some demos for testing out the IR in and IR out.
The easiest way to test the audio video is there's a really cool program.
There's a link to it in the box guide called Dawn of AV.
It's from Bit Loony. He wrote some really cool code that does composite output and an audio line out using ESP32.
So let's load that on there now and I'll capture the output so we can see it here.
Hold on.
Yeah, so outputting to the composite video and the audio line out is actually, it's pretty nifty.
It does require a little bit of trickery, but you can check out the Bit Loony's code and see how that works.
Those techniques are the same ones that are used in a really neat project called,
I think it's ESP8Bit, that lets you emulate Nintendo Entertainment Systems and 8Bit Atari computer systems.
It's really neat. There's a link to it in the box guide. It's really kind of fun to play with.
It uses the file system in the ESP32, so the flash of the ESP32 can be set up to have a file system in it
and make sure you follow the instructions clearly in the repo for that.
If you want to mess around with that ESP8Bit project, make sure you set the file system up correctly.
There's a lot of other cool projects in the box guide, links to projects that would be interesting.
There is a thing called the ESP Marauder, which allows you to extend some pen testing tools
to leverage the Bluetooth and other wireless functionality of the ESP32.
So that's kind of a neat project.
There's a couple other projects that are targeted specifically towards the T-Display.
So they'll use the display without too much modification.
Getting different TFT display modules working at the right resolution for different programs can be a little tricky,
but that's a lot of the fun that you get with working with these projects.
So anyway, this badge is a really nice platform because it has an ESP32 processor,
which there's more and more stuff coming out for it all the time.
And then it has some really nice IOs that are pretty easy to program, the buttons in the joystick.
You probably won't see a ton of projects out there that use the AVIO, but they are kind of neat to play with.
Like I said, there's some really neat emulation out there that uses these for doing some retro gaming and some 8-bit computing.
A lot of programs can be adjusted to use the particular driver for this TFT display.
It's a pretty common driver. It works with a lot of the libraries for doing full-color graphics displays with the Arduino projects,
and particularly ESP32 has the power to really do some nice displays on that.
So anyway, it's a nice badge. Hopefully you enjoyed building it.
Take some real pride of ownership that you made the badge yourself and you can program your own stuff on it.
Maybe put a picture of yourself or your pet or your logo or whatever on there and do some neat stuff with it.
Oh, we didn't get into it here, but the guide has the instructions on how to use these little pins right here
to put a LiPo battery on here that charges when you plug the USB cable in.
And then there's a little power switch, which came in the parts kit for this badge.
And that switch will let you turn the battery, the LiPo on and off, basically take it in and out of the circuit
so that you can turn the board off when it just has the LiPo plugged in without having to reach in there
and remove this little tiny JST connector.
Just remember, though, if you turn that switch off, it actually takes the battery completely out of the circuit so it won't charge.
So if you want to charge it, you need to leave it in there and maybe write something in your program to have a sleep mode or something
so that your sound and display aren't going wild while you're just trying to charge the battery up.
All right, yeah, so we hope you enjoyed this and hit us up with any questions at hackerboxes.com
or if you're watching this live during the Hardware Hacking Village workshops,
we'll be online in the Hardware Hacking Village channel in Discord.
That's the Discord for DEF CON 28 safe mode.
If you're seeing this later somehow, feel free to contact us at hackerboxes.com with any questions you might have
and keep an eye out for future Hacker Boxes.
We're always trying to come up with new things.
We have some really interesting stuff coming up in the next couple months,
and we usually have some nice things a couple months after DEF CON
because while we meet up and talk to all of our friends,
they always have a lot of suggestions for projects they've been working on
and ideas they might like to see in the future Hacker Boxes.
And for those of you that aren't too familiar with Hacker Boxes,
you should just know that it's kind of like a self-fulfilling community thing
because we get most of the ideas now for future boxes from members
who have been playing around with our previous boxes and are trying something new on their own
and then think, oh, everyone else might like this, and they send it to us.
And we've had some guest designers from our community to help us out with some of the boxes.
So if you've got some really cool ideas, please reach out to us. We really like that.
And yeah, live the hack life. We look forward to seeing you online.
Drop us a note. Bye-bye.