您的位置：首頁 > 關(guān)于我們 > 新聞動(dòng)態(tài)

大彩講堂：VisualTFT軟件如何自定義圓形進(jìn)度條
發(fā)布人：大彩科技發(fā)布日期：2025-07-07

一、適合范圍

適合全系列大彩協(xié)議串口屏產(chǎn)品。

二、功能實(shí)現(xiàn)

2.1 建立工程

根據(jù)串口屏的實(shí)際型號(hào)，在 visual TFT 軟件菜單中選擇文件并新建一個(gè)工程。下面以物聯(lián)型串口屏（DC48480EW040）為例，如圖2-1所示。

圖2-1 建立工程

2.2 控件屬性說明

圓形進(jìn)度條的屬性窗口，如下圖2-2所示；

圖2-2 屬性窗口

進(jìn)度條厚度：設(shè)置進(jìn)度條的粗細(xì)度

填充方式：進(jìn)度條樣式，可選顏色或者圖片，如下圖2-3所示

【顏色】：純色顯示

【圖片】：使用圖片時(shí)可自行設(shè)計(jì)進(jìn)度條的樣式，本工程選擇為自定義圖片樣式。

圖2-3 填充方式

起始角度：進(jìn)度條起始位置（圓形進(jìn)度條的值為角度，最大角度為359，360度為0度）

終止角度：進(jìn)度條的結(jié)束位置。如下圖2-4所示

圖2-4 起始與終止角度

滑動(dòng)調(diào)節(jié)：圓形的滑動(dòng)調(diào)節(jié)有四類如下圖2-5所示

【禁用】：不可通過觸摸調(diào)節(jié)

【終止角度】：觸摸進(jìn)度條終止位置拖動(dòng)進(jìn)度條

【起始角度】：觸摸進(jìn)度條起始位置拖動(dòng)進(jìn)度條

【倆個(gè)角度】：觸摸倆端都可以拖動(dòng)進(jìn)度條

圖2-5 滑動(dòng)調(diào)節(jié)選項(xiàng)

觸摸位置：圓形進(jìn)度條的觸摸位置如下圖2-6所示

【末端】：僅點(diǎn)擊或滑動(dòng)圓形進(jìn)度條末端，才可以改變數(shù)值

【進(jìn)度條】：點(diǎn)擊或滑動(dòng)進(jìn)度條即可改變數(shù)值

圖2-6 觸摸位置選項(xiàng)

限制角度：

【是】：拖動(dòng)范圍只能在起始角與終止角之間；

【否】：沒有限制角度，可隨意滑動(dòng)。

通知方式：圓形進(jìn)度條控件的通知方式如下圖2-7所示

【松開時(shí)】：拖動(dòng)進(jìn)度條時(shí)不下發(fā)，松開時(shí)才下發(fā)指令。

【滑動(dòng)時(shí)】：拖動(dòng)進(jìn)度條的過程中下發(fā)指令。

圖2-7 通知方式選項(xiàng)

滑塊圖標(biāo)：可以添加滑塊樣式，建議將圖片格式為全透的格式 png

2.3 畫面與屬性配置

畫面配置

在【圓形進(jìn)度條控件】畫面的“背景圖片”導(dǎo)入相應(yīng)的美工圖片畫面中添加 1 個(gè)圓形進(jìn)度條控件（控件 ID：1）和1個(gè)文本控件（控件ID：2）和2個(gè)按鈕控件（控件 ID：3、4）如下圖2-8所示。

圖2-8 畫面配置

屬性配置

在圓形進(jìn)度條控件的屬性窗口中，設(shè)置【進(jìn)度條厚度】為“40”、【填充方式】為“圖片”并加入相應(yīng)的美工圖片、【起始角度】為“150”、【終止角度】為“30”、【滑動(dòng)調(diào)節(jié)】為“終止角度”、【觸摸位置】為末端、【限制角度】為“是” 、【通知方式】為“滑動(dòng)時(shí)”，屬性配置如下圖2-9所示。

圖2-9 屬性配置

2.4 運(yùn)行預(yù)覽

三、LUA腳本

打開 LUA 編程器

點(diǎn)擊菜單欄【工具】，選擇LUA腳本編程，如下圖3-1所示.

圖3-1 打開 LUA 編程器

API 函數(shù)說明

大彩科技針對(duì)LUA腳本提供了豐富的API接口函數(shù)，具體函數(shù)可以查閱文檔《LUA腳本API函數(shù)接口》。本教程文檔中所涉及到的部分的相關(guān)接口函數(shù)

·函數(shù) on_init（）

系統(tǒng)加載 LUA 腳本之后，立即調(diào)用此回調(diào)函數(shù)，通常用于執(zhí)行初始化操作。

·函數(shù) set_value（screen， control， value）

設(shè)置控件數(shù)值

value：控件值

按鈕控件：value=1 - 按下，0 - 彈起

文本控件：value - 整數(shù)或小數(shù)

也可以設(shè)置進(jìn)度條、滑塊、儀表、滑動(dòng)選擇控件等等

·函數(shù) on_control_notify（screen， control， value）

用戶觸摸修改控件后，執(zhí)行此回調(diào)函數(shù)。點(diǎn)擊按鈕控件，修改文本控件、修改滑動(dòng)條都會(huì)觸發(fā)此控件

value:為數(shù)值類型，如果需要獲取文本控件的字符串值，使用 get_text(screen,control)

編寫腳本

此編程主要描述角度轉(zhuǎn)化為所對(duì)應(yīng)的數(shù)值（value），所對(duì)應(yīng)的數(shù)值（value）轉(zhuǎn)化為角度的對(duì)應(yīng)關(guān)系。

此腳本為初始化回調(diào)函數(shù)，代表打開此工程時(shí)角度與文本控件顯示數(shù)值為一個(gè)初始化值。如圖3-2所示。

圖3-2 LUA腳本

使用LUA腳本，將圓形進(jìn)度條的值與文本控件相關(guān)聯(lián)。當(dāng)滑動(dòng)圓形進(jìn)度條控件時(shí)，系統(tǒng)會(huì)調(diào)用回調(diào)函數(shù) on_control_notify，并將圓形進(jìn)度條控件的值傳入函數(shù)中，將值與文本控件的值關(guān)聯(lián)。按下按鈕控件也能使角度遞增或者遞減使其對(duì)應(yīng)的角度也產(chǎn)生遞增遞減變化。

函數(shù) math.floor 函數(shù)是 lua 標(biāo)準(zhǔn)庫中 math 模塊的一個(gè)函數(shù)，用于向下取整，即返回小于或等于給定數(shù)字的最大整數(shù)。math.floor(value) % 65536 這個(gè)表達(dá)式的含義是：首先對(duì) value 進(jìn)行向下取整操作，然后將得到的結(jié)果與 65536 進(jìn)行取模運(yùn)算得到一個(gè) now_angle（現(xiàn)在的角度）角度。每一個(gè)角度對(duì)應(yīng)一個(gè)value值，角度范圍在150~30，每次滑動(dòng)圓形進(jìn)度條的角度為now_angle

假設(shè)當(dāng) now_angle 為 200 時(shí)需要減去起始角度（start_angle）150 所得值為控件 2 文本顯示 50代表現(xiàn)在的角度為 200 時(shí)文本控件 2 顯示為 50。

代碼編程如3-3所示