0.96'' OLED Screen with micro:bit

Difficulty
Moderate
Steps
17

The micro:bit has 25 programmable LEDs in a 5x5 matrix, which allows you to display text, numbers and images. But what if you wanted to use a different screen altogether?

In this guide, we will use a 0.96'' OLED display screen with the micro:bit. We will be using the MU editor to program the micro:bit using MicroPython. Alternatively, the micro:bit can also be programmed using the MakeCode editor. Sample code is provided at the end of the tutorial.

Finishing this guide will mean you have not only programmed in MicroPython, but you are one step closer to using the OLED display in your own micro:bit projects!

Parts Used in This Guide

Buy

Step 1  The Module

Let's take a closer look at the 0.96'' OLED module.

It has four pins:

  • Ground (GND)
  • Voltage Common Collector (VCC)
  • Serial Clock (SCL)
  • Serial Data (SDA)

Note: To connect the SCL and SDA pins to the micro:bit, they must be connected to Pins 19 and 20. This is because pins 19 and 20 on the Micro:bit are what we call the default I2C SCL and SDA pins. I2C stands for inter-integrated circuit protocol, and it allows for devices to communicate with one another.

Step 2  Connect module to breadboard

Step 3  Connect P20 to SDA

Step 4  Connect P19 to SCL

Step 5  Connect 3.3V to VCC

Step 6  Connect GND to GND

Step 7  MU Editor

Note: If you're unable to use the following software, jump to the end of the tutorial for some sample code to use the MakeCode editor instead. 

To program the OLED display with the micro:bit using Micropython, you will need to have downloaded and installed MU Editor.

  1. Head over to Code With Mu download page 
  2. Choose the installer for your operating system. In this guide, we are using a MacOSX Installer.
    Note: If you are using Windows but unsure if it is 32-bit or 64-bit ...
    • Press the Windows key
    • Type into search "System information". 
    • Look at what it says in 'System Type'.
  3. Double-click on the downloaded file, 'mu-editor_1.0_osx.dmg'. If you are using Windows,  it will be a different file.
  4. Drag and drop the mu editor into 'Applications' folder. If you are using Windows, run the installer.
  5. Start the editor! Double-click on mu editor.  A folder on your computer called mu_code will be created.

Step 8  Download the library

Before we can use the OLED display with MicroPython, we will need the correct libraries for it. 

  1. Go to the microbit_ssd1306 github page
  2. Click on 'Clone or download' button. 
  3. Choose 'Download ZIP'


Step 9  Move ssd1306 library files

Now we will need to move the library files into the mu editor folder, this is so that you can find them in the mu editor.

  1. Open up the mu_code folder
  2. Open the microbit_ssd1306-master folder
  3. Copy and paste all the python files into the mu_code folder

Step 10  The code


              from ssd1306_px import set_px
from ssd1306 import draw_screen, initialize, clear_oled

initialize()
clear_oled()
set_px(10,10,1)
set_px(20,20,0,0)
draw_screen()
            

Let's start with something simple so you can get familiar with programming the OLED display.

Step 11  Flash the code to the micro:bit

  1. Click on 'Flash' to upload the code to the micro:bit
  2. You will be greeted with an error message stating that the required libraries cannot be found. This is because we haven't yet uploaded the library files to the micro:bit!
  3. Click on 'Files' button
  4. Drag and drop the ssd1306_px.py and ssd1306.py files from "Files on your computer" over to 'Files on your micro:bit"
  5. Press the reset button on your micro:bit. The micro:bit will now display a tiny white pixel on the screen!

Note: If there are no files listed under 'Files on your computer', please go back to step 4 and make sure that the files in 'microbit_ssd1306' have been copied and pasted into the 'mu_code' folder.

Step 12  Prepare a bitmap image

  1. We will use a sample image provided in the ssd1306 library
    Note: If you would like to create your own bitmap image, remember it needs to use only 2 bits per pixel (black and white)
  2. We need to convert the bitmap image to its hex data. Use LCDAssistant (Windows) or bitmapToC (MacOSX) to generate the hex data
  3. Copy the hex data into the bitmap_converter.py file in the sample_images folder

  4. Run bitmap_converter.py on a computer with Python.




Step 13  Add generated file to mu_code folder

After you have ran the file, it should have generated a microbit_logo file.

We will need to move it to mu_code folder so you can find it in mu editor.

Drag and drop microbit_logo into the mu_code folder.

Step 14  The code to show bitmap image


              from ssd1306 import initialize, clear_oled
from ssd1306_bitmap import show_bitmap

initialize()
clear_oled()
show_bitmap("microbit_logo")
            

With the bitmap image prepared, we can move on to programming the micro:bit.


Step 15  Flash the code to the micro:bit

  1. Open up an empty file in mu and add the code in the previous step to it. Name the file 'main.py'
  2. Click on 'Flash' button. 
  3. Add the libraries! Move the files main.py, ssd1306.py and ssd1306_bitmap.py over to the micro:bit.
  4. Add the microbit_logo file by dragging it from "Files on your computer" over to "files on your micro:bit"
  5. Press the reset button on the micro:bit

If everything is successfully done, you will see the micro:bit logo displayed on the OLED display!

Step 16  What it should look like

If everything is successfully done, you will see the micro:bit logo displayed on the OLED display.

Step 17  MakeCode!

If you prefer to use the MakeCode editor with the OLED, here is some sample code! Just click on the download button and upload it to your Micro:bit.

You can click on the edit button down below to access the editor and make your own changes.

This MakeCode uses the oled-ssd1306 MakeCode package, which comes with a few useful functions that will let you:

  • Show a string
  • Create a new line
  • Show a number
  • Draw a filled box with coordinates
  • Draw circles with coordinates 
  • Clear the display and much more!