arduino menu on a nokia 5110 lcd using a rotary encoder
by：Kimeery
2020-03-23
Welcome to another tutorial, dear friends!
In this video, we will learn how to build our own menu for the popular Nokia 5110 LCD display to make our project more user friendly and powerful.
Let\'s start!
This is the project we will build.
A simple menu appears in the display, and with the help of the rotary encoder, I can navigate up and down and select the 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 the variable.
If we press the rotate encoder button again, we will go back to the main menu screen.
There are 6 items in the menu, we can scroll down or up the menu and the items on the display will change accordingly.
Watch the attached video and see how this menu works.
Of course, you can modify it to build your own more complex menu if you want.
Now let\'s see how to build this project.
The part needed to build the project is as follows: the cost of the project is low, less than $10.
You can find the link to all the sections I use in the video description below.
The Nokia 5110 is my favorite Arduino project display.
The Nokia 5110 is the basic graphic LCD screen originally used as a mobile phone screen.
It uses a PCD8544 controller for a low-power cmos LCD controller/driver.
Because of this, the power consumption of this monitor is impressive. It uses only 0.
4 mA when it is turned on but the backlight is disabled.
It uses less than 0.
06 mA when in sleep mode!
This is one of the reasons why I like this monitor best.
The PCD8544 is connected to the micro controller via the serial bus interface.
This makes the display very easy to use with Arduino.
All you need to do is connect 8 wires.
I have prepared a detailed tutorial on how to use the Nokia 5110 LCD display with Arduino.
I have attached this video to this note and it will provide useful information about the display, so I encourage you to watch it carefully.
The cost of the display is about $4.
You can get it here:▶The rotary encoder, also known as the shaft encoder, is an electric encoder.
A mechanical device that converts the angle position or movement of an axis or shaft into an analog or digital code.
Rotary encoders are used in many applications that require infinite rotation of precise axes-
Including industrial control, robots, special photographic lenses, computer input equipment (
Such as light mechanical mouse and trackball)
Controllable pressure flow meter and rotating radar platform.
The rotary encoder we will use in this project is a very cheap one.
It is also embedded with a button, we only need to connect 5 wires to make it work.
I have prepared a detailed tutorial on how to use the rotary encoder.
You can find this video here.
The cost of this rotary encoder is very low.
About $1. 5.
You can get it here. ▶Now connect all the parts together.
Before building this project, if you have not used a rotary encoder in the past, I encourage you to take a look at the tutorial I prepared about the rotary encoder.
This will help you understand how the rotary encoder works and you will gain some experience.
This video is attached here.
I have put the monitor on a bun board like this.
Let\'s connect the display first.
The first pin of the reset display goes to the digital pin 3 of the Arduino Uno, the second to the digital pin 4, and the third to the digital pin 5, the fourth pin of the digital pin 11 and the fifth pin of the digital pin 13.
The next pin is Vcc.
We connect the Vcc to the right track of the breadboard and the breadboard to 3 on the right track.
3 v output of Arduino.
The next pin is the backlight of the display.
Since we want to control it through software, we connect it to the digital pin 7.
The last pin is GND.
We connect the GND to the negative rail of the breadboard and the negative rail of the breadboard to the Arduino GND.
Now all we have to do is connect the rotary encoder.
The first pin is GND and we connect it to the negative rail of the breadboard.
The next pin is Vcc and we connect it to the right track of the breadboard.
The next pin is SW and we connect it to analog pin 2.
The next pin is called DT and we connect it to analog pin 1.
Finally, the pin CLK is connected to the analog pin 0.
You can find a schematic diagram of this project in the video description below.
Now we are ready to start the project.
As you can see, the project works fine and the menu works as expected!
Great, now let\'s take a look at the software for this project.
In this project, we use 4 libraries.
We use two libraries for display, two for rotary encoder.
Let\'s first take a look at the drawMenu function.
This function is responsible for drawing menus on the display screen.
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.
There are also 3 very important global variables, variable pages, variable menu items, and variable boxes.
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 set the value of the variable in the secondary UI screen.
Menu items remember the selected menu items.
So if its value is 1, select the first menu item, so the drawMenu function must draw the menu item in black in white letters.
If the menu item is 2, select the second menu item, and so on.
Frame variable, remember which part of the menu is displayed on the screen.
Since the menu we created contains 6 items, we can only display 3 of them at a time, so we need to know which items are displayed on the screen.
The Frame variable tells us this.
If the value of the frame variable is 1, we will display the first three menu items, and if it is 2, we will display items 2,3, 4 and so on.
I\'m trying to make the code as easy to modify as possible, so I \'ve created some global variables that contain the name of the menu item.
This way, you can easily create your own menu without searching in your code.
First, we initialize all the global variables needed in the code.
Next, we initialize the display.
In the Loop function, first we call the drawMenu function to draw the menu on the screen.
We then 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 of the rotary encoder increases, the menuitem variable increases, in the next loop, the drawMenu function will draw the second menu item selected.
If we press the button to rotate the encoder now, we navigate to the second page where we set the value of the variable.
Using the rotary encoder again, we can increase or decrease the value of the variable.
If we press the button, we will navigate back to the main menu page and the page variables will be reduced.
This is the basic idea behind the menu.
We follow the same procedure for all menu items and pages.
The code is complex, with more than 400 lines.
It looks complicated, but if you try it yourself, it will be easier for you to understand it and you can change it, expand it and use it in your own project.
As always, you can find the additional code here.
If we load the code, we can see that the project works as expected.
We can use the axis up and down navigation menu and we can select any menu item by pressing the rotate encoder button.
So cool!
Now that we know how to build menus for the Nokia 5110 LCD display, we can add more features to our project and make them more user friendly.
However, the simple menu we built today can be improved.
We can use interrupts instead of checking the button status all the time.
In this way, we can reduce the power consumption of the project and make the code cleaner.
I will be preparing a video soon about the interruption, so please keep an eye on it.
I would love to hear what you think about this menu item.
Do you think it works? Do you plan to use the menu in any of your projects?
Please post your thoughts and ideas below, thank you!
In this video, we will learn how to build our own menu for the popular Nokia 5110 LCD display to make our project more user friendly and powerful.
Let\'s start!
This is the project we will build.
A simple menu appears in the display, and with the help of the rotary encoder, I can navigate up and down and select the 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 the variable.
If we press the rotate encoder button again, we will go back to the main menu screen.
There are 6 items in the menu, we can scroll down or up the menu and the items on the display will change accordingly.
Watch the attached video and see how this menu works.
Of course, you can modify it to build your own more complex menu if you want.
Now let\'s see how to build this project.
The part needed to build the project is as follows: the cost of the project is low, less than $10.
You can find the link to all the sections I use in the video description below.
The Nokia 5110 is my favorite Arduino project display.
The Nokia 5110 is the basic graphic LCD screen originally used as a mobile phone screen.
It uses a PCD8544 controller for a low-power cmos LCD controller/driver.
Because of this, the power consumption of this monitor is impressive. It uses only 0.
4 mA when it is turned on but the backlight is disabled.
It uses less than 0.
06 mA when in sleep mode!
This is one of the reasons why I like this monitor best.
The PCD8544 is connected to the micro controller via the serial bus interface.
This makes the display very easy to use with Arduino.
All you need to do is connect 8 wires.
I have prepared a detailed tutorial on how to use the Nokia 5110 LCD display with Arduino.
I have attached this video to this note and it will provide useful information about the display, so I encourage you to watch it carefully.
The cost of the display is about $4.
You can get it here:▶The rotary encoder, also known as the shaft encoder, is an electric encoder.
A mechanical device that converts the angle position or movement of an axis or shaft into an analog or digital code.
Rotary encoders are used in many applications that require infinite rotation of precise axes-
Including industrial control, robots, special photographic lenses, computer input equipment (
Such as light mechanical mouse and trackball)
Controllable pressure flow meter and rotating radar platform.
The rotary encoder we will use in this project is a very cheap one.
It is also embedded with a button, we only need to connect 5 wires to make it work.
I have prepared a detailed tutorial on how to use the rotary encoder.
You can find this video here.
The cost of this rotary encoder is very low.
About $1. 5.
You can get it here. ▶Now connect all the parts together.
Before building this project, if you have not used a rotary encoder in the past, I encourage you to take a look at the tutorial I prepared about the rotary encoder.
This will help you understand how the rotary encoder works and you will gain some experience.
This video is attached here.
I have put the monitor on a bun board like this.
Let\'s connect the display first.
The first pin of the reset display goes to the digital pin 3 of the Arduino Uno, the second to the digital pin 4, and the third to the digital pin 5, the fourth pin of the digital pin 11 and the fifth pin of the digital pin 13.
The next pin is Vcc.
We connect the Vcc to the right track of the breadboard and the breadboard to 3 on the right track.
3 v output of Arduino.
The next pin is the backlight of the display.
Since we want to control it through software, we connect it to the digital pin 7.
The last pin is GND.
We connect the GND to the negative rail of the breadboard and the negative rail of the breadboard to the Arduino GND.
Now all we have to do is connect the rotary encoder.
The first pin is GND and we connect it to the negative rail of the breadboard.
The next pin is Vcc and we connect it to the right track of the breadboard.
The next pin is SW and we connect it to analog pin 2.
The next pin is called DT and we connect it to analog pin 1.
Finally, the pin CLK is connected to the analog pin 0.
You can find a schematic diagram of this project in the video description below.
Now we are ready to start the project.
As you can see, the project works fine and the menu works as expected!
Great, now let\'s take a look at the software for this project.
In this project, we use 4 libraries.
We use two libraries for display, two for rotary encoder.
Let\'s first take a look at the drawMenu function.
This function is responsible for drawing menus on the display screen.
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.
There are also 3 very important global variables, variable pages, variable menu items, and variable boxes.
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 set the value of the variable in the secondary UI screen.
Menu items remember the selected menu items.
So if its value is 1, select the first menu item, so the drawMenu function must draw the menu item in black in white letters.
If the menu item is 2, select the second menu item, and so on.
Frame variable, remember which part of the menu is displayed on the screen.
Since the menu we created contains 6 items, we can only display 3 of them at a time, so we need to know which items are displayed on the screen.
The Frame variable tells us this.
If the value of the frame variable is 1, we will display the first three menu items, and if it is 2, we will display items 2,3, 4 and so on.
I\'m trying to make the code as easy to modify as possible, so I \'ve created some global variables that contain the name of the menu item.
This way, you can easily create your own menu without searching in your code.
First, we initialize all the global variables needed in the code.
Next, we initialize the display.
In the Loop function, first we call the drawMenu function to draw the menu on the screen.
We then 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 of the rotary encoder increases, the menuitem variable increases, in the next loop, the drawMenu function will draw the second menu item selected.
If we press the button to rotate the encoder now, we navigate to the second page where we set the value of the variable.
Using the rotary encoder again, we can increase or decrease the value of the variable.
If we press the button, we will navigate back to the main menu page and the page variables will be reduced.
This is the basic idea behind the menu.
We follow the same procedure for all menu items and pages.
The code is complex, with more than 400 lines.
It looks complicated, but if you try it yourself, it will be easier for you to understand it and you can change it, expand it and use it in your own project.
As always, you can find the additional code here.
If we load the code, we can see that the project works as expected.
We can use the axis up and down navigation menu and we can select any menu item by pressing the rotate encoder button.
So cool!
Now that we know how to build menus for the Nokia 5110 LCD display, we can add more features to our project and make them more user friendly.
However, the simple menu we built today can be improved.
We can use interrupts instead of checking the button status all the time.
In this way, we can reduce the power consumption of the project and make the code cleaner.
I will be preparing a video soon about the interruption, so please keep an eye on it.
I would love to hear what you think about this menu item.
Do you think it works? Do you plan to use the menu in any of your projects?
Please post your thoughts and ideas below, thank you!
Custom message
