There are a ton of digital picture frame tutorials out there. Most are old laptops with crafty case reconfigurations that fit a photo frame profile.
We set out to build a 100% DIY, scratch-built digital picture frame. Our frame has a 12bit color LCD, gigabytes of storage on common, FAT-formatted microSD cards, and you can build it at home. We’ve got the details below.
Concept overview
The bitmap images are stored on common, PC-readable microSD cards. A PIC microcontroller reads the images over a three wire SPI bus. The PIC processes the image data and writes it to a color LCD over a unidirectional, 9bit SPI-like bus. A configuration file on the SD card defines the delay between images.
Hardware
Click for a full size schematic image (PNG). The circuit and PCB are designed using the freeware version of Cadsoft Eagle. All the files for this project are included in the project archive linked at the end of the article.
Microcontroller
We used a Microchip PIC24FJ64GA002 28pin SOIC microcontroller (IC1) in this project. We really like this chip because the peripheral pin select feature lets us put important features on the pins we want; this gives a smaller, simpler, more compact PCB. Each power pin has a 0.1uF bypass capacitor to ground (C1,2). The internal 2.5volt regulator requires a 10uF tantalum capacitor (C12). The chip is programmed through a five pin header, SV1. R1 is a pull-up resistor for the MCLR function on pin 1. Read more about this chip in our PIC24F introduction.
A 32.768kHz crystal (Q1) and two 27pF capacitors (C10,11) provide an oscillator for the real-time clock calendar (RTCC). These parts are optional, the initial firmware doesn’t use them. The RTCC could be used as part of a function that superimposes the current time on the screen. Buttons connected to the programming header could be used to set the time.
SD card
MicroSD cards are completely compatible with regular SD cards, microSD cards can be used in an SD card reader/writer with an adapter. We tested several microSD card holders, and settled on one from SparkFun Electronics. The microSD card requires a bypass capacitor between the power pin and ground (C3). An LED indicates microSD read activity, but its also useful for general debugging (LED1, R2).
Color LCD 128×128 Nokia knock-off
This project is designed around SparkFun’s $20 color LCD panel. The LCD logic runs at 3.3volts and requires a decoupling capacitor (C4). The LED backlight requires a separate 7volt supply, and appears to have an internal current limiter because example designs don’t use external resistors.
The LCD has a separate input for the 3.3volt display supply. Many report noise in the display if this voltage isn’t clean. We used a ferrite bead (L1) and 0.1uF capacitor (C5) to filter the supply, and haven’t experienced any problems. This even worked on a dirty home-etched prototype. The ferrite bead type isn’t important, we used one left over from our tiny web server project.
The small connector is easy to solder on a professional board with a solder mask, but buy several as insurance. SparkFun has a PCB footprint for this part in their Eagle parts library, but the spacing between the pads is smaller than Olimex or BatchPCB will manufacture. We fudged it by decreasing the pad size to get more space between. Don’t depend on the connector to hold the LCD in place, use tape to hold it down. We used sticky-tack to attach the LCD temporarily.
We prototyped an LCD carrier board prior to sending the final design for manufacture. We recommend against using a ground fill under the connector without a solder mask.
Power supply
A 3.3volt supply, provided by an LD1117S33 (IC2), powers the PIC, microSD card, LCD logic, and LCD display. IC2 requires a 0.1uF bypass capacitor (C6) on the supply side, and a 10uF capacitor (C13) on the output. We used the same tantalum capacitor that we used for the PIC internal regulator.
The LCD backlight is powered by an LM317 adjustable regulator (IC3) configured to 7volts with 240 (R5) and 1100 (R6) ohm resistors. C7 and C8 are 0.1uF bypass capacitors for the LM317.
J1 is a SMD power jack for a common 2.1mm DC barrel plug. C11 is a 10uF electrolytic capacitor that smooths any lag in the supply voltage. C11 has a maximum 16volt input rating, so the supply voltage is best kept under 12volts. 9-12 volts is probably the idea power supply range.
PCB
Click for a full size placement diagram (PNG). L1, C5, and the LCD are on the opposite side. We can’t prototype two-sided boards in mom’s basement, so we sent this design to BatchPCB. Next week we’ll show you how we did it.
Partslist
| Part | Description |
| IC1 | PIC 24FJ64GA002 (SOIC) |
| IC2 | LD1117S33 3.3volt regulator (SOT223) |
| IC3 | LM317 adjustable regulator (SOT223) |
| U$1 | Color LCD 128×128 Nokia knock-off |
| – | Nokia knock-off connector |
| C1-8 | 0.1uF capacitor (0805) |
| C10,11 | 27pF capacitor (0805) |
| C12,13 | 10uF tantalum capacitor (SMCA) |
| C14 | 10uF electrolytic capacitor (SMD) |
| L1 | ferrite bead (0805) |
| LED1 | LED (0805) |
| Q1 | 32.768kHz crystal |
| R1 | 2000 ohm resistor (0805) |
| R2 | 390 ohm resistor (0805) |
| R5 | 240 ohm resistor (0805) |
| R6 | 1100 ohm resistor (0805) |
| SD1 | microSD card holder |
| J1 | 2.1mm power jack (SMD) |
| SV1 | 0.1” male pin header, right angle |
Firmware
The firmware is written in C using the free demonstration version of the PIC C30 compiler. Learn all about working with this PIC in our introduction to the PIC 24F series. The firmware is included in the project archive at the end of the article.
FAT12/16/32 disk library
Microchip’s FAT 12/16/32 library gives us easy access to files stored on SD cards. We gave a detailed description of this library in our web server on a business card project. If you’re having trouble reading a card with the library, check that it was formatted in a digital camera or using Panasonic’s SD card formatter.
Nokia 6100 LCD driver
SparkFun has a basic 8bit color driver (ZIP) for the Nokia 6100. We ported it to the PIC, and updated it for the 2byte-per-pixel 12bit color mode. With a small amount of added complexity, the pixel write rate could easily be increased by using a different 12bit mode that delivers two pixels using 3 bytes.
The LCD uses a 9bit protocol, one bit more than most SPI hardware will handle. The first bit tells the LCD whether the next 8bits are data or a command. On the PIC 24F it’s impossible to manually bang in the first bit, and then use the SPI peripheral to send the remaining 8bits. We lose direct control of the pins when hardware SPI is enabled. The data entry has to be completely bit-banged, which dramatically reduces the screen refresh rate.
Reading Bitmaps
There are a ton of bitmap formats. Windows compatibility keeps everyone using the ancient Windows v3 format. We created two C structs to read the V3 bitmap data.
| Offset | Bytes | Bitmap file header |
| 0 | 2 | Always 0x42 0x4D (hex for BM) |
| 2 | 4 | File size (bytes) |
| 6 | 2 | Reserved, ignored |
| 8 | 2 | Reserved, ignored |
| 10 | 4 | Location in file of the first bitmap data |
Bitmap files start with a 14byte file header. The first two bytes are the letters ‘BM’, indicating a bitmap. If the first two bytes are correct, the firmware loads the information header. The last four bytes indicate the beginning of bitmap data, but the current firmware just assumes it will begin at the end of the headers.
| Offset | Bytes | Bitmap information header |
| 14 | 4 | Length of bitmap information header (40bytes for Windows V3 bitmaps) |
| 18 | 4 | Width (pixels) |
| 22 | 4 | Height (pixels) |
| 26 | 2 | Color planes, always 1 |
| 28 | 2 | Color bits per pixel (1, 4, 8, 16, 24 and 32) |
| 30 | 4 | Compression method, we only read uncompressed (type 0) |
| 34 | 4 | Image data length |
| 38 | 4 | Horizontal resolution (pixels per meter) |
| 42 | 4 | Vertical resolution (pixel per meter) |
| 46 | 4 | Number of colors, ignored. |
| 50 | 4 | Number of important colors, ignored. |
A Windows V3 bitmap information header is 40bytes long. The firmware verifies that the header length (offset 14) is 40, indicating a V3 bitmap. If the width (132), height (132), color depth (24), and compression (0) all check out, the image data is processed and output to the screen.
| Offset | Bytes | 24bit image bitmap data |
| 54+(3n) | 1 | pixel n red value |
| 54+(3n+1) | 1 | pixel n green value |
| 54+(3n+2) | 1 | pixel n blue value |
Bitmap images have uncompressed, 1:1 representations of pixel data stored in three byte sequences. The data starts at the lower right-hand corner of the image; first the red value, then green and blue. Wikipedia has a complete bitmap walk through.
If the color depth of a bitmap image (24bits) is greater than the LCD can display (12bits), we need to discard the least significant bits of color data. To convert from 24bit color to 12bit color, we just chuck half the color data; an 8bit value of 11110011 is pushed four bits to the right, giving 1111.
Firmware walk-through
- Init PIC, SD, LCD.
- Read config.ini, create if it does not exist.
- Use first character of config.ini to set between image delay.
- Look for images, open next image.
- Read and check bitmap file header for proper format.
- Read and check bitmap information header for version, size, color.
- Read and display each pixel value. Adjust bit depth as needed.
- Delay, then repeat from 4.
Preparing images
To keep this demo simple, the photo frame only displays the most common bitmap format. Images must be sized to 132x132pixels, with 24bit color.
- Open a picture with an image editing program.
- Draw a square selection box over the part of the image you want to use, usually using shift and drag.
- Crop the image.
- Size the image to 132x132pixels.
- Save the image as a windows bitmap, 24bits of color depth.
Other image sizes and formats could be supported with a firmware upgrade (PNG, JPG), especially with a pin-compatible microcontroller upgrade to a giant dsPIC 33F.
Using it
Put images in the root directory of a FAT formatted SD card. Depending on the last device to format the card, it might need to be formatted with a digital camera or the Panasonic SD formatter.
Optional: make a config.ini file with a text editor. Enter a single digit, from 0-9, to set the between picture delay. Save the file. If you don’t create your own config.ini file, one will be created for you with a 1 second delay.
Put the card in the socket, and plug in the digital picture frame. Images will cycle on the screen with the defined delay.
Taking it further
We see a lot of potential in this simple digital picture frame. Many features can be added with a firmware upgrade, some are the basis for future hardware.
- Display other image formats, scale images
- Random fades and wipes
- Display time and date over image, set with buttons connected to programming pins
- Extend the configuration options in config.ini to include longer delays, fade or wipe type
- Use a sub directory for images because there are some file limitations to the root directory of a FAT formatted SD card.
- Add an ethernet connection for networked display updates.
Download: dpf.v1.zip It has moved to here.
[youtube=http://www.youtube.com/watch?v=AKlQwLkeWdE]
[digg=http://digg.com/hardware/How_to_Digital_picture_frame_100_DIY]
Cool! however the costs of the parts are too high :(
Here in Argentina only the pic might cost about 30 dollars.
great project ian!
I REALLY like these articles.
I’m glad you toned-down the political commentary.
Good work!
Very nice.
have my babies, this is awesome
and also I didn’t realise you were pic guys :P
Awesome how-to. Thanks for going back to the good stuff!
Nice writeup. These diy posts remind me of the ones the turn up on spark fun from time to time.
amazing job once again ian. keep it up.
Wow, just wow! This project is freaking awesome!!!
very elegant solution guys!
I noticed you mentioned you weren’t etching double sided PCB’s in “mom’s basement”. Going from single side to double sided boards is pretty straight forward.
I’ve etched quite a few double sided boards with excellent results when using methods similar to what’s described in the link below. Simply print both sides (making sure to mirror the top layer), align the two layers in front of a bright light, tape them together, slip the board in, and go about toner transfer/etching in the normal fashion.
http://myweb.cableone.net/wheedal/pcb.htm
happy etching!
Oh man, you’re my heroes!!
Very nice.
Any chance this could be substituted for the 1.8″ screen?
Seems like a deal at only $5 more…
http://www.dealextreme.com/details.dx/sku.3217
Is it possible to use PSP2000 LCD to this project? How about add USB connector to make additional PC display, or receive streaming data for movie playback?
Please note, Im only asking for possibility if it is doable with such microcontroller and LCD.
i love this project, do you have a project page?
And when your card becomes corrupted you can recover it like I did:
http://variableghz.com/2009/01/pc-er-how-to-recover-photosvideosdata-from-a-damaged-sd-card/
@shay
You can see all our how-to projects in the how-to category.
This PIC24 is incredible!!!
very, very cool how-to. extremely detailed, fully referenced. thanks ian, for keeping hackaday up to par in it’s intended content — the new writers have been way too political and dense in their material, so it’s awesome to see real-deal-hands-on-know-how coming from the site.
Very cool but you forgot the frame!
Here we go! Classic Hack A Day, showing you how to DIY everything. I remember the “car PC” post, took me a couple days but I had a computer in my car thanks to you guys!
sweet logo we must be cousins http://www.thenoz.wordpress.com
I think it’s funny how programmers get all excited by a little hardware being put together. Basically you took a pre-made LCD, a pre-made IC and did some programming. I am constantly amazed at how the average programmer thinks he’s a badass if he can put some chips together. I’ve talked to my fellow electrical and computer engineers and we all think it’s funny. Ooh, you wrote some C code! Wow you can solder. That is not 100% diy. That’s like using a BASIC stamp or a Mindstorm and saying it’s 100% diy just because you could get a light to blink or a robot to follow a line.
Hey Richard- or Dick-
If your so great where is the guides you have written for us? Maybe we’re excited that this is something the average reader could put together (and find a use for!)
^^^Douche Bag^^^
I’m a Computer Engineer, and this thing is cool.
I just graduated out of computer engineering and I think this is totally cool! The average ECE can barely do this in an embedded system’s course, much less on their own time.
On a separate note, I just bought a seeduino (as recommended by a previous post) and this exact Nokia knockoff! I was going to do exactly this but it looks like I have a very complete guide already. Good job guys! I hope I can do my next project (this thing but with a much bigger screen) before you guys!
What a Nice project. But it look like need high cost to build it. ;)
Hey guys… really really love this. I’ll be putting one together very soon, and then I’ll be trying to put it into a hat, or a belt buckle. I keep you informed of my progress.
I like these how to posts. Hack-A-Day is one of the few sites I see that has new PIC based projects. A future how to could be building a PIC programmer.
Wow, I’ve been wanting to do more work with lcd’s but haven’t really felt like having to figure out the parts I’d need. This’ll really help get the ball rolling. Great article, keep ’em comin!
Here are the gerbers for the circuit board. This PCB cost $7.50 at BatchPCB.
Read more in our gerber PCB tutorial.
Nice DIY but i need some help on the coding bit. Is it possible for someone to link on in firmware coding? Im doing this for my electronics major but i never coded a firmware and it seems daunting. The web server on a business card did help a bit but all it really did was instruct you get the compiler and went on about specs…. Any help will be greatly appreciated. Im adding this to a radio controlled car to turn it into a moving billboard if you wanted to know
Hey i live in germany do i have to buy the Color LCD 128×128 Nokia knock-off ?? or do other screens work too? becouse i cant find any here thx…please write back
@muffinmen – Another screen will work if you change the the code to support it.
You can get the Nokia knock off from a web shop in Sweden, google it. SparkFun has cheap worldwide shipping so they’re probably the best source.
Very interesting read
Hi there !
First : Thanks for this nice How-to !
I was interrested in building one of these Digital picture frame for another project but the problemS are :
– I’m a complete beginner
– Shipping costs are huge at mouser.com and I can’t find another good electronic selle (I’m french)
– I don’t have any kind of programmer and I can’t afford one. I can program a 16F64 PIC with my high-school hardware so is that possible with this type of Pic (5+7 I/O).
– I can’t solder SMC.
Sooo… I’d like to know if I could buy one of these for a correct price.
Thanks.
Montspy.
This is all over my head, and I envy those of you that can do this type of thing. I should have studied computer engineering or electrical engineering in school. Then I could have built fun stuff like this and show them off to friend. haha
I was searching through Google doing research for a blog article, when I found this blog, and while not what I was exactly looking for I found it very informative and interesting and it is certainly a project I will try myself. Thanks Sophie xx
take the backing off the lcd and shine a led threw and and walla you have a mini projector
i have made one attemp at this with a cell phone lcd is to small for me and i dont have the recources to get it done
but i am planning on finding my old lcd dvd player and hacking it into a projector
Hmm..cool, but I just purchased one from walmart for $8
Will this work with a MMC card without any modifications
i want to use some larger display 5 to 7 inches..
will u suggest me a dispay & how to interface…
how to make it work..???
please explain..
Would it be possible to set the refresh so high that you could trick it into being a video player?
If you need a light OS for your digital picture frame you can use this one based on openSUSE11.3: http://susegallery.com/a/OFJVZe/photoframe
Files for this project can be found here: http://www.whereisian.com/files/dpf.v1.zip
Just a thoughtlet… instead of bit banging everything, I wonder whether an extra pin could be used to steer an open collector transistor to influece the SPI output before letting the hardware SPI take over.
Sigh. I guess I’ll have to start poring over the data sheets…
Dear Sir,
I want to know whether both EPSON and PHILIPS lcd can be used without changing the coding.
Please reply me as soon as possible
No.
Very cool project Ian, thanks fr sharing. but will this be possible with an even larger lcd screen, say 13″-15″. If you or anybody has any suggestions, please do post a reply as soon as possible. Thanks.
PS reply is needed very urgently.
what a great project,i want to add a Bluetooth module to the project so please i want u guys to send me the codes for it and any other information you have got about it i will be very grateful if u do.thanks very much
Where exactly can you buy the board for this? I went to Batch PCB but could not find the one that Hack A Day submitted. Can anyone link please?