4cam layout WIP

package.json

@@ -1,12 +1,13 @@
 {
   "name": "Interface",
-  "private": true,
   "version": "0.0.0",
-  "type": "module",
+  "private": true,
   "scripts": {
-    "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
+    "dev": "vite",
     "preview": "vite preview",
+    "styleguide": "vue-cli-service styleguidist --config styleguide.config.cjs",
+    "styleguide:build": "vue-cli-service styleguidist:build",
     "tauri": "tauri"
   },
   "dependencies": {
@@ -19,6 +20,14 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "typescript": "^4.9.5",
     "vite": "^4.2.1",
-    "vue-tsc": "^1.0.11"
+    "vue-cli-plugin-styleguidist": "~4.72.4",
-  }
+    "vue-styleguidist": "^4.72.4",
+    "webpack": "^5.90.1"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "type": "module"
 }

src-tauri/tauri.conf.json

@@ -21,7 +21,7 @@
     "bundle": {
       "active": true,
       "targets": "all",
-      "identifier": "com.tauri.build",
+      "identifier": "com.gcs-user-interface.app",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",

src/App.vue

@@ -3,15 +3,29 @@
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
+import Camera from "./components/Camera.vue";
 </script>
 
 <template>
   <div>
     <Navbar/>
   </div>
-  <div class="container">
+  <div class="grid">
+    <div>
+      <Camera/>
+    </div>
+    <div>
+      <Camera/>
+    </div>
+    <div>
+      <Camera/>
+    </div>
+    <div>
+      <Camera/>
+    </div>
+  </div>
+  <!-- <div class="container">
     <h1>Welcome to Tauri!</h1>
-
     <div class="row">
       <a href="https://vitejs.dev" target="_blank">
         <img src="/vite.svg" class="logo vite" alt="Vite logo" />
@@ -41,8 +55,7 @@ import Navbar from "./components/Navbar.vue";
       >
     </p>
 
-    <Greet />
+  </div> -->
-  </div>
 </template>
 
 <style scoped>
@@ -53,4 +66,11 @@ import Navbar from "./components/Navbar.vue";
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #249b73);
 }
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns */
+  grid-template-rows: repeat(2, 46vh); /* 2 rows */
+  max-width: 100vw; /* Limit width to viewport width */
+  max-height: 100vh; /* Limit height to viewport height */
+}
 </style>

src/components/Camera.vue

@@ -0,0 +1,57 @@
+  <script>
+  export default {
+    data() {
+      return {
+        streams: []
+      };
+    },
+    mounted() {
+      this.initWebcams();
+    },
+    methods: {
+      async initWebcams() {
+        try {
+          const constraints = { video: true };
+          const stream = await navigator.mediaDevices.getUserMedia(constraints);
+          this.streams.push(stream);
+        } catch (error) {
+          console.error('Error accessing webcam:', error);
+        }
+      }
+    }
+  };
+  </script>
+  <template>
+    <!-- <div class="app">
+        <div class="video-section" v-for="(stream, index) in streams" :key="index">
+          <video ref="videoPlayer" :srcObject="stream" controls></video>
+      </div>
+    </div> -->
+    <div class="box video-section">
+        <video ref="videoPlayer" :srcObject="stream" controls></video>
+    </div>
+  </template>
+  <style scoped>
+  .app {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+  
+  .video-section {
+    width: 100%; /* Adjust according to your layout */
+    height: 100%; /* Adjust according to your layout */
+    box-sizing: border-box;
+    border: 2px solid #ccc; /* Adding a small border */
+  }
+  
+  .video-section video {
+    width: 100%;
+    height: 100%;
+  }
+  .box{
+    border: 2px solid #030303; /* Adding a small border */
+  }
+  </style>
+  

src/components/Greet.vue

@@ -10,12 +10,3 @@ async function greet() {
   greetMsg.value = await invoke("greet", { name: name.value });
 }
 </script>
-
-<template>
-  <form class="row" @submit.prevent="greet">
-    <input id="greet-input" v-model="name" placeholder="Enter a name..." />
-    <button type="submit">Greet</button>
-  </form>
-
-  <p>{{ greetMsg }}</p>
-</template>

styleguide.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+	// set your styleguidist configuration here
+	title: 'Default Style Guide',
+	serverPort: 6061,
+	// components: 'src/components/**/[A-Z]*.vue',
+	// defaultExample: true,
+	// sections: [
+	//   {
+	//     name: 'First Section',
+	//     components: 'src/components/**/[A-Z]*.vue'
+	//   }
+	// ],
+	// webpackConfig: {
+	//   // custom config goes here
+	// },
+	exampleMode: 'expand'
+}