Arduino UNO R4 - LCD Keypad Shield
In this guide, we’ll explore how to use Arduino Uno R4 with the LCD Keypad Shield, a cool little gadget that mixes a 16x2 LCD screen with six buttons (Right, Up, Down, Left, Select, and Reset). You’ll learn how it works, how to hook it up to your Arduino Uno R4, and how to code it step-by-step. We’ve got wiring image, and code examples to make it super easy to follow!
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
What’s the LCD Keypad Shield?
This LCD Keypad shield is a combo of:
- A 16x2 LCD (shows 2 rows of 16 characters) that uses the LiquidCrystal library.
- 5 buttons (Up, Down, Left, Right, Select) all wired to one pin (A0).
- A Reset button to restart your Arduino Uno R4.
- A tiny knob (potentiometer) to tweak the screen’s contrast.
Pinout
The following table shows how the LCD Keypad Shield connects to the Arduino Uno R4 when stacked on top of it.
| Shield Pin | Function | Arduino Uno R4 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: Press it, and your Arduino Uno R4 starts over.
Knob (Potentiometer): Twist it if the screen’s too faint or too dark.
Wiring Diagram
No complicated wiring here! Just stack the LCD Keypad Shield right onto your Arduino Uno R4. The pins match up on their own.
This image is created using Fritzing. Click to enlarge image
See The best way to supply power to the Arduino Uno R4 and other components.
Arduino Uno R4 Code
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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);
}
Detailed Instructions
- Stack the LCD Keypad Shield on your Arduino Uno R4
- Plug the Arduino Uno R4 into your computer with the USB cable.
- Open Arduino IDE, pick your board and port in the IDE.
- Copy the code above, paste it in to the Arduino IDE
- Click Upload button on Arduino IDE to upload code to Arduino Uno R4
- Press the shield’s buttons one by one.
- Watch the LCD show which one you pressed
If Blank Screen? Try This:
- Double-check the shield’s plugged in tight.
- Twist the knob to fix the contrast.
- Make sure the code’s right and the Arduino Uno R4’s powered up.
Bonus: Cleaner Code
Want your code to look pro? Here’s a fancier version with neat functions:
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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
The below video demo uses the below code:
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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();
}
}
}
}
Extra Help
Need more LCD tricks? Check out this Arduino LiquidCrystal LCD tutorial for more cool ideas.
That’s it! You’re ready to play with your LCD Keypad Shield. Have fun building!