mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-01 02:41:42 +00:00
Bootup sprint (#18)
* Did some stuff * Fix gradle, start implementing mjpeg frame consumer * Did some stuff * bade changes * rename camera config to USBCameraConfiguration, add name * unrename cameraconfiguration * Add pub/sub framework * Add setResolution to mjpeg frame consumer * add NTDataConsumer * Add some totally broken hsv hacks * Start refactoring UI data * Update index.js * Commit and push, he says * Fix up some errors * Fix input tab * Fix fps * Update index.js * Add pipeline field setting, update PipelineManager, fix nullpointers and USBCameraSettables * Change v-model to point to data() * update hsv to use mutations * Work on saving, fix hsv * Rename shouldErode/shouldDilate to erode and dilate * Hook all the tabs up to the Store * Change handleData to handlePipelineData * camera quirk redo, add ICCSub to SocketHandler * Fix some property names * Fixed tons of naming in UI, fix backend for multi-val PSCs, fix PSC enums * change pipeline type to an int in store * Fix mutation naming * Attempt threshold fix * Update SocketHandler.java * Add truthy data sending * Start adding logging support * [UI] Add delay to slider input boxes (#1) * [UI] [Backend] potentially fix camera settings, various logging tweaks * Don't release raw input mat * add setVideoModeIndex to vision settables * Implement pipeline index in socket handler, add framework for renaming/changing pipes * (ish) get pipeline change working * Create index.html * Cleanups, fix pipeline index bug, fix stream res for MJPG, add dashboard stream (unused) * Refactor UI to use mutatePipeline, send pipeline results * Update NetworkConfig.java * Change double to number * Run spotless * Fix reversal of large/small comparators * Fix left/right * Fix pitch/yaw calculation bug, fix area bug * Use Vue.set instead of assignment This fixes {{ }} * Update App.vue * run spotless * Actually add pipelines and reassign indecies * Delete old pipeline configs Fixes duplication on renaming pipeline * Start working on deleting pipes * Fix camera nickname change * run spotless * Fix some test stuff * Update VisionModuleManagerTest.java * vision source manager test is still broken * Fix VisionSourceManager test * Apply spotless 2 electric boogaloo Co-authored-by: Banks Troutman <btrout.dhrs@gmail.com> Co-authored-by: Declan Freeman-Gleason <declanfreemangleason@gmail.com> Co-authored-by: Aaryan Agrawal <54345060+13Ducks@users.noreply.github.com>
This commit is contained in:
Matt
@@ -90,6 +90,7 @@
|
||||
CVslider,
|
||||
miniMap
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
@@ -106,14 +107,14 @@
|
||||
computed: {
|
||||
targets: {
|
||||
get() {
|
||||
return this.$store.state.point.targets;
|
||||
return 330; // TODO fix
|
||||
}
|
||||
},
|
||||
horizontalFOV: {
|
||||
get() {
|
||||
let index = this.$store.state.cameraSettings.resolution;
|
||||
let FOV = this.$store.state.cameraSettings.fov;
|
||||
let resolution = this.$store.state.resolutionList[index];
|
||||
let resolution = this.$store.getters.videoFormatList[index];
|
||||
let diagonalView = FOV * (Math.PI / 180);
|
||||
let diagonalAspect = Math.hypot(resolution.width, resolution.height);
|
||||
return Math.atan(Math.tan(diagonalView / 2) * (resolution.width / diagonalAspect)) * 2 * (180 / Math.PI)
|
||||
@@ -121,8 +122,9 @@
|
||||
},
|
||||
allow3D: {
|
||||
get() {
|
||||
let currentRes = this.$store.state.resolutionList[this.$store.state.pipeline.videoModeIndex];
|
||||
for (let res of this.$store.state.cameraSettings.calibration) {
|
||||
let index = this.$store.state.cameraSettings.resolution;
|
||||
let currentRes = this.$store.getters.videoFormatList[index];
|
||||
for (let res of this.$store.state.cameraSettings.calibrated) {
|
||||
if (currentRes.width === res.width && currentRes.height === res.height) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVrangeSlider
|
||||
v-model="value.area"
|
||||
name="Area"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.1"
|
||||
@input="handleData('area')"
|
||||
@rollback="e=> rollback('area',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="value.ratio"
|
||||
name="Ratio (W/H)"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.1"
|
||||
@input="handleData('ratio')"
|
||||
@rollback="e=> rollback('ratio',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="value.extent"
|
||||
name="Extent"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handleData('extent')"
|
||||
@rollback="e=> rollback('extent',e)"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="value.speckle"
|
||||
name="Speckle Rejection"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handleData('speckle')"
|
||||
@rollback="e=> rollback('speckle',e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="value.targetGroup"
|
||||
name="Target Group"
|
||||
:list="['Single','Dual']"
|
||||
@input="handleData('targetGroup')"
|
||||
@rollback="e=> rollback('targetGroup',e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="value.targetIntersection"
|
||||
name="Target Intersection"
|
||||
:list="['None','Up','Down','Left','Right']"
|
||||
:disabled="isDisabled"
|
||||
@input="handleData('targetIntersection')"
|
||||
@rollback="e=> rollback('targetIntersection',e)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CVrangeSlider
|
||||
v-model="contourArea"
|
||||
name="Area"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.1"
|
||||
@input="handlePipelineData('contourArea')"
|
||||
@rollback="e=> rollback('contourArea',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="contourRatio"
|
||||
name="Ratio (W/H)"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:step="0.1"
|
||||
@input="handlePipelineData('contourRatio')"
|
||||
@rollback="e=> rollback('contourRatio',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="contourExtent"
|
||||
name="Extent"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handlePipelineData('contourExtent')"
|
||||
@rollback="e=> rollback('contourExtent',e)"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="contourSpecklePercentage"
|
||||
name="Speckle Rejection"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handlePipelineData('contourSpecklePercentage')"
|
||||
@rollback="e=> rollback('contourSpecklePercentage',e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="contourGroupingMode"
|
||||
name="Target Group"
|
||||
:list="['Single','Dual']"
|
||||
@input="handlePipelineData('targetGroup')"
|
||||
@rollback="e=> rollback('targetGroup',e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="contourIntersection"
|
||||
name="Target Intersection"
|
||||
:list="['None','Up','Down','Left','Right']"
|
||||
:disabled="contourGroupingMode === 0"
|
||||
@input="handlePipelineData('contourIntersection')"
|
||||
@rollback="e=> rollback('contourIntersection',e)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -64,15 +64,60 @@
|
||||
CVselect,
|
||||
CVslider
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['value'],
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
isDisabled() {
|
||||
return this.value.targetGroup === 0;
|
||||
|
||||
contourArea: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourArea
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourArea": val});
|
||||
}
|
||||
},
|
||||
contourRatio: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourRatio
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourRatio": val});
|
||||
}
|
||||
},
|
||||
contourExtent: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourExtent
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourExtent": val});
|
||||
}
|
||||
},
|
||||
contourSpecklePercentage: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourSpecklePercentage
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourSpecklePercentage": val});
|
||||
}
|
||||
},
|
||||
contourGroupingMode: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourGroupingMode
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourGroupingMode": val});
|
||||
}
|
||||
},
|
||||
contourIntersection: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourIntersection
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourIntersection": val});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVslider
|
||||
v-model="value.exposure"
|
||||
v-model="cameraExposure"
|
||||
name="Exposure"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handleData('exposure')"
|
||||
@rollback="e => rollback('exposure', e)"
|
||||
@input="handlePipelineData('cameraExposure')"
|
||||
@rollback="e => rollback('cameraExposure', e)"
|
||||
/>
|
||||
<CVslider
|
||||
v-model="value.brightness"
|
||||
v-model="cameraBrightness"
|
||||
name="Brightness"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handleData('brightness')"
|
||||
@rollback="e => rollback('brightness', e)"
|
||||
@input="handlePipelineData('cameraBrightness')"
|
||||
@rollback="e => rollback('cameraBrightness', e)"
|
||||
/>
|
||||
<CVslider
|
||||
v-if="value.gain !== -1"
|
||||
v-model="value.gain"
|
||||
v-if="cameraGain !== -1"
|
||||
v-model="cameraGain"
|
||||
name="Gain"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@input="handleData('gain')"
|
||||
@rollback="e => rollback('gain', e)"
|
||||
@input="handlePipelineData('cameraGain')"
|
||||
@rollback="e => rollback('cameraGain', e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="value.rotationMode"
|
||||
v-model="inputImageRotationMode"
|
||||
name="Orientation"
|
||||
:list="['Normal','90° CW','180°','90° CCW']"
|
||||
@input="handleData('rotationMode')"
|
||||
@rollback="e => e => rollback('rotationMode',e)"
|
||||
@input="handlePipelineData('inputImageRotationMode')"
|
||||
@rollback="e => rollback('inputImageRotationMode',e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="value.videoModeIndex"
|
||||
v-model="cameraVideoModeIndex"
|
||||
name="Resolution"
|
||||
:list="resolutionList"
|
||||
@input="handleData('videoModeIndex')"
|
||||
@rollback="e => rollback('videoModeIndex', e)"
|
||||
@input="handlePipelineData('cameraVideoModeIndex')"
|
||||
@rollback="e => rollback('cameraVideoModeIndex', e)"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="value.streamDivisor"
|
||||
v-model="outputFrameDivisor"
|
||||
name="Stream Resolution"
|
||||
:list="streamResolutionList"
|
||||
@input="handleData('streamDivisor')"
|
||||
@rollback="e => rollback('streamDivisor', e)"
|
||||
@input="handlePipelineData('outputFrameDivisor')"
|
||||
@rollback="e => rollback('outputFrameDivisor', e)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -59,24 +59,75 @@
|
||||
CVslider,
|
||||
CVselect,
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
cameraExposure: {
|
||||
get() {
|
||||
return parseInt(this.$store.getters.currentPipelineSettings.cameraExposure);
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"cameraExposure": parseInt(val)});
|
||||
}
|
||||
},
|
||||
cameraBrightness: {
|
||||
get() {
|
||||
return parseInt(this.$store.getters.currentPipelineSettings.cameraBrightness)
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"cameraBrightness": parseInt(val)});
|
||||
}
|
||||
},
|
||||
cameraGain: {
|
||||
get() {
|
||||
return parseInt(this.$store.getters.currentPipelineSettings.cameraGain)
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"cameraGain": parseInt(val)});
|
||||
}
|
||||
},
|
||||
inputImageRotationMode: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.inputImageRotationMode
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"inputImageRotationMode": val});
|
||||
}
|
||||
},
|
||||
cameraVideoModeIndex: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.cameraVideoModeIndex
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"cameraVideoModeIndex": val});
|
||||
}
|
||||
},
|
||||
outputFrameDivisor: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.outputFrameDivisor
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"outputFrameDivisor": val});
|
||||
}
|
||||
},
|
||||
|
||||
resolutionList: {
|
||||
get() {
|
||||
let tmp_list = [];
|
||||
for (let i of this.$store.state.resolutionList) {
|
||||
for (let i of this.$store.getters.videoFormatList) {
|
||||
tmp_list.push(`${i['width']} X ${i['height']} at ${i['fps']} FPS, ${i['pixelFormat']}`)
|
||||
}
|
||||
return tmp_list;
|
||||
}
|
||||
},
|
||||
|
||||
streamResolutionList: {
|
||||
get() {
|
||||
let cam_res = this.$store.state.resolutionList[this.value.videoModeIndex];
|
||||
let cam_res = this.$store.getters.videoFormatList[
|
||||
this.$store.getters.currentCameraSettings.currentPipelineSettings.cameraVideoModeIndex]
|
||||
let tmp_list = [];
|
||||
tmp_list.push(`${Math.floor(cam_res['width'])} X ${Math.floor(cam_res['height'])}`);
|
||||
for (let x = 2; x <= 6; x += 2) {
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVselect
|
||||
v-model="value.sortMode"
|
||||
v-model="contourSortMode"
|
||||
name="Sort Mode"
|
||||
:list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Centermost']"
|
||||
@input="handleData('sortMode')"
|
||||
@rollback="rollback('sortMode',e)"
|
||||
@input="handlePipelineData('contourSortMode')"
|
||||
@rollback="e => rollback('contourSortMode', e)"
|
||||
/>
|
||||
|
||||
<CVselect
|
||||
v-model="value.targetRegion"
|
||||
name="Target Region"
|
||||
v-model="contourTargetOffsetPointEdge"
|
||||
name="Target Offset Point"
|
||||
:list="['Center','Top','Bottom','Left','Right']"
|
||||
@input="handleData('targetRegion')"
|
||||
@rollback="e=> rollback('targetRegion',e)"
|
||||
@input="handlePipelineData('contourTargetOffsetPointEdge')"
|
||||
@rollback="e=> rollback('contourTargetOffsetPointEdge', e)"
|
||||
/>
|
||||
|
||||
<CVselect
|
||||
v-model="value.targetOrientation"
|
||||
v-model="contourTargetOrientation"
|
||||
name="Target Orientation"
|
||||
:list="['Portrait', 'Landscape']"
|
||||
@input="handleData('targetOrientation')"
|
||||
@rollback="e=> rollback('targetOrientation',e)"
|
||||
@input="handlePipelineData('contourTargetOrientation')"
|
||||
@rollback="e=> rollback('contourTargetOrientation', e)"
|
||||
/>
|
||||
|
||||
<CVswitch
|
||||
v-model="value.multiple"
|
||||
name="Output multiple"
|
||||
@input="handleData('multiple')"
|
||||
@rollback="e=> rollback('multiple',e)"
|
||||
v-model="outputShowMultipleTargets"
|
||||
name="Show Multiple Targets"
|
||||
@input="handlePipelineData('outputShowMultipleTargets')"
|
||||
@rollback="e=> rollback('outputShowMultipleTargets', e)"
|
||||
/>
|
||||
<span>Calibrate:</span>
|
||||
<span>Robot Offset:</span>
|
||||
<v-divider
|
||||
dark
|
||||
color="white"
|
||||
/>
|
||||
<CVselect
|
||||
v-model="value.calibrationMode"
|
||||
name="Calibration Mode"
|
||||
:list="['None','Single point','Dual point']"
|
||||
@input="handleData('calibrationMode')"
|
||||
@rollback="e=> rollback('calibrationMode',e)"
|
||||
v-model="offsetRobotOffsetMode"
|
||||
name="Robot Offset Mode"
|
||||
:list="['None','Single Point','Dual Point']"
|
||||
@input="handlePipelineData('offsetRobotOffsetMode')"
|
||||
@rollback="e=> rollback('offsetRobotOffsetMode',e)"
|
||||
/>
|
||||
<component
|
||||
:is="selectedComponent"
|
||||
@@ -82,6 +82,7 @@
|
||||
DualCalibration,
|
||||
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['value'],
|
||||
|
||||
data() {
|
||||
@@ -91,22 +92,65 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
contourSortMode: {
|
||||
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourSortMode
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourSortMode": val});
|
||||
}
|
||||
},
|
||||
contourTargetOffsetPointEdge: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourTargetOffsetPointEdge
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourTargetOffsetPointEdge": val});
|
||||
}
|
||||
},
|
||||
contourTargetOrientation: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.contourTargetOrientation
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"contourTargetOrientation": val});
|
||||
}
|
||||
},
|
||||
outputShowMultipleTargets: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.outputShowMultipleTargets
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"outputShowMultipleTargets": val});
|
||||
}
|
||||
},
|
||||
offsetRobotOffsetMode: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.offsetRobotOffsetMode
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"offsetRobotOffsetMode": val});
|
||||
}
|
||||
},
|
||||
|
||||
selectedComponent: {
|
||||
get() {
|
||||
switch (this.value.calibrationMode) {
|
||||
case 0:
|
||||
return "";
|
||||
case 1:
|
||||
return "SingleCalibration";
|
||||
return "Single Point";
|
||||
case 2:
|
||||
return "DualCalibration"
|
||||
return "Dual Point"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
},
|
||||
rawPoint: {
|
||||
get() {
|
||||
return this.$store.state.point.rawPoint;
|
||||
return undefined; // TODO fix
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,76 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<CVrangeSlider
|
||||
v-model="value.hue"
|
||||
name="Hue"
|
||||
:min="0"
|
||||
:max="180"
|
||||
@input="handleData('hue')"
|
||||
@rollback="e => rollback('hue',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="value.saturation"
|
||||
name="Saturation"
|
||||
:min="0"
|
||||
:max="255"
|
||||
@input="handleData('saturation')"
|
||||
@rollback="e => rollback('saturation',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="value.value"
|
||||
name="Value"
|
||||
:min="0"
|
||||
:max="255"
|
||||
@input="handleData('value')"
|
||||
@rollback="e => rollback('value',e)"
|
||||
/>
|
||||
<v-divider
|
||||
color="black"
|
||||
style="margin-top: 5px"
|
||||
/>
|
||||
<v-row justify="center">
|
||||
<v-btn
|
||||
style="margin: 20px;"
|
||||
color="#ffd843"
|
||||
small
|
||||
@click="setFunction(1)"
|
||||
>
|
||||
<v-icon>colorize</v-icon>
|
||||
Eye drop
|
||||
</v-btn>
|
||||
<v-btn
|
||||
style="margin: 20px;"
|
||||
color="#ffd843"
|
||||
small
|
||||
@click="setFunction(2)"
|
||||
>
|
||||
<v-icon>add</v-icon>
|
||||
Expand Selection
|
||||
</v-btn>
|
||||
<v-btn
|
||||
style="margin: 20px;"
|
||||
color="#ffd843"
|
||||
small
|
||||
@click="setFunction(3)"
|
||||
>
|
||||
<v-icon>remove</v-icon>
|
||||
Shrink Selection
|
||||
</v-btn>
|
||||
</v-row>
|
||||
<v-divider color="black" />
|
||||
<CVswitch
|
||||
v-model="value.erode"
|
||||
name="Erode"
|
||||
@input="handleData('erode')"
|
||||
@rollback="e => rollback('erode',e)"
|
||||
/>
|
||||
<CVswitch
|
||||
v-model="value.dilate"
|
||||
name="Dilate"
|
||||
@input="handleData('dilate')"
|
||||
@rollback="e => rollback('dilate',e)"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CVrangeSlider
|
||||
v-model="hsvHue"
|
||||
name="Hue"
|
||||
:min="0"
|
||||
:max="180"
|
||||
@input="handlePipelineData('hsvHue')"
|
||||
@rollback="e => rollback('hue',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="hsvSaturation"
|
||||
name="Saturation"
|
||||
:min="0"
|
||||
:max="255"
|
||||
@input="handlePipelineData('hsvSaturation')"
|
||||
@rollback="e => rollback('saturation',e)"
|
||||
/>
|
||||
<CVrangeSlider
|
||||
v-model="hsvValue"
|
||||
name="Value"
|
||||
:min="0"
|
||||
:max="255"
|
||||
@input="handlePipelineData('hsvValue')"
|
||||
@rollback="e => rollback('value',e)"
|
||||
/>
|
||||
<v-divider
|
||||
color="black"
|
||||
style="margin-top: 5px"
|
||||
/>
|
||||
<v-row justify="center">
|
||||
<v-btn
|
||||
style="margin: 20px;"
|
||||
color="#ffd843"
|
||||
small
|
||||
@click="setFunction(1)"
|
||||
>
|
||||
<v-icon>colorize</v-icon>
|
||||
Eye drop
|
||||
</v-btn>
|
||||
<v-btn
|
||||
style="margin: 20px;"
|
||||
color="#ffd843"
|
||||
small
|
||||
@click="setFunction(2)"
|
||||
>
|
||||
<v-icon>add</v-icon>
|
||||
Expand Selection
|
||||
</v-btn>
|
||||
<v-btn
|
||||
style="margin: 20px;"
|
||||
color="#ffd843"
|
||||
small
|
||||
@click="setFunction(3)"
|
||||
>
|
||||
<v-icon>remove</v-icon>
|
||||
Shrink Selection
|
||||
</v-btn>
|
||||
</v-row>
|
||||
<v-divider color="black"/>
|
||||
<CVswitch
|
||||
v-model="erode"
|
||||
name="Erode"
|
||||
@input="handlePipelineData('erode')"
|
||||
@rollback="e => rollback('erode',e)"
|
||||
/>
|
||||
<CVswitch
|
||||
v-model="dilate"
|
||||
name="Dilate"
|
||||
@input="handlePipelineData('dilate')"
|
||||
@rollback="e => rollback('dilate',e)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -83,28 +83,56 @@
|
||||
CVrangeSlider,
|
||||
CVswitch
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
currentFunction: undefined,
|
||||
colorPicker: undefined,
|
||||
currentBinaryState: 0
|
||||
showThresholdState: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pipeline: {
|
||||
hsvHue: {
|
||||
get() {
|
||||
return this.$store.state.pipeline;
|
||||
}
|
||||
},
|
||||
driverState: {
|
||||
get() {
|
||||
return this.$store.state.driverMode;
|
||||
return this.$store.getters.currentPipelineSettings.hsvHue
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("driverMode", val);
|
||||
this.$store.commit("mutatePipeline", {"hsvHue": val})
|
||||
}
|
||||
}
|
||||
},
|
||||
hsvSaturation: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.hsvSaturation
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"hsvSaturation": val})
|
||||
}
|
||||
},
|
||||
hsvValue: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.hsvValue
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"hsvValue": val})
|
||||
}
|
||||
},
|
||||
erode: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.erode
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"erode": val});
|
||||
}
|
||||
},
|
||||
dilate: {
|
||||
get() {
|
||||
return this.$store.getters.currentPipelineSettings.dilate
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("mutatePipeline", {"dilate": val});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const self = this;
|
||||
@@ -119,25 +147,24 @@
|
||||
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
|
||||
"changePipelineSetting": {
|
||||
'hsvHue': [hsvArray[0][0], hsvArray[1][0]],
|
||||
'hsvSaturation': [hsvArray[0][1], hsvArray[1][1]],
|
||||
'hsvValue': [hsvArray[0][2], hsvArray[1][2]],
|
||||
'outputShowThresholded': this.showThresholdState,
|
||||
'cameraIndex': this.$store.state.currentCameraIndex
|
||||
}
|
||||
});
|
||||
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')
|
||||
this.showThresholdState = this.value.outputShowThresholded;
|
||||
if (this.showThresholdState === true) {
|
||||
this.value.outputShowThresholded = false;
|
||||
this.handlePipelineData('outputShowThresholded')
|
||||
}
|
||||
switch (index) {
|
||||
case 0:
|
||||
|
||||
Reference in New Issue
Block a user