integrated vuex to the entier site

This commit is contained in:
ori agranat
2019-03-26 22:28:58 +02:00
parent 528caf3429
commit 999f14951b
4 changed files with 40 additions and 13 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div id="Threshold">
<chrange class="spacing" title="Hue" :value="[0,10]"></chrange>
<chrange class="spacing" title="Saturation" :value="[0,10]"></chrange>
<chrange class="spacing" title="Value" :value="[0,10]"></chrange>
<chrange class="spacing" title="Hue" :parentData="$store.getters.hue" @input="onChange('hue',$event)"></chrange>
<chrange class="spacing" title="Saturation" :parentData="$store.getters.saturation" @input="onChange('saturation',$event)"></chrange>
<chrange class="spacing" title="Value" :parentData="$store.getters.value" @input="onChange('value',$event)"></chrange>
</div>
</template>
@@ -18,8 +18,12 @@ import chselect from './ch-select.vue'
components:{
chrange,
chselect
},
methods:{
onChange: function(key,event) {
this.$store.commit(key, event);
}
}
}
</script>

View File

@@ -3,10 +3,10 @@
<Header id="main-header">
<Row type="flex" justify="start" align="middle" :gutter="10">
<Col span="12">
<chselect title="select a camera" :list="[1,2,3]"></chselect>
<chselect title="camera" :parentData="$store.getters.camera" @input="onChange('camera',$event)" :list="[1,2,3]"></chselect>
</Col>
<Col span="12">
<chselect title="select pipline" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
<chselect title="pipline" :list="[0,1,2,3,4,5,6,7,8,9]" :parentData="$store.getters.pipline" @input="onChange('pipline',$event)"></chselect>
</Col>
</Row>
</Header>

View File

@@ -18,17 +18,21 @@
<script>
export default {
name: 'ch-slider',
props:['title','value'],
name: 'ch-range',
props:['title','parentData'],
data() {
return {
content:this.value
value:0
}
},
methods: {
handleInput() {
this.$emit('input',{[this.title]:this.value});
this.$emit('input',this.value);
this.$socket.sendObj({[this.title]:this.value});
}
},
beforeMount () {
this.value = this.parentData
}
}
</script>

View File

@@ -9,21 +9,40 @@ const set = key => (state,val) =>{
export const store = new Vuex.Store({
state:{
//header
camera:0,
pipeline:0,
//input
exposure:0,
brightness:0,
orientation:0,
resolution:0
resolution:0,
//threshold
hue:[0,10],
saturation:[0,10],
value:[0,10]
},
mutations:{
camera: set('camera'),
pipeline: set('pipeline'),
brightness: set('brightness'),
exposure: set('exposure'),
orientation:set('orientation'),
resolution: set('resolution')
resolution: set('resolution'),
hue: set('hue'),
saturation: set('saturation'),
value: set('value')
},
getters:{
camera: state => state.camera,
pipeline: state => state.pipeline,
brightness: state => state.brightness,
exposure: state => state.exposure,
orientation: state => state.orientation,
resolution: state => state.resolution
resolution: state => state.resolution,
hue: state => state.hue,
saturation: state => state.saturation,
value: state => state.value,
},
});