當(dāng)前位置：網(wǎng)站首頁 > 新聞動態(tài) > 新聞動態(tài)
新聞動態(tài)

圓形進(jìn)度條在串口屏上的應(yīng)用

分享到：

點(diǎn)擊次數(shù)：更新時間：2022-07-13 15:41:10 【打印此頁】【關(guān)閉】

導(dǎo)讀：

圓形進(jìn)度條在UI設(shè)計(jì)中是一種比較常見的表示進(jìn)度的方式。串口屏的UI設(shè)計(jì)也是如此。在之前的實(shí)現(xiàn)方式中，使用變量圖標(biāo)來實(shí)現(xiàn)圓形進(jìn)度條的功能，將圖標(biāo)內(nèi)容設(shè)計(jì)成一個圓形進(jìn)度條，每個圖標(biāo)對應(yīng)一個進(jìn)度值。這樣做的需要提前準(zhǔn)備大量的圖標(biāo)素材，由于圖標(biāo)數(shù)量的限制，進(jìn)度值的精度有限，并且大量的圖標(biāo)會占用更多的存儲空間。

使用圓形進(jìn)度條控件，支持單色填充背景或前景圓環(huán)，無需圖標(biāo)素材，即可快速制作進(jìn)度條UI。對于需要進(jìn)度條色彩更加豐富的需求，支持圖標(biāo)或圖片素材中獲取相應(yīng)位置的顏色填充的圓環(huán)中。描述指針的使用，使得進(jìn)度條的位置，大小，顏色，角度調(diào)整更加方便，給UI帶來更大的靈活性。注：僅SDWb系列20220517及以后固件支持。

一、VGUS組態(tài)軟件中如何使用圓形進(jìn)度條

在VGUS組態(tài)軟件中，控件位置為：變量配置->圓形進(jìn)度條顯示。

圓形進(jìn)度條顯示控件設(shè)置如圖1所示。

圖1 圓形進(jìn)度條顯示控件屬性設(shè)置

變量存儲地址：字地址，范圍0000~FFFF，用于存儲變量，長度為一個單元（字地址一個單元包含2個字節(jié)）。

使用0x82指令刷新進(jìn)度條時需要使用該地址。

起始值：變量為該值時，前景所顯示的區(qū)域占整個前景區(qū)域的0％。

終止值：變量為該值時，前景所顯示的區(qū)域占整個前景區(qū)域的100％。

起始角度/終止角度：起始值/終止值分別對應(yīng)的角度值。設(shè)置范圍0-720。對應(yīng)實(shí)際的角度為0-360。調(diào)整精度為0.5度。

進(jìn)度條厚度：圓環(huán)的厚度。當(dāng)厚度大于等于整個圓環(huán)寬度的1/2時，內(nèi)圓半徑為0，此時將顯示為扇形。

邊緣圓角：開始和結(jié)束的位置使用圓角顯示。

進(jìn)度方向：從起始角度對應(yīng)的位置開始，沿順時針或逆時針方向顯示到結(jié)束角度對應(yīng)的位置。

背景類型：選擇不同的素材填充背景圓環(huán)。

背景顏色：單色填充背景圓環(huán)；

背景切圖：圖片素材填充背景圓環(huán)；

背景圖標(biāo)：圖標(biāo)素材填充背景圓環(huán)。

前景類型：選擇不同的素材填充前景圓環(huán)。

前景顏色：單色填充前景圓環(huán)；

前景切圖：圖片素材填充前景圓環(huán)；

前景圖標(biāo)：圖標(biāo)素材填充前景圓環(huán)。

二、圓形進(jìn)度條顯示案例

2.1 圓形進(jìn)度條顯示效果1

圖2 圓形進(jìn)度條控件顯示效果1 圖3 圓形進(jìn)度條控件屬性設(shè)置1

如圖2/圖3所示，設(shè)置起始值/終止值為0-100，對應(yīng)的起始角度/終止角度為450-270。變量由起始值向終止值變化時，前景圓環(huán)沿順時針方向遞增。使用邊緣圓角，使得邊緣過渡更加圓滑。指定背景色和前景色即可。無需其他素材。

2.2 圓形進(jìn)度條顯示效果2

圖4 圓形進(jìn)度條控件顯示效果2 圖5 圓形進(jìn)度條控件屬性設(shè)置2

如圖4/圖5所示，當(dāng)進(jìn)度值為100%時，將顯示整個圓環(huán)。使用圖標(biāo)素材作為前景圓環(huán)的填充，整個進(jìn)度條的色彩變的極為豐富。當(dāng)進(jìn)度值達(dá)到一定值時，使用特定的顏色提示，將達(dá)到更好的UI效果。

2.3 圓形進(jìn)度條顯示效果3

圖6 圓形進(jìn)度條控件顯示效果3 圖7 圓形進(jìn)度條控件屬性設(shè)置3

如圖6/圖7所示，分別使用兩個圖標(biāo)素材作為背景和前景的填充數(shù)據(jù)源。使用圓形進(jìn)度條實(shí)現(xiàn)進(jìn)度的顯示功能，僅需要兩個圖標(biāo)即可：

圖8 圓形進(jìn)度條背景圖標(biāo) 圖9 圓形進(jìn)度條前景圖標(biāo)

如果使用變量圖標(biāo)顯示，需要顯示多少個級別的進(jìn)度值，就需要多少張圖標(biāo)素材。顯然，圓形進(jìn)度條控件在這種應(yīng)用場合更具優(yōu)勢。

2.4 圓形進(jìn)度條顯示效果4

圖10 圓形進(jìn)度條控件顯示效果4 圖11 圓形進(jìn)度條控件屬性設(shè)置4

如圖10/圖11所示，圓形進(jìn)度條顯示成了扇形。進(jìn)度條的外圓直徑為320，進(jìn)度條的厚度為160，此時內(nèi)圓半徑為0，圓形進(jìn)度條顯示為扇形。可以實(shí)現(xiàn)顯示簡單餅狀圖。

上一條：一招讓UI“動”起來——用戶體驗(yàn)從功能機(jī)時代躍升到智能機(jī)時代下一條：如何調(diào)整電容觸摸屏的靈敏度

copyright © 2003-2024, 中顯科技. all rights reserved.
地址：武漢市東湖新技術(shù)開發(fā)區(qū)高新四路40號葛洲壩太陽城產(chǎn)業(yè)園1棟
電話：027-87617912 027-87617960 027-87596062 傳真：027-87596850 鄂ICP備18025119號-2
技術(shù)支持：米拓建站 7.8

新聞動態(tài)

當(dāng)前位置：網(wǎng)站首頁 > 新聞動態(tài) > 新聞動態(tài) 新聞動態(tài)

圓形進(jìn)度條在串口屏上的應(yīng)用

當(dāng)前位置：網(wǎng)站首頁 > 新聞動態(tài) > 新聞動態(tài)
新聞動態(tài)