Displaying Bitmaps from the SD Card

So far, this tutorial has shown how to print text and draw shapes directly on the OLED display with a series of blocks.  You can also display bitmap images stored on  an SD card. This is easy if you are using the Propeller Activity Board WX, which has a microSD card slot built in.

Bitmap Pictures

First, you will need a tiny bitmap image! Such images could start as a photograph you take, or as digital artwork you create in other software.  The example below started out as a 3.5 x 5 foot (about 1 x 1.5 meter) acrylic painting that was photographed and then reduced. Here are some tips:

  • Make an image that is 96 x 64 pixels or smaller.
  • To reduce a very large image down that small, reduce it by 50% several times until it is about the right size, then make the final adjustments.
  • Save the image in the .BMP format.  Paint, Snagit, and Inkscape are examples of programs that can save images as .BMP files.
  • Or, just right-click and download/save sun.bmp shown below, which is used in these example projects.

Example - Display Bitmap

  • Give your BMP file a name with 8 characters or fewer. (If you don't have one, you can right-click and save the example, sun.bmp, above.)
  • Load the BMP file onto a FAT32-formatted microSD card, such as Parallax #32328.
  • Once the BMP file is loaded, insert the card into your Activity Board's micro SD card slot, and place the power switch to position 1.
  • Build the block program below. Use your .BMP file name in the place of "sun." Notice that the OLED draw BMP image block does not require the .bmp extension, only the name of the file.

  • Save and download the block program onto your board by clicking the Run once button.

Keep in mind that the OLED is slow to update and will take approximately 20 seconds to fully display an image.


Try This: Picture Position

  • Try changing the coordinate values (x) and (y) in the OLED draw BMP image block, and re-run the project.

What is the outcome on the screen?

  • From the dropdown menu on the OLED command block, change the pin orientation to left, right, or down, and re-run the project.

Now what is the outcome on the screen?

  • Try experimenting with changing the coordinates and pin orientation at the same time.

Displaying BMP Image and Playing a WAV file

If you want to enhance your OLED projects with audio, there are a few things to take into account.   The OLED draw image block and the WAV play block both access files stored on your Activity Board’s SD card. The OLED draw image block lets go of the SD card after fetching the .BMP file, but the WAV play block keeps ahold of the SD card for itself until your file is done playing or you release it with a WAV stop block.

You will need a .WAV file for this next example project. See our Sound Library to download a properly-formatted WAV file. Or, follow the directions there to create or reformat your own.   This example project uses bird.wav.

bird.wav

Example - Sound and Picture

  • Add a WAV file to your SD card, and put it back in the Activity Board's SD card slot. 
  • Plug in earbuds or this Hamburger Style speaker (#900-00018) to the Activity Board’s audio jack.
  • Update your project with the WAV blocks and pause block shown below:

  • Enter your file name into the OLED draw BMP image block, do the same for the WAV play block. Remember, no file extensions! (This example uses sun.bmp and bird.wav)
  • Adjust the pause block to match the length of time you expect your WAV file to play. (The bird.wav file lasts 10 seconds, 10000 ms.)
  • Adjust the WAV volume block to the desired volume from one to ten.
  • Save the project then click the Run once button to download it onto your board.

You should see the image fill the OLED display, then hear the WAV file playing.

Your Turn

  • Try moving just the WAV play block to the top of the project, then re-run it. Does the bitmap image ever display? Why or why not?
  • Try moving all of the OLED blocks below the WAV stop block, then re-run the project. Does the bitmap image ever display?
  • Now, try disabling the WAV stop block, and changing the pause to 5000 ms. Re-run the project. Does the bitmap image ever display?
  • Change the pause to 12000 ms. Does the bitmap image display now?