HackerBoxes 0020: Summer Camp

Hacker Summer Camp: This month, HackerBox Hackers are working with Electronic Conference Badges while exploring embedded wireless communications and user interface functionality with the ESP32 platform.

This Instructable contains information for working with HackerBoxes #0020, which can be purchased here. If you would like to receive a box like this right in your mailbox each month, now is the time to subscribe at HackerBoxes.com and join the revolution!

Topics and Learning Objectives for HackerBox 0020:

• Explore the social history of hacker conferences and badges
• Assemble a custom "conference badge" platform
• Configure the Arduino IDE for use with the ESP32 processor
• Use interrupt handlers for capacitive touch sensor inputs
• Bit-bang melodies on a simple buzzer
• Demonstrate color-cycling on single-wire LED pixel chains
• Display text and graphics on a color TFT LCD Display
• Integrate embedded functions for a wireless game of tag demo

HackerBoxes is the monthly subscription box service for DIY electronics and computer technology. We are hobbyists, makers, and experimenters. And we are the dreamers of dreams.

Step 1: HackerBoxes 0020: Box Contents

• HackerBoxes #0020 Collectable Reference Card
• HackerBoxes "Conference Badge" PCB
• Components and Connector Kit for PCB
• ESP32 DevKitC Processor Module
• QVGA Color TFT LCD Display
• Two-in-One LiPo Battery Manager
• WS2812 RGB LEDs
• Piezo Buzzer
• MicroUSB Cable
• Female DuPont Jumper Wires
• Opening Tool for Mobile Devices
• Exclusive "Hack The Planet" Silicon Wristband
• Exclusive HackerBoxes Badge Lanyard
• Exclusive "reverse engineer" Decal

Some other things that will be helpful:

• Soldering iron, solder, and basic soldering tools
• LiPo battery pack or USB power supply
• Double-sided tape or velcro for battery pack
• Computer with Arduino IDE

Most importantly, you will need a sense of adventure, DIY spirit, and hacker curiosity. Hardcore DIY electronics is not a trivial pursuit. It's a real challenge and when you persist and enjoy the adventure, a great deal of satisfaction can be derived from learning new technology and hopefully getting some projects working. Just take each step slowly, mind the details, and don't hesitate to ask for help.

Step 2: Hacker Summer Camp 2017

Hacker Summer Camp is a term of endearment for the collective activities of one week each summer when tens of thousands of us descend upon Las Vegas, Nevada. These activities center around three conventions: DEF CON, Black Hat, and BSides Las Vegas. For a flavor of the awesomeness, check out the feature length DEF CON Documentary Film. All around Summer Camp 2017, keep an eye out for the BitHead logo on the back of our shirts and say hello. Here are the details for 2017:

JULY 25-26:BSIDES LAS VEGAS
Tuscany Suites
Free Admission
Approximately 3,000 Attendees Expected
Keep an eye out for HackerBoxes in the big Chill-Out Room. We are an auction/raffle sponsor, so Lady Luck may come bearing Elite DIY Electronics. Always split Aces and Eights.

JULY 26-27:BLACK HAT
Mandalay Bay
Over 15,000 Attendees Expected
We will be out surfing "The Bay" so hit us up for some free commemorative Summer Camp swag.

JULY 27-30:DEF CON 25
Caesars Palace
Over 20,000 Attendees Expected
Here are some events to put on your list:

• Thursday 8pm: HackerBoxes Meetup - Starbucks inside Caesar’s Palace
• Friday - Sunday: Visit us at the HackerBoxes table in the Vendor area
• Saturday 1pm: Attend the "Hardware Hacking: Old Sk00l and New Sk00l" talk by hwbxr (founder of HackerBoxes) in the Village Talks Room just outside the contests area

SEE YOU THERE!

Step 3: DEF CON Badges

Over its 25 year history, DEF CON has become known for awesome badges.

There are the official badges that are purchased (or earned) and are worn to access the con itself. There is also an entire world of custom unofficial badges.

• ENGADGET gallery of DEFCON badges
• WIRED Magazine article on DEFCON Badges
• HACKADAY on the unofficial badges of DEF CON 23

Step 4: HackerBoxes Badge Platform

Even if you are not going to DEF CON, your summer will be complete with this cool wearable platform of hackable electronics. Build it, customize it, wear it, display it... endless summer fun.

The HackerBoxes Badge PCB has been designed to support a variety of components and modules. It can be worn on a lanyard, used as a handheld, mounted on the wall, or deployed pretty much anywhere in countless wireless and colorful applications.

Features:

• ESP32 Dual Core 160MHz Processor
• 2.2 inch QVGA Color TFT LCD Display
• WiFi 802.11 b/g/n/d/e/i/k/r
• Bluetooth v4.2 BR/EDR and BLE
• Five Touch Pad Inputs
• Five RGB WS2812 LEDs
• Piezo Buzzer
• LiPo Battery Charger and Manager

Step 5: Assembling the Platform

The PCB and components can be assembled with a few options depending upon how you would like to use them. Read through this step and also the information about the power supply before deciding on the details of your build and beginning assembly.

Assembly Order:

• The WS2812 RGB LEDs should be soldered first since they are surface mount devices and the leads are easier to reach without other components in the way.
• The battery leads should be soldered in from the read of the PCB (solder on the front of the PCB) prior to attaching the battery management module, which may block the battery leads a bit.
• The electrolytic capacitor should be mounted before the LCD module.
• The buzzer should be mounted after the LCD module.
• All other components may be assembled in pretty much any order.

Component Polarities:

• The WS2812 RGB LEDs have a diagonal notch on one corner to match up with the same marking on the PCB silkscreen.
• The electrolytic capacitor has a negative (-) stripe above the negative lead. The PCB has a positive (+) marking for the other lead.
• The ceramic capacitors are not polarized.
• The buzzer has a positive (+) marking to match up with the same marking on the PCB.
• The LiPo battery holes have a positive (+) marking on one side - this is for the red wire.

WITHOUT Female Header Sockets:

• The female headers can be used to make sockets for the ESP32 and the LCD so that the modules can be removed for debugging or reuse. However, the sockets make the assembled PCB much thicker, so they are definitely not the best option for wearable or handheld applications.
• Mount the battery manager module first.
• The ESP32 board can be spaced a couple of millimeters up off of the PCB to ensure that the antenna portion clears over the battery manager module. Put something to hold it into place (or just use fingers) while starting the soldering. After that, the solder will hold it in its (very slightly) elevated position.
• Also, to create more space, the Battery Manager module can be mounted flush against the PCB using only header pins (without the black plastic spacer). Put the pins in from behind (with the black spacer on the rear of the PCB), solder the pins to the PCB (from the top), stack on the module, solder the pins to the module, snip off the plastic spacer and any portions of the pins on both side. Now it should be very low profile.

WITH Female Header Sockets:

• To cut the female headers to length, just use small wire cutters to snip through the hole ONE PAST where you want the socket strip to end. The pin/hole that you cut through is sacrificed.

Minimal Build Considerations:

• You may wish to focus on making a lighter and thinner build (to wear it).
• As mentioned above, the female sockets should be avoided.
• All five of the capacitors can probably be left off. There is reasonable decoupling on the modules.

Access to SD Slot on LCD Module:

• We do not use the SD slot in any examples here, but you need to make some accommodations if you plan to use it.
• The ceramic capacitors need to be left off, or mounted on the rear of the PCB, or replaced with chip capacitors of the same value (100nF).
• The LCD module should be spaced a couple of millimeters up off of the PCB to clear SD card slot access over the WS2812 LEDs.
• A shorty MicroSD to SD adapter can be used to prevent a flash card from extending out from behind the LCD module and obstructing the RGB LEDs.

Stabbies and LiPo Battery Mounting:

• After soldering is complete, there will be a lot of "stabbies" or pin leads protruding from the bottom side of the PCB. These should be trimmed down with small wire cutters (while wearing safety glasses, of course).
• The LiPo pack can be attached to the back of the board using thick double sided tape or velcro strips. The tape or strips should be thick enough to protect the battery pack (and your shirt) from the remaining stabbie stumps. If not, a bit of card stock or thin plastic can provide a nice mechanical barrier between the back of the PCB and the battery or anything else that the PCB might rub against.

Step 6: Power Supply

The Badge can be powered by either a LiPo (lithium polymer) Battery Pack or by USB. The power supply mode is selected by the jumper block.

POWER OFF

• Switch jumper block to USB side
• Unplug USB cable so no power is applied

USB POWERED

• Switch jumper block to USB side
• Plug MicroUSB cable into ESP32 module
• Power other end of USB cable with a computer, hub, USB wall supply, or mobile power pack
• The battery manager will automatically charge the LiPo Battery (if one is connected)

LiPo BATTERY POWERED

• Remove MicroUSB cable so no power is applied
• Switch jumper block to BAT side
• Battery manager discharges battery and boosts it up to 5V

It is suggested not to use a socket for the battery manager. Solder it (using header pins) directly to the PCB. This LiPo battery is a good example of the type to use. They are a little large, but very thin. They fit perfectly on the back of the PCB and they provide many hours of operation between charges.

BATTERY WARNING: Always be aware when charging or discharging LiPo batteries. In rare instances, they can get warm, swell up, or even burst. Do not leave them unattended. These are the type of batteries in mobile phones, tablet computers, and laptops, so they are generally safe and trustworthy for a long time, but it is always better to be safe than sorry.

Step 7: ESP32 and Arduino IDE

The ESP32 is a single chip 2.4 GHz Wi-Fi and Bluetooth combo solution. It is highly integrated, requiring less than ten external components. The ESP32 integrates the antenna switch, RF balun, power amplifier, low noise receive amplifier, filters, and power management modules. As such, the entire solution occupies minimal Printed Circuit Board (PCB) area.

The ESP32DevKitC is a small ESP32-based development board produced by Espressif. Most of the I/O pins are led out to the pin headers on both sides for easy interfacing. A USB interface chip and voltage regulator are integrated into the module.

While the ESP IDF (link below) can be used to directly program and flash the ESP32, support for the ESP32 within the Arduino ecosystem and IDE has been continuously evolving. This Arduino route is a very quick and easy way to work with the ESP32.

The Arduino ESP32 github repository includes installation instructions for LInux, OSX, and Windows. Click to that link and follow the instructions that correspond with the operating system on your computer.

More Resources:
ESP32 Datasheet
ESP32DevKitC Schematic
ESP32 Technical Reference Manual
ESP IDF (IoT Development Framework) Programming Guide

Step 8: Touch Sensor Inputs

The Badge PCB includes five metal pads to serve as user input buttons. These pads are attached to the ESP32 I/O pins numbered 12, 13, 14, 15, and 27. These I/O pins each support touch sensor input.

The attached touch_demo sketch shows how to set up interrupt handling functions to be called whenever one of the touch sensors is triggered. Use the Arduino IDE to compile and flash the demo onto the ESP32DevKitC module. Once flashed, open the Arduino IDE serial monitor, and touch the sensor pads.

Step 9: Buzzer Output

The Badge PCB has the Piezo Buzzer pads wired to ESP32 I/O pin number 18.

The attached buzzer_demo sketch shows how to bit-bang some very retro sounding tones on the simple buzzer.

Step 10: NeoPixel RGB LEDs

The Badge PCB has landing pads for five NeoPixel RGB LEDs (WS2812). They are wired in a chain off of ESP32 I/O pin number 5.
The attached rgbled_demo sketch shows how set and cycle the colors of the five RGB LEDs. The demo uses the popular Adafruit NeoPixel Library, so be sure to have that installed and updated within your Arduino IDE beforehand.

Step 11: Color TFT LCD Display

The Badge Graphical Display is provided by a 2.2 inch TFT LCD Module. The display has 320x240 full color pixels (QVGA). The module is 3.3V compatible and has a 4-Wire SPI Serial Interface to the ILI9340C controller chip.

This MartyMacGyver demo using the Adafruit ILI9341 driver can be loaded to show some really nice graphics features. Just be sure to change the pin numbers to match those on the Badge PCB by pasting this block over the stock pin assignments:

// TFT Display Pins<br>#define TFT_CS    19
#define TFT_DC    22
#define TFT_MOSI  23
#define TFT_CLK   26
#define TFT_RST   21
#define TFT_MISO  25

Step 12: Badge Demonstration Firmware - Wireless Tag

Combining all of these functions together, along with some of the wireless communication features of the ESP32, can make for a very cool, interactive badge including a "wireless tag" mode.

HB020_Badge_A
Using this sketch, put your handle into the following line after the underscore:
char ssid[]="HackerBoxer_L33tHaX0r";

Your handle text is transmitted via 802.11 as SSID broadcast packets for all to see. Any detected wireless network SSIDs are listed on the display. Detected SSIDs starting with the text "HackerBoxer_" are assumed to be from other such badges and are displayed as IDs that have been tagged.

If two or more such badges encounter each other (for example, at DEF CON), they will display lists of handles from all of the other badges they have tagged. Of course, the badges play sounds and cycle the LED colors along the way. The single touch pad on the right is used to toggle the mute setting on the audio.

HB020_Badge_B (added July 16, 2017)

Rev. B has some UI and aesthetic improvements. Inter-badge comms still compatible with Rev. A. Here is a change log:

• replaced beep() with post from sconklin
• added BitHead graphic to LCD functionality
• clean up display text a little
• default to muted state
• display mute indicator on upper left of screen
• tighten timing loops for more "entertainment"

This is the version we will be demoing at Summer Camp, so please feel free to edit in your handle into the code and load this version onto your badge. Come by the DC25 Vendor table, say hello, and tag our badges!

Non-Badge Applications for Platform
This ESP32 + QVGA platform can support packet sniffing, games, and various other challenges. An interesting application for an office (or other environment where the same people are around day after day) would be to gather packets and then associate the MAC addresses (such as from mobile phones) with the names of their owners. Then, the system could greet your friends and coworkers by displaying their name whenever their MAC address is detected. Unique sound effects and LED modes could even be associated with different identified MAC addresses.

Step 13: Opening Mobile Phones and Tablet Computers

This might be the perfect tool for getting inside mobile devices... "THE OPENING TOOL" from Unlimited Innovation.

Step 14: Hack the Planet

Thank you for joining our adventures into the world of Electronic Conference Badges while exploring embedded wireless communications and user interface functionality. If you have enjoyed this Instrucable and would like to have a box of electronics and computer tech projects like this delivered right to your mailbox each month, please join us by SUBSCRIBING HERE.

Reach out and share your success in the comments below and/or on the HackerBoxes Facebook page. Certainly let us know if you have any questions or need some help with anything. Thank you for being part of HackerBoxes. Please keep your suggestions and feedback coming. HackerBoxes are YOUR boxes. Let's make something great!