frontend: widgets: sonar360: Add heads-down option

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360.vue

@@ -31,6 +31,12 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { getColorFromPalette } from '../SonarColorOptions.vue';
 import Sonar360Mask from './Sonar360Mask.vue';
 import Sonar360Shader from './Sonar360Shader.vue';
+import { useHeadDown } from './useHeadDown';
+
+// When headDown is on we mirror the whole sonar container horizontally.
+// `Sonar360Mask` applies a second `scaleX(-1)` to its depth markers so their
+// text stays readable. Both flips must stay in sync.
+const headDown = useHeadDown();
 
 const props = defineProps({
   measurement: {
@@ -157,12 +163,16 @@ const sectorBoundingBox = computed(() => {
   };
 });
 
+const buildTransform = (...parts) => parts.filter(Boolean).join(' ');
+
 const containerStyle = computed(() => {
+  const flip = headDown.value ? 'scaleX(-1)' : '';
+
   if (isHalfCircleView.value) {
     return {
       width: `${size.value}px`,
       height: `${size.value}px`,
-      transform: 'translate(-50%, 48%)',
+      transform: buildTransform('translate(-50%, 48%)', flip),
       position: 'fixed',
       left: '50%',
       bottom: '0',
@@ -180,8 +190,10 @@ const containerStyle = computed(() => {
     height: `${size.value}px`,
   };
 
-  if (offsetX !== 0 || offsetY !== 0) {
-    style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+  const translate = offsetX !== 0 || offsetY !== 0 ? `translate(${offsetX}px, ${offsetY}px)` : '';
+  const transform = buildTransform(translate, flip);
+  if (transform) {
+    style.transform = transform;
   }
 
   return style;

ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Settings.vue

@@ -74,6 +74,20 @@
           </div>
         </div>
 
+        <v-tooltip text="Used when the sonar is mounted upside down" location="left">
+          <template v-slot:activator="{ props }">
+            <div v-bind="props" style="display: inline-block">
+              <v-checkbox
+                v-model="sharedHeadDown"
+                label="Head-down"
+                hide-details
+                density="compact"
+                class="mt-2 mb-2"
+              />
+            </div>
+          </template>
+        </v-tooltip>
+
         <v-divider class="mb-4"></v-divider>
 
         <v-btn block variant="tonal" @click="showAdvanced = !showAdvanced" class="mb-4">
@@ -196,6 +210,7 @@
 import { useDebounceFn } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 import { useUnits } from '../../../composables/useUnits';
+import { useHeadDown } from './useHeadDown';
 
 const { distanceLabel, speedUnit } = useUnits();
 
@@ -242,6 +257,7 @@ const showAdvanced = ref(false);
 const autoMode = ref(true);
 const range = ref(10);
 const centerAngle = ref(180);
+const sharedHeadDown = useHeadDown();
 const width = ref(180);
 const angleRange = ref([0, 360]);
 

ping-viewer-next-frontend/src/components/widgets/sonar360/Sonar360Mask.vue

@@ -37,29 +37,38 @@
 				:y2="50 + maxRadius * Math.sin(adjustedAngleRad)"
 				:stroke="`url(#${sweepGradientId})`" stroke-width="2"
 				vector-effect="non-scaling-stroke" />
+
 		</svg>
 
-		<template v-if="showMarkers">
+		<!--
+			Intentional second scaleX(-1): the outer container in Ping360.vue is already
+			flipped when headDown is true. Re-flipping the markers here keeps their text
+			readable while the sonar itself remains mirrored.
+		-->
+		<div v-if="showMarkers" class="absolute inset-0" :style="headDown ? { transform: 'scaleX(-1)' } : {}">
 			<div v-for="line in radiusLines" :key="line.distance"
 				class="absolute text-4xl font-medium text-white depth-label transform -translate-x-1/2 -translate-y-1/2" :style="{
 					left: `calc(${getMarkerPositionPercent(line.radius).x}% + 50px)`,
 					top: `${getMarkerPositionPercent(line.radius).y}%`,
 				}">
 				{{ depthValue(line.distance).toFixed(1) }}{{ depthUnit }}
 			</div>
-		</template>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useUnits } from '../../../composables/useUnits';
+import { useHeadDown } from './useHeadDown';
 
 const instanceId = ref(Math.random().toString(36).slice(2, 8));
 const sweepGradientId = computed(() => `sweep-grad-${instanceId.value}`);
 
 const { depthValue, depthUnit } = useUnits();
 
+const headDown = useHeadDown();
+
 const props = defineProps<{
   angle: number;
   lineColor: string;

ping-viewer-next-frontend/src/components/widgets/sonar360/useHeadDown.ts

@@ -0,0 +1,10 @@
+import { useLocalStorage } from '@vueuse/core';
+
+// Shared across all Ping360 widgets; persisted so the user's view preference
+// survives reloads. Currently a single global flag; if per-device scoping
+// becomes necessary, key this by deviceId via a Pinia store instead.
+const headDown = useLocalStorage('sonar360.headDown', false);
+
+export function useHeadDown() {
+  return headDown;
+}