Arduino Rotary Encoder Menu

Home/Arduino Projects/Arduino Rotary Encoder Menu

Arduino Rotary Encoder Menu

Welcome to this Arduino Rotary Encoder Menu Tutorial. Today we are going to build a simple menu on a Nokia 5110 LCD display. Let’s get started!

Intro to the Arduino Rotary Encoder Menu Tutorial

Hello guys, I am Nick and welcome to educ8s.tv a channel that is all about DIY electronics projects with Arduino, Raspberry Pi, ESP8266 and other popular boards. Subscribe to the channel now if you don’t want to miss any future videos.

In this video we are going learn how to build our own menu for the popular Nokia 5110 LCD display, in order to make our projects more user friendly and more capable. We have built a similar project in the past, but a lot of the viewers of the channel suggested that I should prepare another video on this subject.

This time we are going to use a rotary encoder instead of push buttons. Also, the menu we are going to build today has more items to choose from. Let’s watch it in action.

How the Arduino Rotary Encoder Menu works

This is the project we are going to build. In the display a simple menu appears, and with the help of the rotary encoder I can navigate up, or down and select a menu item by pressing the rotary encoder button.The menu has 6 items, and we can scroll down or up the menu and the items on the display will change accordingly.

Let’s select the first option. As you can see a new a UI screen is displayed and by rotating the rotary encoder shaft we can change the contrast of the display. If we press the rotary encoder button again, we go back to the main UI screen. The second menu item offers a similar functionality it modifies the volume variable. If we now select the third menu item and press the button we can change the language value. I have not implemented this functionality, this is just a demo project. A similar functionality is attached to the 4th menu item which is called difficulty. We can disable the backlight of the display if we wish, by selecting the 5th menu item, or we can reset everything to its default value with the 6th menu item. Of course you can modify it to build your own more complex menus if you wish. Let’s now see how to build this project.

——————–
WHERE TO BUY
——————–

Arduino Uno: http://bit.ly/Cheap_Uno

Rotary Encoder: http://bit.ly/RotaryEncoder

Nokia 5110 LCD: http://bit.ly/NOKIA5110

Small Breadboard: http://bit.ly/SmallBreadboard

Jumper Wires: http://bit.ly/JumperWiresB

3 in 1 wires: http://bit.ly/Wires3InOne

Power Bank: http://bit.ly/PowerBank_XiaoMi

Full disclosure: All of the links above are affiliate links. I get a small percentage of each sale they generate. Thank you for your support!

I have placed the display on a small breadboard like this. Let’s first connect the display. The first pin of the display which is Reset goes to digital pin 3 of the Arduino Uno, the second pin goes to digital pin 4, the third pin goes to digital pin 5, the fourth pin to digital pin 11 and the fifth pin to digital pin 13. The next pin is Vcc. We connect Vcc to the positive rail of the breadboard, and the breadboard positive rail to the 3.3V output of the Arduino. The next pin is Backlight for the display. Since we want to control it via the software we connect it to digital pin 7. The last pin is GND. We connect GND to the negative rail of the breadboard, and the negative rail of the breadboard to Arduino GND.

Now all we have to do is to connect the rotary encoder. The first pin is GND and we connect it to negative rail of the breadboard. The next pin is Vcc and we connect it to the positive rail of the breadboard. The next pin is SW and we connect it to Analog Pin 2. The next pin is named DT and we connect it to Analog Pin 1. Lastly the pin CLK is connected to Analog Pin 0. You can find the schematic diagram of this project in the description of the video below.

The code of the project is complex but I will do my best to explain it. You will get a basic understanding of how the code works but if you want to fully understand it you have to make your own menu and see exactly how it works. Let’s start.

In this project we use 4 libraries. We use two libraries for the display, and two for the rotary encoder.

——————–

LIBRARIES
——————–

📥  Adafruit GFX: https://github.com/adafruit/Adafruit-GFX-Library

📥  Nokia 5110: https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library

📥  Encoder Library: https://github.com/0xPIT/encoder/tree/arduino

📥 TimerOne library: https://github.com/PaulStoffregen/TimerOne

 

From the link below you can download the code for the Arduino Rotary Encoder Menu.

——————–

CODE OF THE PROJECT & SCHEMATIC
——————–

Download

 

 

 

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv

2017-04-10T20:31:47+00:00

9 Comments

  1. p_ferreira April 8, 2017 at 9:53 pm - Reply

    Excuse me, but isn’t missing the link to the “CODE OF THE PROJECT & SCHEMATIC”?

    • Nick April 9, 2017 at 8:37 am - Reply

      You are right. I am going to fix it soon!

  2. aboodys April 9, 2017 at 1:33 am - Reply

    sir the link is broken. Thx

    • Nick April 9, 2017 at 8:37 am - Reply

      Yes, I am going to fix it soon!

      • aboodys April 10, 2017 at 7:46 pm - Reply

        Thx a lot , please do it very soon.

        • Nick April 10, 2017 at 10:06 pm - Reply

          Done 😉

  3. arducomp April 9, 2017 at 6:33 am - Reply

    Dear friend Nick, sorry to inform you that you’ve forgotten top put the link to your Arduino code.

    • Nick April 9, 2017 at 8:36 am - Reply

      You are right! I am going to upload it soon!

  4. William April 12, 2017 at 8:59 pm - Reply

    If you don’t already know it the code link has been fixed and the sketch is now available. It works great too!

Leave A Comment

Close