From 9576483df38fbb185c265d8d0e20120952355f6e Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Wed, 24 Jul 2024 18:37:40 -0300
Subject: [PATCH 1/4] frontend: themedSvg: add watcher for url

---
 core/frontend/src/components/utils/themedSVG.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/core/frontend/src/components/utils/themedSVG.vue b/core/frontend/src/components/utils/themedSVG.vue
index f0afd94bf6..0f059f5b8f 100644
--- a/core/frontend/src/components/utils/themedSVG.vue
+++ b/core/frontend/src/components/utils/themedSVG.vue
@@ -31,6 +31,15 @@ export default Vue.extend({
       return `mr-0 ${settings.is_dark_theme ? 'svg-outline-dark' : 'svg-outline-light'}`
     },
   },
+  watch: {
+    src() {
+      axios.get(this.src).then((response) => {
+        this.image = response.data
+      }).catch((error) => {
+        console.error(error)
+      })
+    },
+  },
   mounted() {
     axios.get(this.src).then((response) => {
       this.image = response.data

From ac283d1abf1564e116b146484e721377b5dda2ea Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Wed, 24 Jul 2024 15:13:50 -0300
Subject: [PATCH 2/4] frontend: add basic camera gimbal setup

---
 .../img/configuration/camera/gimbal-pitch.svg | 181 ++++++++++++++
 .../src/components/vehiclesetup/Configure.vue |   3 +
 .../vehiclesetup/configuration/camera.vue     | 225 ++++++++++++++++++
 3 files changed, 409 insertions(+)
 create mode 100644 core/frontend/src/assets/img/configuration/camera/gimbal-pitch.svg
 create mode 100644 core/frontend/src/components/vehiclesetup/configuration/camera.vue

diff --git a/core/frontend/src/assets/img/configuration/camera/gimbal-pitch.svg b/core/frontend/src/assets/img/configuration/camera/gimbal-pitch.svg
new file mode 100644
index 0000000000..1d42037d42
--- /dev/null
+++ b/core/frontend/src/assets/img/configuration/camera/gimbal-pitch.svg
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="150"
+   height="130"
+   viewBox="0 0 150 130"
+   sodipodi:docname="gimbal-pitch.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <color-profile
+       inkscape:label="Generic Gray Gamma 2.2 Profile"
+       name="Generic-Gray-Gamma-2.2-Profile"
+       xlink:href="data:application/vnd.iccprofile;base64,AAAR2GFwcGwCAAAAbW50ckdSQVlYWVogB9wACAAXAA8ALgAPYWNzcEFQUEwAAAAAbm9uZQAAAAAAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1hcHBsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFZGVzYwAAAMAAAAC4ZHNjbQAAAXgAAAgaY3BydAAACZQAAAAjd3RwdAAACbgAAAAUa1RSQwAACcwAAAgMZGVzYwAAAAAAAAAfR2VuZXJpYyBHcmF5IEdhbW1hIDIuMiBQcm9maWxlAAAAAAAAAAAfAEcAZQBuAGUAcgBpAGMAIABHAHIAYQB5ACAARwBhAG0AbQBhACAAMgAuADIAIABQAHIAbwBmAGkAbABlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG1sdWMAAAAAAAAAHwAAAAxza1NLAAAALgAAAYRkYURLAAAAOgAAAbJjYUVTAAAAOAAAAex2aVZOAAAAQAAAAiRwdEJSAAAASgAAAmR1a1VBAAAALAAAAq5mckZVAAAAPgAAAtpodUhVAAAANAAAAxh6aFRXAAAAGgAAA0xrb0tSAAAAIgAAA2ZuYk5PAAAAOgAAA4hjc0NaAAAAKAAAA8JoZUlMAAAAJAAAA+pyb1JPAAAAKgAABA5kZURFAAAATgAABDhpdElUAAAATgAABIZzdlNFAAAAOAAABNR6aENOAAAAGgAABQxqYUpQAAAAJgAABSZlbEdSAAAAKgAABUxwdFBPAAAAUgAABXZubE5MAAAAQAAABchlc0VTAAAATAAABgh0aFRIAAAAMgAABlR0clRSAAAAJAAABoZmaUZJAAAARgAABqpockhSAAAAPgAABvBwbFBMAAAASgAABy5hckVHAAAALAAAB3hydVJVAAAAOgAAB6RlblVTAAAAPAAAB94AVgFhAGUAbwBiAGUAYwBuAOEAIABzAGkAdgDhACAAZwBhAG0AYQAgADIALAAyAEcAZQBuAGUAcgBpAHMAawAgAGcAcgDlACAAMgAsADIAIABnAGEAbQBtAGEALQBwAHIAbwBmAGkAbABHAGEAbQBtAGEAIABkAGUAIABnAHIAaQBzAG8AcwAgAGcAZQBuAOgAcgBpAGMAYQAgADIALgAyAEMepQB1ACAAaADsAG4AaAAgAE0A4AB1ACAAeADhAG0AIABDAGgAdQBuAGcAIABHAGEAbQBtAGEAIAAyAC4AMgBQAGUAcgBmAGkAbAAgAEcAZQBuAOkAcgBpAGMAbwAgAGQAYQAgAEcAYQBtAGEAIABkAGUAIABDAGkAbgB6AGEAcwAgADIALAAyBBcEMAQzBDAEOwRMBD0EMAAgAEcAcgBhAHkALQQzBDAEPAQwACAAMgAuADIAUAByAG8AZgBpAGwAIABnAOkAbgDpAHIAaQBxAHUAZQAgAGcAcgBpAHMAIABnAGEAbQBtAGEAIAAyACwAMgDBAGwAdABhAGwA4QBuAG8AcwAgAHMAegD8AHIAawBlACAAZwBhAG0AbQBhACAAMgAuADKQGnUocHCWjlFJXqYAMgAuADKCcl9pY8+P8Md8vBgAINaMwMkAIKwQucgAIAAyAC4AMgAg1QS4XNMMx3wARwBlAG4AZQByAGkAcwBrACAAZwByAOUAIABnAGEAbQBtAGEAIAAyACwAMgAtAHAAcgBvAGYAaQBsAE8AYgBlAGMAbgDhACABYQBlAGQA4QAgAGcAYQBtAGEAIAAyAC4AMgXSBdAF3gXUACAF0AXkBdUF6AAgBdsF3AXcBdkAIAAyAC4AMgBHAGEAbQBhACAAZwByAGkAIABnAGUAbgBlAHIAaQBjAQMAIAAyACwAMgBBAGwAbABnAGUAbQBlAGkAbgBlAHMAIABHAHIAYQB1AHMAdAB1AGYAZQBuAC0AUAByAG8AZgBpAGwAIABHAGEAbQBtAGEAIAAyACwAMgBQAHIAbwBmAGkAbABvACAAZwByAGkAZwBpAG8AIABnAGUAbgBlAHIAaQBjAG8AIABkAGUAbABsAGEAIABnAGEAbQBtAGEAIAAyACwAMgBHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgADIALAAyACAAZwBhAG0AbQBhAHAAcgBvAGYAaQBsZm6QGnBwXqZ8+2VwADIALgAyY8+P8GWHTvZOAIIsMLAw7DCkMKww8zDeACAAMgAuADIAIDDXMO0w1TChMKQw6wOTA7UDvQO5A7oDzAAgA5MDugPBA7kAIAOTA6wDvAO8A7EAIAAyAC4AMgBQAGUAcgBmAGkAbAAgAGcAZQBuAOkAcgBpAGMAbwAgAGQAZQAgAGMAaQBuAHoAZQBuAHQAbwBzACAAZABhACAARwBhAG0AbQBhACAAMgAsADIAQQBsAGcAZQBtAGUAZQBuACAAZwByAGkAagBzACAAZwBhAG0AbQBhACAAMgAsADIALQBwAHIAbwBmAGkAZQBsAFAAZQByAGYAaQBsACAAZwBlAG4A6QByAGkAYwBvACAAZABlACAAZwBhAG0AbQBhACAAZABlACAAZwByAGkAcwBlAHMAIAAyACwAMg4jDjEOBw4qDjUOQQ4BDiEOIQ4yDkAOAQ4jDiIOTA4XDjEOSA4nDkQOGwAgADIALgAyAEcAZQBuAGUAbAAgAEcAcgBpACAARwBhAG0AYQAgADIALAAyAFkAbABlAGkAbgBlAG4AIABoAGEAcgBtAGEAYQBuACAAZwBhAG0AbQBhACAAMgAsADIAIAAtAHAAcgBvAGYAaQBpAGwAaQBHAGUAbgBlAHIAaQENAGsAaQAgAEcAcgBhAHkAIABHAGEAbQBtAGEAIAAyAC4AMgAgAHAAcgBvAGYAaQBsAFUAbgBpAHcAZQByAHMAYQBsAG4AeQAgAHAAcgBvAGYAaQBsACAAcwB6AGEAcgBvAVsAYwBpACAAZwBhAG0AbQBhACAAMgAsADIGOgYnBkUGJwAgADIALgAyACAGRAZIBkYAIAYxBkUGJwYvBkoAIAY5BicGRQQeBDEESQQwBE8AIARBBDUEQAQwBE8AIAQzBDAEPAQ8BDAAIAAyACwAMgAtBD8EQAQ+BEQEOAQ7BEwARwBlAG4AZQByAGkAYwAgAEcAcgBhAHkAIABHAGEAbQBtAGEAIAAyAC4AMgAgAFAAcgBvAGYAaQBsAGUAAHRleHQAAAAAQ29weXJpZ2h0IEFwcGxlIEluYy4sIDIwMTIAAFhZWiAAAAAAAADzUQABAAAAARbMY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIU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"
+       id="color-profile3" />
+    <color-profile
+       inkscape:label="sRGB IEC61966-2.1"
+       name="sRGB-IEC61966-2.1"
+       xlink:href="data:application/vnd.iccprofile;base64,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"
+       id="color-profile4" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath3">
+      <path
+         d="M 0,0 H 612 V 803.25 H 0 Z"
+         id="path3" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath5">
+      <path
+         d="M 0,0 H 612 V 803.25 H 0 Z"
+         id="path5" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath7">
+      <path
+         d="M 0,0 H 612 V 803.25 H 0 Z"
+         id="path7" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath9">
+      <path
+         d="M 0,0 H 612 V 803.25 H 0 Z"
+         id="path9" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath11">
+      <path
+         d="M 0,0 H 612 V 803.25 H 0 Z"
+         id="path11" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="7.0588235"
+     inkscape:cx="52.4875"
+     inkscape:cy="76.216667"
+     inkscape:window-width="3840"
+     inkscape:window-height="2094"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g1">
+    <inkscape:page
+       x="0"
+       y="0"
+       inkscape:label="1"
+       id="page1"
+       width="150"
+       height="130"
+       margin="0"
+       bleed="0" />
+  </sodipodi:namedview>
+  <g
+     id="g1"
+     inkscape:groupmode="layer"
+     inkscape:label="1">
+    <path
+       id="path1"
+       d="m 99.881443,81.105204 h 5.656247 V 47.37083 h -5.656247 z m 2.828127,-39.453125 c 1,0 1.83594,-0.34375 2.51562,-1.03125 0.67578,-0.695313 1.01563,-1.531249 1.01563,-2.5 0,-0.98828 -0.33985,-1.820312 -1.01563,-2.499999 -0.67968,-0.687501 -1.51562,-1.031251 -2.51562,-1.031251 -0.96875,0 -1.80469,0.34375 -2.5,1.031251 -0.687502,0.679687 -1.031252,1.511719 -1.031252,2.499999 0,0.968751 0.34375,1.804687 1.031252,2.5 0.69531,0.6875 1.53125,1.03125 2.5,1.03125 z m 0,0"
+       style="fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none;stroke-width:1.44425"
+       aria-label=" i" />
+    <path
+       id="path2"
+       d="m 159.757,682.9474 c 0,0.2343 0.1899,0.4243 0.4242,0.4243 0.2287,0 0.4163,-0.1812 0.4241,-0.4097 0.1375,-4.0183 0.005,-8.2118 0.1142,-12.2199 0.01,-0.3466 -0.2639,-0.6352 -0.6105,-0.6446 -0.3465,-0.009 -0.6351,0.2639 -0.6446,0.6105 -1e-4,0.007 -2e-4,0.0141 -2e-4,0.0212 0.0269,4.0536 0.2933,8.2329 0.2928,12.2182 m 0.8792,0.3479 c 0.2548,-0.0578 0.4144,-0.3111 0.3567,-0.5658 -0.0413,-0.1821 -0.1858,-0.3228 -0.369,-0.3593 l -0.0455,-0.0102 0.0308,0.012 0.0472,0.0248 c -0.0231,-0.0139 0.1569,0.1398 0.1053,0.0852 -0.199,-0.2108 -0.5313,-0.2204 -0.7421,-0.0214 -0.2109,0.1991 -0.2204,0.5313 -0.0214,0.7422 0.199,0.2108 0.5313,0.2203 0.7421,0.0213 0.062,-0.0584 0.1087,-0.1311 0.1363,-0.2116 0.0344,-0.1005 -0.1355,0.2114 -0.1049,0.1779 0.0486,-0.0533 -0.1304,0.1006 -0.1067,0.0868 0.058,-0.0335 -0.0548,0.024 -0.0288,0.0181 m -0.6393,-0.8539 c -0.1423,0.1322 -0.2064,0.3284 -0.1696,0.5192 0.1099,0.5696 0.3056,0.4202 0.395,0.4627 l 0.8253,0.2514 c 6.2793,0.5611 12.6966,0.3658 18.4513,-0.1345 0.4241,-0.0369 0.7381,-0.4106 0.7012,-0.8347 -0.0369,-0.4241 -0.4106,-0.738 -0.8347,-0.7012 -5.6881,0.5095 -12.027,0.7146 -18.076,0.1972 l -0.6759,0.0415 -0.2314,0.029 c -0.0744,0.0126 -0.0894,-0.1053 -0.3852,0.1694 m 0.4942,-12.3455 c -0.3788,0.097 -0.6072,0.4828 -0.5102,0.8616 0.0864,0.3374 0.4053,0.5618 0.7521,0.5292 l 0.7272,0.0135 c 6.3282,0.099 12.4864,0.8695 18.5641,1.0033 0.4842,0.0107 0.8854,-0.3732 0.8961,-0.8574 0.0107,-0.4842 -0.3732,-0.8854 -0.8575,-0.8961 -0.004,-10e-5 -0.009,-2e-4 -0.0128,-2e-4 -5.9694,-0.044 -12.1519,-0.7274 -18.5552,-0.7388 -0.3706,0.01 -0.6787,0.002 -1.0038,0.0849 m 18.8985,13.2253 c -0.0212,0.2663 0.1774,0.4994 0.4438,0.5207 0.259,0.0207 0.4882,-0.1671 0.5188,-0.4252 0.4588,-3.8616 0.2308,-7.9938 0.3398,-11.7956 0.0111,-0.3884 -0.2948,-0.7123 -0.6832,-0.7234 -0.3884,-0.0112 -0.7123,0.2947 -0.7235,0.6831 -2e-4,0.009 -3e-4,0.0181 -2e-4,0.0271 0.0382,3.8709 0.4053,7.9477 0.1045,11.7133 m 2.0562,-5.5662 c -0.2425,-0.276 -0.6628,-0.3031 -0.9387,-0.0607 -0.2745,0.2412 -0.3031,0.6585 -0.0641,0.9349 1.6748,1.9362 4.8304,3.6297 6.3966,5.1733 0.2717,0.2678 0.7091,0.2646 0.9769,-0.007 0.2679,-0.2718 0.2647,-0.7092 -0.007,-0.977 -1.8126,-1.7591 -4.9463,-3.4501 -6.3636,-5.0634 m 5.9289,5.6555 c 0.004,0.2476 0.2073,0.4454 0.455,0.4418 0.2408,-0.004 0.4359,-0.1966 0.4418,-0.4374 0.0739,-3.0311 0.0812,-6.5732 0.2019,-9.6717 0.0134,-0.3429 -0.2538,-0.6318 -0.5967,-0.6451 -0.343,-0.0134 -0.6318,0.2538 -0.6452,0.5967 -3e-4,0.008 -4e-4,0.0156 -4e-4,0.0234 z m -7.6488,-5.6094 c -0.1709,0.3668 -0.0121,0.8026 0.3547,0.9735 0.3596,0.1676 0.7872,0.0185 0.9646,-0.3364 0.4452,-0.8901 2.053,-1.7071 3.4613,-2.5794 l 1.9679,-1.3478 1.01,-0.6997 0.3794,-0.204 0.4979,-0.3047 c 0.3359,-0.1996 0.4924,-0.6026 0.3792,-0.9766 -0.01,-0.124 -0.0751,-0.243 -0.1777,-0.3239 l -0.0177,-0.0131 c -0.2684,-0.2842 -0.6961,-0.3486 -1.0363,-0.156 l -0.4899,0.2875 -0.4849,0.3589 -1.0129,0.7208 -1.8599,1.3243 c -1.291,0.8438 -3.1776,1.6497 -3.9357,3.2766 m 13.6042,-0.3062 c -0.22,0 -0.3984,0.1783 -0.3984,0.3984 0,0.22 0.1784,0.3984 0.3984,0.3984 h 51.6308 c 0.2201,0 0.3985,-0.1784 0.3985,-0.3984 0,-0.2201 -0.1784,-0.3984 -0.3985,-0.3984 z"
+       style="fill:#000000 icc-color(sRGB-IEC61966-2, 0.1, 0, 0, 0);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(1.3333333,0,0,-1.3333333,-190.82168,977.86302)"
+       clip-path="url(#clipPath3)" />
+    <path
+       id="path4"
+       d="m 168.4817,676.0835 c -0.4315,-0.0865 -0.8515,0.1932 -0.938,0.6247 -0.0865,0.4315 0.1931,0.8515 0.6247,0.938 l 60.1002,12.0497 c 0.4316,0.0865 0.8515,-0.1931 0.938,-0.6246 0.0865,-0.4316 -0.1931,-0.8515 -0.6247,-0.938 z"
+       style="fill:#a400c7 icc-color(sRGB-IEC61966-2, 0.1, 0.64312744, 0, 0.78038025);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(1.3333333,0,0,-1.3333333,-190.82168,977.86302)"
+       clip-path="url(#clipPath5)" />
+    <path
+       id="path6"
+       d="m 168.8971,676.3101 c -0.3064,-0.3159 -0.8109,-0.3237 -1.1268,-0.0173 -0.316,0.3064 -0.3237,0.8109 -0.0174,1.1268 l 50.8206,52.4072 c 0.3063,0.3159 0.8108,0.3237 1.1268,0.0173 0.3159,-0.3064 0.3237,-0.8109 0.0173,-1.1268 z"
+       style="fill:#006fff icc-color(sRGB-IEC61966-2, 0.1, 0, 0.43528748, 1);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(1.3333333,0,0,-1.3333333,-190.82168,977.86302)"
+       clip-path="url(#clipPath7)" />
+    <path
+       id="path8"
+       d="m 167.9291,676.1733 c -0.3819,0.2186 -0.5143,0.7055 -0.2957,1.0874 0.2187,0.382 0.7055,0.5144 1.0875,0.2957 l 63.4294,-36.3087 c 0.382,-0.2187 0.5143,-0.7055 0.2957,-1.0875 -0.2186,-0.3819 -0.7055,-0.5143 -1.0875,-0.2957 z"
+       style="fill:#fa9d00 icc-color(sRGB-IEC61966-2, 0.1, 0.9803772, 0.61567688, 0);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(1.3333333,0,0,-1.3333333,-190.82168,977.86302)"
+       clip-path="url(#clipPath9)" />
+    <path
+       id="path10"
+       d="m 220.7092,685.4369 c -0.1185,-0.2014 -0.3778,-0.2686 -0.5792,-0.1502 -0.1431,0.0842 -0.2238,0.2442 -0.2063,0.4092 0.0168,0.1597 0.3181,0.491 0.5734,0.4556 0.5949,-0.0825 0.6904,-0.4979 0.9267,-0.8273 1.1143,-1.8902 1.9382,-4.4562 1.7155,-7.2247 -0.0248,-0.3083 -0.2949,-0.5382 -0.6032,-0.5134 -0.3083,0.0248 -0.5382,0.2948 -0.5134,0.6031 0.1996,2.4919 -0.5557,4.8532 -1.5387,6.5231 l -0.3118,0.5857 -0.017,0.0374 0.0849,-0.0476 c -0.07,0.0277 0.3963,0.0437 0.2944,0.002 -0.0984,-0.0403 0.1986,0.1878 0.1747,0.147 m -0.7681,-2.4802 c -0.0607,-0.243 -0.3069,-0.3907 -0.5499,-0.33 -0.18,0.045 -0.3144,0.1951 -0.3393,0.379 l -0.1696,1.602 c 0.0321,0.4345 0.0928,0.8228 0.3546,1.1659 0.588,0.7826 1.6094,0.6226 2.4407,0.4252 0.8294,-0.1968 1.5896,-0.5193 2.0314,-0.7322 0.2928,-0.141 0.4157,-0.4927 0.2747,-0.7855 -0.1394,-0.2893 -0.485,-0.4134 -0.7766,-0.2789 -0.3854,0.1778 -1.0995,0.4703 -1.8009,0.6303 -0.68,0.155 -1.1666,0.0485 -1.1932,0.0121 l -0.0939,-0.4591 c -0.0926,-0.5693 -0.0674,-1.1863 -0.178,-1.6288 m -2.6931,42.2686 c -0.1558,0.1793 -0.1368,0.451 0.0425,0.6068 0.1739,0.1512 0.4361,0.1384 0.5945,-0.0289 1.1439,-1.2085 2.3832,-3.1327 3.5886,-4.7051 l 0.4461,-0.5918 c 1.0462,-1.3977 1.9622,-2.6536 2.8573,-4.0478 1.1822,-1.846 2.6743,-4.3106 3.6922,-7.0149 0.9232,-2.4258 2.0396,-4.6663 2.8292,-6.8858 1.3733,-3.8801 2.7443,-8.2575 3.6598,-12.2946 0.4807,-2.0847 1.0455,-3.9519 1.2948,-5.9992 l 0.3126,-3.0445 0.1016,-1.6802 -0.0151,-0.9485 -0.0161,-0.3335 -0.0133,-0.1309 c -0.007,-0.046 0.116,-0.037 -0.1426,-0.3285 -0.2003,-0.2257 -0.5456,-0.2463 -0.7713,-0.0461 -0.0265,0.0235 -0.0507,0.0496 -0.0722,0.0779 -0.3127,0.411 -0.1215,0.323 -0.1307,0.4094 l -0.0979,1.2239 -0.0908,1.6582 -0.3037,2.9963 c -0.2099,1.9274 -0.7339,3.7617 -1.1988,5.8913 -0.8825,3.9729 -2.2254,8.3228 -3.5706,12.1775 -0.7443,2.144 -1.8439,4.3942 -2.7725,6.8835 -0.9744,2.5831 -2.4292,4.9915 -3.5962,6.81 -0.8731,1.3636 -1.7699,2.5972 -2.8065,3.9853 l -0.4385,0.6024 c -1.1845,1.6544 -2.3753,3.5992 -3.3824,4.7578 m 19.218,-46.6963 c 0.2035,-0.2182 0.1916,-0.5602 -0.0266,-0.7637 -0.2182,-0.2036 -0.5602,-0.1917 -0.7637,0.0266 -0.1715,0.1838 -0.1935,0.4615 -0.0533,0.67 0.0551,0.0819 -0.0748,-0.1668 -0.0672,-0.1416 0.0208,0.0695 -0.0143,-0.0664 -0.0136,-0.0586 l 0.004,0.0671 c 0.0137,0.2874 0.2578,0.5092 0.5452,0.4954 0.2577,-0.0123 0.4676,-0.2115 0.4934,-0.4683 l 0.008,-0.0626 -0.006,0.0259 -0.0189,0.0541 c 0.0123,-0.0294 -0.1793,0.2398 -0.1009,0.1557 m -18.8333,43.3724 c -0.0143,-0.2397 -0.2201,-0.4225 -0.4599,-0.4082 -0.2228,0.0132 -0.3994,0.1931 -0.4086,0.4162 l -0.1294,2.8048 c -0.008,0.4809 -0.0664,0.9887 0.0688,1.508 0.1164,0.4773 0.5701,0.8529 1.0128,0.953 0.4343,0.0982 0.8687,0.0445 1.3031,-0.0418 1.147,-0.3713 2.2235,-0.9586 2.811,-1.1077 0.2497,-0.0634 0.4008,-0.3172 0.3374,-0.567 -0.0528,-0.2082 -0.2411,-0.3535 -0.4559,-0.3518 -0.8933,0.007 -2.0259,0.4865 -2.9418,0.6322 l -0.8382,0.1377 -0.0654,-0.0187 -0.1044,-1.1521 z m 18.1115,-44.2442 c -0.0109,0.2467 0.1802,0.4555 0.4268,0.4664 0.2374,0.0105 0.4416,-0.1665 0.4647,-0.403 0.2291,-2.3388 -0.134,-4.8654 -0.5067,-7.2674 -0.509,-2.8449 -1.1283,-5.254 -1.9011,-7.9303 -0.5257,-1.7768 -1.0054,-3.2065 -1.6021,-4.8006 -0.7199,-1.9262 -1.4971,-4.3294 -2.372,-6.2831 -0.9817,-2.1841 -2.2697,-4.0802 -3.5732,-5.6233 -0.1953,-0.2311 -0.5409,-0.2602 -0.772,-0.0649 -0.2288,0.1932 -0.26,0.5344 -0.07,0.766 1.226,1.4939 2.4331,3.3221 3.3369,5.3983 0.8205,1.8779 1.5782,4.269 2.2921,6.2342 0.5716,1.5758 1.022,2.9744 1.5233,4.7287 0.7775,2.6549 1.3931,5.0072 1.9006,7.784 0.4906,2.3736 0.9501,4.7956 0.8527,6.995 m -10.6697,-28.302 c -0.063,0.259 0.0959,0.52 0.3549,0.583 0.2331,0.0567 0.4724,-0.0664 0.5619,-0.289 0.3919,-0.975 0.4326,-2.1127 0.75,-3.0042 0.1586,-0.4348 0.3259,-0.6661 0.3452,-0.6731 l 0.0253,0.0232 0.3755,0.1498 1.4692,0.7238 c 0.0794,0.0369 0.1641,0.0613 0.251,0.0725 0.3851,0.0493 0.86,0.0894 1.2084,-0.2606 0.2155,-0.2166 0.2146,-0.5668 -0.002,-0.7822 -0.0441,-0.044 -0.0954,-0.0801 -0.1515,-0.107 l -0.3527,-0.3131 c -0.0631,-0.0608 -0.1351,-0.1116 -0.2136,-0.1506 l -1.4705,-0.766 c -0.5683,-0.1963 -1.1959,-0.3556 -1.7995,-0.006 -0.7614,0.4234 -0.8746,1.1807 -0.9902,1.7182 -0.2593,1.1635 -0.1678,2.2842 -0.3615,3.0812"
+       style="fill:#000000 icc-color(sRGB-IEC61966-2, 0.1, 0, 0, 0);fill-opacity:1;fill-rule:nonzero;stroke:none"
+       transform="matrix(1.3333333,0,0,-1.3333333,-190.82168,977.86302)"
+       clip-path="url(#clipPath11)" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:11.3835px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.284586"
+       x="116.81177"
+       y="41.43552"
+       id="fov"
+       transform="scale(1.0487529,0.95351345)"><tspan
+         id="tspan11"
+         x="116.81177"
+         y="41.43552"
+         sodipodi:role="line"
+         style="stroke-width:0.284586">FOV</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:11.3835px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.284586"
+       x="-0.56170899"
+       y="76.610405"
+       id="text-max"
+       transform="matrix(0.74781925,-0.73528839,0.66851531,0.67990822,0,0)"><tspan
+         id="tspan11-5"
+         x="-0.56170899"
+         y="76.610405"
+         sodipodi:role="line"
+         style="stroke-width:0.284586">Max</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:11.3835px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.284586"
+       x="45.636292"
+       y="82.401573"
+       id="text-neutral"
+       transform="matrix(1.0267042,-0.21391842,0.19449204,0.93346708,0,0)"><tspan
+         id="tspan11-5-6"
+         x="45.636292"
+         y="82.401573"
+         sodipodi:role="line"
+         style="stroke-width:0.284586">Neutral</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:11.3835px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.284586"
+       x="96.452866"
+       y="59.055267"
+       id="text-min"
+       transform="matrix(0.90089995,0.5369003,-0.48814326,0.81908733,0,0)"><tspan
+         id="tspan11-5-7"
+         x="96.452866"
+         y="59.055267"
+         sodipodi:role="line"
+         style="stroke-width:0.284586">Min</tspan></text>
+  </g>
+</svg>
diff --git a/core/frontend/src/components/vehiclesetup/Configure.vue b/core/frontend/src/components/vehiclesetup/Configure.vue
index 8530e73139..8adcb13244 100644
--- a/core/frontend/src/components/vehiclesetup/Configure.vue
+++ b/core/frontend/src/components/vehiclesetup/Configure.vue
@@ -39,6 +39,7 @@ import autopilot from '@/store/autopilot_manager'
 
 import SpinningLogo from '../common/SpinningLogo.vue'
 import ArdupilotAccelerometerSetup from './configuration/accelerometer/ArdupilotAccelerometerSetup.vue'
+import Camera from './configuration/camera.vue'
 import ArdupilotMavlinkCompassSetup from './configuration/compass/ArdupilotMavlinkCompassSetup.vue'
 import FailsafesConfigration from './configuration/failsafes/Failsafes.vue'
 import LightsConfigration from './configuration/lights.vue'
@@ -74,6 +75,7 @@ export default Vue.extend({
     GyroCalib,
     BaroCalib,
     FailsafesConfigration,
+    Camera,
   },
   data() {
     return {
@@ -90,6 +92,7 @@ export default Vue.extend({
           filter: () => autopilot.vehicle_type === 'Submarine',
         },
         { title: 'Failsafes', value: 'failsafes', component: FailsafesConfigration },
+        { title: 'Camera Gimbal', value: 'camera', component: Camera },
       ] as Item[],
     }
   },
diff --git a/core/frontend/src/components/vehiclesetup/configuration/camera.vue b/core/frontend/src/components/vehiclesetup/configuration/camera.vue
new file mode 100644
index 0000000000..4f50118ae7
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/camera.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="main-container">
+    <v-card style="margin: auto">
+      <v-card-title>
+        Camera Gimbal Configuration
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col>
+            <InlineParameterEditor
+              v-if="type_param"
+              :param="type_param"
+              auto-set
+              auto-refresh-params
+              label="Gimbal Type (None for no stabilization, 'Servo' for stabilized servo mount)"
+            />
+            <p v-else>
+              Camera mount setup is not supported on this Firmware (MNT1_TYPE param not found).
+              please update to a newer version.
+            </p>
+            <v-select
+              v-if="is_servo_type"
+              v-model="mnt1_pitch_new_param"
+              :items="recommended_params"
+              :item-text="friendlyName"
+              :item-value="'name'"
+              label="Mount 1 Pitch Servo"
+            />
+            <p v-else-if="type_param">
+              Mount is disabled. Enable it by setting the 'Gimbal Type' to 'Servo'
+            </p>
+
+            <parameter-switch
+              v-if="reverse_pitch_servo"
+              :parameter="reverse_pitch_servo"
+              label="Reverse servo direction"
+            />
+
+            <ThemedSVG v-if="mount_enabled" :src="gimbal_img" />
+          </v-col>
+        </v-row>
+        <v-col v-if="pitch_neutral_angle">
+          Neutral Pitch angle. This is the angle the camera goes to when you center it.
+          <InlineParameterEditor
+            class="mt-5"
+            :param="pitch_neutral_angle"
+            auto-set
+            label="Neutral Pitch angle."
+          />
+          <v-spacer />
+        </v-col>
+        <v-col v-if="mount_enabled" style="max-width:500px;">
+          These are the PWM values at which the pitch servo reaches its physical limits.
+          First adjust the min/max PWM values to match the servo's physical limits.
+          Then adjust the min/max angle values so they reflect the actual angles the camera reaches.
+
+          <v-row class="mt-4">
+            <v-col>
+              <InlineParameterEditor
+                v-if="pitch_servo_pwm_max_param"
+                :param="pitch_servo_pwm_max_param"
+                auto-set
+                label="Max PWM"
+              />
+            </v-col>
+            <v-col>
+              <InlineParameterEditor
+                v-if="pitch_max_param && is_servo_type"
+                :param="pitch_max_param"
+                auto-set
+                label="Max Angle"
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <InlineParameterEditor
+                v-if="pitch_servo_pwm_min_param"
+                :param="pitch_servo_pwm_min_param"
+                auto-set
+                label="Min PWM"
+              />
+            </v-col>
+            <v-col>
+              <InlineParameterEditor
+                v-if="pitch_min_param && is_servo_type"
+                :param="pitch_min_param"
+                auto-set
+                label="Min Angle"
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-alert
+              v-tooltip="'How much the PWM value changes per degree. use this to verify against your servo specs.'
+                + ' One that reaches +-45º with 1100-1900 PWM, has 8.88us per degree'"
+              dense
+              text
+              colored-border
+            >
+              PWM/degree: {{ pwm_per_deg.toFixed(2) }} <v-icon>mdi-information</v-icon>
+            </v-alert>
+          </v-row>
+        </v-col>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import * as gimbal_image from '@/assets/img/configuration/camera/gimbal-pitch.svg'
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter, { printParam } from '@/types/autopilot/parameter'
+
+export default {
+  name: 'CameraConfigration',
+  data() {
+    return {
+      mnt1_pitch_new_param: undefined as (Parameter | undefined),
+    }
+  },
+  computed: {
+    recommended_params(): Parameter[] {
+      // return parameters in servo_params that are on channel 9 and higher
+      return this.servo_params.filter((param) => {
+        const servoNumber = parseInt(param.name.replace('SERVO', '').split('_')[0], 10)
+        return servoNumber >= 9
+      })
+    },
+    type_param(): Parameter | undefined {
+      return autopilot_data.parameters.find((p) => p.name === 'MNT1_TYPE')
+    },
+    mount_enabled(): boolean {
+      return this.is_servo_type
+    },
+    is_servo_type(): boolean {
+      return this.type_param?.value === 1
+    },
+    pitch_max_param(): Parameter | undefined {
+      return autopilot_data.parameters.find((p) => p.name === 'MNT1_PITCH_MAX')
+    },
+    pitch_min_param(): Parameter | undefined {
+      return autopilot_data.parameters.find((p) => p.name === 'MNT1_PITCH_MIN')
+    },
+    pitch_neutral_angle(): Parameter | undefined {
+      return autopilot_data.parameters.find((p) => p.name === 'MNT1_NEUTRAL_Y')
+    },
+    servo_params(): Parameter[] {
+      return autopilot_data.parameterRegex('SERVO[0-9]+_FUNCTION')
+    },
+    desired_function(): number {
+      const tilt_function = 7
+      const rcin8_function = 58
+      return this.type_param?.value === 1 ? tilt_function : rcin8_function
+    },
+    current_pitch_servo(): Parameter | undefined {
+      return this.servo_params.find((p) => p.value === this.desired_function)
+    },
+    reverse_pitch_servo(): Parameter | undefined {
+      return autopilot_data.parameter(this.current_pitch_servo?.name.replace('FUNCTION', 'REVERSED') ?? '')
+    },
+    pitch_servo_pwm_max_param(): Parameter | undefined {
+      const servo_number = this.current_pitch_servo?.name.match(/SERVO(\d+)_/)?.[1]
+      return autopilot_data.parameters.find((p) => p.name === `SERVO${servo_number}_MAX`)
+    },
+    pitch_servo_pwm_min_param(): Parameter | undefined {
+      const servo_number = this.current_pitch_servo?.name.match(/SERVO(\d+)_/)?.[1]
+      return autopilot_data.parameters.find((p) => p.name === `SERVO${servo_number}_MIN`)
+    },
+    gimbal_img(): string {
+      return gimbal_image.default
+    },
+    pwm_per_deg(): number {
+      if (this.pitch_max_param && this.pitch_min_param
+      && this.pitch_servo_pwm_max_param && this.pitch_servo_pwm_min_param) {
+        const pwm_range = this.pitch_servo_pwm_max_param.value - this.pitch_servo_pwm_min_param.value
+        const angle_range = this.pitch_max_param.value - this.pitch_min_param.value
+        return pwm_range / angle_range
+      }
+      return 0
+    },
+  },
+  watch: {
+    mnt1_pitch_new_param(new_value: string | undefined) {
+      if (new_value) {
+        if (this.current_pitch_servo?.name === new_value) {
+          return
+        }
+        mavlink2rest.setParam(new_value, this.desired_function, autopilot_data.system_id)
+      }
+    },
+    current_pitch_servo(new_value: Parameter | undefined) {
+      if (new_value !== this.mnt1_pitch_new_param) {
+        this.mnt1_pitch_new_param = new_value
+      }
+    },
+
+  },
+  mounted() {
+    this.mnt1_pitch_new_param = this.current_pitch_servo
+  },
+  methods: {
+    friendlyName(param: Parameter): string {
+      return `${param.name.replace('SERVO', 'Servo ').replace('_FUNCTION', '')} (${printParam(param)})`
+    },
+  },
+}
+</script>
+<style scoped>
+.main-container {
+  display: flex;
+  column-gap: 10px;
+  padding: 10px;
+}
+</style>
+
+<style>
+text {
+  font-size: 12px;
+  fill: var(--) !important;
+  stroke: black;
+  stroke-width: 0.5;
+}
+</style>

From 7e083476e5146295844635ed13373c6828cd2320 Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Fri, 23 Aug 2024 14:11:54 -0300
Subject: [PATCH 3/4] frontend: InlineParameterEditor: improve autocomplete
 component, add auto-refresh prop

---
 .../parameter-editor/InlineParameterEditor.vue       | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue b/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
index da36c83dad..0e9ceec851 100644
--- a/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
+++ b/core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
@@ -20,7 +20,9 @@
       v-else-if="!custom_input && Object.entries(param?.options ?? []).length > 10"
       v-model.number="internal_new_value"
       variant="solo"
+      :loading="waiting_for_param_update"
       :items="as_select_items"
+      :label="label"
     />
     <v-select
       v-else-if="!custom_input && param?.options"
@@ -89,6 +91,10 @@ export default Vue.extend({
       type: String,
       default: '',
     },
+    autoRefreshParams: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -140,6 +146,9 @@ export default Vue.extend({
       }
     },
     internal_new_value() {
+      if (this.autoSet) {
+        this.saveEditedParam()
+      }
       this.$emit('change', this.internal_new_value)
     },
     selected_bitflags() {
@@ -240,6 +249,9 @@ export default Vue.extend({
         autopilot_data.setRebootRequired(false)
       }
       mavlink2rest.setParam(this.param.name, value, autopilot_data.system_id, this.param.paramType.type)
+      if (this.autoRefreshParams) {
+        autopilot_data.reset()
+      }
     },
     updateVariables(): void {
       // Select custom input if value is outside of possible options

From 27b0cc1928123f36aa46a5a8719de480b6896dd3 Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Fri, 23 Aug 2024 14:12:47 -0300
Subject: [PATCH 4/4] frontend: ThemedSVG: add css rules for text, too

---
 core/frontend/src/components/utils/themedSVG.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/core/frontend/src/components/utils/themedSVG.vue b/core/frontend/src/components/utils/themedSVG.vue
index 0f059f5b8f..739fa3d844 100644
--- a/core/frontend/src/components/utils/themedSVG.vue
+++ b/core/frontend/src/components/utils/themedSVG.vue
@@ -63,4 +63,12 @@ i.svg-outline-dark path {
 i.svg-outline-light path {
   fill: #002F45;
 }
+
+i.svg-outline-dark text {
+  fill: #D1EAF1 !important;
+}
+
+i.svg-outline-light text {
+  fill: #002F45 !important;
+}
 </style>