fix non-gimbling camera azimuth

correct pan to azimuth

example/imagery/plugin.js

@@ -275,7 +275,7 @@ function pointForTimestamp(timestamp, name, imageSamples, delay) {
         local: Math.floor(timestamp / delay) * delay,
         url,
         sunOrientation: getCompassValues(0, 360),
-        cameraPan: getCompassValues(0, 360),
+        cameraAzimuth: getCompassValues(0, 360),
         heading: getCompassValues(0, 360),
         transformations: navCamTransformations,
         imageDownloadName

src/plugins/imagery/components/Compass/Compass.vue

@@ -26,14 +26,12 @@
     :style="`width: 100%; height: 100%`"
 >
     <CompassHUD
-        v-if="showCompassHUD"
         :sun-heading="sunHeading"
         :camera-angle-of-view="cameraAngleOfView"
-        :camera-pan="cameraPan"
+        :camera-azimuth="cameraAzimuth"
     />
     <CompassRose
-        v-if="showCompassRose"
+        :camera-azimuth="cameraAzimuth"
-        :camera-pan="cameraPan"
         :heading="heading"
         :sized-image-dimensions="sizedImageDimensions"
         :sun-heading="sunHeading"
@@ -62,12 +60,6 @@ export default {
         }
     },
     computed: {
-        showCompassHUD() {
-            return this.hasCameraPan && this.cameraAngleOfView > 0;
-        },
-        showCompassRose() {
-            return (this.hasCameraPan || this.hasHeading) && this.cameraAngleOfView > 0;
-        },
         // horizontal rotation from north in degrees
         heading() {
             return this.image.heading;
@@ -80,11 +72,11 @@ export default {
             return this.image.sunOrientation;
         },
         // horizontal rotation from north in degrees
-        cameraPan() {
+        cameraAzimuth() {
             return this.image.cameraPan;
         },
-        hasCameraPan() {
+        hasCameraAzimuth() {
-            return this.cameraPan !== undefined;
+            return this.cameraAzimuth !== undefined;
         },
         cameraAngleOfView() {
             return this.transformations?.cameraAngleOfView;

src/plugins/imagery/components/Compass/CompassHUD.vue

@@ -102,7 +102,7 @@ export default {
             type: Number,
             default: undefined
         },
-        cameraPan: {
+        cameraAzimuth: {
             type: Number,
             required: true
         }
@@ -132,8 +132,8 @@ export default {
         },
         visibleRange() {
             return [
-                rotate(this.cameraPan, -this.cameraAngleOfView / 2),
+                rotate(this.cameraAzimuth, -this.cameraAngleOfView / 2),
-                rotate(this.cameraPan, this.cameraAngleOfView / 2)
+                rotate(this.cameraAzimuth, this.cameraAngleOfView / 2)
             ];
         }
     }

src/plugins/imagery/components/Compass/CompassRose.vue

@@ -75,7 +75,6 @@
                     :style="sunHeadingStyle"
                 />
 
-                <!-- Camera FOV -->
                 <mask
                     id="mask2"
                     class="c-cr__cam-fov-l-mask"
@@ -117,10 +116,10 @@
                         class="cr-vrover"
                         :style="camAngleAndPositionStyle"
                     >
-                        <!-- Equipment body. Rotates relative to the camera pan value for cams that gimbal. -->
+                        <!-- Equipment body. Rotates relative to the camera pan value for cameras that gimble. -->
                         <path
                             class="cr-vrover__body"
-                            :style="camGimbalAngleStyle"
+                            :style="gimbledCameraPanStyle"
                             x
                             fill-rule="evenodd"
                             clip-rule="evenodd"
@@ -128,6 +127,7 @@
                         />
                     </g>
 
+                    <!-- Camera FOV -->
                     <g
                         class="c-cr__cam-fov"
                     >
@@ -160,7 +160,7 @@
             <!-- NSEW and ticks -->
             <g
                 class="c-cr__nsew"
-                :style="compassRoseStyle"
+                :style="compassDialStyle"
             >
                 <g class="c-cr__ticks-major">
                     <path d="M50 3L43 10H57L50 3Z" />
@@ -270,7 +270,7 @@ export default {
             type: Number,
             default: undefined
         },
-        cameraPan: {
+        cameraAzimuth: {
             type: Number,
             default: undefined
         },
@@ -289,8 +289,14 @@ export default {
         };
     },
     computed: {
-        cameraHeading() {
+        hasGimble() {
-            return this.cameraPan ?? this.heading;
+            return this.cameraAzimuth !== undefined;
+        },
+        // compass ordinal orientation of camera
+        normalizedCameraAzimuth() {
+            return this.hasGimble
+                ? rotate(this.cameraAzimuth)
+                : rotate(this.heading, -this.transformations?.rotation ?? 0);
         },
         cameraAngleOfView() {
             return this.transformations?.cameraAngleOfView;
@@ -303,18 +309,22 @@ export default {
 
             return { transform: `translate(${translateX}%, ${translateY}%) rotate(${rotation}deg) scale(${scale})` };
         },
-        camGimbalAngleStyle() {
+        gimbledCameraPanStyle() {
-            const rotation = rotate(this.heading);
+            if (!this.hasGimble) {
+                return;
+            }
+
+            const gimbledCameraPan = rotate(this.normalizedCameraAzimuth, -this.heading);
 
             return {
-                transform: `rotate(${ rotation }deg)`
+                transform: `rotate(${ -gimbledCameraPan }deg)`
             };
         },
-        compassRoseStyle() {
+        compassDialStyle() {
             return { transform: `rotate(${ this.north }deg)` };
         },
         north() {
-            return this.lockCompass ? rotate(-this.cameraHeading) : 0;
+            return this.lockCompass ? rotate(-this.normalizedCameraAzimuth) : 0;
         },
         cardinalTextRotateN() {
             return { transform: `translateY(-27%) rotate(${ -this.north }deg)` };
@@ -342,7 +352,7 @@ export default {
             };
         },
         cameraHeadingStyle() {
-            const rotation = rotate(this.north, this.cameraHeading);
+            const rotation = rotate(this.north, this.normalizedCameraAzimuth);
 
             return {
                 transform: `rotate(${ rotation }deg)`

src/plugins/imagery/components/Compass/pluginSpec.js

@@ -35,7 +35,7 @@ describe("The Compass component", () => {
             roll: 90,
             pitch: 90,
             cameraTilt: 100,
-            cameraPan: 90,
+            cameraAzimuth: 90,
             sunAngle: 30
         };
         let propsData = {

src/plugins/imagery/components/ImageryView.vue

@@ -431,8 +431,9 @@ export default {
                 && this.zoomFactor === 1
                 && this.imagePanned !== true;
             const hasCameraConfigurations = this.focusedImage?.transformations !== undefined;
+            const hasHeading = this.focusedImage?.heading !== undefined;
 
-            return display && hasCameraConfigurations;
+            return display && hasCameraConfigurations && hasHeading;
         },
         isSpacecraftPositionFresh() {
             let isFresh = undefined;