当前位置: 首页 > article >正文

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

(一)自定义两个容器
(1)BottonContainer
在这里插入图片描述
(2)SetAlarmContainers
在这里插入图片描述
(二)把两个容器放在屏幕leadScreen2上
在这里插入图片描述
需要实现的交互:
(1)点击容器BottonContainer上的报警限值,弹窗容器SetAlarmContainers。
(2)弹窗容器SetAlarmContainers后,把容器SetAlarmContainers上的内容:“参数设置”和其下面的长方形图片设置为隐藏。
(三)实现步骤:
(1)在容器BottonContainer上增加交互:trigger1
在这里插入图片描述
(2)点击“报警限值”图片,发生trigger1, 需要添加代码如下:
BottonContainer.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

#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

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

SetAlarmContainers.hpp

#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中

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

/*********************************************************************************/
/********** 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

http://www.kler.cn/a/598610.html

相关文章:

  • dify1.1.1安装
  • 使用LVS的 NAT 模式实现 3 台RS的轮询访问
  • AI重构SEO关键词优化路径
  • Win32桌面编程:ACLUI.DLL,EditSecurity(IntPtr hwndOwner, ISecurityInformation psi)
  • UNIX网络编程笔记:客户/服务器程序示例
  • Mybatis——04
  • 计算机网络高频(二)TCP/IP基础
  • 深度学习框架PyTorch——从入门到精通(6.2)自动微分机制
  • git 基础操作
  • 机器学习结合盘古模型与RAMS实现多尺度气象分析与降尺度的程序结构与流程
  • 母婴电商企业案例:日事清驱动项目管理执行与OKR目标管理的流程自动化实践
  • 串口自动化断电测试
  • 神聖的綫性代數速成例題19. 最小二乘法在線性代數中的應用、線性空間的直和分解及相關性質、矩陣的特徵值分解的拓展應用
  • nginx配置https域名后,代理后端服务器流式接口变慢
  • Sqoop 常用命令
  • LeetCode(27):移除元素
  • mybatis操作数据库报错Cause: Cannot find class: ${com.mysql.cj.jdbc.Driver}
  • sgpt 终端使用指南
  • python每日十题(6)
  • 贪心算法(9)(java)最优除法