Arduino Menu on a Nokia 5110 Lcd Using a Rotary Encoder

Dear friends welcome to another tutorial! In this video we are going learn how to build ourown menu for the popular Nokia 5110 LCD display, in order to make our projects more user friendly and more capable. Let’s get started!

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. When the middle button of the rotary encoder is pressed, another screen appears and we can change the value of a variable. If we press the rotary encoder button once more, we go back to the main menu screen. The menu has 6 items, and we can scroll down or up the menu and the items on the display will change accordingly. Watch the attached video to see exactly how this menu works. 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.

Step 1: Get All the Parts

The parts needed in order to build this project are the following:

• An Arduino Uno ▶ http://educ8s.tv/part/ArduinoUno

• A Nokia 5110 LCD display ▶ http://educ8s.tv/part/NOKIA5110

• A Rotary Encoder ▶ http://educ8s.tv/part/RotaryEncoder

• A small breaboard ▶ http://educ8s.tv/part/SmallBreadboard

• Some Wires ▶ http://educ8s.tv/part/Wires

The cost of the project is very low, it is less than $10. You can find links for all the parts I use in the description of the video below.

Step 2: Nokia 5110 LCD Display

The Nokia 5110 is my favorite display for my Arduino Projects.

The Nokia 5110 is a basic graphic LCD screen which was originally intended for as a cell phone screen. It uses the PCD8544 controller which is a low power CMOS LCD controller/driver. Because of this this display has an impressive power consumption. It uses only 0.4mA when it is on but the backlight is disable. It uses less than 0.06mA when in sleep mode! That's one of the reasons that make this display my favorite. The PCD8544 interfaces to microcontrollers through a serial bus interface. That makes the display very easy to use with Arduino. You only need to connect 8 wires.

I have prepared a detailed tutorial on how to use the Nokia 5110 LCD display with Arduino. I have attached that video in this tutorial, it will provide may useful information about the display, so I encourage you to watch it carefully. The cost of the display is around $4.

You can get it here: ▶ http://educ8s.tv/part/NOKIA5110

Step 3: Rotary Encoder

A rotary encoder, also called a shaft encoder, is an electro-mechanical device that converts the angular position or motion of a shaft or axle to an analog or digital code. Rotary encoders are used in many applications that require precise shaft unlimited rotation—including industrial controls, robotics, special purpose photographic lenses, computer input devices (such as optomechanical mice and trackballs), controlled stress rheometers, and rotating radar platforms.

The rotary encoder we are going to use in this project is a very inexpensive encoder. It also has a button embedded and in order to make it work we only need to connect 5 wires. I have prepared I detailed tutorial on how to use a rotary encoder. You can find this video attached here.

The cost of this rotary encoder is very low. It costs around $1.5.

You can get it here ▶ http://educ8s.tv/part/RotaryEncoder

Step 4: Building the Project

Let’s now connect all the parts together. Before building this project, if you haven’t used a rotary encoder in the past, I encourage you to watch the tutorial I have prepared about rotary encoders. It will help you understand how rotary encoders work and you are going to gain some experience with them. This video is attached here.

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.

Now we are ready to power up the project. As you can see, the project is working fine, and the menu is working as expected! Great, let’s now see the software of the project.

Step 5: The Code of the Project

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

• 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

At first we are going to take a look at the drawMenu function. This function is responsible for drawing the Menu on the display. This function is called every few milliseconds, so if there is a change on the menu this function is responsible for updating the menu on the screen.

int menuitem = 1;int frame = 1;
int page = 1;
int lastMenuItem = 1;

There are also 3 very important global variables, the variable page, the variable menuitem and variable frame. The variable page remembers which UI screen is displayed on the screen. So, if the page variable is 1, we are in the main UI screen, and if the variable is 2 we are in the secondary UI screen where we set the value on a variable. The menu item remembers the selected menu item. So, if its value is 1, the first menu item is selected, so the drawMenu function must draw this menu item as black with white letters. If the menu item is 2 the second menu item is selected and so on. The frame variable, remembers which part of the menu is displayed on the screen. Since the menu we have created contains 6 items and we can only display 3 of them at a time, we need to know which items are displayed on the screen. The frame variable, tells us exactly this. If the frame variable has the value of 1, we display the first three menu items, if it is 2, we display items 2,3,4 and so on.

I tried to make the code as easy as possible to modify so I have created some global variables that hold the names for the menu items. This way, you can create your own menus easily without searching in code.

String menuItem1 = "Contrast";String menuItem2 = "Volume";
String menuItem3 = "Language";
String menuItem4 = "Difficulty";
String menuItem5 = "Light: ON";
String menuItem6 = "Reset";boolean backlight = true;
int contrast=60;
int volume = 50;String language[3] = { "EN", "ES", "EL" };
int selectedLanguage = 0;String difficulty[2] = { "EASY", "HARD" };
int selectedDifficulty = 0;

At first we initialize all the global variables that are needed in the code. Next we initialize the display. In the loop function, at first we call the drawMenu function to draw the menu on the screen. Then we read the value from the Rotary encoder and check if the button is pressed. For example, if we are on the main UI screen and the first menu item is selected, if the value from the rotary encoder has increased, the menuitem variable increases and in the next loop the drawMenu function will draw the second menu item as selected. If we now press the button of the rotary encoder we navigate to the second page, where we set the value of the variable. Again using the rotary encoder we can increase or decrease the value of the variable. If we press the button we navigate back to the main menu page, and page variable decreases.

That’s the basic idea behind this menu. We follow the same procedure for all the menu items and pages. The code is complex, it is over 400 lines long. It seems complicated but if you try it yourself you are going to understand it more easily and you will be able to change it, expand it and use it in your own projects. As always you can find the code attached here.

Step 6: Testing the Project

If we load the code we can see that the project is working as expected. We can navigate the menu up and down using the shaft and we can select any menu item by pressing the rotary encoder button. How cool is that!

Now that we know how to build menus for the Nokia 5110 LCD displays we can add more features to our projects and make them more user friendly. This simple menu that we built today can be improved though. We could use interrupts instead of checking the button states all the time. This way we can reduce the power consumption of the project and make the code cleaner. I will prepare a video on interrupts soon so stay tuned. I would love to hear your opinion about this menu project. Do you find it useful and do you plan to use a menu in any of your project. Please post your thoughts and ideas below, thanks!