本帖最后由 数码小叶 于 2022-9-9 21:48 编辑
上一篇已经可以在屏幕上显示温度和湿度，但是只是简单的证明数据获取和显示ok了，但并不是最后的温度显示界面，并且还缺少对温度比较的显示。因此新建一个页面，并且运用touchGFX的进度条组件，来直观显示温度是否超过设定值。
touchGFX提供的线性进度条，可以说是高度的灵活自由，几乎每个参数都可以达到自由定制，以实现自己想要的效果
可以使用其自定义好的角度以及大小，这样外观来的更快，当然也可以选择自己的素材，只要导入就可，预先定义好的素材实际已经涵盖很全了
然后就是线性进度条的大小、坐标、颜色、填充范围，步进长度等具体参数
进度条的填充范围是可以独立设置的，这意味着填充区域是自由的，但这里还是设置的完全填满进度条轮廓，以达到刚好看着是一个整体，最后效果如下
这样两个页面就设置完成了，一个负责设置温度和湿度的阈值，一个负责显示结果。温度的获取，沿用上一篇的流程，这里只需要增加线性进度条的填充以及超过阈值，颜色变化即可
对于，进度条的填充，可以查看LineProgress这个类里定义的方法，class LineProgress : public AbstractProgressIndicator，里面定义了很多的设置方法
可以查看填充方法的具体实现代码：
void LineProgress::setValue(int value)
{
if (rangeSteps > 0)
{
AbstractProgressIndicator::setValue(value);
int progress = (int)AbstractProgressIndicator::getProgress(rangeSteps);
CWRUtil::Q5 r(rangeSteps);
CWRUtil::Q5 p(progress);
CWRUtil::Q5 x = startX + (endX - startX) / r * p;
CWRUtil::Q5 y = startY + (endY - startY) / r * p;
line.updateEnd(x, y);
}
}
这样填充实现起来也就容易了：
shiducurrentValue = lineshidu.getValue();
if(lastshidu - shiducurrentValue >0)
{
shiduincrease = true;
}
else
{
shiduincrease = false;
}
shidunextValue = shiduincrease == true ? shiducurrentValue+(lastshidu - shiducurrentValue) : shiducurrentValue-(shiducurrentValue-lastshidu);
lineshidu.setValue(shidunextValue);
对于阈值改变颜色，也容易实现了，将线性进度条的百分值和第一页的设置值进行比较即可，高于就设置红色，低于就显示绿色
if(wendunextValue >wenduAlarm)
{
linewenduPainter.setColor(touchgfx::Color::getColorFromRGB(255, 0, 0));
}
else
{
linewenduPainter.setColor(touchgfx::Color::getColorFromRGB(38, 212, 44));
}
最后的视频效果：
| 
楼主
标题置顶
标题高亮
