概述

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

視頻教學(xué)

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

樣品申請(qǐng)

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

完整代碼下載

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

創(chuàng)建 TouchGFX 項(xiàng)目

打開(kāi) TouchGFX Designer，點(diǎn)擊Create New創(chuàng)建一個(gè)新項(xiàng)目。

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

?這個(gè)時(shí)候我們就新建好了我們的工程。?

添加圖片組件

在使用TouchGFX開(kāi)發(fā)嵌入式用戶界面時(shí)，添加圖片組件是一個(gè)常見(jiàn)的需求。 點(diǎn)擊中間的圖片按鈕，添加圖片組件。?

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

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

添加按鈕

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

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

interactions 設(shè)置

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

生成代碼

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

打開(kāi)文件

在代碼生成完畢后，我們可以點(diǎn)擊 Files 以打開(kāi)文件。?

?打開(kāi)文件之后，可以打開(kāi)對(duì)應(yīng)的STM32CUBEIDE工程。?

配置LED

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

?

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

觸摸點(diǎn)亮LED

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

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

virtual void ToggleLED();

?在Screen1View.cpp中添加按鍵點(diǎn)亮LED的代碼。

演示效果

屏幕按鍵為OFF時(shí)候，LED為紅燈。?

屏幕按鍵為ON時(shí)候，LED為藍(lán)燈。