WCHGUI 软件开发使用说明

一、GUI介绍

WCHGUIDesigner 是沁恒微电子自主研发的嵌入式 UI 可视化开发工具，依托沁恒全系列 RISC-V MCU 软硬件生态，采用所见即所得的拖拽式可视化开发模式。 开发人员可通过拖拽排布各类界面控件，自动生成标准化 C 语言工程代码，简化 UI 界面开发流程。该工具已内嵌至 MounRiver Studio II（MRS2）集成开发环境，可完成 UI 设计、源码生成、工程编译与程序下载流程，适用于 CH32V、CH32L 等系列芯片配套彩屏产品开发。

WCHGUIDesigner 支持矩形、图片、艺术字、标签、静态文字、按钮、开关、动画、进度条、滑块、二维码等多种显示控件，以及触摸、按键等交互方式。通过控件的灵活组合，可快速搭建导航菜单、任务栏、交互动效和数据表盘等界面效果，满足电器面板、工业仪器、智能旋钮屏等应用场景的人机交互需求。

下图为WCHGUIDesigner UI界面以及所支持控件库。

image

二、硬件平台

  • CH32V203C8T6-R1开发板，该板带有SPI FLASH接口，已换成8MB的FLASH（W25Q64）
  • 2.4寸SPI接口TFT-LCD屏，驱动芯片为ILI9341，分辨率为240*320

硬件引脚连接如下：

image

三、软件平台

开发环境：MRS2（https://mounriver.com/download）

开发工具：WCHGUIDesigner

四、使用指南

1、创建文件夹

为便于演示，直接在桌面创建CH32V203 GUI以及GUI Project两个文件夹，分别用于存放CH32V203 GUI工程以及WCHGUIDesigner生成的GUI项目文件

2、创建工程

工程创建完成之后，会自动弹出WCHGUIDesigner软件，如下图

3、新建项目

点击新建项目，跳出如下窗口，在该界面可调整屏幕分辨率、是否为圆形屏幕、外部FLASH大小以及项目存放路径，该项目存放在GUI Project文件夹。此处屏幕分辨率为320*240，外部FLASH大小为8MB

4、新增页面

创建项目完成之后，界面如下

可以点击页面列表旁边“+”，选择新建空白页面、或菜单页面、或动画轮播

此处以菜单页面为例，选择菜单页面之后，界面如下

该界面为默认界面，可根据自己需要修改界面，有提供对应的控件库。

注意：关于新增页面之后，有时候窗口可能看不到页面视图，如下图

image

此时可选择视图，重置面板布局，即可看到页面视图，如下图

image

image

5、保存项目

页面修改完成之后，点击文件，选择保存项目

image

 6、生成代码

项目保存之后，可点击生成，选择MCU C代码生成，界面如下。此时外部输出选择V203工程的User文件夹，若需要修改外部FLASH大小，此时也可以修改。

image

点击生成文件，此时界面如下

image


此时可点击关闭，可将WCHGUIDesigner软件最小化，下次使用时再调出。

7、修改工程

打开前面新建的CH32V203 GUI工程，如下

image

工程默认使用SPI1操作FLASH，使用SPI2驱动屏幕。

关于SPI1操作FLASH，例程默认使用PA4作为片选引脚，但CH32V203C8T6-R1开发板使用的是PA2作为片选引脚，可将程序中PA4改为PA2，如下图，其他建议按照工程默认配置连接。

image

工程默认适配驱动芯片为ST7789的屏幕，对于其他驱动芯片的屏幕，需要对LCD_Init和LCD_SetWindows两个函数进行修改。

void LCD_Init(void)
{

    SPI2_Init();
    SPI2_DMA_Init();
    LCD_GPIOInit();

    LCD_RESET();

    LCD_CS_CLR();

    LCD_WR_REG(0x28);

    LCD_exec_init((uint8_t*)lcd_ili9341_init_cmds);

    Delay_Ms(10);

    LCD_Clear(LCD_BLACK);

    Delay_Ms(10);
    LCD_LED_SET();
}

/*********************************************************************
 * @fn      LCD_SetWindows
 * 
 * @brief   Setting LCD display window
 * 
 * @param   xStar -  the bebinning x coordinate of the LCD display window
 *          yStar -  the bebinning y coordinate of the LCD display window
 *          xEnd -  the endning x coordinate of the LCD display window
 *          yEnd -  the endning y coordinate of the LCD display window
 * 
 * @return  none
 */
void LCD_SetWindows(uint16_t xStar, uint16_t yStar, uint16_t xEnd, uint16_t yEnd)
{
    LCD_CS_CLR();
    LCD_WR_REG(LCD_SET_X);
    LCD_WR_DATA(xStar >> 8);
    LCD_WR_DATA(0x00FF & xStar);
    LCD_WR_DATA(xEnd >> 8);
    LCD_WR_DATA(0x00FF & xEnd);

    LCD_WR_REG(LCD_SET_Y);
    LCD_WR_DATA(yStar >> 8);
    LCD_WR_DATA(0x00FF & yStar);
    LCD_WR_DATA(yEnd >> 8);
    LCD_WR_DATA(0x00FF & yEnd);
    LCD_WR_REG(LCD_MEM_WRITE);

    LCD_CS_SET();
}

LCD_Init函数主要用于屏幕初始化配置，对于不同驱动芯片的屏幕，其对应命令不同，一般主要对 lcd_ili9341_init_cmds 数组中命令进行修改即可；

例程默认屏幕驱动芯片为ST7789，此处我所用屏幕驱动芯片为ILI9341，参考 lcd_ili9341_init_cmds 数组，添加 lcd_ili9341_init_cmds 数组，对应ILI9341驱动芯片命令，具体如下：

static const uint8_t lcd_ili9341_init_cmds[] = {

    // ========== 电源控制 ==========
    3, 0xCF, 0x00, 0xC1, 0x30,              // Power control B
    4, 0xED, 0x64, 0x03, 0x12, 0x81,        // Power on sequence control
    3, 0xE8, 0x85, 0x00, 0x78,              // Driver timing control A
    5, 0xCB, 0x39, 0x2C, 0x00, 0x34, 0x02,  // Power control A
    1, 0xF7, 0x20,                           // Pump ratio control
    2, 0xEA, 0x00, 0x00,                    // Driver timing control B

    // ========== 电源电压设置 ==========
    1, 0xC0, 0x23,                           // Power control 1 - GVDD
    1, 0xC1, 0x10,                           // Power control 2 - step-up factor
    2, 0xC5, 0x3E, 0x28,                    // VCOM control 1
    1, 0xC7, 0x86,                           // VCOM control 2

    // ========== 像素格式与显示方向 ==========
    1, 0x3A, 0x55,                           // Pixel Format: 16bit RGB565
    1, 0x36,
#if USE_HORIZONTAL == 0
    0x48,                                    // 竖屏正常
#elif USE_HORIZONTAL == 1
    0x28,                                    // 横屏模式1
#elif USE_HORIZONTAL == 2
    0x88,                                    // 横屏模式2
#elif USE_HORIZONTAL == 3
    0xE8,                                    // 竖屏翻转
#endif

    // ========== 帧率控制 ==========
    2, 0xB1, 0x00, 0x18,                    // Frame Rate (normal mode) ~79Hz
    3, 0xB6, 0x08, 0x82, 0x27,              // Display Function Control

    // ========== 伽马校正 ==========
    1, 0xF2, 0x00,                           // 3Gamma Function Disable
    1, 0x26, 0x01,                           // Gamma Set: curve 1
    15, 0xE0, 0x0F, 0x31, 0x2B, 0x0C, 0x0E, 0x08,
        0x4E, 0xF1, 0x37, 0x07, 0x11, 0x0A,
        0x16, 0x0B, 0x00,                    // Positive Gamma Correction
    15, 0xE1, 0x00, 0x0E, 0x14, 0x03, 0x11, 0x07,
        0x31, 0xC1, 0x48, 0x08, 0x0F, 0x0C,
        0x31, 0x36, 0x0F,                    // Negative Gamma Correction

    // ========== 显示控制 ==========
    0, 0x11,                                 // Sleep Out (退出睡眠模式)
    0, 0x29,                                 // Display On (开启显示)

    // ========== 终止标志 ==========
    0xFF, 0xFF,
};

可在lcd.h文件中调整显示方向，也可在此处重新调整分辨率。

LCD_SetWindows函数，主要用于LCD显示窗口设置，不同驱动芯片的列地址设置命令、行地址设置命令以及写显存命令不一样，需要做修改。

此处所用屏驱芯片ILI9341和工程默认驱动芯片ST7789对于这3个命令的值是一样的，如下图，因此此处不需要做修改。若是其它驱动芯片，此处命令可能不一样，具体需要对照数据手册进行修改。

image

8、编译工程

工程修改完毕之后，可直接编译工程，如下图，一般按照上述流程修改不会编译报错

image

工程修改编译完毕之后，下载到MCU实现硬件显示需要分两步：
（1）需要将项目生成bin文件下载到外部FLASH；
（2）需要将工程生成bin/hex文件下载到内部FLASH；

9、片外FLASH下载

片外FLASH下载需要配合对应工程进行下载，该工程与新建V203工程默认均使用SPI1引脚操作FLASH，在使用该工程时，若你前面修改了片选引脚，此处要注意修改该工程SPI FLASH片选引脚，和前面一样改为PA2，然后直接编译。

image

工程编译后，会在 obj 文件夹下生成名称为 algorithm.bin 的文件，通过两线方式配合WCH-LinkE下载到外部 FLASH，需要选择正确的文件。

外部 FLASH 下载流程如下：
（1） 在工具 Memory Type 选项中选择外部模式。
（2）选择对应的 MCU 芯片型号
（3） 添加工程编译后的最新 algorithm.bin 文件
（4）选择需要下载到外置 FLASH 的的固件
（5）确认两线连接，点击下载，等待

image

关于步骤3对应的工程文件路径如下：

image

关于步骤4对应的生成文件路径如下：

image

整体如下：

image

10、工程下载

将项目生成bin文件下载到片外FLASH之后，直接下载工程，此时屏幕显示菜单界面，如下图

image

五、控件使用

1、矩形控件使用

鼠标选中矩形控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改矩形大小或位置，此外，支持修改矩形背景色和选择触摸。

image

选中页面，可直接修改页面背景色，如下图。

image

注意：背景颜色可根据自己需要配置选择，下介绍字体颜色同理。

image

2、图片控件使用

鼠标选中图形控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改图片大小或位置，此外，支持选择触摸、图片类型和压缩方式。

image

此时添加图片需要导入对应图片资源，导入方式如下，可直接点击”导入“导入图片资源，也可先新建分组，比如建立”图片“分组，导入资源到图片分组中。

image

添加图片资源之后，直接选择对应的图片，即可添加，如下图。关于背景色修改，参考前面介绍。

image

image

3、艺术字控件使用

鼠标选中艺术字控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改艺术字区域大小或位置，此外，支持选择触摸、修改文本、字体、字号、对齐方式、字体加粗、字体颜色、艺术字区域背景颜色。

image

注意 ：艺术字字符集合默认只有”0123456789%:.-+ ?“，可根据自己需要添加abcd等字符，如下图，但需要注意目前不支持汉字。

image

4、标签控件使用

鼠标选中标签控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改标签区域大小或位置，此外，支持选择触摸、修改文本、对齐方式、字体颜色以及标签区域背景颜色。标签支持显示汉字。

image

5、静态文字控件

鼠标选中静态文字控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改静态文字区域大小或位置，此外，支持选择触摸、修改文本、字体、文本位置、字号、字体加粗、斜体、字体颜色、背景、背景色、背景图片、压缩方式等。

image

6、按钮控件

鼠标选中按钮控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改按钮控件区域大小或位置，此外，支持选择触摸、修改默认按钮是否按下、按钮图片压缩方式等。可通过点击按钮控件动态演示按钮按下和抬起状态，默认按键是抬起状态。

image

点击按钮，按键按下时，如下，显示按下时图片。

image

7、开关控件

鼠标选中开关控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改开关区域大小或位置，此外，支持选择触摸、修改默认开启、开关图片压缩方式等。可通过点击开关控件动态演示开关开启和关闭状态，默认开关是关闭状态。

image

点击开关，开关开启时，如下，显示开启时图片。

image

8、动画控件

鼠标选中动画控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改动画区域大小或位置，此外，支持选择触摸、压缩方式以及动画资源。动画资源导入方式参考前面图片资源导入方式。选中动画资源之后，可修改对应的帧。

image

9、进度条控件

鼠标选中进度条控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改进度条区域大小或位置，此外，支持选择触摸、修改进度条进度值、进度条方向、背景色以及填充色等。

image

10、滑块控件

鼠标选中滑块控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改滑块区域大小或位置，此外，支持选择触摸、初始百分比、滑块方向、背景图等。

image

11、二维码控件

鼠标选中二维码控件，直接拖拽到页面视图中，如下图，可通过拖拉或修改X、Y坐标修改二维码区域大小或位置，此外，支持选择触摸、修改二维码内容、前景色、背景色等。

image

六、GUI演示

如下图，为GUI配置界面

image

GUI配置完成之后，在工程对应文件中会生成对应的控件ID结构体，如下图，在GUI配置是使用了11个控件，此时结构体中包含11个控件ID，调用对应控件ID进行修改使用。

image

比如要实现标签0、1、2、3、4等的动态变化，可直接在wui_page_page_1_loop函数中使用相关函数调用对应控件ID修改即可，该标签对应的ID是11，则按照下图调用即可，关于动态变化间隔时间，不建议直接在该loop函数中直接加延时，可以通过标志位判断实现相应延时效果。

关于进度条，其对应的控件ID是05，直接调用wui_widget_pb_set_value(PAGE_1_COMPONENT_005, CNT);函数进行修改即可。

image

 

posted @ 2026-08-20 14:41  ZaiLi  阅读(104)  评论(0)    收藏  举报