---
# System prepended metadata

title: opencmt設定

---

# opencmt設定
[toc]
## 開發環境
- [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)
### 1.下載node.js
### 2.安裝git bash
### 3.建議使用vscode編輯
### 4.下載PX4
``` #git
git clone https://github.com/PX4/PX4-Autopilot.git --recursive
```
## 開始設定
### 1.下載vis_frame
(這是人家官方做好的教學包)
官方連結:
``` #git
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
![](https://i.imgur.com/dGLLaQy.png)
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
```#python
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

![](https://i.imgur.com/UDHz4cS.png)
位置在vis-frame/python_scripts/Telemetry_Object_Generator
將會產生幾個不同的檔案
在openmct/example/飛行器的名字中會有兩個檔案


#### Plugin.js
- Plugin的種類分為三種
![](https://i.imgur.com/7vEdB7g.png)


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

如下圖
![](https://i.imgur.com/2tP8K6E.png)



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.js
編輯openmct/src/plugin/plugin.js
這個檔案定義了所有openmct要使用的plugin
### 1.檔案位置
在define後輸入plugin的檔案位置
![](https://i.imgur.com/4FXQ6vn.png)
### 2.函式名稱
在function後輸入plugin名稱
![](https://i.imgur.com/4By0ku4.png)

### 3.定義函式
```#javasripts
plugins.Aircraft_YEEPlugin = Aircraft_YEEPlugin;
```
將Aircraft_YEE改成自己飛行器的名字
![](https://i.imgur.com/HXXPIVz.png)
### 4. 將plugin安裝至openmct
編輯openmct/index.html
在程式碼後面添加


```javascript
openmct.install(function install(openmctAPI) {'//......'});
```
eg:

```javascript
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才得以遠端存取

![](https://i.imgur.com/qJ8wvxl.png)
### 5. 編輯OpenMCT_Telemetry_Server
#### import由腳本所添加的檔案
到OpenMCT_Telemetry_Server/server.js 傳入檔案
```#javasripts
var Aircraft_YEE = require('./Aircraft_YEE');
```
![](https://i.imgur.com/cCOVyWP.png)
#### 新增一個變數:
```#javasripts
var aircraftYEE = new Aircraft_YEE;
```
#### 添加連接:
```#javascripts
app.use('/AircraftYEERealtime', realtimeServerAircraftYEE);
app.use('/AircraftYEEHistory', historyServerAircraftYEE);
```
![](https://i.imgur.com/mZRLcHo.png)
## 開始測試
### 打開模擬器

windows用jmavsim
在PX4-Autopilot中執行
```
make px4_sitl jmavsim
```
linux用其他的
### 開啟外部連線功能
至 openmct/app.js
將`'localhost'`改為`'0.0.0.0'`
![](https://i.imgur.com/pfkKppv.png)

:qw 儲存並退出

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

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

## 四元數
- w x y z

- 角速度 : angularvelocityfrd: 

- (狀態顯示): class health:

- class velocity
    x y z velocity
    
- (壓力表) class ScaledPressure:
    absolutealtitude

- 空速 推力 爬升速度
fixedwingMatrics

### 影片介面製作
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
定義左側選單搜尋欄 ![](https://i.imgur.com/3SspwKo.png)
BrowseBar.vue
母集介面 layout.vue / layout.
定義本體 openmct\src\ui\components

"創建的按鈕"![](https://i.imgur.com/jpP7GEd.png)
 createbutton.vue / CreateButton.scss