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

finished basic data flow

Browse Source
This commit is contained in:
ori agranat
2019-10-02 22:07:04 +03:00
parent 48d327fddf
commit ed94dc751f
7 changed files with 191 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
New client/chameleon-client/src/App.vue
View File

@@ -29,10 +29,34 @@ export default {
components: {
},
methods:{
handleMessage(key,val){
switch(key){
default:{
this.$store.commit(key,value);
}
}
}
},
data: () => ({
}),
created(){
this.$options.sockets.onmessage = (data) =>{
try{
let message = JSON.parse(data.data);
for(let prop in message){
if(message.hasOwnProperty(prop)){
this.handleMessage(prop,message[prop]);
}
}
}
catch{
console.error('error: ' + data.data);
}
}
}
};
</script>

2
New client/chameleon-client/src/main.js
View File

@@ -5,7 +5,7 @@ import store from './store'
import vuetify from './plugins/vuetify';
import VueNativeSock from 'vue-native-websocket';
Vue.config.productionTip = false;
// Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
Vue.use(VueNativeSock,'ws://' + location.host + '/websocket',{format: 'json'});
new Vue({
router,
store,

52
New client/chameleon-client/src/store.js
View File

@@ -3,14 +3,60 @@ import Vuex from 'vuex'
Vue.use(Vuex)
const set = key => (state,val) =>{
state[key] = val
};
export default new Vuex.Store({
state: {
settings:{},
pipeline:{
Exposure:0,
Brightness:0,
Orientation:0,
Hue:[0,15],
Saturation:[0,15],
Value:[0,25],
Erode:false,
Dilate:false,
Area:[0,12],
Ratio:[0,12],
Extent:[0,12],
TargetGrouping:0,
TargetIntersection:0,
SortMode:0
},
cameraSettings:{},
resolutionList:[],
port:1181,
currentCameraIndex:0,
currentPipelineIndex:0,
cameraList:[],
pipelinelist:[],
point:{}
},
mutations: {
settings: set('settings'),
pipeline: set('pipeline'),
cameraSettings: set('cameraSettings'),
resolutionList: set('resolutionList'),
port: set('port'),
currentCameraIndex: set('currentCameraIndex'),
currentPipelineIndex: set('currentPipelineIndex'),
cameraList: set('cameraList'),
pipelinelist: set('cameraList'),
point:set('point')
},
actions: {
settings: state => state.settings,
pipeline: state => state.pipeline,
cameraSettings: state =>state.cameraSettings,
resolutionList: state =>state.resolutionList,
port: state =>state.port,
currentCameraIndex: state =>state.currentCameraIndex,
currentPipelineIndex: state =>state.currentPipelineIndex,
cameraList: state =>state.cameraList,
pipelinelist: state =>state.pipelinelist,
point: state =>state.point,
}
})

81
New client/chameleon-client/src/views/Camera.vue
View File

@@ -4,14 +4,14 @@
<v-row align="center">
<v-col :cols="3" class="colsClass">
<div style="padding-left:30px">
<CVselect name="Camera" :list="[1,2,3]"></CVselect>
<CVselect name="Camera" v-model="currentCameraIndex" :list="cameraList"></CVselect>
</div>
</v-col>
<v-col :cols="1">
<CVicon color="white" text="edit" tooltip="Edit camera name"></CVicon>
</v-col>
<v-col :cols="3" class="colsClass">
<CVselect name="Pipeline" :list="[1,2,3]"></CVselect>
<CVselect name="Pipeline" :list="pipelineList" v-model="currentPipelineIndex"></CVselect>
</v-col>
<v-col :cols="1" class="colsClass">
<v-menu offset-y dark auto>
@@ -62,8 +62,8 @@
<v-tab>Normal</v-tab>
<v-tab>Threshold</v-tab>
</v-tabs>
<img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
<h5 id="Point">Yaw: 222 Pitch: 111 FPS: 15</h5>
<img class="videoClass" :src="steamAdress">
<h5 id="Point">{{point}}</h5>
</div>
</v-col>
</v-row>
@@ -95,22 +95,6 @@ import CVicon from '../components/cv-icon'
data() {
return {
selectedTab:0,
pipeline:{
Exposure:0,
Brightness:0,
Orientation:0,
Hue:[0,15],
Saturation:[0,15],
Value:[0,25],
Erode:false,
Dilate:false,
Area:[0,12],
Ratio:[0,12],
Extent:[0,12],
TargetGrouping:0,
TargetIntersection:0,
SortMode:0
}
}
},
computed:{
@@ -125,7 +109,62 @@ import CVicon from '../components/cv-icon'
case 3:
return "OutputTab";
}
}
},
point:{
get:function(){
let p = this.$store.state.point.calulated;
if(p !== undefined){
return ("Pitch: " + parseFloat(p['pitch']).toFixed(2) + " Yaw: " + parseFloat(p['yaw']).toFixed(2) + " FPS: " + parseFloat(p['fps']).toFixed(2))
} else{
return undefined;
}
}
},
currentCameraIndex:{
get(){
return this.$store.state.currentCameraIndex;
},
set(value){
this.$store.commit('currentCameraIndex',value);
}
},
currentPipelineIndex:{
get(){
return this.$store.state.currentPipelineIndex;
},
set(value){
this.$store.commit('currentPipelineIndex',value);
}
},
cameraList:{
get(){
return this.$store.state.cameraList;
},
set(value){
this.$store.commit('cameraList',value);
}
},
pipelineList:{
get(){
return this.$store.state.pipelinelist;
},
set(value){
this.$store.commit('pipelinelist',value);
}
},
pipeline:{
get(){
return this.$store.state.pipeline;
},
set(value){
this.$store.commit('pipeline',value);
}
},
steamAdress: {
get: function(){
return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
}
},
}
}
</script>

9
New client/chameleon-client/src/views/Settings.vue
View File

@@ -11,7 +11,7 @@
</div>
</v-col>
<v-col v-if="selectedTab === 1" class="colsClass">
<img class="videoClass" src="https://pbs.twimg.com/profile_images/846659478120366082/K-kZVvT8_400x400.jpg">
<img class="videoClass" :src="steamAdress">
</v-col>
</v-row>
</div>
@@ -39,7 +39,12 @@ import Cameras from './SettingsViewes/Cameras'
case 1:
return "Cameras";
}
}
},
steamAdress: {
get: function(){
return "http://"+location.hostname + ":"+ this.$store.state.port +"/stream.mjpg";
}
},
}
}
</script>

40
New client/chameleon-client/src/views/SettingsViewes/Cameras.vue
View File

@@ -1,9 +1,9 @@
<template>
<div>
<CVselect name="Camera" :list="[1,2,3]"></CVselect>
<CVselect name="Resulotion" :list="[1,2,3]"></CVselect>
<CVselect name="Stream Resulotion" :list="['1:1','1:2','1:4','1:6']"></CVselect>
<CVnumberinput name="Diagonal FOV"></CVnumberinput>
<CVselect name="Camera" :list="cameraList"></CVselect>
<CVselect name="Resulotion" v-model="cameraSettings.resolution" :list="resolutionList"></CVselect>
<CVselect name="Stream Resulotion" v-model="cameraSettings.streamResolution" :list="['1:1','1:2','1:4','1:6']"></CVselect>
<CVnumberinput name="Diagonal FOV" v-model="cameraSettings.fov" ></CVnumberinput>
<v-btn style="margin-top:10px" small color="#4baf62">Save Camera Settings</v-btn>
</div>
</template>
@@ -21,6 +21,38 @@ import CVnumberinput from '../../components/cv-number-input'
return {
}
},
computed:{
currentCameraIndex:{
get(){
return this.$store.state.currentCameraIndex;
},
set(value){
this.$store.commit('currentCameraIndex',value);
}
},
cameraList:{
get(){
return this.$store.state.cameraList;
},
set(value){
this.$store.commit('cameraList',value);
}
},
resolutionList:{
get(){
return this.$store.state.resolutionList;
}
},
cameraSettings:{
get(){
return this.$store.state.cameraSettings;
},
set(value){
this.$store.commit('cameraSettings',value);
}
},
}
}
</script>

21
New client/chameleon-client/src/views/SettingsViewes/General.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<CVnumberinput name="Team Number"></CVnumberinput>
<CVradio v-model="t" :list="['DHCP','Static']"></CVradio>
<CVradio v-model="settings.connectionType" :list="['DHCP','Static']"></CVradio>
<v-divider color="white"></v-divider>
<CVinput name="IP" :disabled="isDisabled"></CVinput>
<CVinput name="NetMask" :disabled="isDisabled"></CVinput>
<CVinput name="Gateway" :disabled="isDisabled"></CVinput>
<CVinput name="IP" v-model="settings.ip" :disabled="isDisabled"></CVinput>
<CVinput name="NetMask" v-model="settings.netmask" :disabled="isDisabled"></CVinput>
<CVinput name="Gateway" v-model="settings.gateway" :disabled="isDisabled"></CVinput>
<v-divider color="white"></v-divider>
<CVinput name="Hostname" ></CVinput>
<CVinput name="Hostname" v-model="settings.hostname"></CVinput>
<v-btn style="margin-top:10px" small color="#4baf62">Save General Settings</v-btn>
</div>
</template>
@@ -25,16 +25,23 @@ import CVinput from '../../components/cv-input'
},
data() {
return {
t:0
}
},
computed:{
isDisabled(){
if(this.t === 0){
if(this.settings.connectionType === 0){
return true;
}
return false;
},
settings:{
get(){
return this.$store.state.settings;
},
set(value){
this.$store.commit('settings',value);
}
}
}
}