Arduino Menu on a Nokia 5110

Lcd Using a Rotary Encoder

Made by Nick Koumaris

Published in Arduino and Make:

ABOUT THIS PROJECT

Dear friends welcome to another tutorial! In this video we are going learn how to build
ourown menu for the popular Nokia 5110 LCD displa...
 arduino

electronics

diy

PROJECT INFO

Type
Full instructions provided
Difficulty
Intermediate
Estimated time
1 hour
Published
April 15, 2017
License
GPL3+

949

Respect projectI made one

Bookmark Share Give feedback

THINGS USED IN THIS PROJECT
Hardware components:

Arduino UNO & Genuino UNO

1

Rotary Encoder
1

Nokia 5110 LCD

1

Software apps and online services:

Arduino IDE

STORY
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. Lets 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.

Lets 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://bit.ly/Cheap_Uno

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

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

A small breaboard http://bit.ly/SmallBreadboard

Some Wires http://bit.ly/Wires3InOne

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://bit.ly/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 rotationincluding 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://bit.ly/RotaryEncoder

Step 4: Building the Project

 PreviousNext
1
2
3
4
Lets now connect all the parts together. Before building this project, if you havent 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. Lets 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, lets 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.

Thats 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.

Nokia5110MenuRotary.ino

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!
CODE
Code snippet #2Plain text
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;

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