mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-04 03:11:40 +00:00
done all inputs and major work on camera views
This commit is contained in:
ori agranat
@@ -35,8 +35,6 @@ export default {
|
||||
|
||||
},
|
||||
data: () => ({
|
||||
drawer:null,
|
||||
//
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
@@ -61,5 +59,8 @@ export default {
|
||||
#title{
|
||||
color:#4baf62;
|
||||
}
|
||||
span{
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col :cols="10">
|
||||
<v-range-slider v-model="localValue" :max="max" :min="min" hide-details class="align-center" dark color="#4baf62" :step="step">
|
||||
<template v-slot:prepend>
|
||||
<v-text-field v-model="localValue[0]" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-text-field v-model="localValue[1]" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
|
||||
</template>
|
||||
</v-range-slider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RangeSlider',
|
||||
props:['name','min','max','value','step'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
45
New client/chameleon-client/src/components/cv-select.vue
Normal file
45
New client/chameleon-client/src/components/cv-select.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-select v-model="localValue" :items="indexList" item-text="name" item-value="index" dark color="#4baf62" item-color="green" dense :disabled="disabled"></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Select',
|
||||
props:['list','name','value','disabled'],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value)
|
||||
}
|
||||
},
|
||||
indexList(){
|
||||
let list = []
|
||||
for(let i=0 ; i<this.list.length; i++){
|
||||
list.push({
|
||||
name:this.list[i],
|
||||
index:i});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
44
New client/chameleon-client/src/components/cv-slider.vue
Normal file
44
New client/chameleon-client/src/components/cv-slider.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col :cols="10">
|
||||
<v-slider v-model="localValue" dark class="align-center" :max="max" :min="min" hide-details color="#4baf62" :step="step">
|
||||
<template v-slot:append>
|
||||
<v-text-field dark v-model="localValue" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
|
||||
</template>
|
||||
</v-slider>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Slider',
|
||||
props:['min','max','name','value','step'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
38
New client/chameleon-client/src/components/cv-switch.vue
Normal file
38
New client/chameleon-client/src/components/cv-switch.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-switch v-model="localValue" color="#4baf62"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CVSwitch',
|
||||
props:['name','value'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,11 +1,12 @@
|
||||
|
||||
import '@mdi/font/css/materialdesignicons.css';
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib';
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
icons: {
|
||||
iconfont: 'mdi',
|
||||
},
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@@ -7,8 +7,9 @@
|
||||
<v-tab>Threshold</v-tab>
|
||||
<v-tab>Contours</v-tab>
|
||||
<v-tab>Output</v-tab>
|
||||
<!-- <v-tab>3D</v-tab> -->
|
||||
</v-tabs>
|
||||
<div>
|
||||
<div style="padding-left:30px">
|
||||
<component :is="selectedComponent"></component>
|
||||
</div>
|
||||
</v-col>
|
||||
@@ -24,10 +25,16 @@
|
||||
|
||||
<script>
|
||||
import InputTab from './CameraViewes/InputTab'
|
||||
import ThresholdTab from './CameraViewes/ThresholdTab'
|
||||
import ContoursTab from './CameraViewes/ContoursTab'
|
||||
import OutputTab from './CameraViewes/OutputTab'
|
||||
export default {
|
||||
name: 'CameraTab',
|
||||
components:{
|
||||
InputTab
|
||||
InputTab,
|
||||
ThresholdTab,
|
||||
ContoursTab,
|
||||
OutputTab
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,13 +1,31 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<CVrangeSlider v-model="t" name="Area" :min="0" :max="100"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="t" name="Ratio (W/H)" :min="0" :max="100" :step="0.1"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="t" name="Ratio Extent" :min="0" :max="100"></CVrangeSlider>
|
||||
<CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']"></CVselect>
|
||||
<CVselect name="Target Intersaction" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled"></CVselect>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVrangeSlider from '../../components/cv-range-slider'
|
||||
import CVselect from '../../components/cv-select'
|
||||
export default {
|
||||
name: '',
|
||||
name: 'Contours',
|
||||
components:{
|
||||
CVrangeSlider,
|
||||
CVselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
t:[0,25]
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
isDisabled(){
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,31 @@
|
||||
<template>
|
||||
<span>aaaaaaaaaaad</span>
|
||||
<div>
|
||||
<CVslider name="Exposure" v-model="t" :min="0" :max="100"></CVslider>
|
||||
<CVslider name="Brightness" v-model="t" :min="0" :max="100"></CVslider>
|
||||
<CVselect name="Orientation" v-model="a" :list="['Normal','Inverted']"></CVselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVslider from '../../components/cv-slider'
|
||||
import rangeSlider from '../../components/cv-range-slider'
|
||||
import CVselect from '../../components/cv-select'
|
||||
import CVswitch from '../../components/cv-switch'
|
||||
export default {
|
||||
name: 'Input',
|
||||
components:{
|
||||
CVslider,
|
||||
rangeSlider,
|
||||
CVselect,
|
||||
CVswitch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
t:0,
|
||||
a:1
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,25 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
<CVrangeSlider v-model="t" name="Hue" :min="0" :max="180"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="t" name="Saturation" :min="0" :max="255"></CVrangeSlider>
|
||||
<CVrangeSlider v-model="t" name="Value" :min="0" :max="255"></CVrangeSlider>
|
||||
<CVswitch name="Erode"></CVswitch>
|
||||
<CVswitch name="Dilate"></CVswitch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CVrangeSlider from '../../components/cv-range-slider'
|
||||
import CVswitch from '../../components/cv-switch'
|
||||
export default {
|
||||
name: '',
|
||||
name: 'Threshold',
|
||||
components:{
|
||||
CVrangeSlider,
|
||||
CVswitch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
t:[0,5]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row >
|
||||
<v-row>
|
||||
<v-col cols="6" class="colsClass">
|
||||
<v-tabs background-color="#212121" dark height="50" fixed-tabs slider-color="#4baf62">
|
||||
<v-tabs v-model="selectedTab" background-color="#212121" dark height="50" fixed-tabs slider-color="#4baf62">
|
||||
<v-tab to="">General</v-tab>
|
||||
<v-tab to="">Cameras</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
</v-col>
|
||||
<v-col v-if="selectedTab === 1">
|
||||
<img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
@@ -16,12 +20,16 @@
|
||||
name: 'SettingsTab',
|
||||
data() {
|
||||
return {
|
||||
|
||||
selectedTab:0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
<style scoped>
|
||||
.videoClass{
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user