Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-28 02:11:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'ColorPick' into dev

Browse Source
This commit is contained in:
ori agranat
2019-12-03 19:19:44 +02:00
parent 1bf5ff9ee2 8a7a234ede
commit 9adde234b8
5 changed files with 216 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
chameleon-client/src/views/Camera.vue
View File

@@ -87,7 +87,7 @@
<div style="padding-left:30px">
<keep-alive>
<!-- vision component -->
<component v-model="pipeline" :is="selectedComponent" @update="$emit('save')"/>
<component v-model="pipeline" :is="selectedComponent" ref="component" @update="$emit('save')"/>
</keep-alive>
</div>
</v-col>
@@ -102,7 +102,7 @@
</v-tabs>
<!-- camera image stream -->
<div class="videoClass">
<img v-if="cameraList.length > 0" :src="streamAddress">
<img id="CameraStream" v-if="cameraList.length > 0" :src="streamAddress" @click="onImageClick" crossorigin="Anonymous"/>
<span v-else>No Cameras Are connected</span>
<h5 id="Point">{{point}}</h5>
</div>
@@ -157,6 +157,11 @@
CVinput
},
methods: {
onImageClick(event){
if(this.selectedTab ===1){
this.$refs.component.onClick(event);
}
},
toCameraNameChange() {
this.newCameraName = this.cameraList[this.currentCameraIndex];
this.isCameraNameEdit = true;

97
chameleon-client/src/views/CameraViewes/ThresholdTab.vue
View File

@@ -4,36 +4,113 @@
<CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
@input="handleData('saturation')"/>
<CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
<v-divider color="darkgray " style="margin-top: 5px"/>
<v-btn style="margin: 20px;" tile color="#4baf62" @click="setFunction(1)" small>
<v-icon>colorize</v-icon>
Eye drop
</v-btn>
<v-btn style="margin: 20px;" tile color="#4baf62" @click="setFunction(2)" small>
<v-icon>add</v-icon>
Expand Selection
</v-btn>
<v-btn style="margin: 20px;" tile color="#4baf62" @click="setFunction(3)" small>
<v-icon>remove</v-icon>
Shrink Selection
</v-btn>
<v-divider color="darkgray "/>
<CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
<CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
</div>
</template>
<script>
import CVrangeSlider from '../../components/cv-range-slider'
import CVswitch from '../../components/cv-switch'
import CVrangeSlider from '../../components/cv-range-slider'
import CVswitch from '../../components/cv-switch'
export default {
name: 'Threshold',
props:['value'],
components:{
props: ['value'],
components: {
CVrangeSlider,
CVswitch
},
data() {
return {
currentFunction: undefined,
colorPicker: undefined,
currentBinaryState: 0
}
},
computed:{
computed: {
pipeline: {
get() {
return this.$store.state.pipeline;
}
},
driverState: {
get() {
return this.$store.state.driverMode;
},
set(val) {
this.$store.commit("driverMode", val);
}
}
},
methods:{
handleData(val){
this.handleInput(val,this.value[val]);
methods: {
onClick(event) {
let hsvArray = this.colorPicker.colorPickerClick(event, this.currentFunction,
[[this.value.hue[0], this.value.saturation[0], this.value.value[0]], [this.value.hue[1], this.value.saturation[1], this.value.value[1]]]);
this.currentFunction = undefined;
this.value.hue = [hsvArray[0][0], hsvArray[1][0]];
this.value.saturation = [hsvArray[0][1], hsvArray[1][1]];
this.value.value = [hsvArray[0][2], hsvArray[1][2]];
this.value.isBinary = this.currentBinaryState;
let msg = this.$msgPack.encode({
'hue': this.value.hue,
'saturation': this.value.saturation,
'value': this.value.value,
'isBinary': this.value.isBinary
});
this.$socket.send(msg);
this.$emit('update');
},
setFunction(index) {
this.currentBinaryState = this.value.isBinary;
if (this.currentBinaryState === true) {
this.value.isBinary = false;
this.handleData('isBinary')
}
switch (index) {
case 0:
this.currentFunction = undefined;
break;
case 1:
this.currentFunction = this.colorPicker.eyeDrop;
break;
case 2:
this.currentFunction = this.colorPicker.expand;
break;
case 3:
this.currentFunction = this.colorPicker.shrink;
break;
}
},
handleData(val) {
this.handleInput(val, this.value[val]);
this.$emit('update')
}
},
},
mounted: function () {
const self = this;
this.colorPicker = require('../../plugins/ColorPicker').default;
window.addEventListener('load', function () {
self.colorPicker.initColorPicker();
})
}
}
</script>
<style lang="" scoped>
</style>