首页
新闻动态
产品展示
资料下载
联系我们
新闻动态
新闻动态
当前位置：
网站首页
>
新闻动态
>
新闻动态
新闻动态
圆形进度条在串口屏上的应用
分享到：
点击次数：
更新时间：2022-07-13 15:41:10 【
打印此页
】 【
关闭
】
导读：
圆形进度条在UI设计中是一种比较常见的表示进度的方式。串口屏的UI设计也是如此。在之前的实现方式中，使用变量图标来实现圆形进度条的功能，将图标内容设计成一个圆形进度条，每个图标对应一个进度值。这样做的需要提前准备大量的图标素材，由于图标数量的限制，进度值的精度有限，并且大量的图标会占用更多的存储空间。
使用圆形进度条控件，支持单色填充背景或前景圆环，无需图标素材，即可快速制作进度条UI。对于需要进度条色彩更加丰富的需求，支持图标或图片素材中获取相应位置的颜色填充的圆环中。描述指针的使用，使得进度条的位置，大小，颜色，角度调整更加方便，给UI带来更大的灵活性。注：仅SDWb系列20220517及以后固件支持。
一、VGUS组态软件中如何使用圆形进度条
在VGUS组态软件中，控件位置为：变量配置->圆形进度条显示。
圆形进度条显示控件设置如图1所示。
图1 圆形进度条显示控件属性设置
变量存储地址：字地址，范围0000~FFFF，用于存储变量，长度为一个单元（字地址一个单元包含2个字节）。
使用0x82指令刷新进度条时需要使用该地址。
起始值：变量为该值时，前景所显示的区域占整个前景区域的0％。
终止值：变量为该值时，前景所显示的区域占整个前景区域的100％。
起始角度/终止角度：起始值/终止值分别对应的角度值。设置范围0-720。对应实际的角度为0-360。调整精度为0.5度。
进度条厚度：圆环的厚度。当厚度大于等于整个圆环宽度的1/2时，内圆半径为0，此时将显示为扇形。
边缘圆角：开始和结束的位置使用圆角显示。
进度方向：从起始角度对应的位置开始，沿顺时针或逆时针方向显示到结束角度对应的位置。
背景类型：选择不同的素材填充背景圆环。
背景颜色：单色填充背景圆环；
背景切图：图片素材填充背景圆环；
背景图标：图标素材填充背景圆环。
前景类型：选择不同的素材填充前景圆环。
前景颜色：单色填充前景圆环；
前景切图：图片素材填充前景圆环；
前景图标：图标素材填充前景圆环。
二、圆形进度条显示案例
2.1 圆形进度条显示效果1
图2 圆形进度条控件显示效果1
图3 圆形进度条控件属性设置1
如图2/图3所示，设置起始值/终止值为0-100，对应的起始角度/终止角度为450-270。变量由起始值向终止值变化时，前景圆环沿顺时针方向递增。使用边缘圆角，使得边缘过渡更加圆滑。指定背景色和前景色即可。无需其他素材。
2.2 圆形进度条显示效果2
图4 圆形进度条控件显示效果2
图5 圆形进度条控件属性设置2
如图4/图5所示，当进度值为100%时，将显示整个圆环。使用图标素材作为前景圆环的填充，整个进度条的色彩变的极为丰富。当进度值达到一定值时，使用特定的颜色提示，将达到更好的UI效果。
2.3 圆形进度条显示效果3
图6 圆形进度条控件显示效果3
图7 圆形进度条控件属性设置3
如图6/图7所示，分别使用两个图标素材作为背景和前景的填充数据源。使用圆形进度条实现进度的显示功能，仅需要两个图标即可：
图8 圆形进度条背景图标
图9 圆形进度条前景图标
如果使用变量图标显示，需要显示多少个级别的进度值，就需要多少张图标素材。显然，圆形进度条控件在这种应用场合更具优势。
2.4 圆形进度条显示效果4
图10 圆形进度条控件显示效果4
图11 圆形进度条控件属性设置4
如图10/图11所示，圆形进度条显示成了扇形。进度条的外圆直径为320，进度条的厚度为160，此时内圆半径为0，圆形进度条显示为扇形。可以实现显示简单饼状图。
上一条：
一招让UI“动”起来——用户体验从功能机时代跃升到智能机时代
下一条：
如何调整电容触摸屏的灵敏度
