单片机实现触摸按钮自定义任务组件的执行详解

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

项目简介

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

硬件平台

  • MCU: STC8H8K64U(51单片机)(注:51 / ARM等单片机皆可)
  • 显示控制器: 瑞佑科技 RA8889或者RA6809
  • 显示屏: TFT 1024×600分辨率
  • 触摸屏: GT911电容触摸屏
  • MCU–显示控制器的通信方式: SPI-4
  • 软件架构

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

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

    主要功能

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

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

    功能流程图

    1. 主程序流程

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

    代码详解

    1. 主程序初始化

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

  • 配置MCU的I/O口
  • 初始化SPI通信
  • 初始化RA8889/RA6809显示控制器
  • 初始化GT911触摸屏
  • 加载背景图像
  • 创建和配置按钮控件
  • 显示提示信息
  • 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[0].start_addr, BINARY_INFO[0].img_size, canvas_image_width, 0,0);
        
        // 显示PNG图片
        SPI_NOR_initial_DMA (4,BUS1,CS1,1,0);
        SPI_NOR_DMA_png (BINARY_INFO[2].start_addr,Layer1,0,BINARY_INFO[2].img_width,BINARY_INFO[2].img_height);
        BTE_alpha_blending_32bit_Pixel_mode(BINARY_INFO[2].img_width,BINARY_INFO[2].img_width,BINARY_INFO[2].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个空格的间隔,形成循环显示
  • 弹跳球在固定区域内自由运动,碰到边界会改变方向
  • void Test_Click4(void)
    {
        // 变量声明
        char str[] = " Button 4 custom function executed!";
        char display_buffer[100];  // 滚动文本缓冲区
        char temp[41];            // 临时缓冲区
        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[i] = ' ';
        }
        
        // 添加第二段文本
        strcpy(&display_buffer[str_len + 10], str);
        display_buffer[str_len * 2 + 10] = '\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[display_width] = '\0';       // 确保字符串正确终止
            
            // 处理负值的start_pos
            if(start_pos < 0) {
                // 先填充部分空格
                for(j = 0; j < -start_pos && j < display_width; j++) {
                    temp[j] = ' ';
                }
                // 再填充可见的字符串部分
                for(; j < display_width && j + start_pos < strlen(display_buffer); j++) {
                    temp[j] = display_buffer[j + start_pos];
                }
            } else {
                // 正常填充
                for(j = 0; j < display_width && j + start_pos < strlen(display_buffer); j++) {
                    temp[j] = display_buffer[j + start_pos];
                }
            }
            temp[display_width] = '\0'; // 确保字符串终止
            
            // ...显示文本代码...
            
            // 更新滚动位置
            start_pos++;
            if(start_pos > str_len + 10) {
                start_pos = -display_width + 5;
            }
            
            // 检测退出条件
            if(CTP_INT == 0) break;
        }
    }
    

    使用说明

    程序操作流程

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

    文字滚动模式使用说明

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

    注意事项

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

    源码下载

    请看到视频末尾。

    实际效果展示

    单片机-RAIO液晶控制芯片-触摸按钮组件

    作者:BW.SU

    物联沃分享整理
    物联沃-IOTWORD物联网 » 单片机实现触摸按钮自定义任务组件的执行详解

    发表回复