From ed94dc751fa96b5a21d130aa5b1590b92132a278 Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Wed, 2 Oct 2019 22:07:04 +0300
Subject: [PATCH] finished basic data flow

---
 New client/chameleon-client/src/App.vue       | 24 ++++++
 New client/chameleon-client/src/main.js       |  2 +-
 New client/chameleon-client/src/store.js      | 52 +++++++++++-
 .../chameleon-client/src/views/Camera.vue     | 81 ++++++++++++++-----
 .../chameleon-client/src/views/Settings.vue   |  9 ++-
 .../src/views/SettingsViewes/Cameras.vue      | 40 ++++++++-
 .../src/views/SettingsViewes/General.vue      | 21 +++--
 7 files changed, 191 insertions(+), 38 deletions(-)

diff --git a/New client/chameleon-client/src/App.vue b/New client/chameleon-client/src/App.vue
index f0cdc5a5f..eebd7be24 100644
--- a/New client/chameleon-client/src/App.vue	
+++ b/New client/chameleon-client/src/App.vue	
@@ -29,10 +29,34 @@ export default {
 
   components: {
 
+  },
+  methods:{
+    handleMessage(key,val){
+      switch(key){
+        default:{
+          this.$store.commit(key,value);
+        }
+      }
+    }
   },
   data: () => ({
 
   }),
+  created(){
+    this.$options.sockets.onmessage = (data) =>{
+      try{
+        let message = JSON.parse(data.data);
+        for(let prop in message){
+          if(message.hasOwnProperty(prop)){
+            this.handleMessage(prop,message[prop]);
+          }
+        }
+      }
+      catch{
+        console.error('error: ' + data.data);
+      }      
+    }
+  }
 };
 </script>
 
diff --git a/New client/chameleon-client/src/main.js b/New client/chameleon-client/src/main.js
index 5f86b9150..167b5d192 100644
--- a/New client/chameleon-client/src/main.js	
+++ b/New client/chameleon-client/src/main.js	
@@ -5,7 +5,7 @@ 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'});
 new Vue({
   router,
   store,
diff --git a/New client/chameleon-client/src/store.js b/New client/chameleon-client/src/store.js
index 3c7424edc..19db724d2 100644
--- a/New client/chameleon-client/src/store.js	
+++ b/New client/chameleon-client/src/store.js	
@@ -3,14 +3,60 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
+const set = key => (state,val) =>{
+  state[key] = val
+};
+
 export default new Vuex.Store({
   state: {
-
+    settings:{},
+    pipeline:{
+      Exposure:0,
+      Brightness:0,
+      Orientation:0,
+      Hue:[0,15],
+      Saturation:[0,15],
+      Value:[0,25],
+      Erode:false,
+      Dilate:false,
+      Area:[0,12],
+      Ratio:[0,12],
+      Extent:[0,12],
+      TargetGrouping:0,
+      TargetIntersection:0,
+      SortMode:0
+    },
+    cameraSettings:{},
+    resolutionList:[],
+    port:1181,
+    currentCameraIndex:0,
+    currentPipelineIndex:0,
+    cameraList:[],
+    pipelinelist:[],
+    point:{}
   },
   mutations: {
-
+    settings: set('settings'),
+    pipeline: set('pipeline'),
+    cameraSettings: set('cameraSettings'),
+    resolutionList: set('resolutionList'),
+    port: set('port'),
+    currentCameraIndex: set('currentCameraIndex'),
+    currentPipelineIndex: set('currentPipelineIndex'),
+    cameraList: set('cameraList'),
+    pipelinelist: set('cameraList'),
+    point:set('point')
   },
   actions: {
-
+    settings: state => state.settings,
+    pipeline: state => state.pipeline,
+    cameraSettings: state =>state.cameraSettings,
+    resolutionList: state =>state.resolutionList,
+    port: state =>state.port,
+    currentCameraIndex: state =>state.currentCameraIndex,
+    currentPipelineIndex: state =>state.currentPipelineIndex,
+    cameraList: state =>state.cameraList,
+    pipelinelist: state =>state.pipelinelist,
+    point: state =>state.point,
   }
 })
diff --git a/New client/chameleon-client/src/views/Camera.vue b/New client/chameleon-client/src/views/Camera.vue
index bf11e938d..665c825df 100644
--- a/New client/chameleon-client/src/views/Camera.vue	
+++ b/New client/chameleon-client/src/views/Camera.vue	
@@ -4,14 +4,14 @@
             <v-row align="center">
                 <v-col :cols="3" class="colsClass">
                     <div style="padding-left:30px">
-                        <CVselect name="Camera" :list="[1,2,3]"></CVselect>
+                        <CVselect name="Camera" v-model="currentCameraIndex" :list="cameraList"></CVselect>
                     </div>
                 </v-col>
                 <v-col :cols="1">
                     <CVicon color="white" text="edit" tooltip="Edit camera name"></CVicon>
                 </v-col>
                 <v-col :cols="3" class="colsClass">
-                    <CVselect name="Pipeline" :list="[1,2,3]"></CVselect>
+                    <CVselect name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex"></CVselect>
                 </v-col>
                  <v-col :cols="1" class="colsClass">
                         <v-menu offset-y dark auto>
@@ -62,8 +62,8 @@
                         <v-tab>Normal</v-tab>
                         <v-tab>Threshold</v-tab>
                     </v-tabs>
-                    <img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
-                    <h5 id="Point">Yaw: 222 Pitch: 111 FPS: 15</h5>
+                    <img class="videoClass" :src="steamAdress">
+                    <h5 id="Point">{{point}}</h5>
                 </div>
             </v-col>
       </v-row>
@@ -95,22 +95,6 @@ import CVicon from '../components/cv-icon'
         data() {
             return {
                 selectedTab:0,
-                pipeline:{
-                    Exposure:0,
-                    Brightness:0,
-                    Orientation:0,
-                    Hue:[0,15],
-                    Saturation:[0,15],
-                    Value:[0,25],
-                    Erode:false,
-                    Dilate:false,
-                    Area:[0,12],
-                    Ratio:[0,12],
-                    Extent:[0,12],
-                    TargetGrouping:0,
-                    TargetIntersection:0,
-                    SortMode:0
-                }
             }
         },
         computed:{
@@ -125,7 +109,62 @@ import CVicon from '../components/cv-icon'
                     case 3:
                         return "OutputTab";
                 }
-            }
+            },
+            point:{
+                 get:function(){
+                    let p = this.$store.state.point.calulated;
+                    if(p !== undefined){
+                        return ("Pitch: " + parseFloat(p['pitch']).toFixed(2) + " Yaw: " + parseFloat(p['yaw']).toFixed(2) + " FPS: " + parseFloat(p['fps']).toFixed(2))
+                    } else{
+                        return undefined;
+                    }
+                }
+            },
+            currentCameraIndex:{
+                get(){
+                    return this.$store.state.currentCameraIndex;
+                },
+                set(value){
+                    this.$store.commit('currentCameraIndex',value);
+                }
+            },
+            currentPipelineIndex:{
+                get(){
+                    return this.$store.state.currentPipelineIndex;
+                },
+                set(value){
+                    this.$store.commit('currentPipelineIndex',value);
+                }
+            },
+            cameraList:{
+                get(){
+                    return this.$store.state.cameraList;
+                },
+                set(value){
+                    this.$store.commit('cameraList',value);
+                }
+            },
+            pipelineList:{
+                get(){
+                    return this.$store.state.pipelinelist;
+                },
+                set(value){
+                    this.$store.commit('pipelinelist',value);
+                }
+            },
+            pipeline:{
+                get(){
+                    return this.$store.state.pipeline;
+                },
+                set(value){
+                    this.$store.commit('pipeline',value);
+                }
+            },
+            steamAdress: {
+                get: function(){
+                    return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
+                }
+            },
         }
     }
 </script>
diff --git a/New client/chameleon-client/src/views/Settings.vue b/New client/chameleon-client/src/views/Settings.vue
index 58cdcc017..d8ce1e645 100644
--- a/New client/chameleon-client/src/views/Settings.vue	
+++ b/New client/chameleon-client/src/views/Settings.vue	
@@ -11,7 +11,7 @@
                 </div>
             </v-col>
             <v-col v-if="selectedTab === 1" class="colsClass">
-                <img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
+                <img class="videoClass" :src="steamAdress">
             </v-col>
       </v-row>
     </div>
@@ -39,7 +39,12 @@ import Cameras from './SettingsViewes/Cameras'
                     case 1:
                         return "Cameras";
                 }
-            }
+            },
+            steamAdress: {
+                get: function(){
+                    return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
+                }
+            },
         }
     }
 </script>
diff --git a/New client/chameleon-client/src/views/SettingsViewes/Cameras.vue b/New client/chameleon-client/src/views/SettingsViewes/Cameras.vue
index 144b19050..dac4280f5 100644
--- a/New client/chameleon-client/src/views/SettingsViewes/Cameras.vue	
+++ b/New client/chameleon-client/src/views/SettingsViewes/Cameras.vue	
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <CVselect name="Camera" :list="[1,2,3]"></CVselect>
-        <CVselect name="Resulotion" :list="[1,2,3]"></CVselect>
-        <CVselect name="Stream Resulotion" :list="['1:1','1:2','1:4','1:6']"></CVselect>
-        <CVnumberinput name="Diagonal FOV"></CVnumberinput>
+        <CVselect name="Camera" :list="cameraList"></CVselect>
+        <CVselect name="Resulotion" v-model="cameraSettings.resolution" :list="resolutionList"></CVselect>
+        <CVselect name="Stream Resulotion" v-model="cameraSettings.streamResolution"  :list="['1:1','1:2','1:4','1:6']"></CVselect>
+        <CVnumberinput name="Diagonal FOV" v-model="cameraSettings.fov" ></CVnumberinput>
         <v-btn style="margin-top:10px" small color="#4baf62">Save Camera Settings</v-btn>
     </div>
 </template>
@@ -21,6 +21,38 @@ import CVnumberinput from '../../components/cv-number-input'
             return {
                 
             }
+        },
+        computed:{
+            currentCameraIndex:{
+                get(){
+                    return this.$store.state.currentCameraIndex;
+                },
+                set(value){
+                    this.$store.commit('currentCameraIndex',value);
+                }
+            },
+            cameraList:{
+                get(){
+                    return this.$store.state.cameraList;
+                },
+                set(value){
+                    this.$store.commit('cameraList',value);
+                }
+            },
+            resolutionList:{
+                get(){
+                    return this.$store.state.resolutionList;
+                }
+            },
+            cameraSettings:{
+                get(){
+                    return this.$store.state.cameraSettings;
+                },
+                set(value){
+                    this.$store.commit('cameraSettings',value);
+                }
+            },
+            
         }
     }
 </script>
diff --git a/New client/chameleon-client/src/views/SettingsViewes/General.vue b/New client/chameleon-client/src/views/SettingsViewes/General.vue
index 6a74f9937..737cb8a0c 100644
--- a/New client/chameleon-client/src/views/SettingsViewes/General.vue	
+++ b/New client/chameleon-client/src/views/SettingsViewes/General.vue	
@@ -1,13 +1,13 @@
 <template>
     <div>
         <CVnumberinput name="Team Number"></CVnumberinput>
-        <CVradio v-model="t" :list="['DHCP','Static']"></CVradio>
+        <CVradio v-model="settings.connectionType" :list="['DHCP','Static']"></CVradio>
         <v-divider color="white"></v-divider>
-        <CVinput name="IP" :disabled="isDisabled"></CVinput>
-        <CVinput name="NetMask" :disabled="isDisabled"></CVinput>
-        <CVinput name="Gateway" :disabled="isDisabled"></CVinput>
+        <CVinput name="IP" v-model="settings.ip" :disabled="isDisabled"></CVinput>
+        <CVinput name="NetMask" v-model="settings.netmask" :disabled="isDisabled"></CVinput>
+        <CVinput name="Gateway" v-model="settings.gateway" :disabled="isDisabled"></CVinput>
         <v-divider color="white"></v-divider>
-        <CVinput name="Hostname" ></CVinput>
+        <CVinput name="Hostname" v-model="settings.hostname"></CVinput>
         <v-btn style="margin-top:10px" small color="#4baf62">Save General Settings</v-btn>
     </div>
 </template>
@@ -25,16 +25,23 @@ import CVinput from '../../components/cv-input'
         },
         data() {
             return {
-                t:0
             }
         },
         computed:{
             isDisabled(){
-                if(this.t === 0){
+                if(this.settings.connectionType === 0){
                     return true;
                 }
                 return false;
             },
+            settings:{
+                get(){
+                    return this.$store.state.settings;
+                },
+                set(value){
+                    this.$store.commit('settings',value);
+                }
+            }
             
         }
     }