We have published quite a number of tutorials using different displays with the Arduino, with the most recent being the tutorial on displaying graphics on all kind of displays with Arduino. For today’s tutorial, we will look into achieving more with displays by implementing a menu based system with the Nokia 5110 LCD display and the Arduino. The menu is one of the easiest and most intuitive ways through which users interact with products that require navigation. From mobile phone to PCs, its applications are endless. Today we will explore how to add this cool feature to your Arduino project.

At the heart of today’s project is the Nokia 5110 LCD Display. The Nokia 5110 LCD is one of the most popular LCD display among makers. It was originally developed for use as a screen for cell phones and was used in lots of mobile phones during the 90’s. The display uses a low power CMOS LCD controller/driver, the PCD8544, which drives the 84×48px graphics display. In a normal state, the display consumes about 6 to 7mA which makes it quite ideal for low power devices. We have published quite a number of tutorials on this display that might help you understand how to drive such a display.

To showcase how to create the menu on a display with the Arduino, we will build a simple demo menu with three pages.  To navigate through the menu, we will use 3x push buttons. The first to scroll up, the second to scroll down and the third one to select a highlighted option. The first screen/page of the menu will serve as the home page and will host the options that open the next two screens/pages. The second page will open after the first menu option on the homepage has been selected. Users will be able to change the contrast of the display using the up and down push buttons to increase or reduce it respectively. By pressing the select button, users will be able to go back to the home page. The second option on the homepage displays the third page, where users will be able to turn the backlight of the display on/off by pressing the select item button.

Selecting the last option on the homepage does what it is labeled for, it clears all the previous settings for the contrast and backlight. This is a fun and interesting project which I believe can be very useful to anyone irrespective of your technical know-how level.

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

Required Components

The following components are required to build this project;

1. Arduino Uno
2. Nokia 5110 LCD 
3. Small Breadboard
4. Buttons
5. Jumper Wires
6. Wires

As usual, the exact components used for this tutorial can be bought via the link attached to each of them.

Schematics

The schematics for this project is quite simple, connect the components as shown in the schematics below.

To make the schematics easy to follow, a pin map of the connection between the Arduino Uno and the Nokia 5110, which isthe major component, is shown below.

LCD - Arduino
RST - D12 
CE  - D11 
DC  - D10 
DIN - D9 
CLK - D8 
VCC - VCC
LIGHT - D7
GND - GND

Looking at the schematics, you will see that the push buttons are connected to the Arduino without the common pull-up or pull-down resistors. This is because we will use the Arduino’s internal pull-up resistor. You can read more about using pull-up/down resistors here. If you have any challenges understanding the concept, do reach out to me via the comment section.

With the connections all done, we can now proceed to the code for the project. It might be useful to go over the entire connection one more time to ensure everything is as it should be.

Code

To be fair, the code for today’s tutorial is a little bit complex and while I will do my best to break it down and ensure you understand the basics, it might take you building your own menu to fully grab the concept. The code for today is heavily dependent on two major libraries; The Adafruit GFX library and the Adafruit Nokia 5110 LCD Library. The Adafruit GFX library is probably one of the libraries we use the most in our tutorials. It makes it easy to display graphics and perform simple animations on supported displays. The Nokia 5110 LCD library, on the other hand, reduces the amount of work and code required to interact with the LCD.

We start the code as with other sketches by including all the libraries required for the project which in this case, are the Adafruit GFX and Nokia 5110 LCD libraries.

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

Next, we declare the pins to which the buttons are connected and also declare all the variables that we will use for the project. I believe the variable name provides enough insight into what each variable stands for.

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 write the void setup function. Here we declare all the pins to which the push buttons are connected as inputs and set digital pin 7 as output since the Light pin of the LCD is connected to it. This pin will be used to turn the backlight on/off later on.

void setup() {

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

After setting the pin modes, we initialize serial communication, initialize the screen, and set the screen contrast to 50 which serves as a default value (to be varied later using the menu buttons) and use the display.display() function to apply the changes.

Serial.begin(9600);

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

Next, we write the void loop function. We start the void loop function by calling the drawmenu() function which contains the code to create the menu objects on the screen.

void loop() {
 
 drawMenu();

Next, we read the buttons to check if any of them has been pressed.

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

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

The state of the buttons is then fed into a series of if-else statements which checks which button was pressed and which of the screens is currently being displayed to determine what action is done next. For instance, the first if statement checks if the menu is currently on page 1 and if the up button is pressed. If this is the case, it then checks the position of the menu cursor and adjusts it accordingly.

  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;
     }
   }
   
  }

The remaining part of the sketch are the functions called within the loop function.

void drawMenu()
  {
    
  if (page==1) 
  {    
    display.setTextSize(1);
    display.clearDisplay();
    display.setTextColor(BLACK, WHITE);
    display.setCursor(15, 0);
    display.print("MAIN MENU");
    display.drawFastHLine(0,10,83,BLACK);
    display.setCursor(0, 15);
   
    if (menuitem==1) 
    { 
      display.setTextColor(WHITE, BLACK);
    }
    else 
    {
      display.setTextColor(BLACK, WHITE);
    }
    display.print(">Contrast");
    display.setCursor(0, 25);
   
    if (menuitem==2) 
    {
      display.setTextColor(WHITE, BLACK);
    }
    else 
    {
      display.setTextColor(BLACK, WHITE);
    }    
    display.print(">Light: ");
    
    if (backlight) 
    {
      display.print("ON");
    }
    else 
    {
      display.print("OFF");
    }
    display.display();
    
    if (menuitem==3) 
    { 
      display.setTextColor(WHITE, BLACK);
    }
    else 
    {
      display.setTextColor(BLACK, WHITE);
    }  
    display.setCursor(0, 35);
    display.print(">Reset");
    display.display();
  }
    
 
  else if (page==2) 
  {
    
    display.setTextSize(1);
    display.clearDisplay();
    display.setTextColor(BLACK, WHITE);
    display.setCursor(15, 0);
    display.print("CONTRAST");
    display.drawFastHLine(0,10,83,BLACK);
    display.setCursor(5, 15);
    display.print("Value");
    display.setTextSize(2);
    display.setCursor(5, 25);
    display.print(contrast);
 
    display.setTextSize(2);
    display.display();
  }
  
  }

  void resetDefaults()
  {
    contrast = 50;
    setContrast();
    backlight = true;
    turnBacklightOn();
  }

  void setContrast()
  {
    display.setContrast(contrast);
    display.display();
  }

  void turnBacklightOn()
  {
    digitalWrite(7,LOW);
  }

    void turnBacklightOff()
  {
    digitalWrite(7,HIGH);
  }

The complete code for the project is available below and attached under the download section at the end of the tutorial.

#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;

Adafruit_PCD8544 display = Adafruit_PCD8544( 5, 4, 3);

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();   
}

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;
     }
   }
   
  }

  void checkIfDownButtonIsPressed()
  {
    if (downButtonState != lastDownButtonState) 
  {
    if (downButtonState == 0) 
    {
      down=true;
    }
    delay(50);
  }
   lastDownButtonState = downButtonState;
  }

void checkIfUpButtonIsPressed()
{
  if (upButtonState != lastUpButtonState) 
  {
    if (upButtonState == 0) {
      up=true;
    }
    delay(50);
  }
   lastUpButtonState = upButtonState;
}

void checkIfSelectButtonIsPressed()
{
   if (selectButtonState != lastSelectButtonState) 
  {
    if (selectButtonState == 0) {
      middle=true;
    }
    delay(50);
  }
   lastSelectButtonState = selectButtonState;
}

  
  void drawMenu()
  {
    
  if (page==1) 
  {    
    display.setTextSize(1);
    display.clearDisplay();
    display.setTextColor(BLACK, WHITE);
    display.setCursor(15, 0);
    display.print("MAIN MENU");
    display.drawFastHLine(0,10,83,BLACK);
    display.setCursor(0, 15);
   
    if (menuitem==1) 
    { 
      display.setTextColor(WHITE, BLACK);
    }
    else 
    {
      display.setTextColor(BLACK, WHITE);
    }
    display.print(">Contrast");
    display.setCursor(0, 25);
   
    if (menuitem==2) 
    {
      display.setTextColor(WHITE, BLACK);
    }
    else 
    {
      display.setTextColor(BLACK, WHITE);
    }    
    display.print(">Light: ");
    
    if (backlight) 
    {
      display.print("ON");
    }
    else 
    {
      display.print("OFF");
    }
    display.display();
    
    if (menuitem==3) 
    { 
      display.setTextColor(WHITE, BLACK);
    }
    else 
    {
      display.setTextColor(BLACK, WHITE);
    }  
    display.setCursor(0, 35);
    display.print(">Reset");
    display.display();
  }
    
 
  else if (page==2) 
  {
    
    display.setTextSize(1);
    display.clearDisplay();
    display.setTextColor(BLACK, WHITE);
    display.setCursor(15, 0);
    display.print("CONTRAST");
    display.drawFastHLine(0,10,83,BLACK);
    display.setCursor(5, 15);
    display.print("Value");
    display.setTextSize(2);
    display.setCursor(5, 25);
    display.print(contrast);
 
    display.setTextSize(2);
    display.display();
  }
  
  }

  void resetDefaults()
  {
    contrast = 50;
    setContrast();
    backlight = true;
    turnBacklightOn();
  }

  void setContrast()
  {
    display.setContrast(contrast);
    display.display();
  }

  void turnBacklightOn()
  {
    digitalWrite(7,LOW);
  }

    void turnBacklightOff()
  {
    digitalWrite(7,HIGH);
  }

Demo

Go through the schematics one more time to ensure everything is connected as it should be, then connect the Arduino to your computer and upload the code. After a couple of seconds, you should see the menu displayed on the LCD and it should respond to the push buttons when pressed.

That’s it for today’s tutorial. Thanks for reading. While this is certainly not a project that is useful on its own, it will be a fantastic feature to add to your existing or new projects. Feel free to reach out via the comment section with your questions, suggestions, and comments on today’s tutorial. I will try to reply to them as soon as possible.

The video version of today’s tutorial is available on Youtube.

Over the last few articles, we have covered the use of ESP8266 boards for building several WiFi based projects. For today’s tutorial, we will look at it’s recently released successor; the ESP32.

As mentioned in previous tutorials, ESP-12e module popularly referred as the nodeMCU came at a time where makers were struggling with the difficulties around the use of the ESP-01 modules. The ESP-01 modules were not breadboard compatible, had power issues, and could barely be used in a standalone application where more than two GPIOs are required. The NodeMCU solved all these issues adding additional features and it immediately became a darling of the maker community. However, the ESP8266 equally had its own limitations and like every good product, there was a need to improve it. This improvement came in the form of the ESP32.

The ESP32 is way advanced compared to the ESP-12e. Among several features, the ESP32 packs a CPU core, a faster Wi-Fi, more GPIOs (especially increased analog pins that we all desired), supports Bluetooth 4.2 and Bluetooth low energy. The board also comes with touch-sensitive pins, alongside a built-in hall effect and temperature sensors. While both boards are quite cheap, the ESP32 ($6 – $12) costs slightly more than the ESP-12e ($3-$6).

The table below provides a more detailed comparison between the two modules.

	ESP8266	ESP32
Microcontroller	Xtensa Single-core 32-bit L106	Xtensa Dual-Core 32-bit LX6 with 600 DMIPS
Wi-Fi Module	HT20	HT40
Bluetooth Support	X	Bluetooth 4.2 and BLE
Frequency	80 MHz	160 MHz
SRAM Availability	X	✓
Flash Availability	X	✓
GPIO	17	36
Hardware /Software PWM	None / 8 channels	None / 16 channels
SPI/I2C/I2S/UART	2/1/2/2	4/2/2/2
ADC Resolution	10-bit	12-bit
CAN Support	X	✓
Ethernet MAC Interface	X	✓
Touch Sensor	X	✓
Temperature Sensor	X	✓
Hall effect sensor	X	✓
Working Temperature	-40ºC to 125ºC	-40ºC to 125ºC

Today’s tutorial will not only provide a comparison between these boards, but it will also show you how to put the ESP32 board to use. We will look at setting up the ESP32 module for programming with the Arduino IDE and we will run the Arduino blink example on the board. This will allow you to setup all that is needed for the exciting projects we will build with this new board over the next few tutorials.

Required Components

The following components are required for this tutorial;

1. ESP32 based development board ( I will be using the DOIT DEVKIT V1 board)
2. Breadboard
3. Jumper wires.
4. 100 Ohms resistor
5. LED

The tutorial should work with any ESP32 based board. The choice of the DOIT DevKIT V1 is as a result of its availability and general popularity.

Schematics

We will connect a LED to the ESP32 such as that the LED blinks as the popular blink example.

Connect the LED to the ESP32 as shown below.

Programming the ESP32

Like the ESP-12e modules and boards, the ESP32 modules and boards can also be programmed with LUA on the ESPlorer IDE or with C/C++ on the Arduino IDE. However, like the ESP8266, we will need to install the ESP32 core and board files on the Arduino IDE before it can be used to upload code to the ESP32.

The process of installing the ESP32 core on the Arduino IDE is similar to the one we followed to install the ESP8266 Arduino Core.  Follow the steps below:

– Open the preferences window from the Arduino IDE. Go to File > Preferences

– On the preferences window, locate the “Additional Board Manager URLs” text box and enter https://dl.espressif.com/dl/package_esp32_index.json into the field as shown below. As you may have other URLs there already, separate the URLs from each other using a comma (“,”) and click OK when done.

– Next, open the Arduino board manager. Go to tools > Boards > Boards manager

– When the board manager opens up, enter ESP32 into the search bar and scroll to the bottom, you will see “ESP32 by Espressif systems”, click on install.

Click on Install

With that done, you should now see quite a number of ESP32 based boards under the Arduino Board list.

You should also be able to see quite a number of libraries installed alongside the core. The libraries are pretty extensive and should cover for most of the tasks you might need to do with the ESP32.

At this point, it is important to note that the ESP32 is completely different from the ESP8266, and the code for ESP8266 based projects will not work directly on the ESP32 until necessary modifications are made. Also, most of ESP8266 compatible libraries are not compatible with the ESP32 so quite a number of modification may be required. This is one of the downsides to building projects based on the ESP32.

With that done, we can now write the code for the demo project.

Code

The code for this tutorial is the blink example we are all familiar with.

Load the example by going to tools and selecting your ESP32 board (Mine is the DOIT ESP32 DEVKIT V1) then go to file > examples > built-in examples > basics > blink. This will open the blink example.

While I believe most people understand the blink code, to stick to the tradition, I will do a brief explanation.

We will make a slight modification to the code since we connected our LED to a pin different from the one on which the ESP32’s built-in LED is located. We start by declaring that pin.

int LED = 2;

Next is the void setup() function. All we need to do here is set the pin to which our led is connected as an output.

void setup() 
{
  pinMode (LED, OUTPUT);
}

Lastly, the void loop function. Here we create lines of code to turn the LED on and off after certain intervals to create the blink effect.

void loop() 
{
  digitalWrite(LED, HIGH);
  delay(1000);
  digitalWrite(LED_BUILTIN, LOW);
  delay(1000);
}

The complete code for the project is available below.

int LED = 2;
void setup() 

{
   pinMode (LED, OUTPUT);
}

void loop() 
{
  digitalWrite(LED, HIGH);
  delay(1000);
  digitalWrite(LED, LOW);
  delay(1000);
}

Demo

Connect the LED to the DOIT DEVKIT as illustrated in the schematics above and then connect the board to your computer and upload the code. You should see the LED blinking. It’s important to note that most ESP32 based boards have the “boot” button which must be pressed once the code is uploaded to the board.

That’s it for this tutorial guys. Over the next few tutorials, we will build more interesting and challenging projects using the WiFi and Bluetooth functionalities of the ESP32.  Do reach out via the comment section if you have any question(s).