Interfacing SSD1306 0.96” OLED Display with TM4C123G Tiva C

Interfacing the SSD1306 0.96” OLED display with the TM4C123G Tiva C is surprisingly easy. This small OLED module uses the I2C bus, works at 128×64 resolution, and offers crisp graphics with very low power use. It is perfect for small dashboards, menus, sensor readings, or animated icons.

In this tutorial, you will learn how to connect the SSD1306 display to your TM4C123G board, copy the library files, and start printing text, numbers, and floating values. You will also draw shapes like lines, rectangles, and circles. Finally, you will display custom bitmaps and create smooth animations such as a battery indicator and progress bar.

Recommended Resources:

I have already covered how to use I2C in TM4C123G. This tutorial is going to be a continuation in this series, so you must read the following tutorial first:

• TM4C123G I2C Tutorial

What You Will Learn in This SSD1306 + TM4C123G Tutorial

In this guide, you will learn how to connect, configure, and use the SSD1306 128×64 I2C OLED with the TM4C123G microcontroller. We will start from copying the library files and go all the way to printing text, numbers, shapes, bitmaps, and even simple animations. The goal is to help you understand every feature step-by-step, using clear examples and easy-to-read instructions.

Hardware Used in This Project

To follow this tutorial, you need only a few components. You will use the TM4C123G Tiva C LaunchPad, which comes with built-in I2C hardware support and stable clock options. The other main component is the SSD1306 0.96” OLED display, a bright 128×64 pixel module that works over I2C.

Here is the full list:

• TM4C123G LaunchPad
• SSD1306 0.96” OLED (128×64, I2C version)
• Connecting wires (male–female or jumper wires)
• USB cable for programming the LaunchPad

This simple setup is enough to build a clean, readable display for menus, sensor values, clocks, and UI graphics.

Why SSD1306 OLED Works Great with TM4C123G

The SSD1306 OLED is a perfect match for the TM4C123G because both work efficiently with I2C. The OLED uses only two pins (SCL and SDA), so you save valuable GPIOs for other sensors. The display also supports fast updates, making it ideal for animations and UI elements.

The TM4C123G, on the other hand, has a powerful hardware I2C module. It can handle frequent updates without slowing down your main application. The display driver you are using already includes all the low-level I2C routines, so you only call simple functions like:

• SSD1306_Init()
• SSD1306_WriteString()
• SSD1306_DrawPixel()
• SSD1306_DrawBitmap()

This makes coding much easier and keeps the project clean.

Understanding Display Resolution and I2C Address

The OLED module used here has a resolution of 128×64 pixels. This means the screen is 128 pixels wide and 64 pixels tall. The display is divided into pages, where each page holds 8 pixels vertically. The driver automatically handles this structure.

Your library already declares the correct size in ssd1306.h:

#define SSD1306_WIDTH 128
#define SSD1306_HEIGHT 64

#define SSD1306_WIDTH 128
#define SSD1306_HEIGHT 64

This ensures all drawing functions like text, shapes, and bitmaps behave correctly.

Most SSD1306 I2C displays use the I2C address 0x3C, which is also defined in the file:

#define SSD1306_I2C_ADDR 0x3C

#define SSD1306_I2C_ADDR 0x3C

With these settings, the TM4C123G knows where the OLED is located on the I2C bus and how to map pixels to the screen. Once this configuration is correct, everything else becomes simple, from writing text to creating animations.

Pinout and Connections for SSD1306 OLED with TM4C123G

Connecting the SSD1306 OLED display to the TM4C123G LaunchPad is simple because the OLED uses the I2C interface. You only need two data pins and power. In this section, you will see the exact pin mapping, wiring diagram explanation, and important notes to avoid mistakes.

OLED Pin Descriptions

The standard SSD1306 0.96” I2C OLED module has four pins. The image below shows the pinout of 0.96″ SSD1306 oled display.

These pins appear in this order:

• GND – Ground
• VCC – Supply voltage (usually 3.3V)
• SCL – I2C clock line
• SDA – I2C data line

TM4C123G I2C Pins Used in This Project

TM4C123G has multiple I2C modules, but the most commonly used and convenient one is I2C0, located on Port B.

The image below shows the I2C0 SCL and SDA pins on Port B of TM4C123G.

These pins support full I2C operation without needing any alternate configuration beyond pin mapping.

Wiring SSD1306 OLED to TM4C123G

The I2C version of the SSD1306 display uses just two signal lines to communicate with MCU, SDA (data line) and SCL (clock line). Along with these, you also need to connect power and ground.

The image below shows how the 0.96″ SSD1306 oled display is connected to TM4C123G.

You only need four simple connections:

Make sure:

• Wires are not loose
• Ground between OLED and LaunchPad is common
• You power the OLED with 3.3V (recommended)

Enabling I2C0 in Your Code

When using I2C0, you should enable the peripheral and configure the pins. Your main.c should include something like:

void I2C0_Init(void)
{
    //
    // 1. Enable the I2C0 peripheral and GPIOB port
    //
    SysCtlPeripheralEnable(SYSCTL_PERIPH_I2C0);
    SysCtlPeripheralEnable(SYSCTL_PERIPH_GPIOB);

    // Wait until ready
    while(!SysCtlPeripheralReady(SYSCTL_PERIPH_I2C0));
    while(!SysCtlPeripheralReady(SYSCTL_PERIPH_GPIOB));

    //
    // 2. Configure GPIO pins for I2C0
    // PB2 -> I2C0SCL
    // PB3 -> I2C0SDA
    //
    GPIOPinConfigure(GPIO_PB2_I2C0SCL);
    GPIOPinConfigure(GPIO_PB3_I2C0SDA);

    GPIOPinTypeI2CSCL(GPIO_PORTB_BASE, GPIO_PIN_2);  // SCL pin setup
    GPIOPinTypeI2C(GPIO_PORTB_BASE, GPIO_PIN_3);     // SDA pin setup

    //
    // 3. Initialize I2C Master
    // false = Standard Mode (100 kHz)
    // true  = Fast Mode (400 kHz)
    //
    I2CMasterInitExpClk(I2C0_BASE, SysCtlClockGet(), true);

    //
    // 4. Clear any previous I2C errors
    //
    I2CMasterEnable(I2C0_BASE);
}

void I2C0_Init(void)
{
    //
    // 1. Enable the I2C0 peripheral and GPIOB port
    //
    SysCtlPeripheralEnable(SYSCTL_PERIPH_I2C0);
    SysCtlPeripheralEnable(SYSCTL_PERIPH_GPIOB);

    // Wait until ready
    while(!SysCtlPeripheralReady(SYSCTL_PERIPH_I2C0));
    while(!SysCtlPeripheralReady(SYSCTL_PERIPH_GPIOB));

    //
    // 2. Configure GPIO pins for I2C0
    // PB2 -> I2C0SCL
    // PB3 -> I2C0SDA
    //
    GPIOPinConfigure(GPIO_PB2_I2C0SCL);
    GPIOPinConfigure(GPIO_PB3_I2C0SDA);

    GPIOPinTypeI2CSCL(GPIO_PORTB_BASE, GPIO_PIN_2);  // SCL pin setup
    GPIOPinTypeI2C(GPIO_PORTB_BASE, GPIO_PIN_3);     // SDA pin setup

    //
    // 3. Initialize I2C Master
    // false = Standard Mode (100 kHz)
    // true  = Fast Mode (400 kHz)
    //
    I2CMasterInitExpClk(I2C0_BASE, SysCtlClockGet(), true);

    //
    // 4. Clear any previous I2C errors
    //
    I2CMasterEnable(I2C0_BASE);
}

I have already covered it in the TM4C123G I2C Tutorial. These configurations match the library you are using and ensure the OLED communicates properly with the microcontroller.

Common Mistakes to Avoid

• Do not connect SDA/SCL to wrong pins (e.g., PA6/PA7, those are for UART).
• Do not power the OLED with 5V unless your module supports it.
• Do not forget to enable I2C clock for both I2C0 and GPIOB.
• Ensure pull-up resistors are present on SDA/SCL (most OLED modules already have them).

Adding the SSD1306 Library to Your TM4C123G Project

Before you can display anything on the OLED, you must add the SSD1306 driver to your Tiva C project. The good news is that the library you already have includes everything, including initialization, drawing functions, fonts, and bitmap support. In this section, you will learn how to copy the files, include them correctly, and prepare your project for compilation.

Copying the SSD1306 Library Files

Your project needs three main files:

• ssd1306.c
• ssd1306.h
• ssd1306_fonts.h

Copy all three files into your project’s folder as shown in the image below.

Including the Library in main.c

At the top of your main.c file, include the header:

#include "ssd1306.h"

#include "ssd1306.h"

This connects your code with the display driver and gives access to all functions like:

• SSD1306_Init()
• SSD1306_WriteString()
• SSD1306_DrawPixel()
• SSD1306_DrawBitmap()

Make sure the file is in the correct include path, otherwise CCS may throw “file not found” errors.

Checking Display Size and Address in ssd1306.h

Your OLED module works at 128×64 resolution and uses the default I2C address 0x3C.
These settings are already defined in the header file:

#define SSD1306_WIDTH 128
#define SSD1306_HEIGHT 64
#define SSD1306_I2C_ADDR 0x3C

#define SSD1306_WIDTH 128
#define SSD1306_HEIGHT 64
#define SSD1306_I2C_ADDR 0x3C

Do not change these unless:

• You switch to a 128×32 OLED
• Your OLED uses a different I2C address (rare)

A mismatch in width or height causes distorted graphics or missing lines on the display.

Verifying DriverLib Support

The driver uses TivaWare’s DriverLib functions such as:

I2CMasterDataPut();
I2CMasterControl();
I2CMasterInitExpClk();
GPIOPinConfigure();
GPIOPinTypeI2C();

I2CMasterDataPut();
I2CMasterControl();
I2CMasterInitExpClk();
GPIOPinConfigure();
GPIOPinTypeI2C();

So make sure your project includes the TivaWare library path. If you already use GPIO, UART, or Timer functions, you are good to go.

Compiling the Project

Once everything is in place:

1. Clean your project
2. Build it again

If no errors appear, your display driver is integrated perfectly. You can now move to the next step: initializing the OLED and drawing your first text.

Initializing the SSD1306 Display on TM4C123G

Once the library is added, the next step is to initialize the OLED so it can receive commands and draw graphics. The SSD1306 driver you’re using already includes the complete initialization sequence, so your code only needs a few simple function calls. This section walks you through setting up I2C, initializing the display, and performing basic screen operations.

Calling SSD1306_Init() with the Correct I2C Module

To start the OLED, call the initialization function after enabling I2C0:

SSD1306_Init(I2C0_BASE, SSD1306_I2C_ADDR);

SSD1306_Init(I2C0_BASE, SSD1306_I2C_ADDR);

This function performs:

• The full SSD1306 command sequence
• Display reset and power-on configuration
• Memory addressing setup
• Clearing the internal graphics buffer

After this step, the display is ready to draw text, shapes, and bitmaps.

Clearing and Updating the OLED Screen

The display uses an internal buffer stored in RAM. You draw on this buffer first, then flush it to the OLED.

Two main functions manage this:

Clear the screen buffer:

SSD1306_Clear();

SSD1306_Clear();

Send the buffer to the display:

SSD1306_Display();

SSD1306_Display();

You must call SSD1306_Display() every time you want to update the visible screen.

For example:

SSD1306_Clear();
SSD1306_SetCursor(0, 0);
SSD1306_WriteString("Hello OLED!");
SSD1306_Display();

SSD1306_Clear();
SSD1306_SetCursor(0, 0);
SSD1306_WriteString("Hello OLED!");
SSD1306_Display();

This sequence clears the screen, writes text, and displays it cleanly.

Adjusting Contrast and Inversion Modes

The driver includes helpful visual control functions:

Set Display Contrast

SSD1306_SetContrast(0xAF); // value between 0x00 and 0xFF

SSD1306_SetContrast(0xAF); // value between 0x00 and 0xFF

Higher values make the pixels appear brighter and sharper.

Invert Display Colors

SSD1306_Invert(true);   // white → black, black → white
SSD1306_Invert(false);  // normal mode

SSD1306_Invert(true);   // white → black, black → white
SSD1306_Invert(false);  // normal mode

Inversion is great for alerts, menus, and UI highlights.

Displaying Text on SSD1306: Strings, Numbers, and Floats

The SSD1306 library provides a clean and flexible text engine that lets you print strings, integers, and floating-point values with minimal code. You can choose different fonts, position text anywhere on the screen, and build clear UI layouts for your TM4C123G applications. This section explains how each function works and how to use them effectively.

Setting the Font for Text

Before printing text, select the font you want to use. The library includes multiple font styles and sizes, and each font affects how many characters fit on a line.

ssd1306_SetFont(&Font8x12_bold);

ssd1306_SetFont(&Font8x12_bold);

Larger fonts improve readability, while smaller fonts allow more information on screen. Choose a font based on the design of your interface. You can see the available fonts in ssd1306_fonts.h file.

Setting the Cursor Position on the OLED

The display uses pixel-based coordinates, giving you complete control over text placement.
Use SSD1306_SetCursor() to choose where the next printed text will appear:

SSD1306_SetCursor(0, 0);     // top-left corner
SSD1306_SetCursor(0, 16);    // second line (for ~12px tall fonts)

SSD1306_SetCursor(0, 0);     // top-left corner
SSD1306_SetCursor(0, 16);    // second line (for ~12px tall fonts)

This makes it easy to build structured layouts such as menus, headings, and data fields.

Printing Strings Using SSD1306_WriteString()

Print text using a single function:

SSD1306_WriteString("Hello TM4C!");

SSD1306_WriteString("Hello TM4C!");

The text is rendered into the display buffer using the current font. If the line reaches the edge of the screen, the cursor automatically wraps to the next line.

After writing text, flush the buffer to the OLED:

SSD1306_Display();

SSD1306_Display();

Printing Integer Values Using SSD1306_WriteInt()

The library includes a lightweight integer formatting function. Use it to print counters, sensor values, menu options, or debug information:

SSD1306_WriteInt(12345);

SSD1306_WriteInt(12345);

You can print integers anywhere on the screen by setting the cursor before calling the function:

SSD1306_SetCursor(10, 10);
SSD1306_WriteInt(12345);

SSD1306_SetCursor(10, 10);
SSD1306_WriteInt(12345);

Printing Floating-Point Values Using SSD1306_WriteFloat()

Floating-point outputs are essential for sensor data such as temperature, voltage, angles, or speed.
The function supports precision control:

SSD1306_WriteFloat(12.346, 2);   // prints 12.35

SSD1306_WriteFloat(12.346, 2);   // prints 12.35

You simply provide the number and the number of decimal places required.

Example usage:

SSD1306_SetCursor(10, 30);
SSD1306_WriteFloat(12.346, 2);

SSD1306_SetCursor(10, 30);
SSD1306_WriteFloat(12.346, 2);

Combining Text Outputs in a Display Sequence

A typical text-based output section, with string, number and float combined, looks like this:

    SSD1306_Init(I2C0_BASE, SSD1306_I2C_ADDR);
    SSD1306_Clear();
    
    ssd1306_SetFont(&Font8x12_bold);
    
    SSD1306_SetCursor(0, 0);
    SSD1306_WriteString("Hello TM4C!");
    SSD1306_SetCursor(0, 16);
    SSD1306_WriteString("SSD1306 demo");
    
    SSD1306_SetCursor(10, 32);
    SSD1306_WriteInt(12345);
    
    SSD1306_SetCursor(10, 48);
    SSD1306_WriteFloat(12.346, 2);
    
    SSD1306_Display();

    SSD1306_Init(I2C0_BASE, SSD1306_I2C_ADDR);
    SSD1306_Clear();
    
    ssd1306_SetFont(&Font8x12_bold);
    
    SSD1306_SetCursor(0, 0);
    SSD1306_WriteString("Hello TM4C!");
    SSD1306_SetCursor(0, 16);
    SSD1306_WriteString("SSD1306 demo");
    
    SSD1306_SetCursor(10, 32);
    SSD1306_WriteInt(12345);
    
    SSD1306_SetCursor(10, 48);
    SSD1306_WriteFloat(12.346, 2);
    
    SSD1306_Display();

The image below shows the output of this code on the oled display.

This demonstrates how simple it is to mix headings, labels, integers, and floating numbers on the OLED.

Drawing Graphics: Pixels, Lines, Shapes, and Filled Areas

The SSD1306 library gives you full control over individual pixels, making it easy to draw lines, shapes, and filled graphics on the 128×64 display. These primitives let you create cleaner interfaces, icons, and even simple animations. In this section, you will learn how to use every shape-drawing function included in the driver.

Drawing a Single Pixel

The most basic operation is drawing a pixel. Every other shape is built from this fundamental function:

SSD1306_DrawPixel(x, y, true);     // draw pixel ON
SSD1306_DrawPixel(x, y, false);    // draw pixel OFF

SSD1306_DrawPixel(x, y, true);     // draw pixel ON
SSD1306_DrawPixel(x, y, false);    // draw pixel OFF

Coordinates are in pixels:

• x: 0 to 127
• y: 0 to 63

Use pixels to create custom UI markers, cursor indicators, or small icons.

Drawing Straight Lines

The library uses the Bresenham algorithm for clean, sharp lines.
You can draw horizontal, vertical, or diagonal lines:

SSD1306_Clear();
SSD1306_DrawLine(0, 0, 127, 0, true);     // top horizontal line
SSD1306_DrawLine(0, 0, 0, 63, true);      // left vertical line
SSD1306_DrawLine(0, 0, 127, 63, true);    // diagonal line
SSD1306_Display();

SSD1306_Clear();
SSD1306_DrawLine(0, 0, 127, 0, true);     // top horizontal line
SSD1306_DrawLine(0, 0, 0, 63, true);      // left vertical line
SSD1306_DrawLine(0, 0, 127, 63, true);    // diagonal line
SSD1306_Display();

The image below shows the lines drawn on the oled display.

Lines are great for dividing sections on the screen, making UI borders, or showing progress indicators.

Drawing Rectangles

To draw a simple rectangle outline, use:

SSD1306_DrawRect(x, y, width, height, true);

SSD1306_DrawRect(x, y, width, height, true);

Rectangles are perfect for creating UI frames, borders, menu blocks, battery outlines, and decorative elements.

Below is an example that draws multiple nested rectangles, each one inside the previous one. This creates a layered box effect:

SSD1306_Clear();

// Draw 6 nested rectangles
SSD1306_DrawRect(10, 10, 108, 44, true);
SSD1306_DrawRect(14, 14, 100, 36, true);
SSD1306_DrawRect(18, 18, 92, 28, true);
SSD1306_DrawRect(22, 22, 84, 20, true);
SSD1306_DrawRect(26, 26, 76, 12, true);
SSD1306_DrawRect(30, 30, 68, 4, true);

SSD1306_Display();

SSD1306_Clear();

// Draw 6 nested rectangles
SSD1306_DrawRect(10, 10, 108, 44, true);
SSD1306_DrawRect(14, 14, 100, 36, true);
SSD1306_DrawRect(18, 18, 92, 28, true);
SSD1306_DrawRect(22, 22, 84, 20, true);
SSD1306_DrawRect(26, 26, 76, 12, true);
SSD1306_DrawRect(30, 30, 68, 4, true);

SSD1306_Display();

Each rectangle is drawn with a slightly smaller width and height, and with the starting point shifted inward. This creates a concentric layered effect.

The image below shows the output on the oled display.

Such nested rectangles are useful for decorative UI elements, screen borders, or transition animations. You can also animate them by clearing and redrawing with different sizes.

Drawing Filled Rectangles

Filled rectangles allow you to create bold shapes and UI components such as progress bars, battery indicators, and loading screens.
Use the function:

SSD1306_FillRect(x, y, width, height, true);

SSD1306_FillRect(x, y, width, height, true);

Below is an example that draws five filled rectangles, each stacked vertically to form a bar-style UI:

SSD1306_Clear();

// Draw 5 filled rectangles stacked vertically
SSD1306_FillRect(10, 5, 108, 8, true);
SSD1306_FillRect(10, 17, 108, 8, true);
SSD1306_FillRect(10, 29, 108, 8, true);
SSD1306_FillRect(10, 41, 108, 8, true);
SSD1306_FillRect(10, 53, 108, 8, true);

SSD1306_Display();

SSD1306_Clear();

// Draw 5 filled rectangles stacked vertically
SSD1306_FillRect(10, 5, 108, 8, true);
SSD1306_FillRect(10, 17, 108, 8, true);
SSD1306_FillRect(10, 29, 108, 8, true);
SSD1306_FillRect(10, 41, 108, 8, true);
SSD1306_FillRect(10, 53, 108, 8, true);

SSD1306_Display();

Each filled rectangle is drawn at a different Y-position with equal width and height. This layout looks like a vertical meter or a multi-level bar indicator.

The image below shows the output on the oled display.

You can animate these bars by filling them progressively, useful for progress indicators, sound level meters, or battery bars.

Drawing Circles

You can draw perfect circles using:

SSD1306_DrawCircle(centerX, centerY, radius, true);

SSD1306_DrawCircle(centerX, centerY, radius, true);

The following example draws five concentric circles, each one smaller and inside the previous one:

SSD1306_Clear();

// Draw 5 nested circles
SSD1306_DrawCircle(64, 32, 28, true);
SSD1306_DrawCircle(64, 32, 22, true);
SSD1306_DrawCircle(64, 32, 16, true);
SSD1306_DrawCircle(64, 32, 10, true);
SSD1306_DrawCircle(64, 32, 4, true);

SSD1306_Display();

SSD1306_Clear();

// Draw 5 nested circles
SSD1306_DrawCircle(64, 32, 28, true);
SSD1306_DrawCircle(64, 32, 22, true);
SSD1306_DrawCircle(64, 32, 16, true);
SSD1306_DrawCircle(64, 32, 10, true);
SSD1306_DrawCircle(64, 32, 4, true);

SSD1306_Display();

All circles share the same center (64, 32), the middle of the 128×64 screen. By reducing the radius each time, you get concentric rings. This creates a nice target-like effect, useful for gauges, radar-style screens, or simple loading animations.

The image below shows the concentric circles on the oled display.

Displaying Custom Bitmaps on SSD1306 OLED

Bitmaps allow you to display icons, logos, splash screens, and simple UI graphics on the SSD1306 OLED. Since the display is monochrome, each pixel is either ON or OFF, making bitmap rendering fast and efficient. With the SSD1306 driver already included in your TM4C123G project, drawing custom images becomes very easy. In this section, you will learn how to create 1-bit images, convert them into byte arrays, import them into your code, and draw them using the provided bitmap function.

Creating a Bitmap in 1-Bit Format

A bitmap is simply a sequence of bytes where each bit represents a pixel:

• 1 → Pixel ON (white)
• 0 → Pixel OFF (black)

Because the SSD1306 is monochrome, the image must be created in pure black & white (no grayscale). Each byte represents 8 vertical pixels, matching how the SSD1306 stores data internally.

Here is an example of a simple 8×8 bitmap:

const uint8_t myIcon[] = {
    0x3C, 0x42, 0xA9, 0x85,
    0xA9, 0x91, 0x42, 0x3C
};

const uint8_t myIcon[] = {
    0x3C, 0x42, 0xA9, 0x85,
    0xA9, 0x91, 0x42, 0x3C
};

This small pattern could be used for icons such as settings, menu buttons, or UI symbols.

Converting Images to Bitmaps

To use your own image, you need to convert it into a C byte array. You can easily do this using the Image2CPP online tool.

The image below shows how to create bitmap using an existing image.

Follow these steps:

1. Create a simple black-and-white image (for example, your logo).
2. Upload it in Image2CPP.
3. Configure the Image Settings. You can check the preview to see how the final image will look.
4. Adjust the brightness/alpha threshold to generate clear image.
5. Set output as Arduino Code.
6. Choose Monochrome and Vertical byte orientation.
7. Click Generate Code and copy the byte array.

After copying the byte array, paste it in a new header file. It will keep the code clean as our image data will be in a separate file. In the image below, I have created a separate file named bitmaps.h.

Now copy the file to the Arduino project folder, so that we can use it in the code.

Drawing Bitmaps Using SSD1306_DrawBitmap()

The SSD1306 library includes a dedicated bitmap drawing function:

#include "bitmaps.h"
SSD1306_DrawBitmap(x, y, bitmapArray, width, height, true);

#include "bitmaps.h"
SSD1306_DrawBitmap(x, y, bitmapArray, width, height, true);

• x, y : top-left corner of the image
• bitmapArray : your image data
• width, height : dimensions of your bitmap
• true : draw pixels ON

Here’s a complete example of displaying a 64×64 image:

SSD1306_Clear();

SSD1306_DrawBitmap(32, 0, logo, 64, 64, true);

SSD1306_Display();

SSD1306_Clear();

SSD1306_DrawBitmap(32, 0, logo, 64, 64, true);

SSD1306_Display();

This places the bitmap in the center area of the 128×64 OLED.

The bitmap is first drawn into the internal screen buffer. SSD1306_Display() then transfers the entire buffer to the OLED in one update.
This avoids flickering and ensures smooth rendering.

The image below shows the logo bitmap drawn on the oled display.

Combining Text and Bitmaps

You can mix graphics and text to create clean user interfaces. For example, display a Wi-Fi icon next to a status message:

  SSD1306_Clear();
  
  SSD1306_DrawBitmap(0, 0, wifiIcon, 16, 16, true);
  SSD1306_SetCursor(20, 4);
  
  ssd1306_SetFont(&Font6x8);
  SSD1306_WriteString("Connected");
  
  SSD1306_Display();

  SSD1306_Clear();
  
  SSD1306_DrawBitmap(0, 0, wifiIcon, 16, 16, true);
  SSD1306_SetCursor(20, 4);
  
  ssd1306_SetFont(&Font6x8);
  SSD1306_WriteString("Connected");
  
  SSD1306_Display();

The c array for the bitmap wifiIcon is stored in the bitmaps.h file. This code places the bitmap on the top-left corner, followed by the text. This makes your OLED look like a polished dashboard rather than plain text output.

The image below shows the wifi icon bitmap with text drawn on the oled display.

Best Practices for Using Bitmaps

• Clear the buffer before drawing new images: SSD1306_Clear();
• Use small bitmaps (16×16, 32×32) for quick UI icons.
• Keep large splash screens efficient by limiting size and detail.
• Organize icons in separate header files for readability.
• Adjust X/Y positioning for correct alignment.
• Avoid too many full-screen images to reduce memory usage.

Creating Simple Animations on SSD1306 Using TM4C123G

Animations make your OLED interface come alive. Even with a small monochrome display, you can create smooth and attractive effects such as loading bars, battery indicators, blinking icons, and moving shapes. The SSD1306 library you are using already supports fast pixel and rectangle operations, which makes animation easy and flicker-free.

In this section, you’ll learn how to build simple UI animations using basic drawing functions and the internal screen buffer.

Battery Charging Animation Using Filled Rectangles

A battery indicator is one of the most popular OLED animations. It is essentially a rectangle outline with a filling bar that grows in steps.

Here is a clean and simple battery animation:

SSD1306_Clear();

// Draw battery outline
SSD1306_DrawRect(40, 20, 48, 24, true);
SSD1306_FillRect(88, 26, 4, 12, true);   // Battery terminal

// Animation: fill levels from 0% to 100%
for (int level = 0; level <= 44; level += 8)
{
    SSD1306_FillRect(42, 22, level, 20, true);
    SSD1306_Display();
    delay_ms(150);

    // Clear inside before next level
    SSD1306_FillRect(42, 22, 44, 20, false);
}

// Final full battery
SSD1306_FillRect(42, 22, 44, 20, true);
SSD1306_Display();

SSD1306_Clear();

// Draw battery outline
SSD1306_DrawRect(40, 20, 48, 24, true);
SSD1306_FillRect(88, 26, 4, 12, true);   // Battery terminal

// Animation: fill levels from 0% to 100%
for (int level = 0; level <= 44; level += 8)
{
    SSD1306_FillRect(42, 22, level, 20, true);
    SSD1306_Display();
    delay_ms(150);

    // Clear inside before next level
    SSD1306_FillRect(42, 22, 44, 20, false);
}

// Final full battery
SSD1306_FillRect(42, 22, 44, 20, true);
SSD1306_Display();

How it works:

• The outer battery shape stays static.
• The inner filled rectangle is redrawn repeatedly.
• Each cycle shows a higher fill level, creating a smooth charging animation.
• Only the inside area is cleared before the next update, making the animation fast.

The gif below shows the output of the code, showing the battery animation on the oled display.

Progress Bar Animation Using SSD1306_FillRect()

Progress bars are excellent for loading screens, file transfers, sensor warm-ups, or UI transitions.

Here is a simple horizontal progress bar:

SSD1306_Clear();

// Outline
SSD1306_DrawRect(10, 30, 108, 10, true);

// Fill animation
for (int width = 0; width <= 106; width += 4)
{
    SSD1306_FillRect(12, 32, width, 6, true);
    SSD1306_Display();
    delay_ms(80);

    // Clear filling for next update
    SSD1306_FillRect(12, 32, 106, 6, false);
}

SSD1306_Clear();

// Outline
SSD1306_DrawRect(10, 30, 108, 10, true);

// Fill animation
for (int width = 0; width <= 106; width += 4)
{
    SSD1306_FillRect(12, 32, width, 6, true);
    SSD1306_Display();
    delay_ms(80);

    // Clear filling for next update
    SSD1306_FillRect(12, 32, 106, 6, false);
}

Explanation:
The small step size (4 px) gives the illusion of a smooth loading motion. Since the screen buffer is updated only once per frame, there is no flickering.

The gif below shows the output of the code, showing the progress bar animation on the oled display.

Moving Object Animation Using Clear + Redraw

You can animate any shape by erasing and redrawing it at a new position, similar to a simple game loop.

Example: moving a small 8×8 square across the screen:

SSD1306_Clear();

for (int x = 0; x < 120; x++)
{
    SSD1306_FillRect(x, 28, 8, 8, true);   // Draw block
    SSD1306_Display();
    delay_ms(30);

    SSD1306_FillRect(x, 28, 8, 8, false);  // Erase it
}

SSD1306_Clear();

for (int x = 0; x < 120; x++)
{
    SSD1306_FillRect(x, 28, 8, 8, true);   // Draw block
    SSD1306_Display();
    delay_ms(30);

    SSD1306_FillRect(x, 28, 8, 8, false);  // Erase it
}

Explanation:

• The filled square moves horizontally.
• After each frame, the previous square is cleared.
• Simple, smooth, and effective for indicators or tiny UI animations.

The gif below shows the output of the code, showing the moving block animation on the oled display.

Tips for Smooth Animations

• Keep shapes small for faster updates.
• Use the internal buffer—draw first, then call SSD1306_Display().
• Avoid clearing the whole screen repeatedly; clear only what changes.
• Simple geometric shapes animate best and look cleaner on monochrome OLEDs.
• Add short delays (20–150 ms) to control animation speed.

Conclusion

In this tutorial, you learned how to interface the SSD1306 0.96” OLED with the TM4C123G microcontroller using a clean and feature-rich driver. We covered everything from wiring the OLED, adding the library files, and initializing the display, to printing text, numbers, and floating values. You also explored drawing pixels, lines, rectangles, circles, filled shapes, and custom bitmaps. Finally, you added life to the display by creating simple animations such as battery indicators, progress bars, and moving objects.

These skills allow you to build polished and professional interfaces for any embedded project. Whether you want to show sensor readings, create dashboards, draw icons, or add loading effects, the SSD1306 display gives you impressive versatility with very low hardware requirements. With this foundation, you can now design your own UI elements, combine graphics with real-time data, and build fully interactive displays on the TM4C123G platform.

TM4C123G LaunchPad Tutorial: Setup CCS Studio and Build Your First Program

TM4C123G Clock Setup Tutorial – Configure System Clock with PLL

TM4C123G Delay Tutorial – Using SysCtlDelay and SysTick Timer

TM4C123 GPIO Tutorial – Digital Input and Output using Tiva C LaunchPad

TM4C123 GPIO External Interrupts (Using TivaWare in Code Composer Studio)

TM4C123G UART Tutorial (PART 1) – How to Use UART and Virtual COM Port in Tiva C

TM4C123G UART Tutorial (PART 2): Use Interrupt to Receive Data and Control LEDs

I2C in TM4C123G Tiva C – How to Use I2C Peripheral with TivaWare

1 2 Next »