Touch Screen Business Card

by Vlorbschnat in Circuits > Arduino

2754 Views, 27 Favorites, 0 Comments

Touch Screen Business Card

IMG_20170911_120000.jpg
IMG_20170911_120014.jpg
IMG_20170911_120131.jpg
IMG_20170911_120710.jpg
IMG_20170911_120427(1).jpg
IMG_20170911_120403.jpg

I am a Mechanical Engineer by degree, but I have also developed skills in Electrical Engineering and programming from years of projects involving circuitry and microcontrollers. Since employers will expect that I have skills in Mechanical Engineering due to my degree, I decided to make a business card that would showcase my EE and programming skills. I considered a range of options, from a custom-designed PCB with my name and contact info on it and a few useful reference tables, to a PCB with that and a little LED flashlight circuit on it, but ultimately I went with the most elaborate option I was considering, which was a business card with an Arduino and a touch screen on it that would let someone scroll through various information about me. It is admittedly highly elaborate and costly for a business card, but of the possible designs I considered is is easily the coolest and was also the most fun to design and make.

Parts and Supplies Required

IMG_20191013_164529 (1).jpg
IMG_20171003_114219.jpg
IMG_20171002_155035.jpg
IMG_20171002_154912.jpg
IMG_20171002_154741.jpg
IMG_20171001_134529.jpg
IMG_20171001_134308.jpg

Components:

MicroSD card (optional, I loaded my resume and portfolio onto a MicroSD card inserted into the LCD screen)

Custom carrier board

Header pins

Adafruit Touch Screen (P/N 2478)

Adafruit Pro Trinket 3.3V (P/N 2010)

Adafruit Push Button Power Control Board (P/N 1400)

Adafruit Li-Ion/Li-Poly Backpack Board (P/N 2124)

Adafruit 150 mAh LiPo battery (P/N 1317)

Adafruit Momentary Push Button (P/N 3105)

2X Resistor 1.2K Ohm SMT 0805

1X Resistor 220 Ohm SMT 0805

Materials/Tools:

Diagonal flush cutters

Wire strippers

MicroUSB cable

99% isopropyl alcohol

Silicone conformal coating

Solder paste

Brushes

Hot air rework station

Soldering iron

Carrier Board PCB Design and Fabrication

Touch Screen Business Card Board Image.JPG
IMG_20191013_144634 - Edited.jpg
IMG_20191013_144644 - Edited.jpg

The carrier board was designed in AutoDesk EAGLE and manufactured by OSHPark. Unfortunately I failed to make a circuit schematic along with the PCB design, so I have attached the .brd file from EAGLE so the board can be easily imported into EAGLE and edited and/or manufactured.

Construction Order

Because certain components limit access to other areas of the card once installed, I followed a specific order of construction:

1. Solder surface mount resistors.

2. Solder Adafruit PCBs.

3. Solder power button.

4. Solder LCD screen header pins to carrier board (do not solder screen to header pins yet).

5. Soak PCB in 99% isopropyl alcohol and scrub off the flux. Allow the PCB to dry off completely before continuing.

6. Glue on and solder Li-Ion battery.

7. Paint silicone conformal coating over both sides of the PCB.

8. Solder LCD screen to the header pins. Remove flux on these newly soldered joints using a cotton swab soaked in 99% isopropyl alcohol.

9. Paint silicone conformal coating over the LCD screen's soldered joints and along the edges of the LCD screen's PCB.

10. Charge and program the card.

Soldering Surface Mount Resistors

IMG_20171001_134308.jpg
IMG_20171001_134321.jpg
IMG_20171001_134550.jpg
IMG_20171001_134708.jpg

The card uses 2X 1.2KOhm 0805 SMT resistors (RB1 and RB2) wired as a voltage divider so the Arduino can measure the battery's voltage and 1X 220 Ohm current-limiting resistor (RLED) for the blue LED in the power button. I soldered them using solder paste applied to the solder pads and a hot air solder rework station, but it's also possible to solder them using a soldering iron and standard solder.

Soldering Adafruit PCBs to Carrier Board

IMG_20171001_142210.jpg
IMG_20171001_142553.jpg
IMG_20171001_142609.jpg
IMG_20171001_142803.jpg
IMG_20171002_145258.jpg

I wanted the card to have as finished a look and feel as possible, so I tried to eliminate any sharp points or edges in the final design. To join the Adafruit PCBs to the carrier board I used a technique I call "solder riveting" rather than the usual header pins. To join the PCBs together, I put the side of the Adafruit PCB without components flush against the carrier board and held it aligned using header pins temporarily inserted through some of the through-hole vias. Some of the vias are left clear of header pins so that they can be soldered together. By heating the via on one of the PCBs with a soldering iron and applying solder until it flows through both PCBs, the boards are joined both physically and electrically, with no sharp pins protruding from either side.

Soldering Through-Hole Components

IMG_20171002_151641.jpg
IMG_20171002_151931.jpg
IMG_20171002_152106.jpg
IMG_20171002_152821.jpg
IMG_20171002_154303.jpg
IMG_20171002_154359.jpg
IMG_20171002_154516.jpg
IMG_20170911_120131.jpg

I used diagonal flush cutters to cut any through-hole component pins flush before soldering so the solder joint wound up being a smooth mound rather than the traditional spiky "volcano."

Removing Flux and Applying Silicone Conformal Coating

IMG_20171002_154912.jpg
IMG_20171002_155035.jpg
IMG_20171003_114219.jpg

To remove the flux, I soaked the board in 99% isopropyl alcohol after all the components other than the screen and the Li-Ion battery had been soldered, then used a brush to clean off any remaining flux. I then painted a silicone conformal coating on the board. This isn't strictly necessary, but I felt it gave the card an improved fit and finish and provided it with some protection from water and electrical shorting. The carrier board needs to be coated before the screen is soldered on because there is no way to access the board once the screen has been soldered.

Programming / UI Design

Screenshot 2019-12-24 at 5.54.32 PM.png
IMG_20191224_104922.jpg

The interface is about as simple of a touch screen interface as it is possible to make, but it demonstrates that I have at least a little bit of coding experience. The intro screen shows up when the system finishes loading, and leads to a screen with 5 selectable options. They lead to screens with various bits of relevant info about me, as well as a screen with system info that talks about where I got the various components, has a display showing how much power is remaining, and points out the charging port and the MicroSD card slot. Since I didn't need to use any of the LCD screen's functions that need a card installed in its MicroSD card slot, I put my resume and portfolio on a MicroSD card in the slot so my full info is available on the business card.