fix image location and added lazyload

New client/chameleon-client/src/main.js

@@ -5,7 +5,8 @@ import store from './store'
 import vuetify from './plugins/vuetify';
 import VueNativeSock from 'vue-native-websocket';
 Vue.config.productionTip = false;
-Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
+// Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
+Vue.use(VueNativeSock,'ws://'+location.hostname+':8888/websocket',{format:'JSON'});
 new Vue({
   router,
   store,

New client/chameleon-client/src/router.js

@@ -1,9 +1,10 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Camera from './views/Camera.vue'
-import Settings from './views/Settings.vue'
 Vue.use(Router)
 
+function lazyLoad(view){
+  return() => import(`@/views/${view}.vue`)
+}
 export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
@@ -15,12 +16,12 @@ export default new Router({
     {
       path: '/Vision',
       name: 'Vision',
-      component: Camera
+      component: lazyLoad('Camera')
     },
     {
       path: '/Settings',
       name: 'Settings',
-      component: Settings
+      component: lazyLoad('Settings')
     }
   ]
 })

New client/chameleon-client/src/views/Camera.vue

@@ -62,7 +62,9 @@
                         <v-tab>Normal</v-tab>
                         <v-tab>Threshold</v-tab>
                     </v-tabs>
-                    <img class="videoClass" :src="steamAdress">
+                    <div class="videoClass">
+                        <img :src="steamAdress">
+                    </div>
                     <h5 id="Point">{{point}}</h5>
                 </div>
             </v-col>
@@ -175,9 +177,12 @@ import CVicon from '../components/cv-icon'
         
     }
     .videoClass{
-        display: block;
-        margin-right: auto;
-        margin-left: auto;
+        text-align: center;
+    }
+    .videoClass img{
+        height: auto !important;
+        width: 75%;
+        vertical-align: middle;
     }
     #Point{
         padding-top: 5px;

New client/chameleon-client/src/views/Settings.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-row>
+        <v-row align="center">
             <v-col cols="6" class="colsClass">
                 <v-tabs fixed-tabs background-color="#212121" dark height="50" slider-color="#4baf62" v-model="selectedTab">
                     <v-tab to="">General</v-tab>
@@ -10,8 +10,10 @@
                     <component :is="selectedComponent"></component>
                 </div>
             </v-col>
-            <v-col v-if="selectedTab === 1" class="colsClass">
-                <img class="videoClass" :src="steamAdress">
+            <v-col v-show="selectedTab === 1" class="colsClass">
+                <div class="videoClass">
+                    <img :src="steamAdress">
+                </div>
             </v-col>
       </v-row>
     </div>
@@ -20,11 +22,12 @@
 <script>
 import General from './SettingsViewes/General'
 import Cameras from './SettingsViewes/Cameras'
+
     export default {
         name: 'SettingsTab',
         components:{
             General,
-            Cameras
+            Cameras,
         },
         data() {
             return {
@@ -51,9 +54,12 @@ import Cameras from './SettingsViewes/Cameras'
 
 <style scoped>
     .videoClass{
-        display: block;
-        margin-right: auto;
-        margin-left: auto;
+        text-align: center;
+    }
+    .videoClass img{
+        height: auto !important;
+        width: 75%;
+        vertical-align: middle;
     }
     .colsClass{
         padding: 0 !important;