# OpenMCT Ground Controll Interface Dev. Report ENG Ver.
###### tags:`NCKU_ISP` `NCKU_UAV` `ISP_Avionics` `OpenMCT` `ENG_Ver`
[toc]
## Circumstances
- [Git notes](https://hackmd.io/@aU_yFH-8SQCvwIIDNY3J7w/BysAOKNkd)
- [Ubuntu Notes](/MTYar05MRyeVyydxr4RFKw)
- [JavaScript Define](https://requirejs.org/docs/api.html#define)
- [JSON Lazy Pack](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON)
- [OpenMCT official website](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
## starting program
- [openmct install & start program](/yl-Kol-ISlSZZDutgc1QXA)
# openmct settings
## Windowsd development environment
1. Download node.js
2. Install git bash
3. It is recommended to use vscode editing
4. Download PX4
``` #git
git clone https://github.com/PX4/PX4-Autopilot.git --recursive
```
## Start setting
### 1. Download vis_frame
(This is the official teaching package made by others)
Official link:
``` #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. Make Telemetry_Object
1. Go to vis-frame\python_scripts\Telemetry_Object_Generator
2. Edit Telemetry_Object_Generater.py
3. Change telemetry_object_name to the name of the aircraft
4. Change UDP_PORT to the port you want to pass to openmct
5. Change to true except for generate_pythonScripts
```#python
generate_Dictionary = True
generate_OpenMCT_object = True
generate_server_object = True
generate_pythonScripts = False
```
### 3. Download another transfer script
The transmission script generated by default needs to go through the misson planner
[MavSDK ver2.0 link](https://hackmd.io/q80yrkPCTuitar3Rv8Uf2w)
### 4. Execute Telemetry_Object_Generater.py
The location is in vis-frame/python_scripts/Telemetry_Object_Generator
Will generate several different files
There will be two files in the name of openmct/example/aircraft
#### Plugin.js
- There are three types of Plugin
For more information, please see [Open MCT Integration Tutorials](https://hackmd.io/@isaPv93jQuix8iD4DT34kQ/Hy9jHYxru)
Official document: [Github](https://github.com/nasa/openmct-tutorial)
#### dictionary.json
"name" is the name displayed on openmct
"format" is the type of variable
"key" is the variable name used in the transmission script, so you must write it into the python script after selecting the variable name
As shown below
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.
## Define plugin
Edit openmct/src/plugin/plugin.js
This file contains all openmct plugins
### 1. File location
Enter the file location of the plugin after define
### 2. Function name
Enter the plugin name after function
### 3. Define the function
```#javasripts
plugins.Aircraft_YEEPlugin = Aircraft_YEEPlugin;
```
Change Aircraft_YEE to the name of your own aircraft
### 4. Install plugin to openmct
Edit openmct/index.html
Add after the code
```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/ is historical data
/AircraftYeeRealtine/ is real-time data
The following'localhost' defines the openmct API where this plugin is installed at http://localhost:8002/openmct
You must change it to '0.0.0.0' and open the port and modify server.js to get remote access
### 5. Edit OpenMCT_Telemetry_Server
#### import files added by script
Transfer files to OpenMCT_Telemetry_Server/server.js
```#javasripts
var Aircraft_YEE = require('./Aircraft_YEE');
```
- Add a variable:
```#javasripts
var aircraftYEE = new Aircraft_YEE;
```
- Add connection:
```#javascripts
app.use('/AircraftYEERealtime', realtimeServerAircraftYEE);
app.use('/AircraftYEEHistory', historyServerAircraftYEE);
```
## start testing
### Open the emulator
Use jmavsim
Execute in PX4-Autopilot
```
make px4_sitl jmavsim
```
## Linux Development Environment
### 1. Install nodejs
``` #linux
sudo apt install nodejs
```
### 2. Install npm
```#linux
sudo apt install npm
```
### 3. Confirm the version of npm and node
```#linux
npm -v
```
```#linux
node -v
```
### 4. Version update (if not updated to the latest version)
```#linux
sudo apt-get update
```
``` #linux
sudo apt-get upgrade
```
### 5. Download openmct or vis_frame
```#linux
git clone https://github.com/nasa/openmct.git
```
``` #git
git clone https://gitlab.lrz.de/lls/vis-frame.git
```
### 6. Go to the "openmct" folder
``` #linux
cd openmct
```
### 7. Install npm
``` #linux
npm install
```
### 8. Start the program
``` #linux
npm start
```
## Define plugin
Same as windows environment
### Download the simulator [px4 official website teaching](https://docs.px4.io/master/en/dev_setup/dev_env_linux_ubuntu.html)
---
### Enable external connection function
To openmct/app.js
Change `'localhost'` to `'0.0.0.0'`
:qw save and exit
### Execute OpenMCT, OpenMCT_Telemetry_Server, Telemetry scripts
### To localhost:8080
Start editing interface
[Q-Ground Interface Reference](https://docs.qgroundcontrol.com/master/en/FlyView/FlyView.html)
### Image transmission interface production
vue teaching https://cn.vuejs.org/v2/guide/
scss teaching https://eddychang.me/learn-scss-in-15-mins/
Data storage location: openmct\src\ui\layout
Panel (?) pane.vue / pane.scss
Define the left menu mct-tree.vue / mct-tree.scss / tree-item.vue
Define the left menu search bar
BrowseBar.vue
Master set interface layout.vue / layout.
Define ontology openmct\src\ui\components
"Created button"
createbutton.vue / CreateButton.scss
Sign in with Wallet
Connect another wallet