Interfacing and Displaying Images on OLED

UTSOURCE Electronic Parts

arduino uno

Breadboard

 0.96 Inch OLED Display Module 128X64 OLED for Arduino I2C

<h3 >Introduction</h3>In this tutorial, we are going to learn to interface Arduino UNO with OLED 128x64 I2C monochrome display and display images.<h3 >Circuit</h3>Connect the pins of OLED with the following pins of Arduino UNO, as shown below.Arduino UNO OLED 5v--------------------VCCGND-----------------GNDSDA/A4--------------SDASCL/A5---------------SCL <h3 >Install Required Libraries</h3><ul ><li >Adafruit_GFX.h <a href="https://github.com/adafruit/Adafruit-GFX-Library">https://github.com/adafruit/Adafruit-GFX-Library </a></li><li >Adafruit_SSD1306.h <a href="https://www.github.com/adafruit/Adafruit_SSD1306"> https://www.github.com/adafruit/Adafruit_SSD1306 </a></li><li >Wire.h this library will be installed by default </li></ul>Either you can download the libraries from Github and add the ZIP file in Arduino IDE using add.zip library option. <figure><img src=https://projects.arduinocontent.cc/5d49dd49-87e9-4f03-8409-9dd42ee6f9b1.png /><figcaption> </figcaption></figure>Or you can install the libraries directly from Arduino IDE from Manage Libraries. Follow the below steps to install.<figure><img src=https://projects.arduinocontent.cc/1e000e04-5f6c-4a99-a267-fed090317ba5.png /><figcaption> </figcaption></figure>Open manage library from sketch -&gt; include library -&gt; manage libraries <figure><img src=https://projects.arduinocontent.cc/757ba58f-54e1-4b89-a1f2-869b97899a23.png /><figcaption> </figcaption></figure>Then Search for AdafruitSSD1306 and click on the install button.<figure><img src=https://projects.arduinocontent.cc/d6fcc038-ee8c-428f-acf9-f527248cc941.png /><figcaption> </figcaption></figure>Then Search for the AdafruitGFX and click the install button. Now we have successfully installed the required libraries for this project.<h3 >Adafruit Example Code</h3>Let's upload the adafruitSSD1306 library example program and test our setup.Open the example program from File -&gt; Examples -&gt; Adafruit SSD1306 -&gt; ssd1306_128x64_i2c, because We are using OLED display with I2C interface with the screen size of 128x64.<figure><img src=https://projects.arduinocontent.cc/b7f54bee-f6d1-4390-be3a-3261e53bb147.png /><figcaption> </figcaption></figure><h3 >Now Let's Upload the Code</h3>Go to tool menu -&gt; Boards select Arduino UNO, then from Port select the port to which the Arduino is connected <figure><img src=https://projects.arduinocontent.cc/621dafb4-0f93-4df7-a827-ec7550de89d0.png /><figcaption> </figcaption></figure><figure><img src=https://projects.arduinocontent.cc/2e45e3ec-4c2e-4466-a24c-8ca6b478b517.png /><figcaption> </figcaption></figure><h3 >Video</h3><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/9xZmWZ4Hh6M" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div><h3 >Displaying Images on OLED</h3>To display an image on OLED display first We need to convert the image to HEX code, for that purpose We need to use a converter like image2cpp by javl <a href="https://diyusthad.com/image2cpp">Image2cpp</a><h3 >Converting Image to Bitmap HEX Code</h3>Step 1: Open ConverterClick on the <a href="https://diyusthad.com/image2cpp">image2cpp </a>button and open the application in a new tab. <figure><img src=https://projects.arduinocontent.cc/6d833c83-abb1-46fa-8a98-846ad16d1e3b.png /><figcaption> </figcaption></figure>Step 2: Choose Image FileClick on choose files and choose the image file which you need to display in the OLED.<figure><img src=https://projects.arduinocontent.cc/41cf9203-7d8a-4a3e-a048-fa43cfdf3a25.png /><figcaption> </figcaption></figure>Step 3: Image Settings Below is the screenshot of the default settings when We open the facebook logo.<figure><img src=https://projects.arduinocontent.cc/7f8e57a9-b1c0-40e1-9d28-f89dc732197f.png /><figcaption> </figcaption></figure>Here We need to change at least the canvas size, scaling, and brightness threshold to get a proper output in our OLED display. Canvas Size: it is the size of our OLED display in my case its 128x64 is you are using any other OLED display then change the settings accordinglyBrightness Threshold: It is for adjusting the intensity with respect to the background, You can understand it correctly with using the application.Scaling: It is for adjusting the image size with respect to the Canvas Size.Below is the screenshot after updating the settings.<figure><img src=https://projects.arduinocontent.cc/e509c0db-9597-4a1a-a931-516e2ca0803d.png /><figcaption> </figcaption></figure>Now We got our nice looking facebook logo, I have to change the canvas size to &#34;128 x 64&#34;, brightness threshold to &#34;185&#34;, scaling to &#34;scale to fit, keeping proportion&#34;. The other settings like center, background color and invert image colors are for tweaking, play with it to understand :).Step 4: Generate CodeFrom code output, formate dropdown menu selects the Arduino code and click on the Generate code button.<figure><img src=https://projects.arduinocontent.cc/de1f6fce-c8a7-4da3-b93f-5d58276724f8.png /><figcaption> </figcaption></figure>Now We have successfully generated the HEX code for our image, Let's move to Arduino coding.<h3 >Arduino Coding</h3>Copy the code below to a new Arduino sketch, then copy the above-generated HEX code just above the void Setup() function in the Arduino code.so it will look like this.<figure><img src=https://projects.arduinocontent.cc/2ee51620-5437-4734-9546-864f41c8845b.png /><figcaption> </figcaption></figure>Now select the board and port from the tools menu and upload the code, that's it now Our OLED will start displaying the image.<figure><img src=https://projects.arduinocontent.cc/7b047bd4-3233-4afa-8e27-08667e39096d.JPG /><figcaption> </figcaption></figure><h3 >Video</h3><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/H174EUG2kL0" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div>

Interfacing and Displaying Images on OLED

Interfacing an OLED 128x64 display with Arduino UNO and displaying images.