一、適用范圍

本文檔適合大彩物聯(lián)型、M系列的串口屏產(chǎn)品使用。

二、開發(fā)環(huán)境版本

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

版本查看：

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

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

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

版本查看：

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

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

三、概述

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

本文介紹大彩串口屏在彩燈的應(yīng)用，實現(xiàn)對色盤取色，并發(fā)送通知到用戶主板。

四、參考資料

1. 《LUA 腳本API V1.4》可通過以下鏈接下載物聯(lián)型開發(fā)包獲取:

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

2. 《LUA基礎(chǔ)學(xué)習(xí)》可通過以下鏈接下載物聯(lián)型開發(fā)包獲取:

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

3. LUA腳本初學(xué)者可以通過下面鏈接進行學(xué)習(xí)。

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

五、教程實現(xiàn)

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

1. 準備工程素材；

2. 配置串口屏工程；

5.1準備工程素材

5.1.1 準備工程素材

在實現(xiàn)例程前需要作以下3個準備：

1. 硬件平臺；

2. 軟件平臺；

3. UI素材；

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

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

5.1.2軟件平臺

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

5.2配置串口屏工程

本文主要介紹以下2點：

1.取色

2.MCU/服務(wù)器設(shè)置顏色

注意：屏幕為RGB565，16位色，若用戶設(shè)備是24位色，則傳輸過程需要轉(zhuǎn)化

5.2.1 取色

用戶在觸摸屏上選擇某一個顏色，并通過網(wǎng)絡(luò)（物聯(lián)網(wǎng)：WIFI、M系列：4G）發(fā)送至服務(wù)器或通過串口發(fā)送指令到客戶MCU。

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

1.畫面配置

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

2.LUA腳本編輯

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

程序清單 1取顏色值

核心API函數(shù)

1)on_draw(screen)

當(dāng)界面的顯示內(nèi)容需要更新時，系統(tǒng)自動調(diào)用此函數(shù)，用戶在此函數(shù)中添加自定義的繪圖操作。用戶繪制的內(nèi)容疊加在畫面內(nèi)容之上。

• screen：當(dāng)前觸發(fā)on_draw()API的畫面ID

注意：此函數(shù)為系統(tǒng)回調(diào)函數(shù)，用戶不要直接調(diào)用。

下面幾種情況會觸發(fā)此函數(shù)：

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

總之，界面上有任何變化，都會觸發(fā)此回調(diào)函數(shù)。

2)redraw()

發(fā)送重繪請求，觸發(fā)on_draw的執(zhí)行。

3)set_pen_color(color)

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

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

繪制圖片

• image_id圖片資源的ID
• frame_id對應(yīng)圖標，可以設(shè)置幀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填充

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

5.2.2MCU/服務(wù)器設(shè)置顏色

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

本文闡述兩個方案：

注意：本例程不處理本章節(jié)的功能

1.屏幕遍歷顏色值

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

程序清單 2創(chuàng)建顏色-坐標對照表

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

程序清單 3檢索顏色值

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

2.服務(wù)器/MCU遍歷

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

5.3下載工程

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

5.3.1下載

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

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