Q8Robot 機器人操作展示與頁面說明（R010 版本）

網頁最後修改時間：2019/08/31

Q8Robot 機器人內建網頁伺服器（Web Server），本身也是一個無線網路基地台（AP Mode），因此只要有可上網的設備和裝置，就可以進入到它的網頁控制介面中，與其互動。

在這一篇部落格，不說其他的東西，只想要先來說說這幾個網頁控制介面詳細的用法，並且在每一個介紹之後，用網頁與 Q8Robot 機器人互動的實際影片來驗證這些操作。

*********************************************************************************
套件可至下面購買：

• Q8Robot 機器人套件

*********************************************************************************
先說一下我的作業環境：

• Windows 10 作業系統；
• Chrome 版本 76.0.3809.132 (正式版本) (64 位元)；

首先，當然就是開啟 Q8Robot 機器人（下面統稱 Q8Robot）的電源。電源位於 Q8Robot 的前面，打開開關後等個幾秒鐘，找到 SSID 名稱為 "Q8Robot" 的點擊連線

連線到 Q8Robot 的無線網路基地台

接著，打開瀏覽器（Chrome 和 Firefox 有測試過，其他的若開啟有問題請再留言回報），網址列輸入：

r8robot.com

等一會兒，就會出現 Q8Robot 的主網頁，根據主網頁上的說明，點擊連結就能切換到相對應的功能網頁

Q8Robot 所有的網頁畫面

/*-/--*-*/*/*/*/***//-*-*-**-*/*-*-/*/*/*-*-/-////--/**/**--**/--///--//**----**//--**//**----***//*-**//*
第一次開啟網頁的時候，由於需要載入一些檔案在瀏覽器的快取中，因此若是有看到網頁排版不正常或是圖案出現不完全的情況，請重新整理，網頁就會正常載入！
/*-/--*-*/*/*/*/***//-*-*-**-*/*-*-/*/*/*-*-/-////--/**/**--**/--///--//**----**//--**//**----***//*-**//*

接下來，就針對各功能網頁進行詳細的說明。

【主畫面】

主畫面的部分應該就不用多說了吧！就是各功能網頁的說明與連結網址；Reserved 現在沒有加入任何的東西，單純只是作為保留而已。

Q8Robot 主畫面

下面這個影片，是我在賣場上用來介紹 Q8Robot 的，它簡單的展示了每個網頁介面操作 Q8Robot 的方法，每個部分雖只是輕描淡寫的帶過，但主要的目的是示範說明如何在 Q8Robot 後面裝設鋰電池、開電和連線到無線網路基地台的作法，然後快速地在各頁面做簡短操作的介紹；要看更詳細的操作過程，直接跳至步態操作介面小節開始看！

【步態操作介面】

Q8Robot 內建有 16 個步態（每一個步態由一至多個動作組成）可供選擇，但其中一個是作為零點校正用，所以不列在這裡。

一般的網頁大小會將頁面分為左右（一列兩行）兩個區域，但當螢幕小於 768 px 設定時，就會自動切換為上下（一行兩列）兩個區域。

以下圖為例：

右方（或下方）區域有九個步態按鈕，直接按下後就會看到 Q8Robot 開始執行對應步態的動作，實際操作的影片請看下方 Q8Robot 機器人 R101 步態操作畫面操作示範前半部 04 / 05。

左方（或上方）區域，中間圓球部分可操作 Q8Robot 前進、後退、左移和右移，只要在粉紅虛線框處，以圓球為中心滑動或點選該箭頭方向（箭頭位置上下、左右各 45 度的位置，是該方向的可接受範圍，實際玩一下就會了解）就會發出相對應的步態指令給 Q8Robot。上方紅色與紫色按鈕，分別代表原地逆時針與反時針旋轉。

實際操作的影片請看下方 Q8Robot 機器人 R101 步態操作畫面操作示範後半部 05 / 05。

Q8Robot 步態操作介面

下面的影片，Q8Robot 是朝向螢幕的，是 Q8Robot 的前面，所以圓球上下 / 左右動作時，Q8Robot 的動作剛好會與圓球動作方向是相反的，這單純只是為了方便影片拍攝用。

/*-/--*-*/*/*/*/***//-*-*-**-*/*-*-/*/*/*-*-/-////--/**/**--**/--///--//**----**//--**//**----***//*-**//*
[ R101 版本的步態程式 ]
這個版本對於步態的設定是這樣的：ESP8266 只要接收到網頁介面對於步態的要求，就會將這個需求排入 Web Server 事件處理的序列之中，不管 Q8Robot 正在動作時或是接續性的按下步態按鈕，這些步態要求都會被排入到 Web Server 的事件處理序列之中，而且都會被執行！但是盡量不要這樣做，這版本還未對此部分有所限制，所以最好等待一個步態完成之後再做下一個，預計在其他版本更新的時候會解決，所以使用上要注意一下！
/*-/--*-*/*/*/*/***//-*-*-**-*/*-*-/*/*/*-*-/-////--/**/**--**/--///--//**----**//--**//**----***//*-**//*

【單軸運動控制介面】

要使用這個網頁介面，需要先知道一下 Q8Robot 對於伺服馬達的定義是怎樣 ?

Q8Robot 伺服馬達的安排與定義

接著打開進入到網頁，可看到除了最下面兩個按鈕之外，大致上分為八個區域，每個區域又分為上下兩個小區域；現在就讓我來仔細說說這裡要怎麼做操作。

上面的紫色區域，左右兩側橘色裡面的圖示代表的是：滑桿移動的方向，對應到該處的伺服馬達所帶動的腿部的動作方向。

以下面粉紅虛線框（左前腿）為例，將滑桿向左移動後放掉，會看到左前腿往下放；反之，往右滑動就往上提。

而當滑桿滑動時，下方綠色區域中間文字框會同時顯示滑動的數值；而當在文字框輸入數值時，也會同時反應到滑桿的位置上。至於左右兩個橘色裡面的數值，分別代表該腿部上下移動的最大角度。

與滑桿不同的是，文字輸入不會限制輸入的數值範圍。因此手動輸入時，要特別注意只能用在稍稍超出邊限的調整，這裡是沒有安全限制的 !!! 當然，不是寫了數值就可以直接輸出的，而是必須先勾選左側的 CheckBox 才能按下綠色那顆按鈕進行設置，否則是不會有任何輸出的。

至於最下方的兩個按鈕："回到待命位置" 就是單純回到待命位置，跟步態操作裡的 "待命" 按鈕功能一樣；另一顆 "一次動作" 按鈕，比較常用到的狀況是：想要同時輸出多個腿部動作的時候用，而且要去勾選 CheckBox 才會用該文字欄位裡的值，否則就是該腿部在待命的預設位置值。

當按下 "一次動作" 不會馬上輸出，而是會先出現一個提示視窗，提示這個動作執行時想要它多久完成的時間設定。輸入錯誤和預設值都是 500 ms，輸入時間越大動作就越緩慢。

上面所說的這幾個操作，都可在下方的影片（ Q8Robot 機器人 R101 單軸運動控制畫面操作示範 03 / 05）中看到實際的操作。

當你（妳）對於步態的動作有任何想法的話，都可以利用這個網頁介面來實際演練步態的動作，創建自己的步態。

Q8Robot 單軸運動控制介面

【動作零點校正介面】

Q8Robot 動作零點的校正操作跟上一節的一樣，不同的是綠色按鈕的部分是沒有功能的；因為動作零點限定在 ±10 度，超出這個範圍就是組裝有問題！

進入到這個網頁介面之後，不管之前有沒有做零點校正，要先按一下 ESP8266 控制板上的 FLASH 按鈕，Q8Robot 才會回到完全沒有補償偏移值的零點校正的位置，才能開始進行八個伺服馬達的角度校正；而校正的方式就是讓所有的腿部都是處在水平的位置。

這時移動滑桿，滑桿的值會即時反映到左側的數字欄位，代表的是該腿部的偏移值（Offset），而且這些偏移值要能直接反應到之後的各種步態，首先就是要把滑桿左側的 CheckBox 勾選起來，接著按下 "一次動作" ，那麼這些偏移值就會上傳到 ESP8266 並且儲存到 EEPROM 裡面。

「那麼，怎麼確認校正的結果呢 ?」

先跳至步態操作隨便選擇一個步態按鈕按下後，再回到動作零點校正按一次 "回到零點校正位置" 按鈕。這時的位置就是加上補償值的零點位置，而且會跟剛剛校正的位置一模一樣，這樣的校正就是正確！而且也可以確認偏移值已正確上傳到 ESP8266 的 EEPROM；實際操作的影片請看下方 Q8Robot 機器人 R101 動作零點校正畫面操作示範 02 / 05。

Q8Robot 動作零點校正介面

注意影片中，那幾根被勾選的腿部，就不難發現校正前後之間的差異。

** 影片中沒有去按 FLASH 按鈕，而是直接按 "回到零點校正位置"，這只適用在完全沒做過校正，或是確認偏移值全部為 0 的情況之下才可以。所以可以在影片中清楚地看到，第二次再按下 "回到零點校正位置" 所回到的位置就是補償之後的零點位置。

【網頁上傳/修改管理介面】

Q8Robot 內建網頁上傳/修改管理介面，也就是說使用者可以利用這個網頁來上傳或是修改儲存在 ESP8266 SPIFFS 裡面的網頁文件，就像記事本一樣，直接選擇檔案就能馬上進行修改與測試，非常的方便。

由於這個網頁可以修改到  Q8Robot 所有的控制介面網頁的相關資料，所以第一次進入"網頁上傳/修改管理介面" 的時候，會要求輸入帳號與密碼（預設的帳號/密碼是 q8robot / admin），如下圖所示。

Q8Robot 網頁上傳/管理介面登入畫面

成功登入後，左邊綠色虛線框的部分就會列出現在在 SPIFFS 裡面所有的檔案，之後若是有任何修改，按下 "Refresh List" 按鈕就會重新整理這些檔案的列表。

黃綠色虛線框的部分：標示為 B 的下方的文字，表示現在開啟的檔案目錄與名稱（預設一進入此頁面開啟的檔案是 index.html），你（妳）可以選擇任一左側的檔案來做開始，不管是圖片或是文字檔都可以顯示，若是做了修改之後要存檔，按下 "Save" 或是 Ctrl + S 就可以。

粉紅虛線框的部分，是用來載入外部檔案到 SPIFFS 中，或是直接在 SPIFFS 建立一個新檔用的，下面我用例子來做說明：

• 上傳檔案
  按下 "選擇檔案" 選擇要上傳的檔案名稱（假設為 main.cpp），被選擇到的檔名會出現在 A 處的文字框內（/main.cpp）。載入成功後，此時就可以在此處修改它儲存的目錄與名稱（假設要儲存到目錄 gait，檔名要改成 q8robot.cpp，就改成 /gait/q8robot.cpp），按下 "Upload" 就會自動上傳，左側就會出現這個檔案（/gait/q8robot.cpp）。
  滑鼠移動到這個檔案上，點擊滑鼠右鍵，就會出現此種檔案類型支援的選單，按下 "Delete" 移除這個範例檔案。
• 新增檔案
  新增一個空白檔案，首先要在 A 處填入此檔案存放的目錄以及名稱（以上面為例就是 /gait/q8robot.cpp），然後按下 "Create" 後就會建立這檔案在左側檔案列表裡，並產生一個新的編輯區在下方黃綠色虛框，此時就可以開始做編輯的動作。
  別忘了，編輯好之後記得存檔！

Q8Robot 網頁上傳/管理介面

有人或許會問說：「一定要連同 Q8Robot 機身全部裝好後，才能與 ESP8266 連線開啟這些網頁嗎 ?」

嗯 ... 其實不用！只要 ESP8266 開發板有供電就好，網頁就能開啟與直接操作，只不過沒有辦法控制伺服馬達而已。在網站開發階段與做通訊測試的時候，並不需要接 Q8Robot 的機身（ESP8266 開發板以下的所有東西）直接就能在 Chrome 瀏覽器上除錯來得知操作端（網頁）與伺服端（ESP8266）互動是否正常，所以不需要！

這部分怎麼做，可看另一篇部落格（如果有寫的話，不然就）或是商品附帶的資料。

【結論】

只有看過和實際動手用這些網頁介面控制  Q8Robot 之後，才能知其然而知其所以然，了解到機器人為什麼要這樣組裝？為什麼機器人的程式碼要這樣去寫？前端網頁與後端韌體程式為什麼要這樣做搭配？

所以從  Q8Robot 的身上能學到什麼？

• 學習機械組裝；
  自己動手樂趣多。

• 前端網頁怎麼跟後端做通訊，程式碼怎麼寫；
  HTML / CSS 只是用來呈現網頁介面的樣子，這部分懂得越多，越能把你（妳）的想法與創造力展現出來，這是直接與使用者面對面的地方，也是你（妳）能做最多變化的地方。
  
   重點是在 JS（搭配 JQuery），決定前後端通訊的方式，但寫法很固定，很容易上手，沒用到很深的語法。
  
  ** 前端網頁的部分，除非有人留言要求 Q8Robot 這部分的教學，否則上面這些網頁介面的原始碼都在商品附帶的程式碼裡面，請自行閱讀。

• 搭配前端網頁介面的 ESP8266 韌體程式怎麼寫；
  Q8Robot 採用 HTTP 與 ESP8266 通訊互動，不過 HTTP、TCP Server/Client、WebSocket 等...都可以與 ESP8266 做溝通，就是選擇哪一種通訊方式就要撰寫該部分對應的程式碼而已，這幾個都能在部落格中找到相對應的範例程式。

• PCA9685 伺服馬達驅動模組的使用方法；
  PCA9685 是個有 16 通道，每個通道有 12-bit 解析度的 PWM 控制晶片，但怎麼去計算它的佔空比？怎麼用在伺服馬達上面？除了看程式碼，這裡會找時間另開一個部落格網頁來做說明。

• 步態動作如何執行，怎麼做到類似動物的走法；

• 大量數據資料的儲存方式；

• ...

希望以上的影片展示與說明能激起看倌們的興趣，覺得不錯的話請多多支持一下賣場！

有任何問題或是疑問的話，歡迎在下面留言給我！

---

<< 部落格相關文章 >>

• ｛PCA9685｝如何以緩動函數（Easing Functions）實現機器人伺服馬達的動作控制 #Arduino #ESP8266