8.TouchGFX界面应用之自定义容器

来自丢石头百科


TouchGFX的支持自定义组件,类似于你自定义一个函数然后给其他调用,这里就是定义一个组件给其他调用。定一个小目标,我们这一节自定义做一个调色板。

在添加屏幕旁边自定义组件(自定义容器)里面。


203400sqtigz9spttpspa9.png

调色板以下图作为参考,颜色模式是RGB888,需要3个滑动块,以及一些字样。


203400i2cri3srgi60i0jn.png

做3个滑块作为RGB三种颜色的输入量,滑块是可以设置滑过去和没滑过去的颜色的,但是必须是以图片的形式,所以你如果想做的美观一点的话需要提前做大量的图或者使用UI,图片的数量也决定的所使用内存的数量,如果可以图片尽可能的小来节省内存。取好对应的名字,设置最小值为0,最大值为255,开始值设置为0;


203400czzkyhlrgpkulqrp.png





203400o7nnpgz670p0r7gr.png

放置几个字体,右边三个字是需要根据滑块的位置来改变的的,所以我们设置成通配符,


203400jw594mvcm80uym1m.png


放置一个块作显示RGB对应的颜色,第一个和第二个都可以选择,第一个不带边框,第二个带边框,我选择第二个,把边框设置为0,颜色默认黑色,可以不设置为黑色,根据前面滑块的开始值来修改颜色,R =0,G=0,B=0为黑色。


203400f6dkipe54he46wes.png



203400hmfktimj3watmmar.png

摆好,如果认为我这样不好看,你也可以安装自己喜欢样子摆,没有添加背景并且显示背景是灰色和白色小方块说明背景是透明的。


203400m50jgkj0j9zzg0fg.png

这样自定义组件(自定义容器)就做好了?并没有,我i们只是设置好了图形是这样但是我们没有将他们关联起来,在自定义组件(自定义容器)的互动里面添加3个互动,分别对应3个滑块。


203400i115fj59p0j5mzj0.png

这样图形化的界面完成了,我只需要实现3个函数就可以了。在屏幕将自定义的组件(容器)放上去,然后生成代码,找到CustomContainer1Base.hpp和CustomContainer1.hpp两个文件


203400rqz58no35bh9i8in.png

在CustomContainer1Base.hpp中有3个滑块的互动函数。


203400iffo8rnq4r8rb191.png

我们将他拷贝到CustomContainer1.hpp的CustomContainer1中,声明一个变量来作为颜色值,上面我们说到颜色模式是RGB888的,但是我们屏幕使用的是RGB565的所以我们需要进行转换,如果你使用的也是RGB888那么你将重新实现颜色转换,而且uint16_t也保存不了了,需要更高位数的变量如uint32_t。颜色转换后还要将滑块的值显示出来,然后将转换的颜色显示送给box显示出来。


203401gbtvfitx16rimiri.png

启动模拟器


203400a0co8919l70x5yr8.gif

如果需要在STM32上面显示需要添加自定义容器的文件,CustomContainer1.cpp等等。不然编译报错说未定义符号。