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

BWSU

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


项目简介
本项目基于STC8H8K64U + RA8889/RA6809 + TFT显示屏(1024x600) + GT911触摸屏实现了一个多功能触摸按钮组件。系统具备按钮控制后执行任务的功能，可用于各类触摸屏人机交互场景。
硬件平台

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

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

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

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

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

功能流程图

1. 主程序流程


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


代码详解
1. 主程序初始化主程序在初始化阶段完成以下工作：

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

1. void main()
   
2. {
   
3.     // 声明按钮指针
   
4.     BUTTON* btn1;
   
5.     BUTTON* btn2;
   
6.     BUTTON* btn3;
   
7.     BUTTON* btn4;
   
8.    
   
9.     // MCU I/O口配置
   
10.     P0M0 = 0xff & cClrb5;   // 设置P0.5为双向口模式（SPI_MISO）
    
11.     P0M1 = 0x00;
    
12.     // 更多I/O配置...
    
13.    
    
14.     // SPI初始化
    
15.     SPI4_Init();
    
16.    
    
17.     // RA8889硬件复位和初始化
    
18.     RA8889_RST = 1;
    
19.     delay_ms(1);
    
20.     RA8889_RST = 0;
    
21.     delay_ms(1);
    
22.     RA8889_RST = 1;
    
23.     RA8889_Initial();
    
24.    
    
25.     // 初始化触摸屏
    
26.     GT911_Init();
    
27.    
    
28.     // 加载背景图像
    
29.     SPI_NOR_initial_JPG_AVI(1,0,BUS1,CS1,1);
    
30.     JPG_NOR(BINARY_INFO[0].start_addr, BINARY_INFO[0].img_size, canvas_image_width, 0,0);
    
31.    
    
32.     // 显示PNG图片
    
33.     SPI_NOR_initial_DMA (4,BUS1,CS1,1,0);
    
34.     SPI_NOR_DMA_png (BINARY_INFO[2].start_addr,Layer1,0,BINARY_INFO[2].img_width,BINARY_INFO[2].img_height);
    
35.     BTE_alpha_blending_32bit_Pixel_mode(BINARY_INFO[2].img_width,BINARY_INFO[2].img_width,BINARY_INFO[2].img_height,
    
36.                                       800,530,Layer0,canvas_image_width,
    
37.                                       800,530,Layer0,canvas_image_width,
    
38.                                       Layer1);
    
39.                                     
    
40.     // 显示标题文字
    
41.     Foreground_color_16M(color16M_white);
    
42.     Select_Font_Height_WxN_HxN_ChromaKey_Alignment(24,2,2,1,0);
    
43.     Goto_Text_XY(280,20);   
    
44.     Show_String("Button Control Example");
    
45.    
    
46.     // 初始化按钮控件
    
47.     Button_Init();
    
48.    
    
49.     // 创建并配置4个按钮
    
50.     // ...创建按钮代码...
    
51.    
    
52.     // 绘制所有按钮
    
53.     Button_DrawAll();
    
54.    
    
55.     // 显示提示信息
    
56.     // ...显示提示代码...
    
57.    
    
58.     // 主循环
    
59.     while(1) {
    
60.         // 检测触摸屏
    
61.         if(CTP_INT == 0){
    
62.             GT911_Scan();
    
63.         }
    
64.         // 处理按钮触摸
    
65.         Button_HandleTouch();
    
66.         // 延时
    
67.         delay_ms(10);
    
68.     }
    
69. }

复制代码

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

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

1. void Test_Click4(void)
   
2. {
   
3.     // 变量声明
   
4.     char str[] = " Button 4 custom function executed!";
   
5.     char display_buffer[100];  // 滚动文本缓冲区
   
6.     char temp[41];            // 临时缓冲区
   
7.     int str_len;               // 字符串长度
   
8.     int display_width = 40;    // 显示区域宽度
   
9.     int start_pos = -display_width + 5;  // 起始位置
   
10.     int i, j;
    
11.     int x, y, dir_x, dir_y;    // 球的位置和方向
    
12.     // 初始化文本和区域
    
13.     // ...初始化代码...
    
14.    
    
15.     // 准备滚动文本：原文本 + 10空格 + 原文本
    
16.     str_len = strlen(str);
    
17.     strcpy(display_buffer, str);
    
18.    
    
19.     // 添加空格
    
20.     for(i = str_len; i < str_len + 10; i++) {
    
21.         display_buffer[i] = ' ';
    
22.     }
    
23.    
    
24.     // 添加第二段文本
    
25.     strcpy(&display_buffer[str_len + 10], str);
    
26.     display_buffer[str_len * 2 + 10] = '\0';
    
27.    
    
28.     // 初始化弹跳球参数
    
29.     x = 38;
    
30.     y = 15;
    
31.     dir_x = 1;
    
32.     dir_y = 1;
    
33.     i = 0;
    
34.    
    
35.     // 动画循环
    
36.     while(1){
    
37.         // 清空区域
    
38.         BTE_Solid_Fill(0,canvas_image_width,0,LCD_Height,color16M_white,300,150);
    
39.       
    
40.         // 更新球位置并绘制
    
41.         // ...球位置更新代码...
    
42.       
    
43.         // 显示滚动文本
    
44.         memset(temp, ' ', display_width); // 用空格填充临时缓冲区
    
45.         temp[display_width] = '\0';       // 确保字符串正确终止
    
46.       
    
47.         // 处理负值的start_pos
    
48.         if(start_pos < 0) {
    
49.             // 先填充部分空格
    
50.             for(j = 0; j < -start_pos && j < display_width; j++) {
    
51.                 temp[j] = ' ';
    
52.             }
    
53.             // 再填充可见的字符串部分
    
54.             for(; j < display_width && j + start_pos < strlen(display_buffer); j++) {
    
55.                 temp[j] = display_buffer[j + start_pos];
    
56.             }
    
57.         } else {
    
58.             // 正常填充
    
59.             for(j = 0; j < display_width && j + start_pos < strlen(display_buffer); j++) {
    
60.                 temp[j] = display_buffer[j + start_pos];
    
61.             }
    
62.         }
    
63.         temp[display_width] = '\0'; // 确保字符串终止
    
64.       
    
65.         // ...显示文本代码...
    
66.       
    
67.         // 更新滚动位置
    
68.         start_pos++;
    
69.         if(start_pos > str_len + 10) {
    
70.             start_pos = -display_width + 5;
    
71.         }
    
72.       
    
73.         // 检测退出条件
    
74.         if(CTP_INT == 0) break;
    
75.     }
    
76. }

复制代码

使用说明
程序操作流程

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

文字滚动模式使用说明

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

注意事项

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

请至"组件与控件中心"栏目下载。