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