搜索
ST MCU Finder
安装免费手机应用,
寻找理想的ST MCU

[GUI] 【ST自由学习】+ PoolDemo例程解析

[复制链接]
411|6
 楼主 | 2019-4-11 16:39 | 显示全部楼层 | 奖励家园币|阅读模式
本帖最后由 sylar^z 于 2019-4-12 18:06 编辑

    TouchGFX是老牌GUI之一了,是MCU玩家在构建图形界面时候经常使用的工具之一。此前一直是需要付费使用的,ST收购TouchGFX后,现在可以免费使用了。这次借着二姨家STMCU论坛展开的TouchGFX的畅玩活动,也来学习学习。
    因为第一次使用TouchGFX,而TouchGFX Designer软件又自带了很多Demo。所以打算从Demo开始学习TouchGFX。
    进入正题。
1.先创建一个工程
1.带标示1.jpg

2.修改主页面名称
3.添加所需要的图片资源
将图片拷贝到工程目录下的assets\images的文件夹下,TouchGFX Designer会自动加载图片到工程中。
2-3.查看图片资源-带标示1.jpg

4.添加首页背景图片
可按下图操作。也可以之间在图片资源区直接点击添加到页面上。
4.设置背景图片-带标示1.jpg

5.添加黄色灯
5.添加黄色灯-带标示1.jpg

6.添加白色灯
6.添加白色灯-带标示1.jpg

7.添加灯的开关按钮
可通过点击Released Image和Pressed Image设置开关的显示效果。通过Skins-blue-togglebars选择对应的开关显示效果。
7.添加灯的开关-带标示1.jpg

8.添加页面切换按钮
可通过点击Released Image和Pressed Image设置开关的显示效果。通过Project选择已保存图片作为按钮显示效果。
8.添加页面切换按钮-带标示1.jpg

9.添加水池温度设定界面
点击+号新增页面。直接点击图片资源区中的图片可直接插入图片作为背景。
9.添加水池温度设定界面-带标示1.jpg

10.添加返回主界面按钮
可通过点击Released Image和Pressed Image设置开关的显示效果。通过Project选择已保存图片作为按钮显示效果。
10添加返回主界面按钮-带标示1.jpg

11.添加设置水温设定滑动条
STYLE选择Medium类型,显示效果使用默认。
11.添加水温设定滑动条-带标示1.jpg
11-1.水温设定滑动条参数设置-带标示1.jpg

12 添加水温显示区
12.1 首先添加一个字体格式
12.1.添加字体格式-带标示1.jpg

12.2再设置该字体的通配符,支持0-9数字的显示
12.2.数字通配符设置-带标示1.jpg

12.3 添加水温显示区
去除Auto Size复选框来自由设定显示区的宽度和高度。设置字体,在WILDCAR1选项中,设置bufsize=3。
12.3.添加水温显示区-带标示1.jpg

13 添加灯开关按键的功能
点击右上角的事件管理区按钮,添加灯开关按键功能。添加按键功能,通过执行c++代码,显示和隐藏黄色灯来实现灯亮灭的效果。这里注意一点,黄色灯应该放在白色灯的上层,即在左侧页面控件区排序中,黄色灯控件需要在白色灯的上面。顺序调整可通过点击拖动来实现。
执行的代码如下(控件名修改了,与之前的图上有差异):
bulbYellow.setVisible(!bulbYellow.isVisible());
bulbYellow.invalidate();
13.添加灯开关的功能1-带标示1.jpg

14 添加页面切换按钮的功能
14.添加页面切换按钮的功能-带标示1.jpg

15 添加返回主页面按钮的功能
15.添加返回主页面按键的功能-带标示1.jpg

16 添加水温设定滑动条功能
16.1 添加水温设定滑动条变化的事件
16.添加滑动条设定水温的功能-带标示1.jpg

16.2 添加水温设定滑动条功能的代码实现(没装VS,只能用写字板了)
在PoolTempView.hpp中添加代码如下:
    //event fromPresenter
    virtual voidsetPoolTemp(uint32_t temp);
protected:
    virtual voidsliderMoved(int value);
代码实现21-带标示1.jpg

在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();
}
代码实现22-带标示1.jpg

在PoolTempPresenter.hpp中添加代码如下:
    void userSetTemperature(uint32_t temp);
代码实现23-带标示1.jpg
在PoolTempPresenter.hpp中添加代码如下:
    //Set viewto match pool temperature in Model
   view.setPoolTemp(model->getPoolTemperature());
以及:
void PoolTempPresenter::userSetTemperature(uint32_ttemp)
{
    model->userSetTemperature(temp);
}
代码实现24-带标示1.jpg
在Model.hpp中添加代码如下:
    uint32_tgetPoolTemperature() const
    {
        returnpoolTemperature;
    }
     voiduserSetTemperature(uint32_t temp);
以及:
private:
    //statevariables
    uint32_tpoolTemperature;
代码实现31-带标示1.jpg
在Model.cpp中添加代码如下:
    poolTemperature(18)
以及:
void Model::userSetTemperature(uint32_t temp)
{
    poolTemperature = temp;
}
代码实现32-带标示1.jpg


最后,完成以上操作后就可以编译运行了。程序上相比Demo有所精简,部分在开发板上实现的功能函数没有加入到本工程中。
因为GIF转不出来(谁家有好用的视频转gif的软件推荐一下,多谢),就不上gif了。最终实现效果和官方例程的PC模拟效果一致。

视频及程序: https://pan.baidu.com/s/18LJ8MrFXuty98ij5KWANvA 提取码: ibeh

完结。

使用特权

评论回复
| 2019-4-12 00:03 | 显示全部楼层 | 奖励家园币
目前好像做的最好的,不知道免费不

使用特权

评论回复
 楼主 | 2019-4-15 14:09 | 显示全部楼层 | 奖励家园币
zhuotuzi 发表于 2019-4-12 00:03
目前好像做的最好的,不知道免费不

免费了

使用特权

评论回复
| 2019-5-6 09:26 | 显示全部楼层 | 奖励家园币
非常感谢楼主分享

使用特权

评论回复
| 2019-5-6 09:29 | 显示全部楼层 | 奖励家园币
非常感谢楼主分享

使用特权

评论回复
| 2019-5-6 10:16 | 显示全部楼层 | 奖励家园币
非常好的例程

使用特权

评论回复
| 2019-5-6 10:18 | 显示全部楼层 | 奖励家园币
看起来很好啊

使用特权

评论回复
扫描二维码,随时随地手机跟帖
您需要登录后才可以回帖 登录 | 注册

本版积分规则

我要发帖 投诉建议 创建版块 申请版主

快速回复

您需要登录后才可以回帖
登录 | 注册
高级模式

论坛热帖

在线客服 快速回复 返回顶部 返回列表