# Ground Controll System (OpenMCT)
[toc]

## 環境 environment
- [Git 筆記](https://hackmd.io/@aU_yFH-8SQCvwIIDNY3J7w/BysAOKNkd)
- [Ubuntu 筆記](/MTYar05MRyeVyydxr4RFKw)
- [JavaScript Define](https://requirejs.org/docs/api.html#define)
- [JSON 懶人包](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON)
- [OpenMCT官網](https://nasa.github.io/openmct/)
- [Node JS Download](https://nodejs.org/en/)
- [Node and npm update](https://www.geeksforgeeks.org/installation-of-node-js-on-linux/)
- [Building Applications With Open MCT](https://hackmd.io/@isaPv93jQuix8iD4DT34kQ/H1RFoGRNO)
- [Open MCT Integration Tutorials](https://hackmd.io/@isaPv93jQuix8iD4DT34kQ/Hy9jHYxru)
## NCKU-ISP
- ESP32
## NCKU-UAV

## 啟動程序
- [openmct安裝&啟動程序](/yl-Kol-ISlSZZDutgc1QXA)
# openmct setting
## Windowsd開發環
1. 下載node.js
2. 安裝git bash
3. 建議使用vscode編輯
4. 下載PX4

git clone https://github.com/PX4/PX4-Autopilot.git --recursive

## 開始設定
### 1.下載vis_frame
(這是人家官方做好的教學包)
官方連結:

git clone https://gitlab.lrz.de/lls/vis-frame.git

[UAV mavlink to js python-script](https://drive.google.com/drive/folders/1pvtsyZ9Pnl29PyMCOieQXeIzCpiMvShI?usp=sharing)

### 2.製作Telemetry_Object
1. 至vis-frame\python_scripts\Telemetry_Object_Generator
2. 編輯Telemetry_Object_Generater.py
3. 將telemetry_object_name改成飛行器的名字
4. 將UDP_PORT改成自己要傳給openmct的port
5. 除了generate_pythonScripts皆改為true

generate_Dictionary = True
generate_OpenMCT_object = True
generate_server_object = True
generate_pythonScripts = False

### 3.下載另一個傳輸腳本
預設產生的傳輸腳本需經過misson planner
[MavSDK ver2.0 連結](https://hackmd.io/q80yrkPCTuitar3Rv8Uf2w)

### 4.執行Telemetry_Object_Generater.py

位置在vis-frame/python_scripts/Telemetry_Object_Generator
將會產生幾個不同的檔案
在openmct/example/飛行器的名字中會有兩個檔案

#### Plugin.js
- Plugin的種類分為三種

更多資訊可以看 [Open MCT Integration Tutorials](https://hackmd.io/@isaPv93jQuix8iD4DT34kQ/Hy9jHYxru)
官方文件: [Github](https://github.com/nasa/openmct-tutorial)
#### dictionary.json
name是在openmct上所顯示的名稱
format是變數的型態
key是在傳輸腳本所用到的變數名稱，因此在選擇變數名稱後須將他寫入python腳本中

如下圖

attribute | type | flags | notes
--- | --- | --- | ---
`key` | string | required | unique identifier for this field.
`hints` | object | required | Hints allow views to intelligently select relevant attributes for display, and are required for most views to function. See section on "Value Hints" below.
`name` | string | optional | a human readable label for this field. If omitted, defaults to `key`.
`source` | string | optional | identifies the property of a datum where this value is stored. If omitted, defaults to `key`.
`format` | string | optional | a specific format identifier, mapping to a formatter. If omitted, uses a default formatter. For enumerations, use `enum`. For timestamps, use `utc` if you are using utc dates, otherwise use a key mapping to your custom date format.
`units` | string | optional | the units of this value, e.g. `km`, `seconds`, `parsecs`
`min` | number | optional | the minimum possible value of this measurement. Will be used by plots, gauges, etc to automatically set a min value.
`max` | number | optional | the maximum possible value of this measurement. Will be used by plots, gauges, etc to automatically set a max value.
`enumerations` | array | optional | for objects where `format` is `"enum"`, this array tracks all possible enumerations of the value. Each entry in this array is an object, with a `value` property that is the numerical value of the enumeration, and a `string` property that is the text value of the enumeration. ex: `{"value": 0, "string": "OFF"}`. If you use an enumerations array, `min` and `max` will be set automatically for you.

## 定義plugin
編輯openmct/src/plugin/plugin.js
這個檔案包含了所有openmct的plugin
### 1.檔案位置
在define後輸入plugin的檔案位置
### 2.函式名稱
在function後輸入plugin名稱

### 3.定義函式

plugins.Aircraft_YEEPlugin = Aircraft_YEEPlugin;

將Aircraft_YEE改成自己飛行器的名字
### 4. 將plugin安裝至openmct
編輯openmct/index.html
在程式碼後面添加

openmct.install(function install(openmctAPI) {'//......'});

eg:

openmct.install(openmct.plugins.Aircraft_YEEPlugin());
openmct.install(openmct.plugins.HistoricalTelemetryPlugin('Aircraft_YEE.telemetry', '/AircraftYEEHistory/', '0.0.0.0'));
openmct.install(openmct.plugins.RealtimeTelemetryPlugin('Aircraft_YEE.telemetry', '/AircraftYEERealtime/', '0.0.0.0'));

/AircraftYEEHistory/ 為歷史資料
/AircraftYeeRealtine/ 為即時資料
後面的'localhost'定義了此plugin裝在位置為http://localhost:8002/openmct 的openmct API
須將其更改為'0.0.0.0'並開啟port與修改server.js才得以遠端存取

### 5. 編輯OpenMCT_Telemetry_Server
#### import由腳本所添加的檔案
到OpenMCT_Telemetry_Server/server.js 傳入檔案

var Aircraft_YEE = require('./Aircraft_YEE');

- 新增一個變數:

var aircraftYEE = new Aircraft_YEE;

- 添加連接:

app.use('/AircraftYEERealtime', realtimeServerAircraftYEE);
app.use('/AircraftYEEHistory', historyServerAircraftYEE);

## 開始測試
### 打開模擬器
用jmavsim
在PX4-Autopilot中執行

make px4_sitl jmavsim

## Linux開發環境
### 1. 安裝nodejs

sudo apt install nodejs

### 2. 安裝npm

 sudo apt install npm

### 3. 確認npm與node版本

npm -v

node -v

### 4. 版本更新 (若未更新至最新版)

sudo apt-get update

sudo apt-get upgrade

### 5. 下載openmct或vis_frame

git clone https://github.com/nasa/openmct.git

git clone https://gitlab.lrz.de/lls/vis-frame.git

### 6. 進去"openmct" 資料夾

cd openmct

### 7. 安裝npm

npm install

### 8. 開啟程式

npm start

## 定義plugin
同windows環境

### 下載模擬器 [px4官網教學](https://docs.px4.io/master/en/dev_setup/dev_env_linux_ubuntu.html)

---

### 開啟外部連線功能
至 openmct/app.js
將`'localhost'`改為`'0.0.0.0'`

:qw 儲存並退出

### 執行OpenMCT、OpenMCT_Telemetry_Server、Telemetry的腳本
### 到localhost:8080
開始編輯介面

[Q-Ground 介面參考](https://docs.qgroundcontrol.com/master/en/FlyView/FlyView.html)

### 圖傳介面製作
vue 教學 https://cn.vuejs.org/v2/guide/
scss 教學 https://eddychang.me/learn-scss-in-15-mins/

資料存放位置: openmct\src\ui\layout

面板(?) pane.vue / pane.scss
定義左側選單 mct-tree.vue / mct-tree.scss / tree-item.vue
定義左側選單搜尋欄 
BrowseBar.vue
母集介面 layout.vue / layout.
定義本體 openmct\src\ui\components

"創建的按鈕"
createbutton.vue / CreateButton.scss