Want to really make an impact next time you hand out a business card? Try handing out one of these babies!
I actually came up with the idea for this whole project when I came across the OLED screen you see in the image above. I was amazed at how cheap it was and the fact that it is driven through I2C (meaning the display is compatible with my favorite microcontroller, the ATtiny85). One of the constraints that I kept in mind when designing my business card with a screen was cost. I wanted to be able to produce a reasonable number of these at a reasonable cost per unit. A business csrd isn't of much use if you don't want to hand it out due to cost! A second constraint was size. I tried to maintain the slimmest profile possible for the entire package - a large factor in keeping the card so slim was being able to eliminate voltage regulators and large batteries. All these components sip power and are happy to run on a 3V coin cell.
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! I didn't link the following components in the materials section as they're not technically part of the business card with a screen, but they're still necessary:
For programming the ATtiny85:
- 6 Male to male jumper wires
- One 10 micro-farad capacitor
- Arduino Uno or some other ATmega-based microcontroller
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.
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 message me.Step 3: Time to Get Programming!
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 TinyCard sketch in the GitHub repo I created for this project. 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. 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 :). In the GitHub repository there is also a FlappyBird demo - check that out too!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. 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. A more memory-efficient way to implement my menu system would be to have each menu option as its own sprite and have two images: one for if it's selected and one for if it's not selected. If you need more space I reccomend doing this. Any game you make will have to fit inside this relatively small margin, so it'll be a fun challenge :).