OLED Display

This week I experimented with this SSD1306 monochrome OLED display. Since I didn't have a rotary encoder at home, I decided to use potentiometer as before as the sensor input and displayed its value and time on the display as well. Here's what I achieved. Code is hosted on Github.

A screenshot for the start screen
This is the screenshot for the main screen, which displays the time above and volume below

Circuit Diagram


Code Breakdown & FAQs

How to display an image

I searched lots of examples of OLED display and was amazed by the designs that were balanced well between readability and aesthetics. Many of them applied graphics into the display and arranged layouts.

Examples of industrialized display design

So I tried to insert a volume icon into my display. I found this tutorial really helpful to teach me how to convert a picture to the format that Arduino could read and display. Here's the bmp code that represented my sound icon.

Draw status bar

The SSD1306 library that Adafruit provided had more functions that I expected, including drawRect(), fillRect(), drawRoundRect(), drawTriangle(), drawLine(), drawCircle(), etc. There were more functions like scrolling effects in its examples. Here I decided to keep my interface readable and simple. I only used a slide bar to show the volume, which also suited the best for potentiometer's value range.

As soon as the change was detected, Arduino would calculate the sound volume (which was the intensity in the code) and mapped its value to the range of the width of slider bar.