Example Code for Arduino-digital keyboard UI
Last revision 2026/01/20
This is UI control demo -- digital keyboard. At the start, click the textbox, and click the number after the cursor shows in the textbox. The corresponding number will be shown in the textbox. The "x" at the bottom right corner is used to delete the context in the textbox.
Hardware Preparation
- Arduino UNO control board x1
- 2.8" 240x320 LCD display module x1
- Wires
Note: Due to the limited memory capacity of Arduino UNO, it is unable to run programs related to UI. Therefore, we recommend using ESP32, which has more memory, for such operations.
Software Preparation
- Arduino IDE, click to download
- About how to install the library
- DFRobot_GDL API interface function , click to learn more
- The GDI interface should be used in conjunction with the main control board with GDI interface
- It is recommended to use Arduino 1.8.10 and above
- If the SD card slot is in poor contact, it may fail to initialize. Try agian after unplugging and plugging
Wiring Diagram
Due to the limited memory capacity of Arduino UNO, it is unable to run programs related to UI. Therefore, we recommend using ESP32, which has more memory, for such operations.
Sample Code
/*!
* @file UI_keypad.ino
* @brief Create a numeric keyboard control on the screen.
* @n Users can click number on the keyboard and then the output will be displayed in the text box.
* @n Click the text box to move the cursor into it when we need a text box to display.
* @n The demo supports Arduino Uno, Leonardo, Mega2560, FireBeetle-ESP32, FireBeetle-ESP8266, and FireBeetle-M0.
*
* @copyright Copyright (c) 2010 DFRobot Co. Ltd (http://www.dfrobot.com)
* @licence The MIT License (MIT)
* @author [fengli] ([email protected])
* @version V1.0
* @date 2019-12-6
* @get from https://www.dfrobot.com
* @url https://github.com/DFRobot/DFRobot_GDL/src/DFRpbot_UI
*/
#include "DFRobot_UI.h"
#include "Arduino.h"
#include "DFRobot_GDL.h"
#include "DFRobot_Touch.h"
/*M0*/
#if defined ARDUINO_SAM_ZERO
#define TFT_DC 7
#define TFT_CS 5
#define TFT_RST 6
#define TOUCH_CS A3
/*ESP32 and ESP8266*/
#elif defined(ESP32) || defined(ESP8266)
#define TFT_DC D2
#define TFT_CS D6
#define TFT_RST D3
#define TOUCH_CS D12
/* AVR series mainboard */
#else
#define TFT_DC 2
#define TFT_CS 3
#define TFT_RST 4
#define TOUCH_CS 5
#endif
/**
* @brief Constructor When the touch uses XPT2046 chip, you can call this constructor
* @param cs SPI chip select signal
* @param rst Reset signal
* @param irq Interrupt signal
*/
DFRobot_Touch_XPT2046 touch(/*cs=*/TOUCH_CS);
/**
* @brief Constructor When the screen uses hardware SPI communication, the driver IC is ILI9341, and the screen resolution is 240x320, this constructor can be called
* @param dc Command/data line pin for SPI communication
* @param cs Chip select pin for SPI communication
* @param rst Reset pin of the screen
*/
DFRobot_ILI9341_240x320_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
/* M0 mainboard DMA transfer */
//DFRobot_ILI9341_240x320_DMA_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
/**
* @brief Constructor
* @param gdl Screen object
* @param Touch Touch object
*/
DFRobot_UI ui(&screen, &touch);
void setup()
{
Serial.begin(9600);
ui.begin();
// Set the UI theme, there are two themes to choose from: CLASSIC and MODERN.
ui.setTheme(DFRobot_UI::CLASSIC);
//Create a numeric keypad
DFRobot_UI::sObject_t &kp = ui.creatKeyPad();
ui.draw(&kp);
}
void loop()
{
// Refresh
ui.refresh();
}
Was this article helpful?
