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

在STM32上实现简单的图形界面，最常用的方法是使用TFT LCD屏幕。以下是一个基于STM32F4的例子，使用TFT LCD屏幕和触摸屏实现一个简单的计算器界面。

硬件准备：

• STM32F4开发板
• TFT LCD屏幕（带触摸屏）
• Jumper线

软件准备：

• STM32CubeIDE
• STemWin GUI库

步骤1：创建新项目 在STM32CubeIDE中创建一个新的STM32F4项目，并选择合适的型号和启动文件。

步骤2：配置时钟源 在"System Core" -> "RCC"中配置HSE作为时钟源，并使能PLL。

步骤3：配置GPIO 在"Peripherals" -> "GPIO"中配置LCD相关的GPIO引脚，并设置为输出模式。

步骤4：配置SPI 在"Peripherals" -> "SPI"中配置SPI接口，设置为主模式，使能NSS信号。

步骤5：配置触摸屏 在"Peripherals" -> "I2C"中配置I2C接口，用于读取触摸屏的数据。

步骤6：配置STemWin 下载STemWin GUI库，将其添加到项目中。在"Middlewares"中选择"STemWin"，并配置GUI的屏幕类型和模式。

步骤7：编写主程序代码 在"Src"文件夹中创建一个新的C文件，命名为"main.c"，并编写以下代码：

#include "main.h"
#include "GUI.h"

// 函数声明
void SystemClock_Config(void);

// 主函数
int main(void)
{
  // 初始化HAL库
  HAL_Init();

  // 配置系统时钟
  SystemClock_Config();

  // 初始化LCD和触摸屏
  BSP_LCD_Init();
  BSP_LCD_LayerDefaultInit(0, LCD_FB_START_ADDRESS);
  BSP_LCD_SelectLayer(0);
  BSP_LCD_DisplayOn();
  BSP_LCD_Clear(LCD_COLOR_WHITE);
  GUI_Init();

  // 设置字体和颜色
  GUI_SetFont(GUI_FONT_24B_ASCII);
  GUI_SetColor(GUI_COLOR_BLACK);
  GUI_SetBkColor(GUI_COLOR_WHITE);

  // 设置触摸屏校准
  GUI_TOUCH_SetDefaultCalibration();

  // 主循环
  while (1)
  {
    // 读取触摸屏数据
    GUI_TOUCH_Exec();

    // 绘制计算器界面

    // 等待触摸屏输入
  }
}

// 系统时钟配置函数
void SystemClock_Config(void)
{
  RCC_OscInitTypeDef RCC_OscInitStruct;
  RCC_ClkInitTypeDef RCC_ClkInitStruct;

  __HAL_RCC_PWR_CLK_ENABLE();
  __HAL_PWR_VOLTAGESCALING_CONFIG(PWR_REGULATOR_VOLTAGE_SCALE1);

  RCC_OscInitStruct.OscillatorType = RCC_OSCILLATORTYPE_HSE;
  RCC_OscInitStruct.HSEState = RCC_HSE_ON;
  RCC_OscInitStruct.PLL.PLLState = RCC_PLL_ON;
  RCC_OscInitStruct.PLL.PLLSource = RCC_PLLSOURCE_HSE;
  RCC_OscInitStruct.PLL.PLLM = 8;
  RCC_OscInitStruct.PLL.PLLN = 336;
  RCC_OscInitStruct.PLL.PLLP = RCC_PLLP_DIV2;
  RCC_OscInitStruct.PLL.PLLQ = 7;
  if (HAL_RCC_OscConfig(&RCC_OscInitStruct) != HAL_OK)
  {
    Error_Handler();
  }

  RCC_ClkInitStruct.ClockType = RCC_CLOCKTYPE_HCLK | RCC_CLOCKTYPE_SYSCLK
                              | RCC_CLOCKTYPE_PCLK1 | RCC_CLOCKTYPE_PCLK2;
  RCC_ClkInitStruct.SYSCLKSource = RCC_SYSCLKSOURCE_PLLCLK;
  RCC_ClkInitStruct.AHBCLKDivider = RCC_SYSCLK_DIV1;
  RCC_ClkInitStruct.APB1CLKDivider = RCC_HCLK_DIV4;
  RCC_ClkInitStruct.APB2CLKDivider = RCC_HCLK_DIV2;
  if (HAL_RCC_ClockConfig(&RCC_ClkInitStruct, FLASH_LATENCY_5) != HAL_OK)
  {
    Error_Handler();
  }
}

步骤8：编写GUI绘图代码 在"Src"文件夹中创建一个新的C文件，命名为"gui.c"，并编写以下代码：

#include "gui.h"
#include "DIALOG.h"

// GUI回调函数
void GUI_X_ExecIdle(void)
{
  // 空闲时的处理，可空实现
}

// 程序入口函数
int main(void)
{
  // 初始化LCD和触摸屏
  GUI_Init();
  WM_SetCreateFlags(WM_CF_MEMDEV);

  // 创建窗口
  GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbDialog);

  // 主循环
  while (1)
  {
    // GUI处理函数
    GUI_Exec();
    GUI_X_ExecIdle();
  }
}

// 对话框回调函数
static void _cbDialog(WM_MESSAGE *pMsg)
{
  switch (pMsg->MsgId)
  {
    case WM_INIT_DIALOG:
      // 初始化对话框，创建按钮等控件
      break;
    case WM_PAINT:
      // 绘制对话框背景等元素
      break;
    case WM_NOTIFY_PARENT:
      // 处理按钮等控件的事件
      break;
    default:
      WM_DefaultProc(pMsg);
      break;
  }
}

步骤9：配置STemWin 在"Middlewares" -> "STemWin" -> "Config"文件夹中，找到"LCDConf_template.h"和"GUIConf_template.h"两个文件，将其分别复制并重命名为"LCDConf.h"和"GUIConf.h"。

在"LCDConf.h"中，根据LCD屏幕的型号和接口修改以下配置：

#define LCD_XSIZE             240             // LCD屏幕横向分辨率
#define LCD_YSIZE             320             // LCD屏幕纵向分辨率

#define LCD_BITSPERPIXEL      16              // 每个像素的位数
#define LCD_CONTROLLER       GUIDRV_FLEXCOLOR // 使用的LCD控制器类型

#define LCD_SWAP_XY           0               // 设置为0表示不交换XY轴
#define LCD_MIRROR_X          0               // 设置为0表示不镜像X轴
#define LCD_MIRROR_Y          0               // 设置为0表示不镜像Y轴

在"GUIConf.h"中，根据需要修改以下配置：

#define GUI_NUMBYTES          0x200000        // GUI内存分配的大小
#define GUI_SUPPORT_TOUCH     1               // 支持触摸屏输入

步骤10：编译和烧录程序 配置完毕后，编译并烧录程序到STM32F4开发板中。

以上是一个简单的使用STM32实现图形界面的例子，你可以根据自己的需求进行修改和扩展。通过使用STemWin GUI库，可以方便地实现更复杂的图形界面功能。