你的浏览器版本过低，可能导致网站不能正常访问！
为了你能正常使用网站功能，请使用这些浏览器。

st-img
chrome st-img
firefox st-img
safari st-img
ie8及以上

STM32 TouchGFX经验分享（二）

[复制链接]
STMCU小助手 发布时间：2023-3-5 12:26
通过TouchGFX创建事件逻辑函数
TouchGFX Designer中的交互由触发器和动作组成：
触发器：是由用户点击或者进行其他操作后产生的信号。
动作：由触发器触发的相应的事件逻辑。
要添加interaction ，请转到任何屏幕或自定义容器的“interaction”选项卡，然后按下标有“Add Interaction”的蓝色按钮，如下图所示。

 20200617134948186.png

添加后界面样子如下：

 20200617135151986.png

Trigger中用于添加触发器类型,例如：按钮点击事件。Choose clicked source 中添加被点击的是哪一个按钮，这里显示的是“button1”。
Action：action的操作分为了两种，第一种是作为基础窗口的动作：
该种动作包括：

@0]H}(7%UT3U9A$ZUH3~I.png

第二种是控件的属性提供的动作：

 N`CP]_(0Y_JS[UG_QGJC)VS.png

在上图的底部存在Can trigger another interaction的复选框，它的作用是连续动作，当一次触发事件后多次响应其他的事件。

Base类中的秘密
在通过TouchGFX Designer创建完界面，并在界面中添加完相应的触发器后，生成的代码中将会存在相应的界面基类，这类代码是由TouchGFX Designer自动生成的，所以不建议更改，在第一章也和大家说过，下面我们探索下这个类中有些什么：
我们以我写的一个例子做讲解，该demo源码在第一张中可下载。看下图


20200617141157230.png

我们以MainWindow窗口作为例子讲解窗口基类中有哪些东西，首先窗口的名字叫做“MainWindow”，其中包含和三个按钮及一个text area还有一张背景图片Backimage。放置的顺序不同在界面上体现的层次感不同，如果将背景图片放在最上层的话其他按钮都将被盖在下面。其次看右侧的interaction，在其中我添加了三个逻辑，类型都是按钮的点击事件对应的是三个按钮，相应的功能是“Call new virtual function”，在下方写了函数的名字。注意函数名字和控件的名字，此时，点击Generate Code 按钮后在VS中打开工程。可以看到在头文件和源文件中generated/gui_generated文件夹下有mainwindow_screen文件夹存在，在该文件夹下将存在该界面的基类。如下图：

 2020061714214482.png

我们看下该类中的头文件：
  1. /*********************************************************************************/
  2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
  3. /*********************************************************************************/
  4. #ifndef MAINWINDOWVIEWBASE_HPP
  5. #define MAINWINDOWVIEWBASE_HPP

  7. #include <gui/common/FrontendApplication.hpp>
  8. #include <mvp/View.hpp>
  9. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>
  10. #include <touchgfx/widgets/ScalableImage.hpp>
  11. #include <touchgfx/widgets/ButtonWithLabel.hpp>
  12. #include <touchgfx/widgets/TextAreaWithWildcard.hpp>
  13. #include <touchgfx/widgets/Button.hpp>

  15. class MainWindowViewBase : public touchgfx::View<MainWindowPresenter>
  16. {
  17. public:
  18.     MainWindowViewBase();
  19.     virtual ~MainWindowViewBase() {}
  20.     virtual void setupScreen();  窗口创建时响应的函数

  22.     /*
  23.      * Virtual Action Handlers
  24.      */
  25.     virtual void setBackImageIMG() 这个就是在TouchGFX Designer中function name 中填的名字他就是Designer产生的关联性。
  26.     {
  27.         // Override and implement this function in MainWindow
  28.     }

  30. protected:
  31.     FrontendApplication& application() {
  32.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
  33.     }

  35.     /*
  36.      * Member Declarations
  37.      */
  38.      这部分放的就是界面上控件的名字，也就是说如果想要修改控件的动作或者状态，除了TouchGFX Designer中修改外，也可以通过代码调用定义修改。
  39.     touchgfx::ScalableImage BackImage;  
  40.     touchgfx::ButtonWithLabel ChangeImage;
  41.     touchgfx::TextAreaWithOneWildcard textimageid;
  42.     touchgfx::Button NextView;
  43.     touchgfx::Button ChartARTViewButton;

  45.     /*
  46.      * Wildcard Buffers
  47.      */
  48.     static const uint16_t TEXTIMAGEID_SIZE = 3;
  49.     touchgfx::Unicode::UnicodeChar textimageidBuffer[TEXTIMAGEID_SIZE];

  51. private:
  52.         这个部分就是 通过TouchGFX Designer中interaction响应的逻辑，具体的一会在cpp文件中将会看见。
  53.     /*
  54.      * Callback Declarations
  55.      */
  56.     touchgfx::Callback<MainWindowViewBase, const touchgfx::AbstractButton&> buttonCallback;

  58.     /*
  59.      * Callback Handler Declarations
  60.      */
  61.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);

  63. };

  65. #endif // MAINWINDOWVIEWBASE_HPP

复制代码

到这里MainWindowViewBase.hpp文件参观完了，可以接下来参观cpp文件了。
  1. /*********************************************************************************/
  2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
  3. /*********************************************************************************/
  4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
  5. #include "BitmapDatabase.hpp"
  6. #include <texts/TextKeysAndLanguages.hpp>
  7. #include <touchgfx/Color.hpp>

  9. MainWindowViewBase::MainWindowViewBase() :
  10.     buttonCallback(this, &MainWindowViewBase::buttonCallbackHandler)
  11. {
  12.         在构造函数中可以看见我们添加的控件在cpp文件中体现的样子包括设置图片或者设置位置
  13.     BackImage.setBitmap(touchgfx::Bitmap(BITMAP_IMG1_ID));
  14.     BackImage.setPosition(0, 0, 800, 480);
  15.     BackImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);

  17.     ChangeImage.setXY(315, 0);
  18.     ChangeImage.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
  19.     ChangeImage.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
  20.     ChangeImage.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
  21.     ChangeImage.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
  22.     ChangeImage.setAction(buttonCallback);这里可以看见添加action方法

  24.     textimageid.setPosition(394, 68, 26, 25);
  25.     textimageid.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 0));
  26.     textimageid.setLinespacing(0);
  27.     Unicode::snprintf(textimageidBuffer, TEXTIMAGEID_SIZE, "%s", touchgfx::TypedText(T_SINGLEUSEID3).getText());
  28.     textimageid.setWildcard(textimageidBuffer);
  29.     textimageid.setTypedText(touchgfx::TypedText(T_SINGLEUSEID2));

  31.     NextView.setXY(377, 135);
  32.     NextView.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
  33.     NextView.setAction(buttonCallback);

  35.     ChartARTViewButton.setXY(377, 230);
  36.     ChartARTViewButton.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_PRESSED_ID));
  37.     ChartARTViewButton.setAction(buttonCallback);页面切换的action函数
  38. 在窗口上添加控件方法
  39.     add(BackImage);
  40.     add(ChangeImage);
  41.     add(textimageid);
  42.     add(NextView);
  43.     add(ChartARTViewButton);
  44. }

  46. void MainWindowViewBase::setupScreen()
  47. {

  49. }

  51. void MainWindowViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
  52. {
  53.     if (&src == &ChangeImage)
  54.     {
  55.         //Interaction1
  56.         //When ChangeImage clicked call virtual function
  57.         //Call setBackImageIMG
  58.         setBackImageIMG();这里可以看见是通过callback函数响应的setBackImageIMG函数，由此可以知道以此方法我们可以自己在界面上添加控件，而控件响应的函数也可以这样添加。注意要是自定义添加不要在base文件中添加要在界面类的函数中添加。
  59.     }
  60.     else if (&src == &NextView)
  61.     {
  62.         //Interaction2
  63.         //When NextView clicked change screen to TabView
  64.         //Go to TabView with screen transition towards East
  65.         application().gotoTabViewScreenSlideTransitionEast();
  66.     }
  67.     else if (&src == &ChartARTViewButton)
  68.     {
  69.         //Interaction3
  70.         //When ChartARTViewButton clicked change screen to ChartView
  71.         //Go to ChartView with screen transition towards East
  72.         application().gotoChartViewScreenSlideTransitionEast();
  73.     }
  74. }

复制代码

由此可以看到创建的界面后，base文件中的状态。下面会给大家展示一下view文件中的内容。


View类的作用
view中的内容是可以进行修改的，可以根据需要添加自己的使用方法。
下面我们再看一下MainWindowView.hpp文件。
  1. #ifndef MAINWINDOWVIEW_HPP
  2. #define MAINWINDOWVIEW_HPP

  4. #include <gui_generated/mainwindow_screen/MainWindowViewBase.hpp>
  5. #include <gui/mainwindow_screen/MainWindowPresenter.hpp>


  8. class MainWindowView : public MainWindowViewBase这里看见这个类是继承上方的基类MainWindowViewBase
  9. {
  10. public:
  11.     MainWindowView();
  12.     virtual ~MainWindowView() {}
  13.     virtual void setupScreen(); 正常创建时，到此处就没有了。
  14.     下方的文件是手动添加的，如果在界面上创建了function函数，
  15.     则在该文件中添加一样的虚函数，具体在上方的base中能看出来。
  16.     virtual void tearDownScreen();
  17.     virtual void setBackImageIMG();
  18. protected:

  20. };

  22. #endif // MAINWINDOWVIEW_HPP
复制代码

此时就可以在cpp文件中添加相应的函数实现了。

按键事件响应逻辑
好了说了这么多，我来给大家总结一下吧，通过TouchGFX Designer创建一个界面，在界面中可拖拽控件，在TouchGFX Designer下也可添加相应的action函数，在添加完函数后，要在view文件中加入相应的虚函数。
除此之外，还可以模仿base文件的方法在界面类中添加相应的button及button的action文件。此章给大家介绍了创建事件的注意示项。
————————————————
版权声明：空闲的程序员


赞 收藏 评论0 发布时间：2023-3-5 12:26

举报

0个回答

所属标签

相似分享

关于
意法半导体
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版