Skip to content

Commit 9c10775

Browse files
WilliangalvaniWilliangalvani
committed
core: frontend: tweak compass configuration pages
1 parent 41c7b7e commit 9c10775

File tree

6 files changed

+150
-64
lines changed

6 files changed

+150
-64
lines changed

‎core/frontend/src/components/parameter-editor/InlineParameterEditor.vue

+12
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import Vue, { PropType } from 'vue'
6767
import mavlink2rest from '@/libs/MAVLink2Rest'
6868
import autopilot_data from '@/store/autopilot'
6969
import Parameter from '@/types/autopilot/parameter'
70+
import { Dictionary } from '@/types/common'
7071
7172
export default Vue.extend({
7273
name: 'InlineParameterEditor',
@@ -95,6 +96,10 @@ export default Vue.extend({
9596
type: Boolean,
9697
default: false,
9798
},
99+
metadataOverrides: {
100+
type: Object as PropType<Dictionary<string>>,
101+
default: () => ({}),
102+
},
98103
},
99104
data() {
100105
return {
@@ -111,6 +116,13 @@ export default Vue.extend({
111116
const entries = Object.entries(this.param?.options ?? [])
112117
const value_is_known = Object.keys(this.param?.options ?? []).map(parseFloat).includes(this.param?.value)
113118
const options = entries.map(([value, name]) => ({ text: name, value: parseFloat(value), disabled: false }))
119+
// replace entries in metadataOverrides
120+
for (const [value, _name] of entries) {
121+
if (value in this.metadataOverrides) {
122+
const index = options.findIndex((option) => option.value === parseFloat(value))
123+
options[index].text = this.metadataOverrides[value]
124+
}
125+
}
114126
if (!value_is_known) {
115127
options.push({ text: `Custom: ${this.param?.value}`, value: this.param?.value, disabled: false })
116128
}

‎core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue

+64-22
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,13 @@
11
<template>
22
<div class="pa-3">
33
<v-card>
4-
<div class="main-container d-flex flex-col">
5-
<v-card outline class="mr-2 mb-2 flex-shrink-1">
4+
<div class="main-container d-flex flex-row">
5+
<v-card outline class="mr-2 mb-2 flex-shrink-1 d-flex flex-col">
66
<div class="compass-container">
77
<compass-display :compasses="reordered_compasses" :colors="compass_colors" />
88
</div>
9-
<v-card class="pa-2 ma-2" width="300px">
10-
<v-card-title>
11-
Declination
12-
</v-card-title>
13-
<v-card-text class="flex-shrink-1">
14-
<parameter-switch label="Auto Declination" :parameter="compass_autodec" />
15-
<p>
16-
If you enable this option, the autopilot will automatically set the declination based on your current
17-
location. A GPS or other absolute positioning system is required.
18-
</p>
19-
<v-text-field
20-
label="Current Declination"
21-
:disabled="compass_autodec?.value !== 0"
22-
:value="printParam(compass_dec)"
23-
@click="openParameterEditor(compass_dec)"
24-
/>
25-
</v-card-text>
26-
</v-card>
279
</v-card>
10+
2811
<v-card outline class="compass-calib-container mb-2">
2912
<v-card-title>
3013
<h3>Compass Calibration</h3>
@@ -91,6 +74,45 @@
9174
</div>
9275
</v-card-text>
9376
</v-card>
77+
<v-card outline class="mr-2 ml-2 mb-2">
78+
<div class="d-block ma-3" style="width: 400px;">
79+
<v-expansion-panels focusable>
80+
<v-expansion-panel>
81+
<v-expansion-panel-header>
82+
<b>Declination</b> ({{ declination_short }})
83+
<v-spacer />
84+
</v-expansion-panel-header>
85+
<v-expansion-panel-content>
86+
<parameter-switch label="Auto Declination" :parameter="compass_autodec" />
87+
<p>
88+
If you enable this option, the autopilot will automatically set the
89+
declination based on your current location.
90+
A GPS or other absolute positioning system is required.
91+
</p>
92+
<InlineParameterEditor v-if="compass_autodec?.value === 0" auto-set :param="compass_dec" />
93+
</v-expansion-panel-content>
94+
</v-expansion-panel>
95+
<v-expansion-panel>
96+
<v-expansion-panel-header>
97+
<template #actions>
98+
<v-icon v-if="coordinates_valid" color="success">
99+
mdi-check-circle
100+
</v-icon>
101+
<v-icon v-else color="error">
102+
mdi-alert
103+
</v-icon>
104+
</template>
105+
106+
<b>Global Position</b>
107+
<v-spacer />
108+
</v-expansion-panel-header>
109+
<v-expansion-panel-content>
110+
<auto-coordinate-detector v-model="coordinates" />
111+
</v-expansion-panel-content>
112+
</v-expansion-panel>
113+
</v-expansion-panels>
114+
</div>
115+
</v-card>
94116
</div>
95117
<div class="compass-reorder-container d-flex flex-row">
96118
<v-tabs v-model="tab" vertical color="primary">
@@ -198,13 +220,15 @@
198220
import Vue from 'vue'
199221
import draggable from 'vuedraggable'
200222
import {
201-
VCardText, VExpansionPanel, VTextField,
223+
VCardText, VExpansionPanel,
202224
} from 'vuetify/lib'
203225
204226
import ParameterSwitch from '@/components/common/ParameterSwitch.vue'
227+
import InlineParameterEditor from '@/components/parameter-editor/InlineParameterEditor.vue'
205228
import CompassDisplay from '@/components/vehiclesetup/configuration/compass/CompassDisplay.vue'
206229
import CompassParams from '@/components/vehiclesetup/configuration/compass/CompassParams.vue'
207230
import mavlink2rest from '@/libs/MAVLink2Rest'
231+
import Listener from '@/libs/MAVLink2Rest/Listener'
208232
import autopilot_data from '@/store/autopilot'
209233
import Parameter, { printParam } from '@/types/autopilot/parameter'
210234
import { Dictionary } from '@/types/common'
@@ -237,20 +261,23 @@ export default Vue.extend({
237261
CompassLearn,
238262
CompassParams,
239263
draggable,
240-
VTextField,
241264
LargeVehicleCompassCalibrator,
242265
ParameterSwitch,
243266
VCardText,
244267
VExpansionPanel,
245268
FullCompassCalibrator,
269+
InlineParameterEditor,
246270
},
247271
data() {
248272
return {
249273
tab: 0,
250274
color_options: ['green', 'blue', 'purple', 'red', 'orange', 'brown', 'grey', 'black'],
275+
coordinates: undefined as { lat: number, lon: number } | undefined,
276+
coordinates_valid: false,
251277
reordered_compasses: [] as deviceId[],
252278
edited_param: undefined as (undefined | Parameter),
253279
edit_param_dialog: false,
280+
gps_listener: undefined as Listener | undefined,
254281
}
255282
},
256283
computed: {
@@ -265,6 +292,12 @@ export default Vue.extend({
265292
results.GPS2 = 'black'
266293
return results
267294
},
295+
declination_short(): string {
296+
if (this.compass_autodec?.value === 1) {
297+
return 'Automatic Declination'
298+
}
299+
return `${this.compass_dec?.value.toFixed(2) ?? 'N/A'} rad`
300+
},
268301
compass_autodec(): Parameter | undefined {
269302
return autopilot_data.parameter('COMPASS_AUTODEC')
270303
},
@@ -437,6 +470,15 @@ export default Vue.extend({
437470
},
438471
mounted() {
439472
this.reordered_compasses = this.compasses
473+
this.gps_listener = mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((receivedMessage) => {
474+
if (receivedMessage.message.lat !== 0 || receivedMessage.message.lon !== 0) {
475+
this.coordinates_valid = true
476+
}
477+
}).setFrequency(0)
478+
mavlink2rest.requestMessageRate('GLOBAL_POSITION_INT', 1, autopilot_data.system_id)
479+
},
480+
beforeDestroy() {
481+
this.gps_listener?.discard()
440482
},
441483
methods: {
442484
printParam,

‎core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue

+71-40
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
<template>
2-
<v-card-text class="mt-3 pa-0">
3-
<v-tooltip bottom>
4-
<template #activator="{ on }">
5-
<v-icon dense :color="mavlink_lat ? 'green' : 'orange'" v-on="on">
6-
{{ mavlink_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
7-
</v-icon>
8-
</template>
9-
<span>{{ mavlink_lat ? "Valid GPS position" : "No valid GPS position" }}</span>
10-
</v-tooltip>
11-
<b>Vehicle coordinates:</b> {{ mavlink_lat?.toFixed(5) ?? "N/A" }} {{ mavlink_lon?.toFixed(5) ?? "N/A" }}
2+
<div>
3+
<v-alert v-if="!mavlink_lat" dense type="error" class="mt-4">
4+
No valid GPS position!
5+
</v-alert>
6+
7+
A valid (usually GPS) position is required for the calibration to estimate the local world magnetic field.
8+
Estimation of the local magnetic field improves the calibration quality as it
9+
allows a 3D fusion of the compass data.
10+
<br>
1211
<br>
13-
<template v-if="!mavlink_lat && supports_setting_position">
12+
<div v-if="!warnonly">
13+
<v-tooltip bottom>
14+
<template #activator="{ on }">
15+
<v-icon dense :color="mavlink_lat ? 'green' : 'orange'" v-on="on">
16+
{{ mavlink_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
17+
</v-icon>
18+
</template>
19+
<span>{{ mavlink_lat ? "Valid GPS position" : "No valid GPS position" }}</span>
20+
</v-tooltip>
21+
<b>Current vehicle coordinates:</b>
22+
<br>
23+
{{ mavlink_lat?.toFixed(5) ?? "N/A" }} {{ mavlink_lon?.toFixed(5) ?? "N/A" }}
24+
<br>
25+
</div>
26+
<template v-if="!mavlink_lat && supports_setting_position && !warnonly">
1427
<v-icon dense :color="geoip_lat ? 'green' : 'red'">
1528
{{ geoip_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
1629
</v-icon>
@@ -22,41 +35,52 @@
2235
</template>
2336
<span>GeoIP coordinates are estimated based on your IP address.</span>
2437
</v-tooltip>
25-
<b>GeoIP coordinates:</b> {{ geoip_lat ?? "N/A" }} {{ geoip_lon ?? "N/A" }}
38+
<b>GeoIP coordinates:</b>
39+
<br>
40+
{{ geoip_lat ?? "N/A" }} {{ geoip_lon ?? "N/A" }}
2641
<br>
2742
</template>
28-
<v-card v-if="!mavlink_lat && supports_setting_position" class="pa-4">
29-
<v-card-text>
30-
No valid GPS position!
31-
</v-card-text>
32-
<v-card-actions>
33-
<v-btn v-if="!manual_coordinates" small color="primary" @click="setOrigin(geoip_lat ?? 0, geoip_lon ?? 0)">
43+
<v-card v-if="!mavlink_lat && supports_setting_position && !warnonly" class="pa-4">
44+
<div class="d-flex flex-column justify-space-between">
45+
<v-btn
46+
v-if="!manual_coordinates"
47+
class="ma-1"
48+
small
49+
color="primary"
50+
@click="setOrigin(geoip_lat ?? 0, geoip_lon ?? 0)"
51+
>
3452
Use GeoIP coordinates
3553
</v-btn>
36-
<v-btn v-if="!mavlink_lat && !manual_coordinates" small color="primary" @click="manual_coordinates = true">
54+
<v-btn
55+
v-if="!mavlink_lat && !manual_coordinates"
56+
class="ma-1"
57+
small
58+
color="primary"
59+
@click="manual_coordinates = true"
60+
>
3761
Enter custom coordinate
3862
</v-btn>
39-
<br>
40-
<div v-if="manual_coordinates">
41-
<v-text-field
42-
v-model="manual_lat"
43-
label="Latitude"
44-
type="number"
45-
required
46-
/>
47-
<v-text-field
48-
v-model="manual_lon"
49-
label="Longitude"
50-
type="number"
51-
required
52-
/>
53-
<v-btn small color="primary" @click="setOrigin(manual_lat ?? 0, manual_lon ?? 0)">
54-
Use these coordinates
55-
</v-btn>
56-
</div>
57-
</v-card-actions>
63+
</div>
64+
65+
<div v-if="manual_coordinates">
66+
<v-text-field
67+
v-model="manual_lat"
68+
label="Latitude"
69+
type="number"
70+
required
71+
/>
72+
<v-text-field
73+
v-model="manual_lon"
74+
label="Longitude"
75+
type="number"
76+
required
77+
/>
78+
<v-btn small color="primary" @click="setOrigin(manual_lat ?? 0, manual_lon ?? 0)">
79+
Use these coordinates
80+
</v-btn>
81+
</div>
5882
</v-card>
59-
</v-card-text>
83+
</div>
6084
</template>
6185

6286
<script lang="ts">
@@ -81,6 +105,11 @@ export default {
81105
required: false,
82106
default: undefined,
83107
},
108+
warnonly: {
109+
type: Boolean,
110+
required: false,
111+
default: false,
112+
},
84113
},
85114
data() {
86115
return {
@@ -188,5 +217,7 @@ export default {
188217
</script>
189218

190219
<style scoped>
191-
220+
.position {
221+
max-width: 300px;
222+
}
192223
</style>

‎core/frontend/src/components/vehiclesetup/configuration/compass/CompassDisplay.vue

+1
Original file line numberDiff line numberDiff line change
@@ -334,5 +334,6 @@ export default Vue.extend({
334334
.compass canvas {
335335
border-radius: 15%;
336336
border: 1px solid var(--v-primary-base);
337+
background-color: white;
337338
}
338339
</style>

‎core/frontend/src/components/vehiclesetup/configuration/compass/FullCompassCalibrator.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
<auto-coordinate-detector
3838
v-if="state === states.IDLE"
39-
v-model="coordinates"
39+
warnonly="true"
4040
/>
4141
<compass-mask-picker v-if="state === states.IDLE" v-model="compass_mask" :devices="compasses" />
4242
<v-divider />
@@ -128,7 +128,6 @@ export default {
128128
data() {
129129
return {
130130
dialog: false,
131-
coordinates: undefined as { lat: number, lon: number } | undefined,
132131
compass_mask: 0,
133132
status_type: '' as string | undefined,
134133
status_text: '' as string | undefined,

‎core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
A Valid position is required for Compass Learn to estimate the local world magnetic field.
2222
<auto-coordinate-detector
2323
v-model="coordinates"
24+
warnonly="true"
2425
/>
2526
<compass-mask-picker v-model="compass_mask" :devices="compasses" />
2627
<v-divider />

0 commit comments

Comments
 (0)