futzing about

freemocap · Sep 5, 2024 · a975ed3 · a975ed3
1 parent c56986c
commit a975ed3
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 105 deletions.
diff --git a/skellycam-ui/app.vue b/skellycam-ui/app.vue
@@ -10,5 +10,11 @@
 
 <script>
 const websocket = useWebSocket()
-websocket.connectWebSocket()
+await websocket.connectWebSocket()
+
+onUnmounted(() => {
+  if (websocket) {
+    websocket.closeWebsocket();
+  }
+});
 </script>
diff --git a/skellycam-ui/components/CameraGridView.vue b/skellycam-ui/components/CameraGridView.vue
@@ -8,23 +8,36 @@
 </template>
 
 
+<script setup>
+const {
+  connectWebSocket,
+  sendMessage,
+  isConnected,
+  latestImages
+} = useWebSocket();
+
 </script>
 
 <style scoped>
 .image-container {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
+  justify-content: center; /* Centers the images */
+  width: 100%; /* Takes full width of the parent */
+  height: 100vh; /* Takes the full viewport height */
+  overflow: auto; /* Adds scroll if content overflows */
 }
 
 .image-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex: 1 1 200px; /* Allows flexibility and ensures a minimum width */
 }
 
 img {
-  max-width: 100px;
-  max-height: 100px;
+  width: 100%; /* Makes the image take full width of the wrapper */
+  height: auto; /* Maintains the aspect ratio */
 }
 </style>
diff --git a/skellycam-ui/composables/useWebSocket.ts b/skellycam-ui/composables/useWebSocket.ts
@@ -1,4 +1,5 @@
-export default (url: string) => {
+const wsUrl = 'ws://localhost:8005/websocket/connect';
+export default (url: string = wsUrl) => {
     const ws = ref<WebSocket | null>(null);
     const isConnected = ref(false);
     const latestImages = ref<Record<string, string | null>>({}); // To hold image URLs
@@ -27,33 +28,6 @@ export default (url: string) => {
                 console.log(`Failed to parse message as json: ${event}`)
             }
 
-            // if (typeof event.data === 'string') {
-            // } else if (event.data instanceof Blob) {
-            //
-            //     try {
-            //         const arrayBuffer = await event.data.arrayBuffer();
-            //         console.log('Received websocketBlob:', arrayBuffer.byteLength);
-            //         const payload = decode(new Uint8Array(arrayBuffer));
-            //         console.log(`received  payload - unpacked to: ${JSON.stringify(payload,null,2)}`)
-            //         if (arrayBuffer.byteLength < 1000) {
-            //             // console.log('Received Blob with size:', arrayBuffer.byteLength);
-            //             // await updateLatestImages(payload);
-            //             // const logMessage = `Updated latestImages with ${Object.keys(payload.jpeg_images).length} cameras`;
-            //             // console.log(logMessage);
-            //         }
-            //     } catch (error) {
-            //         console.error('Error decoding websocket blob:', error);
-            //     }
-            // } else {
-            //     console.log(`Received ${event.type}`)
-            // }
-        }
-        const parseMessage = (data: any) => {
-            // if (data.jpeg_images !== undefined) {
-            //     return new FrontendFramePayload(data)
-            // }
-            return data
-
         }
         ws.value.onclose = () => {
             console.log('WebSocket connection closed');
@@ -65,56 +39,24 @@ export default (url: string) => {
         };
     };
 
-    onUnmounted(() => {
-        if (ws.value) {
-            ws.value.close();
-        }
-    });
+
 
     const sendMessage = (message: string = "hi") => {
         if (ws.value && isConnected.value) {
             ws.value.send(message);
         }
     };
 
+    const closeWebsocket = (async () => {
+        console.log("Closing websocket...")
+        ws.close()
+    })
 
     return {
         connectWebSocket,
+        closeWebsocket,
         sendMessage,
         isConnected,
         latestImages,
     };
 }
-
-
-//
-// const updateLatestImages = async (payload: FrontendImagePayload) => {
-//     const images = payload.jpeg_images || {};
-//     const processedImages: Record<string, string | null> = {};
-//
-//     for (const [cameraId, imageBytes] of Object.entries(images)) {
-//         if (imageBytes) {
-//             try {
-//                 console.log(`Processing image for camera ${cameraId}`);
-//                 const uint8Array = new Uint8Array(imageBytes);
-//                 console.log(`Image byte length for camera ${cameraId}:`, uint8Array.byteLength);
-//                 const blob = new Blob([uint8Array], {type: 'image/jpeg'});
-//                 const url = URL.createObjectURL(blob);
-//                 processedImages[cameraId] = url;
-//
-//                 // Load the image and get its dimensions
-//                 const img = new Image();
-//                 img.onload = () => {
-//                     console.log(`Image dimensions for camera ${cameraId}: width=${img.width}, height=${img.height}`);
-//                 };
-//                 img.src = url;
-//             } catch (error) {
-//                 console.error(`Error processing image for camera ${cameraId}:`, error);
-//                 processedImages[cameraId] = null;
-//             }
-//         } else {
-//             processedImages[cameraId] = null;
-//         }
-//     }
-//     latestImages.value = processedImages;
-// };
diff --git a/skellycam-ui/nuxt.config.ts b/skellycam-ui/nuxt.config.ts
@@ -23,6 +23,10 @@ export default defineNuxtConfig({
         }
     ],
 
+    pinia: {
+        storesDirs: ['./stores/**'],
+    },
+
     tres: {
         devtools: true,
     },

diff --git a/skellycam-ui/pages/api_buttons.vue b/skellycam-ui/pages/api_buttons.vue
@@ -22,54 +22,39 @@
 
 <script setup lang="ts">
 
-const wsUrl = 'ws://localhost:8005/websocket/connect';
 const {
   connectWebSocket,
   sendMessage,
   isConnected,
   latestImages
-} = useWebSocket(wsUrl);
+} = useWebSocket();
 
-const logs = ref<string[]>([]);
-
-const addLog = (message: string) => {
-  console.log(`Adding log: ${message}`)
-  logs.value.unshift(message);
-}
 
 const fetchHello = async () => {
   const response = await fetch('http://localhost:8005/app/healthcheck');
   const data = await response.json();
   console.log(data);
-  addLog(`Fetch Hello: ${JSON.stringify(data)}`);
 }
 const fetchAppState = async () => {
   const response = await fetch('http://localhost:8005/app/state');
   const data = await response.json();
   console.log(data);
-  addLog(`Fetch App State: ${JSON.stringify(data)}`);
 }
 
 const connectToCameras = async () => {
   const response = await fetch('http://localhost:8005/cameras/connect');
   const data = await response.json();
   console.log(data);
-  addLog(`Connect to Cameras: ${JSON.stringify(data)}`);
 }
 const closeCameras = async () => {
   const response = await fetch('http://localhost:8005/cameras/close');
   const data = await response.json();
   console.log(data);
-  addLog(`Close Cameras: ${JSON.stringify(data)}`);
 }
 
 </script>
 
 <style scoped>
-.smol-image {
-  width: 640px;
-  height: auto;
-}
 
 div {
   background-color: #654a7b;
@@ -85,15 +70,6 @@ button {
   font-size: small;
 }
 
-.image-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: center; /* Centers the images */
-  width: 100%; /* Takes full width of the parent */
-  height: 100vh; /* Takes the full viewport height */
-  overflow: auto; /* Adds scroll if content overflows */
-}
 
 .image-wrapper {
   display: flex;

diff --git a/skellycam-ui/pages/camera_status.vue b/skellycam-ui/pages/camera_status.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <h1>Camera Status</h1>
-    <p>Cameras Ready: {{ camerasReady }}</p>
 
     <h2>Available Cameras:</h2>
     <ul>
@@ -13,16 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref} from 'vue';
-
 const camerasStore = useCamerasStore();
-const camerasReady = ref(false);
-const cameraDevices = ref([]);
-
-onMounted(async () => {
-  await camerasStore.initialize();
-  camerasReady.value = camerasStore.camerasReady;
-});
 </script>
 
 

diff --git a/skellycam-ui/stores/cameras.ts b/skellycam-ui/stores/cameras.ts
@@ -5,7 +5,7 @@ const defaultConstraints: MediaStreamConstraints = {
     }
 };
 
-export class CameraDevice {
+class CameraDevice {
     cameraNumber: string;
     deviceInfo: MediaDeviceInfo;
     stream: MediaStream | null = null;