Arduino - LCD Keypad Shield
The Arduino LCD Keypad Shield is a useful module that combines a 16x2 LCD display with six push buttons (Right, Up, Down, Left, Select, and Reset) for user interaction. This tutorial will guide you through setting up and programming this shield using an Arduino board.
Hardware Required
Or you can buy the following kits:
| 1 | × | DIYables STEM V3 Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some links in this section are Amazon affiliate links. If you make a purchase through these links, we may earn a commission at no extra cost to you.
Additionally, some links direct to products from our own brand, DIYables .
Additionally, some links direct to products from our own brand, DIYables .
About LCD Keypad Shield
The LCD Keypad Shield has:
- A 16x2 LCD controlled by the LiquidCrystal library
- 5 push buttons connected to a single analog pin (A0)
- A reset button to restart the Arduino
- A potentiometer to adjust LCD contrast
Pinout
The table below illustrates the pin mapping between the LCD Keypad Shield and the Arduino when the shield is stacked onto the board.
| Shield Pin | Function | Arduino Pin |
|---|---|---|
| DB4 | Data | 4 |
| DB5 | Data | 5 |
| DB6 | Data | 6 |
| DB7 | Data | 7 |
| RS | Register Select | 8 |
| E | Enable | 9 |
| Analog A0 | Button Input | A0 |
Reset Button
The shield includes a reset button, which is connected to the Arduino's reset pin. Pressing this button will restart the Arduino, resetting the program.
Potentiometer
The shield features a small potentiometer near the LCD display. This is used to adjust the contrast of the LCD screen. If the text is not visible, try turning the potentiometer slowly to improve visibility.
Wiring Diagram
Simply plug the LCD Keypad Shield onto your Arduino board. The pins will align automatically.
This image is created using Fritzing. Click to enlarge image
Arduino Code
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-lcd-keypad-shield
*/
#include <LiquidCrystal.h>
LiquidCrystal lcd(8, 9, 4, 5, 6, 7);
void setup() {
Serial.begin(9600);
Serial.println("Started"); // Debugging
lcd.begin(16, 2);
lcd.print("Hello!");
delay(3000);
}
void loop() {
int key = analogRead(A0);
//Serial.println(key); // Debugging
lcd.clear();
if (key < 50)
lcd.print("RIGHT");
else if (key < 200)
lcd.print("UP");
else if (key < 400)
lcd.print("DOWN");
else if (key < 600)
lcd.print("LEFT");
else if (key < 800)
lcd.print("SELECT");
else if (key < 1000)
lcd.print("RST"); // If RST has a value, add here
else
lcd.print("Press key!");
delay(200);
}
Quick Steps
- Stack the LCD Keypad Shield on Arduino
- Connect Arduino to PC via USB cable
- Open Arduino IDE, select the right board and port
- Copy the above code and paste it to the Arduino IDE
- Click Upload button on Arduino IDE to upload code to Arduino
- Press each button on the shield one by one and check if the corresponding text appears on the LCD.
- Check out the result on LCD display
If the LCD remains blank, ensure:
- The shield is properly connected to the Arduino.
- The potentiometer is adjusted for proper contrast.
- The uploaded code matches the example provided.
- The Arduino board is powered correctly.
Following these steps should help you get your Arduino LCD Keypad Shield working properly!
For more functions on controlling the LCD display, please refer to this Arduino LiquidCrystal LCD tutorial.
To improve modularity and readability, we reorganize the previous code into separate functions:
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-lcd-keypad-shield
*/
#include <LiquidCrystal.h>
// Define constants for key representations
const int KEY_RIGHT = 0;
const int KEY_UP = 1;
const int KEY_DOWN = 2;
const int KEY_LEFT = 3;
const int KEY_SELECT = 4;
const int KEY_NONE = 5;
LiquidCrystal lcd(8, 9, 4, 5, 6, 7);
int getKey() {
int analogValue = analogRead(A0);
//Serial.println(analogValue); // Debugging
if (analogValue < 50) return KEY_RIGHT;
else if (analogValue < 200) return KEY_UP;
else if (analogValue < 400) return KEY_DOWN;
else if (analogValue < 600) return KEY_LEFT;
else if (analogValue < 800) return KEY_SELECT;
else return KEY_NONE;
}
void setup() {
Serial.begin(9600);
Serial.println("Started"); // Debugging
lcd.begin(16, 2);
lcd.print("Hello!");
delay(3000);
}
void loop() {
lcd.clear();
int key = getKey();
switch (key) {
case KEY_RIGHT:
lcd.print("RIGHT");
break;
case KEY_UP:
lcd.print("UP");
break;
case KEY_DOWN:
lcd.print("DOWN");
break;
case KEY_LEFT:
lcd.print("LEFT");
break;
case KEY_SELECT:
lcd.print("SELECT");
break;
default:
lcd.print("Press key!");
break;
}
delay(200);
}
Video Tutorial
We are considering to make the video tutorials. If you think the video tutorials are essential, please subscribe to our YouTube channel to give us motivation for making the videos.
The below video demo uses the below code:
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-lcd-keypad-shield
*/
#include <LiquidCrystal.h>
#include <Servo.h>
#include <DHT.h>
// ==================== PIN DEFINITIONS ====================
#define DHT_PIN 2
#define DHT_TYPE DHT11
#define SERVO_PIN 3
#define RED_LED_PIN 11
#define YELLOW_LED_PIN 12
#define GREEN_LED_PIN 13
// LCD Keypad Shield
LiquidCrystal lcd(8, 9, 4, 5, 6, 7);
DHT dht(DHT_PIN, DHT_TYPE);
Servo servo;
// ==================== BUTTONS ====================
enum Button {
BUTTON_NONE,
BUTTON_RIGHT,
BUTTON_UP,
BUTTON_DOWN,
BUTTON_LEFT,
BUTTON_SELECT
};
// ==================== STATES ====================
enum State {
MAIN_MENU,
SENSOR_MENU,
TEMPERATURE_VIEW,
HUMIDITY_VIEW,
SERVO_CONTROL,
LED_MENU,
RED_LED_CONTROL,
YELLOW_LED_CONTROL,
GREEN_LED_CONTROL,
AUTO_MODE
};
State currentState = MAIN_MENU;
// ==================== MENU DATA ====================
const char* mainMenu[] = {
"SENSOR",
"SERVO",
"LED",
"AUTO MODE"
};
const char* sensorMenu[] = {
"TEMPERATURE",
"HUMIDITY"
};
const char* ledMenu[] = {
"RED",
"YELLOW",
"GREEN"
};
int mainMenuIndex = 0;
int sensorMenuIndex = 0;
int ledMenuIndex = 0;
// ==================== DEVICE VARIABLES ====================
int servoAngle = 90;
bool redLEDState = false;
bool yellowLEDState = false;
bool greenLEDState = false;
float temperature = 0.0;
float humidity = 0.0;
unsigned long lastSensorRead = 0;
unsigned long lastAutoDisplay = 0;
const unsigned long sensorInterval = 2000;
const unsigned long autoDisplayInterval = 2000;
bool autoDisplayPage = false;
// ==================== READ BUTTON ====================
Button readButton() {
int value = analogRead(A0);
if (value < 50)
return BUTTON_RIGHT;
if (value < 200)
return BUTTON_UP;
if (value < 400)
return BUTTON_DOWN;
if (value < 600)
return BUTTON_LEFT;
if (value < 800)
return BUTTON_SELECT;
return BUTTON_NONE;
}
// ==================== WAIT FOR BUTTON RELEASE ====================
void waitButtonRelease() {
while (readButton() != BUTTON_NONE) {
delay(10);
}
delay(100);
}
// ==================== DISPLAY MAIN MENU ====================
void displayMainMenu() {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("MAIN MENU");
lcd.setCursor(0, 1);
lcd.print("> ");
lcd.print(mainMenu[mainMenuIndex]);
}
// ==================== DISPLAY SENSOR MENU ====================
void displaySensorMenu() {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("SENSOR");
lcd.setCursor(0, 1);
lcd.print("> ");
lcd.print(sensorMenu[sensorMenuIndex]);
}
// ==================== DISPLAY LED MENU ====================
void displayLEDMenu() {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("LED CONTROL");
lcd.setCursor(0, 1);
lcd.print("> ");
lcd.print(ledMenu[ledMenuIndex]);
}
// ==================== READ SENSOR ====================
void readSensor() {
float newTemperature = dht.readTemperature();
float newHumidity = dht.readHumidity();
if (!isnan(newTemperature)) {
temperature = newTemperature;
}
if (!isnan(newHumidity)) {
humidity = newHumidity;
}
}
// ==================== TEMPERATURE VIEW ====================
void showTemperature() {
readSensor();
lcd.setCursor(0, 0);
lcd.print("TEMPERATURE ");
lcd.setCursor(0, 1);
lcd.print(temperature, 1);
lcd.print((char)223);
lcd.print("C ");
}
// ==================== HUMIDITY VIEW ====================
void showHumidity() {
readSensor();
lcd.setCursor(0, 0);
lcd.print("HUMIDITY ");
lcd.setCursor(0, 1);
lcd.print(humidity, 1);
lcd.print("% ");
}
// ==================== SERVO DISPLAY ====================
void displayServoControl() {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("SERVO CONTROL");
lcd.setCursor(0, 1);
lcd.print("ANGLE: ");
lcd.print(servoAngle);
lcd.print((char)223);
}
// ==================== LED DISPLAY ====================
void displayLEDControl(const char* ledName, bool state) {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print(ledName);
lcd.setCursor(0, 1);
if (state) {
lcd.print("STATUS: ON");
} else {
lcd.print("STATUS: OFF");
}
}
// ==================== AUTO MODE PAGE 1 ====================
void displayAutoPage1() {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("HUM:");
lcd.print(humidity, 0);
lcd.print("%");
lcd.setCursor(0, 1);
lcd.print("TEMP:");
lcd.print(temperature, 1);
lcd.print(" C");
}
// ==================== AUTO MODE PAGE 2 ====================
void displayAutoPage2() {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("LED: ");
if (temperature < 25.0) {
lcd.print("GREEN");
}
else if (temperature < 30.0) {
lcd.print("YELLOW");
}
else {
lcd.print("RED");
}
lcd.setCursor(0, 1);
lcd.print("SERVO: ");
lcd.print(servoAngle);
lcd.print(" DEG");
}
// ==================== AUTO MODE ====================
void runAutoMode() {
readSensor();
if (temperature < 31.3) {
digitalWrite(GREEN_LED_PIN, HIGH);
digitalWrite(YELLOW_LED_PIN, LOW);
digitalWrite(RED_LED_PIN, LOW);
servoAngle = 0;
servo.write(servoAngle);
}
else if (temperature < 31.5) {
digitalWrite(GREEN_LED_PIN, LOW);
digitalWrite(YELLOW_LED_PIN, HIGH);
digitalWrite(RED_LED_PIN, LOW);
servoAngle = 90;
servo.write(servoAngle);
}
else {
digitalWrite(GREEN_LED_PIN, LOW);
digitalWrite(YELLOW_LED_PIN, LOW);
digitalWrite(RED_LED_PIN, HIGH);
servoAngle = 180;
servo.write(servoAngle);
}
}
// ==================== MAIN MENU HANDLER ====================
void handleMainMenu(Button button) {
if (button == BUTTON_UP) {
mainMenuIndex--;
if (mainMenuIndex < 0) {
mainMenuIndex = 3;
}
displayMainMenu();
}
else if (button == BUTTON_DOWN) {
mainMenuIndex++;
if (mainMenuIndex > 3) {
mainMenuIndex = 0;
}
displayMainMenu();
}
else if (button == BUTTON_SELECT) {
switch (mainMenuIndex) {
case 0:
currentState = SENSOR_MENU;
sensorMenuIndex = 0;
displaySensorMenu();
break;
case 1:
currentState = SERVO_CONTROL;
displayServoControl();
break;
case 2:
currentState = LED_MENU;
ledMenuIndex = 0;
displayLEDMenu();
break;
case 3:
currentState = AUTO_MODE;
autoDisplayPage = false;
lastSensorRead = millis();
lastAutoDisplay = millis();
runAutoMode();
displayAutoPage1();
break;
}
}
}
// ==================== SENSOR MENU HANDLER ====================
void handleSensorMenu(Button button) {
if (button == BUTTON_UP) {
sensorMenuIndex--;
if (sensorMenuIndex < 0) {
sensorMenuIndex = 1;
}
displaySensorMenu();
}
else if (button == BUTTON_DOWN) {
sensorMenuIndex++;
if (sensorMenuIndex > 1) {
sensorMenuIndex = 0;
}
displaySensorMenu();
}
else if (button == BUTTON_SELECT) {
if (sensorMenuIndex == 0) {
lcd.clear();
currentState = TEMPERATURE_VIEW;
lastSensorRead = millis();
showTemperature();
}
else {
lcd.clear();
currentState = HUMIDITY_VIEW;
lastSensorRead = millis();
showHumidity();
}
}
else if (button == BUTTON_LEFT) {
currentState = MAIN_MENU;
displayMainMenu();
}
}
// ==================== TEMPERATURE HANDLER ====================
void handleTemperatureView(Button button) {
if (button == BUTTON_LEFT || button == BUTTON_SELECT) {
currentState = SENSOR_MENU;
displaySensorMenu();
}
}
// ==================== HUMIDITY HANDLER ====================
void handleHumidityView(Button button) {
if (button == BUTTON_LEFT || button == BUTTON_SELECT) {
currentState = SENSOR_MENU;
displaySensorMenu();
}
}
// ==================== SERVO HANDLER ====================
void handleServoControl(Button button) {
if (button == BUTTON_UP) {
servoAngle++;
if (servoAngle > 180) {
servoAngle = 180;
}
servo.write(servoAngle);
displayServoControl();
}
else if (button == BUTTON_DOWN) {
servoAngle--;
if (servoAngle < 0) {
servoAngle = 0;
}
servo.write(servoAngle);
displayServoControl();
}
else if (button == BUTTON_RIGHT) {
servoAngle += 10;
if (servoAngle > 180) {
servoAngle = 180;
}
servo.write(servoAngle);
displayServoControl();
}
else if (button == BUTTON_LEFT) {
servoAngle -= 10;
if (servoAngle < 0) {
servoAngle = 0;
}
servo.write(servoAngle);
displayServoControl();
}
else if (button == BUTTON_SELECT) {
currentState = MAIN_MENU;
displayMainMenu();
}
}
// ==================== LED MENU HANDLER ====================
void handleLEDMenu(Button button) {
if (button == BUTTON_UP) {
ledMenuIndex--;
if (ledMenuIndex < 0) {
ledMenuIndex = 2;
}
displayLEDMenu();
}
else if (button == BUTTON_DOWN) {
ledMenuIndex++;
if (ledMenuIndex > 2) {
ledMenuIndex = 0;
}
displayLEDMenu();
}
else if (button == BUTTON_SELECT) {
switch (ledMenuIndex) {
case 0:
currentState = RED_LED_CONTROL;
displayLEDControl("RED LED", redLEDState);
break;
case 1:
currentState = YELLOW_LED_CONTROL;
displayLEDControl("YELLOW LED", yellowLEDState);
break;
case 2:
currentState = GREEN_LED_CONTROL;
displayLEDControl("GREEN LED", greenLEDState);
break;
}
}
else if (button == BUTTON_LEFT) {
currentState = MAIN_MENU;
displayMainMenu();
}
}
// ==================== RED LED HANDLER ====================
void handleRedLED(Button button) {
if (button == BUTTON_RIGHT) {
redLEDState = !redLEDState;
digitalWrite(RED_LED_PIN, redLEDState ? HIGH : LOW);
displayLEDControl("RED LED", redLEDState);
}
else if (button == BUTTON_LEFT) {
currentState = LED_MENU;
displayLEDMenu();
}
}
// ==================== YELLOW LED HANDLER ====================
void handleYellowLED(Button button) {
if (button == BUTTON_RIGHT) {
yellowLEDState = !yellowLEDState;
digitalWrite(YELLOW_LED_PIN, yellowLEDState ? HIGH : LOW);
displayLEDControl("YELLOW LED", yellowLEDState);
}
else if (button == BUTTON_LEFT) {
currentState = LED_MENU;
displayLEDMenu();
}
}
// ==================== GREEN LED HANDLER ====================
void handleGreenLED(Button button) {
if (button == BUTTON_RIGHT) {
greenLEDState = !greenLEDState;
digitalWrite(GREEN_LED_PIN, greenLEDState ? HIGH : LOW);
displayLEDControl("GREEN LED", greenLEDState);
}
else if (button == BUTTON_LEFT) {
currentState = LED_MENU;
displayLEDMenu();
}
}
// ==================== AUTO MODE HANDLER ====================
void handleAutoMode(Button button) {
if (button == BUTTON_LEFT || button == BUTTON_SELECT) {
digitalWrite(RED_LED_PIN, LOW);
digitalWrite(YELLOW_LED_PIN, LOW);
digitalWrite(GREEN_LED_PIN, LOW);
redLEDState = false;
yellowLEDState = false;
greenLEDState = false;
servoAngle = 90;
servo.write(servoAngle);
currentState = MAIN_MENU;
displayMainMenu();
}
}
// ==================== SETUP ====================
void setup() {
lcd.begin(16, 2);
dht.begin();
servo.attach(SERVO_PIN);
servo.write(servoAngle);
pinMode(RED_LED_PIN, OUTPUT);
pinMode(YELLOW_LED_PIN, OUTPUT);
pinMode(GREEN_LED_PIN, OUTPUT);
digitalWrite(RED_LED_PIN, LOW);
digitalWrite(YELLOW_LED_PIN, LOW);
digitalWrite(GREEN_LED_PIN, LOW);
lcd.clear();
lcd.setCursor(0, 0);
lcd.print("SMART CONTROL");
lcd.setCursor(0, 1);
lcd.print("STATION");
delay(2000);
displayMainMenu();
}
// ==================== LOOP ====================
void loop() {
Button button = readButton();
if (button != BUTTON_NONE) {
switch (currentState) {
case MAIN_MENU: handleMainMenu(button); break;
case SENSOR_MENU: handleSensorMenu(button); break;
case TEMPERATURE_VIEW: handleTemperatureView(button); break;
case HUMIDITY_VIEW: handleHumidityView(button); break;
case SERVO_CONTROL: handleServoControl(button); break;
case LED_MENU: handleLEDMenu(button); break;
case RED_LED_CONTROL: handleRedLED(button); break;
case YELLOW_LED_CONTROL: handleYellowLED(button); break;
case GREEN_LED_CONTROL: handleGreenLED(button); break;
case AUTO_MODE: handleAutoMode(button); break;
}
waitButtonRelease();
}
// ===== AUTOMATIC DATA UPDATE =====
if (currentState == AUTO_MODE) {
if (millis() - lastSensorRead >= sensorInterval) {
lastSensorRead = millis();
runAutoMode();
}
if (millis() - lastAutoDisplay >= autoDisplayInterval) {
lastAutoDisplay = millis();
autoDisplayPage = !autoDisplayPage;
if (autoDisplayPage) {
displayAutoPage2();
} else {
displayAutoPage1();
}
}
}
if (currentState == TEMPERATURE_VIEW || currentState == HUMIDITY_VIEW) {
if (millis() - lastSensorRead >= sensorInterval) {
lastSensorRead = millis();
if (currentState == TEMPERATURE_VIEW) {
showTemperature();
} else if (currentState == HUMIDITY_VIEW) {
showHumidity();
}
}
}
}