mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-21 01:01:41 +00:00
Merge branch 'ColorPick' into dev
This commit is contained in:
ori agranat
121
chameleon-client/src/plugins/ColorPicker.js
Normal file
121
chameleon-client/src/plugins/ColorPicker.js
Normal file
@@ -0,0 +1,121 @@
|
||||
var canvas = undefined;
|
||||
var image = undefined;
|
||||
|
||||
function initColorPicker() {
|
||||
canvas = document.createElement('canvas');
|
||||
image = document.getElementById('CameraStream');
|
||||
canvas.width = image.width;
|
||||
canvas.height = image.height;
|
||||
}
|
||||
|
||||
//Called on click of the image,
|
||||
//Finds X,Y of the mouse on the image,
|
||||
//Draws the image on the (invisible) canvas
|
||||
//Reads the color values (pixelData) in X,Y of the canvas
|
||||
//calls the function to handle the button (either eyedrop,expand or shrink)
|
||||
function colorPickerClick(event, currentFunction, currentRange) {
|
||||
let rect = image.getBoundingClientRect();
|
||||
let x = Math.round(event.clientX - rect.left);
|
||||
let y = Math.round(event.clientY - rect.top);
|
||||
let context = canvas.getContext('2d');
|
||||
context.drawImage(image, 0, 0, image.width, image.height);
|
||||
let pixelData = context.getImageData(x, y, 1, 1).data;
|
||||
if (currentFunction !== undefined) {
|
||||
return currentFunction(pixelData, currentRange);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function eyeDrop(pixel) {
|
||||
let hsv = RGBtoHSV(pixel);
|
||||
range = widenRange([hsv,hsv.slice(0)]);//sends hsv and a copy of hsv
|
||||
return range
|
||||
}
|
||||
|
||||
function expand(pixel, currentRange) {
|
||||
let hsv = RGBtoHSV(pixel);
|
||||
let widenHSV = widenRange([[].concat(hsv), hsv]);
|
||||
return createRange(currentRange.concat(widenHSV));
|
||||
}
|
||||
|
||||
function shrink(pixel, currentRange) {
|
||||
let hsv = RGBtoHSV(pixel);
|
||||
let widenHSV = widenRange([[].concat(hsv), hsv]);
|
||||
if (!shrinkRange(currentRange, widenHSV[0]))//Tries to shrink the lower part of the widen HSV
|
||||
shrinkRange(currentRange, widenHSV[1]);//If the prev attempt failed, try to shrink the higher part of the widen HSV
|
||||
return currentRange
|
||||
}
|
||||
|
||||
//numbers is an array of 3 rgb values, returns array for 3 hsv values
|
||||
function RGBtoHSV(numbers) {
|
||||
let r = numbers[0],
|
||||
g = numbers[1],
|
||||
b = numbers[2];
|
||||
r = r / 255;
|
||||
g = g / 255;
|
||||
b = b / 255;
|
||||
let minRGB = Math.min(r, Math.min(g, b));
|
||||
let maxRGB = Math.max(r, Math.max(g, b));
|
||||
let d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r);
|
||||
let h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5);
|
||||
let H = 30 * (h - d / (maxRGB - minRGB));
|
||||
let S = 255 * (maxRGB - minRGB) / maxRGB;
|
||||
let V = 255 * maxRGB;
|
||||
if (isNaN(H))
|
||||
H = 0;
|
||||
if (isNaN(S))
|
||||
S = 0;
|
||||
if (isNaN(V))
|
||||
V = 0;
|
||||
return [Math.round(H), Math.round(S), Math.round(V)];
|
||||
}
|
||||
|
||||
//Loops though the colors array, finds the smallest and biggest value for H,S and V. Returns the range containing every color
|
||||
function createRange(HSVColors) {
|
||||
let range = [[], []];
|
||||
for (var i = 0; i < 3; i++) {
|
||||
range[0][i] = HSVColors[0][i];
|
||||
range[1][i] = HSVColors[0][i];
|
||||
for (var j = HSVColors.length - 1; j >= 0; j--) {
|
||||
range[0][i] = Math.min(HSVColors[j][i], range[0][i]);
|
||||
range[1][i] = Math.max(HSVColors[j][i], range[1][i]);
|
||||
}
|
||||
}
|
||||
return range;//[[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
|
||||
}
|
||||
|
||||
//This function adds 10 extra units to each side of the sliders, not to be confued with the expand selection button
|
||||
function widenRange(range) {
|
||||
let expanded = [[], []];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
//Expanding the range by 10
|
||||
expanded[0][i] = Math.max(0, range[0][i] - 10);
|
||||
expanded[1][i] = Math.min(255, range[1][i] + 10);
|
||||
}
|
||||
expanded[1][0] = Math.min(180, expanded[1][0]);//h is up to 180
|
||||
return expanded;
|
||||
}
|
||||
|
||||
//If color in range then take the closer range value to color and set it to color plus or minus 10
|
||||
//For example if hmax is 200 hmin is 100 and color's h is 120 range will become [130,200]
|
||||
function shrinkRange(range, color) {
|
||||
|
||||
let inside = true;
|
||||
for (let i = 0; i < color.length && inside; i++) {//Check if color is in range
|
||||
if (!(range[0][i] <= color[i] <= range[1][i]))
|
||||
inside = false;
|
||||
}
|
||||
|
||||
if (inside) {
|
||||
for (let j = 0; j < color.length; j++) {
|
||||
if (color[j] - range[0][j] < range[1][j] - color[j])
|
||||
range[0][j] = Math.min(range[0][j] + 10, range[1][j]);//shrink from min side
|
||||
else
|
||||
range[1][j] = Math.max(range[1][j] - 10, range[0][j]);//shrink from max side
|
||||
}
|
||||
}
|
||||
return inside;//returns if color is inside or not
|
||||
}
|
||||
|
||||
|
||||
export default {initColorPicker, colorPickerClick, eyeDrop, expand, shrink}
|
||||
@@ -22,6 +22,6 @@ export default new Router({
|
||||
path: '/settings',
|
||||
name: 'Settings',
|
||||
component: lazyLoad('Settings')
|
||||
}
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
@@ -1,72 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module org.jetbrains.idea.maven.project.MavenProjectsManager.isMavenModule="true" type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_12">
|
||||
<output url="file://$MODULE_DIR$/target/classes" />
|
||||
<output-test url="file://$MODULE_DIR$/target/test-classes" />
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/test/java" isTestSource="true" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/target" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
<orderEntry type="library" name="Maven: io.javalin:javalin:3.4.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.31" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib:1.3.31" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-common:1.3.31" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.jetbrains:annotations:13.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.31" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.slf4j:slf4j-api:1.7.26" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-server:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: javax.servlet:javax.servlet-api:3.1.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-http:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-util:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-io:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-webapp:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-xml:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-servlet:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-security:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-server:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-common:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-api:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-client:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-client:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-servlet:9.4.19.v20190610" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.json:json:20190722" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.slf4j:slf4j-nop:1.7.26" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.commons:commons-math3:3.6.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.msgpack:msgpack-core:0.8.18" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.msgpack:jackson-dataformat-msgpack:0.8.18" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apache.commons:commons-lang3:3.9" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-core:2.10.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-annotations:2.10.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-databind:2.10.1" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.junit.jupiter:junit-jupiter-engine:5.5.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.apiguardian:apiguardian-api:1.1.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.junit.platform:junit-platform-engine:1.5.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.opentest4j:opentest4j:1.2.0" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.junit.platform:junit-platform-commons:1.5.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: org.junit.jupiter:junit-jupiter-api:5.5.2" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-java:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:linuxaarch64bionic:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:linuxraspbian:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:linuxx86-64:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:osxx86-64:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:windowsx86-64:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.cameraserver:cameraserver-java:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-java:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:osxx86-64:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:linuxraspbian:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:linuxx86-64:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:linuxaarch64bionic:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:windowsx86-64:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.wpiutil:wpiutil-java:2020.1.1-beta-3-12-gb8c1024" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-java:3.4.7-2" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:linuxaarch64bionic:3.4.7-2" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:linuxraspbian:3.4.7-2" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:linuxx86-64:3.4.7-2" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:osxx86-64:3.4.7-2" level="project" />
|
||||
<orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:windowsx86-64:3.4.7-2" level="project" />
|
||||
</component>
|
||||
</module>
|
||||
Reference in New Issue
Block a user