前言

為了推廣SmartDisplay產品並確保其易用性、親和性和價格實惠，我們一直強調演示專案的重要性。 在這一特定的範例中，我們很高興介紹另一個演示程式碼，主要為開發人員提供一個經濟實惠、簡單明瞭且全面的架構。 我們的目標是提供一個穩定可靠、可持續發展的通用解決方案，以滿足各種需求的替代主機端。

說明

Custom CAN ID協定在工業自動化設備控制領域獲得了顯著的流行。 在這種背景下，Arduino板成為系統整合和作為Smart Display的主機端控制器的寶貴工具，特別是那些沒有觸控功能的Smart Display。 利用Custom CAN ID協定的潛力，Arduino板可以有效控制無觸控的智慧顯示器。 本文探討了一個示範程序，展示如何使用Arduino UNO和CAN shield利用Custom CAN ID協定來控製配備OLED旋鈕顯示器的智慧顯示器。 透過這個程序，可以探索無觸控智慧顯示器的各種任務和功能。 希望透過OLED旋鈕的觸控顯示屏來控制無觸控的智慧型螢幕顯示器，並希望擴展其在系統整合和應用方面的知識，使開發人員從本文中獲得參考範例而獲益匪淺。

下圖展示了應用程式的開發情況。

此應用開發示範範例需要以下物料:

1. 10.1吋Smart Display CAN bus Custom CAN ID通訊協議機型
2. ARDUINO UNO
3. ARDUINO UNO的CAN介面擴充板
4. OLED顯示旋鈕模組
5. ST-Link CAN bus dongle
6. 軟體GUI-Builder v0.4.2或更高版本
7. 軟體Arduino IDE v2.0.4

演示分為三個部分:

1. 在GUI Builder中設計演示項目。
2. 建置並上傳項目。
3. 編程Arduino主機端。

用GUI Builder建構專案之使用者圖控介面

首先，啟動最新版本的GUI建立工具，開始一個新專案。輸入所需的專案名稱，並確認專案資料夾被自動選擇。接下來，選擇設備類型，這邊選擇10.1吋顯示器。繼續選擇所需的通訊協議，並將顯示方向保留為預設的橫向模式。選擇空白的UI範本，最後點擊創建按鈕完成該過程。請參考以下圖片如上述步驟。

在建立專案後，如下畫面。

為了符合提供的演示情境，需要總共四個頁面。因此，需要添加三個額外的頁面。為了完成這個步驟，請找到「Page」按鈕並點擊它。接著，點擊「+」按鈕以添加三個額外的頁面。

現在，讓我們來探索如何添加個性化的背景。如下圖標示1前往資源區域，找到背景選項。在標示2中，你會找到三個預定義的背景，專門設計用於工業、醫療和車輛頁面。若要添加其他背景，請在標示3選項中點擊「Add Widget」按鈕。接下來，在標示4選項中點擊「…」按鈕。你可以引入自定義背景，替換第一個頁面將使用的預設背景。

在這一步驟，我們可以從Page選項中，選擇每個頁面的背景樣式，如下圖所示。

現在，讓我們來探索如何添加自定義物件。根據演示情境，我們需要選擇自定義的MultiState物件，它可以讓我們選擇工業、醫療和車輛頁面。首先，點擊標示1前往資源區域，找到MultiState選項。在標示2點擊「Add Widget」按鈕，然後在標示3點擊「Modify」按鈕。在標示4中，刪除與該物件關聯的所有預設圖像接下來，在標示5中，點擊「Add image」按鈕，然後在標示6中從你電腦本地文件夾中逐個選擇自定義的物件圖像。最後，在標示7點擊「OK」按鈕，將自定義物件添加到MultiState物件清單中，如下圖所示。

點擊標示1的控制頁面。根據演示情境，選擇自定義的MultiState物件，以選擇工業、醫療和車輛頁面。將該物件拖放到指定的頁面佈局區域中。這樣一來，你已成功創建了初始頁面。

現在，將相同的過程應用於你已創建的其餘三個頁面。在第二個頁面上，從可用的選項中選擇一個與工業相關的物件。在第三個頁面上，選擇一個與醫療相關的物件。最後，在第四個頁面上，選擇一個與車輛相關的物件。將每個相應的物件拖放到它們對應的頁面佈局中。

將建構好的圖控介面下載到智慧型顯示器

成功創建了四個不同的頁面並將相應的物件放置在每個頁面上後，請確保在起始頁面上包含自定義的MultiState物件，以便選擇工業、醫療和車輛頁面。現在，讓我們繼續建立專案。前往頁面資訊部分，找到「Device」按鈕。點擊它，然後選擇「Device Property」。確認協議設置正確，然後選擇適當的COM端口，並指定所需的波特率。通過點擊「Connect to Device」按鈕與設備建立連接。最後，點擊上傳按鈕開始專案上傳過程，如提供的圖片所示。請給予足夠的時間讓專案上傳完成，耐心等待過程完成。

當專案上傳完成後，點擊如下所示的「OK」按鈕：

當上傳完成後，啟動畫面將會出現，如下圖所示：

在啟動畫面之後，它將切換到第一個頁面。現在，通過GUI建立器完成了構建和上傳，如下圖所示：

控制主機端(Arduino)程式範例

如所示的程式片段始於一個「includes」部分，其中導入了程序所需的各種函式庫和標頭檔案文件。這些包括Adafruit_SSD1327、Adafruit_FT6206、Adafruit_GFX和SPI等函式庫。此外，還導入了自定義的標頭檔案文件，如mcp2515_can.h、lcdgfx_gui.h和lcdgfx.h。

在「includes」部分之後，有一個「defines」部分，用於定義特定的常數和引腳配置。該部分包括對旋轉編碼器、OLED顯示器尺寸、CANBus設置、物件設置等的定義。

最後，有一個條件語句，檢查所使用的微控制器類型，並選擇適當的串行介面。如果程式在SAMD微控制器上運行，則定義串列USB介面。否則，使用標準的串列介面。

總結來說，這個給出的程式片段設置了必要的導入，定義了重要的常數和引腳配置，並根據所使用的微控制器類型處理了串行介面的選擇。

接下來，宣告並初始化程序中使用的幾個必需變數和引腳。例如：

SPI_CS_PIN：這個常量變數被設置為值9，代表SPI通信的晶片選取引腳。
CAN_INT_PIN：這個常量變數被設置為值2，代表CANBus的中斷引腳。
CAN：創建mcp2515_can類的一個實例，並用SPI_CS_PIN的值進行初始化。它用於與CAN Bus進行通信。
ts：創建Adafruit_FT6206類的一個實例，用於觸控屏功能。
display：創建DisplaySSD1327_128x128_SPI類的一個實例，並使用SPI通信的引腳配置進行初始化，用於與SSD1327顯示器進行通信。

以下給出的程式部分宣告並初始化了多個由unsigned char陣列變數。每個數值的目的如下：

「configMsg」：一個由8個unsigned char陣列變數，表示一個配置訊息。
`PageIndex_0` 到 `PageIndex_3`：這些陣列分別包含8個unsigned char元素，代表頁面索引0到3。
「displayMode」：一個由8個unsigned char陣列變數，表示顯示模式。

此外，還有幾個陣列被命名為`stmp`、`stmp1`、`stmp2`等，直到`stmp12`。每個陣列也包含8個unsigned char元素，用於存儲與各種物件或組件相關的數據字節。這些陣列的名稱指示了它們的用途，例如存儲給定物件的數據。

總之，這些陣列包含了對於程序非常重要的特定數據集，包括配置訊息、頁面索引、顯示模式和與物件相關的數據。

這段程式定義了一個名為「bitmapDemo」的函數，它接受一個整數參數「imageIndex」。該函數負責在OLED旋鈕顯示器上繪製一個圖像。
具體的圖像及其對應的位置和大小在「Image.h」標頭檔案文件中進行了定義。

這個下面的函數通過反覆延遲一段時間並檢查旗號 Recv 變數的值，等待在 CAN Bus上的回應。一旦接收到回應，旗號 Recv 就會被重置為 0。

這段程式定義了一個名為 changePageFunction 的函數，負責在一個 CAN Bus通信系統中更改頁面值。該函數根據提供的 pageValue 參數向 CAN Bus發送訊息以更改頁面值。發送的具體訊息取決於 pageValue 的值，並對應於不同的 PageIndex 陣列。

「handleTouchEvents」函數管理觸控面板上的觸控事件。它檢測觸控輸入，轉換座標，並根據觸控的壓力和持續時間執行特定的操作。它還利用「changePageFunction」根據觸控輸入更新當前頁面。例如，當檢測到長按時，會使用「nowPage」值調用「changePageFunction」以切換到首頁面。另一方面，當檢測到短按時，會使用「nowPage」值調用「changePageFunction」以切換到所選頁面。

以下是顯示"setup"函數的程式片段，該函數在Arduino中使用，當程式啟動時只執行一次。該函數負責初始化腳位、建立串列通訊、配置顯示器、設置CANBus，以及初始化觸控面板控制器。

首先，該函數將幾個腳位（pinA、pinB、pinC、EN_Pin）的模式設置為輸入腳位，並啟用上拉電阻器，或者設置為輸出腳位。輸出腳位EN_Pin被設置為高電位輸出。

接下來，建立與波特率115200的串列通訊，並等待連接建立。

然後，初始化顯示器物件，並配置特定的設置，如字型和顏色。

在顯示器上繪製一個圖像，並延遲2秒。

將中斷附加到特定腳位（CAN_INT_PIN），並指定MCP2515_ISR函數作為中斷發生時執行的程序。此中斷由信號的下降沿觸發。

以250K的波特率初始化CANBus。如果初始化失敗，程式會在延遲後重試。一旦成功，將CANBus模式設置為正常模式，並將成功訊息輸出到串列輸出。

接下來，配置過濾器遮罩和過濾器以接受所有資料訊框，包括擴展資料訊框。

初始化觸控面板控制器，如果初始化失敗，則輸出錯誤訊息，使程式進入無限循環。

最後，當觸控面板成功啟動時，將成功訊息輸出到串列輸出。

這個函數很可能是為MCP2515（一個CAN控制器）所設計的中斷服務例程（ISR），當中斷觸發時，它會設置一個旗標並輸出一個訊息。

這些函數與旋鈕狀態管理有關。"setKnobState" 函數更新旋鈕的狀態並設置一個計時器來檢測閒置狀態，而 "isKnobIdle" 函數則根據計時器的值檢查旋鈕是否處於閒置狀態。

"redrawScreen()" 函數根據旋鈕的當前狀態（旋鈕狀態）更新顯示器。它檢查狀態的變化，清除顯示器，並根據旋鈕的狀態繪製相應的圖像。

在 "loop()" 函數中的以下部分讀取三個腳位的狀態，並根據它們的值確定一個新的狀態。如果新的狀態與舊的狀態不同，則執行一些動作，包括更新計數器、"MultiStateValue"、"GaugeValue" 和其他物件變數的值。

在 "loop()" 函數中，前面的程式區塊之後，這段程式碼執行的是當旋鈕朝特定方向旋轉時的情況。它相應地更新各種變數並調用函數，然後更新舊狀態變數以供下一次 "loop()" 迭代使用。

這段程式碼展示了 "loop()" 函數的其他剩餘部分。在前面的程式區塊之後，以下操作發生：
- 將 oldState 變數更新為 newState 的值。
- 如果 nowPage 等於 0 或頁面編號為 1，則程式會檢查 MultiStateValue 是否與 LastMultiStateValue 不同。如果不同，則 LastMultiStateValue 更新為 MultiStateValue 的值，並將 MultiStateValue 的值存儲在 stmp1 陣列中。
- 接下來，使用 Multi-State ID 為 0x716，通過 CAN Bus發送包含 MultiStateValue 值的訊息。

如果 nowPage 等於 1 或頁面編號為 2，則會對不同物件的多個變數進行類似的檢查（包括 CircleProgressValue、HorizontalSliderValue、VerticalSliderValue、TemperatureValue、GaugeValue、FixedWidgetValue 和 IndicatorValue）。如果其中任何一個變數與其對應的上一次值不同，則會更新上一次值並通過適當的 ID 通過 CAN 总线發送包含新值的訊息。

如果 nowPage 等於 2 或頁面編號為 3，則會對頁面 3 上的物件進行類似的檢查，例如 CircleProgressValue、HorizontalSliderValue、GraphValue 和 AnimationValue。如果其中任何一個變數與其對應的上一次值不同，則會更新上一次值並通過適當的 ID 通過 CAN Bus發送包含新值的訊息。

如果 nowPage 等於 3 或頁面編號為 4，則會對頁面上可用的物件進行類似的檢查，例如 HorizontalSliderValue、GaugeValue、FixedWidgetValue、AnimationValue、IndicatorValue 和 ToggleButtonValue。如果其中任何一個變數與其對應的上一次值不同，則會更新上一次值並通過適當的 ID 通過 CAN Bus發送包含新值的訊息。

在 "loop()" 函數中前面的程式碼區塊之後，會調用 handleTouchEvents() 函數來處理觸控事件。如果旋鈕是閒置的（isKnobIdle() 返回 1），則使用 setKnobState() 函數將旋鈕狀態設置為 KNOB_IDLE。然後調用 redrawScreen() 函數重新繪製屏幕。這樣就結束了這個示範項目的程式碼。

在使用 Arduino IDE 成功驗證並上傳該程式後，您會注意到 OLED 旋鈕顯示器上的顯示會發生變化。它將從顯示智能顯示圖像切換到顯示觸控或旋轉圖像。此時，智能顯示器和 OLED 旋鈕顯示器都將顯示預設的首頁。

現在您可以執行示範場景。在首頁上，您可以旋轉旋鈕，並根據下方圖像中所示，選擇三個可用的行業、醫療和車輛頁面之一。

在選擇完畢後，可在 OLED 旋鈕顯示器上進行短暫的觸控操作，即可立即切換到所選的智能顯示器頁面。

讓我們再次看看如何執行示範場景。從首頁開始，通過旋轉旋鈕選擇其他三個頁面之一。在這個例子中，用戶選擇了醫療頁面。

在選擇了醫療頁面之後，只需輕觸 OLED 旋鈕顯示器，即可在智能顯示器上進入所選的醫療頁面。

通過在 OLED 旋鈕顯示器上左右旋轉旋鈕，您可以控制該頁面上的所有物件，如附圖所示。

如果您在 OLED 旋鈕顯示器上進行長按，它會自動返回到首頁，也就是第 1 頁。此外，如果您在 OLED 旋鈕顯示器上既不旋轉也不觸控 10 秒鐘，它會重置顯示並返回到首頁：

恭喜！Smart Display 10.1" 和 OLED 旋鈕顯示器的設計示範已完成。該示範允許您通過在 OLED 旋鈕顯示器上進行短按或長按來控制不同的頁面並在它們之間切換。此外，您可以與每個頁面上的各種物件進行互動。 請參考 GitHub 的此連結 https://bit.ly/3oT0o5M 下載上述程式並獲取有關該示範項目的更多詳細資訊。

以下是實際的硬體設置圖。

總結

總結來說，這個程式提供了一個實際演示，展示了如何使用 Arduino 板結合 OLED 旋鈕顯示器，利用Custom CAN ID 協議，在顯示器上進行短按或長按操作來管理不同的頁面並在它們之間切換。它還可以與每個頁面上的各種物件進行互動和控制。這個程式對於各個技能水平的人都很有價值，包括初學者和有經驗的開發人員，他們希望瞭解主機端程式設計及其在控制智能顯示器中的應用，尤其是非觸控智慧型顯示器。