查看: 3674|回复: 1

TouchGFX实现表盘效果

[复制链接]

658

主题

659

帖子

2079

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2079
发表于 2019-11-28 17:50:37 | 显示全部楼层 |阅读模式
2018年10月,华为首推了第一款长达14天待机的智能手表——HUAWEI WATCH GT。这款手表的图形用户界面是采用TouchGFX框架进行开发的,自推出以来得到了市场的强烈反应和广泛好评。WATCH GT最大的优点是在超低功耗的条件下实现了高端的图形和流畅的动画设计,进一步让MCU在GUI领域的发展得到了市场认可。
& \4 L! {6 O" O4 b/ h' W
通过几十年的发展,可穿戴设备已经逐步蜕变成为变革各个领域的中坚力量,充斥着我们生活的各个方面。我们也可以看出,可穿戴设备必将朝着平民化、设计美观、方式灵活和智能化方向发展,也将更加贴近我们生活的方方面面。
" X: g/ V; Q* y; [/ z  ]! ~
作为可穿戴设备的智能化产品,智能手表的发展前景也是非常广阔。而一款智能手表,带给用户最直观的感受就是表盘。TouchGFX为嵌入式图形用户界面(GUI)提供出色的图形处理性能和流畅的动画效果,同时对资源的需求和功耗极低。TouchGFX运行在32位微控制器上实现的高端图形处理性能完全可以媲美如今的智能手机。
( P: \% D5 Q+ y4 |
接下来,我们将给大家讲解如何用TouchGFX制作智能手表的表盘界面。
4 P& ]- k& E6 K
软件环境:TouchGFX4.12.3、Visual Studio 2017

' Q( b# U& L( Z  U
教程图片下载
8 `: x+ g6 k& Y9 B6 f
1. 使用TouchGFX Designer创建一个Project,界面大小调整为所需的大小,在文件夹中找到assets/images文件,添加你所需要用到的表盘背景及指针等图片资源。

, \( h! E& F/ I5 h% T( ^
2. 在Designer中创建一个Box,将其设置为黑色。(此步骤也可省略)

; [2 P4 e1 ~# P) y
3. 在文件夹中的simulator\msvs\路径下打开Application.sln,进行代码编写。
4. 找到Screen1View.hpp,添加必要的头文件,然后定义一个模拟时钟,再定义控制时间变化的变量以及控制时、分、秒的变量。
1 g) v. w. ~. j2 Q& }
5. 在Screen1View.cpp中,先进行变量的初始化,然后在构造函数中对模拟时钟analogClock进行设置。变量的初始化可以使程序在开始运行时显示相应的时间。我们可以设置模拟时钟的背景图及每个指针的图片,可以通过不同的参数,调整指针的位置,还可以设置指针矫正等。具体操作如下图。

: F' r; \8 B, m9 l
6. 要注意的是,在构造函数中要设定帧频补偿,在使用完后要将其取消。
' d4 ~1 v4 ^1 n2 ?
7. 接下来,我们需要在handleTickEvent()这个"滴答"函数中进行时间变化的编写,并且让analogClock的时间变化采用三个时间变量的值。通过对tickCounter模除的值的修改,可以改变指针变化的时间。
3 U7 Z/ z9 u* |" c
这样,一个模拟时钟的表盘就做好了,点击本地调试器运行,即可看到指针的变化。下图是模拟器运行后的结果。

! t) b) l; _: }, k5 h- ]% j9 \% ~* |0 Y4 y' e; r( f  r
我们还可以通过更换表盘背景图及指针图像,以及添加其他的控件来使制作的表盘更加的精美。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

1

主题

4

帖子

29

积分

新手上路

Rank: 1

积分
29
发表于 2019-12-10 17:40:35 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

保留所有权利 @ 2019 TouchGFX 使用条款 | 销售条款和条件 | 隐私政策 | Cookies管理 | 行使您的权利 | 沪ICP备18033411号-2

快速回复 返回顶部 返回列表