Today, I would like to introduce a different type of display, which is available in an I2C as well as SPI version. These displays are very easily readable in almost any light conditions, lightweight, and most importantly, they are extremely cheap. I am talking about the OLED display of course… Many of us may already have one of them in our mobile phones, or even TV screen…<\/p>\n\n\n\n
![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/20200914_175650-768x1024.jpg\")
Some Technical Data <\/h2>\n\n\n\n
An organic light-emitting diode<\/strong> (OLED<\/strong> or Organic LED<\/strong>), also known as an organic EL<\/strong> (organic electroluminescent) diode,[1]<\/a><\/sup>[2]<\/a><\/sup> is a light-emitting diode<\/a> (LED) in which the emissive<\/a> electroluminescent<\/a> layer is a film of organic compound<\/a> that emits light in response to an electric current. This organic layer is situated between two electrodes; typically, at least one of these electrodes is transparent. OLEDs are used to create digital displays<\/a> in devices such as television<\/a> screens, computer monitors<\/a>, portable systems such as smartphones<\/a>, handheld game consoles<\/a> and PDAs<\/a>. A major area of research is the development of white OLED devices for use in solid-state lighting<\/a> applications.[3]<\/a><\/sup>[4]<\/a><\/sup>[5]<\/a><\/sup><\/p>\n\n\n\n There are two main families of OLED: those based on small molecules and those employing polymers<\/a>. Adding mobile ions<\/a> to an OLED creates a light-emitting electrochemical cell<\/a> (LEC) which has a slightly different mode of operation. An OLED display can be driven with a passive-matrix<\/a> (PMOLED) or active-matrix<\/a> (AMOLED<\/a>) control scheme. In the PMOLED scheme, each row (and line) in the display is controlled sequentially, one by one,[6]<\/a><\/sup> whereas AMOLED control uses a thin-film transistor<\/a> backplane to directly access and switch each individual pixel on or off, allowing for higher resolution and larger display sizes.<\/p>\n\n\n\n An OLED display works without a\u00a0backlight<\/a>\u00a0because it emits\u00a0visible light<\/a>. Thus, it can display deep\u00a0black levels<\/a>\u00a0and can be thinner and lighter than a\u00a0liquid crystal display<\/a>\u00a0(LCD). In low ambient light conditions (such as a dark room), an OLED screen can achieve a higher\u00a0contrast ratio<\/a>\u00a0than an LCD, regardless of whether the LCD uses\u00a0cold cathode fluorescent lamps<\/a>\u00a0or an\u00a0LED backlight<\/a>. OLED displays are made in the same way as LCDs, but after TFT (for active matrix displays), addressable grid (for passive matrix displays) or ITO segment (for segment displays) formation, the display is coated with hole injection, transport and blocking layers, as well with electroluminescent material after the 2 first layers, after which ITO or metal may be applied again as a cathode and later the entire stack of materials is encapsulated. The TFT layer, addressable grid or ITO segments serve as or are connected to the anode, which may be made of ITO or metal.[7]<\/a>[8]<\/a><\/sup>\u00a0OLEDs can be made flexible and transparent, with\u00a0transparent displays<\/a>\u00a0being used in smartphones with optical fingerprint scanners and\u00a0flexible displays<\/a>\u00a0being used in foldable smartphones.<\/p>\n\n\n\n The full article is available here<\/a> if you are interested. This display is once again extremely easy to connect, as it uses the very versatile I2C protocol. (An SPI version is also available). Connect the following wires to the Arduino \/ ESP32 The 128×32 OLED display that we will be using today, is based on the SSD1306. We will thus be using a library suplied by Adafruit to interface with this chip. There are various other libraries available, but I have found the Adafruit library the most stable. The Library Manager will now open We need to install two (2) Libraries Click on “Close” after installation is completed.<\/p>\n\n\n\n We will use one of the standard Adafruit examples to show you the capabilities of the tiny little screen. The example are so straight forward to use, that I find it unnecessary to say anything else about it \ud83d\ude42<\/p>\n\n\n\n Open the ssd1306_128x32_ic2 Example from the Examples menu in the Arduino IDE and upload it to your Arduino, making sure that you set the dimensions of your screen first (in my case 128×32 )<\/p>\n\n\n\n I hope that you find this useful and inspiring. Introduction Adding a display to any project can instantly increase its visual appeal, as well as make the project easier to control. Displays available to Electronic enthusiasts mostly include some sort of LCD or even TFT display. LCD displays are usually bulky and very limited in their ability to display a lot of information, whereas … Continue reading “The OLED Display”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,74,40,51,16,17,15],"tags":[6,42,67,72,43],"class_list":["post-706","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino","category-displays","category-esp32","category-i2c-devices","category-spi-communication","category-spi-communication-stm32f103c8t6-blue-pill","category-stm32f103c8t6-blue-pill","tag-arduino","tag-esp32","tag-i2c","tag-oled-display","tag-stm32"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/posts\/706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/comments?post=706"}],"version-history":[{"count":0,"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/posts\/706\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/media\/710"}],"wp:attachment":[{"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/media?parent=706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/categories?post=706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makeriot2020.com\/index.php\/wp-json\/wp\/v2\/tags?post=706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n\n\n![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/20200914_175719-768x1024.jpg\")
Connecting the circuit<\/h2>\n\n\n\n
<\/p>\n\n\n\n![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/20200914_181046-768x1024.jpg\")
![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/20200914_181118-768x1024.jpg\")
<\/figure><\/li>![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/20200914_181144-1024x768.jpg\")
<\/figure><\/li><\/ul>
+5v (red) to the VCC pin on the display
Gnd to Gnd
SDA (A4 on Uno) to SDA, and SCL (A5 on Uno) to SCL<\/p>\n\n\n\nThe Software Libraries<\/h2>\n\n\n\n
To load this, start by opening the Arduino IDE, and go to the Sketch->Include Library->Manage Libraries option on the menu<\/p>\n\n\n\n
<\/p>\n\n\n\n![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/Screenshot-at-2020-09-14-18-23-59.png\")
<\/figure>\n\n\n\n
– Adafruit GFX ( this is for graphics)
– Adafruit SSD1306 ( to control the actual display )<\/p>\n\n\n\n![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/Screenshot-at-2020-09-14-18-24-48.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/144.126.248.244\/wp-content\/uploads\/2020\/09\/Screenshot-at-2020-09-14-18-25-28.png\")
<\/figure>\n<\/div><\/div>\n\n\n\nUsing the display<\/h2>\n\n\n\n
\/**************************************************************************\n This is an example for our Monochrome OLEDs based on SSD1306 drivers\n\n Pick one up today in the adafruit shop!\n ------> http:\/\/www.adafruit.com\/category\/63_98\n\n This example is for a 128x32 pixel display using I2C to communicate\n 3 pins are required to interface (two I2C and one reset).\n\n Adafruit invests time and resources providing this open\n source code, please support Adafruit and open-source\n hardware by purchasing products from Adafruit!\n\n Written by Limor Fried\/Ladyada for Adafruit Industries,\n with contributions from the open source community.\n BSD license, check license.txt for more information\n All text above, and the splash screen below must be\n included in any redistribution.\n **************************************************************************\/\n\n#include <SPI.h>\n#include <Wire.h>\n#include <Adafruit_GFX.h>\n#include <Adafruit_SSD1306.h>\n\n#define SCREEN_WIDTH 128 \/\/ OLED display width, in pixels\n#define SCREEN_HEIGHT 32 \/\/ OLED display height, in pixels\n\n\/\/ Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)\n#define OLED_RESET 4 \/\/ Reset pin # (or -1 if sharing Arduino reset pin)\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &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(9600);\n\n \/\/ SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally\n if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { \/\/ Address 0x3C for 128x32\n Serial.println(F(\"SSD1306 allocation failed\"));\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, SSD1306_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<display.width(); i+=4) {\n display.drawLine(0, 0, i, display.height()-1, SSD1306_WHITE);\n display.display(); \/\/ Update screen with each newly-drawn line\n delay(1);\n }\n for(i=0; i<display.height(); i+=4) {\n display.drawLine(0, 0, display.width()-1, i, SSD1306_WHITE);\n display.display();\n delay(1);\n }\n delay(250);\n\n display.clearDisplay();\n\n for(i=0; i<display.width(); i+=4) {\n display.drawLine(0, display.height()-1, i, 0, SSD1306_WHITE);\n display.display();\n delay(1);\n }\n for(i=display.height()-1; i>=0; i-=4) {\n display.drawLine(0, display.height()-1, display.width()-1, i, SSD1306_WHITE);\n display.display();\n delay(1);\n }\n delay(250);\n\n display.clearDisplay();\n\n for(i=display.width()-1; i>=0; i-=4) {\n display.drawLine(display.width()-1, display.height()-1, i, 0, SSD1306_WHITE);\n display.display();\n delay(1);\n }\n for(i=display.height()-1; i>=0; i-=4) {\n display.drawLine(display.width()-1, display.height()-1, 0, i, SSD1306_WHITE);\n display.display();\n delay(1);\n }\n delay(250);\n\n display.clearDisplay();\n\n for(i=0; i<display.height(); i+=4) {\n display.drawLine(display.width()-1, 0, 0, i, SSD1306_WHITE);\n display.display();\n delay(1);\n }\n for(i=0; i<display.width(); i+=4) {\n display.drawLine(display.width()-1, 0, i, display.height()-1, SSD1306_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<display.height()\/2; i+=2) {\n display.drawRect(i, i, display.width()-2*i, display.height()-2*i, SSD1306_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<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, SSD1306_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<max(display.width(),display.height())\/2; i+=2) {\n display.drawCircle(display.width()\/2, display.height()\/2, i, SSD1306_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>0; i-=3) {\n \/\/ The INVERSE color is used so circles alternate white\/black\n display.fillCircle(display.width() \/ 2, display.height() \/ 2, i, SSD1306_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<display.height()\/2-2; i+=2) {\n display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,\n display.height()\/4, SSD1306_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<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, SSD1306_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<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, SSD1306_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>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, SSD1306_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(SSD1306_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<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(SSD1306_WHITE); \/\/ Draw white text\n display.setCursor(0,0); \/\/ Start at top-left corner\n display.println(F(\"Hello, world!\"));\n\n display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); \/\/ Draw 'inverse' text\n display.println(3.141592);\n\n display.setTextSize(2); \/\/ Draw 2X-scale text\n display.setTextColor(SSD1306_WHITE);\n display.print(F(\"0x\")); 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(SSD1306_WHITE);\n display.setCursor(10, 0);\n display.println(F(\"scroll\"));\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< 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(\"x: \"));\n Serial.print(icons[f][XPOS], DEC);\n Serial.print(F(\" y: \"));\n Serial.print(icons[f][YPOS], DEC);\n Serial.print(F(\" dy: \"));\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< NUMFLAKES; f++) {\n display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_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< NUMFLAKES; f++) {\n icons[f][YPOS] += icons[f][DELTAY];\n \/\/ If snowflake is off the bottom of the screen...\n if (icons[f][YPOS] >= 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}<\/code><\/pre>\n\n\n\n
Thank you <\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"