Today I'm going to show you how you can build your own business card/game console/whatever you can imagine that features a backlit I2C OLED display and an ATtiny85 Microprocessor. In this Instructable I'll tell you how a PCB that I designed actually functions, how you can build it, and what you can do with this functionality. If you already have an I2C screen hooked up to an ATtiny85, this Instructable can still be helpful if you're trying to get images to display or want to make menus, a game, and more.
You're probably wondering what this thing actually is. It's just a simple printed circuit board with an onboard battery, screen, buttons, on/off switch, and processing unit. Think of it as a tiny Gameboy, that you can easily program to do a variety of things. Onward!
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
- Soldering iron (with a fine tip)
- 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[at]coniferapps.com
Step 3: Time to Get Programming!
I got my ATtiny/screen combo working using the following Instructable: 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 Instructable 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 above 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 instructable, but it's long enough to warrant its own instructable. 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 :).
Thanks for listening to me ramble on, and if you have any questions don't hesitate to email me at info[at]coniferapps.com (replace [at] with @). Please vote for me in the Autodesk Circuits contest! Hopefully you'll soon have your own business card/game to show off!