To draw a pixel in the OLED display, you can use the drawPixel(x, y, color)<\/span> method that accepts as arguments the x and y coordinates where the pixel appears, and color. For example:<\/p>\n\n\n\ndisplay.drawPixel(64, 32, WHITE);<\/code><\/pre>\n\n\n\nDraw a line<\/h3>\n\n\n\n
Use the drawLine(x1, y1, x2, y2, color)<\/span> method to create a line. The (x1, y1) coordinates indicate the start of the line, and the (x2, y2) coordinates indicate where the line ends. For example:<\/p>\n\n\n\ndisplay.drawLine(0, 0, 127, 20, WHITE);<\/code><\/pre>\n\n\n\nDraw a rectangle<\/h3>\n\n\n\n
The drawRect(x, y, width, height, color)<\/span> provides an easy way to draw a rectangle. The (x, y) coordinates indicate the top left corner of the rectangle. Then, you need to specify the width, height, and color:<\/p>\n\n\n\ndisplay.drawRect(10, 10, 50, 30, WHITE);<\/code><\/pre>\n\n\n\nYou can use the fillRect(x, y, width, height, color)<\/span> to draw a filled rectangle. This method accepts the same arguments as drawRect()<\/span>.<\/p>\n\n\n\n
The library also provides methods to display rectangles with round corners: drawRoundRect() and fillRoundRect(). These methods accept the same arguments as previous methods plus the radius of the corner. For example:<\/p>\n\n\n\n
display.drawRoundRect(10, 10, 30, 50, 2, WHITE);<\/code><\/pre>\n\n\n\n
Or a filled round rectangle:<\/p>\n\n\n\n
display.fillRoundRect(10, 10, 30, 50, 2, WHITE);<\/code><\/pre>\n\n\n\n
Draw a circle<\/h3>\n\n\n\n
To draw a circle use the drawCircle(x, y, radius, color)<\/span> method. The (x,y) coordinates indicate the center of the circle. You should also pass the radius as an argument. For example:<\/p>\n\n\n\ndisplay.drawCircle(64, 32, 10, WHITE);<\/code><\/pre>\n\n\n\nIn the same way, to build a filled circle, use the fillCircle()<\/span> method with the same arguments:<\/p>\n\n\n\ndisplay.fillCircle(64, 32, 10, WHITE);<\/code><\/pre>\n\n\n\n
Draw a triangle<\/h3>\n\n\n\n
Use the the drawTriangle(x1, y1, x2, y2, x3, y3, color)<\/span> method to build a triangle. This method accepts as arguments the coordinates of each corner and the color. <\/p>\n\n\n\ndisplay.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);<\/code><\/pre>\n\n\n\nUse the fillTriangle()<\/span> method to draw a filled triangle. <\/p>\n\n\n\ndisplay.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);<\/code><\/pre>\n\n\n\n
Invert<\/h3>\n\n\n\n The library provides an additional method that you can use with shapes or text: the invertDisplay()<\/span> method. Pass true<\/span> as an argument to invert the colors of the screen or false<\/span> to get back to the original colors.<\/p>\n\n\n\nIf you call the following command after defining the triangle:<\/p>\n\n\n\n
display.invertDisplay(true);<\/code><\/pre>\n\n\n\nYou’ll get an inverted triangle as follows:<\/p>\n\n\n
\n
Code – Draw Shapes<\/h3>\n\n\n\n Upload the following sketch that implements each snippet of code we’ve covered previously and displays all those the shapes.<\/p>\n\n\n
\/*********\r\n Rui Santos\r\n Complete project details at https:\/\/RandomNerdTutorials.com\/raspberry-pi-pico-ssd1306-oled-arduino\/\r\n \r\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\r\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\r\n*********\/\r\n\r\n\/\/Default I2C pins for Raspberry Pi Pico\r\n\/\/ SDA --> GPIO 4\r\n\/\/ SCL --> GPIO 5\r\n\r\n#include <Wire.h>\r\n#include <Adafruit_GFX.h>\r\n#include <Adafruit_SSD1306.h>\r\n\r\n#define SCREEN_WIDTH 128\r\n#define SCREEN_HEIGHT 64\r\n\r\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\r\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);\r\n\r\nvoid setup() {\r\n Serial.begin(115200);\r\n\r\n if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {\r\n Serial.println(F("SSD1306 allocation failed"));\r\n for(;;);\r\n }\r\n delay(2000); \/\/ Pause for 2 seconds\r\n\r\n \/\/ Clear the buffer\r\n display.clearDisplay();\r\n\r\n \/\/ Draw a single pixel in white\r\n display.drawPixel(64, 32, WHITE);\r\n display.display();\r\n delay(3000);\r\n\r\n \/\/ Draw line\r\n display.clearDisplay();\r\n display.drawLine(0, 0, 127, 20, WHITE);\r\n display.display();\r\n delay(3000);\r\n \r\n \/\/ Draw rectangle\r\n display.clearDisplay();\r\n display.drawRect(30, 10, 50, 30, WHITE);\r\n display.display();\r\n delay(3000);\r\n \/\/ Fill rectangle\r\n display.fillRect(30, 10, 50, 30, WHITE);\r\n display.display();\r\n delay(3000);\r\n\r\n \/\/ Draw round rectangle\r\n display.clearDisplay();\r\n display.drawRoundRect(10, 10, 30, 50, 2, WHITE);\r\n display.display();\r\n delay(3000);\r\n \/\/ Fill round rectangle\r\n display.clearDisplay();\r\n display.fillRoundRect(10, 10, 30, 50, 2, WHITE);\r\n display.display();\r\n delay(3000);\r\n \r\n \/\/ Draw circle\r\n display.clearDisplay();\r\n display.drawCircle(64, 32, 10, WHITE);\r\n display.display();\r\n delay(3000);\r\n \/\/ Fill circle\r\n display.fillCircle(64, 32, 10, WHITE);\r\n display.display();\r\n delay(3000);\r\n \r\n \/\/ Draw triangle\r\n display.clearDisplay();\r\n display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);\r\n display.display();\r\n delay(3000);\r\n \/\/ Fill triangle\r\n display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);\r\n display.display();\r\n delay(3000);\r\n\r\n \/\/ Invert and restore display, pausing in-between\r\n display.invertDisplay(true);\r\n delay(3000);\r\n display.invertDisplay(false);\r\n delay(3000);\r\n}\r\n\r\nvoid loop() {\r\n \r\n}\r\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\nDisplay Bitmap Images in the OLED<\/h2>\n\n\n\n You can display 128×64 bitmap monocolor images on the OLED display.<\/p>\n\n\n\n
First, use an imaging program to resize a photo or picture and save it as monochrome bitmap<\/strong>. If you’re on a Windows PC, you can use Paint. The picture must be 128×64 pixels.<\/p>\n\n\n\n
![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/07\/Raspberry-Pi-Pico-OLED-Arduino-IDE.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"0.96](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/09\/ssd1306-oled-display-arduino.jpg?resize=750%2C412&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/07\/Raspberry-Pi-Pico-OLED-Fritzing-Diagram.png?resize=388%2C750&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-ssd1306-adafruit-library.png?resize=788%2C443&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/07\/install-oled-libraries-arduino-ide.jpg?resize=785%2C443&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-gfx-library-adafruit.png?resize=786%2C443&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/05\/Raspberry-Pi-Pico-Bottloader-mode.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/06\/Raspberry-Pi-Pico-COM-port-not-showing.png?resize=595%2C684&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/arduino-2-0-upload-button.png?resize=30%2C30&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"done](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/06\/success-uploading-code-Rpi-pico.png?resize=595%2C249&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/07\/Raspberry-Pi-Pico-Arduino-IDE-OLED.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/07\/Raspberry-Pi-Pico-OLED-Different-Font.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Pixel-Dot.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\"){kind=tracking}
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Line.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Filled.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical-Filled.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle-Filled.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Filled.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Background-filled.jpg?resize=750%2C630&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n