Digital Photo Frame

Digital Photo Frames became increasingly popular in the last couple of years. This project covers all the parts required for building such a frame.

  • SD Card interface for storing the Photos
  • NokiaLC Display for showing pictures of different sizes
  • capacitive touch inputs to select the desired picture.

SD Card interface

The basis for interfacing the SD card are nicely described at the Cookbook page: SD Card File System. As with most other Photo Frames, the pictures have to be preloaded onto the micro SD card in one directory.

Capacitive touch input

The set up for the capacitive touch sensing is given at: Touch Sensor. For this Project the MPR121 Touch Sensor from freescale was used. The currently touched panels are read out by the I²C and triggered by a digital interrupt. The whole file structure of the SD card is being displayed while selecting a photo. The user can swipe along the touch pad to change the currently selected file. When selecting a picture the program checks whether the pressed button is the same as the released one. only in this case the corresponding option will be selected. This feature is implemented to avoid users to accidentally select an option.;
    switch (value) {
        case 0: //no button is pressed (good only to execute actions on release)
                switch (oldvalue) { //if not do action according to button released.
                    case (1<<4):  //back to menu has been selected
                        if (showingImage) {
                            showingImage = false;

                    case (1<<5): //show image has been selected
                        if (!showingImage) {
                            displayImage = true;
                            showingImage = true;
            //cases cover the change of position, they check the old and current value and change the position accordingly
            //powers of two correspond to one button pressed. other numbers are a mixture of two buttons pressed at the same time
            case 1:
            changepos(-1,3); //cannot have a lower value as 0 there is no button
        case 3:
        case 2:
        case (2+4):
        case 4:
        case (4+8):
        case 8:
            changepos(4+8,-1); // cannot have a higher boundary




In order to change the position of the cursor to select a Photo the function "changepos" is used.

void changepos(int val2,int val1){ 
//compares the current position with the old one and changes cursor accordingly.
//val1 is the lower value and val2 the higher possible value

if (!showingImage) {
                if (oldvalue==val1) { //lower button was selected lat time
                    if (selectpos != 1) //check if bottom of the screen
                    selectpos--; //if not go one up
                } else if(oldvalue==val2){ //
                    if (selectpos != files.size()) //check if top of the screen
                    selectpos++; //if not go one down

The current program version does not support multi-touch. Only one finger at a time can be used to select options.


For the basic implementation the following cookbook page was used: Nokia-LCD. For this project the two basic image formats bmp and jpeg can be displayed. For other formats the corresponding libraries have to be implemented. The decision whether the selected file is bmp or jpg is done by comparing the file extension.


For the BitMap display the EasyBMP library was modified for minimal memory usage (all features except BMP reading and decoding were removed). It can be found at SourceForge. The functions assocciated with them are stored in the "myBMP.cpp" file. As an example of use the ReadBMPFromFile function is shown below. It displays the currently selected file on the lcd provided.

                RGBApixel *Colors = new RGBApixel [2];
                file = "/sd/" + file;
                ReadBMPFromFile(file.c_str(), Colors, &lcd);
                showingImage = true;


Similarly to the bmp implementation an external library (picojepg) was used. It can be found at picojpeg. The jpg functions are stored in the "jpegutil.c" file.

 else if(!"jpeg") || !"jpg"))
                file = "/sd/" + file;
                ReadJPEGFromFile(file.c_str(), &lcd);
                showingImage = true;

Overall Design

The schematic when all parts are connected to one system is shown in the graphic below.

MicroSD Breakout    mbed
   CS  o-------------o 8    (DigitalOut cs)
   DI  o-------------o 5    (SPI mosi)
   VCC o-------------o VOUT
   SCK o-------------o 7    (SPI sclk)
   GND o-------------o GND  
   DO  o-------------o 6    (SPI miso)
   CD  o

Nokia LCD           mbed
   S1  o-------------o 
   S2  o-------------o 
   CS  o-------------o 14   (DigitalOut cs)
   SCK o-------------o 13   (SPI sclk)
   DIO o-------------o 11   (SPI miso)
   RST o-------------o 15   (reset)
   ST2 o
   ST1 o 
   ST0 o
   GND o-------------o GND
   3.3Vo-------------o VOUT
   p12 o-------------o VOUT

Touch Pad           mbed
   GND o-------------o GND 
   SDA o-------------o 9    (I²C Data)
   SCL o-------------o 11   (I²C clk)
   IRQ o-------------o 25   (IRQ port)
   VCC o-------------o VOUT  
NOTE: The I²C lines have to be pulled high by 2.2k resistors

It is not necessary to connect the system up as shown.The important connections are the I²C connection for the touch panel, a SPI connection for the Nokia LCD and the SPI connection for the SD Card breakout board. The digital connectors can be chosen as desired.

Video demonstration

Program Download

Import programLab3

Please log in to post comments.