[GUI] 【STM32H750B-DK评测】五:线性进度条的运用

[复制链接]
739|1
 楼主| 数码小叶 发表于 2022-9-9 21:49 | 显示全部楼层 |阅读模式
本帖最后由 数码小叶 于 2022-9-9 21:48 编辑

上一篇已经可以在屏幕上显示温度和湿度,但是只是简单的证明数据获取和显示ok了,但并不是最后的温度显示界面,并且还缺少对温度比较的显示。因此新建一个页面,并且运用touchGFX的进度条组件,来直观显示温度是否超过设定值。
2022-09-08_23-15-41.png

touchGFX提供的线性进度条,可以说是高度的灵活自由,几乎每个参数都可以达到自由定制,以实现自己想要的效果

2022-09-08_23-16-04.png

可以使用其自定义好的角度以及大小,这样外观来的更快,当然也可以选择自己的素材,只要导入就可,预先定义好的素材实际已经涵盖很全了

2022-09-08_23-16-14.png


然后就是线性进度条的大小、坐标、颜色、填充范围,步进长度等具体参数
2022-09-08_23-16-25.png


进度条的填充范围是可以独立设置的,这意味着填充区域是自由的,但这里还是设置的完全填满进度条轮廓,以达到刚好看着是一个整体,最后效果如下
2022-09-09_21-19-50.png

这样两个页面就设置完成了,一个负责设置温度和湿度的阈值,一个负责显示结果。温度的获取,沿用上一篇的流程,这里只需要增加线性进度条的填充以及超过阈值,颜色变化即可
对于,进度条的填充,可以查看LineProgress这个类里定义的方法,class LineProgress : public AbstractProgressIndicator,里面定义了很多的设置方法
2022-09-09_21-26-47.png

可以查看填充方法的具体实现代码:
  1. void LineProgress::setValue(int value)
  2. {
  3.     if (rangeSteps > 0)
  4.     {
  5.         AbstractProgressIndicator::setValue(value);
  6.         int progress = (int)AbstractProgressIndicator::getProgress(rangeSteps);
  7.         CWRUtil::Q5 r(rangeSteps);
  8.         CWRUtil::Q5 p(progress);
  9.         CWRUtil::Q5 x = startX + (endX - startX) / r * p;
  10.         CWRUtil::Q5 y = startY + (endY - startY) / r * p;
  11.         line.updateEnd(x, y);
  12.     }
  13. }


这样填充实现起来也就容易了:
  1.     shiducurrentValue = lineshidu.getValue();
  2.     if(lastshidu - shiducurrentValue >0)
  3.     {
  4.     shiduincrease = true;
  5.     }
  6.     else
  7.     {
  8.      shiduincrease = false;
  9.     }
  10.     shidunextValue = shiduincrease == true ? shiducurrentValue+(lastshidu - shiducurrentValue) : shiducurrentValue-(shiducurrentValue-lastshidu);
  11.     lineshidu.setValue(shidunextValue);
只需要先判断出进度条是要增还是要减,再调用填充函数即可。

对于阈值改变颜色,也容易实现了,将线性进度条的百分值和第一页的设置值进行比较即可,高于就设置红色,低于就显示绿色
  1.     if(wendunextValue >wenduAlarm)
  2.     {
  3.      linewenduPainter.setColor(touchgfx::Color::getColorFromRGB(255, 0, 0));
  4.     }
  5.     else
  6.     {
  7.      linewenduPainter.setColor(touchgfx::Color::getColorFromRGB(38, 212, 44));
  8.     }

最后的视频效果:





 楼主| 数码小叶 发表于 2022-9-9 21:50 | 显示全部楼层
您需要登录后才可以回帖 登录 | 注册

本版积分规则

105

主题

2560

帖子

19

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