Skip to main content
This website uses cookies to ensure you get the best experience on our website. Learn more.

OLED Display

OLED Display
i2c I2C
released in 1.0.0


ThenOLED Displayshoulddisplay textyour text
ThenOLED Displayshoulddisplay value{{value}} unitwith labelLabel:
ThenOLED Displayshoulddisplay imageimage asset
ThenOLED Displayshoulddisplay QR codeyour link
ThenOLED Displayshouldclear display
ThenOLED Displayshouldturn on
ThenOLED Displayshouldturn off
ThenOLED Displayshouldinvert display


A small display with a black and white OLED pixel matrix.

Image Editor

Clicking on the arrow within the Live Slot of the OLED Display, you get a simple drawing tool to create your bitmaps that can be pushed onto the display.

OLED Image Editor

The tools, from left to right, are:

  • Rectangle: draw a rectangle
  • Ellipse: draw an ellipse
  • Line: draw a straight line
  • Pen: draw a freeform
  • Toggle Fill / Outline: toggle if the rectangle or ellipse is filled or just an outline
  • Toggle colour black / white: toggle the drawing color
  • Invert canvas: inverts the whole canvas
  • Undo: Undo a drawing step
  • Redo: Redo a drawing step
  • Push to OLED: push your image to the hardware component
  • Pull from OLED: pull the currently displayed text or image from the component

Next to the drawing canvas, on the right, you have some image related buttons:

  • Import: import an image from your computer
  • Export: export your drawn image to your computer
  • Clear: clear the canvas
  • Image Dropdown: select which image of your project you want to edit

Importing Images

You can upload an image (.png, .jpg, or .jpeg) to the image editor. Every image gets scaled to the OLED Display's resolution, which is: 128 × 64 px. If you do not mind the downscaling you should consider the aspect ratio of 2:1.

Uploaded images will get turned into a hard black and white bitmap, no grayscale!

Image Assets

All images you create in the image editor get stored in the project, so that when you open your project file again everything works how you left it. In the dropdown you can see all images currently in the project or add a new one by clicking "New Image". Each image gets a random ID which cannot be changed at the moment.

When editing an image, it will immedately update all instances where the image is used. For example, if you have set up a card with "… then OLED should display image [image_1]," and you edit [image_1], the card will update the image automatically.

Drawing performance

Drawing on the OLED display means we need to transfer the next image pixel by pixel to the display controller. As blokdots is remotely controlling the Arduino (via Firmata) from your computer, this takes longer than doing it natively on the Arduino. You can expect up to 2 seconds when every pixel on the OLED needs to be changed.

However, we do support partial updates. When only a small area of the OLED needs to be updated, only those pixels get transferred and higher frame rates are possible. Please keep this in mind, when sketching out your screen designs.