Project build Index:
Arduino Project : Three-Finger Ring - Part 1 Getting started and 3D Printing
Arduino Project : Three-Finger Ring - Part 2 Code & the Circuit
Arduino Project : Three-Finger Ring - Part 3 Assemble the Ring!
----------------------------------------------------------------------------------
You have everything ready from Part 1 right? Good. Now it's time to program and get images on that screen.
Step 4: Breadboard the circuit.
Before installing anything, test it on a breadboard. That way, it will be so much easier to troubleshoot. See the electrical schematic in Figure 4.
Figure 3: Breadboard the circuit before installing it.
Figure 4: The electrical schematic for the Screen Ring.
Step 5: Upload the code to the Trinket.
There are a few special considerations for using the Adafruit Trinket. The IDE available from the Arduino site does not natively support it. You will need to either download a special version of the IDE from Adafruit with the board data pre-loaded, or you will have to follow the instructions on the Adafruit website detailing how to load the board data into the IDE. Either way, you will need to start HERE at the Adafruit introduction to the Trinket.
The cornerstone of the Screen Ring code is the U8glib library. It takes care of all the heavy lifting regarding control of the screen. The specifics of this library are well beyond the scope of this article but, if you want to learn more about it, start HERE.
Step 5-2: Create some sweet bitmaps for the ring.
The Arduino code cannot read PNGs or JPGs and the like. It requires BMP images to be converted into data arrays which are then pasted into the code. One of the easiest ways to accomplish this is to use the online image2cpp converter. Just upload a BMP, convert it and then copy the generated code into the Arduino sketch (Figure 5).
There are some rules for getting the converted images to display properly. This can all be done in Windows Paint.
- Images must be in black and white.
- Images must be created with a size of 128x64 pixels.
Figure 5: The beginning of an array pasted into the sketch.
Resources: The CODE.
Attached to this post is code used in the Three Finger Ring.
In it, you can change the code to for any images you convert.