亚洲国产精品尤物YW在线观看_春色校园综合人妻AV_亚洲爆乳精品无码一区二区三区_亚洲精品国产肉丝袜久久
首(shou)頁
新聞(wen)動態
產品展(zhan)示
資料(liao)下載
聯(lian)系我(wo)們
新聞動態
新聞動態
當前位置:
網站首頁
>
新聞動態
>
新聞動態
新聞動態
圓形進度條在串口屏上的應用
分享到:
點擊次數:
更新時間:2022-07-13 15:41:10 【
打印此頁
】 【
關閉
】
導讀:
圓(yuan)(yuan)形(xing)進度(du)(du)條(tiao)在(zai)UI設計中(zhong)是一(yi)種(zhong)比較(jiao)常(chang)見的(de)(de)(de)(de)(de)表(biao)示進度(du)(du)的(de)(de)(de)(de)(de)方式(shi)。串口屏(ping)的(de)(de)(de)(de)(de)UI設計也是如此。在(zai)之前(qian)的(de)(de)(de)(de)(de)實現(xian)方式(shi)中(zhong),使用變量(liang)(liang)圖標(biao)來實現(xian)圓(yuan)(yuan)形(xing)進度(du)(du)條(tiao)的(de)(de)(de)(de)(de)功能(neng),將圖標(biao)內(nei)容設計成(cheng)一(yi)個圓(yuan)(yuan)形(xing)進度(du)(du)條(tiao),每個圖標(biao)對應一(yi)個進度(du)(du)值。這樣做的(de)(de)(de)(de)(de)需要(yao)提前(qian)準備大(da)量(liang)(liang)的(de)(de)(de)(de)(de)圖標(biao)素材,由于圖標(biao)數量(liang)(liang)的(de)(de)(de)(de)(de)限制(zhi),進度(du)(du)值的(de)(de)(de)(de)(de)精度(du)(du)有限,并(bing)且大(da)量(liang)(liang)的(de)(de)(de)(de)(de)圖標(biao)會占用更多的(de)(de)(de)(de)(de)存儲(chu)空間。
使用(yong)圓(yuan)形進(jin)度(du)條(tiao)控件,支(zhi)(zhi)持(chi)單色填充背景或前景圓(yuan)環,無(wu)需圖標素材(cai),即可快速制作進(jin)度(du)條(tiao)UI。對于需要進(jin)度(du)條(tiao)色彩更加豐富的(de)需求,支(zhi)(zhi)持(chi)圖標或圖片素材(cai)中獲取(qu)相應位置的(de)顏色填充的(de)圓(yuan)環中。描(miao)述(shu)指針(zhen)的(de)使用(yong),使得進(jin)度(du)條(tiao)的(de)位置,大(da)小,顏色,角度(du)調整更加方便(bian),給UI帶來更大(da)的(de)靈(ling)活性(xing)。注:僅SDWb系列20220517及以后固件支(zhi)(zhi)持(chi)。
一、VGUS組態軟件中如何使用圓形進度條
在VGUS組(zu)態軟件中,控件位(wei)置(zhi)為:變量(liang)配置(zhi)->圓形進度(du)條顯示(shi)。
圓形進(jin)度條顯(xian)示(shi)控件設置如圖1所示(shi)。
圖1 圓(yuan)形進度條顯示(shi)控件屬性(xing)設置
變量(liang)存(cun)儲地址:字地址,范圍0000~FFFF,用于存(cun)儲變量(liang),長度為一個(ge)單元(字地址一個(ge)單元包含2個(ge)字節)。
使用0x82指(zhi)令刷新進度條時需要使用該地址。
起始值(zhi):變量(liang)為(wei)該(gai)值(zhi)時,前景所顯示的區域占(zhan)整個前景區域的0%。
終止值:變量為該值時,前(qian)(qian)景(jing)(jing)所顯示的(de)區域占整個(ge)前(qian)(qian)景(jing)(jing)區域的(de)100%。
起始角度(du)/終(zhong)止角度(du):起始值(zhi)/終(zhong)止值(zhi)分別對應的(de)角度(du)值(zhi)。設(she)置范圍0-720。對應實際的(de)角度(du)為0-360。調(diao)整(zheng)精度(du)為0.5度(du)。
進度(du)條厚度(du):圓環的厚度(du)。當厚度(du)大于等于整個圓環寬度(du)的1/2時,內(nei)圓半徑(jing)為0,此時將(jiang)顯示為扇(shan)形。
邊緣(yuan)圓(yuan)(yuan)角(jiao):開始(shi)和結束的位置使用圓(yuan)(yuan)角(jiao)顯示。
進度(du)方向:從起(qi)始(shi)角度(du)對應的位置(zhi)開始(shi),沿順時針或(huo)逆時針方向顯示(shi)到結(jie)束角度(du)對應的位置(zhi)。
背(bei)景類(lei)型:選(xuan)擇不同的素(su)材填充背(bei)景圓環。
背景顏(yan)色:單色填充(chong)背景圓環;
背(bei)(bei)景(jing)切圖:圖片素(su)材填充(chong)背(bei)(bei)景(jing)圓環;
背景圖(tu)標:圖(tu)標素材(cai)填(tian)充背景圓環(huan)。
前(qian)景類(lei)型:選擇不同的(de)素材填充前(qian)景圓環。
前景(jing)顏色(se):單色(se)填充前景(jing)圓環;
前(qian)景切圖:圖片(pian)素(su)材填充前(qian)景圓(yuan)環;
前景圖標(biao):圖標(biao)素材填充前景圓環。
二、圓形進度條顯示案例
2.1 圓形進度條顯示效果1
圖2 圓(yuan)形進度條(tiao)控件顯示效果1
圖3 圓形進度(du)條(tiao)控件屬性設置1
如圖2/圖3所示(shi),設置起(qi)始值(zhi)/終止(zhi)值(zhi)為0-100,對應(ying)的起(qi)始角度(du)/終止(zhi)角度(du)為450-270。變(bian)量由起(qi)始值(zhi)向終止(zhi)值(zhi)變(bian)化時(shi),前景(jing)(jing)圓(yuan)環沿順時(shi)針方向遞增。使(shi)用邊(bian)緣(yuan)圓(yuan)角,使(shi)得邊(bian)緣(yuan)過渡(du)更加圓(yuan)滑。指定背景(jing)(jing)色和前景(jing)(jing)色即可。無(wu)需其(qi)他(ta)素(su)材。
2.2 圓形進度條顯示效果2
圖(tu)4 圓形進度條控(kong)件顯(xian)示效(xiao)果(guo)2
圖5 圓形(xing)進度條控件屬性設置(zhi)2
如圖(tu)4/圖(tu)5所示(shi),當進度(du)值為100%時,將(jiang)顯示(shi)整個(ge)圓環。使用圖(tu)標(biao)素材作(zuo)為前景(jing)圓環的填充(chong),整個(ge)進度(du)條的色(se)彩變的極(ji)為豐(feng)富(fu)。當進度(du)值達到(dao)一定值時,使用特定的顏(yan)色(se)提(ti)示(shi),將(jiang)達到(dao)更好的UI效(xiao)果。
2.3 圓形進度條顯示效果3
圖(tu)6 圓形(xing)進度條(tiao)控件顯(xian)示效果3
圖7 圓(yuan)形(xing)進度(du)條控件屬性設置3
如圖(tu)6/圖(tu)7所示(shi)(shi),分(fen)別使用(yong)(yong)兩(liang)個圖(tu)標素(su)材(cai)作為背景和前景的填(tian)充數據源(yuan)。使用(yong)(yong)圓形進度條實現進度的顯示(shi)(shi)功(gong)能,僅需要兩(liang)個圖(tu)標即(ji)可:
圖8 圓形進度條(tiao)背景圖標
圖(tu)9 圓形進度條前(qian)景圖(tu)標
如果使用變量圖標顯示,需要顯示多少個級(ji)別(bie)的進(jin)度(du)值,就需要多少張圖標素材。顯然,圓(yuan)形進(jin)度(du)條控(kong)件在這種應用場合更具優勢。
2.4 圓形進度條顯示效果4
圖10 圓形進度(du)條控件顯示效(xiao)果4
圖11 圓(yuan)形進(jin)度條控件屬性設置4
如圖(tu)10/圖(tu)11所示,圓(yuan)形(xing)進度條(tiao)(tiao)顯示成了扇形(xing)。進度條(tiao)(tiao)的(de)外圓(yuan)直徑(jing)為(wei)320,進度條(tiao)(tiao)的(de)厚度為(wei)160,此(ci)時內(nei)圓(yuan)半徑(jing)為(wei)0,圓(yuan)形(xing)進度條(tiao)(tiao)顯示為(wei)扇形(xing)。可(ke)以實現顯示簡(jian)單(dan)餅狀圖(tu)。
上一條:
一招讓UI“動”起來——用戶體驗從功能機時代躍升到智能機時代
下一條:
如何調整電容觸摸屏的靈敏度
copyright © 2003-2023, 中顯科技. all rights reserved.
地址:武漢市東湖新技術開發區高新四路40號葛洲壩太陽城產業園1棟
電話:027-87617912 027-87617960 027-87596062 傳真:027-87596850
技術支持(chi):
7.8