[原创] 【TouchGFX 设计】(2)简单界面设计

supermiao123   2019-3-31 21:51 楼主
    今天用了ToughGFX,感觉还是比较赞的,在软件上可以把界面做的比较漂亮,最基本的控件大部分都有,感觉还不是太全,因为我平时在电脑上用LABVIEW开发界面比较多,相对来说比较熟悉。比如我想找个图表,做个波形上去,发现没有,还有按键的外形长宽不能自定义,只能根据提供的选择,这个是不是可以改成自定义的。不过那都是后话,先从有再到丰富。    先新建一个自己的工程,我的板子是F746,找到建一个。
QQ截图20190331211830.jpg
我准备做一个四个按键控制中间圈圈移动的一个demo。
拖入logo,logo拖入需在下面的图片位置添加。同时添加按键和圈圈。因为背景是透明的,于是我又加了个BOX,白色的。
左上角那栏里显示我拖入的控件。四个按键,一个圈圈,一个BOX。

QQ截图20190331213048.jpg
未加BOX的效果如下。
QQ截图20190331213118.jpg
圈圈的属性如下图,设置了颜色和线宽。
1.jpg
按键的属性如下图,设置了样式和按键上的文字。
2.jpg
BOX的属性如下图,白色,背景全覆盖。
3.jpg
logo的属性
4.jpg
都加入之后在属性边上还有一栏,是控件的交互属性。
我是通过按键控制的,增加按键的交互属性。下图是我增加的四个交互属性。
QQ截图20190331211644.jpg
本打算弄个连续上移,没找到合适的选项,找到一个回调函数可以干这个,需要在程序里操作了,我试着生成代码,默认的是IAR,代码时C++,上学时学过,不经常用,留给下次帖子捡起来用一下吧。先生成个固定位置移动,如下图。移动的位置见坐标。
QQ截图20190331211656.jpg
下图是圈圈上移,1秒内完成。
QQ截图20190331211706.jpg
下图是圈圈右移,1秒内完成。
QQ截图20190331211724.jpg
下图是圈圈左移,1秒内完成。
QQ截图20190331211737.jpg
完成后先模拟一下,模拟界面如下图,模拟视频见附件。

QQ截图20190331211211.jpg

看模拟的视频效果还不错,接着下到板子里吧。
下面的图片是在中心和上下左右的位置,移动视频见附件。
中心
微信图片_20190331211614.jpg

微信图片_20190331211554.jpg

微信图片_20190331211558.jpg

微信图片_20190331211609.jpg

微信图片_20190331211603.jpg

    到此,简单的demo就完成了,还是非常方便的,用不了多少时间就能开发出个简单的界面,关键是能仿真,下到板子里直接能用。这个太强大了,不用为初始化代码而烦恼,不过这个是官方评估板,期待在自己设计的板子上的表现,不要太繁琐哦。

此内容由EEWORLD论坛网友supermiao123原创,如需转载或用于商业用途需征得作者同意并注明出处





回复评论 (3)

支持支持
点赞  2019-4-1 09:12
开发越来越方便了,是好事,也是坏事
专注智能产品的研究与开发,专注于电子电路的生产与制造……QQ:2912615383,电子爱好者群: void
点赞  2019-4-1 10:09
引用: 懒猫爱飞 发表于 2019-4-1 10:09
开发越来越方便了,是好事,也是坏事

是的
点赞  2019-4-1 13:46
电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 京公网安备 11010802033920号
    写回复