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