5分钟上手µGUI：零基础实现第一个嵌入式GUI应用

邓越浪Henry

1159人浏览 · 2026-03-01 01:23:43

邓越浪Henry · 2026-03-01 01:23:43 发布

5分钟上手µGUI：零基础实现第一个嵌入式GUI应用

【免费下载链接】UGUI µGUI - Open Source GUI module for embedded systems 项目地址: https://gitcode.com/gh_mirrors/ug/UGUI

µGUI是一款专为嵌入式系统设计的开源GUI模块，以其轻量级和高效性著称。本教程将带你快速入门，无需深厚嵌入式开发经验，5分钟内即可完成第一个图形界面应用的开发，让你的嵌入式项目轻松拥有专业的用户交互界面。

准备工作：获取µGUI源码

首先需要获取µGUI的源代码，通过以下命令克隆仓库：

git clone https://gitcode.com/gh_mirrors/ug/UGUI

仓库中包含核心文件：

ugui.h - 函数声明与数据结构定义
ugui.c - GUI核心实现
ugui_config.h - 配置文件

核心功能速览

µGUI提供了丰富的图形绘制功能，主要包括：

基础图形绘制

直线绘制：通过UG_DrawLine(x1, y1, x2, y2, color)函数绘制任意直线
圆形绘制：使用UG_DrawCircle(x0, y0, radius, color)创建圆形
矩形绘制：UG_DrawFrame(x1, y1, x2, y2, color)绘制矩形边框
填充区域：UG_FillFrame(x1, y1, x2, y2, color)填充指定区域

文本显示

支持多种字体（如FONT_4X6、FONT_8X12等），通过UG_PutString(x, y, "文本内容")函数在指定位置显示文本。

交互组件

提供按钮、复选框等基础交互组件，通过简单的API即可创建响应触摸事件的界面元素。

快速上手：创建第一个GUI应用

步骤1：初始化GUI

首先需要初始化GUI系统，指定显示驱动函数和屏幕尺寸：

#include "ugui.h"

// 定义屏幕尺寸
#define SCREEN_WIDTH  240
#define SCREEN_HEIGHT 240

// 像素绘制函数（需要根据硬件实现）
void my_put_pixel(UG_S16 x, UG_S16 y, UG_COLOR color) {
    // 硬件相关的像素绘制代码
}

// GUI对象
UG_GUI my_gui;

int main(void) {
    // 初始化GUI
    UG_Init(&my_gui, my_put_pixel, SCREEN_WIDTH, SCREEN_HEIGHT);
    UG_SelectGUI(&my_gui);
    
    // 清屏
    UG_FillScreen(C_WHITE);
    
    // 绘制内容
    // ...
    
    while(1) {
        UG_Update();
    }
}

步骤2：绘制基本图形

在初始化完成后，可以开始绘制图形元素：

// 设置前景色为蓝色
UG_SetForecolor(C_BLUE);

// 绘制直线
UG_DrawLine(10, 10, 230, 10, C_RED);

// 绘制矩形
UG_DrawFrame(50, 50, 150, 150, C_GREEN);

// 填充圆形
UG_FillCircle(120, 120, 40, C_YELLOW);

// 显示文本
UG_FontSelect(&FONT_8X12);
UG_PutString(80, 200, "Hello µGUI!");

步骤3：添加交互元素

创建一个简单的按钮并响应点击事件：

// 按钮对象
UG_BUTTON my_button;
UG_WINDOW my_window;
UG_OBJECT my_objects[1];

// 消息处理回调函数
void my_callback(UG_MESSAGE* msg) {
    if(msg->event == OBJ_EVENT_CLICKED) {
        // 按钮被点击时的处理
        UG_FillCircle(120, 120, 40, C_RED);
    }
}

// 创建窗口和按钮
UG_WindowCreate(&my_window, my_objects, 1, my_callback);
UG_ButtonCreate(&my_window, &my_button, BTN_ID_0, 80, 180, 160, 220);
UG_ButtonSetText(&my_window, BTN_ID_0, "Click Me");
UG_WindowShow(&my_window);