{"id":27773,"date":"2019-05-23T09:30:57","date_gmt":"2019-05-23T09:30:57","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=27773"},"modified":"2020-07-30T14:13:03","modified_gmt":"2020-07-30T14:13:03","slug":"esp8266-0-96-inch-oled-display-with-arduino-ide","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp8266-0-96-inch-oled-display-with-arduino-ide\/","title":{"rendered":"ESP8266 0.96 inch OLED Display with Arduino IDE"},"content":{"rendered":"\n<p>This guide shows how to use the 0.96 inch SSD1306 OLED display with ESP8266 using Arduino IDE. We&#8217;ll show you how to write text, set different fonts, draw shapes and display bitmaps images.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-Arduino-OLED-Display-Image.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 Arduino OLED Display Image circuit\" class=\"wp-image-85484\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-Arduino-OLED-Display-Image.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-Arduino-OLED-Display-Image.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-Arduino-OLED-Display-Image.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-Arduino-OLED-Display-Image.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n\n<p>We also have a dedicated guide that shows how to<a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-dht-temperature-and-humidity-oled-display\/\"> display temperature and humidity readings using DHT sensor and ESP8266<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introducing 0.96 inch OLED Display<\/h2>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/oled-display-128x64-0-96-inch\/\" target=\"_blank\">OLED display<\/a> that we\u2019ll use in this tutorial is the SSD1306 model: a monocolor, 0.96 inch display with 128\u00d764 pixels as shown in the following figure.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"412\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/09\/ssd1306-oled-display-arduino.jpg?resize=750%2C412&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"0.96 inch OLED display with ESP32 ESP8266 Arduino\" class=\"wp-image-80990\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/09\/ssd1306-oled-display-arduino.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2016\/09\/ssd1306-oled-display-arduino.jpg?resize=300%2C165&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n\n<p>The OLED display doesn\u2019t require backlight, which results in a very nice contrast in dark environments. Additionally, its pixels consume energy only when they are on, so the OLED display consumes less power when compared to other displays.<\/p>\n\n\n\n<p>The model we\u2019re using has four pins and communicates with any microcontroller using I2C communication protocol. There are models that come with an extra RESET pin or that communicate using SPI communication protocol. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">OLED Display SSD1306 Pin Wiring<\/h2>\n\n\n\n<p>Because the OLED display uses I2C communication protocol, wiring is very simple. You can use the following table as a reference.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Pin<\/strong><\/td><td><strong>ESP8266<\/strong><\/td><\/tr><tr><td>Vin<\/td><td><span class=\"rnthl rntcred\">3.3V<\/span><\/td><\/tr><tr><td>GND<\/td><td><span class=\"rnthl rntcblack\">GND<\/span><\/td><\/tr><tr><td>SCL<\/td><td><span class=\"rnthl rntclgray\">GPIO 5<\/span> (D1)<\/td><\/tr><tr><td>SDA<\/td><td><span class=\"rnthl rntcyellow\">GPIO 4<\/span> (D2)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Alternatively, you can follow the next schematic diagram to wire the ESP8266 to the OLED display.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266_oled_display_wiring.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"828\" height=\"534\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266_oled_display_wiring.png?resize=828%2C534&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 Arduino OLED Display Circuit Schematic\" class=\"wp-image-85163\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266_oled_display_wiring.png?w=828&amp;quality=100&amp;strip=all&amp;ssl=1 828w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266_oled_display_wiring.png?resize=300%2C193&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266_oled_display_wiring.png?resize=768%2C495&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 828px) 100vw, 828px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>In this example, we&#8217;re using I2C communication protocol. The most suitable pins for I2C communication in the ESP8266 are <span class=\"rnthl rntclgray\">GPIO 5<\/span> (SCL) and <span class=\"rnthl rntcyellow\">GPIO 4<\/span> (SDA).<\/p>\n\n\n\n<p>If you&#8217;re using an OLED display with SPI communication protocol, use the following GPIOs. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>GPIO 14: CLK<\/li><li>GPIO 12: MISO<\/li><li>GPIO 13: MOSI<\/li><li>GPIO 15: CS<\/li><\/ul>\n\n\n\n<p class=\"rntbox rntclgreen\">Read our <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-pinout-reference-gpios\/\">ESP8266 Pinout Reference Guide<\/a> to learn more about the ESP8266 GPIOs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installing SSD1306 OLED Library &#8211; ESP8266<\/h2>\n\n\n\n<p>There are several libraries available to control the OLED display with the ESP8266. In this tutorial we&#8217;ll use two Adafruit libraries: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/adafruit\/Adafruit_SSD1306\" target=\"_blank\">Adafruit_SSD1306 library<\/a> and <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/adafruit\/Adafruit-GFX-Library\" target=\"_blank\">Adafruit_GFX library<\/a>.<\/p>\n\n\n\n<p>Follow the next steps to install those libraries.<\/p>\n\n\n\n<p>1. Open your Arduino IDE and go to&nbsp;<strong>Sketch&nbsp;<\/strong>&gt;&nbsp;<strong>Include Library<\/strong>&nbsp;&gt;&nbsp;<strong>Manage Libraries<\/strong>. The Library Manager should open.<\/p>\n\n\n\n<p>2. Type &#8220;<strong>SSD1306<\/strong>&#8221; in the search box and install the SSD1306 library from Adafruit.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"443\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-ssd1306-adafruit-library.png?resize=788%2C443&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-85156\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-ssd1306-adafruit-library.png?w=788&amp;quality=100&amp;strip=all&amp;ssl=1 788w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-ssd1306-adafruit-library.png?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-ssd1306-adafruit-library.png?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><\/figure><\/div>\n\n\n\n<p>3. After installing the SSD1306 library from Adafruit, type &#8220;<strong>GFX<\/strong>&#8221; in the search box and install the library.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"443\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-gfx-library-adafruit.png?resize=786%2C443&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing GFX Library ESP8266 ESP32 Arduino\" class=\"wp-image-85157\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-gfx-library-adafruit.png?w=786&amp;quality=100&amp;strip=all&amp;ssl=1 786w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-gfx-library-adafruit.png?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/install-gfx-library-adafruit.png?resize=768%2C433&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/figure><\/div>\n\n\n\n<p>4. After installing the libraries, restart your Arduino IDE.<\/p>\n\n\n\n<p>We\u2019ll program the ESP8266 using Arduino IDE, so you must have the ESP8266 add-on installed in your Arduino IDE. If you haven\u2019t, follow the next tutorial first:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-esp8266-board-arduino-ide\/\">Install the ESP8266 Board in Arduino IDE<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Testing OLED Display with ESP8266<\/h2>\n\n\n\n<p>After wiring the OLED display to the ESP8266 and installing all required libraries, you can use one example from the library to see if everything is working properly.<\/p>\n\n\n\n<p>In your Arduino IDE, go to <strong>File<\/strong> &gt; <strong>Examples <\/strong>&gt; <strong>Adafruit SSD1306<\/strong> and select the example for the display you&#8217;re using.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"598\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_example_esp8266.png?resize=624%2C598&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Testing Adafruit SSD1306 Library example\" class=\"wp-image-85166\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_example_esp8266.png?w=624&amp;quality=100&amp;strip=all&amp;ssl=1 624w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_example_esp8266.png?resize=300%2C288&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure><\/div>\n\n\n\n<p>The following code should load:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Complete project details at https:\/\/randomnerdtutorials.com\n  \n  This is an example for our Monochrome OLEDs based on SSD1306 drivers. Pick one up today in the adafruit shop! ------&gt; http:\/\/www.adafruit.com\/category\/63_98\n  This example is for a 128x32 pixel display using I2C to communicate 3 pins are required to interface (two I2C and one reset).\n  Adafruit invests time and resources providing this open source code, please support Adafruit and open-source hardware by purchasing products from Adafruit!\n  Written by Limor Fried\/Ladyada for Adafruit Industries, with contributions from the open source community. BSD license, check license.txt for more information All text above, and the splash screen below must be included in any redistribution. \n*********\/\n\n#include &lt;SPI.h&gt;\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_GFX.h&gt;\n#include &lt;Adafruit_SSD1306.h&gt;\n\n#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\n#define SCREEN_HEIGHT 64 \/\/ OLED display height, in pixels\n\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\n#define OLED_RESET     -1 \/\/ Reset pin # (or -1 if sharing Arduino reset pin)\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, OLED_RESET);\n\n#define NUMFLAKES     10 \/\/ Number of snowflakes in the animation example\n\n#define LOGO_HEIGHT   16\n#define LOGO_WIDTH    16\nstatic const unsigned char PROGMEM logo_bmp[] =\n{ B00000000, B11000000,\n  B00000001, B11000000,\n  B00000001, B11000000,\n  B00000011, B11100000,\n  B11110011, B11100000,\n  B11111110, B11111000,\n  B01111110, B11111111,\n  B00110011, B10011111,\n  B00011111, B11111100,\n  B00001101, B01110000,\n  B00011011, B10100000,\n  B00111111, B11100000,\n  B00111111, B11110000,\n  B01111100, B11110000,\n  B01110000, B01110000,\n  B00000000, B00110000 };\n\nvoid setup() {\n  Serial.begin(115200);\n\n  \/\/ SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally\n  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { \n    Serial.println(F(&quot;SSD1306 allocation failed&quot;));\n    for(;;); \/\/ Don't proceed, loop forever\n  }\n\n  \/\/ Show initial display buffer contents on the screen --\n  \/\/ the library initializes this with an Adafruit splash screen.\n  display.display();\n  delay(2000); \/\/ Pause for 2 seconds\n\n  \/\/ Clear the buffer\n  display.clearDisplay();\n\n  \/\/ Draw a single pixel in white\n  display.drawPixel(10, 10, WHITE);\n\n  \/\/ Show the display buffer on the screen. You MUST call display() after\n  \/\/ drawing commands to make them visible on screen!\n  display.display();\n  delay(2000);\n  \/\/ display.display() is NOT necessary after every single drawing command,\n  \/\/ unless that's what you want...rather, you can batch up a bunch of\n  \/\/ drawing operations and then update the screen all at once by calling\n  \/\/ display.display(). These examples demonstrate both approaches...\n\n  testdrawline();      \/\/ Draw many lines\n\n  testdrawrect();      \/\/ Draw rectangles (outlines)\n\n  testfillrect();      \/\/ Draw rectangles (filled)\n\n  testdrawcircle();    \/\/ Draw circles (outlines)\n\n  testfillcircle();    \/\/ Draw circles (filled)\n\n  testdrawroundrect(); \/\/ Draw rounded rectangles (outlines)\n\n  testfillroundrect(); \/\/ Draw rounded rectangles (filled)\n\n  testdrawtriangle();  \/\/ Draw triangles (outlines)\n\n  testfilltriangle();  \/\/ Draw triangles (filled)\n\n  testdrawchar();      \/\/ Draw characters of the default font\n\n  testdrawstyles();    \/\/ Draw 'stylized' characters\n\n  testscrolltext();    \/\/ Draw scrolling text\n\n  testdrawbitmap();    \/\/ Draw a small bitmap image\n\n  \/\/ Invert and restore display, pausing in-between\n  display.invertDisplay(true);\n  delay(1000);\n  display.invertDisplay(false);\n  delay(1000);\n\n  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); \/\/ Animate bitmaps\n}\n\nvoid loop() {\n}\n\nvoid testdrawline() {\n  int16_t i;\n\n  display.clearDisplay(); \/\/ Clear display buffer\n\n  for(i=0; i&lt;display.width(); i+=4) {\n    display.drawLine(0, 0, i, display.height()-1, WHITE);\n    display.display(); \/\/ Update screen with each newly-drawn line\n    delay(1);\n  }\n  for(i=0; i&lt;display.height(); i+=4) {\n    display.drawLine(0, 0, display.width()-1, i, WHITE);\n    display.display();\n    delay(1);\n  }\n  delay(250);\n\n  display.clearDisplay();\n\n  for(i=0; i&lt;display.width(); i+=4) {\n    display.drawLine(0, display.height()-1, i, 0, WHITE);\n    display.display();\n    delay(1);\n  }\n  for(i=display.height()-1; i&gt;=0; i-=4) {\n    display.drawLine(0, display.height()-1, display.width()-1, i, WHITE);\n    display.display();\n    delay(1);\n  }\n  delay(250);\n\n  display.clearDisplay();\n\n  for(i=display.width()-1; i&gt;=0; i-=4) {\n    display.drawLine(display.width()-1, display.height()-1, i, 0, WHITE);\n    display.display();\n    delay(1);\n  }\n  for(i=display.height()-1; i&gt;=0; i-=4) {\n    display.drawLine(display.width()-1, display.height()-1, 0, i, WHITE);\n    display.display();\n    delay(1);\n  }\n  delay(250);\n\n  display.clearDisplay();\n\n  for(i=0; i&lt;display.height(); i+=4) {\n    display.drawLine(display.width()-1, 0, 0, i, WHITE);\n    display.display();\n    delay(1);\n  }\n  for(i=0; i&lt;display.width(); i+=4) {\n    display.drawLine(display.width()-1, 0, i, display.height()-1, WHITE);\n    display.display();\n    delay(1);\n  }\n\n  delay(2000); \/\/ Pause for 2 seconds\n}\n\nvoid testdrawrect(void) {\n  display.clearDisplay();\n\n  for(int16_t i=0; i&lt;display.height()\/2; i+=2) {\n    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, WHITE);\n    display.display(); \/\/ Update screen with each newly-drawn rectangle\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testfillrect(void) {\n  display.clearDisplay();\n\n  for(int16_t i=0; i&lt;display.height()\/2; i+=3) {\n    \/\/ The INVERSE color is used so rectangles alternate white\/black\n    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, INVERSE);\n    display.display(); \/\/ Update screen with each newly-drawn rectangle\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testdrawcircle(void) {\n  display.clearDisplay();\n\n  for(int16_t i=0; i&lt;max(display.width(),display.height())\/2; i+=2) {\n    display.drawCircle(display.width()\/2, display.height()\/2, i, WHITE);\n    display.display();\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testfillcircle(void) {\n  display.clearDisplay();\n\n  for(int16_t i=max(display.width(),display.height())\/2; i&gt;0; i-=3) {\n    \/\/ The INVERSE color is used so circles alternate white\/black\n    display.fillCircle(display.width() \/ 2, display.height() \/ 2, i, INVERSE);\n    display.display(); \/\/ Update screen with each newly-drawn circle\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testdrawroundrect(void) {\n  display.clearDisplay();\n\n  for(int16_t i=0; i&lt;display.height()\/2-2; i+=2) {\n    display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,\n      display.height()\/4, WHITE);\n    display.display();\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testfillroundrect(void) {\n  display.clearDisplay();\n\n  for(int16_t i=0; i&lt;display.height()\/2-2; i+=2) {\n    \/\/ The INVERSE color is used so round-rects alternate white\/black\n    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,\n      display.height()\/4, INVERSE);\n    display.display();\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testdrawtriangle(void) {\n  display.clearDisplay();\n\n  for(int16_t i=0; i&lt;max(display.width(),display.height())\/2; i+=5) {\n    display.drawTriangle(\n      display.width()\/2  , display.height()\/2-i,\n      display.width()\/2-i, display.height()\/2+i,\n      display.width()\/2+i, display.height()\/2+i, WHITE);\n    display.display();\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testfilltriangle(void) {\n  display.clearDisplay();\n\n  for(int16_t i=max(display.width(),display.height())\/2; i&gt;0; i-=5) {\n    \/\/ The INVERSE color is used so triangles alternate white\/black\n    display.fillTriangle(\n      display.width()\/2  , display.height()\/2-i,\n      display.width()\/2-i, display.height()\/2+i,\n      display.width()\/2+i, display.height()\/2+i, INVERSE);\n    display.display();\n    delay(1);\n  }\n\n  delay(2000);\n}\n\nvoid testdrawchar(void) {\n  display.clearDisplay();\n\n  display.setTextSize(1);      \/\/ Normal 1:1 pixel scale\n  display.setTextColor(WHITE); \/\/ Draw white text\n  display.setCursor(0, 0);     \/\/ Start at top-left corner\n  display.cp437(true);         \/\/ Use full 256 char 'Code Page 437' font\n\n  \/\/ Not all the characters will fit on the display. This is normal.\n  \/\/ Library will draw what it can and the rest will be clipped.\n  for(int16_t i=0; i&lt;256; i++) {\n    if(i == '\\n') display.write(' ');\n    else          display.write(i);\n  }\n\n  display.display();\n  delay(2000);\n}\n\nvoid testdrawstyles(void) {\n  display.clearDisplay();\n\n  display.setTextSize(1);             \/\/ Normal 1:1 pixel scale\n  display.setTextColor(WHITE);        \/\/ Draw white text\n  display.setCursor(0,0);             \/\/ Start at top-left corner\n  display.println(F(&quot;Hello, world!&quot;));\n\n  display.setTextColor(BLACK, WHITE); \/\/ Draw 'inverse' text\n  display.println(3.141592);\n\n  display.setTextSize(2);             \/\/ Draw 2X-scale text\n  display.setTextColor(WHITE);\n  display.print(F(&quot;0x&quot;)); display.println(0xDEADBEEF, HEX);\n\n  display.display();\n  delay(2000);\n}\n\nvoid testscrolltext(void) {\n  display.clearDisplay();\n\n  display.setTextSize(2); \/\/ Draw 2X-scale text\n  display.setTextColor(WHITE);\n  display.setCursor(10, 0);\n  display.println(F(&quot;scroll&quot;));\n  display.display();      \/\/ Show initial text\n  delay(100);\n\n  \/\/ Scroll in various directions, pausing in-between:\n  display.startscrollright(0x00, 0x0F);\n  delay(2000);\n  display.stopscroll();\n  delay(1000);\n  display.startscrollleft(0x00, 0x0F);\n  delay(2000);\n  display.stopscroll();\n  delay(1000);\n  display.startscrolldiagright(0x00, 0x07);\n  delay(2000);\n  display.startscrolldiagleft(0x00, 0x07);\n  delay(2000);\n  display.stopscroll();\n  delay(1000);\n}\n\nvoid testdrawbitmap(void) {\n  display.clearDisplay();\n\n  display.drawBitmap(\n    (display.width()  - LOGO_WIDTH ) \/ 2,\n    (display.height() - LOGO_HEIGHT) \/ 2,\n    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);\n  display.display();\n  delay(1000);\n}\n\n#define XPOS   0 \/\/ Indexes into the 'icons' array in function below\n#define YPOS   1\n#define DELTAY 2\n\nvoid testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {\n  int8_t f, icons[NUMFLAKES][3];\n\n  \/\/ Initialize 'snowflake' positions\n  for(f=0; f&lt; NUMFLAKES; f++) {\n    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());\n    icons[f][YPOS]   = -LOGO_HEIGHT;\n    icons[f][DELTAY] = random(1, 6);\n    Serial.print(F(&quot;x: &quot;));\n    Serial.print(icons[f][XPOS], DEC);\n    Serial.print(F(&quot; y: &quot;));\n    Serial.print(icons[f][YPOS], DEC);\n    Serial.print(F(&quot; dy: &quot;));\n    Serial.println(icons[f][DELTAY], DEC);\n  }\n\n  for(;;) { \/\/ Loop forever...\n    display.clearDisplay(); \/\/ Clear the display buffer\n\n    \/\/ Draw each snowflake:\n    for(f=0; f&lt; NUMFLAKES; f++) {\n      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, WHITE);\n    }\n\n    display.display(); \/\/ Show the display buffer on the screen\n    delay(200);        \/\/ Pause for 1\/10 second\n\n    \/\/ Then update coordinates of each flake...\n    for(f=0; f&lt; NUMFLAKES; f++) {\n      icons[f][YPOS] += icons[f][DELTAY];\n      \/\/ If snowflake is off the bottom of the screen...\n      if (icons[f][YPOS] &gt;= display.height()) {\n        \/\/ Reinitialize to a random position, just off the top\n        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());\n        icons[f][YPOS]   = -LOGO_HEIGHT;\n        icons[f][DELTAY] = random(1, 6);\n      }\n    }\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/oled_adafruit_demo.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>If your OLED doesn&#8217;t have a RESET pin, you should set the OLED_RESET variable to -1 as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define OLED_RESET -1 \/\/ Reset pin # (or -1 if sharing Arduino reset pin)<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"143\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_reset.png?resize=772%2C143&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-85278\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_reset.png?w=772&amp;quality=100&amp;strip=all&amp;ssl=1 772w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_reset.png?resize=300%2C56&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/oled_reset.png?resize=768%2C142&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" \/><\/figure>\n\n\n\n<p class=\"rntbox rntclgreen\"><strong>Note: <\/strong> if your OLED has a RESET pin, you should connect it to a different GPIO than GPIO 4, because that pin is being used for I2C communication in the EPS8266. <\/p>\n\n\n\n<p>Upload the code to your ESP8266 board. Don&#8217;t forget to select the right board and COM port in the <strong>Tools <\/strong>menu.<\/p>\n\n\n\n<p>You should get a series of different animations in the OLED as shown in the following short video.<\/p>\n\n\n<div style=\"text-align:center\"><iframe src=\"https:\/\/player.vimeo.com\/video\/337530217?color=ff9933&title=1&byline=0&portrait=0\" width=\"720\" height=\"405\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/div><\/br>\n\n\n\n<p>If your OLED display is not showing anything:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Check that the OLED display is properly wired to the ESP8266<\/li><li>Double-check the OLED display I2C address: with the OLED connected to the ESP8266, <a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/master\/Projects\/LCD_I2C\/I2C_Scanner.ino\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">upload this code<\/a> and check the I2C address in the Serial Monitor<\/li><\/ul>\n\n\n\n<p>You should change the OLED address in the following line, if necessary. In our case, the address is 0x3C.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Write Text &#8211; OLED Display<\/h2>\n\n\n\n<p>The Adafruit library for the OLED display comes with several functions to write text. In this section, you&#8217;ll learn how to write and scroll text using the library functions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&#8220;Hello, world!&#8221; OLED Display<\/h3>\n\n\n\n<p>The following sketch displays <span class=\"rnthl rntliteral\">Hello, world!<\/span> message in the OLED display.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at https:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_GFX.h&gt;\n#include &lt;Adafruit_SSD1306.h&gt;\n\n#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\n#define SCREEN_HEIGHT 64 \/\/ OLED display height, in pixels\n\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);\n\nvoid setup() {\n  Serial.begin(115200);\n\n  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { \/\/ Address 0x3D for 128x64\n    Serial.println(F(&quot;SSD1306 allocation failed&quot;));\n    for(;;);\n  }\n  delay(2000);\n  display.clearDisplay();\n\n  display.setTextSize(1);\n  display.setTextColor(WHITE);\n  display.setCursor(0, 10);\n  \/\/ Display static text\n  display.println(&quot;Hello, world!&quot;);\n  display.display(); \n}\n\nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/oled_hello_world.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>After uploading the code, this is what you&#8217;ll get in your OLED:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-font.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display font type\" class=\"wp-image-85473\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-font.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-font.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>Let&#8217;s take a quick look on how the code works.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Importing libraries<\/h4>\n\n\n\n<p>First, you need to import the necessary libraries. The <span class=\"rnthl rntliteral\">Wire<\/span> library to use I2C and the Adafruit libraries to write to the display: <span class=\"rnthl rntliteral\">Adafruit_GFX<\/span> and <span class=\"rnthl rntliteral\">Adafruit_SSD1306<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;Wire.h>\n#include &lt;Adafruit_GFX.h>\n#include &lt;Adafruit_SSD1306.h><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Initialize the OLED display<\/h4>\n\n\n\n<p>Then, you define your OLED width and height. In this example, we&#8217;re using a 128&#215;64 OLED display. If you&#8217;re using other sizes, you can change that in the <span class=\"rnthl rntliteral\">SCREEN_WIDTH<\/span>, and <span class=\"rnthl rntliteral\">SCREEN_HEIGHT<\/span> variables.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\n#define SCREEN_HEIGHT 64 \/\/ OLED display height, in pixels<\/code><\/pre>\n\n\n\n<p>Then, initialize a display object with the width and height defined earlier with I2C communication protocol (<span class=\"rnthl rntliteral\">&amp;Wire<\/span>).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);<\/code><\/pre>\n\n\n\n<p>The (-1) parameter means that your OLED display doesn&#8217;t have a RESET pin. If your OLED display does have a RESET pin, it should be connected to a GPIO. In that case, you should pass the GPIO number as a parameter. <\/p>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup()<\/span>, initialize the Serial Monitor at a baud raute of 115200 for debugging purposes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.begin(115200);<\/code><\/pre>\n\n\n\n<p>Initialize the OLED display with the <span class=\"rnthl rntliteral\">begin()<\/span> method as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { \n  Serial.println(\"SSD1306 allocation failed\");\n  for(;;); \/\/ Don't proceed, loop forever\n}<\/code><\/pre>\n\n\n\n<p>This snippet also prints a message on the Serial Monitor, in case we&#8217;re not able to connect to the display.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.println(\"SSD1306 allocation failed\");<\/code><\/pre>\n\n\n\n<p>In case you&#8217;re using a different OLED display, you may need to change the OLED address. In our case, the address is <span class=\"rnthl rntliteral\">0x3C<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { <\/code><\/pre>\n\n\n\n<p class=\"rntbox rntclblue\">If this address doesn&#8217;t work, you can run an I2C scanner sketch to find your OLED address. You can <a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/master\/Projects\/LCD_I2C\/I2C_Scanner.ino\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">find the I2C scanner sketch here<\/a>.<\/p>\n\n\n\n<p>After initializing the display, add a two second delay, so that the OLED has enough time to initialize before writing text:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>delay(2000);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Clear display, set font size, color and write text<\/h4>\n\n\n\n<p>After initializing the display, clear the display buffer with the <span class=\"rnthl rntliteral\">clearDisplay()<\/span> method:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.clearDisplay();<\/code><\/pre>\n\n\n\n<p>Before writing text, you need to set the text size, color and where the text will be displayed in the OLED.<\/p>\n\n\n\n<p>Set the font size using the <span class=\"rnthl rntliteral\">setTextSize()<\/span> method:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.setTextSize(1);             <\/code><\/pre>\n\n\n\n<p>Set the font color with the <span class=\"rnthl rntliteral\">setTextColor()<\/span> method:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.setTextColor(WHITE);        <\/code><\/pre>\n\n\n\n<p><span class=\"rnthl rntliteral\">WHITE<\/span> sets white font and black background. <\/p>\n\n\n\n<p>Define the position where the text starts using the <span class=\"rnthl rntliteral\">setCursor(x,y)<\/span> method. In this case, we&#8217;re setting the text to start at the (0,10) coordinates.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.setCursor(0,10);             <\/code><\/pre>\n\n\n\n<p>Finally, you can send the text to the display using the <span class=\"rnthl rntliteral\">println()<\/span> method, as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.println(\"Hello, world!\");<\/code><\/pre>\n\n\n\n<p>Then, you need to call the <span class=\"rnthl rntliteral\">display()<\/span> method to actually display the text on the screen.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.display();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Scrolling Text<\/h3>\n\n\n\n<p>The Adafruit OLED library provides useful methods to easily scroll text.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span class=\"rnthl rntliteral\">startscrollright(0x00, 0x0F)<\/span>: scroll text from left to right <\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><span class=\"rnthl rntliteral\">startscrollleft(0x00, 0x0F)<\/span>: scroll text from right to left<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><span class=\"rnthl rntliteral\">startscrolldiagright(0x00, 0x07)<\/span>: scroll text from left bottom corner to right upper corner<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><span class=\"rnthl rntliteral\">startscrolldiagleft(0x00, 0x07)<\/span>: scroll text from right bottom corner to left upper corner <\/li><\/ul>\n\n\n\n<p>The following sketch implements those methods.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at https:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_GFX.h&gt;\n#include &lt;Adafruit_SSD1306.h&gt;\n\n#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\n#define SCREEN_HEIGHT 64 \/\/ OLED display height, in pixels\n\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);\n\nvoid setup() {\n  Serial.begin(115200);\n\n  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { \/\/ Address 0x3D for 128x64\n    Serial.println(F(&quot;SSD1306 allocation failed&quot;));\n    for(;;);\n  }\n  delay(2000);\n  display.clearDisplay();\n\n  display.setTextSize(1);\n  display.setTextColor(WHITE);\n  display.setCursor(0, 0);\n  \/\/ Display static text\n  display.println(&quot;Scrolling Hello&quot;);\n  display.display(); \n  delay(100);\n \n}\n\nvoid loop() {\n  \/\/ Scroll in various directions, pausing in-between:\n  display.startscrollright(0x00, 0x0F);\n  delay(2000);\n  display.stopscroll();\n  delay(1000);\n  display.startscrollleft(0x00, 0x0F);\n  delay(2000);\n  display.stopscroll();\n  delay(1000);\n  display.startscrolldiagright(0x00, 0x07);\n  delay(2000);\n  display.startscrolldiagleft(0x00, 0x07);\n  delay(2000);\n  display.stopscroll();\n  delay(1000);\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/oled_scroll_text.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>The text scrolls as shown in the following short video.<\/p>\n\n\n<div style=\"text-align:center\"><iframe src=\"https:\/\/player.vimeo.com\/video\/337530079?color=ff9933&title=1&byline=0&portrait=0\" width=\"720\" height=\"405\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/div><\/br>\n\n\n\n<h2 class=\"wp-block-heading\">Using Other Fonts &#8211; OLED Display<\/h2>\n\n\n\n<p>The Adafruit GFX library allows us to use some alternate fonts besides the built-in fonts. It allows you to chose between Serif, Sans, and Mono. Each font is available in bold, italic and in different sizes. <\/p>\n\n\n\n<p>The sizes are set by the actual font. So, the <span class=\"rnthl rntliteral\">setTextSize()<\/span> method doesn&#8217;t work with these fonts. The fonts are available in 9, 12, 18 and 24 point sizes and also contain 7-bit characters (ASCII codes) (described as 7b in the font name). <\/p>\n\n\n\n<p>You can choose from the next selection of fonts:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>FreeMono12pt7b.h\t\tFreeSansBoldOblique12pt7b.h\nFreeMono18pt7b.h\t\tFreeSansBoldOblique18pt7b.h\nFreeMono24pt7b.h\t\tFreeSansBoldOblique24pt7b.h\nFreeMono9pt7b.h\t\t\tFreeSansBoldOblique9pt7b.h\nFreeMonoBold12pt7b.h\t\tFreeSansOblique12pt7b.h\nFreeMonoBold18pt7b.h\t\tFreeSansOblique18pt7b.h\nFreeMonoBold24pt7b.h\t\tFreeSansOblique24pt7b.h\nFreeMonoBold9pt7b.h\t\tFreeSansOblique9pt7b.h\nFreeMonoBoldOblique12pt7b.h\tFreeSerif12pt7b.h\nFreeMonoBoldOblique18pt7b.h\tFreeSerif18pt7b.h\nFreeMonoBoldOblique24pt7b.h\tFreeSerif24pt7b.h\nFreeMonoBoldOblique9pt7b.h\tFreeSerif9pt7b.h\nFreeMonoOblique12pt7b.h\t\tFreeSerifBold12pt7b.h\nFreeMonoOblique18pt7b.h\t\tFreeSerifBold18pt7b.h\nFreeMonoOblique24pt7b.h\t\tFreeSerifBold24pt7b.h\nFreeMonoOblique9pt7b.h\t\tFreeSerifBold9pt7b.h\nFreeSans12pt7b.h\t\tFreeSerifBoldItalic12pt7b.h\nFreeSans18pt7b.h\t\tFreeSerifBoldItalic18pt7b.h\nFreeSans24pt7b.h\t\tFreeSerifBoldItalic24pt7b.h\nFreeSans9pt7b.h\t\t\tFreeSerifBoldItalic9pt7b.h\nFreeSansBold12pt7b.h\t\tFreeSerifItalic12pt7b.h\nFreeSansBold18pt7b.h\t\tFreeSerifItalic18pt7b.h\nFreeSansBold24pt7b.h\t\tFreeSerifItalic24pt7b.h\nFreeSansBold9pt7b.h\t\tFreeSerifItalic9pt7b.h<\/code><\/pre>\n\n\n\n<p>The fonts that work better with the OLED display are the 9 and 12 points size.<\/p>\n\n\n\n<p>To use one of those fonts, first you need to include it in your sketch, for example:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;Fonts\/FreeSerif12pt7b.h><\/code><\/pre>\n\n\n\n<p>Next, you just need to use the <span class=\"rnthl rntliteral\">setFont()<\/span> method and pass as argument, the specified font:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.setFont(&amp;FreeSerif12pt7b);<\/code><\/pre>\n\n\n\n<p>After specifying the font, all methods to write text will use that font. To get back to use the original font, you just need to call the <span class=\"rnthl rntliteral\">setFont()<\/span> method with no arguments:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.setFont();<\/code><\/pre>\n\n\n\n<p>Upload the next sketch to your board:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at https:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_GFX.h&gt;\n#include &lt;Adafruit_SSD1306.h&gt;\n#include &lt;Fonts\/FreeSerif9pt7b.h&gt;\n\n#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\n#define SCREEN_HEIGHT 64 \/\/ OLED display height, in pixels\n\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);\n\nvoid setup() {\n  Serial.begin(115200);\n\n  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { \n    Serial.println(&quot;SSD1306 allocation failed&quot;);\n    for(;;);\n  }\n  delay(2000);\n\n  display.setFont(&amp;FreeSerif9pt7b);\n  display.clearDisplay();\n  display.setTextSize(1);             \n  display.setTextColor(WHITE);        \n  display.setCursor(0,20);             \n  display.println(&quot;Hello, world!&quot;);\n  display.display();\n  delay(2000); \n}\nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/oled_set_different_fonts.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Now, your display prints the &#8220;Hello, world!&#8221; message in FreeSerif font. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-font-type.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display font type\" class=\"wp-image-85474\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-font-type.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-font-type.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Draw Shapes in the OLED Display<\/h2>\n\n\n\n<p>The Adafruit OLED library provides useful methods to draw pixels, lines and shapes. Let&#8217;s take a quick look at those methods.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Draw a pixel<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Pixel-Dot.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Pixel Dot\" class=\"wp-image-85477\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Pixel-Dot.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Pixel-Dot.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>To draw a pixel in the OLED display, you can use the <span class=\"rnthl rntliteral\">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\n<pre class=\"wp-block-code language-c\"><code>display.drawPixel(64, 32, WHITE);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Draw a line<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Line.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Line\" class=\"wp-image-85476\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Line.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Line.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>Use the <span class=\"rnthl rntliteral\">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 indicates where the line ends. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.drawLine(0, 0, 127, 20, WHITE);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Draw a rectangle<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Rectangle\" class=\"wp-image-85478\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">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\n<pre class=\"wp-block-code language-c\"><code>display.drawRect(10, 10, 50, 30, WHITE);<\/code><\/pre>\n\n\n\n<p>You can use the <span class=\"rnthl rntliteral\">fillRect(x, y, width, height, color)<\/span> to draw a filled rectangle. This method accepts the same arguments as <span class=\"rnthl rntliteral\">drawRect()<\/span>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Filled.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Filled\" class=\"wp-image-85472\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Filled.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Filled.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>The library also provides methods to displays rectangles with round corners: <span class=\"rnthl rntliteral\">drawRoundRect()<\/span> and <span class=\"rnthl rntliteral\">fillRoundRect()<\/span>. These methods accept the same arguments as previous methods plus the radius of the corner. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.drawRoundRect(10, 10, 30, 50, 2, WHITE);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Rectangle Vertical\" class=\"wp-image-85479\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>Or a filled round rectangle:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.fillRoundRect(10, 10, 30, 50, 2, WHITE);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical-Filled.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Rectangle Vertical Filled\" class=\"wp-image-85480\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical-Filled.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Rectangle-Vertical-Filled.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Draw a circle<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Circle\" class=\"wp-image-85470\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>To draw a circle use the <span class=\"rnthl rntliteral\">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\n<pre class=\"wp-block-code language-c\"><code>display.drawCircle(64, 32, 10, WHITE);<\/code><\/pre>\n\n\n\n<p>In the same way, to build a filled circle, use the <span class=\"rnthl rntliteral\">fillCircle()<\/span> method with the same arguments:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.fillCircle(64, 32, 10, WHITE);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle-Filled.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Circle Filled\" class=\"wp-image-85471\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle-Filled.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Circle-Filled.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Draw a triangle<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Triangle\" class=\"wp-image-85481\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<p>Use the the <span class=\"rnthl rntliteral\">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\n<pre class=\"wp-block-code language-c\"><code>display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);<\/code><\/pre>\n\n\n\n<p>Use the <span class=\"rnthl rntliteral\">fillTriangle()<\/span> method to draw a filled triangle. <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Filled.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Triangle Filled\" class=\"wp-image-85483\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Filled.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Filled.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Invert<\/h3>\n\n\n\n<p>The library provides an additional method that you can use with shapes or text: the <span class=\"rnthl rntliteral\">invertDisplay()<\/span> method. Pass <span class=\"rnthl rntliteral\">true<\/span> as argument to invert the colors of the screen or <span class=\"rnthl rntliteral\">false<\/span> to get back to the original colors.<\/p>\n\n\n\n<p>If you call the following command after defining the triangle:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>display.invertDisplay(true);<\/code><\/pre>\n\n\n\n<p>You&#8217;ll get an inverted triangle as follows:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Background-filled.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Triangle Background filled\" class=\"wp-image-85482\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Background-filled.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Triangle-Background-filled.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Code &#8211; Draw Shapes<\/h3>\n\n\n\n<p>Upload the following sketch that implements each snippet of code we&#8217;ve covered previously and goes through all the shapes.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at https:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_GFX.h&gt;\n#include &lt;Adafruit_SSD1306.h&gt;\n\n#define SCREEN_WIDTH 128\n#define SCREEN_HEIGHT 64\n\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);\n\nvoid setup() {\n  Serial.begin(115200);\n\n  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {\n    Serial.println(F(&quot;SSD1306 allocation failed&quot;));\n    for(;;);\n  }\n  delay(2000); \/\/ Pause for 2 seconds\n\n  \/\/ Clear the buffer\n  display.clearDisplay();\n\n  \/\/ Draw a single pixel in white\n  display.drawPixel(64, 32, WHITE);\n  display.display();\n  delay(3000);\n\n  \/\/ Draw line\n  display.clearDisplay();\n  display.drawLine(0, 0, 127, 20, WHITE);\n  display.display();\n  delay(3000);\n  \n  \/\/ Draw rectangle\n  display.clearDisplay();\n  display.drawRect(30, 10, 50, 30, WHITE);\n  display.display();\n  delay(3000);\n  \/\/ Fill rectangle\n  display.fillRect(30, 10, 50, 30, WHITE);\n  display.display();\n  delay(3000);\n\n  \/\/ Draw round rectangle\n  display.clearDisplay();\n  display.drawRoundRect(10, 10, 30, 50, 2, WHITE);\n  display.display();\n  delay(3000);\n  \/\/ Fill round rectangle\n  display.clearDisplay();\n  display.fillRoundRect(10, 10, 30, 50, 2, WHITE);\n  display.display();\n  delay(3000);\n  \n  \/\/ Draw circle\n  display.clearDisplay();\n  display.drawCircle(64, 32, 10, WHITE);\n  display.display();\n  delay(3000);\n  \/\/ Fill circle\n  display.fillCircle(64, 32, 10, WHITE);\n  display.display();\n  delay(3000);\n  \n  \/\/ Draw triangle\n  display.clearDisplay();\n  display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);\n  display.display();\n  delay(3000);\n  \/\/ Fill triangle\n  display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);\n  display.display();\n  delay(3000);\n\n  \/\/ Invert and restore display, pausing in-between\n  display.invertDisplay(true);\n  delay(3000);\n  display.invertDisplay(false);\n  delay(3000);\n}\n\nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/oled_draw_shapes.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Display Bitmap Images in the OLED<\/h2>\n\n\n\n<p>You can display 128&#215;64 bitmap monocolor images on the OLED display.<\/p>\n\n\n\n<p>First, use an imaging program to resize a photo or picture and save it as monochrome bitmap. If you&#8217;re on a Windows PC, you can use Paint.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"521\" height=\"394\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/sara-paint.png?resize=521%2C394&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Display Bitmap Images OLED convert image\" class=\"wp-image-85291\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/sara-paint.png?w=521&amp;quality=100&amp;strip=all&amp;ssl=1 521w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/sara-paint.png?resize=300%2C227&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 521px) 100vw, 521px\" \/><\/figure><\/div>\n\n\n\n<p>Then, use a Image to C Array converter to convert the image into an array. I&#8217;ve used <a href=\"https:\/\/sourceforge.net\/projects\/lcd-image-converter\/files\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">LCD Image Converter<\/a>.<\/p>\n\n\n\n<p>Run the program and start with a new image. Go to <strong>Image<\/strong> &gt; <strong>Import<\/strong> and select the bitmap image you&#8217;ve created earlier.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"397\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/Image-converter-new-image.png?resize=569%2C397&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Display Bitmap Images OLED\" class=\"wp-image-85282\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/Image-converter-new-image.png?w=569&amp;quality=100&amp;strip=all&amp;ssl=1 569w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/Image-converter-new-image.png?resize=300%2C209&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/figure><\/div>\n\n\n\n<p>Go to <strong>Options<\/strong> &gt; <strong>Conversion<\/strong> and in the <strong>Prepare<\/strong> tab, select the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Type:<\/strong> Monochrome, Threshold Dither <\/li><li><strong>Main Scan Direction:<\/strong> Top to Bottom<\/li><li><strong>Line Scan Direction:<\/strong> Forward<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"430\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/image-converter-options-f.png?resize=650%2C430&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Display Bitmap Images OLED convert image\" class=\"wp-image-85285\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/image-converter-options-f.png?w=650&amp;quality=100&amp;strip=all&amp;ssl=1 650w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/image-converter-options-f.png?resize=300%2C198&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure><\/div>\n\n\n\n<p>Go to the Image tab and select the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Split to rows<\/li><li><strong>Block size:<\/strong> 8 bit<\/li><li><strong>Byte order:<\/strong> Little-Endian<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"430\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/options-image-lcd-converter.png?resize=567%2C430&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Display Bitmap Images OLED convert image export\" class=\"wp-image-85286\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/options-image-lcd-converter.png?w=567&amp;quality=100&amp;strip=all&amp;ssl=1 567w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/options-image-lcd-converter.png?resize=300%2C228&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/figure><\/div>\n\n\n\n<p>Then, click <strong>OK<\/strong>. Finally, in the main menu, go to <strong>File<\/strong> &gt; <strong>Convert<\/strong>. A new file with <em>.c<\/em> extension should be saved. That file contains the C array for the image. Open that file with a text editor, and copy the array.<\/p>\n\n\n\n<p>In our case, this is the array that we get:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">static const uint8_t image_data_Saraarray[1024] = {\n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x0a, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x14, 0x9e, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x36, 0x3f, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x6d, 0xff, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xfb, 0xff, 0x80, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x03, 0xd7, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0xef, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xdf, 0xff, 0x90, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xbf, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1d, 0x7f, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x01, 0x1b, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x02, 0xa7, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x03, 0xff, 0xc0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0xff, 0x80, 0x00, 0x0b, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0f, 0x07, 0xff, 0xf8, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0e, 0x01, 0xff, 0xc0, 0x38, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x1c, 0x46, 0xff, 0xb1, 0x18, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0x97, 0xff, 0xc0, 0x7a, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xbf, 0xff, 0xff, 0xff, 0xfe, 0x81, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xbf, 0xff, 0xff, 0xff, 0xfc, 0x81, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xff, 0xff, 0xfe, 0xff, 0xfd, 0x83, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xbf, 0xff, 0xfe, 0xff, 0xfd, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xfb, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x3f, 0xff, 0xdc, 0xff, 0xfa, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xd8, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xd0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x90, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x02, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xf5, 0xff, 0xd7, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x5f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xa0, 0x00, 0x0f, 0xfb, 0xff, 0xff, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0xfd, 0xff, 0xdf, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xbf, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x87, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x43, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x01, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x73, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfe, 0xe0, 0x00, 0x00, 0xff, 0xff, 0xff, 0x80, 0x00, 0x7b, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x7f, 0xff, 0xfe, 0x00, 0x00, 0x33, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x3f, 0xff, 0xf8, 0x00, 0x00, 0x27, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x0f, 0xff, 0xf0, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x00, 0x67, 0xff, 0xe0, 0x00, 0x00, 0x1b, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfd, 0x40, 0x00, 0x00, 0xf3, 0xff, 0xc4, 0x00, 0x00, 0x0b, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfe, 0x80, 0x00, 0x00, 0xfc, 0xff, 0x8c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x7f, 0x3c, 0x3c, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x3f, 0xc0, 0x7c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xfc, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff\n};\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/bitmap_array.c\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Copy your array to the sketch. Then, to display the array, use the <span class=\"rnthl rntliteral\">drawBitmap()<\/span> method that accepts the following arguments (x, y, image array, image width, image height, rotation). The (x, y) coordinates define where the image starts to be displayed.<\/p>\n\n\n\n<p>Copy the code below to display your bitmap image in the OLED.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at https:\/\/randomnerdtutorials.com  \n*********\/\n\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_GFX.h&gt;\n#include &lt;Adafruit_SSD1306.h&gt;\n\n#define SCREEN_WIDTH 128\n#define SCREEN_HEIGHT 64\n\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);\n\nstatic const uint8_t image_data_Saraarray[1024] = {\n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x0a, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x14, 0x9e, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x36, 0x3f, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x6d, 0xff, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xfb, 0xff, 0x80, 0x1f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0x03, 0xd7, 0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x07, 0xef, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xdf, 0xff, 0x90, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x0f, 0xbf, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x1d, 0x7f, 0xff, 0xd0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x01, 0x1b, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x02, 0xa7, 0xff, 0xff, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x03, 0xff, 0xc0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0xff, 0x80, 0x00, 0x0b, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x07, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0f, 0x07, 0xff, 0xf8, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0e, 0x01, 0xff, 0xc0, 0x38, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x1c, 0x46, 0xff, 0xb1, 0x18, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0x97, 0xff, 0xc0, 0x7a, 0x07, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0x3f, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xbf, 0xff, 0xff, 0xff, 0xfe, 0x81, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xbf, 0xff, 0xff, 0xff, 0xfc, 0x81, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xff, 0xff, 0xfe, 0xff, 0xfd, 0x83, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xbf, 0xff, 0xfe, 0xff, 0xfd, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xfb, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x3f, 0xff, 0xdc, 0xff, 0xfa, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xd8, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xd0, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x90, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xf8, 0x02, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xf5, 0xff, 0xd7, 0xf8, 0x01, 0xff, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xb0, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x5f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xa0, 0x00, 0x0f, 0xfb, 0xff, 0xff, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x0f, 0xfd, 0xff, 0xdf, 0xf0, 0x00, 0x3f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xbf, 0xf0, 0x00, 0x0f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x87, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x43, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x01, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x73, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfe, 0xe0, 0x00, 0x00, 0xff, 0xff, 0xff, 0x80, 0x00, 0x7b, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x7f, 0xff, 0xfe, 0x00, 0x00, 0x33, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfd, 0xe0, 0x00, 0x00, 0x3f, 0xff, 0xf8, 0x00, 0x00, 0x27, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x0f, 0xff, 0xf0, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x60, 0x00, 0x00, 0x67, 0xff, 0xe0, 0x00, 0x00, 0x1b, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfd, 0x40, 0x00, 0x00, 0xf3, 0xff, 0xc4, 0x00, 0x00, 0x0b, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfe, 0x80, 0x00, 0x00, 0xfc, 0xff, 0x8c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x00, 0x7f, 0x3c, 0x3c, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x3f, 0xc0, 0x7c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, \n    0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xfc, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff\n};\n \nvoid setup() {\n  Serial.begin(115200);\n \n  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {\n    Serial.println(F(&quot;SSD1306 allocation failed&quot;));\n    for(;;);\n  }\n  delay(2000); \/\/ Pause for 2 seconds\n \n  \/\/ Clear the buffer.\n  display.clearDisplay();\n  \n  \/\/ Draw bitmap on the screen\n  display.drawBitmap(0, 0, image_data_Saraarray, 128, 64, 1);\n  display.display();\n}\n \nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/OLED\/oled_display_bitmap.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>After uploading the code, this is what we get on the display.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Image.jpg?resize=375%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Arduino OLED Display Image\" class=\"wp-image-85475\" width=\"375\" height=\"315\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Image.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP32-ESP8266-Arduino-OLED-Display-Image.jpg?resize=300%2C252&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<p>If you get the &#8220;<strong>SSD1306 allocation failed<\/strong>&#8221; error or if the OLED is not displaying anything in the screen, it can be one of the following issues:<\/p>\n\n\n\n<p><strong>Wrong I2C address<\/strong><\/p>\n\n\n\n<p>The I2C address for the OLED display we are using is 0x3C. However, yours may be different. So, make sure you check your display I2C address using an <a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/master\/Projects\/LCD_I2C\/I2C_Scanner.ino\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">I2C scanner sketch<\/a>.<\/p>\n\n\n\n<p><strong>SDA and SCL not connected properly<\/strong><\/p>\n\n\n\n<p>Please make sure that you have the SDA and SCL pins of the OLED display wired correctly. In case of the ESP8266, connect SDA pin to <span class=\"rnthl rntcyellow\">GPIO 4<\/span> (D2) and SCL pin to <span class=\"rnthl rntclgray\">GPIO 5<\/span> (D1).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>We hope you&#8217;ve found this guide about the OLED display with EPS8266 useful. Now, you can integrate the OLED display in your own projects. Proceed to the next tutorial to learn how to display sensor readings on the OLED display:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-dht-temperature-and-humidity-oled-display\/\">ESP8266 &#8211; Display Sensor Readings OLED Display<\/a><\/li><\/ul>\n\n\n\n<p>If you like ESP8266, you&#8217;ll certainly like our ESP8266 resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\"><strong>Home Automation using ESP8266 (eBook)<\/strong><\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/micropython-programming-with-esp32-and-esp8266\/\">MicroPython Programming with ESP8266 (eBook)<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\">30+ ESP8266 Projects<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-pinout-reference-gpios\/\">ESP8266 Pinout Reference: Which GPIO pins should you use?<\/a><\/li><\/ul>\n\n\n\n<p>Some of our most popular projects with ESP8266:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/randomnerdtutorials.com\/hack-pir-motion-sensor-esp8266-hlk-pm03\/\">Hack a PIR Motion Sensor with an ESP8266<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-multisensor-shield\/\">Build a Multisensor Shield for ESP8266<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server-with-arduino-ide\/\">ESP8266 Web Server with Arduino IDE<\/a><\/li><li><a href=\"https:\/\/randomnerdtutorials.com\/low-power-weather-station-datalogger-using-esp8266-bme280-micropython\/\">Low Power Weather Station Datalogger <\/a><\/li><\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide shows how to use the 0.96 inch SSD1306 OLED display with ESP8266 using Arduino IDE. We&#8217;ll show you how to write text, set different fonts, draw shapes and &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP8266 0.96 inch OLED Display with Arduino IDE\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-0-96-inch-oled-display-with-arduino-ide\/#more-27773\" aria-label=\"Read more about ESP8266 0.96 inch OLED Display with Arduino IDE\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":85484,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[265,214,246,300,225,264,218],"tags":[],"class_list":["post-27773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266-project","category-esp8266","category-esp8266-arduino-ide","category-0-esp8266","category-home-automation","category-project","category-web-server"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/05\/ESP8266-Arduino-OLED-Display-Image.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/27773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=27773"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/27773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/85484"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=27773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=27773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=27773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}