本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本教程详细介绍了如何在STM32F103微控制器上实施基于EMWIN库的嵌入式图形用户界面。重点包括如何通过FLASH外置字库显示汉字、进行系统移植和调测，并通过代码实践加深理解。教程适用于STM32F10X系列单片机，并提供了完整的可视化应用构建方案。
STM32F103 EMWIN GUI实战：显示文字(FLASH外置字库)【支持STM32F10X系列单片机】

1. STM32F103微控制器特性

1.1 STM32F103微控制器概述

STM32F103是STMicroelectronics（意法半导体）生产的一款基于ARM Cortex-M3内核的32位高性能微控制器。它在工业控制、医疗设备和嵌入式系统等领域被广泛使用。由于其丰富的外设集成、高性能计算能力和高性价比，它成为许多工程师在设计新项目时的首选。

1.2 核心特性解析

该微控制器的核心特性包括：

  • 核心性能 ：运行在72MHz的ARM Cortex-M3处理器；
  • 内存 ：高达128KB的闪存和20KB的RAM；
  • 外设集成 ：包括多个定时器、ADC、DAC以及通讯外设（如USART、I2C、SPI等）；
  • 电源效率 ：多种低功耗模式支持省电需求。

1.3 应用优势

在使用STM32F103微控制器时，开发者能够利用其出色的性能和丰富的外设来构建复杂的应用。例如，其高性能的CPU在处理实时数据和复杂算法时表现出色，而丰富的外设和低功耗模式使得产品可以在电池供电的便携式设备中稳定运行。

为了深入理解和使用STM32F103，接下来我们将探讨如何在嵌入式开发中应用它，以及如何高效地将EMWIN库集成到基于STM32F103的项目中。

2. EMWIN库图形用户界面简介

2.1 EMWIN图形用户界面概述

2.1.1 EMWIN库的起源与发展

EMWIN图形用户界面库是由德国Micrium公司开发的一种嵌入式图形界面库，最初设计是为了满足工业控制和消费电子领域中对嵌入式图形用户界面的需求。EMWIN库以其轻量级和高效性而闻名，它可以运行在不同的嵌入式平台上，包括STM32微控制器系列。

在EMWIN的发展过程中，该库不断吸收新的设计理念和优化技术，使得用户界面越来越丰富和直观。随着技术的进步，EMWIN库也进行了升级，以支持现代的触控屏和高分辨率显示设备，同时也增强了对多语言的支持，以适应全球化的市场。

2.1.2 EMWIN与STM32F103的兼容性

EMWIN库与STM32F103微控制器的兼容性非常良好，其设计考虑到了资源受限的嵌入式系统特性，因此EMWIN可以高效地运行在具有有限内存和处理能力的STM32F103上。STM32F103的高性能和丰富的外设接口为EMWIN提供了良好的硬件支持，使得开发者能够利用EMWIN库来构建具有视觉吸引力的用户界面。

此外，EMWIN库还支持STM32F103的图形加速器，进一步提高了图形渲染的效率。这为在资源受限的嵌入式设备上实现复杂的动画和图形效果提供了可能，同时也为开发人员提供了更多的灵活性来设计和实现用户界面。

2.2 EMWIN库的架构和组成

2.2.1 核心组件解析

EMWIN库的核心组件包括基本的图形绘制工具、控件集合、事件处理机制和字体管理系统。这些组件共同工作，为开发者提供了创建复杂用户界面所需的所有工具和接口。

图形绘制工具是EMWIN库中最基础的部分，它包括各种API函数，开发者可以使用这些函数来绘制线条、矩形、圆形以及位图等基本图形。控件集合则提供了按钮、文本框、滑动条等标准用户界面元素的实现。事件处理机制则负责管理用户输入和控件状态变化，确保用户界面可以响应外部事件。字体管理系统则负责加载、管理和渲染各种字体和字符集，确保用户界面的文字显示清晰易读。

2.2.2 模块化设计与接口分析

EMWIN库采用了模块化设计，这意味着它的功能被划分为多个模块，每个模块都专注于实现特定的功能。这种设计使得开发者可以根据自己的需要选择合适的模块进行集成，从而实现功能的定制化。模块化设计的好处在于它既提高了代码的可维护性，又降低了系统的耦合度。

每个模块通过定义清晰的接口与其他模块进行交互，这些接口包括函数调用、回调函数以及消息传递等。这样的设计使得整个库的功能可以灵活组合，并且易于扩展。开发者可以在不改变现有代码结构的基础上，通过实现新的接口或扩展旧的接口来增强EMWIN库的功能。

2.3 EMWIN的开发环境搭建

2.3.1 必要的软件和工具链

为了在STM32F103微控制器上使用EMWIN库，开发者需要准备一系列的软件和工具链。首先需要的是一个支持STM32F103的集成开发环境（IDE），例如Keil MDK-ARM、STM32CubeIDE或者IAR Embedded Workbench。

接着需要安装EMWIN库本身，通常这会以库文件的形式提供，需要根据库的文档说明进行集成和配置。除此之外，还需要STM32F103的固件库，这是与微控制器硬件直接交互的基础库。

最后，还应准备图形设计和编辑软件，如Adobe Illustrator或者GIMP，用于创建和编辑用户界面的图形元素。

2.3.2 环境配置步骤和注意事项

配置开发环境大致可以分为以下步骤：

  1. 安装并配置集成开发环境（IDE）。选择一个适合STM32F103开发的IDE，并根据官方文档进行配置。
  2. 集成EMWIN库。将EMWIN库的文件复制到项目目录，并在IDE中添加库文件的引用。确保库文件的路径配置正确，并且库文件版本与STM32F103固件库兼容。
  3. 配置STM32F103固件库。确保微控制器的固件库版本与EMWIN库兼容，并且正确配置了相关的硬件抽象层和底层驱动。
  4. 配置图形资源。根据项目需求，在图形设计软件中创建或编辑所需的图形元素，并将它们转换成适合EMWIN库处理的格式。
  5. 验证配置。编写测试代码，加载EMWIN库，并初始化图形界面。在设备上运行测试，检查图形界面是否正常工作。

在配置开发环境时，有一些重要的注意事项需要遵守：

  • 确保所有软件和库的版本兼容。使用与EMWIN库和STM32F103微控制器兼容的IDE和固件库版本。
  • 正确配置系统时钟和外设，这将影响EMWIN库的性能。
  • 根据目标硬件的内存和存储能力，合理配置EMWIN库的参数，以确保图形界面的流畅运行。
  • 在图形资源设计时，考虑内存占用和渲染效率，避免使用过于复杂的图形元素，这可能会影响性能。

通过遵循以上步骤，开发者可以成功地在STM32F103微控制器上搭建EMWIN图形用户界面开发环境，并开始设计和实现复杂、用户友好的图形界面。

3. 汉字显示与FLASH外置字库的应用

3.1 汉字显示机制与字库选择

3.1.1 汉字编码标准与存储格式

在现代中文计算机处理中，汉字编码是一个重要的基础。Unicode是最广泛使用的汉字编码标准，提供了唯一标识每个字符的编码方式。Unicode为每个汉字指定了一个统一的码点，使得在不同系统和设备之间传输文本成为可能。然而，在嵌入式系统中，尤其是存储空间受限的微控制器如STM32F103上，存储整个Unicode汉字集会消耗大量的存储资源。

汉字在存储介质中通常以点阵字库或矢量字库的形式存在。点阵字库是通过点阵来表示汉字，每个点对应屏幕上的一个像素点。点阵字库因为实现简单和读取速度快，在嵌入式系统中应用广泛。相比点阵字库，矢量字库具有更好的缩放性能和较小的存储空间，但是渲染速度较慢，对处理器要求更高。

3.1.2 FLASH外置字库的优势与应用

由于STM32F103这类微控制器通常具有有限的内部存储空间，因此使用FLASH外置字库是展示汉字的理想方案。FLASH外置字库允许开发者将字库文件存储在外部存储器中，这样就可以只存储必要的字符集，而不是全部的Unicode集。这不仅节约了内部存储空间，还可以根据需要扩展和升级字库。

外部字库的使用还为多语言支持和字体的个性化定制提供了可能。开发者可以根据具体应用场景的需求，选择或设计最合适的字体风格和大小。此外， FLASH外置字库的升级相对容易，只需替换字库文件即可实现。

3.2 字库文件的生成与管理

3.2.1 字库文件的生成工具与流程

为了创建FLASH外置字库，开发人员可以使用第三方字库生成工具。这些工具通常提供了一套完整的字库编辑和生成流程。首先，用户需选择合适的字体文件作为源文件，然后可以对字库进行定制，包括选择所需的字符集、字形样式、点阵大小等。

定制完成后，工具将源字体文件转换为适合嵌入式系统使用的字库格式。这个过程可能包括字形的点阵转换、压缩、和二进制编码。最终生成的字库文件可以是二进制文件或者特定于EMWIN库的格式。

3.2.2 字库存储结构和寻址机制

字库存储结构需要高效且易于访问。通常，字库存储结构采用线性存储，每个字符对应一个地址偏移量。为了提高访问速度，可采用分页存储的方式，即将字库分为多个页，每页固定大小，通过页码和页内偏移量来定位字符。

为了实现快速的字符定位，字库的寻址机制必须高效。寻址通常基于字符的Unicode码点。例如，如果字符的码点是0x8749，寻址算法将基于该码点计算出对应的字库内的位置。

3.3 字库的加载与优化技术

3.3.1 字库动态加载的实现方法

字库动态加载允许系统只在需要时加载字符的字形数据，这对于减少内存使用非常有效。实现字库动态加载的基本方法是，仅将字库的索引结构加载到内存中，而将实际的字形数据存储在外部FLASH中。

当应用程序需要显示某个字符时，它会首先查询内存中的索引结构，找到字符对应的FLASH地址，然后通过程序代码动态读取FLASH中的字形数据。这一过程中，通常需要编写特定的驱动或服务程序来管理字形数据的读取和缓冲。

3.3.2 字库内存占用的优化技巧

在实现字库动态加载的同时，进行内存占用的优化也是提升系统性能的重要方面。优化可以从以下几个方面进行：

  1. 字体压缩：对字形数据进行压缩存储，以减少静态字库存储空间的需求。
  2. 字体级别：实现多种级别的字体，比如常用字使用较大字形，非常用字使用较小字形。
  3. 字体缓存：将常用字符的字形数据缓存到内存中，减少外部存储器的读取次数。
  4. 字体裁剪：通过裁剪掉不常用的字形来减少存储空间的占用。

在实际应用中，以上方法可以根据具体应用场景和需求进行选择和调整。通过优化，可以在保证显示质量的同时，大幅度减少内存和存储资源的消耗。

下面是一个示例代码块，展示了如何使用STM32 HAL库和EMWIN库函数动态加载字库中的汉字并显示在LCD屏幕上：

// 假设已经初始化好了HAL库和EMWIN库的相关环境

// 加载字库中的汉字并显示
void DisplayChineseCharacter(uint16_t x, uint16_t y, uint32_t unicode) {
    // 定位汉字字形数据
    const uint8_t*汉字字形数据 = GetChineseCharacterData(unicode);
    // 判断是否成功获取到字形数据
    if (汉字字形数据 != NULL) {
        // 设置字体颜色和背景色
        GUI_SetColor(GUI_BLACK);
        GUI_SetBkColor(GUI_WHITE);
        // 绘制汉字
        GUI_DispStringAt(汉字字形数据, x, y);
    } else {
        // 字形数据不存在时，显示错误信息或默认字符
        GUI_DispStringAt((uint8_t*)"?", x, y);
    }
}

// 获取汉字字形数据函数的伪代码实现
const uint8_t* GetChineseCharacterData(uint32_t unicode) {
    // 实现汉字字形数据的查找逻辑
    // 返回字形数据的指针，或者在未找到时返回NULL
}

// 应用示例
void ExampleUsage() {
    // 在LCD的指定位置显示汉字
    DisplayChineseCharacter(10, 10, 0x4F60); // 显示汉字 "你"
}

在这个代码块中， DisplayChineseCharacter 函数负责接收显示位置和Unicode编码，然后调用 GetChineseCharacterData 函数从字库中获取对应汉字的字形数据。 GetChineseCharacterData 函数的实现细节根据实际的字库存储结构和寻址机制来确定。最后， GUI_DispStringAt 函数将字形数据绘制到LCD屏幕上。

在实际的开发过程中，字库加载和显示的细节会更加复杂，需要考虑字形数据的压缩、解压、动态内存管理以及可能的缓冲处理等多种因素。此外，由于STM32F103的存储和运行资源有限，合理的优化设计对于系统性能和用户体验至关重要。

4. STM32F10X系列单片机移植与调测流程

4.1 单片机移植前的准备工作

4.1.1 硬件环境的检查与配置

在进行STM32F10X系列单片机的移植前，硬件环境的检查与配置是至关重要的第一步。首先，需要确认开发板的硬件版本是否与所用的EMWIN库版本相兼容。接下来，进行硬件电路的检查，确保所有连接正确无误，例如：晶振、电源、接口等。

此外，还需要检查硬件的存储器资源，尤其是外部存储（如SD卡、NOR/NAND FLASH）是否正常工作。这是因为某些特定功能如外置字库可能需要使用到这些资源。确认所有的外围设备，比如显示屏、按键、串口等，也都应该预先进行测试，确保能够正常工作。

一旦硬件检查无误，下一步是配置硬件环境。这包括设置电源管理、时钟树配置和复位管理。使用STM32CubeMX等配置工具能极大地简化这些步骤，而手动配置则需要对STM32F10X系列单片机的参考手册有深入的理解。

4.1.2 软件依赖库的安装与配置

软件依赖库的安装和配置主要涉及针对STM32F10X系列单片机的固件库安装，以及EMWIN库的集成。首先，下载并安装适合STM32F10X系列的固件库，通常可以是官方提供的STM32标准外设库或者是第三方提供的库，如HAL库等。

接着，安装EMWIN库。EMWIN库的安装需要根据开发环境进行适当配置，包括集成到工程中，并设置正确的路径。EMWIN库的配置参数较多，包括字体、颜色、显示分辨率等，这些参数需要根据实际硬件显示能力进行调整。

在安装和配置依赖库的过程中，一定要注意版本兼容性问题。不同版本的库可能在API上有所差异，可能导致移植后出现问题。此外，确保依赖库与开发环境兼容，比如Keil MDK、IAR EWARM等。

4.2 EMWIN库的移植步骤

4.2.1 库文件的集成与编译配置

EMWIN库的集成与编译配置主要解决如何将EMWIN库整合到STM32F10X系列单片机的开发环境中，并确保其可以被正确编译。这一步骤通常涉及以下几个关键步骤：

  1. 拷贝库文件 ：将EMWIN库的源代码、头文件和库文件（.a 或 .lib 文件）拷贝到工程目录下。

  2. 添加编译路径 ：在开发环境的编译设置中，添加包含EMWIN库文件和头文件的目录。

  3. 配置链接文件 ：如果EMWIN库使用了特定的链接脚本或符号定义，需要在工程的链接器配置文件中正确地引用这些定义。

  4. 编写初始化代码 ：在主工程文件中添加EMWIN库的初始化代码，这通常由库的示例程序提供。

  5. 调整编译选项 ：根据需要调整编译器的优化级别、预处理器指令等编译选项。

在添加库文件和调整编译选项时，以下是一个示例代码块，展示了如何在Keil MDK环境中添加EMWIN库文件：

// 示例代码块
#include "GUI.h"  // 引入EMWIN图形库头文件

// EMWIN库初始化函数
void EMWIN_Init(void) {
    GUI_Init(); // 初始化图形界面环境
    // 其他初始化代码...
}

// 主函数中调用初始化函数
int main(void) {
    // 硬件初始化代码...
    EMWIN_Init(); // 调用EMWIN库初始化
    while(1) {
        // 应用程序代码...
    }
}

4.2.2 核心驱动的适配与调试

核心驱动的适配是确保EMWIN库与STM32F10X系列单片机协同工作的重要步骤。核心驱动包括显示驱动、输入驱动以及定时器等驱动程序。这些驱动程序需要根据单片机的具体型号和外部硬件进行适配和调试。

显示驱动适配通常需要根据所使用的显示控制器类型进行修改，确保EMWIN能通过正确的接口访问显示硬件。输入驱动的适配则确保触摸屏或者按键的输入能被正确处理。

在调试阶段，首先通过简单的测试程序（比如画线、显示文字）来验证显示驱动是否正常工作。一旦显示无误，可以进一步测试输入驱动，确保按键或触摸屏的响应符合预期。在调试过程中，使用串口打印调试信息是一个很有帮助的方法。

在适配和调试过程中，如遇到问题，建议参考以下流程：

  1. 检查初始化顺序 ：确保在调用EMWIN库函数前，所有相关的硬件驱动已经被正确初始化。
  2. 使用调试工具 ：使用逻辑分析仪、示波器或串口调试助手等工具分析问题。
  3. 逐个功能测试 ：逐一测试EMWIN库提供的功能，分析错误出现的阶段。
  4. 查看文档和社区 ：参考EMWIN库的官方文档以及相关开发者社区，获取可能的解决方案。

4.3 移植后的测试与优化

4.3.1 功能性测试与问题排查

功能性测试与问题排查是移植工作完成后的首要任务。测试工作应按照EMWIN库提供的功能从基础到高级进行系统的验证。这包括但不限于：

  • 基本图形绘制 ：测试各种基本图形（点、线、矩形、圆等）的绘制是否正确。
  • 字体和文字显示 ：验证不同字体和大小的文字显示是否正常。
  • 控件使用 ：测试标准控件（按钮、列表、滑块等）的显示和功能。
  • 用户交互 ：通过实际操作，检查用户输入（如按键、触摸屏操作）是否得到正确响应。

在进行功能性测试时，可以采用一系列测试用例来覆盖EMWIN库的各项功能，如表4-1所示：

表4-1：功能性测试用例表格

测试用例ID 测试内容 预期结果 实际结果 备注
TC01 绘制一个100x100像素的矩形 矩形显示在屏幕的指定位置，颜色符合预期
TC02 显示文字“Hello World” 文字清晰可见，大小和字体符合预期
TC03 点击按钮控件 触发按钮事件，执行回调函数
… … … …

一旦发现问题，就需要通过调试工具进行跟踪，查看错误发生的具体位置。一般来说，问题可能出现在以下几个方面：

  • 硬件驱动错误 ：如显示不正确可能是显示驱动初始化不当或不兼容。
  • 库函数调用错误 ：可能因为参数设置不正确，或者调用库函数的时机不当。
  • 资源冲突 ：如内存分配失败、资源争夺等。

4.3.2 性能优化与用户体验改善

性能优化与用户体验改善主要关注如何在确保功能正确的同时，提升系统运行效率和用户交互的流畅度。性能优化通常涉及以下几个方面：

  1. 内存优化 ：通过合理的内存管理策略，避免内存泄漏。在EMWIN库中，动态内存分配较为常见，因此需要特别注意释放不再使用的内存资源。

  2. 显示刷新率提高 ：如果图形界面更新不够流畅，需要考虑降低图形渲染的复杂度，或者优化显示刷新机制，如使用双缓冲技术。

  3. 响应速度优化 ：优化输入设备的响应机制，减少用户操作的延时。

  4. 资源占用优化 ：比如减少不必要的字体和图形资源占用，使用压缩技术或者选择更高效的资源格式。

用户体验改善则关注于如何让应用更加友好和直观。这通常包括：

  1. 界面设计优化 ：设计简洁直观的用户界面，减少用户的操作步骤。

  2. 交互流程优化 ：优化用户操作流程，确保每个步骤都符合用户习惯。

  3. 反馈机制 ：为用户提供及时的反馈，比如按键点击的声音、状态切换的动画效果等。

在实际操作中，以下是一个典型的代码示例，展示了如何使用EMWIN库进行简单的性能优化：

// 示例代码块：使用双缓冲技术提高显示效率
void DisplayAndUpdate(GUI画画函数指针，int x, int y, int width, int height) {
    // 创建双缓冲
    U8 GUI_buffer[缓冲区大小];
    GUI_LOCK();
    LCD_SetBufferPtr(GUI_buffer);
    LCD_SetOrg(x, y);
    LCD_SetVSize(width, height);
    // 在GUI_buffer上绘制
    GUI画画函数指针();
    // 双缓冲内容显示到LCD
    LCD_DrawHLine(0, LCD_GetYSize() - 1, LCD_GetXSize());
    GUI_UNLOCK();
}

在这个示例中，通过创建一个内存缓冲区，并将绘制操作重定向到这个缓冲区，可以有效避免在绘制过程中直接操作LCD，从而减少闪烁，提升显示效果。这种技术在图形界面频繁更新的情况下尤为有效。

5. EMWIN图形绘制和控件创建实践

5.1 图形绘制的基础技巧

在嵌入式GUI开发中，图形绘制是一个基础且重要的环节。EMWIN库提供了丰富的API函数，以支持开发者绘制各类图形。了解这些API函数的使用方法和绘制技巧，将有助于创建美观且功能丰富的用户界面。

5.1.1 图形绘制的API函数使用

首先，需要熟悉EMWIN库中的基本图形绘制API。例如， GUI_DrawRect() 函数用于绘制矩形， GUI_DrawLine() 用于绘制线条。这些函数都接受参数如坐标、颜色和线宽等，控制图形的绘制效果。

void draw_basic形状() {
    GUI_Clear();  // 清除画布
    GUI_SetColor(GUI_WHITE);  // 设置绘制颜色为白色
    GUI_DrawRect(10, 10, 100, 50);  // 绘制一个矩形
    GUI_DrawLine(20, 20, 80, 40);  // 绘制一条线段
}

5.1.2 常见图形的绘制方法与示例

除了基本图形，EMWIN还支持绘制圆形、椭圆、多边形等。例如，绘制圆形可以使用 GUI_DrawArc() ，绘制多边形则需要使用循环调用 GUI_DrawPoint() 来绘制每个顶点。

绘制圆形的示例代码如下：

void draw_circle() {
    GUI_Clear();
    GUI_SetColor(GUI_BLACK);
    GUI_DrawArc(50, 50, 40, 0, 360);  // 在(50,50)位置绘制一个半径为40的圆
}

绘制多边形的示例代码如下：

void draw_polygon() {
    GUI_Clear();
    GUI_SetColor(GUI_RED);
    int x[5] = {10, 20, 30, 20, 10};
    int y[5] = {10, 20, 10, 0, 0};
    GUI_DrawPolygon(x, y, 5);  // 使用数组x[]和y[]中的坐标绘制五边形
}

这些示例展示了基本图形绘制的方法。通过组合使用不同的函数和颜色，可以开发出复杂和个性化的图形界面。

5.2 控件的创建与事件处理

控件是构成用户界面的基石。EMWIN库提供了各种标准控件，如按钮、列表框和滑块等。学习如何创建这些控件，以及处理它们的事件，是开发交互式应用程序的关键。

5.2.1 标准控件的创建过程

创建一个标准控件通常需要几个步骤：声明控件变量、初始化控件、添加到显示上，并设置控件的属性和事件处理函数。

下面是如何创建一个简单按钮的示例代码：

void create_button() {
    WM_HWIN hButton;
    hButton = WM_CreateButton(100, 100, 80, 40, "Click Me", 0);  // 创建按钮
    WM_AddButton(hButton);  // 将按钮添加到显示上
}

5.2.2 事件驱动模型的应用

事件驱动模型是EMWIN处理用户交互的核心。控件的事件，如按钮点击，通过回调函数来处理。开发者需要编写这些回调函数来实现特定的交互逻辑。

示例代码展示了如何为按钮点击事件添加回调函数：

void OnButtonPressed(WM_HWIN hObj, int Notification) {
    if (Notification == WM_NOTIFICATION_PRESSED) {
        GUI_ClearDispStr();  // 清除显示的字符串
        GUI_DispStringAt("Button Clicked!", 0, 0);  // 显示新的字符串
    }
}

void register_event_handler() {
    WM_HWIN hButton = WM_CreateButton(100, 100, 80, 40, "Click Me", 0);
    WM_SetCallback(hButton, OnButtonPressed);  // 注册事件处理函数
    WM_AddButton(hButton);
}

此示例中 OnButtonPressed 函数将作为按钮的回调函数，当按钮被按下时，清除当前显示的字符串，并显示”Button Clicked!”。

5.3 高级控件定制与交互设计

高级控件通常指的是需要用户定制或扩展的控件，以及可以提供更丰富交互设计的控件。这可能包括了具有动画效果的控件，或是能够根据用户反馈改变行为的控件。

5.3.1 高级控件的扩展与实现

EMWIN允许开发者通过继承现有控件类来创建新的控件。这可以通过使用EMWIN的控件模板和API来实现。例如，创建一个具有动画效果的进度条控件需要编写额外的代码来处理动画逻辑。

下面是一个示例代码片段，展示了如何扩展一个控件：

typedef struct {
    WM_HWIN hWin;
    int value;
} MyProgressBar;

void MyProgressBar_Create() {
    MyProgressBar* pProgressBar = GUI_malloc(sizeof(MyProgressBar));
    pProgressBar->hWin = WM_CreateWindowAsChild(10, 10, 200, 20, WMウィンドウ, WM_NOTransparent, MyProgressBar_Paint, 0);
    pProgressBar->value = 0;
    WM_AddWindow(pProgressBar->hWin);
}

void MyProgressBar_Paint(WM_HWIN hWin) {
    MyProgressBar* pThis = WM_HBKWIN2VAR(hWin);
    // 绘制进度条和当前值
}

void MyProgressBar_SetValue(WM_HWIN hWin, int value) {
    MyProgressBar* pThis = WM_HBKWIN2VAR(hWin);
    pThis->value = value;
    WM_InvalidateWindow(hWin);  // 使窗口无效，触发重绘事件
}

5.3.2 用户交互体验的提升策略

良好的用户体验源于对用户行为的深刻理解和合理的交互设计。在开发高级控件时，需要考虑如何利用EMWIN库提供的各种功能来提升用户的体验。

一个常见的策略是利用EMWIN的窗口管理器和控件属性来实现流畅的动画效果和直观的用户反馈。例如，可以为控件添加过渡效果或者当用户与控件交互时，改变控件的颜色或形状来提示用户操作已被识别。

这里是一个简单的窗口动画效果的示例：

void slide_in_animation() {
    WM_HWIN hWin = WM_CreateWindowAsChild(10, 10, 200, 200, WMウィンドウ, WM_NOTransparent, NULL, 0);
    int x = 300;  // 初始位置X坐标
    int delay = 0;

    for (int i = 0; i < 100; i++) {
        delay = 50;  // 设置延迟时间
        WM_InvalidateWindow(hWin);
        x -= 3;  // 改变位置坐标
        WM_Motion(hWin, x, 10, delay);
    }
}

在实际应用中，可以将此代码与特定控件和事件结合起来，实现更复杂的交互效果。

以上即为EMWIN图形绘制和控件创建实践的深入介绍。通过基础图形绘制技巧、标准控件创建与事件处理，以及高级控件定制与交互设计等实践，开发者可以构建出直观、美观并且功能强大的图形用户界面。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本教程详细介绍了如何在STM32F103微控制器上实施基于EMWIN库的嵌入式图形用户界面。重点包括如何通过FLASH外置字库显示汉字、进行系统移植和调测，并通过代码实践加深理解。教程适用于STM32F10X系列单片机，并提供了完整的可视化应用构建方案。


本文还有配套的精品资源，点击获取
menu-r.4af5f7ec.gif

Logo
openvela

openvela 操作系统专为 AIoT 领域量身定制，以轻量化、标准兼容、安全性和高度可扩展性为核心特点。openvela 以其卓越的技术优势，已成为众多物联网设备和 AI 硬件的技术首选，涵盖了智能手表、运动手环、智能音箱、耳机、智能家居设备以及机器人等多个领域。

更多推荐

cover

Arm Ethos‑U65：YOLOv8n 模型准备与 Vela 编译

avatar openvela
cover

开源新纪元：深度解析小米 MiMo Code 的技术架构与实战应用

avatar openvela

UniAD_v2 模型NPU适配

参考github网址：https://github.com/OpenDriveLab/UniAD/tree/v2.0参考readme：https://gitcode.com/Ascend/DrivingSDK/blob/master/model_examples/UniAD/README.md。

avatar openvela