OLED Display Module

This document is obsolete.

Last modified August 8, 2014

Warning

This Module has been discontinued. Please click on the "Catalog" tab to see alternatives.

OLED Display Module

Required

Tutorials:  First Gadgeteer Project

Introduction

This module is a 128x128 dot matrix multicolor OLED display, which communicates with the mainboard via a 4-wire SPI interface.

This display is unlike the traditional display with 3 sockets to send image data over. Since the OLED display is SPI based and only uses one socket, we cannot simply flush an image to the screen. In order to initialize and write anything to the OLED display, we must send it commands and buffers of data over the SPI bus. These commands can be anything from setting the contrast, resetting the display, or putting the display to sleep.

In order to write image data to the OLED display, we must do a few things. -Tell the display that we are about to write to its "internal screen buffer" -Convert our image to the proper format used by the display -Write the data to the "internal screen buffer" -Notify the display that we are done writing to the buffer

Since this display is SPI based and does not use the R,G,B sockets, you can connect it to any SPI socket marked with an S.

Example 1: Hello World

Thankfully, all of the work in the previous section is done for us in the Gadgeteer driver.

To write "Hello World" to the display, all we need to do is:

// Displays "Hello World!" to the OLED display
oledDisplay.SimpleGraphics.DisplayText("Hello World!",
 Resources.GetFont(Resources.FontResources.small), GT.Color.Red, 10, 10);

Note: Since this is a smaller screen, you may want to use the "small" font that is included in every project instead of "NinaB".

Example 2: Using the display in a low memory situation

Some boards, like the FEZ Cerberus family of boards, may be too small or have too little memory for full graphics support. In this case, use of a full sized display and the Simple Graphics interface is not possible. To work around this, there have been additions to the OLED driver to allow a user to only flush to part of the screen.

The first step is to allocate an array at the beginning of the program so that you are positive that you will have the memory throughout the life of the program.

For the duration of this example, we will be using a byte array that is half the size of the screen, or width * height * bytes per pixel (128 * 64 * 2).

Allocate this memory above ProgramStarted()

public static byte[] vram = new byte[128 * 64 * 2];

Now set the byte array to whatever data you would like to write to the screen.

Util.BitmapConvertBPP(Resources.GetBitmap(Resources.BitmapResources.Image).GetBitmap(),
 vram, Util.BPP_Type.BPP16_BGR_BE);

To write the data to the screen, you will use the OLED driver's FlushRawBitmap(...) function, passing in the parameters to flush the bitmap to the desired position.

// Generic call
oledDisplay.FlushRawBitmap(leftPos, topPos, rightPos, bottomPos, vram);
 
// Place the data in the top half of the screen
oledDisplay.FlushRawBitmap(0, 0, 128, 64, vram);
 
// Place the data in the bottom half of the screen
oledDisplay.FlushRawBitmap(0, 65, 128, 127, vram);

Example 3: Using the display in a low memory situation to display full images

With the above example you may have a desire to display the full screen of 128x128 pixels with a complete image. This can be accomplished by making a creative mosaic.

With the use of the program TileMage Image Splitter, you can take any image and split it into smaller, more memory manageable images that can be loaded into a single memory array, flushed to the screen and then add the next image to the array and repeat.

After finding the image that you want to display you will need to decide how many rows and columns you will need to split up the image into. This example split a 128x128 pixel image into 16 32x32 pixel bitmaps. You could probably make 4 64x64 pixel images but it is up to you to experiment. You will need to make the data array the same size as the images as we did in this example 32*32*2 so a 64x64 image array would need to be 64*64*2. Once you have the desired split images you will add them to the resource file to be accessed in the program.

This example also utilizes the native Bitmap converter so you will need to include GHI.OSHW.Hardware.dll to the project assemblies and add:

using GHI.OSHW.Hardware;

to the top of the list of usings.

Here is a sample of code that will display 16 smaller 32x32 pixel bitmaps to the screen; however, the sample shows only the first four image calls. The remaining twelve are the same with different image names.

public partial class Program
{
    byte[] datatoflush = new byte[32*32*2];
    // This method is run when the mainboard is powered up or reset.   
    void ProgramStarted()
    {
        /*******************************************************************************************
        Modules added in the Program.gadgeteer designer view are used by typing 
        their name followed by a period, e.g.  button.  or  camera.
 
        Many modules generate useful events. Type +=<tab><tab> to add a handler to an event, e.g.:
            button.ButtonPressed +=<tab><tab>
 
        If you want to do something periodically, use a GT.Timer and handle its Tick event, e.g.:
            GT.Timer timer = new GT.Timer(1000); // every second (1000ms)
            timer.Tick +=<tab><tab>
            timer.Start();
        *******************************************************************************************/
        Util.BitmapConvertBPP(Resources.GetBitmap(Resources.BitmapResources.Tile1_C1_R1).GetBitmap(), datatoflush, Util.BPP_Type.BPP16_BGR_BE);
        oledDisplay.FlushRawBitmap(0, 0, 32, 32, datatoflush);
 
        Util.BitmapConvertBPP(Resources.GetBitmap(Resources.BitmapResources.Tile2_C1_R2).GetBitmap(), datatoflush, Util.BPP_Type.BPP16_BGR_BE);
        oledDisplay.FlushRawBitmap(0, 32, 32, 32, datatoflush);
 
        Util.BitmapConvertBPP(Resources.GetBitmap(Resources.BitmapResources.Tile3_C1_R3).GetBitmap(), datatoflush, Util.BPP_Type.BPP16_BGR_BE);
        oledDisplay.FlushRawBitmap(0, 64, 32, 32, datatoflush);
 
        Util.BitmapConvertBPP(Resources.GetBitmap(Resources.BitmapResources.Tile4_C1_R4).GetBitmap(), datatoflush, Util.BPP_Type.BPP16_BGR_BE);
        oledDisplay.FlushRawBitmap(0, 96, 32, 32, datatoflush);
 
 
        // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
        Debug.Print("Program Started");
    }
Leave feedback about this document.
Let us know if the information presented here was accurate, helpful and if you have any suggestions.
Leave feedback about this document.
Let us know if the information presented here was accurate, helpful and if you have any suggestions.

* Indicates required fields.
This form is only for feedback not support.
Review our how to find information guide on locating helpful resources.