{"id":13085,"date":"2017-02-01T19:45:08","date_gmt":"2017-02-02T00:45:08","guid":{"rendered":"http:\/\/embedded-lab.com\/blog\/?p=13085"},"modified":"2023-04-11T22:18:16","modified_gmt":"2023-04-12T02:18:16","slug":"tutorial-3-connecting-oled-display-esp8266","status":"publish","type":"post","link":"https:\/\/embedded-lab.com\/blog\/tutorial-3-connecting-oled-display-esp8266\/","title":{"rendered":"Tutorial 3: Connecting an OLED display to ESP8266"},"content":{"rendered":"

Whether you want to show sensor readings, implement a navigational user interface menu, or display diagnostic information during prototyping a\u00a0project, a graphic OLED display is always a cool add-on to embedded systems. In this tutorial, we will learn how to interface an I2C monochromatic OLED screen to ESP8266 (we will use EasyESP-1 board) using Arduino IDE. The OLED display used in this tutorial is\u00a0SSD1306-based that can be bought for ~$5 on eBay or Aliexpress. You can also get a similar I2C OLED display with a\u00a0grove connector from Elecrow<\/a><\/strong> for plug-and-play interfacing with the EasyESP-1 board.<\/p>\n

\"Interfacing<\/a>

Interfacing an SSD1306-based I2C OLED to EasyESP-1<\/p><\/div>\n

Buy EasyESP-1 board<\/a><\/h3>\n

Hardware Setup<\/h3>\n

The I2C OLED breakout board chosen for this\u00a0tutorial consists of\u00a0a 0.96″ diagonal length display with 128×64 monochrome pixels. Despite its small size, the readability is pretty good due to its high contrast. Individual pixels are\u00a0turned on or off by the on-board SSD1306 controller chip that supports both SPI and I2C interface. This tutorial uses an OLED display\u00a0with I2C interface and has only four signal lines, namely VCC, GND, SCL, and SDA. For this experiment, these pins are connected to 3.3V, GND, D1, and D2 pins on the EasyESP-1 board, respectively.<\/p>\n

\"SSD1306<\/a>

SSD1306 based 0.96″ OLED display module<\/p><\/div>\n

\"Wiring<\/a>

Wiring OLED pins to the EasyESP-1 board<\/p><\/div>\n

If you would like to use a grove OLED module, it can be connected to one of the I2C port on the EasyESP-1 board, as shown below.<\/p>\n

\"Connecting<\/a>

Connecting a grove OLED to I2C connector on the EasyESP-1 board<\/p><\/div>\n

Software<\/h3>\n

There are several libraries available to support the SSD1036-based OLEDs for Arduino platform. For ESP8266, I would suggest to use one written by\u00a0Daniel Eichhorn<\/em> from squix<\/a><\/strong>. It supports both I2C and SPI versions of SSD1306 based 128×64 pixel OLED displays on the Arduino\/ESP8266 platform. The library is very versatile and supports drawing pixels, lines, rectangles, and text of different font sizes. You can download this from the following github link.<\/p>\n

https:\/\/github.com\/squix78\/esp8266-oled-ssd1306<\/a><\/p>\n

Installation and setup of an external user library to Arduino IDE is easy. First, download the zipped library folder<\/a><\/strong> to your machine. Then unzip it and move the unzipped library folder to your Documents\/Arduino\/libraries\/<\/strong><\/em> location. You need to restart the Arduino IDE in order to use it in your new application.<\/p>\n

After installing the OLED library, it’s time to try some built-in examples that come with the library. Open\u00a0File->Examples->ESP8266 Oled Driver for SSD1306 display-> SSD1306SimpleDemo<\/strong>.<\/p>\n

\"fgf\"<\/a>

Testing OLED examples<\/p><\/div>\n

The example programs are configured for I2C version of SSD1306 OLED by default. So, the only thing that you need to modify in the example code is to assign the correct ESP8266 I\/O pins for I2C communication. Note that the EasyESP-1 I2C ports use D2 for SDA and D1 for SCL. So find the following I2C initialization statement in the code and make the changes as<\/p>\n

\/\/ Initialize the OLED display using Wire library
\nSSD1306 display(0x3c, D2, D1);<\/p>\n

Next, compile the program and upload it to the EasyESP-1 board.<\/p>\n

Output<\/h3>\n

The SSD1306SimpleDemo<\/strong>\u00a0example cycles through all the basic features of the OLED library, like drawing pixels, rectangle, circles, texts, WiFi logo, etc.<\/p>\n

\"Drawing<\/a>

Drawing concentric circles<\/p><\/div>\n

\"OLED<\/a>

OLED text output<\/p><\/div>\n

You can also try running other examples in\u00a0Daniel’s<\/em>\u00a0OLED library. There is one called SSD1306ClockDemo that displays an analog and digital clock on the LED screen. For this example, you will need to install the\u00a0Arduino Time library<\/a><\/strong>.<\/p>\n

\"Clock<\/a>

Clock example<\/p><\/div>\n

Buy EasyESP-1 board<\/a><\/h3>\n

More tutorials<\/h4>\n

TUTORIAL 2: EASYESP-1 \u201cHELLO WORLD\u201d EXAMPLE<\/a><\/h5>\n
TUTORIAL 1: SETTING UP THE ARDUINO IDE FOR EASYESP-1<\/a><\/h5>\n
EASYESP-1: A RAPID PROTOTYPING AND DEVELOPMENT BOARD FOR ESP8266<\/a><\/h5>\n","protected":false},"excerpt":{"rendered":"

Whether you want to show sensor readings, implement a navigational user interface menu, or display diagnostic information during prototyping a\u00a0project, a graphic OLED display is always a cool add-on to embedded systems. In this tutorial, we will learn how to interface an I2C monochromatic OLED screen to ESP8266 (we will use EasyESP-1 board) using Arduino IDE. The OLED display used in this tutorial is\u00a0SSD1306-based that can be bought for ~$5 on eBay or Aliexpress. You can also get a similar I2C OLED display with a\u00a0grove connector from Elecrow for plug-and-play interfacing with the EasyESP-1 board. Buy EasyESP-1 board Hardware Setup<\/p>\n","protected":false},"author":1,"featured_media":13087,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1603,1044,1464,1466],"tags":[1512,1618],"class_list":["post-13085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266-tutorials","category-esp8266","category-featured","category-tutorials","tag-arduino-oled","tag-esp8266-i2c-oled"],"_links":{"self":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/13085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/comments?post=13085"}],"version-history":[{"count":16,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/13085\/revisions"}],"predecessor-version":[{"id":15142,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/posts\/13085\/revisions\/15142"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/media\/13087"}],"wp:attachment":[{"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/media?parent=13085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/categories?post=13085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/embedded-lab.com\/blog\/wp-json\/wp\/v2\/tags?post=13085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}