harchy 发表于 2025-4-7 22:05

单片机-触摸按钮-执行自定义任务-组件

本帖最后由 harchy 于 2025-4-7 22:12 编辑

# 触摸按钮执行自定义任务组件

![微信图片_20250407110211.jpg](data/attachment/forum/202504/07/220358go92t8knp8o7tn3n.jpg "微信图片_20250407110211.jpg")

## 项目简介

本项目基于RT8H8K001开发板 + RT6809CNN01开发板 + TFT显示屏(1024x600) + GT911触摸屏实现了一个多功能触摸按钮组件。系统具备按钮控制后执行任务的功能，可用于各类触摸屏人机交互场景。

## 硬件平台

- MCU: STC8H8K64U（51单片机）（注：51 / ARM等单片机皆可）
- 显示控制器: 瑞佑科技 RA8889或者RA6809
- 显示屏: TFT 1024x600分辨率
- 触摸屏: GT911电容触摸屏
- MCU--显示控制器的通信方式: SPI-4

## 软件架构

软件主要包含以下几个模块：

1. **主程序模块**: 实现系统初始化、主循环和事件处理
2. **按钮控件模块**: 实现按钮的创建、绘制和交互处理
3. **触摸屏模块**: 实现触摸事件的扫描和处理
4. **扩展：文字滚动模块**: 实现文字的滚动显示效果

## 主要功能

系统提供四种测试按钮，分别实现不同的功能：

1. **Flat Button**: 平面按钮，点击后执行绘图，显示字符串两个任务
2. **Round Button**: 圆角按钮，点击后执行绘图，显示字符串两个任务
3. **Disabled Button**: 禁用按钮，禁用后按钮不可使用的显示状态
4. **Standard Button**: 标准按钮，3D效果，点击后执行弹跳球动画与滚动显示的字符串两个任务

## 功能流程图

### 1. 主程序流程

!(data/attachment/forum/202504/07/220732htk7l55538mkt587.png "1.png")

### 2. 文字滚动功能流程 (Test_Click4)

!(data/attachment/forum/202504/07/220746gljbzyk0lu6st4pf.png "2.png")

## 代码详解

### 1. 主程序初始化

主程序在初始化阶段完成以下工作：

- 配置MCU的I/O口
- 初始化SPI通信
- 初始化RA8889/RA6809显示控制器
- 初始化GT911触摸屏
- 加载背景图像
- 创建和配置按钮控件
- 显示提示信息

```c
void main()
{
    // 声明按钮指针
    BUTTON* btn1;
    BUTTON* btn2;
    BUTTON* btn3;
    BUTTON* btn4;

    // MCU I/O口配置
    P0M0 = 0xff & cClrb5;         // 设置P0.5为双向口模式（SPI_MISO）
    P0M1 = 0x00;
    // 更多I/O配置...

    // SPI初始化
    SPI4_Init();

    // RA8889硬件复位和初始化
    RA8889_RST = 1;
    delay_ms(1);
    RA8889_RST = 0;
    delay_ms(1);
    RA8889_RST = 1;
    RA8889_Initial();

    // 初始化触摸屏
    GT911_Init();

    // 加载背景图像
    SPI_NOR_initial_JPG_AVI(1,0,BUS1,CS1,1);
    JPG_NOR(BINARY_INFO.start_addr, BINARY_INFO.img_size, canvas_image_width, 0,0);

    // 显示PNG图片
    SPI_NOR_initial_DMA (4,BUS1,CS1,1,0);
    SPI_NOR_DMA_png (BINARY_INFO.start_addr,Layer1,0,BINARY_INFO.img_width,BINARY_INFO.img_height);
    BTE_alpha_blending_32bit_Pixel_mode(BINARY_INFO.img_width,BINARY_INFO.img_width,BINARY_INFO.img_height,
                                    800,530,Layer0,canvas_image_width,
                                    800,530,Layer0,canvas_image_width,
                                    Layer1);
                              
    // 显示标题文字
    Foreground_color_16M(color16M_white);
    Select_Font_Height_WxN_HxN_ChromaKey_Alignment(24,2,2,1,0);
    Goto_Text_XY(280,20);
    Show_String("Button Control Example");

    // 初始化按钮控件
    Button_Init();

    // 创建并配置4个按钮
    // ...创建按钮代码...

    // 绘制所有按钮
    Button_DrawAll();

    // 显示提示信息
    // ...显示提示代码...

    // 主循环
    while(1) {
      // 检测触摸屏
      if(CTP_INT == 0){
            GT911_Scan();
      }
      // 处理按钮触摸
      Button_HandleTouch();
      // 延时
      delay_ms(10);
    }
}
```

### 2. 文字滚动功能 (Test_Click4)

文字滚动功能实现了一个从左向右滚动的文本显示效果，同时展示了一个弹跳球动画：

- 文本从右向左滚入屏幕，然后向右滚动
- 两段文本之间有10个空格的间隔，形成循环显示
- 弹跳球在固定区域内自由运动，碰到边界会改变方向

```c
void Test_Click4(void)
{
    // 变量声明
    char str[] = " Button 4 custom function executed!";
    char display_buffer;// 滚动文本缓冲区
    char temp;            // 临时缓冲区
    int str_len;               // 字符串长度
    int display_width = 40;    // 显示区域宽度
    int start_pos = -display_width + 5;// 起始位置
    int i, j;
    int x, y, dir_x, dir_y;    // 球的位置和方向

    // 初始化文本和区域
    // ...初始化代码...

    // 准备滚动文本：原文本 + 10空格 + 原文本
    str_len = strlen(str);
    strcpy(display_buffer, str);

    // 添加空格
    for(i = str_len; i < str_len + 10; i++) {
      display_buffer = ' ';
    }

    // 添加第二段文本
    strcpy(&display_buffer, str);
    display_buffer = '\0';

    // 初始化弹跳球参数
    x = 38;
    y = 15;
    dir_x = 1;
    dir_y = 1;
    i = 0;

    // 动画循环
    while(1){
      // 清空区域
      BTE_Solid_Fill(0,canvas_image_width,0,LCD_Height,color16M_white,300,150);

      // 更新球位置并绘制
      // ...球位置更新代码...

      // 显示滚动文本
      memset(temp, ' ', display_width); // 用空格填充临时缓冲区
      temp = '\0';       // 确保字符串正确终止

      // 处理负值的start_pos
      if(start_pos < 0) {
            // 先填充部分空格
            for(j = 0; j < -start_pos && j < display_width; j++) {
                temp = ' ';
            }
            // 再填充可见的字符串部分
            for(; j < display_width && j + start_pos < strlen(display_buffer); j++) {
                temp = display_buffer;
            }
      } else {
            // 正常填充
            for(j = 0; j < display_width && j + start_pos < strlen(display_buffer); j++) {
                temp = display_buffer;
            }
      }
      temp = '\0'; // 确保字符串终止

      // ...显示文本代码...

      // 更新滚动位置
      start_pos++;
      if(start_pos > str_len + 10) {
            start_pos = -display_width + 5;
      }

      // 检测退出条件
      if(CTP_INT == 0) break;
    }
}
```

## 使用说明

### 程序操作流程

1. 程序启动后，会显示四个按钮和提示信息
2. 点击不同的按钮可以进入不同的功能模式：
   - **Flat Button**: 绘图和显示一串字符
   - **Round Button**: 绘图和显示一串字符
   - **Disabled Button**: 绘图和显示一串字符
   - **Standard Button**: 显示弹跳球和滚动文字效果

### 文字滚动模式使用说明

1. 点击"Standard Button"进入文字滚动和弹跳球模式
2. 观察文字从左向右滚动效果和弹跳球动画
3. 触摸屏幕任意位置可以退出该模式

## 注意事项

1. 触摸坐标可能需要根据实际屏幕分辨率进行换算
2. 文字滚动功能中，如果出现末尾显示多余字符的问题，请检查temp缓冲区的初始化和终止符设置

## 范例介绍

<iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=114291831212491&bvid=BV12nRzYPEH4&cid=29271066002&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
页: [1]
查看完整版本: 单片机-触摸按钮-执行自定义任务-组件