**** Product version of this project at http://ledpixelart.com ****
PIXEL LED Board
RGB Shield for IOIOMint Board - coming shortly from Seeedstudio
IR Proximity Sensor
32x32 RGB LED Matrix - coming shortly from Seeedstudio or 16x32 RGB LED Matrix from Adafruit
Android Apps Written for this Project (Free)
5VDC (4A) Power Supply
The Android device is talking to the IOIO board over Bluetooth. The IOIO board is then controlling the LED matrix (over 1,000 RGB LEDs).
Using the Android apps written for this project, it's very easy to customize with your own images and animations by simply copying your files to the SD card/internal storage of your Android device, no coding is required.
Special thanks to Ytai Ben-Tsvi , creator of the IOIO board, for all of his help on the project. Ytai wrote the custom firmware & corresponding Android API that allows the IOIO board to control the RGB LED Matrix.
Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.
Step 1: Wiring and RGB LED Matrix Shield
To make the wiring super easy, an RGB LED matrix shield was designed for this project which plugs into the IOIOMint or Droidalyzer IOIO board.
1. Plug the RGB LED Matrix shield into the IOIOMint or Droidalyzer IOIO board
2. Plug the IDC cable from the matrix into the shield
3. Plug the power cables from the LED matrix shield into the power terminal blocks on the RGB LED Matrix shield
4. Plug the Grove proximity sensor into the first Grove module on the RGB LED Matrix shield
Update: There is now a kit version available for this project saving much time on the wiring
If you don't have the IOIO RGB Matrix shield, you can still do the project, it will just take a little longer to wire up the RGB LED matrix to the IOIO board. Here's the pinouts for wiring up the LED matrix to the IOIO board.
Step 2: Scratching the Back of the Mirror
The idea is to scratch the mirror enough such that the LED matrix which will be mounted on the back of the mirror will shine through. Just take your exacto knife and make the vertical scratches. It's a fine line between too many scratches and not enough so test it along with the way and see how much of the LED matrix is shining through.
Step 3: Android Apps for the LED Frame
Android App Name
|Pixel Animate||Displays animated gifs to the LED Frame|
|Pixel Slideshow||Slideshow app, displays static images to the LED Frame|
|Pixel Halloween||Same as slideshow app but with Halloween images|
|Pixel 8Ball||Magic 8Ball fortune telling app|
|Pixel Proximity||Displays images when the proximity sensor is triggered|
|Pixel Compliments||Displays a compliment message when proximity sensor triggered|
|Pixel Touch||Displays what you draw on the Android touch screen to the LED Frame|
Source code for the apps here on Github
Step 4: Adding Your Own Animations and Pictures
For static images, use the Pixel Slideshow app and copy your image to the pixel\pixelslideshow directory of your Android's external SD card or internal memory. Images with black backgrounds or PNGs with a transparent background will give the best results. Just keep in mind the LED matrix is a low resoluiton of 32x32 meaning large, high-res images will not look good. If your image is not 32x32, not to worry, the app will automatically scale it to 32x32 before sending it to the LED Matrix.
Note also the last image displayed on the LED Frame will remain even after the Android device is off. This means you can simply use your Android phone to set the image and then it will remain for as long as the LED Matrix has power.
To use your own animations, use the Pixel Animate app and copy your animations to the pixel\pixelanimate directory of your Android's external SD card or internal memory. The animations must be in animated .GIF format. Yes that's right, those really annoying animated GIFs we used to see plastered on pages in the early days of the Web. Well as it turns out, many of those animated GIFs are also annoying on the LED Matrix. So you probably want to author your own using your favorite video editor and then just export to the animated .GIF file format. I used Adobe Flash Pro for the aquarium and 80s arcade animations you see in the project video but many other tools like Adobe Photoshop, Adobe Premiere, etc also support the animated .GIF format. I recommended a frame rate of around 10 frames per second (FPS). I tried some at 24 FPS which worked but the video was a little choppy at times. Keep in mind it's low res 32x32, so 10 FPS is more than enough. If you're just downloading an existing animated .GIF off the Internet or your animations are not in 32x32 resolution, the app will detect this and automatically re-size to 32x32 for you before sending to the LED Matrix.
Here's the full version of two custom animations I did for this project using Adobe Flash Professional.
Step 5: Without the Power Cord
Here's the project without the power cord. The power cord kind of ruins the illusion a bit as people know something's up when they see the cord.
It's running off a 2 cell 4000 mAH LIPO battery along with a LIPO UBEC to convert the 7.6V out to the 5V the project needs.
Step 6: Product Version - Pixel
Note also that Pixel will be expandable meaning other sensors can be added in a plug and play fashion. The haunted mirror project in this Instructable utilized the Grove proximity sensor. Pixel will include the Grove proximity sensor with the capability to plug in other Grove sensors from Seeedstudio with no soldering. Then it's just a matter of developing an app to take advantage of the new sensor.
Step 7: Coding Your Own Android App for the LED Frame
1. First install the Eclipse development environment on your PC, Mac, or Linux along with the Android SDK. There are plenty of tutorials out there on the Web to get Eclipse and the Android SDK up and running.
2. Download the rgb-led branch of the IOIO java library and then refer to this video tutorial for a general IOIO Hello World code example. IMPORTANT: you must use the rgb-led branch IOIO libraries, don't use the main branch otherwise the code will not compile.
3. Using the IOIO Manager app installed on your Android phone, upload the RGB LED Matrix firmware (scroll to the bottom of the page) on your IOIO board. Note: you must use this modified firmware, the normal IOIO firmware does not support the LED matrix.
4. Here's a simple hello word example for the RGB frame which simply takes a PNG image of an apple and displays it on the LED Frame. From this code, you can then modify to do whatever you want or have a look at the source code for the existing apps.
Now it's whatever you can think of. Also keep in mind the RGB LED matrix shield includes Seeed Grove ports meaning you can very easily plug in a Seeedstudio Grove sensor. Of course you can use others sensors too, the Grove ports just makes it easier.
Keep in mind the resolution of the LED frame is 32x32. If your source image(s) is a higher resolution than 32x32, you can see in the example code how to dynamically scale the image before sending it to the LED frame. Just be mindful that high resolution images scaled to 32x32 will not look very good.
Third Prize in the
Halloween Decorations Contest
Participated in the
Hack It! Contest
Participated in the
Make It Glow