9. output devices

I had a great time experimenting with the OLED display. Even though I was away from home for spring break in Mexico and couldn't work with my own PCBs, I decided to start exploring the OLED display using an Arduino Uno. I plan to upload these codes to the microcontrollers I've made once I return home. Additionally, I couldn't resist buying an SPI TFT LCD display module that I'm really excited to try out.

Experimenting with OLED display:

To start understanding how the OLED display worked I found this guide. It was very useful to begin experimenting with the code and observe how it was reflected in the display.

To begin, I created the following diagrams to show how to connect the OLED display to the Arduino Uno, to the Xiao and to the ATtiny flower design.

Setup

To get started, open Arduino and navigate to 'Tools'. Click on 'Manage Libraries' and search for two libraries: 'Adafruit SSD1306' and 'Adafruit GFX', install them.

Next, under examples, scroll down to 'Adafruit SSD1306' and select 'ssd1306_128x64_i2c'.

Upload this code to verify that everything is working correctly, including the connections and the OLED screen.

If it is not working, change the ‘SCREEN_ADDRESS’, in my case to ‘0x3C’.

Shapes

Pixels

To begin, I started drawing pixels to form a happy face. While it may seem simple, it was actually more challenging than I anticipated.

Line

Rectangle

Rounded rectangle

Filled circle

Triangle - inverted fill

In the following table you will find the codes corresponding to different shapes.

Shape	Code
Pixel	display.drawPixel(x, y, color)
Line	display.drawLine(x1, y1, x2, y2, color)
Rectangle	display.drawRect(x, y, width, height, color)
Filled rectangle	display.fillRect(x, y, width, height, color)
Rounded rectangle	display.drawRoundRect(x, y, width, height, round, color)
Filled rounded rectangle	display.fillRoundRect(x, y, width, height, round, color)
Circle	display.drawCircle(x, y, radius, color)
Filled circle	display.fillCircle(x, y, radius, color)
Triangle	display.drawTriangle(x1, y1, x2, y2, x3, y3, color)
Filled triangle	display.fillTriangle(x1, y1, x2, y2, x3, y3, color)
Invert	display.invertDisplay(true)

Text

I began with a basic "Hello World!" example I found on the online guide I previously linked. Since this was a very basic example, I wanted to edit the code further to learn more.

Initially, I decided to adjust the text's position on the 'y' coordinate since my screen displays both yellow and blue colors. I wanted the text to appear only in blue. To achieve this, I made a simple adjustment to the ‘display.setCursor’ on the ‘y’ coordinate changing it from 10 to 16.

Next, I changed the text in the ‘display.println’ from "Hello World!" to "This is week 9".

Afterwards, I attempted to make the text move left and right. Although my first attempt didn't produce the desired effect, it still looked cool.

I realized I was making things more complicated than necessary. Eventually, I discovered a method to smoothly scroll the text from left to right, achieving exactly what I wanted.

Images

1:

To start, I opened a new Adobe Illustrator document with dimensions 128 px by 64 px to match the OLED screen size.

2:

I then imported the desired photo by dragging and dropping it into the document.

3:

I cropped the photo for better detail on the small display.

4:

Then, while selecting the image, I applied the 'Black and White logo' option from the 'Mask' menu to create a black and white version for use in C code.

5:

Exported the image as a Bitmap (BMP) file.

6:

Used a website to convert the BMP file to C code. I began by importing the Bitmap, chose 'Hex (0x00)' code format, '1 bit line art' Palette Mod, resized it to 128 px to match the screen size. Selected Little-endian, enabled the const option, and changed the 'Data type' to 'uint8_t'.