Feedback!

SD Navigator

Views:6171Difficulty: 4 Status: Development

Display bitmap images and text files and folders with this TFT LCD screen and SD Card navigator.

SD cards can hold tons of ones and zeros. This tutorial shows how to make the Joy Gamer navigate an SD card and display plain text files and bitmap images. We build upon the standard SD card library . The code shown here forms the basis for a number of our other tutorials, including the face morpher , the thermal printer , and the time lapse camera , which all use SD cards for external memory.

Images

Root Directory

Root Directory

The file the joystick cursor is hovering over is highlighted in yellow.
Directory Listing

The SD NAvigator shows the files in the root directory of SD Card. Each file is on its own line. For some reason it keeps dropping the last character of every filename. Any ideas? Let us know in the comments section!
45 Degree Face

The SD navigator displays bitmaps when you click the joystick button while hovering over a .bmp file.
Plain Text File

The SD navigator can display plain text files. Choose files by moving the little red curcors circle over the file list at top. The files selected is highlighted in yellow.
Display Bitmaps

Display bitmap images using the SD navigator.
PCB Backside

The back of the populated PCB.
PCB Backside

The back of the PCB. You can see the MicroSD card holder loaded with a little 4GB SD Card. Astute observers will recognize this PCB from our HSB RGB Joy Drawing tutorial . Yep, same hardware different software. Versatile PCBs!
SD Baby

Little baby bitmap stored on an SD card!
Prototype Plexiglass Enclosure

This is a laser-cut plexi-glass enclosure for the SD Navigator. Still very much a prototype.

The file the joystick cursor is hovering over is highlighted in yellow.

Video

SD Navigator Video

See the SD Navigator in action! It can display the files in a directory, open bitmaps and plain text files. The cursor is the little red circle and it is controlled by the joystick.

Code

SD Navigator Arduino Code

Here is the Arduino code behind the SD card navigator on the Joy Gamer. We are pushing right up against the edge of what the little Atmega32u4 chip can handle so we had to hack a bit to make this work. First in the JoyGamer.h file you have to comment out the defines like this:

//#define USE_ACCELEROMETER//#define USE_COLOR

This way we don't load libraries we won't use and we can fit all the SD navigator code on the device. Otherwise you will get the nasty sketch too big error.
Okay now that the code compiles let's have a bit of explanation. This code has 3 modes: display a directory, display a bitmap or display a text file. There is a global variable cur_file which is either the directory, bitmap or text file we are currently viewing. We keep track of the modes using an enum defined at the top of the file. This is a little cleaner and easier to read than just using an int for the mode:

enum modes_t{  DISPLAY_DIRECTORY,  DISPLAY_BITMAP,  DISPLAY_TEXT};modes_t mode = DISPLAY_DIRECTORY;

Then in the main loop we have switch statement on the current mode. In the setup function we open the root directory and set it as the cur_file in the function open_file(). This function sets the mode appropriately given the type of file fed in as an argument.
Throughout the code we check if jg.btn_pin is pressed and if so we jump back to displaying the root directory. Links to all the necessry libraries can be found at the Joy Gamer Tutorial. See the whole file below:

Download File

/* LucidTronix Joy Gamer SD Navigator * If the compiler gives you an error about sketch being too big make sure to * COMMENT OUT both the USE_ACCELEROMETER and the USE COLOR defines in the JoyGamer.h file.   * They should look like this: //#define USE_ACCELEROMETER //#define USE_COLOR * For more instructions, details and schematic, See: * http://www.lucidtronix.com/tutorials/21 */#include #include     // Core graphics library#include  // Hardware-specific library#include #include Adafruit_ST7735  tft = Adafruit_ST7735(SS, 9, 8);JoyGamer jg = JoyGamer(&tft);enum modes_t{  DISPLAY_DIRECTORY,  DISPLAY_BITMAP,  DISPLAY_TEXT};modes_t mode = DISPLAY_DIRECTORY;int cursor_x = 64;int cursor_y = 64;File cur_file;File selected_file;int cur_dir_files;const int max_files = 12;String files[max_files];int line_height = 12;int char_width = 6;unsigned long last_switch = 0;void setup(){  jg.initialize();  jg.start_sd_card();  open_file("/");}void loop(){  switch(mode){    case DISPLAY_DIRECTORY:      handle_cursor();      for(int i = 0; i < cur_dir_files; i++){        if(cursor_y > i*10+ 10 && cursor_y < i*10 + 20){          jg.draw_string(10, i*10 + 10, files[i], ST7735_MAGENTA);          if(digitalRead(jg.joystick_btn_pin) == HIGH) {            open_file(files[i]);            break;          }        }         else {          jg.draw_string(10, i*10 + 10, files[i], ST7735_BLACK);        }        if(digitalRead(jg.btn_pin) == LOW && millis() - last_switch > 500) {          open_file("/");          break;        }      }      break;    case DISPLAY_TEXT:      jg.clear_screen(ST7735_WHITE);      jg.clear_screen();      display_text_file();      break;    case DISPLAY_BITMAP:      jg.bmpdraw(cur_file);      delay(2000);      open_file("/");      break;  }}void handle_cursor(){  tft.fillCircle(cursor_x, cursor_y, 5, ST7735_WHITE);  int delta_x = map(analogRead(0), 0, 1024, -6, 6);   int delta_y = map(analogRead(1), 0, 1024, -8, 8);  cursor_x = constrain(cursor_x + delta_x, 5, 123);  cursor_y = constrain(cursor_y + delta_y, 5, 155);   tft.fillCircle(cursor_x, cursor_y, 5, ST7735_GREEN);}void open_file(String filename){  jg.clear_screen(ST7735_WHITE);  cur_file.seek(0);  cur_file.close();  delay(100);  char buffer[13];  filename.toCharArray(buffer, 13);  cur_file = SD.open(buffer);  filename.toLowerCase();  if(cur_file.isDirectory()){    mode = DISPLAY_DIRECTORY;    load_dir(cur_file);  }  else if(filename.lastIndexOf(".bmp") != -1){    mode = DISPLAY_BITMAP;  }  else {    mode = DISPLAY_TEXT;  }  last_switch = millis();}void load_dir(File dir){  for(int i = 0; i < max_files; i++) files[i] = "";  jg.clear_screen(ST7735_WHITE);  dir.rewindDirectory();  File entry =  dir.openNextFile();  cur_dir_files = 0;  while(entry && SD.exists(entry.name()) && max_files > cur_dir_files){    String filename = entry.name();    if(filename[0] != '.' && filename[0] != '_' && filename.lastIndexOf('~') == -1){ // don't show hidden files      files[cur_dir_files] = filename;      cur_dir_files++;    }    entry.close();    entry = dir.openNextFile();  }  dir.rewindDirectory();}void display_text_file(){  int aax = 2;  int aay = 3;  tft.setTextColor(ST7735_BLACK);  while(cur_file && cur_file.available() && aay < 150){    char cur_c = cur_file.read();    if(cur_c == 10 || cur_c == 13 || (cur_c == ' ' && aax > 85)){      aay += line_height;      aax = 2;    }    else {         tft.setCursor(aax, aay);      tft.print(cur_c);      aax += char_width;      if (aax >= 118) {        aax = 2;        aay += line_height;      }    }    delay(10);    if(digitalRead(jg.btn_pin) == LOW && millis() - last_switch > 500) {      open_file("/");      break;    }  }  delay(1500);}

Parts

parts

Parts

Title	Description	#	Cost	Link	Picture
Joy Gamer	Joyous Arduino-Based Gaming machine! Full color LCD screen, Joystick with 3D printed knob and enclosure.	1	$79.95	Link

Comments:

Permalink: http://lucidtronix.com/tutorials/21

Tutorials

Order By:Similar to the SD Navigator
- Title
- Most Popular
- Cheapest
- Most Expensive
- Easiest
- Hardest
- Last Viewed
- Most Recent
- Oldest
- Surprise Me
- Status
Limit:8
- 4
- 8
- 16
- Show All