Touchgfx 自定义容器之间的交互操作

(一)自定义两个容器

(1)BottonContainer

(2)SetAlarmContainers

(二)把两个容器放在屏幕leadScreen2上

需要实现的交互:

(1)点击容器BottonContainer上的报警限值,弹窗容器SetAlarmContainers。

(2)弹窗容器SetAlarmContainers后,把容器SetAlarmContainers上的内容:"参数设置"和其下面的长方形图片设置为隐藏。

(三)实现步骤:

(1)在容器BottonContainer上增加交互:trigger1

(2)点击"报警限值"图片,发生trigger1, 需要添加代码如下:

BottonContainer.cpp

cpp 复制代码
#include <gui/containers/BottonContainer.hpp>
BottonContainer::BottonContainer():
                 imageClickedCallback(this, &BottonContainer::imageClickHandler)
{
  imageLimit.setClickAction(imageClickedCallback);
	imageAlarm.setClickAction(imageClickedCallback);
	imageWait.setClickAction(imageClickedCallback);
	imageChart.setClickAction(imageClickedCallback);
	imageSet.setClickAction(imageClickedCallback);
}
void BottonContainer::initialize()
{
    BottonContainerBase::initialize();
}
void BottonContainer::imageClickHandler(const Image& image, const ClickEvent& event)
{
	if(&image == &imageLimit)
	{
		emitTrigger1Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageAlarm)
	{
    emitTrigger2Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageWait)
	{
    emitTrigger3Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageChart)
	{
    emitTrigger4Callback();//调用容器的输出Trigger1
	}
	if(&image == &imageSet)
	{
    emitTrigger5Callback();//调用容器的输出Trigger1
	}	
}

BottonContainer.hpp

cpp 复制代码
#ifndef BOTTONCONTAINER_HPP
#define BOTTONCONTAINER_HPP
#include <gui_generated/containers/BottonContainerBase.hpp>
class BottonContainer : public BottonContainerBase
{
public:
    BottonContainer();
    virtual ~BottonContainer() {}
    virtual void initialize();
		void imageClickHandler(const Image& image, const ClickEvent& event);	
protected:
		Callback<BottonContainer, const Image&, const ClickEvent&> imageClickedCallback;
};
#endif // BOTTONCONTAINER_HPP

(2)在容器SetAlarmContainers上增加动作: action2

增加代码如下:

SetAlarmContainers.cpp

cpp 复制代码
 void SetAlarmContainers::action2()//响应来自leadScreen2View的触发事件
{
    //Your code here
	setALarmImageFalse.setVisible(FALSE);//隐藏图片
	textArea1_1.setVisible(FALSE);//隐藏字体
	this->invalidateContent();
}

SetAlarmContainers.hpp

cpp 复制代码
#ifndef SETALARMCONTAINERS_HPP
#define SETALARMCONTAINERS_HPP
#include <gui_generated/containers/SetAlarmContainersBase.hpp>
class SetAlarmContainers : public SetAlarmContainersBase
{
public:
    SetAlarmContainers();
    virtual ~SetAlarmContainers() {}
    virtual void initialize();
		void imageClickHandler(const Image& image, const ClickEvent& event);
		void action2();
protected:
	  Callback<SetAlarmContainers, const Image&, const ClickEvent&> imageClickedCallback;
};
#endif // SETALARMCONTAINERS_HPP

(3)在屏幕leadScreen2上增加交互动作动作,调用 SetAlarmContainers中的action2()函数。

interaction4: 当BottonContainer trigger1 happens, 当容器bottonContainer的触发(trigger1)发生时, 显示容器setAlarmContainers1,同时触发另一个内部交互动作。

interaction5: 当interaction4完成时, 调用容器setAlarmContainers1的成员函数action2()。把容器SetAlarmContainers1上的内容:"参数设置"和其下面的长方形图片设置为隐藏

其自动生成的交互操作代码位于:leadScreen2ViewBase.cpp中

cpp 复制代码
leadScreen2ViewBase::leadScreen2ViewBase() :
    bottonContainer1Trigger1Callback(this, &leadScreen2ViewBase::bottonContainer1Trigger1CallbackHandler)
{
    __background.setPosition(0, 0, 600, 1024);
    __background.setColor(touchgfx::Color::getColorFromRGB(0, 0, 0));
    add(__background);
    bottonContainer1.setXY(0, 886);
    bottonContainer1.setTrigger1Callback(bottonContainer1Trigger1Callback);
    add(bottonContainer1);
    
    setAlarmContainers1.setXY(0, 656);
    setAlarmContainers1.setVisible(false);
    add(setAlarmContainers1);
}

void leadScreen2ViewBase::bottonContainer1Trigger1CallbackHandler()
{
    //Interaction4
    //When bottonContainer1 trigger1 show setAlarmContainers1
    //Show setAlarmContainers1
    setAlarmContainers1.setVisible(true);
    setAlarmContainers1.invalidate();

    //Interaction5
    //When Interaction4 completed call action2 on setAlarmContainers1
    //Call action2
    setAlarmContainers1.action2();
}

leadScreen2ViewBase.hpp

cpp 复制代码
/*********************************************************************************/
/********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
/*********************************************************************************/
#ifndef LEADSCREEN2VIEWBASE_HPP
#define LEADSCREEN2VIEWBASE_HPP
#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/leadscreen2_screen/leadScreen2Presenter.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <gui/containers/BottonContainer.hpp>
#include <gui/containers/SetAlarmContainers.hpp>
class leadScreen2ViewBase : public touchgfx::View<leadScreen2Presenter>
{
public:
    leadScreen2ViewBase();
    virtual ~leadScreen2ViewBase();
    virtual void setupScreen();
    virtual void handleKeyEvent(uint8_t key);
protected:
    FrontendApplication& application() {
        return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    }
    touchgfx::Box __background;
    touchgfx::Box box2;
    BottonContainer bottonContainer1;
    SetAlarmContainers setAlarmContainers1;
private:
    touchgfx::Callback<leadScreen2ViewBase> bottonContainer1Trigger1Callback;
    void bottonContainer1Trigger1CallbackHandler();
};
#endif // LEADSCREEN2VIEWBASE_HPP
相关推荐
清风6666668 分钟前
基于单片机的便携式温湿度检测烘干机设计
单片机·嵌入式硬件·毕业设计·课程设计
刻BITTER26 分钟前
用CMake 实现U8g2 的 SDL2 模拟环境
c++·stm32·单片机·嵌入式硬件·arduino
梵得儿SHI27 分钟前
Prompt Engineering 核心知识:从基础模式到思维链,掌握大模型高效交互秘籍
大模型·prompt·交互·提示词·对话·大模型提问艺术·极简指令
IT小哥哥呀1 小时前
工业互联与设备IOT助力生产制造实践分享
物联网·交互·制造·简单工厂模式
GilgameshJSS3 小时前
STM32H743-ARM例程23-USB_HID
arm开发·stm32·嵌入式硬件
jjjxxxhhh1233 小时前
【项目-】Qt + QCustomPlot 实现频谱监测仪:四图联动、高频信号注入、鼠标交互全解析
开发语言·qt·交互
日更嵌入式的打工仔5 小时前
存储同步管理器SyncManager 归纳
笔记·单片机·嵌入式硬件
社会大青年5 小时前
STM32 GPIO-------设置成51单片机模式输出
stm32·嵌入式硬件·51单片机
麻辣长颈鹿Sir6 小时前
单片机进入 B. 中断无限循环异常解决方法
单片机·嵌入式硬件·b.中断·异常中断处理·程序无限循环异常处理·芯海spi异常中断·芯海芯片
red watchma6 小时前
Xshell->MCU Ymodem协议实现
网络·单片机·嵌入式硬件