mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-23 01:21:40 +00:00
removed old ui src and moved new one to its location and builded ui for distribution
This commit is contained in:
ori agranat
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div id="cameraTab" class="spacing">
|
||||
<chselect title="select camera" :list="cameraList" Xkey="curr_camera"></chselect>
|
||||
|
||||
<Row type="flex" justify="start" align="middle" :gutter="1" class="spacing">
|
||||
<Col span="4">
|
||||
<h4>Resolution:</h4>
|
||||
</Col>
|
||||
<Col span="4">
|
||||
<i-select v-model="resolution" size="small" >
|
||||
<i-option v-for="(item,index) in resolutionList" :value="index" :key="index">{{item}}</i-option>
|
||||
</i-select>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row type="flex" justify="start" align="middle" :gutter="1" class="spacing">
|
||||
<Col span="4">
|
||||
<h4>Diagonal FOV:</h4>
|
||||
</Col>
|
||||
<Col span="4">
|
||||
<InputNumber :min="0" v-model="FOV" size="small"></InputNumber>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Button type="primary" size="small" class="buttonClass spacing" v-on:click="socketSendAll">Save settings to current camera</Button>
|
||||
<h4 class="spacing">Please Restart the computer Manually after saving all cameras</h4>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chselect from './ch-select.vue'
|
||||
import chIndexSelect from './ch-IndexSelect.vue'
|
||||
|
||||
export default {
|
||||
name: 'cameraTab',
|
||||
components: {
|
||||
chselect,
|
||||
chIndexSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
socketSendAll: function(){
|
||||
this.$socket.sendObj({'resolution':this.resolution});
|
||||
this.$socket.sendObj({'FOV':this.FOV});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cameraList:{
|
||||
get:function(){
|
||||
return this.$store.state.cameraList;
|
||||
}
|
||||
},
|
||||
resolutionList:{
|
||||
get:function(){
|
||||
return this.$store.state.resolutionList;
|
||||
}
|
||||
},
|
||||
resolution:{
|
||||
get: function(){
|
||||
return this.$store.state.resolution;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('resolution',value);
|
||||
}
|
||||
},
|
||||
FOV:{
|
||||
get: function(){
|
||||
return this.$store.state.FOV;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('FOV',value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title{
|
||||
text-align:left;
|
||||
color: aliceblue
|
||||
}
|
||||
.spacing{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.buttonClass{
|
||||
display: flex;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div id="InputTab">
|
||||
<chslider class="spacing" title="exposure" Xkey="exposure"></chslider>
|
||||
<chslider class="spacing" title="Brightness" Xkey="brightness"></chslider>
|
||||
<chselect class="spacing" title="Orientation" Xkey="orientation" :list="['Normal','Inverted']"></chselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chslider from './ch-slider.vue'
|
||||
import chselect from './ch-select.vue'
|
||||
import chIndexSelect from './ch-IndexSelect.vue'
|
||||
export default {
|
||||
name: 'InputTab',
|
||||
data () {
|
||||
return{
|
||||
}
|
||||
},
|
||||
components: {
|
||||
chslider,
|
||||
chselect,
|
||||
chIndexSelect
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
computed:{
|
||||
resolutionList:{
|
||||
get:function(){
|
||||
return this.$store.state.resolutionList;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.spacing{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<Layout id="main-layout">
|
||||
<Content id="main-content">
|
||||
<router-view></router-view>
|
||||
</Content>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Settings',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,163 +0,0 @@
|
||||
<template>
|
||||
<div id="SystemTab">
|
||||
<div>
|
||||
<row type="flex" justify="start" align="middle" :gutter="10" >
|
||||
<Col span="6">
|
||||
<h4>Team Number:</h4>
|
||||
</Col>
|
||||
<col span="4">
|
||||
<InputNumber :min="0" v-model="team_number" size="small"></InputNumber>
|
||||
</col>
|
||||
</row>
|
||||
</div>
|
||||
<Divider class="divdiv" orientation="left">Networking</Divider>
|
||||
<div>
|
||||
<RadioGroup v-model="connection_type" style="display: flex;">
|
||||
<Radio label="DHCP"></Radio>
|
||||
<Radio label="Static"></Radio>
|
||||
</RadioGroup>
|
||||
<div class="ipSettings">
|
||||
<row type="flex" justify="start" align="middle" class="spacing">
|
||||
<Col span="4">
|
||||
<h4>IP:</h4>
|
||||
</Col>
|
||||
<Col span="10">
|
||||
<Input v-model="ip" size="small" :disabled="isConnection"></Input>
|
||||
</Col>
|
||||
</row>
|
||||
<row type="flex" justify="start" align="middle" class="spacing">
|
||||
<Col span="4">
|
||||
<h4>Netmask:</h4>
|
||||
</Col>
|
||||
<Col span="10">
|
||||
<Input v-model="netmask" size="small" :disabled="isConnection"></Input>
|
||||
</Col>
|
||||
</row>
|
||||
<row type="flex" justify="start" align="middle" class="spacing">
|
||||
<Col span="4">
|
||||
<h4>Gateway:</h4>
|
||||
</Col>
|
||||
<Col span="10">
|
||||
<Input v-model="gateway" size="small" :disabled="isConnection"></Input>
|
||||
</Col>
|
||||
</row>
|
||||
<row type="flex" justify="start" align="middle" class="spacing">
|
||||
<Col span="4">
|
||||
<h4>Hostname:</h4>
|
||||
</Col>
|
||||
<Col span="10">
|
||||
<Input v-model="hostname" size="small">
|
||||
<span slot="append">.local</span>
|
||||
</Input>
|
||||
</Col>
|
||||
</row>
|
||||
</div>
|
||||
<Divider class="divdiv" orientation="left"></Divider>
|
||||
<row type="flex" justify="start" align="middle" style="margin-top:20px">
|
||||
<Button type="primary" size="small" v-on:click="socketSendAll">Save Changes and Restart</Button>
|
||||
</row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chInputNumber from './ch-inputNumber.vue'
|
||||
import chSelect from './ch-select.vue'
|
||||
export default {
|
||||
name: 'SystemTab',
|
||||
data() {
|
||||
return {
|
||||
lan:0
|
||||
}
|
||||
},
|
||||
components:{
|
||||
chInputNumber,
|
||||
chSelect
|
||||
},
|
||||
methods: {
|
||||
socketSendAll: function(){
|
||||
this.$socket.sendObj(
|
||||
{'change_general_settings_values':{
|
||||
'team_number':this.team_number,
|
||||
'connection_type':this.connection_type,
|
||||
'ip':this.ip,
|
||||
'netmask':this.netmask,
|
||||
'gateway':this.gateway,
|
||||
'hostname':this.hostname}});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
team_number:{
|
||||
get: function(){
|
||||
return this.$store.state.team_number;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('team_number',value);
|
||||
}
|
||||
},
|
||||
connection_type:{
|
||||
get: function(){
|
||||
return this.$store.state.connection_type;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('connection_type',value);
|
||||
}
|
||||
},
|
||||
ip:{
|
||||
get: function(){
|
||||
return this.$store.state.ip;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('ip',value);
|
||||
}
|
||||
},
|
||||
netmask:{
|
||||
get: function(){
|
||||
return this.$store.state.netmask;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('netmask',value);
|
||||
}
|
||||
},
|
||||
gateway:{
|
||||
get: function(){
|
||||
return this.$store.state.gateway;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('gateway',value);
|
||||
}
|
||||
},
|
||||
hostname:{
|
||||
get: function(){
|
||||
return this.$store.state.hostname;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('hostname',value);
|
||||
}
|
||||
},
|
||||
isConnection: function(){
|
||||
if(this.connection_type == "DHCP"){
|
||||
return true
|
||||
} else{
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.ivu-divider-inner-text{
|
||||
color: aliceblue
|
||||
}
|
||||
.ivu-radio-group {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
color: aliceblue;
|
||||
}
|
||||
.ipSettings{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.spacing{
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div id="Threshold">
|
||||
<chrange class="spacing" title="Hue" Xkey="hue" :maximum="180"></chrange>
|
||||
<chrange class="spacing" title="Saturation" Xkey="saturation" :maximum="255"></chrange>
|
||||
<chrange class="spacing" title="Value" Xkey="value" :maximum="255"></chrange>
|
||||
<chswitch class="spacing" title="Erode" Xkey="erode"></chswitch>
|
||||
<chswitch class="spacing" title="Dilate" Xkey="dilate"></chswitch>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chrange from './ch-range.vue'
|
||||
import chselect from './ch-select.vue'
|
||||
import chswitch from './ch-switch.vue'
|
||||
export default {
|
||||
name: 'Threshold',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
components:{
|
||||
chrange,
|
||||
chselect,
|
||||
chswitch
|
||||
},
|
||||
methods:{
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.spacing{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<Layout id="main-layout">
|
||||
<Header id="main-header">
|
||||
<Row type="flex" justify="start" align="middle" :gutter="10">
|
||||
<Col span="12">
|
||||
<chselect title="camera" :list="cameraList" Xkey="curr_camera"></chselect>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<chselect title="pipeline" :list="pipelineList" Xkey="curr_pipeline"></chselect>
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
<Content id="main-content">
|
||||
<row type="flex" justify="start" align="top" :gutter="5" >
|
||||
<Col span="12">
|
||||
<router-view></router-view>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<Tabs :animated="false" v-model="isBinary" @on-click="handleImage">
|
||||
<TabPane label="Normal"></TabPane>
|
||||
<TabPane label="Threshold"></TabPane>
|
||||
</Tabs>
|
||||
<img class="imageSize" :src="steamAdress" style="">
|
||||
<h4 class="pointText">{{point}}</h4>
|
||||
</Col>
|
||||
</Col>
|
||||
</row>
|
||||
</Content>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue"
|
||||
import chselect from './ch-select.vue'
|
||||
|
||||
export default {
|
||||
name: 'Vision',
|
||||
components: {
|
||||
chselect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleImage() {
|
||||
this.$socket.sendObj({"is_binary":this.isBinary});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cameraList:{
|
||||
get:function(){
|
||||
return this.$store.state.cameraList;
|
||||
}
|
||||
},
|
||||
pipelineList:{
|
||||
get: function(){
|
||||
return this.$store.state.pipelineList;
|
||||
}
|
||||
},
|
||||
steamAdress: {
|
||||
get: function(){
|
||||
return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
|
||||
}
|
||||
},
|
||||
isBinary: {
|
||||
get: function(){
|
||||
return this.$store.state.is_binary;
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit('is_binary',value)
|
||||
}
|
||||
},
|
||||
point:{
|
||||
get:function(){
|
||||
let p = this.$store.state.point;
|
||||
return ("Pitch: " + parseFloat(p['pitch']).toFixed(2) + " Yaw: " + parseFloat(p['yaw']).toFixed(2) + " FPS: " + parseFloat(p['fps']).toFixed(2))
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.ivu-tabs-nav .ivu-tabs-tab:hover{
|
||||
color: #0cdfc3 !important;
|
||||
}
|
||||
.imageSize{
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
}
|
||||
.pointText{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<Row type="flex" justify="start" align="middle" :gutter="1" >
|
||||
<Col span="4">
|
||||
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
|
||||
</Col>
|
||||
<Col span="4">
|
||||
<i-select v-model="value" size="small" @on-change="handleInput">
|
||||
<i-option v-for="(item,index) in list" :value="index" :key="index">{{item}}</i-option>
|
||||
</i-select>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ch-select',
|
||||
props:{
|
||||
title: String,
|
||||
list: Array,
|
||||
Xkey: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
this.$socket.sendObj({[this.Xkey]:this.value});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
value:{
|
||||
get: function(){
|
||||
return this.$store.state[this.Xkey];
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit(this.Xkey,value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h4 {
|
||||
color: #e6ebf1;
|
||||
text-align: left;
|
||||
}
|
||||
/* .ivu-select-selection{
|
||||
background-color: #2c3e50 !important;
|
||||
} */
|
||||
/* .ivu-select-selected-value{
|
||||
color: #fff !important;
|
||||
} */
|
||||
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div id="InputNumber">
|
||||
<row type="flex" justify="start" align="middle" :gutter="10" >
|
||||
<Col span="6">
|
||||
<h4>{{title}}</h4>
|
||||
</Col>
|
||||
<col span="4">
|
||||
<InputNumber :min="0" v-model="value" size="small" @on-change="handleInput"></InputNumber>
|
||||
</col>
|
||||
</row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ch-InputNumber',
|
||||
props:{
|
||||
title:String,
|
||||
Xkey:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
this.$socket.sendObj({[this.Xkey]:this.value});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
value:{
|
||||
get: function(){
|
||||
return this.$store.state[this.Xkey];
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit(this.Xkey,value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
|
||||
<template>
|
||||
<row type="flex" justify="start" align="middle" :gutter="1">
|
||||
<Col span="4">
|
||||
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
|
||||
</Col>
|
||||
<Col span="4" style="text-align: left">
|
||||
<InputNumber style="align-self: flex-start;" v-model="value[0]" size="small" :step="steps" ></InputNumber>
|
||||
</Col>
|
||||
<Col span="10">
|
||||
<Slider range v-model="value" @on-input="handleInput" :step="steps" :max="maximum"></Slider>
|
||||
</Col>
|
||||
<Col span="4" style="text-align: right">
|
||||
<InputNumber style="align-self: flex-end;" v-model="value[1]" size="small" :step="steps" :max="maximum"></InputNumber>
|
||||
</Col>
|
||||
</row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ch-range',
|
||||
props:{
|
||||
title:String,
|
||||
Xkey:String,
|
||||
steps:Number,
|
||||
maximum:Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
this.$socket.sendObj({[this.Xkey]:this.value});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
value:{
|
||||
get:function(){
|
||||
return this.$store.state[this.Xkey];
|
||||
},
|
||||
set:function(value){
|
||||
this.$store.commit(this.Xkey,value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h4 {
|
||||
color: #e6ebf1;
|
||||
}
|
||||
/* .ivu-input-number-input{
|
||||
background-color: #2c3e50 !important;
|
||||
color: #fff !important;
|
||||
} */
|
||||
</style>
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<Row type="flex" justify="start" align="middle" :gutter="1" >
|
||||
<Col span="4">
|
||||
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<i-select v-model="value" size="small" @on-change="handleInput" :disabled="isDisabled" @on-query-change="$emit('change')">
|
||||
<i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
|
||||
</i-select>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ch-select',
|
||||
props:{
|
||||
title: String,
|
||||
list: Array,
|
||||
Xkey: String,
|
||||
isDisabled:Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
this.$socket.sendObj({[this.Xkey]:this.value});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
value:{
|
||||
get: function(){
|
||||
return this.$store.state[this.Xkey];
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit(this.Xkey,value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h4 {
|
||||
color: #e6ebf1;
|
||||
text-align: left;
|
||||
}
|
||||
/* .ivu-select-selection{
|
||||
background-color: #2c3e50 !important;
|
||||
} */
|
||||
/* .ivu-select-selected-value{
|
||||
color: #fff !important;
|
||||
} */
|
||||
|
||||
</style>
|
||||
@@ -1,54 +0,0 @@
|
||||
|
||||
<template>
|
||||
<row type="flex" justify="start" align="middle" :gutter="1">
|
||||
<Col span="4">
|
||||
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
|
||||
</Col>
|
||||
<Col span="4" style="text-align: left">
|
||||
<InputNumber style="align-self: flex-start;" v-model="value" size="small"></InputNumber>
|
||||
</Col>
|
||||
<Col span="14">
|
||||
<Slider v-model="value" @on-input="handleInput"></Slider>
|
||||
</Col>
|
||||
</row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ch-slider',
|
||||
props:{
|
||||
title:String,
|
||||
Xkey:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput() {
|
||||
this.$socket.sendObj({[this.Xkey]:this.value});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
value:{
|
||||
get: function(){
|
||||
return this.$store.state[this.Xkey];
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit(this.Xkey,value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h4 {
|
||||
color: #e6ebf1;
|
||||
}
|
||||
/* .ivu-input-number-input{
|
||||
background-color: #2c3e50 !important;
|
||||
color: #fff !important;
|
||||
} */
|
||||
</style>
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<Row type="flex" justify="start" align="middle" :gutter="1" >
|
||||
<Col span="4">
|
||||
<h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
|
||||
</Col>
|
||||
<Col span="4" style="text-align: left">
|
||||
<i-switch v-model="value" @on-change="handleInput" style="align-self: flex-start"></i-switch>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ch-switch',
|
||||
props:{
|
||||
title: String,
|
||||
Xkey: String
|
||||
},
|
||||
methods:{
|
||||
handleInput() {
|
||||
this.$socket.sendObj({[this.Xkey]:this.value});
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
value:{
|
||||
get: function(){
|
||||
return this.$store.state[this.Xkey];
|
||||
},
|
||||
set: function(value){
|
||||
this.$store.commit(this.Xkey,value);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div id="ContourTab">
|
||||
<chrange class="spacing" title="Area" Xkey="area"></chrange>
|
||||
<chrange class="spacing" title="Ratio (W/H)" Xkey="ratio" :steps="0.1"></chrange>
|
||||
<chrange class="spacing" title="Extent" Xkey="extent"></chrange>
|
||||
<chselect class="spacing" title="Target Group" Xkey="target_group"
|
||||
:list="['Single','Dual','Triple','Quadruple','Quintuple']"></chselect>
|
||||
<chselect class="spacing" title="Target Intersection" Xkey="target_intersection"
|
||||
:list="['Up','Down','Left','Right','Parallel']" :isDisabled="isSingle"></chselect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chslider from './ch-slider.vue'
|
||||
import chselect from './ch-select.vue'
|
||||
import chrange from './ch-range.vue'
|
||||
|
||||
export default {
|
||||
name: 'ContourTab',
|
||||
components:{
|
||||
chslider,
|
||||
chselect,
|
||||
chrange
|
||||
},
|
||||
methods:{
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSingle:function(){
|
||||
if (this.$store.state.target_group == 'Single'){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.spacing{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
41
chameleon-client/src/components/cv-icon.vue
Normal file
41
chameleon-client/src/components/cv-icon.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-tooltip :right="right" :bottom="!right" nudge-right="10">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon :class="hoverClass" @click="handleClick" v-on="on" :color="color">{{text}}</v-icon>
|
||||
</template>
|
||||
<span>{{tooltip}}</span>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Icon',
|
||||
props:['color','tooltip','text','right','hover'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleClick(){
|
||||
this.$emit('click');
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
hoverClass(){
|
||||
if(this.hover !== undefined){
|
||||
return "hover";
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hover:hover{
|
||||
color: white !important;
|
||||
}
|
||||
</style>
|
||||
45
chameleon-client/src/components/cv-input.vue
Normal file
45
chameleon-client/src/components/cv-input.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row dense align="center">
|
||||
<v-col :cols="3">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col :cols="9">
|
||||
<v-text-field @keydown="handleKeyboard" dark v-model="localValue" dense :disabled="disabled" :error-messages="errorMessage"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Input',
|
||||
props:['name','value','disabled','errorMessage'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleKeyboard(event){
|
||||
if(event.key == "Enter"){
|
||||
this.$emit("Enter");
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
38
chameleon-client/src/components/cv-number-input.vue
Normal file
38
chameleon-client/src/components/cv-number-input.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row dense align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field dark v-model="localValue" class="mt-0 pt-0" hide-details single-line type="number" style="width: 70px"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NumberInput',
|
||||
props:['name','value'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input', parseInt(value));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
33
chameleon-client/src/components/cv-radio.vue
Normal file
33
chameleon-client/src/components/cv-radio.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-radio-group row v-model="localValue" dark :mandatory="true">
|
||||
<v-radio color="#4baf62" v-for="(name,index) in list" :label="name" v-bind:key="index" :value="index"></v-radio>
|
||||
</v-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Radio',
|
||||
props:['value','list'],
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
64
chameleon-client/src/components/cv-range-slider.vue
Normal file
64
chameleon-client/src/components/cv-range-slider.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row dense align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col :cols="10">
|
||||
<v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details class="align-center" dark color="#4baf62" :step="step">
|
||||
<template v-slot:prepend>
|
||||
<v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange" @focus="prependFocused = true" @blur="prependFocused = false" 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 :value="localValue[1]" :max="max" :min="min" @input="handleChange" @focus="appendFocused = true" @blur="appendFocused = false" 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 {
|
||||
prependFocused:false,
|
||||
appendFocused:false
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleChange(val){
|
||||
let i = 0;
|
||||
if(this.prependFocused === false && this.appendFocused === true){
|
||||
i = 1;
|
||||
}
|
||||
if(this.prependFocused || this.appendFocused){
|
||||
this.$set(this.localValue,i,val);
|
||||
}
|
||||
},
|
||||
handleInput(val){
|
||||
if(!this.prependFocused || !this.appendFocused){
|
||||
this.localValue = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
45
chameleon-client/src/components/cv-select.vue
Normal file
45
chameleon-client/src/components/cv-select.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row dense align="center">
|
||||
<v-col :cols="3">
|
||||
<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" :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>
|
||||
54
chameleon-client/src/components/cv-slider.vue
Normal file
54
chameleon-client/src/components/cv-slider.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row dense align="center">
|
||||
<v-col :cols="2">
|
||||
<span>{{name}}</span>
|
||||
</v-col>
|
||||
<v-col :cols="10">
|
||||
<v-slider :value="localValue" @input="handleInput" dark class="align-center" :max="max" :min="min" hide-details color="#4baf62" :step="step">
|
||||
<template v-slot:append>
|
||||
<v-text-field dark :max="max" :min="min" :value="localValue" @input="handleChange" @focus="isFocused = true" @blur="isFocused = false" 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 {
|
||||
isFocused:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleChange(val){
|
||||
if(this.isFocused){
|
||||
this.localValue = parseFloat(val);
|
||||
}
|
||||
},
|
||||
handleInput(val){
|
||||
if(!this.isFocused){
|
||||
this.localValue = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
localValue:{
|
||||
get(){
|
||||
return this.value;
|
||||
},
|
||||
set(value){
|
||||
this.$emit('input',value)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="" scoped>
|
||||
|
||||
</style>
|
||||
38
chameleon-client/src/components/cv-switch.vue
Normal file
38
chameleon-client/src/components/cv-switch.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row dense 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,88 +0,0 @@
|
||||
<template>
|
||||
<div id="OutputTab">
|
||||
<chselect class="spacing" title="Sort Mode" Xkey="sort_mode"
|
||||
:list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"></chselect>
|
||||
<Row type="flex" justify="start" align="middle" class="spacing" :gutter="10">
|
||||
<col>
|
||||
<Button type="primary" size="small" v-on:click="takePointA">Take Point A</Button>
|
||||
</col>
|
||||
<col style="margin-left:10px">
|
||||
<Button type="primary" size="small" v-on:click="takePointB">Take Point B</Button>
|
||||
</col>
|
||||
</Row>
|
||||
<Row type="flex" align="middle" class="spacing" :gutter="10">
|
||||
<col>
|
||||
<Button type="warning" size="small" v-on:click="clearPoints">Clear All Points</Button>
|
||||
</col>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chslider from './ch-slider.vue'
|
||||
import chselect from './ch-select.vue'
|
||||
import chrange from './ch-range.vue'
|
||||
|
||||
export default {
|
||||
name: 'OutputTab',
|
||||
components:{
|
||||
chslider,
|
||||
chselect,
|
||||
chrange
|
||||
},
|
||||
methods:{
|
||||
takePointA:function(){
|
||||
this.pointA = this.raw_point;
|
||||
this.calcSlope();
|
||||
},
|
||||
takePointB:function(){
|
||||
this.pointB = this.raw_point;
|
||||
this.calcSlope();
|
||||
},
|
||||
calcSlope:function(){
|
||||
if(this.pointA !== undefined && this.pointB !== undefined){
|
||||
let m = (this.pointB[1] - this.pointA[1]) / (this.pointB[0] - this.pointA[0]);
|
||||
let b = this.pointA[1] - (m * this.pointA[0]);
|
||||
if(isNaN(m) === false && isNaN(b) === false){
|
||||
this.sendSlope(m,b,true);
|
||||
} else{
|
||||
this.$Message.error("Point A and B are to close apart");
|
||||
}
|
||||
this.pointA = undefined;
|
||||
this.pointB = undefined;
|
||||
}
|
||||
},
|
||||
clearPoints:function(){
|
||||
this.sendSlope(1,0,false);
|
||||
this.pointA = undefined;
|
||||
this.pointB = undefined;
|
||||
},
|
||||
sendSlope(m,b,valid){
|
||||
this.$socket.sendObj({'M':m});
|
||||
this.$socket.sendObj({'B':b});
|
||||
this.$socket.sendObj({'is_calibrated':valid});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
raw_point:{
|
||||
get:function(){
|
||||
return this.$store.state.raw_point;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pointA:undefined,
|
||||
pointB:undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.spacing{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user