---
title: Sub-System｜子系統概觀
tags: 企劃書, 文件
---

# 子系統概觀

## 架構概覽

### 通用封包格式

每一個子系統都會有一個 API Switch，負責把內部需傳出的資料整合後跟其他對應的子系統做溝通。傳輸協定為 WebSocket，封包格式如下：

| To | From | OP Code | Payload |
| ------- | ------- | ------- | ---------- |
| `UInt8` | `UInt8` | `UInt8` | `UInt32[]` |

各個模組之間的 API Switch 都會依照這個格式來傳遞資料。
- To
- 目標子系統的模組
- From
- 來源子系統的模組
- OP Code
- 操作碼
- Payload
- 為了將效能最佳化，將會把 Raw Data Encode 為 Streamable Buffer 後再傳遞（型別為 `UInt32[]`）。

> 個封包都會在各自子模組的 API Swich 內完成 Encode 與 Decode

## `Sensor` 子系統

`Sensor` 將會直接連接 Leap Motion 手勢模組，進行光學訊號初步分析與正規化處理後將向量資訊傳入主系統。


### 內部介面需求
| ID | Description |
| ----- | -------------------------------------------------------------------------------------- |
| S-000 | 接收來自 Leap Motion 的原始影像資料 |
| S-001 | 做初步的光學剖析、抓出骨架、節點後（使用 Leap Motion SDK）傳給向量化模組 |
| S-002 | 傳遞現有的模式給向量化模組，向量化模組據此來將剖析後的骨架與節點轉為正規劃後的向量數據 |

### 聯外介面需求
| ID | Name | Description |
| --- | ----------------- | ----------------------------------------- |
| ISC | Normalized Vector | `Sensor` 將正規劃後的手勢向量資料傳給 `Controller` |
| ICS | Mode Command | `Sensor` 接收來自 `Controller` 的命令進行模式切換 |

## `Controller` 子系統

負責中央控制的 `Controller` 子系統會將 `Sensor` 模組傳入的向量資訊對應至系統功能，並且對 `Application` 傳送事件觸發；在接收到來自 `Application` 傳送的新事件監聽器後將其放入 `Event Register`，並依狀況回傳控制代碼切換 `Sensor` 的向量化模式。


### 聯外介面需求
| ID | Name | Description |
| --- | ----------------- | ---------------------------------------------------------------------------------------- |
| ICA | Tigger Event | `Controller` 將手勢向量資料轉換為對應的系統事件並傳給 `Application` 進行 UI 的處理或更動 |
| IAC | Event Handler | `Application` 在特定事件被觸發後更新 `Controller` 上的事件監聽列表 |
| ISC | Normalized Vector | `Sensor` 將正規劃後的手勢向量資料傳給 `Controller` |
| ICS | Mode Command | `Sensor` 接收來自 `Controller` 的命令進行模式切換 |

### `Event Manager` 事件管理器
`Controller` 作為整個系統的中控，架構與其他兩個子模組較為不一樣，由 `Controller API Switch` 分發出的資料都會直接進 `Event Manager`，由 `Event Manager` 做管理。

- 當 `Event Manager` 收到一個新的 `IAC` 請求，會先將其丟入排程器丟入 `Matcher`，如果不需要切換 `Sensor` 模式，將會直接將整個事件傳入 `Schedular` 進行排程，已排程的事件將進入事件暫存器 `Event Reqister`；如果需要切換 `Sensor` 模式，在前述階段完成後將發送 `ICS` 命令給 `Sensor`。如果這個 `IAC` 請求為取消註冊事件監聽器，會將此事件從 `Event Register` 清除。
- 當 `Event Manager` 收到一個新的 `ISC` 請求，會將其丟入 `Matcher`，`Matcher` 從 `Event Register` 內找出符合的事件後，傳送 `ICA` 事件給 `Application`。如果這個事件為 `once` 事件，傳送 `ICA` 事件後將會把此 Event Stack pop 從 `Event Register` 清除。

- `Event Register` 會是一個 Stack
- `Event Schedular` 會是一個 Round Robin Queue

## `Application` 子系統

`Application` 負責介面的呈現，在收到事件觸發後作出對應的畫面算繪更新顯示至螢幕上，並依需求回傳新的事件處理狀態樹給 `Controller`。
`Application` 有狀態管理器，將透過 Vue.js 的 Vuex 套件實作，協助前端將 UI 元件與其狀態控制管理區分開，達成理想、乾淨的 MVC 架構。


### 內部介面需求
| ID | Description |
| ----- | -------------------------- |
| A-000 | 初始化 WebSocket 連線 |
| A-001 | 狀態管理器與 UI 的溝通介面 |

### 聯外介面需求
| ID | Name | Description |
| --- | ----------------- | ---------------------------------------------------------------------------------------- |
| ICA | Tigger Event | `Controller` 將手勢向量資料轉換為對應的系統事件並傳給 `Application` 進行 UI 的處理或更動 |
| IAC | Event Handler | `Application` 在特定事件被觸發後更新 `Controller` 上的事件監聽列表 |
| IAS | Draw Frame | `Application` 算繪 UI 並且顯示於顯示器上 |