HackerBox 0050

Introduction: HackerBox 0050

Greetings to HackerBox Hackers around the world! For HackerBox 0050, we are assembling and programming the HB50 embedded processor board. The HB50 supports experimenting with ESP32 microcontrollers, embedded IoT WiFi, bit bang sound, RGB LEDs, full-color TFT LCD displays, touch screen inputs, Bluetooth, and more. HackerBox 0050 also explores a tiny keyboard solution for any embedded project, I2C interfaces, power budgeting, and cellular automata.

This guide contains information for getting started with HackerBox 0050, which can be purchased here while supplies last. If you would like to receive a HackerBox like this right in your mailbox each month, please subscribe at HackerBoxes.com and join the revolution!

HackerBoxes is the monthly subscription box service for hardware hackers and enthusiasts of electronics and computer technology. Join us in livin' the HACK LIFE.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Content List for HackerBox 0050

  • Exclusive HB50 Printed Circuit Board
  • ESP-WROOM-32 Dual Core WiFi Module
  • QVGA Color TFT LCD 2.4inch Display
  • Integrated Display Touchscreen with Stylus
  • Six WS2812B RGB LEDs
  • Six Surface Mount Tacile Buttons
  • Piezo Buzzer 12mm SMD
  • AMS1117 3.3V Linear Regulator SOT223
  • Right Angle 40pin Breakaway Header
  • Two 22uF Tantalum Capacitors 1206 SMD
  • Two 10K Ohm Resistors 0805 SMD
  • CardKB Mini Keyboard
  • Grove to Female DuPont Breakout Cable
  • CP2102 USB Serial Module
  • DuPont Jumpers Female-Female 10cm
  • Hokusai Great Wave PCB Decal
  • Exclusive HackerBox WireHead Decal
  • Exclusive HackerBox 50 Challenge Coin

Some other things that will be helpful:

  • Soldering iron, solder, and basic soldering tools
  • Computer for running software tools

Most importantly, you will need a sense of adventure, hacker spirit, patience, and curiosity. Building and experimenting with electronics, while very rewarding, can be tricky, challenging, and even frustrating at times. The goal is progress, not perfection. When you persist and enjoy the adventure, a great deal of satisfaction can be derived from this hobby. Take each step slowly, mind the details, and don't be afraid to ask for help.

There is a wealth of information for current and prospective members in the HackerBoxes FAQ. Almost all of the non-technical support emails that we receive are already answered there, so we really appreciate your taking a few minutes to read the FAQ.

Step 2: HB50 Printed Circuit Board

To commemorate HackerBox Number 0050, we've spun an updated version of the most popular HackerBox circuit board by popular demand. The HackerBox 0020 Summer Camp badge kit sold out at DEF CON 25 in less than two hours. The PCB files have since been frequently requested. The board has been reprinted at least a couple of times by third parties. The design has inspired a handful of other badges and embedded IoT projects that we are aware of and hopefully several more that we are not aware of.

The updates found in the new HB50 PCB Kit include swapping the ESP-32 DEVkitC for the more compact ESP-WROOM-32 module. The five capacitive touch buttons have been replaced with mechanical tactile buttons. The five RGB WS2812 LEDs that were in white packages have been increased to six and are now in black packages. The piezo buzzer has been replaced with a more compact surface mount version. The power supply has been simplified. The color TFT display has been increased from 2.2 inches to 2.4 inches. The PCB is more compact and even has a few IO pins broken out for your hacking pleasure. Since the time of HackerBox 20, there are a lot more projects, examples, and code available for the ESP32, so let's get ready to rumble...

Features:

  • ESP32 Dual Core 160MHz Processor
  • 2.4 inch QVGA Color TFT LCD Display
  • WiFi 802.11 b/g/n/d/e/i/k/r
  • Bluetooth LE 5.0
  • Five Tactile Pushbuttons (+ one for Reset)
  • Six RGB WS2812 LEDs
  • Piezo Buzzer
  • 3.3V Linear Regulator
  • Expansion Header

As with its predecessor, the HB50 can be worn on a lanyard, used as a handheld, mounted on a wall, or deployed pretty much anywhere in countless wireless and colorful applications.

Step 3: Bring Up the HB50 Board

To minimize, or at least isolate errors, we suggest starting assembly by populating only the bare minimum of components to the HB50 PCB that are required to program the ESP32. This minimum viable approach is outlined in these steps:

  1. Watch this video on soldering castellated modules.
  2. Solder the ESP-WROOM-32 module onto the PCB. Take your time. Don't worry about the central ground pad under the module. It can only be soldered by reflow and is only there for added thermal coupling.
  3. Use a multimeter to make sure there is no short between 3V3 and GND. If there is a short, it must be identified and removed before applying power to the board or the smoke monster might come out.
  4. Solder the two 10K resistors just above the EN and IO0 buttons.
  5. Solder the EN and IO0 buttons. The other four buttons can be left off for now.
  6. Break off a 16 pin strip of header. Insert it from the CPU side of the PCB such that the pins are pointing to the nearest edge of the PCB. Then solder the header into place from the button side the of the PCB.
  7. Verify again that there are no shorts between 3V3 and GND.
  8. Use four DuPont jumper wires to connect the CP2102 module as shown. Note that we are temporarily using the 3V3 power source since the linear regulator is not yet populated onto the PCB.
  9. If your computer does not already have the Arduino IDE installed, obtain it here.
  10. Configure ESP32 support within the Arduino IDE using this guide.
  11. In the IDE, set tools > board to "ESP32 Wrover Module".
  12. Plug the CP2102 module into a USB port on the computer.
  13. In the IDE, set tools > port to the correct USB port for the CP2102.
  14. If a new port doesn't appear when the CP2102 module is inserted, install a the required USB driver from Silicon Labs.
  15. Grab the button_demo sketch.
  16. Compile and upload the sketch.
  17. When uploading starts, hold down both EN and IO0 buttons. EN is basically a reset button and IO0 is the strapping pin to force reprograming the flash.
  18. Once the dots and dashes appear in the IDE, let up the EN button (release reset) but continue holding down the IO0 button until the flash programming begins to be sure that the strapping pin in recognized upon boot.
  19. When programming is complete, hit the EN button again to reset and start the newly flashed code.
  20. Open the Arduino IDE Serial Monitor and set it to 115200 baud.
  21. Pressing the IO0 button should generate a message in the serial monitor.

Step 4: Buttons, Buzzers, and LEDs, OH MY!

MORE BUTTONS

Once the initial programming step is successful, power off the HB50 board and solder on the remaining four buttons. The same button_demo sketch should now report all five buttons (IO0, A, B, C, and D) to the serial monitor when they are pressed.

BUZZER

Power off the HB50 board and solder the buzzer onto its pads. Orient the dot on the buzzer to be closest to the "+" pad on the HB50 board. Program the buzzer_demo sketch and reset (EN) the board to let it run. Sounds good?

WS2812B RGB LEDs

Power off the HB50 board and solder the six LEDs onto their pads. Orient the white marked corner of each LED to correspond to the tabbed corner as shown on the PCB silkscreen.

From the Arduino IDE tools > Manage Libraries, install the FastLED library.

Open the sketch: File > Examples > FastLED > ColorPalette.

In the sketch code, change LED_PIN to 13, NUM_LEDS to 6, and LED_TYPE to WS2812B.

Upload the sketch and reset (EN) the board to let it run. Enjoy blinky lights of every color.

LINEAR POWER REGUALTOR

With the LEDs in play (and especially once the WiFi transmitter is enabled) the HB50 is drawing a lot of current from the 3V3 supply. Let's improve the 3.3V power capacity by soldering the AMS1117 (SOT 233 Package) Linear Regulator into place. Also populate the two 22uF filter capacitors next to the regulator. Note that one side of each capacitor silkscreen is rectangular and the other side if octagonal. The capacitors should be oriented so that the dark stipe on the package aligns to the octagonal silkscreen side. The regulator will now turn some of the 5V supply into 3.3V and can provide a lot more current than the CP2102 module by itself. To now supply power to the HB50 through the 5V supply, move BOTH ENDS of the 3V3 DuPont jumper over to 5V. That is, source 5V from the CP2102 module into one of the 5V input pins on the HB50 header. Note that the 5V pin can actually be supplied with any voltage of between 3.5V and 5V.

Step 5: ILI9341 QVGA Color TFT LCD Display

The MSP2402 Display (lcdwiki page) is an SPI bus module based on the ILI9341 chip. The chip drives a 2.4inch color screen supporting 65,000 colors and a resolution of 320X240 pixels (QVGA).

The module also features touch screen input and an SD card slot.

PRE-TEST DISPLAY I/O PINS

If you've been having problems with the ESP-WROOM-32 pin soldering up to this point, it might be a good idea to pre-test the display module I/O pins before soldering the display module into place. As shown below and on the schematic diagram of the PCB, the ESP32 IOs in play are 19, 23, 18, 5, 22, 21, and 15. Note that these are the IO numbers and not the pin numbers. The pins can be tested by writing a small program that sets all of those IOs as outputs and then loops cycling through the IOs turning each one on and off in turn with a second or two delay between. A simple LED with a current-limiting resistor attached can be used as a probe to make sure that each IO pin mapped to the display headers (see the schematic) is being properly turned on and off and that none of them are coupled together.

Once all of the pins are verified, the TFT display can be soldered into place using both the long and short headers.

INSTALL AND CONFIGURE TFT LIBRARY

From the Arduino IDE: tools > Manage Libraries, install the TFT_eSPI Library

Go to the Arduino Libraries folder. Open the TFT_eSPI folder and edit the file User_Setup.h to configure the module driver chip, pixel resolution, and IO pins. Do this by making sure that the defines are (un)commented as shown below and set to the values as shown. You can verify that these correspond to the connections in the PCB schematic.

// Section 1.

#define ILI9341_DRIVER
#define TFT_WIDTH  240 
#define TFT_HEIGHT 320 

// Section 2. 
// For ESP32 Dev board 

#define TFT_MISO   19
#define TFT_MOSI   23
#define TFT_SCLK   18
#define TFT_CS     5  
#define TFT_DC     22  
#define TFT_RST    21  
//#define TFT_RST  -1  
//#define TFT_BL   32  
#define TOUCH_CS   15

Open and upload the sketch:

File > Examples > TFT_eSPI > 320 x 240 > Cellular_Automata

This sketch is a cool visual demonstration of Conway's Game of Life.

A hacker glider might evolve into existence... keep an eye out!

DISPLAY HACKERBOX LOGO ON TFT LCD

Try out the BitHeadDemo sketch.

Step 6: Touch Screen User Input

The following sketch can be used to configure and test out the touch screen functionality:

File > Examples > TFT_eSPI > 320 x 240 > Keypad_240x320

The "send" button transmits the entered number to the serial monitor at 9600 baud.

Step 7: CardKB I2C Keyboard

This tiny board implements a full-featured QWERTY keyboard which can be used with pretty much any of your microcontroller projects. The keyboard communicates using a GROVE A port (I2C interface) on Address 0x5F. Button combinations (Sym+Key, Shift+Key, Fn+Key) are supported to output rich key values.

Start with the simple example CardKB_Serial sketch, which communicates with the keyboard over GROVE I2C and echoes keypresses to the Serial Monitor. The sketch can be run on ESP32 (such as the HB50), Arduino UNO, Arduino Nano, or any platform supporting I2C.

Note that there are two different Wire.begin calls for ESP32 and for UNO/Nano. Uncomment the appropriate one of those lines for the host you are using. Wire up the yellow and white GROVE breakout wires to the pins specified on that line of code. Wire the red GROVE breakout wire to 5V and the Black GROVE Wire to GND.

Manufacturer Documentation Page. Note that even though the CardKB onboard microcontroller comes pre-programmed, the firmware source is available if you wish to hack the keyboard.

Step 8:

We hope you are enjoying this month's HackerBox adventure into electronics and computer technology. Reach out and share your success in the comments below or on the HackerBoxes Facebook Group. Also, remember that you can email support@hackerboxes.com anytime if you have a question or need some help.

What's Next? Join the revolution. Live the HackLife. Get a cool box of hackable gear delivered right to your mailbox each month. Surf over to HackerBoxes.com and sign up for your monthly HackerBox subscription.

15 People Made This Project!

Recommendations

  • LED Strip Speed Challenge

    LED Strip Speed Challenge
  • Sculpting Challenge

    Sculpting Challenge
  • Clocks Contest

    Clocks Contest

36 Discussions

0
SteveMunson
SteveMunson

2 months ago

I am ready to test the display. After modifying the User_Setup.h file, trying to run Cellular Automata, I get this when trying to compile:

bash: line 0: [: too many arguments
cp: target 'partitions.csv' is not a directory
exit status 1
Error compiling for board ESP32 Wrover Module.

Any idea what this means?

0
edub3605
edub3605

2 months ago

Buttons and buzzer worked like a charm. The LED's will not light up. When I press the reset button the red button on the programming board flashes but no lights on the board. Any Ideas?

0
edub3605
edub3605

Reply 2 months ago

Magically I unplugged it and plugged it back in and it worked?!?!

0
HowardW29
HowardW29

2 months ago

I ran into two issues, which may really be the same one, but here goes:

- i got to the point of the first button test, but when I plug board and serial connector it into my computer's USB port the chip on the CP2102 gets HOT!!! I haven't tried actually running the code, because that didn't seem like a proper result from just plugging in.
- my laptop is running Linux (Suse OpenLeap 15.1) and I run "dmesg -w" in a terminal to see hardware messages. When I plug the CP2102 in all by itself, I see the connection information in the dmesg window, but when I plug it in with the project board attached per the instructions above, I see no response at all. And then it gets hot.

I checked for a short between VCC and ground and did not detect anything, so what else might be causing that?

1
HowardW29
HowardW29

Reply 2 months ago

So I guess I really did have a short after all. I did a little desoldering on the VCC and ground points on the ESP32, and I got that working.

Now I have a different issue. After I added the last four buttons, they all fire, but both buttons A and B trip the both the A and B events. If I press button A, it says I pressed both A and B, and if I press button B, it reports that I pressed both A and B.

I don't see any bridging of the solder between buttons A and B, mostly I think because they are too far apart. Also, I don't see any bridging at the IO16 and IO17 points on the chip either. I'm mystified.

0
Pete Lefferson
Pete Lefferson

2 months ago

For the life of me, I can't find User_Setup.h

0
Pete Lefferson
Pete Lefferson

Reply 2 months ago

Sorry, I got stuck in my head Arduino Library Folder with Arduino Manage Libraries.
.

1
StephenM19
StephenM19

2 months ago

OK, Hmmm... I would like to see a photo of a completed board as i'm wondering about connections.

I did not find any four pin header in the box and it appears that the SDCard slot on the display board is wired up with a four pin header.

I found (maybe) a hint that there should be a four pin header in the text: "...the TFT display can be soldered into place using both the long and short headers..." Am I right? should i be hooking this up?

NOTE: a picture of the grove keyboard hooked up would also be good, please.

1
herppderpp
herppderpp

Reply 2 months ago

I uploaded my completed project and included pictures of the keyboard hookup and all sides of the board. You identified an issue with the box which is no 4 straight-pin header (this stumped me for a while too).

Once post is approved you should be able to see it. Hope it helps!

1
NewGnu
NewGnu

Reply 2 months ago

Unfortunately, I don't have the device handy to take an image at the moment, but yes, the 4 unpopulated pins on the screen can be connected through if you have spare pin headers (mine didn't come with extras either, but I had some laying around from a previous project).
If you don't connect these, the only thing you lose out on is the SD card slot. If you do chose to use it, make sure you space the screen away from the main board by an extra few millimeters, or the RGB LEDs are going to be in the way and you won't be able to use the SD slot anyway.

2
strudinox
strudinox

2 months ago

I'm at the part where the first sketch needs to be uploaded. I've soldered in the ESP board, switches and resistors, verified proper connection pins to the CP2102, setup the IDE with the right board, comm, etc per the instructions, however I cannot get the sketch to upload. All I basically get is:

Connecting........_____....._____....._____....._____....._____....._____....._____

A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet content
An error occurred while uploading the sketch

I'll hold both buttons down while releasing EN when it tries to connect, but no dice. Tried two different PC's, verified driver is installed, multiple USB ports and am at a loss at this point.

0
herppderpp
herppderpp

Reply 2 months ago

I saw this when I pressed/depressed the buttons incorrectly, or uploaded without pressing any buttons. The order is:

After compiling, uploading - press both
"Connecting........_____" (after first set of dashes) - depress EN
After upload complete (I wait until the end) - depress 1O0, then press EN to reboot.

0
seaprimate
seaprimate

Reply 2 months ago

I accidentally connected tx-tx and rx-rx the first try, and got that same issue. once I caught the mistake and switched the tx to rx and vice versa, it worked fine. may not be your problem but worth a double check

2
seaprimate
seaprimate

2 months ago

The sketch for the Summer Camp badge reworked for this badge. This reworked code will work as is on the badge, but it won't have a mute function. Feel free to use it to utilize the leds/buzzer/wifi/screen in one sketch.

it's a bit messy because I was playing with the intterupt. if anyone knows how to fix the interrupt code so it uses the 3rd button to (de)activate mute let me know. I've tried several things none which worked.

https://github.com/seaprimate/HB20-edit-for-HB50

0
jer502
jer502

Reply 2 months ago

Thank you for doing / posting this!

1
jer502
jer502

Question 2 months ago

Does anyone have a sketch they'd like to share that takes advantage of the lights, sound and/or buttons along with the screen? Still trying to learn the programming aspect and am not quite clever enough to write my own. Could I possibly combine/mesh some of the sketches used in this guide? Thanks!

1
seaprimate
seaprimate

Answer 2 months ago

Hackerbox 20 badge uses the same esp32, lights and buzzer. You'll have to change the number of lights from 5 to 6, add an extra increment in the led loop, and change the pin numbers around, but the sketch should work. haven't written code for a mute button, and I just changed mute from true to false by default. once I get the buttons up and running I could share the modified code.

Also all the extra suggestions for that badge apply to this one as well.

0
lmperkins
lmperkins

Question 2 months ago on Step 4

i see that there is a card reader on the back of the display board. Is this still accessible once the display has been soldered in? Is it useful? Thanks.

1
NewGnu
NewGnu

Answer 2 months ago

It is functional, but the rgb leds get in the way if you solder it flush to the main pcb. If you lift the screen away by an extra 3mm or so when soldering it in, you should have enough clearance. I only did the Arduino->Examples->Any Board->SD->listfiles example (change the CS pin from 4 to 27), but it works just fine.