首頁
新聞動態
產品展示
資料下載
聯系我們
新聞動態
新聞動態
當前位置:
網站首頁
>
新聞動態
>
新聞動態
新聞動態
圓形進度條在串口屏上的應用
分享到:
點擊次數:
更新時間:2022-07-13 15:41:10 【
打印此頁
】 【
關閉
】
導讀:
圓形進度條在UI設計中是一種比較常見的表示進度的方式。串口屏的UI設計也是如此。在之前的實現方式中,使用變量圖標來實現圓形進度條的功能,將圖標內容設計成一個圓形進度條,每個圖標對應一個進度值。這樣做的需要提前準備大量的圖標素材,由于圖標數量的限制,進度值的精度有限,并且大量的圖標會占用更多的存儲空間。
使用圓形進度條控件,支持單色填充背景或前景圓環,無需圖標素材,即可快速制作進度條UI。對于需要進度條色彩更加豐富的需求,支持圖標或圖片素材中獲取相應位置的顏色填充的圓環中。描述指針的使用,使得進度條的位置,大小,顏色,角度調整更加方便,給UI帶來更大的靈活性。注:僅SDWb系列20220517及以后固件支持。
一、VGUS組態軟件中如何使用圓形進度條
在VGUS組態軟件中,控件位置為:變量配置->圓形進度條顯示。
圓形進度條顯示控件設置如圖1所示。
圖1 圓形進度條顯示控件屬性設置
變量存儲地址:字地址,范圍0000~FFFF,用于存儲變量,長度為一個單元(字地址一個單元包含2個字節)。
使用0x82指令刷新進度條時需要使用該地址。
起始值:變量為該值時,前景所顯示的區域占整個前景區域的0%。
終止值:變量為該值時,前景所顯示的區域占整個前景區域的100%。
起始角度/終止角度:起始值/終止值分別對應的角度值。設置范圍0-720。對應實際的角度為0-360。調整精度為0.5度。
進度條厚度:圓環的厚度。當厚度大于等于整個圓環寬度的1/2時,內圓半徑為0,此時將顯示為扇形。
邊緣圓角:開始和結束的位置使用圓角顯示。
進度方向:從起始角度對應的位置開始,沿順時針或逆時針方向顯示到結束角度對應的位置。
背景類型:選擇不同的素材填充背景圓環。
背景顏色:單色填充背景圓環;
背景切圖:圖片素材填充背景圓環;
背景圖標:圖標素材填充背景圓環。
前景類型:選擇不同的素材填充前景圓環。
前景顏色:單色填充前景圓環;
前景切圖:圖片素材填充前景圓環;
前景圖標:圖標素材填充前景圓環。
二、圓形進度條顯示案例
2.1 圓形進度條顯示效果1
圖2 圓形進度條控件顯示效果1
圖3 圓形進度條控件屬性設置1
如圖2/圖3所示,設置起始值/終止值為0-100,對應的起始角度/終止角度為450-270。變量由起始值向終止值變化時,前景圓環沿順時針方向遞增。使用邊緣圓角,使得邊緣過渡更加圓滑。指定背景色和前景色即可。無需其他素材。
2.2 圓形進度條顯示效果2
圖4 圓形進度條控件顯示效果2
圖5 圓形進度條控件屬性設置2
如圖4/圖5所示,當進度值為100%時,將顯示整個圓環。使用圖標素材作為前景圓環的填充,整個進度條的色彩變的極為豐富。當進度值達到一定值時,使用特定的顏色提示,將達到更好的UI效果。
2.3 圓形進度條顯示效果3
圖6 圓形進度條控件顯示效果3
圖7 圓形進度條控件屬性設置3
如圖6/圖7所示,分別使用兩個圖標素材作為背景和前景的填充數據源。使用圓形進度條實現進度的顯示功能,僅需要兩個圖標即可:
圖8 圓形進度條背景圖標
圖9 圓形進度條前景圖標
如果使用變量圖標顯示,需要顯示多少個級別的進度值,就需要多少張圖標素材。顯然,圓形進度條控件在這種應用場合更具優勢。
2.4 圓形進度條顯示效果4
圖10 圓形進度條控件顯示效果4
圖11 圓形進度條控件屬性設置4
如圖10/圖11所示,圓形進度條顯示成了扇形。進度條的外圓直徑為320,進度條的厚度為160,此時內圓半徑為0,圓形進度條顯示為扇形。可以實現顯示簡單餅狀圖。
上一條:
一招讓UI“動”起來——用戶體驗從功能機時代躍升到智能機時代
下一條:
如何調整電容觸摸屏的靈敏度
日日躁夜夜躁狠狠久久AV