Arduino OLED Display Guide: From Setup to Custom Graphics

Grove - OLED Display 0.96"

10 jumper wires 150mm male

Arduino Uno Rev3

Breadboard - 400 contacts

Arduino IDE

<html><body>In this project, we will explore the different ways we can use an OLED display with Arduino. There are three main things we are going to do <ol><li>Put text on the screen and scroll the text </li><li>Put shapes on the screen </li><li>Put logos or images on the screen </li></ol>You will learn how to connect the OLED display to the Arduino, as well as how to code the Arduino to use the display, and more. At the end, you will feel confident using an OLED display with Arduino. This project is perfect for beginners and people who do not know how to use an OLED display or how it works. <h3>In this video, I go through everything step by step</h3><figure><iframe src="https://youtu.be/gnD1pEJ7oT8"></iframe></figure> <h3>Connecting OLED display to Arduino</h3>There are 4 pins on the OLED display. The first pin is GND. This pin provides ground to the display. The VCC pin provides power to the display; it can receive 3.3V or 5V. The SCL pin sends the clock signal (timing) to keep communication in sync. The SDA pin sends data from the Arduino to the display. This is how text, shapes, and other content are transferred. The following shows how to connect these pins to the Arduino. <h3>Arduino OLED display</h3><ol><li>GND --------- GND </li><li>5V ------------ VCC </li><li>A5 ------------ SCL </li><li>A4 ------------ SDA </li></ol><ol><figure><img src="https://projects.arduinocontent.cc/573a0c35-7afc-4005-be00-7c096c429f67.png"/><figcaption></figcaption></figure></ol><h3>Install libraries for OLED display</h3>Now we need to install two libraries to use the OLED display. <ol><li>Adafruit SSD1306 </li><li>Adafruit GFX </li></ol>You can install these libraries using the Library Manager. When you search for them, they will have the same names as listed above, and they are both made by Adafruit. <h3>Putting text on the screen code</h3>This code will put the text "Hello all" on the OLED display. <pre>#include &lt;Wire.h&gt; </pre><pre>#include &lt;Adafruit_GFX.h&gt; </pre><pre>#include &lt;Adafruit_SSD1306.h&gt; </pre><pre>#define SCREEN_WIDTH 128 </pre><pre>#define SCREEN_HEIGHT 64 </pre><pre>Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1); </pre><pre>void setup() { </pre><pre>	 display.begin(SSD1306_SWITCHCAPVCC, 0x3C); </pre><pre>	 display.clearDisplay(); </pre><pre>	 display.setTextSize(2); </pre><pre>	 display.setTextColor(WHITE); </pre><pre>	 display.setCursor(5, 30); </pre><pre>	 display.println("Hello all."); </pre><pre>	 display.display(); </pre><pre>} </pre><pre>void loop() { </pre><pre>} </pre>The first three lines of code include the libraries we need to get everything working. Two of them you have already installed, and then there is Wire, which comes pre-installed with the Arduino IDE. The Wire library helps the Arduino communicate with the display using I2C communication. The next two lines of code define variables to hold the width and height of the screen, which is 128 × 64. <pre>#define SCREEN_WIDTH 128 </pre><pre>#define SCREEN_HEIGHT 64 </pre> The sixth line of code defines the OLED display and gives it a name so we can call it later in our code to perform actions with it. <pre>Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1); </pre>Now, the first thing we do in this line of code is call the library Adafruit_SSD1306 and then give the display a name (in this case, display). Inside the brackets, we pass in some values ​​needed to set up the display. The first thing needed is the size of the display, so we use the variables we defined earlier for the width and height. Then we need to define how we will communicate with the display. In this case, we are using the Wire library. The last thing we provide is the pin that the reset pin is connected to, but the I2C display does not use a reset pin, so we set it to -1 so the library knows there is no reset pin connected. Next, we go into the void setup and start the display by running this line of code. <pre>display.begin(SSD1306_SWITCHCAPVCC, 0x3C); </pre>We call the display object (which is named display) and run the begin function. We pass two things to it. The first thing we pass is SSD1306_SWITCHCAPVCC, which tells the display how to generate its internal voltage. The next thing we pass is 0x3C, which is the I2C address of the OLED display. The rest of this code clears the display, sets the size, color, and position of the text, and puts it on the display. This text will remain on the display until the screen is cleared again. <pre>	display.clearDisplay(); </pre><pre>	display.setTextSize(2); </pre><pre>	display.setTextColor(WHITE); </pre><pre>	display.setCursor(5, 30); </pre><pre>	display.println("Hello all."); </pre><pre>	display.display(); </pre>Note : It is important to know that when you want to put text on the screen, you must include this line of code. <pre>display.display(); </pre> This is the result you will get from running this code. <figure><img src="https://projects.arduinocontent.cc/91c3d139-9c5b-432c-833a-3ef6e16dae15.png"/><figcaption></figcaption></figure>If you want this text to scroll, you can put this piece of code in the void loop. <pre>display.startscrollright(0, 5); </pre>The first thing we give to the startscrollright function is where to begin scrolling from. 0 usually means start from the very beginning (the leftmost column). The second value is how fast the text scrolls. A smaller number means faster scrolling, while a larger number means slower scrolling. <h3>Putting shapes on the screen code</h3>This code will put shapes on the OLED display, all in a line. <pre>	 </pre><pre>#include &lt;Wire.h&gt; </pre><pre>#include &lt;Adafruit_GFX.h&gt; </pre><pre>#include &lt;Adafruit_SSD1306.h&gt; </pre><pre>#define SCREEN_WIDTH 128 </pre><pre>#define SCREEN_HEIGHT 64 </pre><pre>Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1); </pre><pre>void setup() { </pre><pre>	 display.begin(SSD1306_SWITCHCAPVCC, 0x3C); </pre><pre>	 display.clearDisplay(); </pre><pre>	 display.drawRect(10, 10, 20, 10, WHITE); </pre><pre>	 display.drawCircle(45, 15, 8, WHITE); </pre><pre>	 display.drawTriangle(68, 10, 59, 22, 79, 22, WHITE); </pre><pre>	 display.drawLine(85, 10, 100, 20, WHITE); </pre><pre>	 display.display(); </pre><pre>} </pre><pre>void loop() { </pre><pre>	 // put your main code here, to run repeatedly: </pre><pre>} </pre>Now that you already know how to set up the OLED display, you should understand quite a bit of this code. However, there are a few new lines that help us put shapes on the display. These four lines of code draw four shapes on the OLED display: a rectangle, a circle, a triangle, and a line. <pre>	display.drawRect(10, 10, 20, 10, WHITE); </pre><pre>	display.drawCircle(45, 15, 8, WHITE); </pre><pre>	display.drawTriangle(68, 10, 59, 22, 79, 22, WHITE); </pre><pre>	display.drawLine(85, 10, 100, 20, WHITE); </pre>To make a rectangle, you need to call the drawRect() function. This function requires five values: the position of the top-left corner, the rectangle's width and height, and its color (you must specify a color for all shapes). To draw a circle, you need to call the drawCircle() function and give it the center point of the circle and the radius. To put a triangle on the screen, call the drawTriangle() function and pass it three sets of corner points (three vertices). For the line, give the starting point and then the ending point. This is what the OLED display will show when you run this code. <figure><img src="https://projects.arduinocontent.cc/24ea8da9-cfb4-41e5-b900-c881fc1bae09.png"/><figcaption></figcaption></figure> <h3>Putting images and shapes on display code</h3>This code will put an image of my logo on the display, with a circle that gets bigger and smaller around it. <pre>#include &lt;Wire.h&gt; </pre><pre>#include &lt;Adafruit_GFX.h&gt; </pre><pre>#include &lt;Adafruit_SSD1306.h&gt; </pre><pre>#define SCREEN_WIDTH 128 </pre><pre>#define SCREEN_HEIGHT 64 </pre><pre>int num = 30; </pre><pre>int direction = 1; </pre><pre>Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1); </pre><pre>const unsigned char myBitmap[] PROGMEM = { </pre><pre>	 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x80, </pre><pre>	0x00, 0x00, 0x00, 0x0e, 0x1f, 0x87, 0x00, 0x00, 0x00, 0x1e, 0x3f, 0xcf, 0x80, 0x00, 0x00, 0x3f, </pre><pre>	0xff, 0xff, 0xc0, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x1f, 0xff, 0xff, 0x80, 0x00, </pre><pre>	0x00, 0x3f, 0xff, 0xff, 0x80, 0x00, 0x00, 0x7f, 0xc0, 0x3f, 0xc0, 0x00, 0x07, 0xfe, 0x1f, 0xff, </pre><pre>	0xff, 0xe0, 0x0f, 0xfc, 0x3f, 0x80, 0x60, 0x30, 0x0f, 0xf8, 0x3f, 0x80, 0x60, 0x70, 0x0f, 0xf0, </pre><pre>	0x3f, 0xff, 0xff, 0xf0, 0x0f, 0xe0, 0xff, 0x3f, 0xff, 0xe0, 0x07, 0xe1, 0xff, 0x1f, 0xff, 0xf0, </pre><pre>	0x07, 0xc1, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xc1, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xc1, 0xff, 0xff, </pre><pre>	0xff, 0xf8, 0x3f, 0x81, 0xff, 0xff, 0xff, 0xf8, 0x3f, 0x80, 0xff, 0xff, 0xff, 0xf8, 0x3f, 0x80, </pre><pre>	0x3f, 0xff, 0xff, 0xf8, 0x3f, 0x80, 0x3f, 0xff, 0xff, 0xf8, 0x3f, 0x80, 0x3b, 0x9f, 0xff, 0xf8, </pre><pre>	0x07, 0xc0, 0x3b, 0x9c, 0x00, 0x78, 0x07, 0xc0, 0x3b, 0xfc, 0x00, 0x78, 0x07, 0xc0, 0x1f, 0xfc, </pre><pre>	0x00, 0x78, 0x03, 0xe0, 0x01, 0xff, 0xff, 0xf8, 0x0f, 0xe0, 0x01, 0xff, 0xff, 0xf8, 0x0f, 0xf0, </pre><pre>	0x01, 0xff, 0xff, 0xf8, 0x0f, 0xf8, 0x1f, 0xc8, 0x08, 0x10, 0x0f, 0xfc, 0x1f, 0xff, 0xff, 0xf0, </pre><pre>	0x07, 0xfe, 0x1f, 0xff, 0xff, 0xe0, 0x00, 0x3f, 0xc0, 0x3f, 0xc0, 0x00, 0x00, 0x1f, 0xff, 0xff, </pre><pre>	0x80, 0x00, 0x00, 0x1f, 0xff, 0xff, 0x80, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x3f, </pre><pre>	0xff, 0xff, 0xc0, 0x00, 0x00, 0x1e, 0x1f, 0x87, 0x80, 0x00, 0x00, 0x04, 0x1f, 0x82, 0x00, 0x00, </pre><pre>	0x00, 0x00, 0x1f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, </pre><pre>	0x00, 0x00 </pre><pre>}; </pre><pre>void setup() { </pre><pre>	 display.begin(SSD1306_SWITCHCAPVCC, 0x3C); </pre><pre>} </pre><pre>void loop() { </pre><pre>	 display.clearDisplay(); </pre><pre>	 display.drawBitmap(41, 10, myBitmap, 45, 43, WHITE); </pre><pre>	 display.drawCircle(64, 32, num, WHITE); </pre><pre>	 display.display(); </pre><pre>	 if(num == 31){ </pre><pre>	 direction = -1; </pre><pre>	 } </pre><pre>	 if(num == 25){ </pre><pre>	 direction = 1; </pre><pre>	 } </pre><pre>	 num = num + direction; </pre><pre>	 delay(50); </pre><pre>} </pre>The first new piece of code is the variable num , which holds the radius of the circle, and direction , which controls whether the circle is getting smaller or bigger. The next new line is the myBitmap array. This array holds all the pixel data that makes up our image. To create a bitmap of your own image, you can go to <a href="https://javl.github.io/image2cpp/">image2cpp </a>and generate it, but just make sure it is not larger than 128 × 64 pixels. Now, after skipping through the void setup and going into the void loop, you will see that it is time to put the image on the display. <pre>display.drawBitmap(41, 10, myBitmap, 45, 43, WHITE); </pre>Now, to put the image on the display, we need to run the drawBitmap() function and give it the X and Y position of the top-left corner of the image. Then we give it the bitmap, and finally pass in the size of the image. Note: this number must match how many pixels the image takes up. You can see the size of the image on <a href="https://javl.github.io/image2cpp/">image2cpp </a>. Then we will draw the circle and provide everything the drawCircle() function needs. You can see that in the place where we should have put the radius, we used num , so that the radius can get bigger and smaller.You can see with the rest of this code that we decrease the radius when it reaches 31 by changing the direction to -1, and increase the radius when it reaches 25 by setting the direction to 1.<pre>	 if(num == 31){ </pre><pre>	 direction = -1; </pre><pre>	 } </pre><pre>	 if(num == 25){ </pre><pre>	 direction = 1; </pre><pre>	 } </pre><pre>	 num = num + direction; </pre><pre>	 delay(50); </pre> This is what the code gives us: an image of a logo with a circle around it that gets larger and smaller.<figure><img src="https://projects.arduinocontent.cc/d9889dff-2e3f-466e-b80f-85fa4694838b.png"/><figcaption></figcaption></figure> </body></html>

OLEDdisplayCode1

OLEDdisplayCode2

OLEDdisplayCode3

OLEDdisplayCode

Arduino OLED Display Guide: From Setup to Custom Graphics

Learn how you can get your Arduino to put text, shapes, and images on a screen.