Robotmon VSCode 插件功能

Robotmon插件功能能夠滿足開發者的所有需求

工作區域介紹

開啟VSCode後請務必先開啟一個工作資料夾！

A. (VSCode 控制區) 安裝Robotmon插件後會多出一個Robotmon Icon B. (LOCAL DEVICES) 近端USB連線裝置區。手機裝置或是模擬器列表（手機必須使用USB連線） C. (REMOTE DEVICES) 遠端連線Service裝置區 D. (ASSETS) 螢幕截圖區 E. (SNIPPETS) Robotmon APIs 指令集區 F. (ASSETS PANEL) 詳細螢幕截圖區 G. (SCREEN SYNC PANEL) 螢幕工具區 H. (DEVICE CONTROL PANEL) 裝置控制區 I. (VSCODE EDITOR) VSCode 編輯區域 J. (LOGGER) 訊息日誌區

A. VSCode 控制區

安裝完Robotmon VSCode 插件後，會出現Robotmon Icon ，點擊後會出現 B, C, D, E工作區域

B. Local Devices 近端USB連線裝置區：啟動Robotmon Service

手機啟動Service (Service 已經啟動可以略過此步驟)

1. 請先確認已經開啟開發者模式，並且允許USB偵測（與啟動Robotmon Service相同）

2. 手機連接USB至電腦，點擊(scan)按鈕，會出現手機裝置ID
3. 確認手機Robotmon Service已經啟動，按鈕啟動Service/停止Service

模擬器啟動Service（以NOX夜神模擬器為例子）

1. 啟動模擬器，點選(adb connect)，然後輸入127.0.0.1:62001，按Enter。
2. 點選(adb forward)按鈕，下方會出現模擬器IP項目

輸入模擬器IP:PORT，不同模擬器會有不同的PORT

Nox模擬器多開：Port 依序為 62001, 62025, 62026, 62027, ... BS模擬器多開：Port 依序為 5555, 5565, 5575, 5585, ... 雷電模擬器多開：Port 依序為 5555, 5556, 5557, 5558, ...

C. Remote Device 遠端連線Service裝置區：連線Robotmon Service

手機連線

Robotmon service 會自動廣播訊息給開發者（必須手機與電腦在同區網內），當Service啟動後，此區域會出現手機IP項目， ，右邊按鈕分別為連線/斷線/安裝(尚未實作)，請點選連線 按鈕。右方會出現 G (DEVICE SYNC PANEL) 裝置同步區。

如果手機已經啟動Service但沒有出現手機IP項目，可以點選 手動新增，請輸入手機IP:8080。

模擬器連線

1. 請先確認在上個步驟模擬器啟動Service後有點 按鈕，此按鈕會建立電腦與模擬器的連線通道。
2. 點選連線按鈕。右方會出現 G (DEVICE SYNC PANEL) 裝置同步區。

裝置連線成功後，點選IP項目，下方會出現 H. (DEVICE CONTROL PANEL) 裝置控制區

D. Assets 螢幕截圖區

顯示由 G. (SCREEN SYNC PANEL) 裝置同步區 所截圖的所有圖片。在裝置同步區提供開發者方便的手機截圖功能（詳情請看G），截圖後會自動從手機下載到電腦，並且儲存在assets資料夾。 圖片命名規則預設為：(時間)_(寬)x(高)_xy(原始X座標)x(原始Y座標)_wh(原始寬)x(原始高).png。 點擊 可開啟 F. (ASSETS PANEL) 詳細螢幕截圖區域 點擊 可以自動插入Robotmon openImage 語法到編輯器中。

自動插入的openImage語法，路徑為手機內路徑。開發者必須自行將圖片上傳至手機內。路徑預設為 /scripts/{projectName}/assets/{imageName}。projectName 可以點擊 H裝置控制區 > 中設定。

E. Snippets Robotmon APIs 指令集區

此區列出所有可用Robotmon APIs，滑鼠移過去可以看到使用範例，點擊 可以插入此Robotmon API語法到編輯器中，方便開發者使用。

F. Assets Panel 詳細螢幕截圖區

繼上述D所述，多了螢幕截圖預覽。

G. Screen Sync Panel 螢幕工具區

螢幕工具區包含了螢幕同步、螢幕截圖、螢幕取色、螢幕控制等功能。

螢幕控制版面

放大縮小螢幕同步大小 開始同步畫面 螢幕區域截圖（必須先利用Crop Image選取區域）點擊後會自動區域截圖並存放在assets資料夾內 Crop Resize Ratio 螢幕區域截圖後的縮放比例，預設為1.0 Image Prefix 螢幕區域截圖，檔名前綴字串 Mouse XY: (x, y) 顯示目前滑鼠在裝置螢幕上的座標 Color Info 獲取顏色模式，點擊螢幕同步區會在 J. (LOGGER) 顯示 {x, y, r, g, b} 座標與顏色 Control 控制模式，控制裝置 Crop Image 螢幕區域截圖模式，可選擇截圖區域

H. Device Control Panel 裝置控制區

請先在 C. (Remote Devices) 連線裝置，並且選取裝置，才會顯示此功能

Setting: 開啟 robotmon-settings.json 可設定螢幕截圖品質，emulator port等設定。 Run: 執行工作區域的腳本，將腳本在裝置裝執行（請先點選工作區域） Pause: 暫停腳本，會呼叫內建 pause(); Resume: 恢復暫停腳本，會呼叫內建 resume(); Stop: 中斷腳本，會呼叫內建 stop(); Screenshot: 螢幕截圖至工作資料夾內 Control: 開啟 G. (Screen Sync Panel)

I. VSCode 編輯區域

VSCode 編輯器，支援所有VSCode功能。

腳本副檔名請確認為 .js，才有程式碼標色功能，語法檢查

J. Logger 訊息日誌區

可選日誌分類訊息

Robotmon 紀錄所有工作訊息 Robotmon xxx.xxx.xxx.xxx (IP) 紀錄所有腳本訊息

如果腳本訊息沒有更新，請重新連線