ping-viewer-next-frontend: Add Ping360 widget

Author: RaulTrombin

ping-viewer-next-frontend/src/components/views/TryComponentView.vue

@@ -21,10 +21,10 @@
 import { ref } from 'vue'
 import DynamicForm from '../widgets/DynamicForm.vue'
 import DynamicFormGenerator from '../widgets/DynamicFormGenerator.vue'
-import Sonar360 from '../widgets/Sonar360.vue'
+import Ping360Loader from '../widgets/Ping360Loader.vue'
 import WebsocketClient from '../widgets/WebsocketClient.vue'
 import DevicesCardboard from '../widgets/DevicesCardboard.vue'
-import Sonar360Menu from '../widgets/Sonar360Menu.vue'
+import Sonar360Menu from '../widgets/Ping360Menu.vue'
 
 const selectedComponent = ref('WebsocketClient')
 const isCollapsed = ref(false)
@@ -34,7 +34,7 @@ const components = {
   DevicesCardboard,
   DynamicFormGenerator,
   DynamicForm,
-  Sonar360,
+  Ping360Loader,
   Sonar360Menu
 }
 

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="w-full h-full">
+    <div class="relative w-full pb-[100%]">
+      <div class="absolute inset-0">
+        <template v-if="useMask">
+          <SonarDisplayWrapper
+            :angle="currentMeasurement?.angle ?? 0"
+            :lineColor="lineColor"
+            :lineWidth="lineWidth"
+            :maxDistance="maxDistance"
+            :numMarkers="numMarkers"
+            :showRadiusLines="showRadiusLines"
+            :showMarkers="showMarkers"
+            :radiusLineColor="radiusLineColor"
+            :markerColor="markerColor"
+            :radiusLineWidth="radiusLineWidth"
+          >
+            <Sonar360
+              :measurement="currentMeasurement"
+              :numLines="400"
+              :lineLength="1200"
+            />
+          </SonarDisplayWrapper>
+        </template>
+        <template v-else>
+          <Sonar360
+            :measurement="currentMeasurement"
+            :numLines="400"
+            :lineLength="1200"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import SonarDisplayWrapper from './sonar360/Sonar360Mask.vue';
+import Sonar360 from './sonar360/Sonar360Shader.vue';
+
+interface SonarMeasurement {
+  angle: number;
+  data: Uint8Array;
+}
+
+const props = withDefaults(defineProps<{
+  measurement: SonarMeasurement | null;
+  useMask?: boolean;
+  lineColor?: string;
+  lineWidth?: number;
+  maxDistance?: number;
+  numMarkers?: number;
+  showRadiusLines?: boolean;
+  showMarkers?: boolean;
+  radiusLineColor?: string;
+  markerColor?: string;
+  radiusLineWidth?: number;
+}>(), {
+  measurement: null,
+  useMask: true,
+  lineColor: 'red',
+  lineWidth: 0.5,
+  maxDistance: 300,
+  numMarkers: 5,
+  showRadiusLines: true,
+  showMarkers: true,
+  radiusLineColor: 'rgba(255,255,255,0.3)',
+  markerColor: 'white',
+  radiusLineWidth: 0.5
+});
+
+const currentMeasurement = ref<SonarMeasurement | null>(null);
+
+watch(() => props.measurement, (newMeasurement) => {
+  if (newMeasurement) {
+    currentMeasurement.value = newMeasurement;
+  }
+});
+</script>

ping-viewer-next-frontend/src/components/widgets/Ping360Loader.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex bg-gray-100 p-6">
+    <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+      <div class="bg-gray-800 text-white py-4 px-6">
+        <h1 class="text-2xl font-bold">Ping Viewer Next - Sonar Display</h1>
+      </div>
+
+      <div class="p-6">
+        <h2 class="text-xl font-semibold mb-4">WebSocket Connection</h2>
+
+        <div class="flex items-center mb-6">
+          <input v-model="websocketUrl" placeholder="Enter WebSocket URL"
+            class="text-black flex-grow mr-2 p-2 border border-gray-300 rounded" />
+          <button @click="toggleConnection"
+            class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
+            {{ isConnected ? 'Disconnect' : 'Connect' }}
+          </button>
+        </div>
+
+        <h2 class="text-xl font-semibold mb-4">Sonar Display</h2>
+
+        <div class="p-4 rounded">
+          <Ping360
+            :measurement="currentMeasurement"
+            :maxDistance="300"
+            :showMarkers="true"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Ping360 from "./Ping360.vue";
+
+interface SonarMeasurement {
+  angle: number;
+  data: Uint8Array;
+}
+
+const websocketUrl = ref('ws://raulsyellowsubmarine2.duckdns.org:9997/ws?device_number=00000000-0000-0000-6113-f5df77d4fbd6');
+const socket = ref<WebSocket | null>(null);
+const isConnected = ref(false);
+const currentMeasurement = ref<SonarMeasurement | null>(null);
+
+const toggleConnection = () => {
+  if (isConnected.value) {
+    disconnectWebSocket();
+  } else {
+    connectWebSocket();
+  }
+};
+
+const connectWebSocket = () => {
+  if (socket.value) {
+    socket.value.close();
+  }
+
+  socket.value = new WebSocket(websocketUrl.value);
+
+  socket.value.addEventListener('open', () => {
+    console.log('WebSocket connected.');
+    isConnected.value = true;
+  });
+
+  socket.value.addEventListener('close', () => {
+    console.log('WebSocket closed.');
+    isConnected.value = false;
+  });
+
+  socket.value.addEventListener('error', (error) => {
+    console.error('WebSocket error:', error);
+    isConnected.value = false;
+  });
+
+  socket.value.addEventListener('message', (event) => {
+    const message = JSON.parse(event.data);
+    const deviceData = message.DeviceMessage.PingMessage.Ping360.DeviceData;
+    currentMeasurement.value = {
+      angle: deviceData.angle,
+      data: new Uint8Array(deviceData.data)
+    };
+  });
+};
+
+const disconnectWebSocket = () => {
+  if (socket.value) {
+    socket.value.close();
+  }
+};
+</script>