Arduino Nokia 5110 Menu

Hello guys, I am Nick and welcome once again to educ8s.tv a channel/blog that is all
about DIY electronics projects with Arduino, Raspberry Pi, ESP8266 and other popular
boards.

In today’s tutorial, we are going learn how to build our own menu for the popular Nokia
5110 LCD display, which has the ability to make our projects more user-friendly and
more capable. We will be using an Arduino Uno today but you can obviously use any
other Arduino board. Stefan, a friend from Germany, asked for this project, and I
believe everyone can benefit from it so here it is!

The goal behind the operation of the project is simple, When the device is turned on, a
simple menu appears, and with the help of three buttons, we will be able to navigate
through the menu with buttons for up, down and to select a menu item. The first option
in the menu is to set the Contrast of the display. By selecting the first option a new UI
screen will be 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.

The second menu item in the main UI screen helps to turn the backlight of the display
on or off. Selecting it by pressing the middle button turns 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.

This project is just a demonstration to show what is possible as regards a putting a menu
on the Nokia 5110 LCD Display, you can modify the project to fit into your own more
complex project’s, menu requirement.

That’s it for introduction, Let’s now see how to build this project.

Project Parts
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!

Schematics
While we have done a lot of tutorials on this website to cover several things around the
Nokia 5110 LCD display, like how to load your own custom graphics on the display
which can be found at this link (https://www.youtube.com/watch?v=aDwrMeu4k9Y),
for visitors and those who would want to check out the connection again, connect the
components/parts as shown in the schematics below.

The pin connections of the LCD to the Arduino as implemented in the schematics is
described below to make it easy to follow.

LCD Arduino

Pin 1(RST) D12

Pin 2(CE) D11

Pin 3(DC) D10

Pin 4(DIN) D9
Pin 5(CLK) D8

Pin 6(VCC) VCC

Pin 7(LIGHT) D7

Pin 8(GND) GND

As you can see from the schematics that the pushbuttons are connected without a
resistor, check out this tutorial (https://youtu.be/VtZvf5T98FI) on how to connect your
pushbuttons without resistors. It is assumed that the connection between the switches
and the Arduino is seamless but if you do get stuck anywhere do feel free to reach out
via the comment section, I will be happy to help.

Code
The code of the Arduino Nokia 5110 Menu tutorial 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.

For this project, we will be using two libraries from Adafruit to allow us easily
communicate with the LCD while writing the code. You can find links for both libraries
below and also in the description of the video.

——————–
LIBRARIES
——————–

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

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

library

We are going to skip the explanation of the basic part of the code, those can be gotten
from other tutorials that involve the Nokia 5110 LCD like the one at this link.

The first thing we do as usual is to include the libraries that we will be using after
which we declare the variables that will be used to represent the buttons and other data.

#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>
boolean backlight = true;
int contrast=50;

int menuitem = 1;
int page = 1;

volatile boolean up = false;

volatile boolean down = false;
volatile boolean middle = false;

int downButtonState = 0;
int upButtonState = 0;
int selectButtonState = 0;
int lastDownButtonState = 0;
int lastSelectButtonState = 0;
int lastUpButtonState = 0;

Next, we move to the void setup function where we turn on the pull-up resistors that
allow us to use the push buttons without a resistor and also initialize the serial monitor
and our display.

void setup() {

pinMode(2, INPUT_PULLUP);
pinMode(1, INPUT_PULLUP);
pinMode(0, INPUT_PULLUP);
pinMode(7,OUTPUT);

digitalWrite(7,LOW); //Turn Backlight ON

Serial.begin(9600);

display.begin();
display.setContrast(contrast); //Set contrast to 50
display.clearDisplay();
display.display();
}

After the void setup, we proceed to the void loop function. The most important part of
the void loop function is calling the drawMenu function and taking actions based on the
status of the pushbuttons. The drawMenu function is responsible for drawing the Menu
on the display and 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.

void loop() {

drawMenu();

downButtonState = digitalRead(2);
selectButtonState = digitalRead(1);
upButtonState = digitalRead(0);

checkIfDownButtonIsPressed();
checkIfUpButtonIsPressed();
checkIfSelectButtonIsPressed();

if (up && page == 1 ) {

up = false;
 menuitem--;
if (menuitem==0)
{
menuitem=3;
}
}else if (up && page == 2 ) {
up = false;
contrast--;
setContrast();
}

if (down && page == 1) {

down = false;
menuitem++;
if (menuitem==4)
{
menuitem=1;
}
}else if (down && page == 2 ) {
down = false;
contrast++;
setContrast();
}

if (middle) {
middle = false;

if (page == 1 && menuitem==2)

{
if (backlight)
{
backlight = false;
turnBacklightOff();
}
else
{
backlight = true;
turnBacklightOn();
}
}

if(page == 1 && menuitem ==3)

{
resetDefaults();
}

else if (page == 1 && menuitem==1) {

page=2;
}
else if (page == 2) {
page=1;
}
}

There are also two very important global variables, the variable page, and the variable
menuitem. The variable page remembers which UI screen is currently being 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.