项目概述

本项目是基于STC8H8K64U单片机和RA8889/RA6809图形处理芯片(Micro GPU)开发的一款触摸输入框控件，适用于TFT显示屏(最高1366*xxxx)和电容触摸屏(GT911)。该控件提供了完整的文本输入功能，包括光标显示、文本编辑、触摸输入等功能，可应用于各类嵌入式人机交互界面，模块化设计，易移植，易维护，欢迎下载参考使用！

硬件配置

• 单片机：STC8H8K64U（RT8H8K001开发板）（也可以采用ARM等各种MCU）
• 图形处理芯片：RA8889/RA6809（RT6809CNN01开发板）
• 显示屏：TFT 1024x600分辨率
• 触摸屏：电容式GT911
• 单片机-图形处理芯片的通信方式：SPI-4

功能特点

1. 多输入框支持

   • 支持同时创建和管理多个输入框
   • 每个输入框可以独立设置位置、大小和样式
   • 支持标签显示

2. 文本输入功能

   • 支持字符输入和删除
   • 支持光标位置控制
   • 支持文本长度限制
   • 支持中英文输入

3. 触摸交互

   • 支持触摸选择输入框
   • 支持触摸位置计算光标位置
   • 支持点击输入框外部取消焦点

4. 视觉效果

   • 3D边框效果
   • 活动状态高亮显示
   • 光标闪烁效果
   • 文本垂直居中显示

5. RA8889特性

   • 使用RA8889内建光标功能
   • 支持12x24字体显示
   • 支持16M色显示

文件结构

输入框控件v1.0/
├── widget/
│   ├── inputbox.c    # 输入框控件实现
│   └── inputbox.h    # 输入框控件头文件
├── RA8889_01_Kernel/
│   ├── RA8889_51.c   # RA8889底层驱动
│   ├── RA8889_51.h
│   ├── RA8889_API_51.c  # RA8889 API实现
│   └── RA8889_API_51.h
└── UserDef.h         # 用户定义配置

主要API

初始化

void InputBox_Init(void);

初始化输入框控件，设置RA8889光标参数。

创建输入框

int InputBox_Add(int x, int y, int width, const char* initial_text, 
                int label_x, int label_y, const char* label, 
                unsigned long text_color, unsigned long label_color);

添加一个新的输入框，返回输入框ID。

文本操作

void InputBox_SetText(int id, const char* text);
const char* InputBox_GetText(int id);
void InputBox_AddChar(int id, char ch);
void InputBox_DeleteChar(int id);

设置、获取文本，添加和删除字符。

显示控制

void InputBox_Draw(int id);
void InputBox_DrawAll(void);

绘制单个或所有输入框。

触摸处理

int InputBox_HandleTouch(int touch_x, int touch_y);

处理触摸事件，返回被触摸的输入框ID。

焦点控制

void InputBox_SetActive(int id, int active);

设置输入框的活动状态。

触摸处理详解

触摸处理是该输入框控件的核心功能之一。InputBox_HandleTouch函数实现了所有触摸交互逻辑，包括：

输入框选择

1. 触摸事件过滤

   • 忽略坐标为(0,0)或负值的触摸点，避免触摸释放事件误触发焦点丢失
   • 仅处理有效区域内的触摸事件

2. 输入框命中检测

   • 检查触摸坐标是否在任何输入框的范围内
   • 确定被触摸的输入框ID

3. 焦点切换

   • 如果触摸了新的输入框，自动切换焦点
   • 如果触摸了当前已有焦点的输入框，保持焦点
   • 如果触摸了输入框外部的有效区域，取消当前输入框的焦点

光标位置计算

1. 精确定位

   • 根据触摸点在输入框内的X坐标计算光标位置
   • 将触摸点X坐标转换为字符位置（根据12x24字体宽度）

2. 边界处理

   • 在输入框左边缘点击时，光标位置设为0（文本开始位置）
   • 当计算出的位置超过文本长度时，光标位置自动设为文本末尾

视觉反馈

1. 输入框状态切换

   • 当输入框获得焦点时，边框颜色变为高亮（蓝色）
   • 输入框失去焦点时，边框恢复默认颜色

2. 光标显示

   • 使用RA8889的内建光标功能
   • 自动闪烁（10帧周期）
   • 当输入框获得焦点时显示光标
   • 当输入框失去焦点时隐藏光标

实现要点

1. 事件处理顺序

   触摸事件 -> 输入框命中检测 -> 焦点管理 -> 光标位置计算 -> 状态更新 -> 视觉反馈
   

2. 全局状态维护

   • active_input_box_id保存当前活动输入框ID
   • widget_input_id用于跟踪被触摸的输入框ID，供其他部分代码使用（如键盘输入）

3. 关键触摸事件处理

   • 点击输入框：获得焦点，更新光标位置
   • 点击文本：光标定位到点击的字符位置
   • 点击输入框外部：取消当前焦点

4. 误触处理

   • 忽略无效坐标(<=0)的触摸事件
   • 确保触摸释放事件不会导致焦点丢失

配置参数

在UserDef.h中定义了以下主要配置：

#define MAX_INPUT_BOXES 10          // 最大输入框数量
#define INPUT_BOX_HEIGHT 40         // 输入框高度
#define INPUT_BOX_BORDER_WIDTH 2    // 边框宽度
#define INPUT_BOX_PADDING 4         // 内边距
#define INPUT_BOX_SHADOW_DEPTH 2    // 阴影深度
#define INPUT_BOX_BG_COLOR 0xFFFFFF // 背景色
#define INPUT_BOX_ACTIVE_BORDER_COLOR 0x0000FF  // 活动状态边框颜色
#define INPUT_BOX_ACTIVE_BORDER_COLOR_1 0xFFFF00 // 活动状态边框外围颜色

使用示例

// 初始化
InputBox_Init();

// 创建输入框
InputBox_Add(300, 200, 400, "The label color can be changed.", -12*4-8, 8, "Name", color16M_black, color16M_red);

// 设置活动状态
InputBox_SetActive(id, 1);

// 处理触摸事件
int touched_id = InputBox_HandleTouch(touch_x, touch_y);

// 添加字符
InputBox_AddChar(id, 'A');

// 删除字符
InputBox_DeleteChar(id);

// 获取文本
const char* text = InputBox_GetText(id);

注意事项

1. 需要定期调用InputBox_UpdateCursor()更新光标状态
2. 触摸坐标需要转换为屏幕坐标
3. 文本长度受限于MAX_TEXT_LENGTH定义
4. RA8889内建字体大小固定为12x24，本例仅调用内建字体

依赖项

• RA8889显示控制器驱动
• 标准C库（string.h）
• 用户自定义配置（UserDef.h）

源码下载

请看到视频末尾

参考视频