ST开发视频+TouchGFX学习

1万 · 2019-4-8 22:30

本帖最后由 WoodData 于 2019-4-9 23:04 编辑

早就听说了TouchGFX，不过一直没玩过。这次趁着ST活动之际可以好好深入了解一下TouchGFX，体验一把。顺便看看能不能移植到我的STM32F103开发板上。先在ST网站下载TouchGFX Designer4.10版本，然后安装。安装的时候提示需要Microsoft .NET Framework 4.5.2，只好一并下载安装。成功之后打开TouchGFX Designer。如下：

首先我写好项目名称，选择存储路径。然后点开了应用模板看了一下。发现里面可选的开发板我一个都没有。没办法那就只能先用PC模拟的玩一下看看了，先熟悉一下。

看着里面的那些开发板，好想要一个

。
接着点开了UI设计模板看了一下，里面有不少例子。不过万事从简单开始，先选个空白的模板开始。等熟悉之后再看看里面例子，进行深度学习。下面是软件内例子截图：

选了一个320X240分辨率16bit的LCD，接着点击CREATE创建项目。先添加ST的**图片和一张背景图资源等下用。

先做了第一个场景，放了背景图和**图片控件以及一个文本控件和按钮。等下用按钮做触发进入第2个场景。选择每个控件可以在右边设置控件的属性等。例如图片控件可重命名名称，XY位置和透明度等。名称会在程序中作为变量名。文本控件可以设置文本初始内容，字体大小，颜色等。按钮选了一个带文本标签的。可以设置标签文字大小颜色，按下和弹起时不同的效果。如图：

好了，下面准备做第2个Screen的ST的**动画看看。先左边场景添加新Screen。然后添加动画控件，并设置动画图片第一帧和最后一帧，以及时间间隔，循环播放。可惜中文不支持，显示是？号。

生成的可执行文件：

simulator.rar (602.31 KB)

视屏：

20190409230353.rar (9.57 MB)

1万 · 2019-4-8 22:31

本帖最后由 WoodData 于 2019-4-9 22:51 编辑

接昨天的，今天设计第3个Screen，参考活动视频中进度条测试，我做了一个输入Slider控制图片透明度的例子。先放个**图片，等下控制他的透明度。再放个文本进度条显示当前透明度百分比。最后放入输入Slider。界面如图：

然后设置Slider事件，参考活动视频中触发执行C++代码。
STM32**9090.setAlpha(value);
STM32**9090.invalidate();
textProgress1.setValue(value);
textProgress1.invalidate();
setAlpha函数是从TouchGFX的手册上找到的。手册可以在TouchGFX安装路径的DOC文件夹中。