mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-03 03:01:40 +00:00
integrated vuex to the entier site
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user