一、適用范圍

本文檔適合大彩物聯型、M系列的串口屏產品使用。

二、開發環境版本

1. VisualTFT軟件版本：V3.0.1.1111及以上的版本。

版本查看：

1)打開VisualTFT軟件啟動頁面，右上角會顯示的軟件版本號；

2) 打開VisualTFT，在軟件右下角可以查看軟件版本圖2-2軟件版本，最新版本可登錄大彩官網進行下載。

2. 串口屏硬件版本：物聯型固件 >= V3.0.731.0，M系列固件 >= V6.1.199.00。

版本查看：

1) 查看屏幕背面版本號貼紙；

2) VisualTFT與屏幕聯機成功后，右下角顯示的版本號。

三、概述

隨著社會的不斷發展，科技的不斷進步，人們在視覺方面，不滿足于一種光，對物體的周邊裝飾越來越看重。其中，彩燈、色溫燈的應用更為之廣泛，在家庭、商場、櫥窗、舞廳、咖啡廳、公共廣場等場所的擺設、裝飾、廣告、環境凈化與美化。

本文介紹大彩串口屏在彩燈的應用，實現對色盤取色，并發送通知到用戶主板。

四、參考資料

1. 《LUA 腳本API V1.4》可通過以下鏈接下載物聯型開發包獲取:

http:/www.gz-dc.com/index.php?s=/List/index/cid/19.html

2. 《LUA基礎學習》可通過以下鏈接下載物聯型開發包獲取:

http:/www.gz-dc.com/index.php?s=/List/index/cid/19.html

3. LUA腳本初學者可以通過下面鏈接進行學習。

http://www.runoob.com/lua/lua-arrays.html

五、教程實現

本文主要將以下2點進行說明：

1. 準備工程素材；

2. 配置串口屏工程；

5.1準備工程素材

5.1.1 準備工程素材

在實現例程前需要作以下3個準備：

1. 硬件平臺；

2. 軟件平臺；

3. UI素材；

該例程使用大彩W系列4寸串口屏DC48480W040_1111_0T為驗證開發平臺。如圖5-1所示；

其他尺寸、M系列的串口屏均可借鑒此教程。

5.1.2軟件平臺

使用大彩自主研發的上位機軟件VisualTFT配置工程。如圖5-2所示；

5.2配置串口屏工程

本文主要介紹以下2點：

1.取色

2.MCU/服務器設置顏色

注意：屏幕為RGB565，16位色，若用戶設備是24位色，則傳輸過程需要轉化

5.2.1 取色

用戶在觸摸屏上選擇某一個顏色，并通過網絡（物聯網：WIFI、M系列：4G）發送至服務器或通過串口發送指令到客戶MCU。

注意：本文只示意通過串口發送至用戶MCU

1.畫面配置

在畫面ID0中，添加一個按鈕控件（控件ID1）、一個圖標控件（控件ID2）和1個文本控件（控件ID3），其中控件ID1為色盤，供用戶選色；控件ID2為選中效果，用戶點擊色盤后，控件ID移動到當前位置并顯示‘白色的圈’，表示當前選中的顏色；控件ID3為顯示固件版本號。如圖5-3所示：

2.LUA腳本編輯

本例程中，用戶點擊色盤或拖動，右上角有顯示預覽的效果，當松開后，通過串口發送選中顏色值到用戶單片機。代碼如程序清單 1所示：

程序清單 1取顏色值

核心API函數

1)on_draw(screen)

當界面的顯示內容需要更新時，系統自動調用此函數，用戶在此函數中添加自定義的繪圖操作。用戶繪制的內容疊加在畫面內容之上。

• screen：當前觸發on_draw()API的畫面ID

注意：此函數為系統回調函數，用戶不要直接調用。

下面幾種情況會觸發此函數：

• 界面有動畫播放、視頻播放、RTC時間顯示的動態刷新；
• 用戶操作屏幕控件控件；
• 通過LUA腳本或串口指令更新控件；
• 通過執行redraw；

總之，界面上有任何變化，都會觸發此回調函數。

2)redraw()

發送重繪請求，觸發on_draw的執行。

3)set_pen_color(color)

設置畫筆的顏色，RGB565，用于指定線、矩形、圓等的顏色。

4)draw_image(image_id,frame_id,dstx,dsty,width,height,srcx,srcy)

繪制圖片

• image_id圖片資源的ID
• frame_id對應圖標，可以設置幀ID，其他圖片固定為0
• dstx圖片顯示X坐標
• dsty圖片顯示Y坐標
• width圖片顯示寬度
• height圖片顯示高度
• srcx圖片裁剪X坐標
• srcy圖片裁剪Y坐標

5)draw_circle(x,y,r,fill)

繪制圓形

• x,y圓的中心坐標
• r圓的半徑
• fill為0不填充，1填充

基本思路：當用戶觸摸色盤區域時候，過濾合法坐標、背景色（本例程為黑色）和距離圓心的距離，當條件成立后，計算出‘選擇效果（白色圈）’的顯示位置，并提取相應的顏色值。通過redraw（）申請繪圖，畫出選中效果以及選中的顏色，并通過串口發送選中的顏色到用戶MCU。

5.2.2MCU/服務器設置顏色

當用戶MCU主板或App（服務器）主動更新彩燈的顏色值后，需要同步到屏幕的右上角顯示當前顏色，并將‘白色選中圈’同步到對應位置。

本文闡述兩個方案：

注意：本例程不處理本章節的功能

1.屏幕遍歷顏色值

屏幕端，根據色盤的坐標和顏色值，在LUA腳本中建立一個顏色-坐標對照表，如創建一個local color_pointXY = {}的表，如下程序清單 2所示

程序清單 2創建顏色-坐標對照表

當接收到MCU/App(服務器)的指令后，遍歷檢索color_pointXY表，獲取‘白色選中圈’的坐標，如下程序清單 3所示

程序清單 3檢索顏色值

特別說明：當由屏幕檢索顏色值，得出坐標的時候，屏幕遍歷過程會耗時，且和色盤的大小有關。如本例程中，色盤大小380*380，則遍歷次數最大可達到380*380。若MCU或App（服務器）可選的顏色是比較少的，可考慮屏幕遍歷處理。

2.服務器/MCU遍歷

當如后臺MCU或服務器檢索顏色值時，則將檢索出來的坐標(x，y)+color顏色值通過串口/網絡通知給屏幕，屏幕根據（x，y）畫出‘白色選中圈’的位置，且顯示當前的顏色值，大大提高屏幕的流暢性。

5.3下載工程

在我司的上層軟件Visual TFT中集成了LUA程序的編譯器，可以實現在編譯工程的同時將LUA腳本程序一起編譯，并且將編譯后的圖片和程序集合在一個名為DCIOT.PKG的文件中。編譯后只需要把DCIOT.PKG文件拷貝到U盤中，插入串口屏并重新上電即可將圖片和程序下載到屏中。

5.3.1下載

工程編譯成功后在輸出窗口會提示編譯成功，如所示。編譯成功后打開工程目錄，找到output文件夾，將文件夾中的DCIOT.PKG文件拷貝到U盤中，如圖 5-4和圖 5-5所示；接上串口屏重新上電，等到提示燒錄工程成功后，拔掉U盤重新上電即可。

（溫馨提示：因平臺限制無法上傳視頻，色盤取色演示視頻請移步大彩官網相關欄目進行查看，感謝您的關注。）