Jetbot AI這樣玩-單元(四) 用 ipywidget 製作圖形化介面控制小車

一、簡介

在「JetBot AI這樣玩-單元(三) 讓 Jetbot 動起來!」文章中，我們成功地透過區域網路與 Jupyter Lab, 讓 Jetbot 動起來了！接下來，我們一起來設計一個簡易的圖形化使用者介面(Graphical User Interface, 以下簡稱 GUI)，以便更直觀地遠端遙控Jetbot吧！

二、硬體準備

這次的硬體同樣使用 JetBot AI自駕車套件(以下皆簡稱 Jetbot) 來進行操作，請先確保手上擁有的硬體零組件都與我們使用的相同，避免發生無法操作的情形。若是沒有相對應的硬體，也可以趕快入手，一起踏入人工智慧的世界喔！

準備好 Jetbot 之後，便可以將電源線 Type-C 端放入 Jetbot 的 Type-C 連接埠，並確認 Jetson Nano Developer kit 2GB (以下簡稱 Jetson nano 2GB) 與馬達控制版的電源線皆以放入行動電源的連接埠中，以啟動 Jetbot 。

三、軟體準備

這邊的軟體準備，指的是在操作主機上的軟體。本篇文中我們使用的操作主機為系統 win 10 的筆記型電腦，並可使用 Wi-Fi 連線至網際網路與操作 Google 瀏覽器。

四、操作環境設定

請先依照「JetBot AI自駕車套件-單元(二) 操作環境設定篇」的步驟，讓操作主機能夠使用區域網路與 Jupyter Lab ，遠端登入至 Jetbot。

若是想要更加理解 Jupyter Lab 的相關操作，可至 Jupyter Lab 的文件說明中了解。

也請確保 Jetbot 目前被放置在平穩的地面上，若是將 Jetbot 放置在與地面有高低落差的桌子上，請務必確保 Jetbot 移動時不會掉落。若是一定要放在桌面上，或許您可以暫時將 Jetbot 與桌子呈現懸空狀態，避免 Jetbot 因為突然移動，而摔落至地面造成損壞。

五、開始設計 GUI 介面!

本篇文章將在 Jupyter Lab 上，使用兩個 Python 模組設計簡易並展示 GUI：

ipywidgets – 用來建立 GUI 的元件，像是按鍵、滑桿等。
IPython.display – 用來顯示 GUI 的元件，將建立好的按鈕、滑桿等顯示在 Jupyter Lab上。

並使用一個 Python 模組，將 GUI 元件產生的數值，同步更新到 Jetbot 的馬達移動數值

traitlets – 將使用其中的函式「link」

接下來，使用 Jupyter Lab 遠端登入到 Jetbot 後，請先到頁面左邊的欄位中，選取操控 Jetbot的程式碼，檔案路徑是「/jetbot/notebooks/basic_motion/basic_motion.ipynb」，詳細操作請參考下圖。

在已登入 Jetbot 的 Jupyter Lab 中，開啟檔案 basic_motion.ipynb

5-1. 使用滑桿控制 Jetbot

接著我們先直接往下看程式碼，來到「Link motors to traitlets」的部分。

這裡的範例是建立兩個滑桿，分別控制 Jetbot 的左、右馬達轉速。直接執行後該段程式碼後，便可以看到產生的兩個滑桿，詳細操作請參見下圖。

建立好滑桿元件後，先別急著拉動滑桿，因為這並不會讓 Jetbot 移動。我們還欠缺一個步驟，便是將滑桿元件產生的數值與 Jetbot 控制馬達的數值，進行雙向的同步更新。請在接下來的程式碼區段中，新增幾個程式（下圖紅框處）並執行，詳細操作步驟請參考下圖所示。

現在我們可以使用滑桿，控制 Jetbot 的左、右馬達的轉速了!

使用滑桿控制 Jetbot 的左、右馬達的轉速

若是想要停止使用滑桿控制 Jetbot，可以先將所有滑桿數值調整成 0 之後，再執行 traitlets.unlink 的函式就可以了，詳細操作請參考下圖所示。

若只是想要由滑桿，查看 Jetbot 的左右輪速度，可以使用 traitlets.dlink 的函式，這個函式可以單向的將馬達的轉速，同步更新到滑桿的數值上，詳細操作請參考下圖所示。

5-2. 使用按鍵遠端遙控 Jetbot

除了使用滑桿的即時控制外，我們也可以透過按鍵，設定 Jetbot 的移動方法，畢竟有的時候我們僅會需要 Jetbot 只往前一小步，而不是一直往前衝。

首先我們一樣需要先將基本的按鈕元件建立，並展示在 Jupater Lab 上，詳細操作請參考下圖所示。

當然，按鈕建立成功後，也沒有辦法馬上控制 Jetbot，我們需要先建立各個按鈕相對應的 Jetbot 操控方法。在這裡我們不會使用 traitlets 這個模組進行動態參數的設定，僅需使用「按鈕按下後，Jetbot 會如何移動的概念」設計程式就可以了。Jetbot 如何移動的函式設計，設計完成後請記得執行此區段的程式碼，詳細操作請參考下圖所示。

本篇教學範例使用預設的函式設計，並不一定需要一模一樣的移動方法，比如在函式 step_forward 中，可以讓前進的速度 robot.forward 更改為 0.8，移動時間 time.sleep 更改為 1.0，這樣子的改動將會讓 Jetbot 在接收到前進的指令時，便會以速度 80% 前進，一秒鐘後停止。

接下來，我們需要將按鈕按下後，需要執行什麼樣的函示做連結。請依照剛剛建立好的按鈕名稱，放入相對應的函式，詳細的操作步驟請參考下圖所示。