# UI Descriptor Extractor 使用手冊
:::warning
新版的 Monitor Tool 已改名為 [UI Descriptor Extractor](http://140.115.59.165/ar-project/tool/ui-descriptor-extractor.git)，兩者使用方法相同，文章仍然可用。
:::

## Project 介紹

- 一個 Project 包含一個 Host 及多個 UI Element
- 每個 project 裡面包含的資料如下：
- `<project\>.des.proj`
- 專案檔
- 檔名可自訂 (於 Monitor Tool 內設定及修改)
- `host.json`
- host 的 descriptor
- `<element1\>.json`
- element1 的 descriptor
- 檔名可自訂 (於 Monitor Tool 內設定及修改)
- `<element2\>.json`
- 同上...

## UI Descriptor Extractor 使用說明

- 每次選取，4 個步驟為一個循環
- [Select](#1-Select-Step) → [Update](#2-Update-Step) → [Validate](#3-1-Validate-Step) / [Watch](#3-2-Watch-Step) → [Save](#4-Update-Step)
- 選取完 Host，才能選取 Host 之下的 UI Element

## 1. Select Step

- 意思：選擇 UI
- 用途：用於選擇需要的 Host / UI Element
- 使用方式：
1. 點選 `InitTree` 後，選取 (雙擊) 需要的 Host / UI Element
2. 點擊 `Select` 後，使用滑鼠針對桌面上的 Host / UI Element 做選取

## 2. Update Step

::: info
Descriptor 是基於 UIA 的樹狀結構設計的。
Descriptor 是一個 list，表示從根節點到目標節點的每一層描述。
:::

- 意思：修改 Descriptor
- 用途：修改 Descriptor 以符合目標 Host / UI Element 的特徵
- 使用方式：
- 選擇 (雙擊) 欲修改的描述層，於右側修改該層的內容
- 取消勾選不需要的描述層

## 3-1 Validate Step

- 意思：驗證 Descriptor 是否符合預期
- 用途：驗證 Descriptor 是否能找到預期的 Host / UI Element
- 使用方式：
- 點擊 `Validate` 按鈕，如果顯示結果與預期不相同，請回到 [Update Step](#2-Update-Step) 修改 Descriptor

## 3-2 Watch Step

- 意思：觀測 Descriptor
- 用途：觀測 Host / UI Element 的 event
- (可以理解 Backend 有沒有抓到 Host / UI Element)
- 使用方式：
- 點擊 `Start` 後，可以移動 Host 觀察 BoundingBox 的變化

## 4. Save Step

- 意思：儲存 Descriptor
- 用途：把剛剛弄好的 Descriptor 存在 local 電腦
- 使用方式：
- 修改 projectName / fileName
- 選擇 Folder (New Project)

## Q & A

:::danger
- Q: UI Element 是甚麼 ?
- A: 就是應用程式底下的元件 (任何可點擊、可看的都可以是 UI Element)
:::

## Host 選取展示

創新的 project (即選取 Host)

### 1. Select Step

1. 點選 `InitTree` 後，選取 (雙擊) 需要的 Host

(1) 點選 `InitTree`

(2) 選取 (雙擊) 需要的 Host

2. 點擊 `Select` 後，使用滑鼠針對桌面上的 Host 做選取

(1) 點擊 `Select`

(2) 使用滑鼠選取桌面上的 Host

### 2. Update Step

- 選擇 (雙擊) 欲修改的描述層，於右側修改該層的內容

- 取消勾選不需要的描述層

### 3-1 Validate Step

- 點擊 `Validate` 按鈕，如果顯示結果與預期不相同，請回到 Update Step 修改 Descriptor

(1) 點擊 `Validate`

(2) 結果顯示

### 3-2 Watch Step

- 點擊 `Start` 後，可以移動 Host 觀察 BoundingBox 的變化

(1) 點擊 `Start`

(2) 移動 Host 後畫面顯示

### 4. Save Step

- 修改 projectName、選擇 Folder (New Project)

(1) 修改資訊

(2) 儲存後畫面

(3) 儲存後的 folder

## UI Element 選取展示

創新的 UI Element (即選取 UI Element)

### 1. Select Step

1. 點選 `InitTree` 後，選取 (雙擊) 需要的 UI Element

(1) 點選 `InitTree`

(2) 選取 (雙擊) 需要的 UI Element

2. 點擊 `Select` 後，使用滑鼠針對桌面上的 UI Element 做選取

(1) 點擊 `Select`

(2) 使用滑鼠選取桌面上的 UI Element

### 2. Update Step

- 選擇 (雙擊) 欲修改的描述層，於右側修改該層的內容

- 取消勾選不需要的描述層

### 3-1 Validate Step

- 點擊 `Validate` 按鈕，如果顯示結果與預期不相同，請回到 Update Step 修改 Descriptor

(1) 點擊 `Validate`

(2) 結果顯示

### 3-2 Watch Step

- 點擊 `Start` 後，可以移動 Host 觀察 BoundingBox 的變化

(1) 點擊 `Start`

(2) 移動 Host 後畫面顯示

### 4. Save Step

- 修改 fileName

(1) 修改資訊

(2) 儲存後畫面

(3) 儲存後的 folder