使用STM32实现简单的图形界面

使用STM32实现简单的图形界面可以通过使用TFT LCD模块和触摸屏来实现。下面是一个简单的例子，我将使用STM32F103C8T6开发板、TFT LCD模块和触摸屏来实现一个简单的计算器界面。

首先，我们需要准备如下硬件：

• STM32F103C8T6开发板
• TFT LCD模块
• 触摸屏模块

并搭建起如下硬件连接：

• 将TFT LCD模块的数据线（D0-D7）连接到STM32F103C8T6开发板的GPIOB口
• 将TFT LCD模块的控制线（RS, WR, RD, CS）连接到STM32F103C8T6开发板的GPIOA或GPIOC口
• 将触摸屏模块的数据线（X+, X-, Y+, Y-）连接到STM32F103C8T6开发板的GPIOA或GPIOC口

下面是一个简单的图形界面实现代码：

#include "stm32f10x.h"
#include "lcd.h"
#include "touch.h"

// 定义计算器界面上的按钮位置和尺寸
#define BUTTON_WIDTH 80
#define BUTTON_HEIGHT 60
#define BUTTON_MARGIN 10

// 定义计算器界面上的按钮的颜色
#define BUTTON_COLOR LCD_COLOR_BLUE
#define BUTTON_TEXT_COLOR LCD_COLOR_WHITE

// 计算器界面上按钮的文本
const char* buttonLabels[] = {
    "0", "1", "2", "3",
    "4", "5", "6", "7",
    "8", "9", "+", "-",
    "*", "/", "=", "C"
};

// 计算器界面上按钮的位置
const uint16_t buttonPositions[] = {
    10, 10, 100, 80,    // 0
    120, 10, 210, 80,   // 1
    230, 10, 320, 80,   // 2
    340, 10, 430, 80,   // 3
    10, 100, 100, 170,  // 4
    120, 100, 210, 170, // 5
    230, 100, 320, 170, // 6
    340, 100, 430, 170, // 7
    10, 190, 100, 260,  // 8
    120, 190, 210, 260, // 9
    230, 190, 320, 260, // +
    340, 190, 430, 260, // -
    10, 280, 100, 350,  // *
    120, 280, 210, 350, // /
    230, 280, 320, 350, // =
    340, 280, 430, 350  // C
};

// 用于保存用户点击的按钮
int currentButton = -1;

// 计算器界面初始化函数
void calculatorInit() {
    LCD_Init();
    LCD_Clear(LCD_COLOR_WHITE);
    TP_Init();
}

// 判断一个点是否在指定的矩形内
int isPointInRect(int x, int y, int x1, int y1, int x2, int y2) {
    return (x >= x1 && x <= x2 && y >= y1 && y <= y2);
}

// 绘制一个按钮
void drawButton(const char* label, int x, int y, int width, int height, uint16_t color, uint16_t textColor) {
    LCD_DrawFullRect(x, y, width, height, color);
    LCD_DrawRect(x, y, width, height, LCD_COLOR_BLACK);
    LCD_DisplayStringAt(x + width / 2 - strlen(label) * 5, y + height / 2 - 8, (uint8_t*)label, CENTER_MODE);
    LCD_SetTextColor(textColor);
}

// 绘制计算器界面上的所有按钮
void drawButtons() {
    int i;
    for (i = 0; i < sizeof(buttonLabels) / sizeof(buttonLabels[0]); i++) {
        drawButton(buttonLabels[i], buttonPositions[i * 4], buttonPositions[i * 4 + 1], BUTTON_WIDTH, BUTTON_HEIGHT, BUTTON_COLOR, BUTTON_TEXT_COLOR);
    }
}

// 获取用户点击的按钮的索引
int getButtonIndex(int x, int y) {
    int i;
    for (i = 0; i < sizeof(buttonPositions) / sizeof(buttonPositions[0]); i += 4) {
        if (isPointInRect(x, y, buttonPositions[i], buttonPositions[i + 1], buttonPositions[i + 2], buttonPositions[i + 3])) {
            return i / 4;
        }
    }
    return -1;
}

// 处理用户点击事件
void handleTouch(int touchX, int touchY) {
    currentButton = getButtonIndex(touchX, touchY);
    if (currentButton >= 0) {
        drawButton(buttonLabels[currentButton], buttonPositions[currentButton * 4], buttonPositions[currentButton * 4 + 1], BUTTON_WIDTH, BUTTON_HEIGHT, LCD_COLOR_RED, BUTTON_TEXT_COLOR);
        HAL_Delay(100);
        drawButton(buttonLabels[currentButton], buttonPositions[currentButton * 4], buttonPositions[currentButton * 4 + 1], BUTTON_WIDTH, BUTTON_HEIGHT, BUTTON_COLOR, BUTTON_TEXT_COLOR);
    }
}

int main(void) {
    calculatorInit();
    drawButtons();

    while (1) {
        if (TP_Read_XY(&touchX, &touchY) == 0) {
            handleTouch(touchX, touchY);
        }
    }
}

这个例子中，我们首先准备了计算器界面上的按钮的位置和尺寸，然后定义了按钮的颜色和文本，并在 drawButton 函数中绘制按钮。在 handleTouch 函数中处理用户的点击事件，将点击到的按钮高亮显示一段时间。

你可以根据自己的需求修改按钮的位置和尺寸，并在 handleTouch 函数中处理按钮点击事件。这个例子只是一个简单的示例，你可以根据实际需求进行修改和扩展。希望对你有帮助！