Dear friends welcome to another video!
Today we are going to use an Arduino to build
a simple menu on a Nokia 5110 LCD display.
Let’s get started!
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.
In this video we are going learn how to build
our own menus for the popular Nokia 5110 LCD
display, in order to make our projects more
user friendly and more capable.
Stefan, a friend from Germany, asked for this
project so here it is!
This is the project we are going to build.
In the display a simple menu appears, and
with the help of three buttons I can navigate
up, or down and select a menu item.
Let’s select the first option.
As you can see a new a UI screen is displayed
and by pressing the up and down buttons we
can change the contrast of the display.
If we press the middle button again, we go
back to the main UI screen.
If we now select the second menu item and
press the middle button we can turn the backlight
of the display on or off.
Lastly if we navigate to the last menu item
we can reset the settings for the display
to the default values.
Of course this is just a demonstration project,
you can modify it to build your own more complex
menus if you wish.
Let’s now see how to build this project.
The parts needed in order to build this project
are the following:
• An Arduino Uno or any other compatible
board
• A Nokia 5110 LCD display
• 3 Push buttons
• A small breadboard
• Some 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.
Let’s now connect all the parts together.
I have placed the display and the buttons
on the breadboard like this.
First let’s connect all the grounds to the
breadboard negative rail.
Then we connect the negative rail of the breadboard
to Arduino GND.
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 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.
Now all we have to do is to connect the pushbuttons.
The left button goes to digital pin 0, the
middle button goes to digital pin 1 and lastly
the right button goes to digital pin 2.
Please watch the detailed tutorial I have
prepared on how to connect a button to Arduino
without a resistor by clicking on the card
here!
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.
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 two libraries for the
display from Adafruit.
You can find links for both in the description
of the video.
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 miliseconds,
so if there is a change on the menu this function
is responsible for updating the menu on the
screen.
There are also two very important global variables,
the variable page and the variable menuitem.
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 Contrast UI screen.
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.
At first we initialize the display.
In the loop, at first we call the drawMenu
function to draw the menu on the screen.
Then we check every button to see if it is
pressed.
If one button is pressed, then we take action.
For example, if we are on the main UI screen
and the first menu item is selected, if we
press the right button, 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 middle button, the backlight
will disable and in the next loop the drawMenu
function will update the display to show the
backlight is off, using the Boolean backlight
variable.
That’s the basic idea behind this menu.
We follow the same procedure for all the menu
items and pages.
It seems complicated but if you try it yourself
you are going to understand it more easily
and you will be able to expand it with more
menu items and UI pages.
As always you can find the code of the project
in a link in the description below.
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!
If this is your first time here, I would love
to have you subscribed.
In this channel I post videos about DIY projects
every Saturday.
I love making things and I believe that anyone
can make things, anyone can become a maker.
That’s why I created this channel, in order
to share my knowledge with the community and
learn from the community.
I hope you will join us.
Until next Saturday, Watch, Learn, Build!
[ Translating these subtitles? Add your name here! ]
