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!

Arduino Nokia 5110 Menu

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.

Required Components/parts and Where to Buy

The parts listed below are needed in order to build this project and can be bought by clicking on the link in front of each part.

Arduino Uno ▶  https://educ8s.tv/part/ArduinoUno

Nokia 5110 LCD ▶ https://educ8s.tv/part/NOKIA5110

Small Breadboard ▶ https://educ8s.tv/part/SmallBreadboard

Buttons ▶ https://educ8s.tv/part/Buttons

Jumper Wires ▶ https://educ8s.tv/part/JumperWires

Wires ▶ https://educ8s.tv/part/Wires

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!

[adsense]

 

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.

The full code for the project is available for download below.

——————–

CODE OF THE PROJECT
——————–

 

 

That’s it for this tutorial, thanks for watching and reading. You can show support by dropping comments here and subscribing to our channel on youtube.

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]