TouchGFX教程详解

小蓝 • 2024-12-22 08:06 • 编程

一、TouchGFX简介

TouchGFX是一个用于创建嵌入式GUI的跨平台UI框架，它提供了先进的图形渲染功能，使得用户可以快速轻松地为嵌入式项目创建高质量的用户界面。TouchGFX可以跨多个MCU平台运行，包括ARM Cortex-M系列。

TouchGFX的特点是：

优秀的图形渲染性能：TouchGFX可以渲染复杂的图形效果
跨平台兼容性：TouchGFX可以运行在诸多类型MCU上
易于使用：TouchGFX提供了易于使用的图形组件，通过它们，用户可以快速构建GUI应用程序

二、TouchGFX的环境搭建

要想开始使用TouchGFX，需要首先进行项目的环境搭建。下面让我们来看看如何进行环境搭建。

1.安装TouchGFX

有两种方式安装TouchGFX：

通过下载安装包进行安装
使用Git从GitHub上获取TouchGFX的源代码

建议开发人员使用Git从GitHub上获取TouchGFX，这样可以更方便地管理TouchGFX项目的源代码。

2.配置TouchGFX的工程模板

通过TouchGFX工程模板可以快速创建一个支持TouchGFX的工程，步骤如下：

打开TouchGFX Designer
在TouchGFX Designer中选择“New Project”
选择对应MCU平台，创建工程
生成输出文件
将生成的文件添加到IDE中，并编译运行

三、TouchGFX的API介绍

TouchGFX提供了大量的API接口，这些接口可以用于创建图形组件、绘制图形、处理触摸事件、管理动画效果等等。下面我们来详细介绍一些常用API接口。

1.创建图形组件

TouchGFX提供了一系列图形组件，这些组件的创建方法如下：

TextButton button;
button.setXY(10, 10);
button.setText(TypedText(T_TOUCHGFX_DEMO));
button.setAction(triggerTransitionsAction);
add(button);

2.绘制图形

TouchGFX提供了一系列绘制API，这些API可以用于绘制常见的图形效果，如线段、矩形、圆、文本等等。下面是一个绘制文本的例子：

TextAreaWithOneWildcard textArea;
textArea.setPosition(0, 0, 240, 220);
textArea.setWildcard(textBuffer);
add(textArea);

3.处理触摸事件

使用TouchGFX可以轻松处理触摸事件，下面是一个处理触摸事件的例子：

if (touchEvent.getType() == TouchEvent::PRESSED) {
    animateClick();
}

4.管理动画效果

TouchGFX支持多种动画效果，下面是一个实现动画效果的例子：

Transition SlideAnimationRight = Transition::DrawerUp;
SlideAnimationRight.setAnimationEndedCallback(this, &HomeView::animationEndedHandler);
presenter->transitionActive = &SlideAnimationRight;

四、TouchGFX的示例代码

下面是一个完整的TouchGFX示例代码：

#include 
#include 
#include 
#include 
#include 
#include 
#include 

HomePresenter::HomePresenter(HomeView& v) :
    view(v)
{
}

void HomePresenter::activate()
{
    static_cast(Application::getInstance())->gotoMainMenuCarouselScreenNoTransition();
}

void HomePresenter::deactivate()
{

}

void HomePresenter::setAnimationEndedCallback(GenericCallback& callback)
{
    animationEndedAction = callback;
}

void HomePresenter::mcuLoadUpdated(uint8_t mcuLoad)
{
    view.updateProcessorLoad(mcuLoad);
}

HomePresenter::~HomePresenter()
{

}

HomeView::HomeView()
{

}

void HomeView::setupScreen()
{
    background.setBitmap(Bitmap(BITMAP_BACKGROUND_ID));
    background.setWidth(screenWidth);
    background.setHeight(screenHeight);

    add(background);

    uint16_t menuItemsY = ((screenHeight - BOTTOM_BAR_HEIGHT - (menuItems.size() * MENU_ITEM_HEIGHT)) / 2) + 50;
    uint16_t menuItemsMargin = 0;

    for (int i = 0; i setAnimationEndedCallback(animationEndedCallback);
    presenter->activate();
}

void HomeView::tearDownScreen()
{
    presenter->deactivate();
}

void HomeView::setMenuItemClickedCallback(GenericCallback& callback)
{
    for (int i = 0; i mcuLoadUpdated(load);
        lastSentProcessorLoad = load;
    }
}

void HomeView::updateProcessorLoad(uint8_t mcuLoad)
{
    processorLoad.updateProcessorLoad(mcuLoad);
}

void HomeView::menuItemSelected(uint8_t index)
{
    for (int i = 0; i < menuItems.size(); i++)
    {
        menuItems[i].setSelected(index == i);
    }
}

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/282820.html