Hello guys, Nick again, welcome to educ8s.tv,  a channel dedicated to DIY electronics projects with Arduino, Raspberry Pi, ESP8266 and other popular boards.

Today we are going to be creating a rotary encoder controlled menu on a Nokia 5110 LCD display. Let’s get started!

 

In today’s tutorial, we are going learn how to build our own menu for the popular Nokia 5110 LCD display, in order to make our projects more user-friendly and infuse it with more capabilities. We have built a similar project in the past, but a lot of our viewers suggested that I should prepare another video on this subject so here it is.

The last time out, we used pushbuttons to navigate through the menu, but today, we will be using the rotary encoder to navigate through the menu. We will also be adding more options to the menu from the previous tutorial to enable us fully explore the ability of the rotary encoder to serve as a navigation tool.

A rotary encoder is an electro-mechanical device which converts the angular position or rotation of its shaft or axle to an analog or digital signal. They are used in several systems where precision and feedback in terms of rotational motion or angular position are required. Another good feature of the rotary encoder which will come in handy for this tutorial is that they come with buttons attached, so it can be clicked by pressing the nob and it will be recognized by the Arduino just as it will if it were any other button or switch.

Rotary Encoder

To demonstrate the Arduino rotary encoder menu, we will be creating a simple menu which is displayed on the Nokia 5110 LCD display when the project is powered and with the rotary encoder, we will be able to navigate up or down the menu, selecting a menu option by pressing the rotary encoder button. The menu has 6 items, and as we navigate and select each item, the display will change accordingly. Sound’s exciting then let’s build.

Required Components and Where to Buy

The following components/parts are required to build this project and they can be bought through the link in front of each component.

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

2. Rotary Encoder ▶ https://educ8s.tv/part/RotaryEncoder

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

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

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

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

7. Power Bank ▶ https://educ8s.tv/part/Powerbank

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

Connect the components/parts as shown in the schematics below.

Schematics

To simplify the schematics further, the pin connection between the components is described below.

LCD ▶ Arduino
Reset ▶ D3

pin2 ▶ D4

pin3 ▶ D5

pin4 ▶ D11

pin5 ▶ D13

VCC ▶ 3.3v

Backlight ▶ D7

GND ▶ GND


Rotary Encoder ▶ Arduino

GND ▶ GND

VCC  ▶ VCC

SW ▶  A2

DT ▶ A1

CLK ▶ A0

Connect the components as described and double check your connections to make sure there is no mistake.

 

Code

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 to totally grab it, I will advise you try creating your own menu and see exactly how it works.

To implement this project, we will be using 4 libraries. Two out of the four libraries will be used for the display, and the remaining two will be used to interface with the rotary encoder.

LIBRARIES

?  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

To briefly explain the code;

The first thing we do is include the libraries we will be using for the project.

//////////////////////////////////////////////
  //       Arduino Rotary Encoder Menu        //
 //                 v1.0                     //
//           http://www.educ8s.tv           //
/////////////////////////////////////////////

#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>
#include <ClickEncoder.h>
#include <TimerOne.h>

Next, we create variables to hold the menus after which we create an object of the click encoder and the LCD library.

int menuitem = 1;
int frame = 1;
int page = 1;
int lastMenuItem = 1;

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;

boolean up = false;
boolean down = false;
boolean middle = false;

ClickEncoder *encoder;
int16_t last, value;

Adafruit_PCD8544 display = Adafruit_PCD8544( 5, 4, 3); //Download the latest Adafruit Library in order to use this constructor

Next, we write the void setup function. The void setup function contains the code used to initialize our screen and the rotary encoder setting it to start at zero. We also created an interrupt routine which will be used to detect button press during within any of the menu pages.

void setup() {

  pinMode(7,OUTPUT);
  turnBacklightOn();
  
  encoder = new ClickEncoder(A1, A0, A2);
  encoder->setAccelerationEnabled(false);
   
  display.begin();      
  display.clearDisplay(); 
  setContrast();  

  Timer1.initialize(1000);
  Timer1.attachInterrupt(timerIsr); 
  
  last = encoder->getValue();
}

With the void setup() all done, we proceed to write the void loop function which is the one with some level of complexity. The function basically creates the menu and uses the variables created initially to keep track of the previous, current and next state so when the rotary encoder is turned, it knows the right menu to display. The menu selection part of the code is also handled by a routine within the void loop() function.

The complete code for this project (Arduino Rotary Encoder Menu.) can be downloaded by clicking the link below.

CODE OF THE PROJECT

 

 

Upload the code to your Arduino board and you should see the display come up as shown in the image below.

Demo

That’s it for this tutorial guys, thanks for watching/reading. As usual, feel free to reach out to me via comments should you get stuck with any of the steps, I will be glad to help. Also by subscribing, you get notified by youtube whenever we post a new tutorial video so please, subscribe.

 

 

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv