本帖最后由 sylar^z 于 2019-4-12 18:06 编辑
TouchGFX是老牌GUI之一了，是MCU玩家在构建图形界面时候经常使用的工具之一。此前一直是需要付费使用的，ST收购TouchGFX后，现在可以免费使用了。这次借着二姨家STMCU论坛展开的TouchGFX的畅玩活动，也来学习学习。
因为第一次使用TouchGFX，而TouchGFX Designer软件又自带了很多Demo。所以打算从Demo开始学习TouchGFX。
进入正题。
1.先创建一个工程
2.修改主页面名称 3.添加所需要的图片资源 将图片拷贝到工程目录下的assets\images的文件夹下，TouchGFX Designer会自动加载图片到工程中。
4.添加首页背景图片 可按下图操作。也可以之间在图片资源区直接点击添加到页面上。
5.添加黄色灯
6.添加白色灯
7.添加灯的开关按钮 可通过点击Released Image和Pressed Image设置开关的显示效果。通过Skins-blue-togglebars选择对应的开关显示效果。
8.添加页面切换按钮 可通过点击Released Image和Pressed Image设置开关的显示效果。通过Project选择已保存图片作为按钮显示效果。
9.添加水池温度设定界面 点击+号新增页面。直接点击图片资源区中的图片可直接插入图片作为背景。
10.添加返回主界面按钮 可通过点击Released Image和Pressed Image设置开关的显示效果。通过Project选择已保存图片作为按钮显示效果。
11.添加设置水温设定滑动条 STYLE选择Medium类型，显示效果使用默认。
12 添加水温显示区 12.1 首先添加一个字体格式
12.2再设置该字体的通配符，支持0-9数字的显示
12.3 添加水温显示区 去除Auto Size复选框来自由设定显示区的宽度和高度。设置字体，在WILDCAR1选项中，设置bufsize=3。
13 添加灯开关按键的功能 点击右上角的事件管理区按钮，添加灯开关按键功能。添加按键功能，通过执行c++代码，显示和隐藏黄色灯来实现灯亮灭的效果。这里注意一点，黄色灯应该放在白色灯的上层，即在左侧页面控件区排序中，黄色灯控件需要在白色灯的上面。顺序调整可通过点击拖动来实现。 执行的代码如下（控件名修改了，与之前的图上有差异）： bulbYellow.setVisible(!bulbYellow.isVisible()); bulbYellow.invalidate();
14 添加页面切换按钮的功能
15 添加返回主页面按钮的功能
16 添加水温设定滑动条功能 16.1 添加水温设定滑动条变化的事件
16.2 添加水温设定滑动条功能的代码实现（没装VS，只能用写字板了） 在PoolTempView.hpp中添加代码如下： //event fromPresenter virtual voidsetPoolTemp(uint32_t temp); protected: virtual voidsliderMoved(int value);
在PoolTempView. cpp中添加代码如下： void PoolTempView::setPoolTemp(uint32_t temp) { //updateslider and temperature text slider.setValue(temp); Unicode::snprintf(tempTextBuffer, 3, "%d", temp); tempText.invalidate(); }
void PoolTempView::sliderMoved(int value) { //report topresenter and update text presenter->userSetTemperature(value); Unicode::snprintf(tempTextBuffer, 3, "%d", value); tempText.invalidate(); }
在PoolTempPresenter.hpp中添加代码如下： void userSetTemperature(uint32_t temp); 在PoolTempPresenter.hpp中添加代码如下： //Set viewto match pool temperature in Model view.setPoolTemp(model->getPoolTemperature()); 以及： void PoolTempPresenter::userSetTemperature(uint32_ttemp) { model->userSetTemperature(temp); } 在Model.hpp中添加代码如下： uint32_tgetPoolTemperature() const { returnpoolTemperature; } voiduserSetTemperature(uint32_t temp); 以及： private: //statevariables uint32_tpoolTemperature; 在Model.cpp中添加代码如下： poolTemperature(18) 以及： void Model::userSetTemperature(uint32_t temp) { poolTemperature = temp; }
最后，完成以上操作后就可以编译运行了。程序上相比Demo有所精简，部分在开发板上实现的功能函数没有加入到本工程中。 因为GIF转不出来（谁家有好用的视频转gif的软件推荐一下，多谢），就不上gif了。最终实现效果和官方例程的PC模拟效果一致。
视频及程序: https://pan.baidu.com/s/18LJ8MrFXuty98ij5KWANvA 提取码: ibeh
完结。 | 
楼主
标题置顶
标题高亮
