Business Card/Game Console: ATtiny85 and OLED Screen

by AlexFW

22K20314

Intro: Business Card/Game Console: ATtiny85 and OLED Screen

Hi everyone!

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:

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[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!

13 Comments

Chimera_Byte 6 years ago

Great tutorial! One quick question: can this code be ported to arduino (Atmega328p)? I ask this because I know that tinusaur library works only for ATtiny and seems that this library uses parts of this library.

Thanks for sharing!,

AlexFW 6 years ago

Hey - you can't really do a direct port, but this library is very similar: https://github.com/tibounise/SSD1306-AVR

All you would need to do is do a few code changes to make sure that the drawBitmap functions are functionally equivalent. There's even a simulator for this one!

Chimera_Byte 6 years ago

Alex, thanks a lot, I will check that library!!

JendrikB 7 years ago

Hey,

thanks for the extreme cool Instructable! Unfortunally cannot bring it to work.. Are you pretty sure the numbers on the back are correctly?
I was able to flash the Tiny on a separate programmer, but after soldering it does nothing. Also flashing is not possible.

"avrdude: Yikes! Invalid device signature. Double check connections and try again, or use -F to override this check."

I will try it with a new bord, hopefully it is because of my solfering-skills. First time for me that I´m soldering that small thingys...

AlexFW 7 years ago

Hi Jendrik - it might be that your board is fine. Some of the numbers are messed up on some versions of the board - so you can look on circuits.io and trace the route of the PCB trace just using your eye and see if it corresponds to the header you think it does. If you don't understand this or have any questions, let me know! Also make sure your programmer is set to whatever chip you're using. It's possible that you might have an ATtiny45 - they look identical but one last less memory.

zonkerharris 7 years ago

Thank you for posting both instructables. I'm impressed by how much you can do with a Tiny85. (Having lived in a VIC-20, with only 3.5k of user RAM, it was a fun puzzle to see how much I could do with that!) I was able to get Neopixels into a Tiny85, and the results were stellar. ;-)

https://www.instructables.com/id/IKEA-Star-With-ATtiny-and-NeoPixels/

josiah.cartier 7 years ago

Great project, I think you'll be well known for that one

AlexFW 7 years ago

I was actually planning on handing it to college admissions interviewers!