static screen setup

src-tauri/tauri.conf.json

@@ -37,9 +37,14 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "title": "Interface",
+        "title": "Camera Screen",
         "width": 800,
         "height": 600
+      },
+      {
+        "label": "StaticScreen",
+        "title": "Over View",
+        "url": "http://localhost:4000/#/1"
       }
     ]
   }

src/components/Navbar.vue

@@ -12,7 +12,15 @@ export default {
     toggleNavbar() {
       this.isNavbarOpen = !this.isNavbarOpen;
     }
-  }
+  },
+  openNewWindow() {
+      // Open a new window with specified URL
+      if (window.tauri) {
+        window.tauri.open('/');
+      } else {
+        console.error('Tauri API is not available.');
+      }
+    }
 };
 </script>
 
@@ -71,8 +79,8 @@ export default {
         <ul style="list-style-type: none; padding-left: 0;">
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
-          <li><a href="#" style="text-decoration: none;">Link</a></li>
-          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
+          <li><a href="#" style="text-decoration: none;" @click="openNewWindow">Link</a></li>
+          <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>

src/router/index.js

@@ -1,14 +1,14 @@
 import { createRouter, createWebHashHistory } from "vue-router"
-import fourCam from "../views/fourCam.vue";
-import Cam1Focus from "../views/Cam1Focus.vue";
+import HomeScreen from "../views/HomeScreen.vue";
+import StaticScreen from "../views/StaticScreen.vue";
 import Cam2Focus from "../views/Cam2Focus.vue";
 import CamFocus from "../views/CamFocus.vue";
 import test from "../views/test.vue";
 
 
 const routes = [
-  { path: '/', component: fourCam },
-  { path: '/1', component: Cam1Focus },
+  { path: '/', component: HomeScreen },
+  { path: '/1', component: StaticScreen },
   { path: '/2', component: Cam2Focus },
   { path: '/CamFocus/:id', component: CamFocus },
   { path: '/test', component: test },

src/views/CamFocus.vue

@@ -9,7 +9,11 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
 
 <template>
     <div class="camera-container">
-        <Camera :cameraID=cameraID />
+        <div class="camera-wrapper">
+            <router-link to="/" class="back">Back</router-link>
+            <Camera :cameraID="cameraID" />
+            <!-- Back button -->
+        </div>
     </div>
 </template>
   
@@ -21,4 +25,19 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
     justify-content: center; /* Center the child element horizontally */
     align-items: center; /* Center the child element vertically */
 }
+.camera-wrapper {
+    position: relative; /* For positioning the button relative to the camera */
+    height: 100%; 
+    width: 100%;
+}
+.back {
+    position: absolute; /* Position the button relative to the container */
+    top: 10px;
+    left: 10px; 
+    padding: 5px 10px;
+    border: none;
+    background-color: lightgray;
+    color: black;
+    cursor: pointer;
+  }
 </style>

src/views/StaticScreen.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="camera-container">
+       this is static screen
+    </div>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+</style>