OLED Screen

 OLED Screen

Many electronic devices communicate with users through screens.

Examples include:

• Smartphones
• Digital clocks
• Thermometers
• Fitness trackers
• Robotics displays
• Smart home devices

The OLED Screen category allows a D1 R32 to present information visually.

Unlike a simple LCD, an OLED display can show:

 Text

 Pictures

 Graphics

 Shapes

 Lines

 Animation

 Individual pixels

 Sensor information

 Menus and interface

---

What Is an OLED Display?

An OLED display is a small graphical screen that can display information directly on a project.

Unlike LEDs that only turn on or off, an OLED can show:

Words

Pictures

Shapes

Graphics

Animations

Think of the OLED as a miniature computer screen for your project.

---

Why Use an OLED?

OLED displays help users understand what a project is doing.

Examples:

Temperature Monitor - Temperature: 23°C

Distance Meter - Distance: 42 cm

Robot Status - READY

Battery Indicator - Battery: 87%

---

OLED Category

[INSERT CATEGORY IMAGE HERE: OLED Screen]

Figure 14.1 – Blocks available in the OLED Screen category.

The category can be understood using this workflow:

SETUP

↓

IMAGE

↓

TEXT

↓

DRAW

↓

MOVE

↓

PIXELS

---

OLED Block Quick Reference

Family	Purpose
I2C Setup	Configure communication
OLED Setup	Create OLED display
Built-In Pictures	Use predefined images
Display Image	Show images
Display String	Show text
Scroll String	Moving text
Frame Display	Frame-based text
Lines	Draw graphics
Rectangles	Draw shapes
Translation	Move graphics
Pixels	Control individual pixels

---

Part 1: OLED Setup

I2C Setup

[INSERT BLOCK IMAGE HERE: I2C Setup]

Before using an OLED display, the I2C connection must be configured.

Conceptually:

D1 R32

↓

I2C

↓

OLED

i2c_extend = machine.SoftI2C(
scl=machine.Pin(19),
sda=machine.Pin(18),
freq=100000
)

---

Important Settings

Setting	Purpose
SCL	Clock wire
SDA	Data wire
Frequency	Communication speed

---

 Configure I2C first. Configure OLED second.

---

OLED Setup

[INSERT BLOCK IMAGE HERE: OLED Setup]

After I2C has been configured, the OLED display can be created.

Actual Generated Python

oled = oled128x64.OLED(
i2c_extend,
address=0x3c,
font_address=0x3A0000
)

---

Key Configuration Values

Parameter	Value
OLED Variable	oled
I2C Variable	i2c_extend
Address	0x3c
Font Address	0x3A0000

---

Setup Workflow

I2C Setup

↓

OLED Setup

↓

Display Content

---

Part 2: Displaying Images

Built-In Pictures

[INSERT BLOCK IMAGE HERE: Built-In Picture]

The OLED category includes predefined images.

Example:

Heart

---

Concept

Built-In Picture

↓

Display Image

↓

OLED

---

Displaying an Image

[INSERT BLOCK IMAGE HERE: Display Image]

Basic display:

oled.image(Heart)

Positioned display:

oled.image(
Heart,
x=0,
y=0,
size=1
)

---

Important Parameters

Parameter	Purpose
x	Horizontal position
y	Vertical position
size	Image size

---

Concept

IMAGE

+

POSITION

+

SIZE

↓

OLED

---

Clearing the Display

[INSERT BLOCK IMAGE HERE: Clear Display]

Actual Generated Python

oled.fill(0)

oled.show()

---

Concept

Current Display

↓

Clear

↓

Empty Screen

---

Part 3: Text on the OLED

Displaying Simple Text

[INSERT BLOCK IMAGE HERE: Display String]

The first OLED activity should always be displaying text.

oled.shows("Clu-Bots")

Concept

Text

↓

OLED

---

Positioning and Formatting Text

[INSERT BLOCK IMAGE HERE: Display String with Options]

oled.shows(
"Clu-Bots",
x=0,
y=0,
size=1,
space=0,
center=True
)

---

Formatting Options

Setting	Purpose
x	Horizontal position
y	Vertical position
size	Character size
space	Character spacing
center	Middle alignment

---

Text Alignment

Middle Alignment YES:

center=True

Middle Alignment NO:

center=False

Selection	Generated Python
yes	center=True
no	center=False

---

Understanding Coordinates

OLED graphics use coordinates.

X → Horizontal

Y → Vertical

Every graphical object uses coordinates.

Examples:

Text + x + y

Image + x + y

Pixel + x + y

Rectangle + x + y

X tells the display where to move horizontally. Y tells the display where to move vertically.

---

Scrolling Text

[INSERT BLOCK IMAGE HERE: Scroll String]

---

Actual Generated Python

Simple version:

oled.scroll("Clu-Bots")

Advanced version:

oled.scroll(
"Clu-Bots",
y=0,
size=5,
speed=5,
space=0
)

---

Parameters

Parameter	Purpose
y	Vertical position
size	Character size
speed	Scroll speed
space	Character spacing

---

Frame-Based Text

[INSERT BLOCK IMAGE HERE: Show String by Frame]

---

Actual Generated Python

Basic:

oled.frame("Clu-Bots")

Advanced:

oled.frame(
"Clu-Bots",
size=5,
delay=500
)

---

Part 4: Drawing Graphics

Straight Lines

[INSERT BLOCK IMAGE HERE: Straight Line]

Vertical:

oled.vline(0,0,20,1)
oled.show()

Horizontal:

oled.hline(0,0,20,1)
oled.show()

---

Line Options

Selection	Generated Python
Vertical	vline()
Horizontal	hline()

---

Drawing a Line Between Two Points

[INSERT BLOCK IMAGE HERE: Draw Line]

oled.line(0,0,50,50,1)
oled.show()

---

Concept

Point A

↓

Line

↓

Point B

---

Drawing Rectangles

[INSERT BLOCK IMAGE HERE: Rectangle]

Hollow Rectangle

oled.rect(20,20,20,15,1)
oled.show()

Filled Rectangle

oled.fill_rect(20,20,20,15,1)
oled.show()

---

Rectangle Modes

Mode	Generated Python
Hollow	rect()
Filled	fill_rect()

---

Part 5: Moving Graphics

Image Translation

[INSERT BLOCK IMAGE HERE: Image Translation]

---

Actual Generated Python

Up

oled.shift_up(1)

Down

oled.shift_down(1)

Left

oled.shift_left(1)

Right

oled.shift_right(1)

---

Movement Directions

Direction	Generated Python
UP	shift_up()
DOWN	shift_down()
LEFT	shift_left()
RIGHT	shift_right()

---

Part 6: Pixels

---

Reading a Pixel

[INSERT BLOCK IMAGE HERE: Pixel Status]

---

Actual Generated Python

oled.pixel(0,0)

---

Concept

X

+

Y

↓

Read Pixel

---

Turning a Pixel ON

[INSERT BLOCK IMAGE HERE: Set Pixel]

oled.pixel(0,0,1)

oled.show()

---

Turning a Pixel OFF

oled.pixel(0,0,0)

oled.show()

---

Pixel States

State	Value
ON	1
OFF	0

---

Why Does show() Appear So Often?

Many OLED blocks automatically generate:

oled.show()

after drawing operations.

Example:

oled.line(...)

oled.show()

or

oled.pixel(...)

oled.show()

---

Beginner Explanation

Modify Display

↓

Show Updated Result

---

OLED Levels of Complexity

Students should think of the OLED category as having three levels.

Level 1: Text

Display String

Level 2: Graphics

Images

Lines

Rectangles

Movement

Level 3: Pixels

Read Pixel

Turn Pixel ON

Turn Pixel OFF

---

Building a Progress Bar

A filled rectangle can become a progress bar.

Value

↓

Math

↓

Rectangle Width

↓

Filled Rectangle

↓

Progress Bar

This combines:

Sensor

↓

Math

↓

OLED

and creates meaningful visual feedback.

---

OLED and Sensors

The OLED becomes most useful when connected to real-world data.

DHT11

Temperature

↓

OLED

Ultrasonic Sensor

Distance

↓

OLED

ADXL345

X / Y / Z

↓

OLED

---

Best Practice

Sensor

↓

OLED

+

Serial Monitor

Students can observe information both locally and on the PC.

---

Quick Reference

Family	Main Idea
Setup	Configure display
Image	Show pictures
Text	Show messages
Scroll	Move text
Frame	Frame-based display
Lines	Draw graphics
Rectangle	Create shapes
Movement	Shift display
Pixels	Individual control

---

Key Takeaway

The OLED display transforms a D1 R32 from a device that only processes information into a device that can visually communicate information.

By learning to display text, position graphics, draw shapes, move images, and control pixels, students build the foundation for user interfaces, dashboards, animations, and graphical robotics projects.