mjepeg images with vuex integeration

chameleon-client/src/components/InputTab.vue

@@ -5,7 +5,6 @@
         <chslider class="spacing" title="Brightness" Xkey="brightness"></chslider>
         <chselect class="spacing" title="Orientation" Xkey="orientation" :list="['Normal','Inverted']"></chselect>
         <chselect class="spacing" title="Resolution" Xkey="resolution"  :list="['Normal','Inverted']"></chselect>
-        <button v-on:click="test">test</button>
         </div>
 </template>
     
@@ -23,9 +22,6 @@ import chselect from './ch-select.vue'
             chselect
         },
         methods: {
-            test(){
-                console.log(this.$store.state)
-            }
         }
     }
 </script>

chameleon-client/src/components/Settings.vue

@@ -1,11 +1,7 @@
 <template>
     <Layout id="main-layout">
         <Content id="main-content">
-            <row type="flex" justify="start" align="middle" :gutter="5" >
-                <Col span="12">
-                    <router-view></router-view>
-                </Col>
-            </row>
+            <router-view></router-view>
         </Content>
     </Layout>
 </template>

chameleon-client/src/components/SystemTab.vue

@@ -47,7 +47,7 @@
             </div>
             <Divider class="divdiv" orientation="left"></Divider>
             <row type="flex" justify="start" align="middle" style="margin-top:20px">
-                 <Button type="primary" size="small" v-on:click="socketSendAll">Save Changes</Button>
+                 <Button type="primary" size="small" v-on:click="socketSendAll">Save Changes and Restart</Button>
             </row>
         </div> 
     </div>

chameleon-client/src/components/Vision.vue

@@ -11,11 +11,13 @@
             </Row>
         </Header>
         <Content id="main-content">
-            <row type="flex" justify="start" align="middle" :gutter="5" >
+            <row type="flex" justify="start" align="top" :gutter="5" >
                 <Col span="12">
                     <router-view></router-view>
-                </Col>
-                    <img src="../assets/logo.png">
+                    </Col>
+                    <Col span="12">
+                    <img :src="steamAdress" style="">
+                    </Col>
                 </Col>
             </row>
         </Content>
@@ -37,8 +39,16 @@
         },
         methods: {
             
-        }
+        },
+        computed: {
+            steamAdress: {
+                get: function(){
+                    return this.$store.state.streamAdress;
+                }
+            }
+        },
     }
 </script>
 <style scoped>
+
 </style>

chameleon-client/src/store.js

@@ -24,14 +24,16 @@ export const store = new Vuex.Store({
         dilate: false,
         //contours
         area:[0,100],
-        ratio:[0,0],
+        ratio:[0,1],
         extent:[0,100],
         //Settings
         teamValue:0,
         connectionType:"DHCP",
         ip:0,
         gateWay:0,
-        hostName:""
+        hostName:"",
+        //live info
+        streamAdress:("http://"+location.hostname + ":1181/?stream")
 
     },
     mutations:{
@@ -56,7 +58,8 @@ export const store = new Vuex.Store({
         connectionType: set('connectionType'),
         ip: set('ip'),
         gateWay : set('gateWay'),
-        hostName : set('hostName')
+        hostName : set('hostName'),
+        streamAdress : set('streamAdress')
     },
     getters:{
         camera: state => state.camera,
@@ -77,7 +80,8 @@ export const store = new Vuex.Store({
         connectionType: state => state.connectionType,
         ip: state => state.ip,
         gateWay: state => state.gateWay,
-        hostName: state => state.hostName
+        hostName: state => state.hostName,
+        streamAdress: state => state.streamAdress
 
     },
 });