Business Card/Game Console: ATtiny85 and OLED Screen

The whole idea for this project came from that display you see in the photo above. I found it on Amazon while I was looking for food for my hedgehog. It amazed me how cheap it was (only $9??!!) and it was compatible with my favorite microcontroller, the ATtiny85. I glanced over at my paper business cards strewn over the surface of my desk, looked back at the Amazon page, glanced back at the cards, and proceeded to unceremoniously throw them out. Time to get cracking.

Step 1: The Guts

If you haven't already, I highly recommend that you make an account on circuits.io. This will allow you to customize my design to suit your needs.

In this step I'll be explaining how you can actually get your hands on one of these printed circuit boards (PCBs). I've made my PCB in circuits.io, a great online tool that you can use to create circuit schematics and PCBs. You can view the design here: https://circuits.io/circuits/2618344-business-card-game-console-attiny85-and-oled-screen.

If you're interested in getting the PCB, you can order as many as you want from OSH Park using this link: https://oshpark.com/shared_projects/BURuRwfX

It takes a while to get the boards (1-3 weeks), but trust me. It's worth it! You'll need the following parts to build your own multi-functional card:

• ATtiny85 in SOIC-8 package. This is the brains of our project that controls EVERYTHING. https://amzn.com/B00MMYJ2QA

• I2C 128x64 pixel OLED Screen: https://amzn.com/B01G6RE2DQ

• 2 22k ohm resistors. These are pullup resistors for the buttons. https://amzn.com/B00976LGHY

• Surface-Mount CR2032 Holder: https://amzn.com/B00O9W8IN6

• CR2032 Coin Cell Battery. This little battery can power the circuit for quite some time. https://amzn.com/B008XBK7PG

• 3-pin slide switch. This is the power switch! https://amzn.com/B007QAJUUS

• Female Headers. You can use these to program the ATtiny85 while it's in the circuit! https://amzn.com/B00899WQ6U

• 6mm buttons: http://a.co/2uB9TaW

• A printed circuit board (you can order it using the link above

Tools:

• Soldering iron (with a fine tip)

• Solder

• Lead clippers

For programming the ATtiny85:

• 6 Male to male jumper wires

• One 10 micro-farad capacitor

• Arduino Uno or some other ATmega-based microcontroller

Step 2: Assembling the PCB

This is really pretty easy. All you need to do is solder all the components to their respective places, as indicated on the board. Some of these OLED screens come in different sizes, so if yours is too big for the board, you can have it hang over the top like in the image above, and bend over the headers on the other side and solder them to the holes where they were supposed to go. See the second image if you're confused.

A few helpful tips:

• The tiny dot on the ATtiny needs to be oriented so that it's close to the slide switch, otherwise you'll have the pins in the wrong order.

• The orientation of the battery holder matters. The end of the holder with the etched-in plus needs to be on the bottom pad (pointed towards a resistor).

• Orientation of switches, buttons, headers, and resistors doesn't matter

If you have any questions, please email me at info@coniferapps.com

Step 3: Time to Get Programming!

I got my ATtiny/screen combo working using the following tutorial: https://www.instructables.com/id/ATTiny85-connects-to-I2C-OLED-display-Great-Things/. In fact, I even use the library that AndyB2 modified in my own sketches.

The way we're going to be programming the ATtiny is through an Arduino Uno. The following tutorial shows you how to do this: https://www.instructables.com/id/Program-an-ATtiny-with-Arduino/. If you haven't already noticed, all the required pins are helpfully broken-out on the PCB with the pin numbers labeled on the back.

If you want to start out with a basic example, upload the sketch linked below to your card. Make sure that the power switch is moved to the right before you do this. You don't want to have the battery and the Uno both supplying voltage at the same time! In that folder is a bunch of files. I'll be talking about this more in the next step, but most of the header files in there are hexadecimal representations of monochromatic bitmap images. The .bmp files are these images that I just mentioned - as you can see, they're black and white and exactly 128x64 pixels. These are not uploaded to the microcontroller, but I thought I'd include them for reference.

Step 4: About the Program Itself

The sketch I had you upload in the previous step is a very basic example of how you could implement a menu. As you click each of the left and right buttons, it toggles a counter in the program. A function is then called that has the ATtiny check the state of this counter, and based on the counter's number the ATtiny draws an image of the currently-selected menu option on the screen. Each of the different selected menu-cells is its own image. If the top button is pressed, the ATtiny again checks the state of the counter to determine what detail screen to display. While these detail screens are being displayed the ATtiny is constantly checking to see if any button is pressed. Once it detects a button press, the function that draws the menus is called again and the current state of the menu is drawn on the screen, taking us back into the menu. It sounds somewhat daunting if you're new to programming, but I promise you once you look at the code it'll make more sense.

Each of the detail screens is also its own image.

If you haven't noticed, the surprise option doesn't do anything. We'll get to this in the next step :).

Step 5: Customizing Your Creation

Now that you've seen what I've done, it's time for you to customize the card with your own information. That library I included does have a function to draw text on the screen, but I highly recommend you go with a strictly image-based solution, as it tends to look MUCH better. I was originally going to make adding photos to the program part of this Hackster project, but it's long enough to warrant its own tutorial. You can view it here: https://www.instructables.com/id/Display-Images-on-OLED-Screen-With-Arduino-ATtiny8/.

Now that you know how to add photos, there are a bunch of things you can make the card do. You can use my menus and help screen, and just add in your own contact information. You could even make a small game for the "surprise" option. It would be fairly simple to move a very tiny 10x10 sprite around the screen using the buttons and check if it collides with another sprite. You could make a flappy bird clone using this same concept! If you do make something, please post a photo/video/file of it in the comments!

Just one more small point I forgot to mention. As far as storage goes, the ATtiny85 doesn't have much of it. For programs, it's about 8kb. My current sketch with 5 pictures and OLED display library occupies about 7 of those 8kb. Any game you make will have to fit inside this relatively small margin, so it'll be a fun challenge :).