圆形进度条在串口屏上的应用.pdfVIP

圆形进度条在串口屏上的应用

导读：

圆形进度条在UI设计中是一种比较常见的表示进度的方式。串口屏的UI设计也是如此。在

之前的实现方式中，使用变量图标来实现圆形进度条的功能，将图标内容设计成一个圆形进度条，

每个图标对应一个进度值。这样做的需要提前准备大量的图标素材，由于图标数量的限制，进度

值的精度有限，并且大量的图标会占用更多的存储空间。

使用圆形进度条控件，支持单色填充背景或前景圆环，无需图标素材，即可快速制作进度条

UI。对于需要进度条色彩更加丰富的需求，支持图标或图片素材中获取相应位置的颜色填充的圆

环中。描述指针的使用，使得进度条的位置，大小，颜色，角度调整更加方便，给UI带来更大的

灵活性。注：仅SDWb系及以后固件支持。

一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

如图4/图5所示，分别使用两个图标素材作为背景和前景的填充数据源。使用圆形进度条实现进

度的显示功能，仅需要两个图标即可：

图8圆形进度条背景图标图9圆形进度条前景图标

如果使用变量图标显示，需要显示多少个级别的进度值，就需要多少张图标素材。显然，圆形进

度条控件在这种应用场合更具优势。

2.4圆形进度条显示效果4

图10圆形进度条控件显示效果4图11圆形进度条控件属性设置4

如图10/图11所示，圆形进度条显示成了扇形。进度条的外圆直径为320，进度条的厚度为160，

此时内圆半径为0，圆形进度条显示为扇形。可以实现显示简单饼状图。