 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 DEFCON 28 Safe Mode. Hope everyone's being safe. Hope you're having a great time. So Hackerboxes is the original monthly subscription box for DIY electronics, computer enthusiasts, and hacker culture. The theme of this particular Hackerbox 57 is Safe Mode. So the primary content item of Hackerbox 0057 that we're working on here is a 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 lock picking and a set of lock picks. 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 BitHead logo wearing a mask. It's a special Safe Mode lapel pin. And let's see, there's also a USB cable. And 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. And it also lets you control media functions, such as turning volume up and down and jumping tracks. So and 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. 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 megahertz. So it's very full-featured for a microcontroller. It also has a built-in Wi-Fi and Bluetooth, a whole bunch of like 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 240 by 135 display. It looks really sharp at that small size. It's actually quite a lot of pixels. And it has a built-in USB-C interface. It also has a battery charger. You can connect the LiPo battery to it. It'll keep it charged when it's plugged into USB power. All right, so 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. And 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 mount device. There's a couple of buttons. So with this joystick and these two buttons, you can do a lot of nice controls. There's a infrared receiver and a infrared LED for doing auto r-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 mount buzzer there for making sound. So you can make sounds on board 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 Hacker Box's 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 graphic demo showing a little graphic image, 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 tool chain. So this is a good time to probably tell you that every Hacker Box has an online box guide, which has lots of different information about how to use the devices in the box. For some projects, it 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 Hacker Box 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 the 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 small, the 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 TFT Espy 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 comes without the, doesn't have the pins soldered on their 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, before we get to soldering this module, let's go ahead and power it up and just make sure that it works fine. And 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 East by library for controlling the display, the display driver. OK, so let's check out the actual PCB. This is obviously what we'll be doing our soldering. You 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 resistors which by measuring them. There's a 220 ohm, a 330 ohm, and a 1K ohm. A 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 orange, orange, and black, that's a 330. So that's a 330 ohm resistor. Let me go ahead and put it through and then 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, 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 the 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. And in order, they go a 330, 220, 1K from 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. 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. 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. 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 some 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 join 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. All right, 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. It's where you want to make sure you're wearing your safety glasses and hold onto the leads while you cut them. You don't need the 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 little 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 one. Pin one is at the top. When the board is oriented like this, the display up. 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 flowed 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. Like, 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. So it's pretty easy. Again, just tack one little bit down. And when only one part of it's 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, this one on here. 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, I'm going to say there's some, that looks pretty good. There's a nice flow, nice shiny flow all over the lead and the pad. So we get this, we have one more pin on each one. And if you want, you can hit the original pin just to, 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 this, 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 it's, 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. And we're just doing this nice and slow, getting each terminal and making sure the solder flows really nicely. Alrighty, we've got our joystick done. Now the button's done. We're cooking in here. Alrighty, so next we're gonna put the T-Display on, which has these headers that come separate. So it's gonna 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 then 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 in down in the hole. And remember, when you see the smoke coming out, that means that you're getting the, oh, 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 wanna leave the plastic on there for now to catch any flux splatter. When you see that smoke, 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 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. Put that back in. You 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. So 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 that it's completely seated properly. And 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 avoid in the PCB. Let me 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 a couple more here. And 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 of minutes. Just take your time. We're gonna 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 header, 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 just help them 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 it makes a nice shiny kind of in 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 it fills it in all the way around to make some nice clean, shiny, well-flowed connection. So there's our T-Display. So I'll put the camera a little bit. Display is all done, all 48 of those connections. So let's get on to this little driver transistor. Notice that the 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 transistors 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 don't think I'm gonna 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. You see that solder's real quick because the plated holes are very small on these, they're very thin. There's not a lot of metal there to waste the heat. It just solders very quickly, heats up quickly and solders quickly. We'll cut the leads off. We wanna keep checking back to our component placement. Diagram 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 three or four millimeters so that I can fold it over and it gives it like a nice, like an edge firing edge blasting configuration. I like the way that looks and it feels like it's a little bit more like a transmitter like that would be on the end of the board of a remote control, like a TV remote or something. So it's just two quick leads. Remember the short lead goes on the flat side of the circle in the placement diagram. 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. It was unfortunately where it's placed right there. It's kind of right next to the reset button. So if you're going to use their 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, heat flows on that real quickly. Very nice, very quick. Turn the leads off. I should mention we can take the leads off 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. I'll just skip that for now. It's a little time consuming and everyone knows how to cut wires. They're not really in the display. The display leads are not really in the way until we try to put a battery on there. 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 when you're, if you set this, the badge down, you can aim like an IR remote at it and it'll receive from one side and then it blasts out of the top IR blaster style. 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 guide. So you're going to want to just get one of these, get just a little solder on one of these and then check the positioning, make sure it's the right depth. There's some alignment holes on the front of these things that don't always work very well. So we just let them hang off the edge of the board there. Once you get the three post-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 just 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 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. All right, that looks nice. Last one here. So 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. Looks a little better. I'm going to 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. All right, there's our fully soldered up board. We've got some keycaps. We can pop on the buttons and then also the joystick. So let's get these on here. And if you have other buttons like this, you can put different keycaps on if you have other compatible caps to make it customize it a bit. All right, 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 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 ESP32 T-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 as 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 out well, which it should. You know, the next sketch to try out on the, 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. But the, so trying out the infrared LED blaster and the infrared receiver next, that might be a good next step. Then probably another very simple one that doesn't, 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 we can see how that works. All right, so just as it's launching a joystick test, and then when you put the joystick 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 bolt down to get A and B and then go down or down and sideways and in all at the same time. And whatever of 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 exercises the joystick and the buttons. Both of the sketches we've loaded use the display on board display and then there's some demos for the, 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 Don of AV. It's from Bitlooney. 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 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 Bitlooney'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 ESP8 bit that lets you emulate Nintendo Entertainment Systems and 8-bit 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 wanna mess around with that ESP8 bit project, make sure you set the file system up correctly. So there's a lot of other cool projects in the box guide, links to the projects that would be interesting. There is a thing called the ESP-Mirata 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 on these 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 and the joystick and then the... You probably won't see a ton of programs out there, projects out there that use the AVIO, but they are kind of neat to play with and there are some, like I said, there's some really neat emulation out there that uses these for doing some retro gaming and some 8-bit computing. And then 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. So you can, 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 you can, your sound 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 during the, 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 of months and we usually have some nice things a couple of 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, 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've 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.