RUI图形设计-打印机示例

weran

简介：
最近使用的RUI Builder图形化设计UI工具添加触摸功能实现了触摸响应，设计界面简洁方便，在线烧录，一键导出源码(.c)和图资档(.bin)，探索后制作了一个打印机的Demo进行演示分享。

硬件平台：
单片机：STM32F103VET6
图形处理器：RA8889/RA6809

第一步：可视化进行UI界面的设计
以图片为主体，使用触摸功能创建并调整触摸响应区域，选择跳转页面动作以及要跳转的页面，完成一个触摸跳转功能的实现，然后依次将功能区域实现触摸完成界面之间相互跳转。

UI设计

第二步：导出代码.c以及打包好的图资.bin
1.导出代码(.c)
RuiBuilder.c,RuiBuilder.h,RuiBuilder_UIMap.c,RuiBuilder_UIMap.h
2.导出图资(.bin)
ResourcePack.bin ---- 烧录到FLASH中
ResourcePack.h ---- RuiBuilder.c会引用这份文件的数据

第三步：Keil工程添加文件
1.把RuiBuilder.c，RuiBuilder_UIMap.c，添入工程
2.工程实现触摸交互：
    1). 触摸屏驱动Touch_GT911.c/.h  主要获取x，y坐标，可更换为用户自己的驱动，但获取坐标的函数名保持一致
    2). 通过中断获取触摸，初始化要设定好中断，可参考main.c的设置
    3). main include以下文件：
    4). 同时复制整个touch文件夹，与工程放在一起，添加路径，以及添加Touch_GT911.c和RUI_Touch.lib这两份文件到工程中

1. <font color="#000000">#include "RuiBuilder.h"
   
2. #include "RuiBuilder_UIMap.h"
   
3. 
   
4. #include "Touch_GT911.h"
   
5. 
   
6. #include "ui_touch.h"
   
7. #include "ui_touch_sm_adapter.h"
   
8. #include "timebase.h"</font>

复制代码

第四步：烧录FLASH并编译、运行
显示效果如下：


工程连接：
打印机演示.7z (2.97 MB, 下载次数: 1)

2026-2-26 17:50 上传

点击文件名下载附件