2019年8月31日 星期六

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

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

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

在這一篇部落格,不說其他的東西,只想要先來說說這幾個網頁控制介面詳細的用法,並且在每一個介紹之後,用網頁與 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 控制晶片,但怎麼去計算它的佔空比?怎麼用在伺服馬達上面?除了看程式碼,這裡會找時間另開一個部落格網頁來做說明。
  • 步態動作如何執行,怎麼做到類似動物的走法;
  • 大量數據資料的儲存方式;
  • ...

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

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


<< 部落格相關文章 >>

沒有留言:

張貼留言