国产三级精品三级男人的天堂,日本人成网站18禁止久久影院,亚洲午夜无码久久,亚洲无码一区二区三区
首頁(yè)
新聞動(dòng)態(tài)
產(chǎn)品展示
資料下載
聯(lián)系我們
新聞動(dòng)態(tài)
新聞動(dòng)態(tài)
當(dāng)前位置:
網(wǎng)站首頁(yè)
>
新聞動(dòng)態(tài)
>
新聞動(dòng)態(tài)
新聞動(dòng)態(tài)
圓形進(jìn)度條在串口屏上的應(yīng)用
分享到:
點(diǎn)擊次數(shù):
更新時(shí)間:2022-07-13 15:41:10 【
打印此頁(yè)
】 【
關(guān)閉
】
導(dǎo)讀:
圓形進(jìn)度條在UI設(shè)計(jì)中是一種比較常見(jiàn)的表示進(jìn)度的方式。串口屏的UI設(shè)計(jì)也是如此。在之前的實(shí)現(xiàn)方式中,使用變量圖標(biāo)來(lái)實(shí)現(xiàn)圓形進(jìn)度條的功能,將圖標(biāo)內(nèi)容設(shè)計(jì)成一個(gè)圓形進(jìn)度條,每個(gè)圖標(biāo)對(duì)應(yīng)一個(gè)進(jìn)度值。這樣做的需要提前準(zhǔn)備大量的圖標(biāo)素材,由于圖標(biāo)數(shù)量的限制,進(jìn)度值的精度有限,并且大量的圖標(biāo)會(huì)占用更多的存儲(chǔ)空間。
使用圓形進(jìn)度條控件,支持單色填充背景或前景圓環(huán),無(wú)需圖標(biāo)素材,即可快速制作進(jìn)度條UI。對(duì)于需要進(jìn)度條色彩更加豐富的需求,支持圖標(biāo)或圖片素材中獲取相應(yīng)位置的顏色填充的圓環(huán)中。描述指針的使用,使得進(jìn)度條的位置,大小,顏色,角度調(diào)整更加方便,給UI帶來(lái)更大的靈活性。注:僅SDWb系列20220517及以后固件支持。
一、VGUS組態(tài)軟件中如何使用圓形進(jìn)度條
在VGUS組態(tài)軟件中,控件位置為:變量配置->圓形進(jìn)度條顯示。
圓形進(jìn)度條顯示控件設(shè)置如圖1所示。
圖1 圓形進(jìn)度條顯示控件屬性設(shè)置
變量存儲(chǔ)地址:字地址,范圍0000~FFFF,用于存儲(chǔ)變量,長(zhǎng)度為一個(gè)單元(字地址一個(gè)單元包含2個(gè)字節(jié))。
使用0x82指令刷新進(jìn)度條時(shí)需要使用該地址。
起始值:變量為該值時(shí),前景所顯示的區(qū)域占整個(gè)前景區(qū)域的0%。
終止值:變量為該值時(shí),前景所顯示的區(qū)域占整個(gè)前景區(qū)域的100%。
起始角度/終止角度:起始值/終止值分別對(duì)應(yīng)的角度值。設(shè)置范圍0-720。對(duì)應(yīng)實(shí)際的角度為0-360。調(diào)整精度為0.5度。
進(jìn)度條厚度:圓環(huán)的厚度。當(dāng)厚度大于等于整個(gè)圓環(huán)寬度的1/2時(shí),內(nèi)圓半徑為0,此時(shí)將顯示為扇形。
邊緣圓角:開(kāi)始和結(jié)束的位置使用圓角顯示。
進(jìn)度方向:從起始角度對(duì)應(yīng)的位置開(kāi)始,沿順時(shí)針或逆時(shí)針?lè)较蝻@示到結(jié)束角度對(duì)應(yīng)的位置。
背景類(lèi)型:選擇不同的素材填充背景圓環(huán)。
背景顏色:?jiǎn)紊畛浔尘皥A環(huán);
背景切圖:圖片素材填充背景圓環(huán);
背景圖標(biāo):圖標(biāo)素材填充背景圓環(huán)。
前景類(lèi)型:選擇不同的素材填充前景圓環(huán)。
前景顏色:?jiǎn)紊畛淝熬皥A環(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,對(duì)應(yīng)的起始角度/終止角度為450-270。變量由起始值向終止值變化時(shí),前景圓環(huán)沿順時(shí)針?lè)较蜻f增。使用邊緣圓角,使得邊緣過(guò)渡更加圓滑。指定背景色和前景色即可。無(wú)需其他素材。
2.2 圓形進(jìn)度條顯示效果2
圖4 圓形進(jìn)度條控件顯示效果2
圖5 圓形進(jìn)度條控件屬性設(shè)置2
如圖4/圖5所示,當(dāng)進(jìn)度值為100%時(shí),將顯示整個(gè)圓環(huán)。使用圖標(biāo)素材作為前景圓環(huán)的填充,整個(gè)進(jìn)度條的色彩變的極為豐富。當(dāng)進(jìn)度值達(dá)到一定值時(shí),使用特定的顏色提示,將達(dá)到更好的UI效果。
2.3 圓形進(jìn)度條顯示效果3
圖6 圓形進(jìn)度條控件顯示效果3
圖7 圓形進(jìn)度條控件屬性設(shè)置3
如圖6/圖7所示,分別使用兩個(gè)圖標(biāo)素材作為背景和前景的填充數(shù)據(jù)源。使用圓形進(jìn)度條實(shí)現(xiàn)進(jìn)度的顯示功能,僅需要兩個(gè)圖標(biāo)即可:
圖8 圓形進(jìn)度條背景圖標(biāo)
圖9 圓形進(jìn)度條前景圖標(biāo)
如果使用變量圖標(biāo)顯示,需要顯示多少個(gè)級(jí)別的進(jìn)度值,就需要多少?gòu)垐D標(biāo)素材。顯然,圓形進(jìn)度條控件在這種應(yīng)用場(chǎng)合更具優(yōu)勢(shì)。
2.4 圓形進(jìn)度條顯示效果4
圖10 圓形進(jìn)度條控件顯示效果4
圖11 圓形進(jìn)度條控件屬性設(shè)置4
如圖10/圖11所示,圓形進(jìn)度條顯示成了扇形。進(jìn)度條的外圓直徑為320,進(jìn)度條的厚度為160,此時(shí)內(nèi)圓半徑為0,圓形進(jìn)度條顯示為扇形??梢詫?shí)現(xiàn)顯示簡(jiǎn)單餅狀圖。
上一條:
一招讓UI“動(dòng)”起來(lái)——用戶(hù)體驗(yàn)從功能機(jī)時(shí)代躍升到智能機(jī)時(shí)代
下一條:
如何調(diào)整電容觸摸屏的靈敏度
copyright © 2003-2024, 中顯科技. all rights reserved.
地址:武漢市東湖新技術(shù)開(kāi)發(fā)區(qū)高新四路40號(hào)葛洲壩太陽(yáng)城產(chǎn)業(yè)園1棟
電話:027-87617912 027-87617960 027-87596062 傳真:027-87596850
鄂ICP備18025119號(hào)-2
技術(shù)支持:
米拓建站
7.8