v4l2camera-ui 0.0.0 → 0.1.4-10-g6402a9c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v4l2camera-ui",
-  "version": "0.0.0",
+  "version": "0.1.4-10-g6402a9c",
   "scripts": {
     "serve": "vite --host=0.0.0.0 preview",
     "build": "vite build --emptyOutDir",
@@ -13,6 +13,7 @@
     "vuetify": "^3.0.0-beta.11"
   },
   "devDependencies": {
+    "@mdi/font": "^7.0.96",
     "@vitejs/plugin-vue": "^3.0.3",
     "vite": "^3.1.0",
     "vite-plugin-vuetify": "^1.0.0-alpha.12",

package/src/App.vue

@@ -3,10 +3,28 @@
     <h1>{{ msg }}</h1>
     <v-divider></v-divider>
     <Video/>
+    <v-container>
+      <v-row>
+        <v-expansion-panels>
+          <v-expansion-panel>
+              <v-expansion-panel-title>Format</v-expansion-panel-title>
+              <v-expansion-panel-text><Format/></v-expansion-panel-text>
+          </v-expansion-panel>
+          <v-expansion-panel>
+              <v-expansion-panel-title>Controls</v-expansion-panel-title>
+              <v-expansion-panel-text><Controls/></v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>  
+      </v-row>
+    </v-container>
     <v-divider></v-divider>
-    <Format/>
-    <v-divider></v-divider>
-    <Controls/>
+    <v-footer>
+      <v-container>
+        <v-row align="center" justify="center">
+              <v-icon>mdi-github</v-icon><a href="https://github.com/mpromonet/v4l2camera">v4l2camera</a>
+        </v-row>
+     </v-container>
+    </v-footer>
   </v-app>
 </template>
 
@@ -25,8 +43,11 @@ export default {
     Video
   },
   mounted() {
-    axios({ method: "GET", url: config.serviceurl + "/api/capabilities" }).then(
-      (response) => this.msg = response.data.card
+    axios.get(config.serviceurl + "/api/capabilities").then(
+      (response) =>  {
+        this.msg = response.data.card
+        document.title = this.msg;
+      } 
     );
   },
   data() {

package/src/components/Controls.vue

@@ -26,6 +26,7 @@
           :max="c.maximum" 
           :step="c.step"
           ticks="always"
+          thumb-label="always"
           :disabled="disabled(c.flags)"
           @update:modelValue="updateValue(c.id,c.value)"
         >

package/src/components/Format.vue

@@ -26,6 +26,7 @@
               :max="format.frameSizes[0].width.max"
               :step="format.frameSizes[0].width.step" 
               color="blue"
+              thumb-label="always"
               @update:modelValue="updateValue(format)"
             >
             <template v-slot:prepend>{{format.frameSizes[0].width.min}}</template>
@@ -37,6 +38,7 @@
               :min="format.frameSizes[0].height.min"
               :max="format.frameSizes[0].height.max"
               color="blue"
+              thumb-label="always"
               :step="format.frameSizes[0].height.step" @change="alert($event)"
               @update:modelValue="updateValue(format)"
             >
@@ -68,7 +70,7 @@
             :min="format.frameSizes[0].intervals[0].fps.min"
             :max="format.frameSizes[0].intervals[0].fps.max"
             color="blue"
-            thumb-label="true"
+            thumb-label="always"
             :step="format.frameSizes[0].intervals[0].fps.step" 
             @update:modelValue="updateValue(format)"
           >
@@ -93,11 +95,11 @@ import config from '../config.js';
 
 export default {
   mounted() {
-    axios({ method: "GET", url: config.serviceurl + "/api/formats" }).then(
+    axios.get(config.serviceurl + "/api/formats").then(
       (response) => {
         this.formats = response.data;
 
-        axios({ method: "GET", url: config.serviceurl + "/api/format" }).then(
+        axios.get(config.serviceurl + "/api/format").then(
           (response) => {
             this.format = response.data;
             this.updateFormatFields();
@@ -123,11 +125,11 @@ export default {
 		  );
 	  },
     updateGeometry() {
-      console.log(this.geometry)
-      const sizes = this.geometry.split('x');
-      this.format.width = parseInt(sizes[0]);
-      this.format.height = parseInt(sizes[1]);
-      this.updateValue(this.format);
+        console.log(this.geometry)
+        const sizes = this.geometry.split('x');
+        this.format.width = parseInt(sizes[0]);
+        this.format.height = parseInt(sizes[1]);
+        this.updateValue(this.format);
 	  },
     updateFormatFields() {
         this.geometry = `${this.format.width}x${this.format.height}`;
@@ -141,7 +143,7 @@ export default {
         return formats.sort((a,b) => a.width*a.height - b.width*b.height).map(item => `${item.width}x${item.height}`);
     },
     getFps(formats) {
-      return formats.filter((fmt) => fmt.width + 'x' + fmt.height == this.geometry)[0].intervals.map(f => f.fps);
+        return formats.filter((fmt) => fmt.width + 'x' + fmt.height == this.geometry)[0].intervals.map(f => f.fps);
     }
   }
 };

package/src/components/Video.vue

@@ -37,10 +37,10 @@ export default {
     };
   },
   mounted() {
-    axios({ method: "GET", url: config.serviceurl + "/api/rtspinfo" }).then(
+    axios.get(config.serviceurl + "/api/rtspinfo").then(
       (response) => this.rtspinfo = response.data
     );
-    axios({ method: "GET", url: config.serviceurl + "/api/isCapturing" }).then(
+    axios.get(config.serviceurl + "/api/isCapturing").then(
       (response) => this.visibility = response.data
     );
   },

package/src/main.js

@@ -2,6 +2,7 @@ import 'vuetify/styles'
 import { createApp } from 'vue'
 import { createVuetify } from 'vuetify'
 import App from './App.vue'
+import '@mdi/font/css/materialdesignicons.css'
 
 const vuetify = createVuetify();