Font scaling on SSD1306 OLED displays

[kresimirhec]

Here is a solution for scaling fonts I came up with....
I originally wrote this elsewhere but a user suggested that I should poste this here

NB: I am using ESP32-WROOM-32, 0.91" OLED 128x32

from machine import SoftI2C, Pin
import time
import ssd1306

OLED_SCL_PIN = 22  # clock
OLED_SDA_PIN = 21  # data
OLED_WIDTH = 128  # pixels
OLED_HEIGHT = 32  # pixels


def oled_text_scaled(oled, text, x, y, scale, character_width=8, character_height=8):
    # temporary buffer for the text
    width = character_width * len(text)
    height = character_height
    temp_buf = bytearray(width * height)
    temp_fb = ssd1306.framebuf.FrameBuffer(temp_buf, width, height, ssd1306.framebuf.MONO_VLSB)

    # write text to the temporary framebuffer
    temp_fb.text(text, 0, 0, 1)

    # scale and write to the display
    for i in range(width):
        for j in range(height):
            pixel = temp_fb.pixel(i, j)
            if pixel:  # If the pixel is set, draw a larger rectangle
                oled.fill_rect(x + i * scale, y + j * scale, scale, scale, 1)


def main():
    i2c = SoftI2C(scl=Pin(OLED_SCL_PIN), sda=Pin(OLED_SDA_PIN))
    oled = ssd1306.SSD1306_I2C(OLED_WIDTH, OLED_HEIGHT, i2c)

    # no scaling
    oled.fill(0)
    oled.text("ABCDEFGHIJKLMNOP", 0, 0)
    oled.text("abcdefghijklmnop", 0, 8)
    oled.text("0123456789012345", 0, 16)
    oled.text("=!\"#$%&/()?-+*:;", 0, 24)
    oled.show()
    time.sleep(3)

    # 2x
    oled.fill(0)
    oled_text_scaled(oled, "ABCDEFGH", 0, 0, 2)
    oled_text_scaled(oled, "abcdefgh", 0, 16, 2)
    oled.show()
    time.sleep(3)

    # 4x
    oled.fill(0)
    oled_text_scaled(oled, "ABCD", 0, 0, 4)
    oled.show()
    time.sleep(3)


if __name__ == "__main__":
    main()

For convenience, one can also extend the imported class:

ssd1306.SSD1306_I2C.text_scaled = oled_text_scaled

...and then use it slightly nicer way:

    ...
    oled.text_scaled("ABCD", 0, 0, 4)
    ...

[jonnor]

Thanks for sharing the code! This will help future travellers interested in a simple way of having fonts at different sizes, without including a large set of different fixed-height fonts.

[scruss]

It's also bringing back memories of how we did font scaling on 8-bit computers by printing text black-on-black at the bottom left of the screen, then scanning and scaling up those "invisible" pixels ...

[IHOXOHI]

Nice!
Very good idea.
So, useful!
I have thought about a solution during so many time, your's is fine.
Thanks.

[davefes]

Thanks for that. Even with no scaling I can now read the display!

[bradcar]

This is cool

also take a look at: https://github.com/peterhinch/micropython-font-to-py
and https://github.com/easytarget/microPyEZfonts

between them you can find different sizes and fonts.

[IHOXOHI]

for doing your own font...[https://github.com/IHOXOHI/Font4x4]

[bradcar]

@IHOXOHI I encourage you to put more into your GitHub readme to explain what your code is doing and what it's unique features are.

[IHOXOHI]

ok, I will, thanks...

[ettore-galli]

Great idea thanks you for sharing!

I shamelessly copied in my project and used different scales for x and y (code extracted from a class of mine, self.display is the "oled" of the original code)

And it worked well...

def big_text(self, text, x, y, character_width=8, character_height=8, scale_x=2, scale_y=2):
        # temporary buffer for the text

        width = character_width * len(text)
        height = character_height
        temp_buf = bytearray(width * height)
        temp_fb = ssd1306.framebuf.FrameBuffer(
            temp_buf, width, height, ssd1306.framebuf.MONO_VLSB
        )

        # write text to the temporary framebuffer
        temp_fb.text(text, 0, 0, 1)

        # scale and write to the display
        for i in range(width):
            for j in range(height):
                pixel = temp_fb.pixel(i, j)
                if pixel:  # If the pixel is set, draw a larger rectangle
                    self.display.fill_rect(
                        x + i * scale_x, y + j * scale_y, scale_x, scale_y, 1
                    )

[ettore-galli]

This other version performs some smoothing of edges filling with "half rectangles" the borders.

This is not the most advanced of the algorithms but does the job.

Must be tested in all circumstances, for me it is working fine till now.

Again, thanks @kresimirhec for sharing your basic idea of the frame buffer usage

import framebuf  # type: ignore[import-not-found]


def write_big_text(  # noqa: PLR0913
    display: framebuf.FrameBuffer,
    text: str,
    x: int,
    y: int,
    character_width: int = 8,
    character_height: int = 8,
    scale_x: int = 2,
    scale_y: int = 2,
) -> None:
    # temporary buffer for the text

    width = character_width * len(text)
    height = character_height
    temp_buf = bytearray(width * height)
    temp_fb = framebuf.FrameBuffer(temp_buf, width, height, framebuf.MONO_VLSB)

    # write text to the temporary framebuffer
    temp_fb.text(text, 0, 0, 1)

    w = scale_x
    h = scale_y

    hw = scale_x - scale_x // 2
    hh = scale_y - scale_y // 2

    # scale and write to the display
    for i in range(width):
        for j in range(height):

            pixel = temp_fb.pixel(i, j)

            xr = x + i * scale_x
            yr = y + j * scale_y

            if pixel:  # If the pixel is set, draw a larger rectangle
                display.fill_rect(xr, yr, w, h, 1)
            elif i > 0 and j > 0:

                up = temp_fb.pixel(i, j - 1)
                down = temp_fb.pixel(i, j + 1) if j + 1 < height else 0
                left = temp_fb.pixel(i - 1, j)
                right = temp_fb.pixel(i + 1, j) if i + 1 < width else 0

                if up and left:
                    display.fill_rect(xr, yr, hw, hh, 1)
                if up and right:
                    display.fill_rect(xr + hw, yr, hw, hh, 1)
                if down and left:
                    display.fill_rect(xr, yr + hh, hw, hh, 1)
                if down and right:
                    display.fill_rect(xr + hw, yr + hh, hw, hh, 1)