概述

了解如何使用 TouchGFX 配置屏幕，添加觸摸按鈕，并通過按鈕控制板載 LED 的狀態(tài)。 最近在弄ST和瑞薩RA的課程，需要樣片的可以加群申請：615061293。

視頻教學(xué)

https://www.bilibili.com/video/BV1Ws4y1M7bF/

樣品申請

https://www.wjx.top/vm/mSVawPF.aspx

完整代碼下載

https://download.csdn.net/download/qq_24312945/87806816

創(chuàng)建 TouchGFX 項目

打開 TouchGFX Designer，點擊Create New創(chuàng)建一個新項目。

選擇合適的硬件開發(fā)板和屏幕分辨率以及創(chuàng)建工程。

這個時候我們就新建好了我們的工程。

添加圖片組件

在使用TouchGFX開發(fā)嵌入式用戶界面時，添加圖片組件是一個常見的需求。 點擊中間的圖片按鈕，添加圖片組件。

選擇Image選項，可以導(dǎo)入或者選擇已有的圖片，選擇stock可以選擇默認(rèn)的一些圖片，注意屏幕分辨率。

選擇完畢之后，在TouchGFX界面會顯示該圖片的樣式。

添加按鈕

借助Toggle Button組件，我們可以輕松地為界面添加功能強大且外觀精美的開關(guān)組件，滿足各種交互需求。這一組件的設(shè)計充分考慮了易用性與視覺效果，為用戶提供了一種簡潔且直觀的操作方式。

您可以使用Preset預(yù)設(shè)選項輕松挑選出適合的按鈕樣式。這些預(yù)設(shè)包含了多種精心設(shè)計的按鈕外觀，為您的界面提供了豐富的選擇與個性化展現(xiàn)。

interactions 設(shè)置

interactions 是指組件與用戶之間的交互。這些交互通常包括觸摸輸入、手勢識別以及處理這些輸入的回調(diào)函數(shù)。 對于按鍵的交互，可以按照下面圖片進行配置。

生成代碼

在配置完成之后，我們可以按照下圖所示點擊相應(yīng)按鈕來生成代碼。

打開文件

在代碼生成完畢后，我們可以點擊 Files 以打開文件。

打開文件之后，可以打開對應(yīng)的STM32CUBEIDE工程。

配置LED

查看原理圖可以得知用戶的LD2和LD3對應(yīng)PG2和PG11管腳。

查看對應(yīng)的STM32CUBEMX文件也可以得知，對LED管腳進行了定義。

觸摸點亮LED

打開文件Application->User->Screen1ViewBase.cpp 可以看到，當(dāng) toggleButton1 被點擊時，調(diào)用虛擬函數(shù)。

在Screen1View.hpp中的Screen1View 類中聲明這個虛擬函數(shù)ToggleLED()。

virtual void ToggleLED();

在Screen1View.cpp中添加按鍵點亮LED的代碼。

#include "stm32h7xx_hal.h"

void Screen1View::ToggleLED()
{
    if(toggleButton1.getState())
    {
        HAL_GPIO_WritePin(GPIOG, GPIO_PIN_2, GPIO_PIN_SET);//LD2藍燈亮
        HAL_GPIO_WritePin(GPIOG, GPIO_PIN_11, GPIO_PIN_RESET);//LD3紅燈滅
    }
    else
    {
        HAL_GPIO_WritePin(GPIOG, GPIO_PIN_2, GPIO_PIN_RESET);//LD2藍燈滅
        HAL_GPIO_WritePin(GPIOG, GPIO_PIN_11, GPIO_PIN_SET);//LD3紅燈亮
    }
}

演示效果

屏幕按鍵為OFF時候，LED為紅燈。

屏幕按鍵為ON時候，LED為藍燈。

審核編輯：湯梓紅